Adding splitter between designer and properties

src/components/workflows/assets/Workflows.js

@@ -1,4 +1,9 @@
 function bindWorkflowDesigner(elementId) {
+  bindWorkflowDesignerToolbox(elementId)
+  bindWorkflowDesignerSplitter(elementId)
+}
+
+function bindWorkflowDesignerToolbox(elementId) {
     // Store state for this specific designer instance
     const designer = {
         draggedType: null,
@@ -209,7 +214,9 @@ function bindWorkflowDesigner(elementId) {
 
         else {
           const component = event.target.closest('.wkf-workflow-component');
-          componentId = component ? component.dataset.componentId : null
+          if (!component) return;
+
+          componentId = component.dataset.componentId
           htmx.ajax('POST', '/workflows/select-connection', {
                       target: `#c_${elementId}`,
                       headers: {"Content-Type": "application/x-www-form-urlencoded"},
@@ -301,6 +308,97 @@ function bindWorkflowDesigner(elementId) {
     return designer;
 }
 
+/**
+ * Binds drag resize functionality to a workflow designer splitter
+ * @param {string} elementId - The base ID of the workflow designer element
+ */
+function bindWorkflowDesignerSplitter(elementId) {
+  // Get the elements
+  const designer = document.getElementById(`d_${elementId}`);
+  const splitter = document.getElementById(`s_${elementId}`);
+  const properties = document.getElementById(`p_${elementId}`);
+  const designerMinHeight = parseInt(designer.style.minHeight, 10) || 230;
+
+  if (!designer || !splitter) {
+    console.error("Cannot find all required elements for workflow designer splitter");
+    return;
+  }
+
+  // Initialize drag state
+  let isResizing = false;
+  let startY = 0;
+  let startDesignerHeight = 0;
+
+  // Mouse down event - start dragging
+  splitter.addEventListener('mousedown', (e) => {
+    e.preventDefault();
+    isResizing = true;
+    startY = e.clientY;
+    startDesignerHeight = parseInt(designer.style.height, 10) || designer.parentNode.getBoundingClientRect().height;
+    console.debug("startDesignerHeight", startDesignerHeight);
+
+    document.body.style.userSelect = 'none'; // Disable text selection
+    document.body.style.cursor = "row-resize"; // Change cursor style globally for horizontal splitter
+    splitter.classList.add('wkf-splitter-active'); // Add class for visual feedback
+  });
+
+  // Mouse move event - update heights while dragging
+  document.addEventListener('mousemove', (e) => {
+    if (!isResizing) return;
+
+    // Calculate new height
+    const deltaY = e.clientY - startY;
+    const newDesignerHeight = Math.max(designerMinHeight, startDesignerHeight + deltaY); // Enforce minimum height
+    designer.style.height = `${newDesignerHeight}px`;
+    
+    // Update properties panel height if it exists
+    if (properties) {
+      const containerHeight = designer.parentNode.getBoundingClientRect().height;
+      const propertiesHeight = Math.max(50, containerHeight - newDesignerHeight - splitter.offsetHeight);
+      properties.style.height = `${propertiesHeight}px`;
+    }
+    
+    console.debug("newDesignerHeight", newDesignerHeight);
+  });
+
+  // Mouse up event - stop dragging
+  document.addEventListener('mouseup', () => {
+    if (!isResizing) return;
+
+    isResizing = false;
+    document.body.style.cursor = ""; // Reset cursor
+    document.body.style.userSelect = ""; // Re-enable text selection
+    splitter.classList.remove('wkf-splitter-active');
+
+    // Store the current state
+    const designerHeight = parseInt(designer.style.height, 10);
+    saveDesignerHeight(elementId, designerHeight);
+  });
+
+  // Handle case when mouse leaves the window
+  document.addEventListener('mouseleave', () => {
+    if (isResizing) {
+      isResizing = false;
+      document.body.style.cursor = ""; // Reset cursor
+      document.body.style.userSelect = ""; // Re-enable text selection
+      splitter.classList.remove('wkf-splitter-active');
+    }
+  });
+
+  // Function to save the designer height
+  function saveDesignerHeight(id, height) {
+    htmx.ajax('POST', '/workflows/resize-designer', {
+      target: `#${elementId}`,
+      headers: {"Content-Type": "application/x-www-form-urlencoded"},
+      swap: "outerHTML",
+      values: {
+        _id: elementId,
+        designer_height: height,
+      }
+    });
+  }
+}
+
 function _isOverlapping(rect, circle) {
     // Find the closest point on the rectangle to the circle's center
     const closestX = Math.max(rect.x, Math.min(circle.x, rect.x + rect.width));
@@ -313,4 +411,4 @@ function _isOverlapping(rect, circle) {
 
     // Check if the distance is less than or equal to the circle's radius
     return distanceSquared <= circle.radius * circle.radius;
-}
+}