colorpicker alpha

cables-gl · Nov 16, 2023 · a044d9c · a044d9c
1 parent f86ed8f
commit a044d9c
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 11 deletions.
diff --git a/html/ui/templates/params_port.html b/html/ui/templates/params_port.html
@@ -53,7 +53,7 @@
             {{/compare}}
         </span>
         <span id="portTitle_{{ dirStr }}_{{ portnum }}_reset" class="param_reset icon icon-undo icon-0_75x" onclick="gui.patchView.resetOpValues('{{op.id}}','{{port.name}}');"></span>
-        <!--  -->
+        <!-- numberinput-val -->
 
         {{#if port.uiAttribs.colorPick }}
             <div class="button_colorpick fright" id="watchcolorpick_{{ dirStr }}_{{ portnum }}_{{ panelid }}"></div>

diff --git a/html/ui/templates/params_port_input.html b/html/ui/templates/params_port_input.html
@@ -79,7 +79,7 @@
                     {{#if port.uiAttribs.min}}data-min="{{port.uiAttribs.min}}"{{/if}} {{#if port.uiAttribs.max}}data-max="{{port.uiAttribs.max}}"{{/if}}>
 
                     <span class="numberinput-display" id="numberinputDisplay_{{ port.watchId }}_{{ panelid }}">{{ port.value }}</span>
-                    <input autocomplete="off" class="numberinput-value hidden watchPort watchPortValue_{{ port.watchId }}_{{ panelid }}" id="portval_{{ portnum }}_{{ panelid }}" value="{{ port.value }}"/>
+                    <input autocomplete="off" data-portname="{{port.name}}" class="numberinput-value hidden watchPort watchPortValue_{{ port.watchId }}_{{ panelid }}" id="portval_{{ portnum }}_{{ panelid }}" value="{{ port.value }}"/>
                 </div>
             {{/compare}}
 

diff --git a/libs/ui/colorrick.js b/libs/ui/colorrick.js
diff --git a/scss/components/colorrick.scss b/scss/components/colorrick.scss
@@ -2,13 +2,15 @@
 {
     --width:256px;
     --height:256px;
-    --width-hue:20px;
+    --width-hue:15px;
+    --width-opacity:15px;
+    --pad-opacity:10px;
     --pad:10px;
     --colorblock-height:20px;
     --inputcontainer-height:120px;
 
     background-color: #333;
-    width:calc(var(--width) + 3*var(--pad) + var(--width-hue));
+    width:calc(var(--width) + var(--pad-opacity) + 3 * var(--pad) + var(--width-hue) + var(--width-opacity));
     height:calc(var(--height) + var(--colorblock-height) + 30px + var(--inputcontainer-height));
     position: absolute;
     border-radius: 10px;
@@ -53,6 +55,18 @@
     left:calc(var(--width) + var(--pad) + var(--pad));
 }
 
+.colorRick_opacity
+{
+    cursor:pointer;
+    top:var(--pad);
+    background:linear-gradient(rgba(255,255,255,1),rgba(255,255,255,0));
+    height:var(--height);
+
+    width:var(--width-opacity);
+    position: absolute;
+    left:calc(var(--width) + var(--pad) + var(--pad) + var(--pad) + var(--width-hue));
+}
+
 .colorRick_preview
 {
     position: absolute;
@@ -80,10 +94,10 @@
     border-radius: 100%;
 }
 
-.colorRick_cursor_hue
+.colorRick_cursor_hue,.colorRick_cursor_opacity
 {
     position: absolute;
-    width:24px;
+    width:19px;
     margin-left: -2px;
     height:0px;
     border-top:1px solid white;

diff --git a/src/ui/components/opparampanel/params_listener.js b/src/ui/components/opparampanel/params_listener.js
@@ -155,12 +155,19 @@ class ParamsListener extends CABLES.EventTarget
 
     watchColorPickerPort(thePort, panelid, idx)
     {
+        let foundOpacity = false;
         const inputElements =
         [
             ele.byId("portval_" + idx + "_" + panelid),
             ele.byId("portval_" + (idx + 1) + "_" + panelid),
             ele.byId("portval_" + (idx + 2) + "_" + panelid)
         ];
+        if (ele.byId("portval_" + (idx + 3) + "_" + panelid).dataset.portname.toLowerCase() == "a")
+        {
+            inputElements.push(ele.byId("portval_" + (idx + 3) + "_" + panelid));
+            console.log("found alpha");
+            foundOpacity = true;
+        }
 
         if (!inputElements[0] || !inputElements[1] || !inputElements[2])
         {
@@ -170,10 +177,13 @@ class ParamsListener extends CABLES.EventTarget
 
         const getCurrentColor = () =>
         {
-            return [
+            const arr = [
                 Math.round(255 * parseFloat(inputElements[0].value)),
                 Math.round(255 * parseFloat(inputElements[1].value)),
                 Math.round(255 * parseFloat(inputElements[2].value))];
+
+            // if (inputElements[3])arr.push(inputElements[3].value);
+            return arr;
         };
 
 
@@ -197,28 +207,38 @@ class ParamsListener extends CABLES.EventTarget
 
         updateColorBox();
 
+
+
         colEle.addEventListener("click", (e) =>
         {
             let undoGroup;
+            let opacity = 1;
+            if (inputElements[3])opacity = inputElements[3].value;
+
             const cr = new ColorRick({
                 "ele": colEle,
+                "showOpacity": foundOpacity,
                 "color": getCurrentColor(), // "#ffffff",
-                "onChange": (col) =>
+                "opacity": opacity,
+                "onChange": (col, _opacity) =>
                 {
                     updateColorBox();
                     const glRgb = col.gl();
 
                     const elR = ele.byId("numberinputDisplay_in_" + idx + "_" + panelid);
                     const elG = ele.byId("numberinputDisplay_in_" + (idx + 1) + "_" + panelid);
                     const elB = ele.byId("numberinputDisplay_in_" + (idx + 2) + "_" + panelid);
+                    const elA = ele.byId("numberinputDisplay_in_" + (idx + 3) + "_" + panelid);
 
                     if (elR)elR.innerHTML = inputElements[0].value = glRgb[0];
                     if (elG)elG.innerHTML = inputElements[1].value = glRgb[1];
                     if (elB)elB.innerHTML = inputElements[2].value = glRgb[2];
+                    if (elA)elA.innerHTML = inputElements[3].value = _opacity;
 
                     inputElements[0].dispatchEvent(new CustomEvent("input", { "detail": { "ignorePaco": true } }));
                     inputElements[1].dispatchEvent(new CustomEvent("input", { "detail": { "ignorePaco": true } }));
                     inputElements[2].dispatchEvent(new CustomEvent("input", { "detail": { "ignorePaco": true } }));
+                    if (inputElements[3])inputElements[3].dispatchEvent(new CustomEvent("input", { "detail": { "ignorePaco": true } }));
                 },
                 "onStart": () =>
                 {