30:T428,viewof fourColorSelect = { let div = htl.html`

`; Object.assign(div.style, { display: "flex", maxWidth: "300px" }); let picker = pickColorFromImage(pickImageFile); Object.assign(picker.style, { flex: 2, maxWidth: "200px" }); let colorInputs = { c1: colorInputWithPicker(picker, { value: "#ffffff" }), c2: colorInputWithPicker(picker, { value: "#0000ff" }), c3: colorInputWithPicker(picker, { value: "#ff0000" }), c4: colorInputWithPicker(picker, { value: "#000000" }) }; let form = Inputs.form(colorInputs); Object.assign(form.style, { flex: 1, maxWidth: "70px" }); div.append(form, picker); Object.defineProperty(div, "value", { get() { return form.value; }, set(v) { form.value = v; } }); for (let ci of Object.keys(colorInputs)) { colorInputs[ci].addEventListener("input", () => { div.dispatchEvent(new CustomEvent("input")); }); } form.addEventListener("input", () => { div.dispatchEvent(new CustomEvent("input")); }); return div; }31:T6e4,function colorInputWithPicker(picker, options) { let div = htl.html`

`; Object.assign(div.style, { maxWidth: "200px", display: "flex" }); let colorInput = Inputs.color(options); colorInput.querySelector("output").style.display = "none"; Object.assign(colorInput.style, { maxWidth: "30px", flex: 1 //display: "inline" }); Object.defineProperty(div, "value", { get() { return colorInput.value; }, set(v) { colorInput.value = v; } }); colorInput.addEventListener("input", (evt) => { div.dispatchEvent(new CustomEvent("input")); }); let pickerPanel = htl.html`

`; Object.assign(pickerPanel.style, { maxWidth: "28px", maxHeight: "28px", background: "#EEE", borderRadius: "5px", flex: 2 }); let pickIcon = svg`${pickIconCode}`; Object.assign(pickIcon.style, { paddingLeft: "2px", paddingTop: "2px" }); let waitIcon = svg`${waitIconCode}`; Object.assign(waitIcon.style, { paddingLeft: "2px", paddingTop: "2px" }); pickerPanel.onmouseenter = () => (pickerPanel.style.background = "#CCC"); pickerPanel.onmouseleave = () => (pickerPanel.style.background = "#EEE"); pickerPanel.onmousedown = () => { pickerPanel.innerHTML = ""; pickerPanel.prepend(waitIcon); div.style.cursor = "pointer"; picker.setCallback((color) => { colorInput.value = d3.color(color).hex(); colorInput.dispatchEvent(new CustomEvent("input")); div.dispatchEvent(new CustomEvent("input")); div.style.cursor = "default"; pickerPanel.innerHTML = ""; pickerPanel.prepend(pickIcon); picker.setCallback(null); }); }; pickerPanel.append(pickIcon); div.append(colorInput, pickerPanel); return div; }32:T81b,function pickColorFromImage( img, { height = 256, callback = null, color = "red" } = {} ) { const aspect = img.width / img.height; const width = height * aspect; const div = htl.html`

`; Object.assign(div.style, { height: `${height}px`, width: `${width}px`, display: "flex", flexDirection: "row" }); const canvas = htl.html`