<!-- Temporary scrim on the rest of the page. It looks like we're dimming

            the page to look pretty, but really this is so we can track the mouse

            when it's outside the large canvas. -->

      <div id="outOfBounds" @mousemove=${this.onOutOfBoundsMove} @mouseup=${this.onMouseUp}></div>

      <div id="largeRainbowComp">

        <div id="largeRainbow" @mousemove=${this.onCanvasMove} @mouseup=${this.onMouseUp}></div>

        <div id="largeCrosshair"></div>

      </div>

    `;

  }

  // make top-left of rainbow image be at this pos

  placeRainbow(pos: ClientCoord) {

    const el = this.shadowRoot?.querySelector("#largeRainbowComp")! as HTMLElement;

    const cssBorder = 10;

    el.style.left = pos.x - cssBorder + "px";

    el.style.top = pos.y - cssBorder + "px";

  }

  moveLargeCrosshair(pos: RainbowCoord) {

    const ch = this.largeCrosshairEl;

    ch.style.left = pos.x - ch.offsetWidth / 2 + "px";

    ch.style.top = pos.y - ch.offsetHeight / 2 + "px";

  }

  private onCanvasMove(ev: MouseEvent) {

    this.canvasMove.emit(new RainbowCoord(ev.offsetX, ev.offsetY));

  }

  private onMouseUp(ev: MouseEvent) {

    this.mouseUp.emit();

  }

  private onOutOfBoundsMove(ev: MouseEvent) {

    this.outsideMove.emit(new ClientCoord(ev.clientX, ev.clientY));

  }

}

class PickerFloat {

  private rainbow?: RainbowCanvas;

  private currentListener?: (hsc: string) => void;

  private rainbowOrigin: ClientCoord = new ClientCoord(0, 0);

  private floatEl?: Light9ColorPickerFloat;

  pageInit() {

    this.getFloatEl();

    this.getRainbow();

  }

  private getFloatEl(): Light9ColorPickerFloat {

    if (!this.floatEl) {

      this.floatEl = document.createElement("light9-color-picker-float") as Light9ColorPickerFloat;

      this.subscribeToFloatElement(this.floatEl);

      document.body.appendChild(this.floatEl);

    }

    return this.floatEl;

  }

  private subscribeToFloatElement(el: Light9ColorPickerFloat) {

    el.canvasMove.subscribe(this.onCanvasMove.bind(this));

    el.outsideMove.subscribe(this.onOutsideMove.bind(this));

    el.mouseUp.subscribe(() => {

      this.hide();

    });

  }

  private onCanvasMove(pos: RainbowCoord) {

    pos = new RainbowCoord( //

      clamp(pos.x, 0, 400 - 1), //

      clamp(pos.y, 0, 200 - 1)

    );

    this.getFloatEl().moveLargeCrosshair(pos);

    if (this.currentListener) {

      this.currentListener(this.getRainbow().colorAt(pos));

    }

  }

  private onOutsideMove(pos: ClientCoord) {

    const rp = this.toRainbow(pos);

    this.onCanvasMove(rp);

  }

  private getRainbow(): RainbowCanvas {

    if (!this.rainbow) {

      this.rainbow = new RainbowCanvas("/colorpick_rainbow_large.png", new RainbowCoord(400, 200));

    }

    return this.rainbow;

  }

  startPick(clickPoint: ClientCoord, startColor: string, onNewHueSatColor: (hsc: string) => void) {

    const el = this.getFloatEl();

    let pos: RainbowCoord;

    try {

      pos = this.getRainbow().posFor(startColor);

    } catch (e) {

      pos = new RainbowCoord(-999, -999);

    }

    this.rainbowOrigin = new ClientCoord( //