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

@@ @@ -3,13 +3,13 @@ @@
 import debug from "debug";
 import { css, html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators.js";
 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));
+}
 class RainbowCoord {
@@ @@ -253,25 +253,23 @@ class PickerFloat { @@
       this.currentListener(this.getRainbow().colorAt(pos));
+    }
+  }
   private onOutsideMove(pos: ClientCoord) {
     const rp = this.toRainbow(pos);
     log("rp", rp);
     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) {
     log("start pick", clickPoint);
     const el = this.getFloatEl();
     let pos: RainbowCoord;
     try {
       pos = this.getRainbow().posFor(startColor);
     } catch (e) {
@@ @@ -279,21 +277,19 @@ class PickerFloat { @@
+    }
     this.rainbowOrigin = new ClientCoord( //
       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(() => {
       this.getFloatEl().moveLargeCrosshair(pos);
     }, 1);
     el.style.display = "block";
     log("set listener");
     this.currentListener = onNewHueSatColor;
+  }
   private hide() {
     const el = this.getFloatEl();
     el.style.display = "none";

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")
 export class Light9ColorPicker extends LitElement {
   static styles = [
     css`
@@ @@ -39,21 +38,23 @@ 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();
     pickerFloat.pageInit();
+  }
   update(changedProperties: PropertyValueMap<this>) {
@@ @@ -61,31 +62,28 @@ export class Light9ColorPicker extends L @@
       this.setColor(this.color);
+    }
     if (changedProperties.has("value") || changedProperties.has("hueSatColor")) {
       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
     this.hueSatColor = color(col).value(1).hex();
+  }

0 comments (0 inline, 0 general)