Mercurial > code > home > repos > light9

annotate web/light9-color-picker.ts @ 2376:4556eebe5d73

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
topdir reorgs; let pdm have its src/ dir; separate vite area from light9/
author drewp@bigasterisk.com
date Sun, 12 May 2024 19:02:10 -0700
parents light9/web/light9-color-picker.ts@18d6bdd422f2
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
2240
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
1 import debug from "debug";
2242
9645581bff24 redo color picker code in lit
drewp@bigasterisk.com
parents: 2241
diff changeset
2 import { css, html, LitElement, PropertyValueMap } from "lit";
2243
ba9aca728d65 fix v slider update; 'color' input attribute; clean up logs
drewp@bigasterisk.com
parents: 2242
diff changeset
3 import { customElement, property, queryAsync, state } from "lit/decorators.js";
2242
9645581bff24 redo color picker code in lit
drewp@bigasterisk.com
parents: 2241
diff changeset
4 import color from "onecolor";
9645581bff24 redo color picker code in lit
drewp@bigasterisk.com
parents: 2241
diff changeset
5 import { ClientCoord, pickerFloat } from "./floating_color_picker";
2243
ba9aca728d65 fix v slider update; 'color' input attribute; clean up logs
drewp@bigasterisk.com
parents: 2242
diff changeset
6 export { Slider } from "@material/mwc-slider";
2240
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
7
2243
ba9aca728d65 fix v slider update; 'color' input attribute; clean up logs
drewp@bigasterisk.com
parents: 2242
diff changeset
8 const log = debug("control.color");
2242
9645581bff24 redo color picker code in lit
drewp@bigasterisk.com
parents: 2241
diff changeset
9 type int8 = number;
2240
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
10
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
11 @customElement("light9-color-picker")
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
12 export class Light9ColorPicker extends LitElement {
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
13 static styles = [
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
14 css`
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
15 :host {
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
16 position: relative;
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
17 display: flex;
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
18 align-items: center;
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
19 flex-wrap: wrap;
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
20 user-select: none;
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
21 }
1609
0bb3051fd6fd move colorpick to its own file
Drew Perttula <drewp@bigasterisk.com>
parents:
diff changeset
22
2240
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
23 #swatch {
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
24 display: inline-block;
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
25 width: 50px;
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
26 height: 30px;
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
27 margin-right: 3px;
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
28 border: 1px solid #333;
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
29 }
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
30
2242
9645581bff24 redo color picker code in lit
drewp@bigasterisk.com
parents: 2241
diff changeset
31 mwc-slider {
2240
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
32 width: 160px;
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
33 }
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
34
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
35 #vee {
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
36 display: flex;
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
37 align-items: center;
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
38 }
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
39 `,
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
40 ];
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
41 render() {
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
42 return html`
2242
9645581bff24 redo color picker code in lit
drewp@bigasterisk.com
parents: 2241
diff changeset
43 <div id="swatch" style="background-color: ${this.color}; border-color: ${this.hueSatColor}" @mousedown=${this.startFloatingPick}></div>
2243
ba9aca728d65 fix v slider update; 'color' input attribute; clean up logs
drewp@bigasterisk.com
parents: 2242
diff changeset
44 <span id="vee"> V: <mwc-slider id="value" .value=${this.value} step="1" min="0" max="255" @input=${this.onVSliderChange}></mwc-slider> </span>
2240
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
45 `;
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
46 }
2243
ba9aca728d65 fix v slider update; 'color' input attribute; clean up logs
drewp@bigasterisk.com
parents: 2242
diff changeset
47
ba9aca728d65 fix v slider update; 'color' input attribute; clean up logs
drewp@bigasterisk.com
parents: 2242
diff changeset
48 // Selected color. Read/write. Equal to value*hueSatColor. Never null.
ba9aca728d65 fix v slider update; 'color' input attribute; clean up logs
drewp@bigasterisk.com
parents: 2242
diff changeset
49 @property() color: string = "#000";
2242
9645581bff24 redo color picker code in lit
drewp@bigasterisk.com
parents: 2241
diff changeset
50
2243
ba9aca728d65 fix v slider update; 'color' input attribute; clean up logs
drewp@bigasterisk.com
parents: 2242
diff changeset
51 @state() hueSatColor: string = "#fff"; // always full value
ba9aca728d65 fix v slider update; 'color' input attribute; clean up logs
drewp@bigasterisk.com
parents: 2242
diff changeset
52 @state() value: int8 = 0;
ba9aca728d65 fix v slider update; 'color' input attribute; clean up logs
drewp@bigasterisk.com
parents: 2242
diff changeset
53
ba9aca728d65 fix v slider update; 'color' input attribute; clean up logs
drewp@bigasterisk.com
parents: 2242
diff changeset
54 @queryAsync("#swatch") swatchEl!: Promise<HTMLElement>;
2242
9645581bff24 redo color picker code in lit
drewp@bigasterisk.com
parents: 2241
diff changeset
55
9645581bff24 redo color picker code in lit
drewp@bigasterisk.com
parents: 2241
diff changeset
56 connectedCallback(): void {
9645581bff24 redo color picker code in lit
drewp@bigasterisk.com
parents: 2241
diff changeset
57 super.connectedCallback();
9645581bff24 redo color picker code in lit
drewp@bigasterisk.com
parents: 2241
diff changeset
58 pickerFloat.pageInit();
2240
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
59 }
2242
9645581bff24 redo color picker code in lit
drewp@bigasterisk.com
parents: 2241
diff changeset
60 update(changedProperties: PropertyValueMap<this>) {
2246
5c269c03863d WIP device settings page can now load and save ok. Omitted GraphToControls for now
drewp@bigasterisk.com
parents: 2243
diff changeset
61 super.update(changedProperties);
2242
9645581bff24 redo color picker code in lit
drewp@bigasterisk.com
parents: 2241
diff changeset
62 if (changedProperties.has("color")) {
9645581bff24 redo color picker code in lit
drewp@bigasterisk.com
parents: 2241
diff changeset
63 this.setColor(this.color);
2240
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
64 }
2242
9645581bff24 redo color picker code in lit
drewp@bigasterisk.com
parents: 2241
diff changeset
65 if (changedProperties.has("value") || changedProperties.has("hueSatColor")) {
2265
18d6bdd422f2 update after boost
drewp@bigasterisk.com
parents: 2246
diff changeset
66 this.updateColorFromHSV();
2243
ba9aca728d65 fix v slider update; 'color' input attribute; clean up logs
drewp@bigasterisk.com
parents: 2242
diff changeset
67
2246
5c269c03863d WIP device settings page can now load and save ok. Omitted GraphToControls for now
drewp@bigasterisk.com
parents: 2243
diff changeset
68 this.dispatchEvent(new CustomEvent("input", { detail: { value: this.color } }));
5c269c03863d WIP device settings page can now load and save ok. Omitted GraphToControls for now
drewp@bigasterisk.com
parents: 2243
diff changeset
69
2243
ba9aca728d65 fix v slider update; 'color' input attribute; clean up logs
drewp@bigasterisk.com
parents: 2242
diff changeset
70 this.swatchEl.then((sw) => {
ba9aca728d65 fix v slider update; 'color' input attribute; clean up logs
drewp@bigasterisk.com
parents: 2242
diff changeset
71 sw.style.borderColor = this.hueSatColor;
ba9aca728d65 fix v slider update; 'color' input attribute; clean up logs
drewp@bigasterisk.com
parents: 2242
diff changeset
72 });
2240
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
73 }
2242
9645581bff24 redo color picker code in lit
drewp@bigasterisk.com
parents: 2241
diff changeset
74 }
9645581bff24 redo color picker code in lit
drewp@bigasterisk.com
parents: 2241
diff changeset
75
2265
18d6bdd422f2 update after boost
drewp@bigasterisk.com
parents: 2246
diff changeset
76 private updateColorFromHSV() {
18d6bdd422f2 update after boost
drewp@bigasterisk.com
parents: 2246
diff changeset
77 this.color = color(this.hueSatColor)
18d6bdd422f2 update after boost
drewp@bigasterisk.com
parents: 2246
diff changeset
78 .value(this.value / 255)
18d6bdd422f2 update after boost
drewp@bigasterisk.com
parents: 2246
diff changeset
79 .hex();
18d6bdd422f2 update after boost
drewp@bigasterisk.com
parents: 2246
diff changeset
80 }
18d6bdd422f2 update after boost
drewp@bigasterisk.com
parents: 2246
diff changeset
81
2242
9645581bff24 redo color picker code in lit
drewp@bigasterisk.com
parents: 2241
diff changeset
82 private onVSliderChange(ev: CustomEvent) {
9645581bff24 redo color picker code in lit
drewp@bigasterisk.com
parents: 2241
diff changeset
83 this.value = ev.detail.value;
2240
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
84 }
2242
9645581bff24 redo color picker code in lit
drewp@bigasterisk.com
parents: 2241
diff changeset
85
9645581bff24 redo color picker code in lit
drewp@bigasterisk.com
parents: 2241
diff changeset
86 // for outside users of the component
9645581bff24 redo color picker code in lit
drewp@bigasterisk.com
parents: 2241
diff changeset
87 setColor(col: string) {
2243
ba9aca728d65 fix v slider update; 'color' input attribute; clean up logs
drewp@bigasterisk.com
parents: 2242
diff changeset
88 if (col === null) throw new Error("col===null");
ba9aca728d65 fix v slider update; 'color' input attribute; clean up logs
drewp@bigasterisk.com
parents: 2242
diff changeset
89 if (typeof col !== "string") throw new Error("typeof col=" + typeof col);
2242
9645581bff24 redo color picker code in lit
drewp@bigasterisk.com
parents: 2241
diff changeset
90 this.value = color(col).value() * 255;
2240
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
91
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
92 // don't update this if only the value changed, or we desaturate
2242
9645581bff24 redo color picker code in lit
drewp@bigasterisk.com
parents: 2241
diff changeset
93 this.hueSatColor = color(col).value(1).hex();
2240
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
94 }
2242
9645581bff24 redo color picker code in lit
drewp@bigasterisk.com
parents: 2241
diff changeset
95
9645581bff24 redo color picker code in lit
drewp@bigasterisk.com
parents: 2241
diff changeset
96 private startFloatingPick(ev: MouseEvent) {
9645581bff24 redo color picker code in lit
drewp@bigasterisk.com
parents: 2241
diff changeset
97 if (this.value < (20 as int8)) {
9645581bff24 redo color picker code in lit
drewp@bigasterisk.com
parents: 2241
diff changeset
98 log("boost");
9645581bff24 redo color picker code in lit
drewp@bigasterisk.com
parents: 2241
diff changeset
99 this.value = 255 as int8;
2265
18d6bdd422f2 update after boost
drewp@bigasterisk.com
parents: 2246
diff changeset
100 this.updateColorFromHSV();
2240
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
101 }
2242
9645581bff24 redo color picker code in lit
drewp@bigasterisk.com
parents: 2241
diff changeset
102 pickerFloat.startPick(new ClientCoord(ev.clientX, ev.clientY), this.color, (hsc: string) => {
9645581bff24 redo color picker code in lit
drewp@bigasterisk.com
parents: 2241
diff changeset
103 this.hueSatColor = hsc;
9645581bff24 redo color picker code in lit
drewp@bigasterisk.com
parents: 2241
diff changeset
104 });
2240
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
105 }
650375a47213 start color-picker port from polymer to lit
drewp@bigasterisk.com
parents: 1991
diff changeset
106 }