light9 Changeset - ba9aca728d65

Changeset - ba9aca728d65

Parent rev.

Child rev.

[Not reviewed]

default

0 2 0

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

fix v slider update; 'color' input attribute; clean up logs

2 files changed with 18 insertions and 24 deletions:

light9/web/floating_color_picker.ts

light9/web/light9-color-picker.ts

0 comments (0 inline, 0 general)

light9/web/floating_color_picker.ts

➞

Show inline comments

@@ @@ -6,7 +6,7 @@ import { customElement, query } from "li @@
 import color from "onecolor";
 import { SubEvent } from "sub-events";
 const log = debug("control");
+const log = debug("control.color.pick");
 function clamp(x: number, lo: number, hi: number) {
   return Math.max(lo, Math.min(hi, x));
@@ @@ -256,7 +256,6 @@ class PickerFloat { @@
   private onOutsideMove(pos: ClientCoord) {
     const rp = this.toRainbow(pos);
     log("rp", rp);
     this.onCanvasMove(rp);
+  }
@@ @@ -268,7 +267,6 @@ class PickerFloat { @@
+  }
   startPick(clickPoint: ClientCoord, startColor: string, onNewHueSatColor: (hsc: string) => void) {
     log("start pick", clickPoint);
     const el = this.getFloatEl();
     let pos: RainbowCoord;
@@ @@ -282,7 +280,6 @@ class PickerFloat { @@
       clickPoint.x - clamp(pos.x, 0, 400), //
       clickPoint.y - clamp(pos.y, 0, 200)
     );
     log("rainbow goes to", this.rainbowOrigin);
     el.placeRainbow(this.rainbowOrigin);
     setTimeout(() => {
@@ @@ -290,7 +287,6 @@ class PickerFloat { @@
     }, 1);
     el.style.display = "block";
     log("set listener");
     this.currentListener = onNewHueSatColor;
+  }

light9/web/light9-color-picker.ts

➞

Show inline comments

 import debug from "debug";
 import { css, html, LitElement, PropertyValueMap } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
+import { customElement, property, queryAsync, state } from "lit/decorators.js";
 import color from "onecolor";
 import { SubEvent } from "sub-events";
 import { ClientCoord, pickerFloat } from "./floating_color_picker";
-import { Slider } from "@material/mwc-slider";
+export { Slider } from "@material/mwc-slider";
 const log = debug("control");
+const log = debug("control.color");
 type int8 = number;
 @customElement("light9-color-picker")
@@ @@ -42,15 +41,17 @@ export class Light9ColorPicker extends L @@
   render() {
     return html`
       <div id="swatch" style="background-color: ${this.color}; border-color: ${this.hueSatColor}" @mousedown=${this.startFloatingPick}></div>
       <span id="vee"> V: <mwc-slider id="value" step="1" min="0" max="255" @input=${this.onVSliderChange}></mwc-slider> </span>
+      <span id="vee"> V: <mwc-slider id="value" .value=${this.value} step="1" min="0" max="255" @input=${this.onVSliderChange}></mwc-slider> </span>
     `;
+  }
   @property() color: string = "#000"; // actual output color, computed by value*hueSatColor
   @property() hueSatColor: string = "#fff"; // always V=1, to be scaled down
   @property() value: int8 = 0;
   // Selected color. Read/write. Equal to value*hueSatColor. Never null.
   @property() color: string = "#000";
   @query("#swatch") swatchEl!: HTMLElement;
   @query("#outOfBounds") outOfBoundsEl!: HTMLElement;
   @state() hueSatColor: string = "#fff"; // always full value
   @state() value: int8 = 0;
   @queryAsync("#swatch") swatchEl!: Promise<HTMLElement>;
   connectedCallback(): void {
     super.connectedCallback();
@@ @@ -64,25 +65,22 @@ export class Light9ColorPicker extends L @@
       this.color = color(this.hueSatColor)
         .value(this.value / 255)
         .hex();
       const sl = this.shadowRoot?.querySelector("#value") as Slider;
       if (sl) {
         sl.value = this.value;
+      }
       this.swatchEl.then((sw) => {
         sw.style.borderColor = this.hueSatColor;
       });
+    }
     super.update(changedProperties);
+  }
   private onVSliderChange(ev: CustomEvent) {
     this.value = ev.detail.value;
     this.swatchEl.style.borderColor = this.hueSatColor;
+  }
   // for outside users of the component
   setColor(col: string) {
     log(`set color pick to color ${col}`);
     if (col == "") {
       col = "#000";
+    }
     if (col === null) throw new Error("col===null");
     if (typeof col !== "string") throw new Error("typeof col=" + typeof col);
     this.value = color(col).value() * 255;
     // don't update this if only the value changed, or we desaturate

0 comments (0 inline, 0 general)