Adding splitter between designer and properties

src/components/workflows/assets/Workflows.css

@@ -7,15 +7,67 @@
     cursor: grabbing;
 }
 
+.wkf-splitter {
+  cursor: row-resize;
+  height: 1px;
+  background-color: var(--color-splitter);
+  margin: 4px 0;
+  transition: background-color 0.2s;
+  position: relative; /* Ensure the parent has position relative */
+
+}
+
+.wkf-splitter::after {
+  --color-resize: var(--color-splitter);
+  content: ''; /* This is required */
+  position: absolute; /* Position as needed */
+  z-index: 1;
+  display: block; /* Makes it a block element */
+  height: 6px;
+  width: 20px;
+  background-color: var(--color-splitter);
+
+  /* Center horizontally */
+  left: 50%;
+  transform: translateX(-50%);
+
+  /* Center vertically */
+  top: 50%;
+  margin-top: -3px; /* Half of the height */
+  /* Alternatively: transform: translate(-50%, -50%); */
+}
+
+
+.wkf-splitter:hover, .wkf-splitter-active {
+  background-color: var(--color-splitter-active);
+}
+
+.wkf-designer {
+  min-height: 230px;
+}
+
+.wkf-properties {
+  box-sizing: border-box;
+}
+
 .wkf-canvas {
   position: relative;
-  min-height: 230px;
   background-image:
       linear-gradient(rgba(0,0,0,.1) 1px, transparent 1px),
       linear-gradient(90deg, rgba(0,0,0,.1) 1px, transparent 1px);
   background-size: 20px 20px;
 }
 
+.wkf-toolbox {
+  min-height: 230px;
+  width: 8rem;        /* w-32 (32 * 0.25rem = 8rem) */
+  padding: 0.5rem;    /* p-2 */
+  background-color: var(--color-base-100);  /* bg-base-100 */
+  border-radius: 0.5rem;  /* rounded-lg */
+  border-width: 1px;  /* border */
+}
+
+
 .wkf-workflow-component {
   position: absolute;
   cursor: move;
@@ -66,7 +118,6 @@
   background: #ef4444;
 }
 
-
 .wkf-output-point {
   right: -6px;
   top: 50%;
@@ -88,3 +139,4 @@
     70% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
     100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
 }
+

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;
-}
+}