feat: implement resize-handle workspace (#252)

Author: fraxken

README.md

@@ -38,6 +38,7 @@ Click on one of the links to access the documentation of the package:
 - [@jolly-pixel/voxel.renderer](./packages/voxel-renderer) - Voxel Engine and Renderer
 - [@jolly-pixel/pixel-draw.renderer](./packages/pixel-draw-renderer) - Pixel Art draw renderer 
 - [@jolly-pixel/fs-tree](./packages/fs-tree) - Robust, stylable tree view widget for HTML5 apps with drag'n'drop support
+- [@jolly-pixel/resize-handle](./packages/resize-handle) - Robust resize handles / splitters for your HTML5 apps and websites
 
 These packages are available in the Node Package Repository and can be easily installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or [yarn](https://yarnpkg.com).
 ```bash

package.json

@@ -21,6 +21,7 @@
     "packages/mcp-server",
     "packages/fs-tree",
     "packages/fs-tree-backend",
+    "packages/resize-handle",
     "packages/voxel-renderer",
     "packages/pixel-draw-renderer",
     "packages/editors/voxel-map",

packages/editors/texture/index.html

@@ -27,9 +27,7 @@
 </style>
 
 <jolly-model-editor-left-panel></jolly-model-editor-left-panel>
-<jolly-resizer name="leftPanel-threejs"></jolly-resizer>
 <section id="threeRenderer"></section>
-<jolly-resizer name="threejs-rightPanel"></jolly-resizer>
 <jolly-model-editor-right-panel></jolly-model-editor-right-panel>
 <jolly-popup-manager></jolly-popup-manager>
 

packages/editors/texture/package.json

@@ -18,6 +18,7 @@
     "@jolly-pixel/engine": "2.5.0",
     "@jolly-pixel/fs-tree": "1.0.0",
     "@jolly-pixel/pixel-draw.renderer": "1.0.0",
+    "@jolly-pixel/resize-handle": "1.0.0",
     "@jolly-pixel/runtime": "3.3.0",
     "lit": "3.3.2",
     "three": "0.182.0"

packages/editors/texture/public/main.css

@@ -29,11 +29,20 @@ nav {
   padding: 10px;
 }
 
-.resizer {
+.resize-handle {
+  flex-shrink: 0;
+}
+
+.resize-handle.left,
+.resize-handle.right {
   width: 5px;
   background: #aaa;
   cursor: col-resize;
-  height: 100%;
+}
+
+html.handle-dragging.vertical {
+  cursor: col-resize !important;
+  user-select: none;
 }
 
 #container {

packages/editors/texture/src/components/Resizer.ts

@@ -1,12 +1,13 @@
+// Import Third-party Dependencies
+import { ResizeHandle } from "@jolly-pixel/resize-handle";
+
 // Import Internal Dependencies
 import ThreeSceneManager from "./three/ThreeSceneManager.ts";
 import "./components/LeftPanel.ts";
 import "./components/RightPanel.ts";
 import "./components/PopupManager.ts";
 import "./components/popups/index.ts";
-import "./components/Resizer.ts";
 
-const kBody = document.querySelector("body") as HTMLBodyElement;
 const leftPanel = document.querySelector("jolly-model-editor-left-panel") as HTMLElement;
 const rightPanel = document.querySelector("jolly-model-editor-right-panel") as HTMLElement;
 const popupManager = document.querySelector("jolly-popup-manager") as HTMLElement;
@@ -34,53 +35,56 @@ requestAnimationFrame(function updateLoop() {
   requestAnimationFrame(updateLoop);
 });
 
-kBody.addEventListener("resizer", (e: Event) => {
-  const customEvent = e as CustomEvent;
-  const { delta, name } = customEvent.detail;
-
-  function triggerManagerResize() {
-    threeSceneManager.onResize();
+function triggerManagerResize() {
+  threeSceneManager.onResize();
 
-    // Essayer d'abord via le getSharedCanvasManager
-    const sharedManager = (leftPanel as any).getSharedCanvasManager?.();
-    if (sharedManager) {
-      sharedManager.onResize();
-    }
-    // Sinon, essayer via activeComponent
-    else {
-      const activeComponent = (leftPanel as any).getActiveComponent();
-      if (activeComponent && activeComponent.canvasManagerInstance) {
-        activeComponent.canvasManagerInstance.onResize();
-      }
+  const sharedManager = (leftPanel as any).getSharedCanvasManager?.();
+  if (sharedManager) {
+    sharedManager.onResize();
+  }
+  else {
+    const activeComponent = (leftPanel as any).getActiveComponent();
+    if (activeComponent && activeComponent.canvasManagerInstance) {
+      activeComponent.canvasManagerInstance.onResize();
     }
   }
+}
 
-  if (name === "leftPanel-threejs") {
-    const leftWidth = parseInt(getComputedStyle(leftPanel).width, 10);
-    const sectionWidth = parseInt(getComputedStyle(kSection).width, 10);
-    const newLeftWidth = leftWidth + delta;
-    const newSectionWidth = sectionWidth - delta;
+// direction "left" → handle div inserted AFTER leftPanel (between leftPanel and threeRenderer)
+// dragging right → leftPanel.style.width increases
+const leftResizeHandle = new ResizeHandle(leftPanel, { direction: "left" });
 
-    if (newSectionWidth >= kMinWidth) {
-      leftPanel.style.width = `${newLeftWidth}px`;
-      triggerManagerResize();
-    }
+leftResizeHandle.addEventListener("drag", () => {
+  const sectionWidth = kSection.getBoundingClientRect().width;
+
+  if (sectionWidth < kMinWidth) {
+    const excess = kMinWidth - sectionWidth;
+    leftPanel.style.width = `${parseInt(getComputedStyle(leftPanel).width, 10) - excess}px`;
   }
-  else if (name === "threejs-rightPanel") {
-    const rightWidth = parseInt(getComputedStyle(rightPanel).width, 10);
-    const sectionWidth = parseInt(getComputedStyle(kSection).width, 10);
-    const newRightWidth = rightWidth - delta;
-    const newSectionWidth = sectionWidth + delta;
-
-    if (newSectionWidth >= kMinWidth && newRightWidth >= kMinWidth) {
-      rightPanel.style.width = `${newRightWidth}px`;
-      triggerManagerResize();
-    }
+
+  triggerManagerResize();
+});
+
+// direction "right" → handle div inserted BEFORE rightPanel (between threeRenderer and rightPanel)
+// dragging left → rightPanel.style.width increases
+const rightResizeHandle = new ResizeHandle(rightPanel, { direction: "right" });
+
+rightResizeHandle.addEventListener("drag", () => {
+  const sectionWidth = kSection.getBoundingClientRect().width;
+  const rightWidth = parseInt(getComputedStyle(rightPanel).width, 10);
+
+  if (sectionWidth < kMinWidth) {
+    const excess = kMinWidth - sectionWidth;
+    rightPanel.style.width = `${rightWidth - excess}px`;
+  }
+  else if (rightWidth < kMinWidth) {
+    rightPanel.style.width = `${kMinWidth}px`;
   }
+
+  triggerManagerResize();
 });
 
 rightPanel.addEventListener("addcube", (e: any) => {
   const { name } = e.detail;
   threeSceneManager.createCube(name);
 });
-

packages/editors/texture/src/index.ts

@@ -10,7 +10,6 @@
 
 <body>
   <editor-sidebar id="sidebar"></editor-sidebar>
-  <div id="resize-handle"></div>
   <div id="game-container">
     <canvas tabindex="-1"></canvas>
   </div>

packages/editors/voxel-map/index.html

@@ -28,6 +28,7 @@
   "dependencies": {
     "@jolly-pixel/engine": "^2.0.0",
     "@jolly-pixel/fs-tree": "^1.0.0",
+    "@jolly-pixel/resize-handle": "1.0.0",
     "@jolly-pixel/runtime": "^3.0.0",
     "@jolly-pixel/voxel.renderer": "1.4.0",
     "lit": "3.3.2",

packages/editors/voxel-map/package.json

@@ -20,21 +20,31 @@ body {
 
 editor-sidebar {
   flex-shrink: 0;
+  min-width: 200px;
+  max-width: 600px;
 }
 
-#resize-handle {
+.resize-handle.left {
   width: 4px;
   flex-shrink: 0;
   background: #1a2228;
   cursor: col-resize;
   transition: background 0.15s;
 }
 
-#resize-handle:hover,
-#resize-handle.dragging {
+.resize-handle.left:hover,
+html.handle-dragging.vertical .resize-handle.left {
   background: #4488ff;
 }
 
+html.handle-dragging.vertical {
+  cursor: col-resize;
+}
+
+html.handle-dragging.vertical * {
+  user-select: none;
+}
+
 #game-container {
   flex: 1;
   position: relative;