Color picker improvements

js/Configuration.js

@@ -1,6 +1,7 @@
 import { css } from "lit"
 
 export default class Configuration {
+    static alphaPattern = "repeating-conic-gradient(#7c8184 0% 25%, #c2c3c4 0% 50%) 50% / 10px 10px"
     static colorDragEventName = "ueb-color-drag"
     static colorPickEventName = "ueb-color-pick"
     static colorWindowEventName = "ueb-color-window"

js/element/InputElement.js

@@ -0,0 +1,13 @@
+import InputTemplate from "../template/InputTemplate"
+import IElement from "./IElement"
+
+export default class InputElement extends IElement {
+
+    static elementName = "ueb-input"
+
+    constructor() {
+        super({}, new InputTemplate())
+    }
+}
+
+customElements.define(InputElement.elementName, InputElement)

js/template/ColorPickerWindowTemplate.js

@@ -2,6 +2,7 @@ import { html } from "lit"
 import { styleMap } from "lit/directives/style-map.js"
 import ColorHandlerElement from "../element/ColorHandlerElement"
 import ColorSliderElement from "../element/ColorSliderElement"
+import Configuration from "../Configuration"
 import LinearColorEntity from "../entity/LinearColorEntity"
 import Utility from "../Utility"
 import WindowTemplate from "./WindowTemplate"
@@ -61,7 +62,7 @@ export default class ColorPickerWindowTemplate extends WindowTemplate {
     }
 
     #hexRGBHandler =
-        /** @param {FocusEvent} v */
+        /** @param {UIEvent} v */
         v => {
             // Faster than innerText which causes reflow
             const input = Utility.clearHTMLWhitespace(/** @type {HTMLElement} */(v.target).innerHTML)
@@ -74,7 +75,7 @@ export default class ColorPickerWindowTemplate extends WindowTemplate {
         }
 
     #hexSRGBHandler =
-        /** @param {FocusEvent} v */
+        /** @param {UIEvent} v */
         v => {
             // Faster than innerText which causes reflow
             const input = Utility.clearHTMLWhitespace(/** @type {HTMLElement} */(v.target).innerHTML)
@@ -86,6 +87,17 @@ export default class ColorPickerWindowTemplate extends WindowTemplate {
             this.element.requestUpdate()
         }
 
+    #doOnEnter =
+        /** @param {(e: UIEvent) => void} action */
+        action =>
+            /** @param {KeyboardEvent} e */
+            e => {
+                if (e.code == "Enter") {
+                    action(e)
+                    e.preventDefault()
+                }
+            }
+
     #color = new LinearColorEntity()
     get color() {
         return this.#color
@@ -233,7 +245,7 @@ export default class ColorPickerWindowTemplate extends WindowTemplate {
             case 3:
                 channelLetter = "a"
                 channelValue = this.color.A.value
-                background = `repeating-conic-gradient(#7c8184 0% 25%, #c2c3c4 0% 50%) 50% / 10px 10px, ${getCommonBackground(channel)}`
+                background = `${Configuration.alphaPattern}, ${getCommonBackground(channel)}`
                 break
             case 4:
                 channelLetter = "h"
@@ -297,7 +309,8 @@ export default class ColorPickerWindowTemplate extends WindowTemplate {
             "--ueb-color-wheel-x": `${Math.round(this.color.S.value * Math.cos(theta) * wheelRadius + wheelRadius)}px`,
             "--ueb-color-wheel-y": `${Math.round(this.color.S.value * Math.sin(theta) * wheelRadius + wheelRadius)}px`,
         }
-        const colorHex = this.color.toRGBAString()
+        const colorRGB = this.color.toRGBAString()
+        const colorSRGB = this.color.toSRGBAString()
         const fullColorHex = this.fullColor.toRGBAString()
         return html`
             <div class="ueb-color-picker" style="${styleMap(style)}">
@@ -317,8 +330,13 @@ export default class ColorPickerWindowTemplate extends WindowTemplate {
                         <div class="ueb-color-picker-preview-old "
                             style="background: #${this.#initialColor.toRGBAString()}">
                         </div>
-                        <div class="ueb-color-picker-preview-new"
-                            style="background: #${this.color.toRGBAString()}">
+                        <div class="ueb-color-picker-preview-new">
+                            <div class="ueb-color-picker-preview-1"
+                                style="background: #${this.#colorHexReplace(3, "FF")}">
+                            </div>
+                            <div class="ueb-color-picker-preview-2"
+                                style="background: ${`linear-gradient(#${colorRGB}, #${colorRGB}),${Configuration.alphaPattern}`}">
+                            </div>
                         </div>
                         New
                     </div>
@@ -341,8 +359,9 @@ export default class ColorPickerWindowTemplate extends WindowTemplate {
                             <span class="ueb-color-control-label">Hex Linear</span>
                             <div class="ueb-color-picker-hex-linear ueb-text-input">
                                 <span class="ueb-pin-input-content" role="textbox" contenteditable="true"
-                                    .innerText="${this.color.toRGBAString()}"
-                                    @focusout="${this.#hexRGBHandler}">
+                                    .innerText="${colorRGB}"
+                                    @focusout="${this.#hexRGBHandler}"
+                                    @keydown="${this.#doOnEnter(this.#hexRGBHandler)}">
                                 </span>
                             </div>
                         </div>
@@ -350,8 +369,9 @@ export default class ColorPickerWindowTemplate extends WindowTemplate {
                             <span class="ueb-color-control-label">Hex sRGB</span>
                             <div class="ueb-color-picker-hex-srgb ueb-text-input">
                                 <span class="ueb-pin-input-content" role="textbox" contenteditable="true"
-                                    .innerText="${this.color.toSRGBAString()}"
-                                    @focusout="${this.#hexSRGBHandler}">
+                                    .innerText="${colorSRGB}"
+                                    @focusout="${this.#hexSRGBHandler}"
+                                    @keydown="${this.#doOnEnter(this.#hexSRGBHandler)}">
                                 </span>
                             </div>
                         </div>

js/template/InputTemplate.js

@@ -0,0 +1,24 @@
+import ITemplate from "./ITemplate"
+
+/** @typedef {import ("../element/InputElement").default} InputElement */
+
+/** @extends {ITemplate<InputElement>} */
+export default class InputTemplate extends ITemplate {
+
+    /** @param {Map} changedProperties */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties)
+        this.onFocusHandler =
+            /** @param {FocusEvent} e */
+            e => this.element.blueprint.dispatchEditTextEvent(true)
+        this.onFocusOutHandler =
+            /** @param {FocusEvent} e */
+            e => {
+                e.preventDefault()
+                document.getSelection()?.removeAllRanges() // Deselect text inside the input
+                this.element.blueprint.dispatchEditTextEvent(false)
+            }
+        this.element.addEventListener("focus", this.onFocusHandler)
+        this.element.addEventListener("focusout", this.onFocusOutHandler)
+    }
+}