drag ui panes

src/main.js

@@ -3,7 +3,7 @@ import * as fitCurve from '/fit-curve.js';
 import { Bezier } from "/bezier.js";
 import { Quadtree } from './quadtree.js';
 import { createNewFileDialog, showNewFileDialog, closeDialog } from './newfile.js';
-import { titleCase } from './utils.js';
+import { titleCase, getMousePositionFraction } from './utils.js';
 const { writeTextFile: writeTextFile, readTextFile: readTextFile }=  window.__TAURI__.fs;
 const {
   open: openFileDialog,
@@ -1944,6 +1944,30 @@ function splitPane(div, percent, horiz, newPane=undefined) {
     div.className = "vertical-grid"
   }
   div.setAttribute("lb-percent", percent) // TODO: better attribute name
+  div.addEventListener('mousedown', function(event) {
+    // Check if the clicked element is the parent itself and not a child element
+    if (event.target === event.currentTarget) {
+      event.currentTarget.setAttribute("dragging", true)
+      event.currentTarget.style.userSelect = 'none';
+      rootPane.style.userSelect = "none";
+    } else {
+      event.currentTarget.setAttribute("dragging", false)
+    }
+  });
+  div.addEventListener('mousemove', function(event) {
+    // Check if the clicked element is the parent itself and not a child element
+    if (event.currentTarget.getAttribute("dragging")=="true") {
+      const frac = getMousePositionFraction(event, event.currentTarget)
+      div.setAttribute("lb-percent", frac*100)
+      updateAll()
+      console.log(frac); // Ensure the fraction is between 0 and 1
+    }
+  });
+  div.addEventListener('mouseup', (event) => {
+    console.log("mouseup")
+    event.currentTarget.setAttribute("dragging", false)
+    event.currentTarget.style.userSelect = 'auto';
+  })
   Coloris({el: ".color-field"})
   updateAll()
   updateUI()

src/styles.css

@@ -158,11 +158,11 @@ button {
 }
 /* I don't fully understand this selector but it works for now */
 .horizontal-grid:hover:not(:has(*:hover)) {
-  background: red;
+  background: #666;
   cursor: ew-resize;
 }
 .vertical-grid:hover:not(:has(*:hover)) {
-  background: red;
+  background: #666;
   cursor: ns-resize
 }
 .scroll {

src/utils.js

@@ -2,4 +2,21 @@ function titleCase(str) {
     return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
 }
 
-export { titleCase };
+function getMousePositionFraction(event, element) {
+    const rect = element.getBoundingClientRect(); // Get the element's position and size
+    
+    if (element.classList.contains('horizontal-grid')) {
+      // If the element has the "horizontal-grid" class, calculate the horizontal position (X)
+      const xPos = event.clientX - rect.left; // Mouse X position relative to the element
+      const fraction = xPos / rect.width; // Fraction of the width
+      return Math.min(Math.max(fraction, 0), 1); // Ensure the fraction is between 0 and 1
+    } else if (element.classList.contains('vertical-grid')) {
+      // If the element has the "vertical-grid" class, calculate the vertical position (Y)
+      const yPos = event.clientY - rect.top; // Mouse Y position relative to the element
+      const fraction = yPos / rect.height; // Fraction of the height
+      return Math.min(Math.max(fraction, 0), 1); // Ensure the fraction is between 0 and 1
+    }
+    return 0; // If neither class is present, return 0 (or handle as needed)
+  }
+
+export { titleCase, getMousePositionFraction };