fix: enhance brush cursor visibility

- Make brush cursor border wider - Add brush cursor color picker refs: #279, DDMAL/Rodan#1173
DDMAL · Dec 17, 2024 · b213024 · b213024
1 parent 1d9cc33
commit b213024
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 1 deletion.
diff --git a/pixel.css b/pixel.css
@@ -385,7 +385,8 @@ li:not(:last-child) {
   position: absolute;
   top: 50%;
   left: 50%;
-  border: 1px solid #666666;
+  border-width: 3px;
+  border-style: solid;
   border-radius: 50%;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
   filter: alpha(opacity=60);
@@ -467,6 +468,48 @@ button {
   visibility: hidden;
 }
 
+/* For controlling the brush color picker */
+#brush-color {
+  visibility: hidden;
+  display: flex;
+  align-items: center;
+}
+
+.brush-color-span {
+  margin-left: 10px;
+  padding: 5px;
+  border-radius: 10px;
+  border: 1px solid #ccc;
+  background: #f8f9f9;
+}
+
+.brush-color-text {
+  margin-left: 5px;
+  color: #242729;
+}
+
+.brush-color-label {
+  padding: 3px;
+  display: flex;
+  align-items: center;
+}
+
+[type='color'] {
+    appearance: none;
+    padding: 0;
+    width: 15px;
+    height: 15px;
+    border: none;
+}
+
+[type='color']::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+[type='color']::-webkit-color-swatch {
+  border: none;
+}
+
 /* For Tutorial Gifs*/
 .tutorial-image {
   width: 100%;

diff --git a/source/pixel.js b/source/pixel.js
@@ -1070,6 +1070,24 @@ export default class PixelPlugin
         this.uiManager.resizeBrushCursor();
     }
 
+    // initializeBrushColorChange (mousePos)
+    // {
+    //     let brushColorPicker = document.getElementById("brush-color-selector");
+    //     let brushColorLabel = 
+    //     this.prevMouseX = mousePos.x;
+    //     this.prevSize = brushSizeSlider.value;
+    // }
+
+    // changeBrushColor (mousePos)
+    // {
+    //     let brushSizeSlider = document.getElementById("brush-size-selector"),
+    //         mouseXVariation = 0.1 * (parseFloat(mousePos.x) - parseFloat(this.prevMouseX));
+    //     //Start at the current brush size when varying
+    //     brushSizeSlider.value = parseFloat(this.prevSize) + mouseXVariation;
+
+    //     this.uiManager.resizeBrushCursor();
+    // }
+
     // TODO: Generalize so that function returns any general relative position using enums
     /**
      * Returns true if the relative coordinates provided are on the main diagonal of the origin of the shape (south east or

diff --git a/source/tools.js b/source/tools.js
@@ -58,28 +58,40 @@ export class Tools
             this.pixelInstance.uiManager.createBrushSizeSelector();
             slider = document.getElementById("brush-size");
         }
+        // Add actions that are specific to the current tool
+        let picker = document.getElementById("brush-color");
+        if (picker === null)
+        {
+            this.pixelInstance.uiManager.createBrushColoreSelector();
+            picker = document.getElementById("brush-color");
+        }
         switch (tool) {
             case this.type.grab:
                 this.pixelInstance.enableDragScrollable();
                 slider.style.visibility = "hidden";
+                picker.style.visibility = "hidden";
                 mouseClickDiv.style.cursor = "-webkit-grab";
                 break;
             case this.type.rectangle:
                 slider.style.visibility = "hidden";
+                picker.style.visibility = "hidden";
                 mouseClickDiv.style.cursor = "crosshair";
                 break;
             case this.type.brush:
                 slider.style.visibility = "visible";
+                picker.style.visibility = "visible";
                 this.pixelInstance.uiManager.createBrushCursor();
                 mouseClickDiv.style.cursor = "none";
                 break;
             case this.type.erase:
                 slider.style.visibility = "visible";
+                picker.style.visibility = "visible";
                 this.pixelInstance.uiManager.createBrushCursor();
                 mouseClickDiv.style.cursor = "none";
                 break;
             case this.type.select:
                 slider.style.visibility = "hidden";
+                picker.style.visibility = "hidden";
                 mouseClickDiv.style.cursor = "crosshair";
                 break;
             default:

diff --git a/source/ui-manager.js b/source/ui-manager.js
@@ -423,6 +423,51 @@ export class UIManager
             brushSizeDiv.parentNode.removeChild(brushSizeDiv);
     }
 
+    createBrushColoreSelector ()
+    {
+        let brushColorDiv = document.createElement("div");
+        brushColorDiv.setAttribute("class", "tool-settings");
+        brushColorDiv.setAttribute("id", "brush-color");
+
+        let text = document.createTextNode("Brush color:"),
+            brushColorSpan = document.createElement("span"),
+            brushColorLabel = document.createElement("label"),
+            brushColorSelector = document.createElement("input"),
+            brushColorText = document.createElement('span');
+
+        brushColorSpan.classList.add("brush-color-span");
+
+        brushColorLabel.setAttribute("for", "brush-color-selector");
+        brushColorLabel.classList.add("brush-color-label");
+
+        brushColorSelector.setAttribute("id", "brush-color-selector");
+        brushColorSelector.setAttribute("type", "color");
+        brushColorSelector.setAttribute("value", "#666666");
+
+        brushColorText.innerHTML = brushColorSelector.value;
+        brushColorText.classList.add("brush-color-text");
+
+        brushColorDiv.appendChild(text);
+        brushColorDiv.appendChild(brushColorSpan);
+        brushColorSpan.appendChild(brushColorLabel);
+        brushColorLabel.appendChild(brushColorSelector);
+        brushColorLabel.appendChild(brushColorText);
+        document.body.appendChild(brushColorDiv);
+
+        brushColorSelector.addEventListener('input', () => {
+            console.log("here");
+            brushColorText.innerHTML = brushColorSelector.value;
+            this.setBrushColor();
+        });
+    }
+
+    destroyBrushColorSelector ()
+    {
+        let brushColorDiv = document.getElementById("brush-color");
+        if (brushColorDiv !== null)
+            brushColorDiv.parentNode.removeChild(brushColorDiv);
+    }
+
     createUndoButton ()
     {
         let undoButton = document.createElement("button"),
@@ -714,6 +759,7 @@ export class UIManager
 
         cursorDiv.setAttribute("oncontextmenu", "return false");
         this.resizeBrushCursor();
+        this.setBrushColor();
     }
 
     resizeBrushCursor ()
@@ -730,6 +776,18 @@ export class UIManager
         cursorDiv.style.height = brushSizeSelectorValue + "px";
     }
 
+    setBrushColor ()
+    {
+        let cursorDiv = document.getElementById("brush-cursor-div");
+
+        if (cursorDiv === null)
+            return;
+
+        let color = document.getElementById("brush-color-selector").value;
+
+        cursorDiv.style.borderColor = color;
+    }
+
     destroyBrushCursor ()
     {
         let cursorDiv = document.getElementById("brush-cursor-div");