add resize handle to brush editor

static/index.css

@@ -22,11 +22,13 @@ main {
     }
 
     &>.panels {
+        --right-width: 384px; /* Overridden by JavaScript */
+        
         box-sizing: border-box;
         padding: 16px;
 
         display: grid;
-        grid-template-columns: [left] 1fr [right] 384px;
+        grid-template-columns: [left] 1fr [right-resize] auto [right] var(--right-width);
 
         /* Pass all events through. Children may receive events as normal. */
         pointer-events: none;
@@ -35,11 +37,24 @@ main {
             pointer-events: all;
         }
 
-        &>rkgk-brush-editor {
+        &>.right {
             grid-column: right / right;
             height: fit-content;
-            max-height: 100%;
-            overflow: auto;
+
+            display: flex;
+            flex-direction: row;
+            justify-content: stretch;
+
+            &>rkgk-resize-handle {
+                flex-shrink: 0;
+                height: auto;
+            }
+
+            &>rkgk-brush-editor {
+                max-height: 100%;
+                overflow: auto;
+                flex-grow: 1;
+            }
         }
     }
 
@@ -60,10 +75,6 @@ main {
         overflow: hidden;
     }
 
-    &>rkgk-brush-editor {
-        width: 384px;
-    }
-
     &>#js-loading {
         background-color: var(--color-panel-background);
 
@@ -73,6 +84,29 @@ main {
     }
 }
 
+/* Resize handle */
+
+rkgk-resize-handle {
+    &[data-direction="vertical"] {
+        display: block;
+        width: 16px;
+        height: 100%;
+
+        cursor: col-resize;
+
+        &>.visual {
+            width: 2px;
+            height: 100%;
+            background-color: var(--color-brand-blue);
+            margin: 0 auto;
+            opacity: 0%;
+        }
+
+        &:hover>.visual, &.dragging>.visual {
+            opacity: 100%;
+        }
+    }
+}
 
 /* Canvas renderer */
 

static/index.html

@@ -17,6 +17,7 @@
         <script src="static/canvas-renderer.js" type="module"></script>
         <script src="static/connection-status.js" type="module"></script>
         <script src="static/framework.js" type="module"></script>
+        <script src="static/resize-handle.js" type="module"></script>
         <script src="static/reticle-renderer.js" type="module"></script>
         <script src="static/session.js" type="module"></script>
         <script src="static/throbber.js" type="module"></script>
@@ -43,13 +44,20 @@
         <main>
             <rkgk-canvas-renderer class="fullscreen"></rkgk-canvas-renderer>
             <rkgk-reticle-renderer class="fullscreen"></rkgk-reticle-renderer>
-            <div class="panels fullscreen">
+            <div class="panels fullscreen" id="panels-overlay">
                 <div class="rkgk-panel menu-bar">
                     <a class="icon icon-rkgk-grayscale" title="I know this menu bar is really ugly. Sorry about that."></a>
                     <hr>
                     <a href="/docs/rkgk.html">Manual</a>
                 </div>
-                <rkgk-brush-editor></rkgk-brush-editor>
+                <div class="right">
+                    <rkgk-resize-handle
+                        data-direction="vertical"
+                        data-target="panels-overlay"
+                        data-target-property="--right-width"
+                        data-init-size="384"></rkgk-resize-handle>
+                    <rkgk-brush-editor></rkgk-brush-editor>
+                </div>
             </div>
 
             <rkgk-welcome>

static/resize-handle.js

@@ -0,0 +1,65 @@
+import { listen } from "./framework.js";
+
+export class ResizeHandle extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        this.direction = this.getAttribute("data-direction");
+        this.targetId = this.getAttribute("data-target");
+        this.target = document.getElementById(this.targetId);
+        this.targetProperty = this.getAttribute("data-target-property");
+        this.initSize = parseInt(this.getAttribute("data-init-size"));
+
+        this.size = parseInt(localStorage.getItem(this.#localStorageKey));
+        if (this.size != this.size) {
+            this.size = this.initSize;
+            this.#saveSize();
+        }
+        this.#updateTargetProperty();
+
+        this.visual = this.appendChild(document.createElement("div"));
+        this.visual.classList.add("visual");
+
+        this.#draggingBehaviour();
+    }
+
+    get #localStorageKey() {
+        return `rkgk.resizeHandle.size.${this.targetId}`;
+    }
+
+    #saveSize() {
+        localStorage.setItem(this.#localStorageKey, this.size);
+    }
+
+    #updateTargetProperty() {
+        this.target.style.setProperty(this.targetProperty, `${this.size}px`);
+    }
+
+    async #draggingBehaviour() {
+        while (true) {
+            let mouseDown = await listen([this, "mousedown"]);
+            let startingSize = this.size;
+            if (mouseDown.button == 0) {
+                this.classList.add("dragging");
+
+                while (true) {
+                    let event = await listen([window, "mousemove"], [window, "mouseup"]);
+                    if (event.type == "mousemove") {
+                        if (this.direction == "vertical") {
+                            this.size = startingSize + (mouseDown.clientX - event.clientX);
+                        }
+                        this.#updateTargetProperty();
+                    } else if (event.type == "mouseup") {
+                        this.classList.remove("dragging");
+                        this.#saveSize();
+                        break;
+                    }
+                }
+            }
+        }
+    }
+}
+
+customElements.define("rkgk-resize-handle", ResizeHandle);