light9 Changeset - 698da65519a3

Changeset - 698da65519a3

Parent rev.

Child rev.

[Not reviewed]

default

0 1 0

drewp@bigasterisk.com - 20 months ago 2023-05-29 20:23:16
drewp@bigasterisk.com

attempt to work around :host style not applying since this el got transplanted

1 file changed with 10 insertions and 1 deletions:

light9/web/floating_color_picker.ts

0 comments (0 inline, 0 general)

light9/web/floating_color_picker.ts

➞

Show inline comments

@@ @@ -209,52 +209,61 @@ class Light9ColorPickerFloat extends Lit @@
   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 forceHostStyle(el: HTMLElement) {
     el.style.zIndex = "10";
     el.style.position = "fixed";
     el.style.left = "0";
     el.style.top = "0";
     el.style.width = "100%";
     el.style.height = "100%";
     el.style.display = "none";
+  }
   private getFloatEl(): Light9ColorPickerFloat {
     if (!this.floatEl) {
       this.floatEl = document.createElement("light9-color-picker-float") as Light9ColorPickerFloat;
       this.forceHostStyle(this.floatEl);
       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));
+    }
+  }

0 comments (0 inline, 0 general)