Add "Apply" button to color reduction and make alpha threshold option…

…al. (partially fixes #22)
steffest · Mar 8, 2024 · d4f7b22 · d4f7b22
1 parent 9fe7e64
commit d4f7b22
Show file tree

Hide file tree

Showing 8 changed files with 114 additions and 26 deletions.
diff --git a/_script/ui/palette.js b/_script/ui/palette.js
@@ -1,4 +1,4 @@
-import $,{$div, $input} from "../util/dom.js";
+import $, {$checkbox, $div, $input} from "../util/dom.js";
 import EventBus from "../util/eventbus.js";
 import {COMMAND, EVENT} from "../enum.js";
 import Color from "../util/color.js";
@@ -19,6 +19,7 @@ let Palette = function(){
     var size = 14;
     var currentPalette;
     var alphaThreshold = 44;
+    let useAlphaThreshold = true;
     var ditherIndex = 0;
     var targetColorCount = 32;
     let palettePageIndex = 0;
@@ -439,7 +440,7 @@ let Palette = function(){
                 layer.drawImage(c,0,0);
                 EventBus.trigger(EVENT.layerContentChanged,{keepImageCache:true});
             }else{
-                ImageProcessing.reduce(c,targetPalette || targetColorCount,alphaThreshold,ditherIndex);
+                ImageProcessing.reduce(c,targetPalette || targetColorCount,alphaThreshold,ditherIndex,useAlphaThreshold);
             }
 
             SidePanel.show("reduce");
@@ -449,7 +450,7 @@ let Palette = function(){
     me.apply = function(){
         let base = ImageFile.getOriginal();
         let c = duplicateCanvas(base,true);
-        ImageProcessing.reduce(c,currentPalette,alphaThreshold,0);
+        ImageProcessing.reduce(c,currentPalette,alphaThreshold,0,useAlphaThreshold);
     }
 
     me.getColorIndex = function(color,forceMatch){
@@ -613,7 +614,7 @@ let Palette = function(){
                     me.reduce();
                 })
             }else{
-                me.reduce();
+                applyReduce();
             }
 
         }
@@ -635,7 +636,7 @@ let Palette = function(){
             targetColorCount = Math.pow(2,range.value);
             pselect.value = "optimized";
             targetPalette = null;
-            me.reduce();
+            applyReduce();
         }
         fixed.appendChild(range);
 
@@ -653,7 +654,7 @@ let Palette = function(){
         });
         select.onchange = function(){
             ditherIndex = select.value;
-            me.reduce();
+            applyReduce();
         }
         $div("button square prev","<",dithering,()=>{
             let v = parseInt(select.value)-1;
@@ -671,7 +672,12 @@ let Palette = function(){
         dithering.appendChild(select);
 
         let alpha = $div("subpanel","",parent);
-        $div("label","Alpha Threshold",alpha );
+        $checkbox("Alpha Threshold",alpha,"label small",(value)=>{
+            useAlphaThreshold = value;
+            arange.disabled = !useAlphaThreshold;
+            applyReduce();
+        },useAlphaThreshold);
+        //$div("label","Alpha Threshold",alpha );
         let avalue = $div("value",alphaThreshold + "%",alpha );
         let arange = document.createElement("input");
         arange.type = "range";
@@ -683,9 +689,17 @@ let Palette = function(){
         }
         arange.onchange = function(){
             alphaThreshold = arange.value;
-            me.reduce();
+            applyReduce();
         }
         alpha.appendChild(arange);
+
+
+        let button = $div("button full","Apply",parent,applyReduce);
+
+        function applyReduce(){
+            if (pselect.value === "current") targetPalette = currentPalette;
+            me.reduce();
+        }
     }
 
     me.openLocal = function(){

diff --git a/_script/ui/sidepanel.js b/_script/ui/sidepanel.js
@@ -58,7 +58,7 @@ var SidePanel = function(){
         reduce:{
             label: "Reduce Colors",
             collapsed: true,
-            height: 230,
+            height: 270,
             content: parent=>{
                 Palette.generateControlPanel(parent);
             }

diff --git a/_script/util/imageProcessing.js b/_script/util/imageProcessing.js
@@ -65,23 +65,21 @@ var ImageProcessing = function(){
 			for(var y = 0; y < imageInfos.canvas.height; y++){
 				for(var x = 0; x < imageInfos.canvas.width; x++){
 					var index = (x + y * imageInfos.canvas.width) * 4;
-
-					var red = opaqueData.data[index];
-					var green = opaqueData.data[index + 1];
-					var blue = opaqueData.data[index + 2];
-
 					var alpha = data.data[index + 3];
 
 					if(alpha < 255){
 						if (alpha>=alphaThreshold){
-							ctx.fillStyle = "rgb("+ red +"," + green + "," + blue + ")";
-							ctx.fillRect(x,y,1,1);
+							data.data[index] =  opaqueData.data[index];
+							data.data[index + 1] = opaqueData.data[index + 1];
+							data.data[index + 2] = opaqueData.data[index + 2];
+							data.data[index + 3] = 255;
 						}else{
-							ctx.clearRect(x,y,1,1);
+							data.data[index + 3] = 0;
 						}
 					}
 				}
 			}
+			ctx.putImageData(data, 0, 0);
 
 			EventBus.trigger(EVENT.imageContentChanged)
 
@@ -120,7 +118,7 @@ var ImageProcessing = function(){
 
 	};
 
-	me.reduce = function(canvas,colors,_alphaThreshold,ditherIndex){
+	me.reduce = function(canvas,colors,_alphaThreshold,ditherIndex,useAlphaThreshold){
 
 		alphaThreshold = _alphaThreshold || 0;
 		ditherPattern = dithering[ditherIndex || 0].pattern;
@@ -136,8 +134,8 @@ var ImageProcessing = function(){
 
 		imageInfos.canvas = canvas;
 		imageInfos.colorCount = colors;
-		
-		me.matting();
+
+		if (useAlphaThreshold) me.matting();
 
 		processImage(mode, bitsPerColor, ditherPattern, "id");
 	};
@@ -707,6 +705,7 @@ var ImageProcessing = function(){
 	// TODO: implement in webworker
 	// good article: https://stackoverflow.com/questions/18922880/html5-canvas-resize-downscale-image-high-quality
 	// also checkout https://github.com/nodeca/pica
+	// TODO; checkout createImageBitmap
 	me.downScale = function(sourceImageData,destWidth, destHeight){
 		function round(val)
 		{

diff --git a/_style/_forms.scss b/_style/_forms.scss
@@ -46,6 +46,29 @@
       }
     }
   }
+
+  &.small{
+    margin-top: 1px;
+    label{
+      span{
+        padding: 2px 0 2px 14px;
+
+        &:before{
+          width: 10px;
+          height: 10px;
+          top: 2px;
+        }
+      }
+    }
+
+    input{
+      &:checked + span{
+        &:before{
+          box-shadow: inset 0 0 0 1px black;
+        }
+      }
+    }
+  }
 }
 
 input[type="number"],

diff --git a/_style/_range.scss b/_style/_range.scss
@@ -8,6 +8,9 @@ input[type=range] {
 input[type=range]:focus {
   outline: none;
 }
+input[type=range]:disabled {
+  opacity: 0.3;
+}
 input[type=range]::-webkit-slider-runnable-track {
   background: #c8c8c8;
   border: 1px solid #010101;

diff --git a/_style/_sidepanel.scss b/_style/_sidepanel.scss
@@ -620,6 +620,23 @@
     width: 100%;
   }
 
+
+  .button.full{
+    color: $menu-text-color-dim;
+    text-align: center;
+    border: 1px solid black;
+    line-height: 16px;
+    font-size: 12px;
+    margin: 4px;
+    background-color: $button-background-medium;
+    &:hover{
+      cursor: pointer;
+      color: $menu-text-color;
+      background-color: $button-background-dark;
+
+    }
+  }
+
 }
 
 

diff --git a/_style/main.css b/_style/main.css
diff --git a/_style/main.css.map b/_style/main.css.map