Colors wip

dist/css/ueb-style.css

@@ -664,6 +664,65 @@ ueb-pin[data-type=vector] {
   --ueb-pin-color-rgb: var(--ueb-pin-color-vector);
 }
 
+.ueb-vertical-slider > ueb-ui-slider {
+  position: relative;
+  padding-bottom: 10px;
+}
+.ueb-vertical-slider > ueb-ui-slider::before, .ueb-vertical-slider > ueb-ui-slider::after {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+}
+.ueb-vertical-slider > ueb-ui-slider::before {
+  left: -4px;
+  border-left-color: #e0e0e0;
+}
+.ueb-vertical-slider > ueb-ui-slider::after {
+  right: -4px;
+  border-right-color: #e0e0e0;
+}
+
+.ueb-horizontal-slider {
+  position: relative;
+  border: 1px solid #383838;
+  border-radius: 6px;
+  padding: 1px;
+  background: #0f0f0f;
+}
+.ueb-horizontal-slider:hover {
+  cursor: ew-resize;
+}
+
+.ueb-horizontal-slider > ueb-ui-slider {
+  display: block;
+  position: relative;
+  height: 20px;
+  border-radius: 5px;
+  background: #383838;
+}
+
+.ueb-horizontal-slider-text {
+  position: absolute;
+  padding: 0 5px;
+  line-height: 20px;
+  z-index: 1;
+}
+
+.ueb-toggle-control::before {
+  content: "";
+  display: inline-block;
+  border-top: 5px solid #e0e0e0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  vertical-align: middle;
+}
+.ueb-toggle-control:hover {
+  cursor: pointer;
+}
+
 ueb-window {
   display: block;
   position: absolute;
@@ -741,44 +800,28 @@ ueb-color-handler {
 .ueb-color-picker-value {
   margin: 0 6px;
   padding-bottom: 10px;
-  width: 30px;
+  width: 25px;
 }
 
 .ueb-color-picker-saturation {
+  margin-left: 25px;
   background-image: linear-gradient(to bottom, transparent 10px, #FFFFFF 100%);
 }
 
 .ueb-color-picker-value {
+  margin-right: 25px;
   background-image: linear-gradient(to bottom, transparent 10px, #000000 100%);
 }
 
-ueb-color-slider {
+ueb-ui-slider {
   display: block;
-  position: relative;
-  padding-bottom: 10px;
-}
-ueb-color-slider::before, ueb-color-slider::after {
-  content: "";
-  display: block;
-  position: absolute;
-  width: 0;
-  height: 0;
-  border: 5px solid transparent;
-}
-ueb-color-slider::before {
-  left: -4px;
-  border-left-color: #e0e0e0;
-}
-ueb-color-slider::after {
-  right: -4px;
-  border-right-color: #e0e0e0;
 }
 
-.ueb-color-picker-saturation ueb-color-slider {
+.ueb-color-picker-saturation ueb-ui-slider {
   top: calc(100% - var(--ueb-color-s) * 100%);
 }
 
-.ueb-color-picker-value ueb-color-slider {
+.ueb-color-picker-value ueb-ui-slider {
   top: calc(100% - var(--ueb-color-v) * 100%);
 }
 
@@ -803,4 +846,62 @@ ueb-color-slider::after {
   height: 40px;
 }
 
+.ueb-color-picker-advanced {
+  display: flex;
+  column-gap: 10px;
+  padding-top: 5px;
+}
+
+.ueb-color-picker-advanced .ueb-color-picker-column {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex-grow: 1;
+}
+
+.ueb-color-picker-advanced .ueb-color-picker-column > div {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+.ueb-color-picker-advanced .ueb-color-picker-column > div > div {
+  flex-grow: 1;
+}
+
+.ueb-color-picker-advanced .ueb-horizontal-slider {
+  flex-grow: 1;
+}
+
+.ueb-color-picker-r .ueb-horizontal-slider > ueb-ui-slider {
+  width: calc(var(--ueb-color-r) * 100%);
+}
+
+.ueb-color-picker-g .ueb-horizontal-slider > ueb-ui-slider {
+  width: calc(var(--ueb-color-g) * 100%);
+}
+
+.ueb-color-picker-b .ueb-horizontal-slider > ueb-ui-slider {
+  width: calc(var(--ueb-color-b) * 100%);
+}
+
+.ueb-color-picker-a .ueb-horizontal-slider > ueb-ui-slider {
+  width: calc(var(--ueb-color-a) * 100%);
+}
+
+.ueb-color-picker-h .ueb-horizontal-slider > ueb-ui-slider {
+  width: calc(var(--ueb-color-h) * 100%);
+}
+
+.ueb-color-picker-s .ueb-horizontal-slider > ueb-ui-slider {
+  width: calc(var(--ueb-color-s) * 100%);
+}
+
+.ueb-color-picker-v .ueb-horizontal-slider > ueb-ui-slider {
+  width: calc(var(--ueb-color-v) * 100%);
+}
+
+.ueb-color-picker-gradient {
+  height: 6px;
+}
+
 /*# sourceMappingURL=ueb-style.css.map */

dist/css/ueb-style.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-link.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-type-color.scss","../../scss/ueb-window.scss"],"names":[],"mappings":"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","file":"ueb-style.css"}
+{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-link.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-type-color.scss","../../scss/ueb-ui-controls.scss","../../scss/ueb-window.scss"],"names":[],"mappings":"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","file":"ueb-style.css"}

dist/css/ueb-style.min.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-link.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-type-color.scss","../../scss/ueb-window.scss"],"names":[],"mappings":"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","file":"ueb-style.min.css"}
+{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-link.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-type-color.scss","../../scss/ueb-ui-controls.scss","../../scss/ueb-window.scss"],"names":[],"mappings":"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","file":"ueb-style.min.css"}

dist/ueblueprint.js

@@ -561,6 +561,15 @@ class Utility {
         return num.toFixed(decimals)
     }
 
+    /**
+     * @param {Number} num
+     * @param {Number} decimals
+     */
+    static roundDecimals(num, decimals = 1) {
+        const power = 10 ** decimals;
+        return Math.round(num * power) / power
+    }
+
     /**
      * @param {Number[]} viewportLocation
      * @param {HTMLElement} movementElement
@@ -1064,10 +1073,10 @@ class LinearColorEntity extends IEntity {
         /** @type {RealUnitEntity} */ this.H;
         /** @type {RealUnitEntity} */ this.S;
         /** @type {RealUnitEntity} */ this.V;
-        this.#updateValues();
+        this.#updateHSV();
     }
 
-    #updateValues() {
+    #updateHSV() {
         const r = this.R.value;
         const g = this.G.value;
         const b = this.B.value;
@@ -1076,6 +1085,7 @@ class LinearColorEntity extends IEntity {
             && !(Math.abs(r - b) > Number.EPSILON)
             && !(Math.abs(g - b) > Number.EPSILON)
         ) {
+            this.V.value = 0;
             return
         }
         const max = Math.max(r, g, b);
@@ -1103,7 +1113,21 @@ class LinearColorEntity extends IEntity {
     }
 
     /** @param {Number[]} param0 */
-    setFromHSVA([h, s, v, a = 1]) {
+    setFromRGBA([r, g, b, a = 1]) {
+        this.R.value = r;
+        this.G.value = g;
+        this.B.value = b;
+        this.A.value = a;
+        this.#updateHSV();
+    }
+
+    /**
+     * @param {Number} h
+     * @param {Number} s
+     * @param {Number} v
+     * @param {Number} a
+     */
+    setFromHSVA(h, s, v, a = 1) {
         const i = Math.floor(h * 6);
         const f = h * 6 - i;
         const p = v * (1 - s);
@@ -1122,12 +1146,7 @@ class LinearColorEntity extends IEntity {
 
     setFromWheelLocation([x, y], v, a) {
         const [r, theta] = Utility.getPolarCoordinates([x, y], true);
-        this.setFromHSVA([
-            1 - theta / (2 * Math.PI),
-            r,
-            v,
-            a,
-        ]);
+        this.setFromHSVA(1 - theta / (2 * Math.PI), r, v, a);
     }
 
     toRGBA() {
@@ -3785,8 +3804,8 @@ class IDraggableTemplate extends ITemplate {
  */
 class IDraggableControlTemplate extends IDraggableTemplate {
 
-    /** @param {[Number, Number]} param0 */
-    #locationChangeCallback = ([x, y], ..._) => { }
+    /** @type {(x: Number, y: Number) => void} */
+    #locationChangeCallback
     get locationChangeCallback() {
         return this.#locationChangeCallback
     }
@@ -3817,7 +3836,7 @@ class IDraggableControlTemplate extends IDraggableTemplate {
 
     /**  @param {[Number, Number]} param0 */
     adjustLocation([x, y]) {
-        this.#locationChangeCallback([x, y]);
+        this.locationChangeCallback?.(x, y);
         return [x, y]
     }
 }
@@ -3834,7 +3853,7 @@ class ColorHandlerTemplate extends IDraggableControlTemplate {
         y = -(y - radius);
         let [r, theta] = Utility.getPolarCoordinates([x, y]);
         r = Math.min(r, radius), [x, y] = Utility.getCartesianCoordinates([r, theta]);
-        this.locationChangeCallback?.([x / radius, y / radius]);
+        this.locationChangeCallback?.(x / radius, y / radius);
         x = Math.round(x + radius);
         y = Math.round(-y + radius);
         return [x, y]
@@ -3898,11 +3917,17 @@ customElements.define("ueb-color-handler", ColorHandlerElement);
 /** @extends {IDraggableControlTemplate<ColorHandlerElement>} */
 class ColorSliderTemplate extends IDraggableControlTemplate {
 
+    createInputObjects() {
+        return [
+            ...super.createInputObjects(),
+        ]
+    }
+
     /**  @param {[Number, Number]} param0 */
     adjustLocation([x, y]) {
-        x = 0;
+        x = Utility.clamp(x, 0, this.movementSpaceSize[0]);
         y = Utility.clamp(y, 0, this.movementSpaceSize[1]);
-        this.locationChangeCallback?.([x / this.movementSpaceSize[0], 1 - y / this.movementSpaceSize[1]]);
+        this.locationChangeCallback?.(x / this.movementSpaceSize[0], 1 - y / this.movementSpaceSize[1]);
         return [x, y]
     }
 }
@@ -3917,7 +3942,7 @@ class ColorSliderElement extends IDraggableControlElement {
     }
 }
 
-customElements.define("ueb-color-slider", ColorSliderElement);
+customElements.define("ueb-ui-slider", ColorSliderElement);
 
 /** @typedef {import("../element/IDraggableElement").default} IDraggableElement */
 
@@ -4006,6 +4031,41 @@ class ColorPickerWindowTemplate extends WindowTemplate {
         return this.#valueSlider
     }
 
+    #rSlider = new ColorSliderElement()
+    get rSlider() {
+        return this.#rSlider
+    }
+
+    #gSlider = new ColorSliderElement()
+    get gSlider() {
+        return this.#gSlider
+    }
+
+    #bSlider = new ColorSliderElement()
+    get bSlider() {
+        return this.#bSlider
+    }
+
+    #aSlider = new ColorSliderElement()
+    get aSlider() {
+        return this.#aSlider
+    }
+
+    #hSlider = new ColorSliderElement()
+    get hSlider() {
+        return this.#hSlider
+    }
+
+    #sSlider = new ColorSliderElement()
+    get sSlider() {
+        return this.#sSlider
+    }
+
+    #vSlider = new ColorSliderElement()
+    get vSlider() {
+        return this.#vSlider
+    }
+
     #color = new LinearColorEntity()
     get color() {
         return this.#color
@@ -4030,43 +4090,174 @@ class ColorPickerWindowTemplate extends WindowTemplate {
         return this.#initialColor
     }
 
+    #tempColor = new LinearColorEntity()
+
+    #colorHexReplace(channel, value) {
+        const colorHex = this.color.toRGBAString();
+        return `${colorHex.substring(0, 2 * channel)}${value}${colorHex.substring(2 + 2 * channel)}`
+    }
 
     connectedCallback() {
         super.connectedCallback();
         this.#initialColor = this.element.windowOptions.getPinColor();
-        this.color.setFromHSVA([
+        this.color.setFromHSVA(
             this.initialColor.H.value,
             this.initialColor.S.value,
             this.initialColor.V.value,
-            this.initialColor.A.value
-        ]);
-        this.fullColor.setFromHSVA([this.color.H.value, 1, 1, 1]);
+            this.initialColor.A.value,
+        );
+        this.fullColor.setFromHSVA(this.color.H.value, 1, 1, 1);
     }
 
     /** @param {Map} changedProperties */
     firstUpdated(changedProperties) {
         this.wheelHandler.template.locationChangeCallback =
-            /** @param {[Number, Number]} param0 x, y in the range [-1, 1] */
-            ([x, y]) => {
+            /**
+             * @param {Number} x in the range [0, 1]
+             * @param {Number} y in the range [0, 1]
+             */
+            (x, y) => {
                 this.color.setFromWheelLocation([x, y], this.color.V.value, this.color.A.value);
-                this.fullColor.setFromHSVA([this.color.H.value, 1, 1, 1]);
+                this.fullColor.setFromHSVA(this.color.H.value, 1, 1, 1);
                 this.element.requestUpdate();
             };
         this.saturationSlider.template.locationChangeCallback =
-            /** @param {[Number, Number]} param0 y is in the range [0, 1] */
-            ([_, y]) => {
-                this.color.setFromHSVA([this.color.H.value, y, this.color.V.value, this.color.A.value]);
+            /** @param {Number} x in the range [0, 1] */
+            (x, y) => {
+                this.color.setFromHSVA(this.color.H.value, y, this.color.V.value, this.color.A.value);
                 this.element.requestUpdate();
             };
         this.valueSlider.template.locationChangeCallback =
-            /** @param {[Number, Number]} param0 y is in the range [0, 1] */
-            ([_, y]) => {
-                this.color.setFromHSVA([this.color.H.value, this.color.S.value, y, this.color.A.value]);
+            /** @param {Number} x in the range [0, 1] */
+            (x, y) => {
+                this.color.setFromHSVA(this.color.H.value, this.color.S.value, y, this.color.A.value);
+                this.element.requestUpdate();
+            };
+        this.rSlider.template.locationChangeCallback =
+            /** @param {Number} x in the range [0, 1] */
+            (x, y) => {
+                this.color.setFromRGBA([x, this.color.G.value, this.color.B.value, this.color.A.value]);
+                this.element.requestUpdate();
+            };
+        this.gSlider.template.locationChangeCallback =
+            /** @param {Number} x in the range [0, 1] */
+            (x, y) => {
+                this.color.setFromRGBA([this.color.R.value, x, this.color.B.value, this.color.A.value]);
+                this.element.requestUpdate();
+            };
+        this.bSlider.template.locationChangeCallback =
+            /** @param {Number} x in the range [0, 1] */
+            (x, y) => {
+                this.color.setFromRGBA([this.color.R.value, this.color.G.value, x, this.color.A.value]);
+                this.element.requestUpdate();
+            };
+        this.aSlider.template.locationChangeCallback =
+            /** @param {Number} x in the range [0, 1] */
+            (x, y) => {
+                this.color.setFromRGBA([this.color.R.value, this.color.G.value, this.color.B.value, x]);
+                this.element.requestUpdate();
+            };
+        this.hSlider.template.locationChangeCallback =
+            /** @param {Number} x in the range [0, 1] */
+            (x, y) => {
+                this.color.setFromHSVA(x, this.color.S.value, this.color.V.value, this.color.A.value);
+                this.element.requestUpdate();
+            };
+        this.sSlider.template.locationChangeCallback =
+            /** @param {Number} x in the range [0, 1] */
+            (x, y) => {
+                this.color.setFromHSVA(this.color.H.value, x, this.color.V.value, this.color.A.value);
+                this.element.requestUpdate();
+            };
+        this.vSlider.template.locationChangeCallback =
+            /** @param {Number} x in the range [0, 1] */
+            (x, y) => {
+                this.color.setFromHSVA(this.color.H.value, this.color.S.value, x, this.color.A.value);
                 this.element.requestUpdate();
             };
         this.element.querySelector(".ueb-color-picker-wheel").appendChild(this.wheelHandler);
         this.element.querySelector(".ueb-color-picker-saturation").appendChild(this.saturationSlider);
         this.element.querySelector(".ueb-color-picker-value").appendChild(this.valueSlider);
+        this.element.querySelector(".ueb-color-picker-r .ueb-horizontal-slider").appendChild(this.rSlider);
+        this.element.querySelector(".ueb-color-picker-g .ueb-horizontal-slider").appendChild(this.gSlider);
+        this.element.querySelector(".ueb-color-picker-b .ueb-horizontal-slider").appendChild(this.bSlider);
+        this.element.querySelector(".ueb-color-picker-a .ueb-horizontal-slider").appendChild(this.aSlider);
+        this.element.querySelector(".ueb-color-picker-h .ueb-horizontal-slider").appendChild(this.hSlider);
+        this.element.querySelector(".ueb-color-picker-s .ueb-horizontal-slider").appendChild(this.sSlider);
+        this.element.querySelector(".ueb-color-picker-v .ueb-horizontal-slider").appendChild(this.vSlider);
+    }
+
+    /** @param {Number} channel */
+    renderSlider(channel) {
+        let channelLetter = "";
+        let channelValue = 0;
+        let background = "";
+        const getCommonBackground = channel =>
+            `linear-gradient(to right, #${this.#colorHexReplace(channel, '00')}, #${this.#colorHexReplace(channel, 'ff')})`;
+        switch (channel) {
+            case 0:
+                channelLetter = "r";
+                channelValue = this.color.R.value;
+                background = getCommonBackground(channel);
+                break
+            case 1:
+                channelLetter = "g";
+                channelValue = this.color.G.value;
+                background = getCommonBackground(channel);
+                break
+            case 2:
+                channelLetter = "b";
+                channelValue = this.color.B.value;
+                background = getCommonBackground(channel);
+                break
+            case 3:
+                channelLetter = "a";
+                channelValue = this.color.A.value;
+                background = `repeating-conic-gradient(#7c8184 0% 25%, #c2c3c4 0% 50%) 50% / 10px 10px, ${getCommonBackground(channel)}`;
+                break
+            case 4:
+                channelLetter = "h";
+                channelValue = this.color.H.value;
+                background = "linear-gradient(to right, #f00 0%, #ff0 16.666%, #0f0 33.333%, #0ff 50%, #00f 66.666%, #f0f 83.333%, #f00 100%)";
+                break
+            case 5:
+                channelLetter = "s";
+                channelValue = this.color.S.value;
+                background = "linear-gradient("
+                    + "to right,"
+                    + `#${this.#tempColor.setFromHSVA(
+                        this.color.H.value,
+                        0,
+                        this.color.V.value,
+                        this.color.A.value
+                    ), this.#tempColor.toRGBAString()},`
+                    + `#${this.#tempColor.setFromHSVA(
+                        this.color.H.value,
+                        1,
+                        this.color.V.value,
+                        this.color.A.value,
+                    ), this.#tempColor.toRGBAString()})`;
+                break
+            case 6:
+                channelLetter = "v";
+                channelValue = this.color.V.value;
+                background = `linear-gradient(to right, #000, #${this.fullColor.toRGBAString()})`;
+                break
+        }
+        background = `background: ${background};`;
+        return $`
+            <div class="ueb-color-picker-${channelLetter.toLowerCase()}">
+                <span>${channelLetter.toUpperCase()}</span>
+                <div>
+                    <div class="ueb-horizontal-slider">
+                        <span class="ueb-horizontal-slider-text"
+                            .innerText="${Utility.minDecimals(Utility.roundDecimals(channelValue))}">
+                        </span>
+                    </div>
+                    <div class="ueb-color-picker-gradient" style="${background}"></div>
+                </div>
+            </div>
+        `
     }
 
     renderContent() {
@@ -4086,44 +4277,54 @@ 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`,
         };
+        this.color.toRGBAString();
+        const fullColorHex = this.fullColor.toRGBAString();
         return $`
-            <div class="ueb-color-picker" style=${i(style)}>
+            <div class="ueb-color-picker" style="${i(style)}">
                 <div class="ueb-color-picker-toolbar">
                     <div class="ueb-color-picker-theme"></div>
                     <div class="ueb-color-picker-srgb"></div>
                 </div>
                 <div class="ueb-color-picker-main">
                     <div class="ueb-color-picker-wheel"></div>
-                    <div class="ueb-color-picker-saturation"
-                        style="background-color: #${this.fullColor.toRGBAString()}">
+                    <div class="ueb-color-picker-saturation ueb-vertical-slider"
+                        style="background-color: #${fullColorHex}">
                     </div>
-                    <div class="ueb-color-picker-value"
-                        style="background-color: #${this.fullColor.toRGBAString()}"></div>
+                    <div class="ueb-color-picker-value ueb-vertical-slider"
+                        style="background-color: #${fullColorHex}"></div>
                     <div class="ueb-color-picker-preview">
-                        <div class="ueb-color-picker-preview-old"
+                        Old
+                        <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 >
-                    </div >
-                </div >
-                <div class="ueb-color-picker-advanced-toggle"></div>
+                        </div>
+                        New
+                    </div>
+                </div>
+                <div class="ueb-color-picker-advanced-toggle ueb-toggle-control">
+                    Advanced
+                </div>
                 <div class="ueb-color-picker-advanced">
-                    <div class="ueb-color-picker-r"></div>
-                    <div class="ueb-color-picker-g"></div>
-                    <div class="ueb-color-picker-b"></div>
-                    <div class="ueb-color-picker-a"></div>
-                    <div class="ueb-color-picker-h"></div>
-                    <div class="ueb-color-picker-s"></div>
-                    <div class="ueb-color-picker-v"></div>
-                    <div class="ueb-color-picker-hex-linear"></div>
-                    <div class="ueb-color-picker-hex-srgb"></div>
+                    <div class="ueb-color-picker-column">
+                        ${this.renderSlider(0)}
+                        ${this.renderSlider(1)}
+                        ${this.renderSlider(2)}
+                        ${this.renderSlider(3)}
+                    </div>
+                    <div class="ueb-color-picker-column">
+                        ${this.renderSlider(4)}
+                        ${this.renderSlider(5)}
+                        ${this.renderSlider(6)}
+                        <div class="ueb-color-picker-hex-linear"></div>
+                        <div class="ueb-color-picker-hex-srgb"></div>
+                    </div>
                 </div>
                 <div class="ueb-color-picker-ok"></div>
                 <div class="ueb-color-picker-cancel"></div>
-            </div >
-            `
+            </div>
+        `
     }
 
     renderWindowName() {
@@ -4230,7 +4431,8 @@ class IInputPinTemplate extends PinTemplate {
             return $`
                 <div class="ueb-pin-input">
                     <span class="ueb-pin-input-content" role="textbox" contenteditable="true"
-                        .innerText="${IInputPinTemplate.stringFromUEToInput(this.element.entity.DefaultValue.toString())}"></span>
+                        .innerText="${IInputPinTemplate.stringFromUEToInput(this.element.entity.DefaultValue.toString())}">
+                    </span>
                 </div>
             `
         }

js/Utility.js

@@ -58,6 +58,15 @@ export default class Utility {
         return num.toFixed(decimals)
     }
 
+    /**
+     * @param {Number} num
+     * @param {Number} decimals
+     */
+    static roundDecimals(num, decimals = 1) {
+        const power = 10 ** decimals
+        return Math.round(num * power) / power
+    }
+
     /**
      * @param {Number[]} viewportLocation
      * @param {HTMLElement} movementElement

js/element/ColorSliderElement.js

@@ -11,4 +11,4 @@ export default class ColorSliderElement extends IDraggableControlElement {
     }
 }
 
-customElements.define("ueb-color-slider", ColorSliderElement)
+customElements.define("ueb-ui-slider", ColorSliderElement)

js/entity/LinearColorEntity.js

@@ -24,10 +24,10 @@ export default class LinearColorEntity extends IEntity {
         /** @type {RealUnitEntity} */ this.H
         /** @type {RealUnitEntity} */ this.S
         /** @type {RealUnitEntity} */ this.V
-        this.#updateValues()
+        this.#updateHSV()
     }
 
-    #updateValues() {
+    #updateHSV() {
         const r = this.R.value
         const g = this.G.value
         const b = this.B.value
@@ -36,6 +36,7 @@ export default class LinearColorEntity extends IEntity {
             && !(Math.abs(r - b) > Number.EPSILON)
             && !(Math.abs(g - b) > Number.EPSILON)
         ) {
+            this.V.value = 0
             return
         }
         const max = Math.max(r, g, b)
@@ -63,7 +64,21 @@ export default class LinearColorEntity extends IEntity {
     }
 
     /** @param {Number[]} param0 */
-    setFromHSVA([h, s, v, a = 1]) {
+    setFromRGBA([r, g, b, a = 1]) {
+        this.R.value = r
+        this.G.value = g
+        this.B.value = b
+        this.A.value = a
+        this.#updateHSV()
+    }
+
+    /**
+     * @param {Number} h
+     * @param {Number} s
+     * @param {Number} v
+     * @param {Number} a
+     */
+    setFromHSVA(h, s, v, a = 1) {
         const i = Math.floor(h * 6)
         const f = h * 6 - i
         const p = v * (1 - s)
@@ -82,12 +97,7 @@ export default class LinearColorEntity extends IEntity {
 
     setFromWheelLocation([x, y], v, a) {
         const [r, theta] = Utility.getPolarCoordinates([x, y], true)
-        this.setFromHSVA([
-            1 - theta / (2 * Math.PI),
-            r,
-            v,
-            a,
-        ])
+        this.setFromHSVA(1 - theta / (2 * Math.PI), r, v, a)
     }
 
     toRGBA() {

js/template/ColorHandlerTemplate.js

@@ -13,7 +13,7 @@ export default class ColorHandlerTemplate extends IDraggableControlTemplate {
         y = -(y - radius)
         let [r, theta] = Utility.getPolarCoordinates([x, y])
         r = Math.min(r, radius), [x, y] = Utility.getCartesianCoordinates([r, theta])
-        this.locationChangeCallback?.([x / radius, y / radius])
+        this.locationChangeCallback?.(x / radius, y / radius)
         x = Math.round(x + radius)
         y = Math.round(-y + radius)
         return [x, y]

js/template/ColorPickerWindowTemplate.js

@@ -3,6 +3,7 @@ import { styleMap } from "lit/directives/style-map.js"
 import ColorHandlerElement from "../element/ColorHandlerElement"
 import ColorSliderElement from "../element/ColorSliderElement"
 import LinearColorEntity from "../entity/LinearColorEntity"
+import Utility from "../Utility"
 import WindowTemplate from "./WindowTemplate"
 
 /** @typedef {import("../element/WindowElement").default} WindowElement */
@@ -24,6 +25,41 @@ export default class ColorPickerWindowTemplate extends WindowTemplate {
         return this.#valueSlider
     }
 
+    #rSlider = new ColorSliderElement()
+    get rSlider() {
+        return this.#rSlider
+    }
+
+    #gSlider = new ColorSliderElement()
+    get gSlider() {
+        return this.#gSlider
+    }
+
+    #bSlider = new ColorSliderElement()
+    get bSlider() {
+        return this.#bSlider
+    }
+
+    #aSlider = new ColorSliderElement()
+    get aSlider() {
+        return this.#aSlider
+    }
+
+    #hSlider = new ColorSliderElement()
+    get hSlider() {
+        return this.#hSlider
+    }
+
+    #sSlider = new ColorSliderElement()
+    get sSlider() {
+        return this.#sSlider
+    }
+
+    #vSlider = new ColorSliderElement()
+    get vSlider() {
+        return this.#vSlider
+    }
+
     #color = new LinearColorEntity()
     get color() {
         return this.#color
@@ -48,43 +84,174 @@ export default class ColorPickerWindowTemplate extends WindowTemplate {
         return this.#initialColor
     }
 
+    #tempColor = new LinearColorEntity()
+
+    #colorHexReplace(channel, value) {
+        const colorHex = this.color.toRGBAString()
+        return `${colorHex.substring(0, 2 * channel)}${value}${colorHex.substring(2 + 2 * channel)}`
+    }
 
     connectedCallback() {
         super.connectedCallback()
         this.#initialColor = this.element.windowOptions.getPinColor()
-        this.color.setFromHSVA([
+        this.color.setFromHSVA(
             this.initialColor.H.value,
             this.initialColor.S.value,
             this.initialColor.V.value,
-            this.initialColor.A.value
-        ])
-        this.fullColor.setFromHSVA([this.color.H.value, 1, 1, 1])
+            this.initialColor.A.value,
+        )
+        this.fullColor.setFromHSVA(this.color.H.value, 1, 1, 1)
     }
 
     /** @param {Map} changedProperties */
     firstUpdated(changedProperties) {
         this.wheelHandler.template.locationChangeCallback =
-            /** @param {[Number, Number]} param0 x, y in the range [-1, 1] */
-            ([x, y]) => {
+            /**
+             * @param {Number} x in the range [0, 1]
+             * @param {Number} y in the range [0, 1]
+             */
+            (x, y) => {
                 this.color.setFromWheelLocation([x, y], this.color.V.value, this.color.A.value)
-                this.fullColor.setFromHSVA([this.color.H.value, 1, 1, 1])
+                this.fullColor.setFromHSVA(this.color.H.value, 1, 1, 1)
                 this.element.requestUpdate()
             }
         this.saturationSlider.template.locationChangeCallback =
-            /** @param {[Number, Number]} param0 y is in the range [0, 1] */
-            ([_, y]) => {
-                this.color.setFromHSVA([this.color.H.value, y, this.color.V.value, this.color.A.value])
+            /** @param {Number} x in the range [0, 1] */
+            (x, y) => {
+                this.color.setFromHSVA(this.color.H.value, y, this.color.V.value, this.color.A.value)
                 this.element.requestUpdate()
             }
         this.valueSlider.template.locationChangeCallback =
-            /** @param {[Number, Number]} param0 y is in the range [0, 1] */
-            ([_, y]) => {
-                this.color.setFromHSVA([this.color.H.value, this.color.S.value, y, this.color.A.value])
+            /** @param {Number} x in the range [0, 1] */
+            (x, y) => {
+                this.color.setFromHSVA(this.color.H.value, this.color.S.value, y, this.color.A.value)
+                this.element.requestUpdate()
+            }
+        this.rSlider.template.locationChangeCallback =
+            /** @param {Number} x in the range [0, 1] */
+            (x, y) => {
+                this.color.setFromRGBA([x, this.color.G.value, this.color.B.value, this.color.A.value])
+                this.element.requestUpdate()
+            }
+        this.gSlider.template.locationChangeCallback =
+            /** @param {Number} x in the range [0, 1] */
+            (x, y) => {
+                this.color.setFromRGBA([this.color.R.value, x, this.color.B.value, this.color.A.value])
+                this.element.requestUpdate()
+            }
+        this.bSlider.template.locationChangeCallback =
+            /** @param {Number} x in the range [0, 1] */
+            (x, y) => {
+                this.color.setFromRGBA([this.color.R.value, this.color.G.value, x, this.color.A.value])
+                this.element.requestUpdate()
+            }
+        this.aSlider.template.locationChangeCallback =
+            /** @param {Number} x in the range [0, 1] */
+            (x, y) => {
+                this.color.setFromRGBA([this.color.R.value, this.color.G.value, this.color.B.value, x])
+                this.element.requestUpdate()
+            }
+        this.hSlider.template.locationChangeCallback =
+            /** @param {Number} x in the range [0, 1] */
+            (x, y) => {
+                this.color.setFromHSVA(x, this.color.S.value, this.color.V.value, this.color.A.value)
+                this.element.requestUpdate()
+            }
+        this.sSlider.template.locationChangeCallback =
+            /** @param {Number} x in the range [0, 1] */
+            (x, y) => {
+                this.color.setFromHSVA(this.color.H.value, x, this.color.V.value, this.color.A.value)
+                this.element.requestUpdate()
+            }
+        this.vSlider.template.locationChangeCallback =
+            /** @param {Number} x in the range [0, 1] */
+            (x, y) => {
+                this.color.setFromHSVA(this.color.H.value, this.color.S.value, x, this.color.A.value)
                 this.element.requestUpdate()
             }
         this.element.querySelector(".ueb-color-picker-wheel").appendChild(this.wheelHandler)
         this.element.querySelector(".ueb-color-picker-saturation").appendChild(this.saturationSlider)
         this.element.querySelector(".ueb-color-picker-value").appendChild(this.valueSlider)
+        this.element.querySelector(".ueb-color-picker-r .ueb-horizontal-slider").appendChild(this.rSlider)
+        this.element.querySelector(".ueb-color-picker-g .ueb-horizontal-slider").appendChild(this.gSlider)
+        this.element.querySelector(".ueb-color-picker-b .ueb-horizontal-slider").appendChild(this.bSlider)
+        this.element.querySelector(".ueb-color-picker-a .ueb-horizontal-slider").appendChild(this.aSlider)
+        this.element.querySelector(".ueb-color-picker-h .ueb-horizontal-slider").appendChild(this.hSlider)
+        this.element.querySelector(".ueb-color-picker-s .ueb-horizontal-slider").appendChild(this.sSlider)
+        this.element.querySelector(".ueb-color-picker-v .ueb-horizontal-slider").appendChild(this.vSlider)
+    }
+
+    /** @param {Number} channel */
+    renderSlider(channel) {
+        let channelLetter = ""
+        let channelValue = 0
+        let background = ""
+        const getCommonBackground = channel =>
+            `linear-gradient(to right, #${this.#colorHexReplace(channel, '00')}, #${this.#colorHexReplace(channel, 'ff')})`
+        switch (channel) {
+            case 0:
+                channelLetter = "r"
+                channelValue = this.color.R.value
+                background = getCommonBackground(channel)
+                break
+            case 1:
+                channelLetter = "g"
+                channelValue = this.color.G.value
+                background = getCommonBackground(channel)
+                break
+            case 2:
+                channelLetter = "b"
+                channelValue = this.color.B.value
+                background = getCommonBackground(channel)
+                break
+            case 3:
+                channelLetter = "a"
+                channelValue = this.color.A.value
+                background = `repeating-conic-gradient(#7c8184 0% 25%, #c2c3c4 0% 50%) 50% / 10px 10px, ${getCommonBackground(channel)}`
+                break
+            case 4:
+                channelLetter = "h"
+                channelValue = this.color.H.value
+                background = "linear-gradient(to right, #f00 0%, #ff0 16.666%, #0f0 33.333%, #0ff 50%, #00f 66.666%, #f0f 83.333%, #f00 100%)"
+                break
+            case 5:
+                channelLetter = "s"
+                channelValue = this.color.S.value
+                background = "linear-gradient("
+                    + "to right,"
+                    + `#${this.#tempColor.setFromHSVA(
+                        this.color.H.value,
+                        0,
+                        this.color.V.value,
+                        this.color.A.value
+                    ), this.#tempColor.toRGBAString()},`
+                    + `#${this.#tempColor.setFromHSVA(
+                        this.color.H.value,
+                        1,
+                        this.color.V.value,
+                        this.color.A.value,
+                    ), this.#tempColor.toRGBAString()})`
+                break
+            case 6:
+                channelLetter = "v"
+                channelValue = this.color.V.value
+                background = `linear-gradient(to right, #000, #${this.fullColor.toRGBAString()})`
+                break
+        }
+        background = `background: ${background};`
+        return html`
+            <div class="ueb-color-picker-${channelLetter.toLowerCase()}">
+                <span>${channelLetter.toUpperCase()}</span>
+                <div>
+                    <div class="ueb-horizontal-slider">
+                        <span class="ueb-horizontal-slider-text"
+                            .innerText="${Utility.minDecimals(Utility.roundDecimals(channelValue))}">
+                        </span>
+                    </div>
+                    <div class="ueb-color-picker-gradient" style="${background}"></div>
+                </div>
+            </div>
+        `
     }
 
     renderContent() {
@@ -104,44 +271,54 @@ 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 fullColorHex = this.fullColor.toRGBAString()
         return html`
-            <div class="ueb-color-picker" style=${styleMap(style)}>
+            <div class="ueb-color-picker" style="${styleMap(style)}">
                 <div class="ueb-color-picker-toolbar">
                     <div class="ueb-color-picker-theme"></div>
                     <div class="ueb-color-picker-srgb"></div>
                 </div>
                 <div class="ueb-color-picker-main">
                     <div class="ueb-color-picker-wheel"></div>
-                    <div class="ueb-color-picker-saturation"
-                        style="background-color: #${this.fullColor.toRGBAString()}">
+                    <div class="ueb-color-picker-saturation ueb-vertical-slider"
+                        style="background-color: #${fullColorHex}">
                     </div>
-                    <div class="ueb-color-picker-value"
-                        style="background-color: #${this.fullColor.toRGBAString()}"></div>
+                    <div class="ueb-color-picker-value ueb-vertical-slider"
+                        style="background-color: #${fullColorHex}"></div>
                     <div class="ueb-color-picker-preview">
-                        <div class="ueb-color-picker-preview-old"
+                        Old
+                        <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 >
-                    </div >
-                </div >
-                <div class="ueb-color-picker-advanced-toggle"></div>
+                        </div>
+                        New
+                    </div>
+                </div>
+                <div class="ueb-color-picker-advanced-toggle ueb-toggle-control">
+                    Advanced
+                </div>
                 <div class="ueb-color-picker-advanced">
-                    <div class="ueb-color-picker-r"></div>
-                    <div class="ueb-color-picker-g"></div>
-                    <div class="ueb-color-picker-b"></div>
-                    <div class="ueb-color-picker-a"></div>
-                    <div class="ueb-color-picker-h"></div>
-                    <div class="ueb-color-picker-s"></div>
-                    <div class="ueb-color-picker-v"></div>
-                    <div class="ueb-color-picker-hex-linear"></div>
-                    <div class="ueb-color-picker-hex-srgb"></div>
+                    <div class="ueb-color-picker-column">
+                        ${this.renderSlider(0)}
+                        ${this.renderSlider(1)}
+                        ${this.renderSlider(2)}
+                        ${this.renderSlider(3)}
+                    </div>
+                    <div class="ueb-color-picker-column">
+                        ${this.renderSlider(4)}
+                        ${this.renderSlider(5)}
+                        ${this.renderSlider(6)}
+                        <div class="ueb-color-picker-hex-linear"></div>
+                        <div class="ueb-color-picker-hex-srgb"></div>
+                    </div>
                 </div>
                 <div class="ueb-color-picker-ok"></div>
                 <div class="ueb-color-picker-cancel"></div>
-            </div >
-            `
+            </div>
+        `
     }
 
     renderWindowName() {

js/template/ColorSliderTemplate.js

@@ -6,11 +6,17 @@ import Utility from "../Utility"
 /** @extends {IDraggableControlTemplate<ColorHandlerElement>} */
 export default class ColorSliderTemplate extends IDraggableControlTemplate {
 
+    createInputObjects() {
+        return [
+            ...super.createInputObjects(),
+        ]
+    }
+
     /**  @param {[Number, Number]} param0 */
     adjustLocation([x, y]) {
-        x = 0
+        x = Utility.clamp(x, 0, this.movementSpaceSize[0])
         y = Utility.clamp(y, 0, this.movementSpaceSize[1])
-        this.locationChangeCallback?.([x / this.movementSpaceSize[0], 1 - y / this.movementSpaceSize[1]])
+        this.locationChangeCallback?.(x / this.movementSpaceSize[0], 1 - y / this.movementSpaceSize[1])
         return [x, y]
     }
 }

js/template/IDraggableControlTemplate.js

@@ -11,8 +11,8 @@ import MouseMoveDraggable from "../input/mouse/MouseMoveDraggable"
  */
 export default class IDraggableControlTemplate extends IDraggableTemplate {
 
-    /** @param {[Number, Number]} param0 */
-    #locationChangeCallback = ([x, y], ..._) => { }
+    /** @type {(x: Number, y: Number) => void} */
+    #locationChangeCallback
     get locationChangeCallback() {
         return this.#locationChangeCallback
     }
@@ -43,7 +43,7 @@ export default class IDraggableControlTemplate extends IDraggableTemplate {
 
     /**  @param {[Number, Number]} param0 */
     adjustLocation([x, y]) {
-        this.#locationChangeCallback([x, y])
+        this.locationChangeCallback?.(x, y)
         return [x, y]
     }
 }

js/template/IInputPinTemplate.js

@@ -101,7 +101,8 @@ export default class IInputPinTemplate extends PinTemplate {
             return html`
                 <div class="ueb-pin-input">
                     <span class="ueb-pin-input-content" role="textbox" contenteditable="true"
-                        .innerText="${IInputPinTemplate.stringFromUEToInput(this.element.entity.DefaultValue.toString())}"></span>
+                        .innerText="${IInputPinTemplate.stringFromUEToInput(this.element.entity.DefaultValue.toString())}">
+                    </span>
                 </div>
             `
         }

scss/export.scss

@@ -3,4 +3,5 @@
 @use "ueb-node.scss";
 @use "ueb-pin.scss";
 @use "ueb-type-color.scss";
+@use "ueb-ui-controls.scss";
 @use "ueb-window.scss";

scss/ueb-ui-controls.scss

@@ -0,0 +1,67 @@
+.ueb-vertical-slider>ueb-ui-slider {
+    position: relative;
+    padding-bottom: 10px;
+
+    &::before,
+    &::after {
+        content: "";
+        display: block;
+        position: absolute;
+        width: 0;
+        height: 0;
+        border: 5px solid transparent;
+    }
+
+    &::before {
+        left: -4px;
+        border-left-color: #e0e0e0;
+    }
+
+    &::after {
+        right: -4px;
+        border-right-color: #e0e0e0;
+    }
+}
+
+.ueb-horizontal-slider {
+    position: relative;
+    border: 1px solid #383838;
+    border-radius: 6px;
+    padding: 1px;
+    background: #0f0f0f;
+
+    &:hover {
+        cursor: ew-resize;
+    }
+}
+
+.ueb-horizontal-slider>ueb-ui-slider {
+    display: block;
+    position: relative;
+    height: 20px;
+    border-radius: 5px;
+    background: #383838;
+}
+
+.ueb-horizontal-slider-text {
+    position: absolute;
+    padding: 0 5px;
+    line-height: 20px;
+    z-index: 1;
+}
+
+.ueb-toggle-control {
+
+    &::before {
+        content: "";
+        display: inline-block;
+        border-top: 5px solid #e0e0e0;
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+        vertical-align: middle;
+    }
+
+    &:hover {
+        cursor: pointer;
+    }
+}

scss/ueb-window.scss

@@ -86,48 +86,28 @@ ueb-color-handler {
 .ueb-color-picker-value {
     margin: 0 6px;
     padding-bottom: 10px;
-    width: 30px;
+    width: 25px;
 }
 
 .ueb-color-picker-saturation {
+    margin-left: 25px;
     background-image: linear-gradient(to bottom, transparent 10px, #FFFFFF 100%);
 }
 
 .ueb-color-picker-value {
+    margin-right: 25px;
     background-image: linear-gradient(to bottom, transparent 10px, #000000 100%);
 }
 
-ueb-color-slider {
+ueb-ui-slider {
     display: block;
-    position: relative;
-    padding-bottom: 10px;
-
-    &::before,
-    &::after {
-        content: "";
-        display: block;
-        position: absolute;
-        width: 0;
-        height: 0;
-        border: 5px solid transparent;
-    }
-
-    &::before {
-        left: -4px;
-        border-left-color: #e0e0e0;
-    }
-
-    &::after {
-        right: -4px;
-        border-right-color: #e0e0e0;
-    }
 }
 
-.ueb-color-picker-saturation ueb-color-slider {
+.ueb-color-picker-saturation ueb-ui-slider {
     top: calc(100% - var(--ueb-color-s) * 100%)
 }
 
-.ueb-color-picker-value ueb-color-slider {
+.ueb-color-picker-value ueb-ui-slider {
     top: calc(100% - var(--ueb-color-v) * 100%)
 }
 
@@ -153,4 +133,63 @@ ueb-color-slider {
 .ueb-color-picker-preview-new {
     width: 100px;
     height: 40px;
+}
+
+.ueb-color-picker-advanced {
+    display: flex;
+    column-gap: 10px;
+    padding-top: 5px;
+}
+
+.ueb-color-picker-advanced .ueb-color-picker-column {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    flex-grow: 1;
+}
+
+.ueb-color-picker-advanced .ueb-color-picker-column>div {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+
+    &>div {
+        flex-grow: 1;
+    }
+}
+
+.ueb-color-picker-advanced .ueb-horizontal-slider {
+    flex-grow: 1;
+}
+
+.ueb-color-picker-r .ueb-horizontal-slider>ueb-ui-slider {
+    width: calc(var(--ueb-color-r) * 100%);
+}
+
+.ueb-color-picker-g .ueb-horizontal-slider>ueb-ui-slider {
+    width: calc(var(--ueb-color-g) * 100%);
+}
+
+.ueb-color-picker-b .ueb-horizontal-slider>ueb-ui-slider {
+    width: calc(var(--ueb-color-b) * 100%);
+}
+
+.ueb-color-picker-a .ueb-horizontal-slider>ueb-ui-slider {
+    width: calc(var(--ueb-color-a) * 100%);
+}
+
+.ueb-color-picker-h .ueb-horizontal-slider>ueb-ui-slider {
+    width: calc(var(--ueb-color-h) * 100%);
+}
+
+.ueb-color-picker-s .ueb-horizontal-slider>ueb-ui-slider {
+    width: calc(var(--ueb-color-s) * 100%);
+}
+
+.ueb-color-picker-v .ueb-horizontal-slider>ueb-ui-slider {
+    width: calc(var(--ueb-color-v) * 100%);
+}
+
+.ueb-color-picker-gradient {
+    height: 6px;
 }