From 9674b7aaa0e7c9e33a1cba92f325558a61da1e19 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Thu, 31 Oct 2024 16:38:26 +0000
Subject: [PATCH 01/12] Merge commit

---
 .../AutomationBuilder/DraggableCanvas.svelte  | 328 +++++++++++++-----
 .../FlowChart/FlowItem.svelte                 |  18 +-
 2 files changed, 266 insertions(+), 80 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte b/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
index e5a51203ba..73eb514281 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
@@ -9,9 +9,53 @@
   } from "svelte"
   import { Utils } from "@budibase/frontend-core"
   import { selectedAutomation, automationStore } from "stores/builder"
+  import { memo } from "@budibase/frontend-core"
+
+  const getContentTransformOrigin = () => {
+    const midPoint = {
+      midX: viewPort.getBoundingClientRect().width / 2,
+      midY: viewPort.getBoundingClientRect().height / 2,
+    }
+    return [
+      Math.abs(midPoint.midX - $contentPos.x),
+      Math.abs(midPoint.midY - $contentPos.y),
+    ]
+  }
+
+  // TODO - Remove Debugging
+  window.markCenterPoint = async () => {
+    zoomOrigin = [...getContentTransformOrigin()]
+
+    const scale = 1 //0.9
+
+    const newWidth = contentDims.w * scale
+    const deltaWidth = contentDims.w - newWidth
+
+    const newHeight = contentDims.h * scale
+    const deltaHeight = contentDims.h - newHeight
+
+    console.log({
+      w: {
+        widf: contentDims.w,
+        newWidth,
+        deltaWidth: parseInt(deltaWidth),
+      },
+      h: {
+        hif: contentDims.h,
+        newHeight,
+        deltaHeight: parseInt(deltaHeight),
+      },
+    })
+  }
+
+  export function toFocus() {
+    viewToFocusEle()
+  }
 
   export function zoomIn() {
-    const scale = Number(Math.min($view.scale + 0.1, 1.5).toFixed(2))
+    const scale = parseFloat(Math.min($view.scale + 0.1, 1.5).toFixed(2))
+    // zoomOrigin = [...getContentTransformOrigin()]
+
     view.update(state => ({
       ...state,
       scale,
@@ -19,7 +63,9 @@
   }
 
   export function zoomOut() {
-    const scale = Number(Math.max($view.scale - 0.1, 0).toFixed(2))
+    const scale = parseFloat(Math.max($view.scale - 0.1, 0.1).toFixed(2))
+    // zoomOrigin = [...getContentTransformOrigin()]
+
     view.update(state => ({
       ...state,
       scale,
@@ -48,18 +94,23 @@
     const { width: wViewPort, height: hViewPort } =
       viewPort.getBoundingClientRect()
 
-    const scaleTarget = Math.min(
-      wViewPort / contentDims.original.w,
-      hViewPort / contentDims.original.h
+    const scaleTarget = parseFloat(
+      Math.min(
+        wViewPort / contentDims.original.w,
+        hViewPort / contentDims.original.h
+      ).toFixed(2)
     )
 
-    // Smallest ratio determines which dimension needs squeezed
-    view.update(state => ({
-      ...state,
-      scale: scaleTarget,
-    }))
+    // Skip behaviour if the scale target scale is the current scale
+    if ($view.scale !== scaleTarget) {
+      // Smallest ratio determines which dimension needs squeezed
+      view.update(state => ({
+        ...state,
+        scale: parseFloat(scaleTarget.toFixed(2)),
+      }))
 
-    await tick()
+      await tick()
+    }
 
     const adjustedY = (hViewPort - contentDims.original.h) / 2
 
@@ -67,6 +118,8 @@
       ...state,
       x: 0,
       y: parseInt(0 + adjustedY),
+      scrollX: 0,
+      scrollY: 0,
     }))
   }
 
@@ -79,7 +132,6 @@
     dragSpot: null,
     scale: 1,
     dropzones: {},
-    //focus - node to center on?
   })
 
   setContext("draggableView", view)
@@ -89,9 +141,18 @@
   setContext("viewPos", internalPos)
 
   // Content pos tracking
-  const contentPos = writable({ x: 0, y: 0, scrollX: 0, scrollY: 0 })
+  const contentPos = writable({
+    x: 0,
+    y: 0,
+    scrollX: 0,
+    scrollY: 0,
+  })
   setContext("contentPos", contentPos)
 
+  $: if ($view || contentDims) {
+    window.testValues = { ...$view, contentDims }
+  }
+
   // Elements
   let mainContent
   let viewPort
@@ -101,7 +162,11 @@
   let down = false
 
   // Monitor the size of the viewPort
-  let observer
+  let viewObserver
+
+  // Monitor the size of the content
+  // Always reconfigure when changes occur
+  let contentObserver
 
   // Size of the core display content
   let contentDims = {}
@@ -110,16 +175,21 @@
   let viewDims = {}
 
   // When dragging the content, maintain the drag start offset
-  let dragOffset
-
-  // Used when focusing the UI on trigger
-  let loaded = false
+  let dragOffset = []
 
   // Edge around the draggable content
   let contentDragPadding = 200
 
   // Auto scroll
-  // let scrollInterval
+  let scrollInterval
+
+  let zoomOrigin = []
+
+  // Focus element details. Used to move the viewport
+  let focusElement = memo()
+
+  // Memo Focus
+  $: focusElement.set($view.focusEle)
 
   const onScale = async () => {
     dispatch("zoom", $view.scale)
@@ -127,8 +197,6 @@
   }
 
   const getDims = async () => {
-    if (!mainContent) return
-
     if (!contentDims.original) {
       contentDims.original = {
         w: parseInt(mainContent.getBoundingClientRect().width),
@@ -153,10 +221,17 @@
     return { x: Math.max(x, 0), y: Math.max(y, 0) }
   }
 
-  const buildWrapStyles = (pos, scale, dims) => {
+  const buildWrapStyles = (pos, scale, dims, contentCursor) => {
     const { x, y } = pos
     const { w, h } = dims
-    return `--posX: ${x}px; --posY: ${y}px; --scale: ${scale}; --wrapH: ${h}px; --wrapW: ${w}px`
+    const [cursorContentX, cursorContentY] = contentCursor
+    return `
+      --posX: ${x}px; --posY: ${y}px; 
+      --scale: ${scale}; 
+      --wrapH: ${h}px; --wrapW: ${w}px;
+      --ccX: ${cursorContentX}px;
+      --ccY: ${cursorContentY}px;
+      `
   }
 
   const onViewScroll = e => {
@@ -186,12 +261,12 @@
       if (e.deltaY < 0) {
         updatedScale = Math.min(1, currentScale + 0.05)
       } else if (e.deltaY > 0) {
-        updatedScale = Math.max(0, currentScale - 0.05)
+        updatedScale = Math.max(0.1, currentScale - 0.05)
       }
 
       view.update(state => ({
         ...state,
-        scale: Number(updatedScale.toFixed(2)),
+        scale: parseFloat(updatedScale.toFixed(2)),
       }))
     } else {
       yBump = scrollIncrement * (e.deltaY < 0 ? -1 : 1)
@@ -226,23 +301,58 @@
       }))
     }
 
-    // Needs to handle when the mouse leaves the screen
-    // Needs to know the direction of movement and accelerate/decelerate
-    if (y < (viewDims.height / 100) * 20 && $view.dragging) {
-      //   if (!scrollInterval) {
-      //     scrollInterval = setInterval(() => {
-      //       contentPos.update(state => ({
-      //         ...state,
-      //         x: contentPos.x,
-      //         y: contentPos.y + 35,
-      //       }))
-      //     }, 100)
-      //   }
-      // } else {
-      //   if (scrollInterval) {
-      //     clearInterval(scrollInterval)
-      //     scrollInterval = undefined
-      //   }
+    const clearScrollInterval = () => {
+      if (scrollInterval) {
+        clearInterval(scrollInterval)
+        scrollInterval = undefined
+      }
+    }
+
+    if ($view.dragging) {
+      // Need to know the internal offset as well.
+      const scrollZones = {
+        top: y < viewDims.height * 0.05,
+        bottom:
+          y > viewDims.height - ($view.moveStep.h - $view.moveStep.mouse.y),
+        left: x < viewDims.width * 0.05,
+        right: x > viewDims.width - $view.moveStep.w,
+      }
+
+      // Determine which zones are currently in play
+      const dragOutEntries = Object.entries(scrollZones).filter(e => e[1])
+      if (dragOutEntries.length) {
+        const dragOut = Object.fromEntries(dragOutEntries)
+
+        if (!scrollInterval) {
+          const autoScroll = () => {
+            // Some internal tracking for implying direction
+            // const lastY = $contentPos.y
+            // const lastX = $contentPos.x
+            const bump = 30
+
+            // Depending on the zone, you want to move the content
+            // in the opposite direction
+            const xInterval = dragOut.right ? -bump : dragOut.left ? bump : 0
+            const yInterval = dragOut.bottom ? -bump : dragOut.top ? bump : 0
+
+            return () => {
+              contentPos.update(state => ({
+                ...state,
+                x: (state.x || 0) + xInterval,
+                y: (state.y || 0) + yInterval,
+                scrollX: state.scrollX + xInterval,
+                scrollY: state.scrollY + yInterval,
+              }))
+            }
+          }
+
+          scrollInterval = setInterval(autoScroll(), 30)
+        }
+      } else {
+        clearScrollInterval()
+      }
+    } else {
+      clearScrollInterval()
     }
   }
 
@@ -265,6 +375,35 @@
     )
   }
 
+  // Reset state on mouse up
+  const globalMouseUp = e => {
+    down = false
+
+    if ($view.dragging) {
+      dragOffset = [0, 0]
+      view.update(state => ({
+        ...state,
+        dragging: false,
+        moveStep: null,
+        dragSpot: null,
+        dropzones: {},
+        droptarget: null,
+      }))
+
+      if (scrollInterval) {
+        clearInterval(scrollInterval)
+        scrollInterval = undefined
+      }
+
+      // Clear the scroll offset for dragging
+      contentPos.update(state => ({
+        ...state,
+        scrollY: 0,
+        scrollX: 0,
+      }))
+    }
+  }
+
   const onMouseUp = () => {
     if ($view.droptarget) {
       handleDragDrop()
@@ -353,9 +492,8 @@
     dragOffset = [Math.abs(x - $contentPos.x), Math.abs(y - $contentPos.y)]
   }
 
-  const focusOnLoad = () => {
-    if ($view.focusEle && !loaded) {
-      const focusEleDims = $view.focusEle
+  const viewToFocusEle = () => {
+    if ($focusElement) {
       const viewWidth = viewDims.width
 
       // The amount to shift the content in order to center the trigger on load.
@@ -363,8 +501,8 @@
       // The sidebar offset factors into the left positioning of the content here.
       const targetX =
         contentWrap.getBoundingClientRect().x -
-        focusEleDims.x +
-        (viewWidth / 2 - focusEleDims.width / 2)
+        $focusElement.x +
+        (viewWidth / 2 - $focusElement.width / 2)
 
       // Update the content position state
       // Shift the content up slightly to accommodate the padding
@@ -373,34 +511,45 @@
         x: targetX,
         y: -(contentDragPadding / 2),
       }))
-
-      loaded = true
     }
   }
 
   // Update dims after scaling
-  $: {
-    $view.scale
+  $: viewScale = $view.scale
+  $: if (viewScale && mainContent) {
     onScale()
   }
 
   // Focus on a registered element
   $: {
-    $view.focusEle
-    focusOnLoad()
+    $focusElement
+    viewToFocusEle()
   }
 
   // Content mouse pos and scale to css variables.
   // The wrap is set to match the content size
-  $: wrapStyles = buildWrapStyles($contentPos, $view.scale, contentDims)
+  $: wrapStyles = buildWrapStyles(
+    $contentPos,
+    $view.scale,
+    contentDims,
+    zoomOrigin
+  )
 
   onMount(() => {
-    observer = new ResizeObserver(getDims)
-    observer.observe(viewPort)
+    viewObserver = new ResizeObserver(getDims)
+    viewObserver.observe(viewPort)
+
+    contentObserver = new ResizeObserver(getDims)
+    contentObserver.observe(mainContent)
+
+    // Global mouse observer
+    document.addEventListener("mouseup", globalMouseUp)
   })
 
   onDestroy(() => {
-    observer.disconnect()
+    viewObserver.disconnect()
+    contentObserver.disconnect()
+    document.removeEventListener("mouseup", globalMouseUp)
   })
 </script>
 
@@ -414,15 +563,17 @@
   on:mousemove={Utils.domDebounce(onMouseMove)}
   style={`--dragPadding: ${contentDragPadding}px;`}
 >
+  <!-- svelte-ignore a11y-mouse-events-have-key-events -->
   <div
     class="draggable-view"
     bind:this={viewPort}
     on:wheel={Utils.domDebounce(onViewScroll)}
     on:mousemove={Utils.domDebounce(onViewMouseMove)}
     on:mouseup={onViewDragEnd}
-    on:mouseleave={onViewDragEnd}
   >
-    <!-- <div class="debug">
+    <!--delete me-->
+    <div class="reticle" />
+    <div class="debug">
       <span>
         View Pos [{$internalPos.x}, {$internalPos.y}]
       </span>
@@ -432,13 +583,16 @@
       <span>Dragging [{$view?.moveStep?.id || "no"}]</span>
       <span>Scale [{$view.scale}]</span>
       <span>Content [{JSON.stringify($contentPos)}]</span>
-    </div> -->
+      <span>Content Cursor [{JSON.stringify(dragOffset)}]</span>
+    </div>
     <div
       class="content-wrap"
       style={wrapStyles}
       bind:this={contentWrap}
       class:dragging={down}
     >
+      <!--delete me-->
+      <div class="reticle-content" />
       <div
         class="content"
         bind:this={mainContent}
@@ -453,16 +607,6 @@
             down = false
           }
         }}
-        on:mouseleave={() => {
-          down = false
-          view.update(state => ({
-            ...state,
-            dragging: false,
-            moveStep: null,
-            dragSpot: null,
-            dropzones: {},
-          }))
-        }}
       >
         <slot name="content" />
       </div>
@@ -481,6 +625,38 @@
     overflow: hidden;
     position: relative;
   }
+
+  .reticle {
+    display: none;
+    z-index: 10000;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 2px;
+    height: 2px;
+    background-color: red;
+    border-radius: 50%;
+  }
+
+  .reticle-content {
+    z-index: 10000;
+    position: absolute;
+    top: var(--ccY);
+    left: var(--ccX);
+    width: 2px;
+    height: 2px;
+    background-color: greenyellow;
+    border-radius: 50%;
+  }
+
+  .content {
+    transform-origin: var(--ccX) var(--ccY);
+    transform: scale(var(--scale));
+    user-select: none;
+    padding: var(--dragPadding);
+  }
+
   .content-wrap {
     min-width: 100%;
     position: absolute;
@@ -491,22 +667,18 @@
     cursor: grab;
     transform: translate(var(--posX), var(--posY));
   }
-  .content {
-    transform: scale(var(--scale));
-    user-select: none;
-    padding: var(--dragPadding);
-  }
 
   .content-wrap.dragging {
     cursor: grabbing;
   }
 
-  /* .debug {
+  .debug {
     display: flex;
     align-items: center;
     gap: 8px;
     position: fixed;
-    padding: 8px;
+    padding: var(--spacing-l);
     z-index: 2;
-  } */
+    pointer-events: none;
+  }
 </style>
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
index 286347f0b6..bfbedbc3b2 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@@ -51,8 +51,13 @@
     if (!blockEle) {
       return
     }
-    const { width, height } = blockEle.getBoundingClientRect()
-    blockDims = { width: width / $view.scale, height: height / $view.scale }
+    const { width, height, top, left } = blockEle?.getBoundingClientRect()
+    blockDims = {
+      width: width / $view.scale,
+      height: height / $view.scale,
+      top,
+      left,
+    }
   }
 
   const loadSteps = blockRef => {
@@ -174,12 +179,21 @@
 
     e.stopPropagation()
 
+    updateBlockDims()
+
+    const { clientX, clientY } = e
     view.update(state => ({
       ...state,
       moveStep: {
         id: block.id,
         offsetX: $pos.x,
         offsetY: $pos.y,
+        w: blockDims.width,
+        h: blockDims.height,
+        mouse: {
+          x: Math.max(Math.round(clientX - blockDims.left), 0),
+          y: Math.max(Math.round(clientY - blockDims.top), 0),
+        },
       },
     }))
   }

From 477c0f2e5e2931910297e2499145b36ac5da0194 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 1 Nov 2024 11:25:59 +0000
Subject: [PATCH 02/12] Auto scroll updates

---
 .../AutomationBuilder/DraggableCanvas.svelte  | 41 ++++++++++++-------
 .../FlowChart/FlowChart.svelte                | 11 -----
 .../FlowChart/StepNode.svelte                 |  5 ++-
 3 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte b/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
index 75e64bae31..a6285e2fca 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
@@ -185,6 +185,9 @@
 
   let zoomOrigin = []
 
+  // Used to track where the draggable item is scrolling into
+  let scrollZones
+
   // Focus element details. Used to move the viewport
   let focusElement = memo()
 
@@ -196,8 +199,11 @@
     await getDims()
   }
 
-  const getDims = async () => {
-    if (!contentDims.original) {
+  const getDims = async (forceRefresh = false) => {
+    if (!mainContent || !viewPort) {
+      return
+    }
+    if (!contentDims.original || (contentDims.original && forceRefresh)) {
       contentDims.original = {
         w: parseInt(mainContent.getBoundingClientRect().width),
         h: parseInt(mainContent.getBoundingClientRect().height),
@@ -314,7 +320,7 @@
 
     if ($view.dragging) {
       // Need to know the internal offset as well.
-      const scrollZones = {
+      scrollZones = {
         top: y < viewDims.height * 0.05,
         bottom:
           y > viewDims.height - ($view.moveStep.h - $view.moveStep.mouse.y),
@@ -325,8 +331,6 @@
       // Determine which zones are currently in play
       const dragOutEntries = Object.entries(scrollZones).filter(e => e[1])
       if (dragOutEntries.length) {
-        const dragOut = Object.fromEntries(dragOutEntries)
-
         if (!scrollInterval) {
           const autoScroll = () => {
             // Some internal tracking for implying direction
@@ -334,12 +338,17 @@
             // const lastX = $contentPos.x
             const bump = 30
 
-            // Depending on the zone, you want to move the content
-            // in the opposite direction
-            const xInterval = dragOut.right ? -bump : dragOut.left ? bump : 0
-            const yInterval = dragOut.bottom ? -bump : dragOut.top ? bump : 0
-
             return () => {
+              const dragOutEntries = Object.entries(scrollZones).filter(
+                e => e[1]
+              )
+              const dragOut = Object.fromEntries(dragOutEntries)
+
+              // Depending on the zone, you want to move the content
+              // in the opposite direction
+              const xInterval = dragOut.right ? -bump : dragOut.left ? bump : 0
+              const yInterval = dragOut.bottom ? -bump : dragOut.top ? bump : 0
+
               contentPos.update(state => ({
                 ...state,
                 x: (state.x || 0) + xInterval,
@@ -397,6 +406,7 @@
       if (scrollInterval) {
         clearInterval(scrollInterval)
         scrollInterval = undefined
+        scrollZones = {}
       }
 
       // Clear the scroll offset for dragging
@@ -543,19 +553,20 @@
   )
 
   onMount(() => {
-    viewObserver = new ResizeObserver(getDims)
+    // As the view/browser resizes, ensure the stored view is up to date
+    viewObserver = new ResizeObserver(
+      Utils.domDebounce(e => {
+        getDims()
+      })
+    )
     viewObserver.observe(viewPort)
 
-    contentObserver = new ResizeObserver(getDims)
-    contentObserver.observe(mainContent)
-
     // Global mouse observer
     document.addEventListener("mouseup", globalMouseUp)
   })
 
   onDestroy(() => {
     viewObserver.disconnect()
-    contentObserver.disconnect()
     document.removeEventListener("mouseup", globalMouseUp)
   })
 </script>
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
index 7086d5d1cd..a12e55f26d 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
@@ -44,19 +44,8 @@
   $: isRowAction = sdk.automations.isRowAction($memoAutomation)
 
   const refresh = () => {
-    // Build global automation bindings.
-    const environmentBindings =
-      automationStore.actions.buildEnvironmentBindings()
-
     // Get all processed block references
     blockRefs = $selectedAutomation.blockRefs
-
-    automationStore.update(state => {
-      return {
-        ...state,
-        bindings: [...environmentBindings],
-      }
-    })
   }
 
   const getBlocks = automation => {
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/StepNode.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/StepNode.svelte
index 4132cf3516..a320973333 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/StepNode.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/StepNode.svelte
@@ -50,9 +50,12 @@
     // Register the trigger as the focus element for the automation
     // Onload, the canvas will use the dimensions to center the step
     if (stepEle && step.type === "TRIGGER" && !$view.focusEle) {
+      const { width, height, left, right, top, bottom, x, y } =
+        stepEle.getBoundingClientRect()
+
       view.update(state => ({
         ...state,
-        focusEle: stepEle.getBoundingClientRect(),
+        focusEle: { width, height, left, right, top, bottom, x, y },
       }))
     }
   })

From 39081493cfdac5504cde123adfecb3a7fd14066d Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Thu, 7 Nov 2024 09:21:22 +0000
Subject: [PATCH 03/12] Auto-scroll behaviour updates. Use mouse pointer with
 buffer as trigger

---
 .../AutomationBuilder/DraggableCanvas.svelte  | 104 ++----------------
 1 file changed, 8 insertions(+), 96 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte b/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
index a6285e2fca..22b2c03947 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
@@ -11,50 +11,12 @@
   import { selectedAutomation, automationStore } from "stores/builder"
   import { memo } from "@budibase/frontend-core"
 
-  const getContentTransformOrigin = () => {
-    const midPoint = {
-      midX: viewPort.getBoundingClientRect().width / 2,
-      midY: viewPort.getBoundingClientRect().height / 2,
-    }
-    return [
-      Math.abs(midPoint.midX - $contentPos.x),
-      Math.abs(midPoint.midY - $contentPos.y),
-    ]
-  }
-
-  // TODO - Remove Debugging
-  window.markCenterPoint = async () => {
-    zoomOrigin = [...getContentTransformOrigin()]
-
-    const scale = 1 //0.9
-
-    const newWidth = contentDims.w * scale
-    const deltaWidth = contentDims.w - newWidth
-
-    const newHeight = contentDims.h * scale
-    const deltaHeight = contentDims.h - newHeight
-
-    console.log({
-      w: {
-        widf: contentDims.w,
-        newWidth,
-        deltaWidth: parseInt(deltaWidth),
-      },
-      h: {
-        hif: contentDims.h,
-        newHeight,
-        deltaHeight: parseInt(deltaHeight),
-      },
-    })
-  }
-
   export function toFocus() {
     viewToFocusEle()
   }
 
   export function zoomIn() {
     const scale = parseFloat(Math.min($view.scale + 0.1, 1.5).toFixed(2))
-    // zoomOrigin = [...getContentTransformOrigin()]
 
     view.update(state => ({
       ...state,
@@ -64,7 +26,6 @@
 
   export function zoomOut() {
     const scale = parseFloat(Math.max($view.scale - 0.1, 0.1).toFixed(2))
-    // zoomOrigin = [...getContentTransformOrigin()]
 
     view.update(state => ({
       ...state,
@@ -164,10 +125,6 @@
   // Monitor the size of the viewPort
   let viewObserver
 
-  // Monitor the size of the content
-  // Always reconfigure when changes occur
-  let contentObserver
-
   // Size of the core display content
   let contentDims = {}
 
@@ -235,8 +192,6 @@
       --posX: ${x}px; --posY: ${y}px; 
       --scale: ${scale}; 
       --wrapH: ${h}px; --wrapW: ${w}px;
-      --ccX: ${cursorContentX}px;
-      --ccY: ${cursorContentY}px;
       `
   }
 
@@ -319,12 +274,14 @@
     }
 
     if ($view.dragging) {
-      // Need to know the internal offset as well.
+      // Static, default buffer centered around the mouse
+      const dragBuffer = 100
+
       scrollZones = {
-        top: y < viewDims.height * 0.05,
-        bottom:
-          y > viewDims.height - ($view.moveStep.h - $view.moveStep.mouse.y),
-        left: x < viewDims.width * 0.05,
+        top: y < dragBuffer,
+        bottom: y > viewDims.height - dragBuffer,
+        left: x < dragBuffer,
+        // An exception for the right side as the drag handle is on the extreme left
         right: x > viewDims.width - $view.moveStep.w,
       }
 
@@ -333,9 +290,6 @@
       if (dragOutEntries.length) {
         if (!scrollInterval) {
           const autoScroll = () => {
-            // Some internal tracking for implying direction
-            // const lastY = $contentPos.y
-            // const lastX = $contentPos.x
             const bump = 30
 
             return () => {
@@ -419,7 +373,7 @@
   }
 
   const onMouseUp = () => {
-    if ($view.droptarget) {
+    if ($view.droptarget && $view.dragging) {
       handleDragDrop()
     }
 
@@ -589,28 +543,12 @@
     on:mousemove={Utils.domDebounce(onViewMouseMove)}
     on:mouseup={onViewDragEnd}
   >
-    <!--delete me-->
-    <div class="reticle" />
-    <div class="debug">
-      <span>
-        View Pos [{$internalPos.x}, {$internalPos.y}]
-      </span>
-      <span>View Dims [{viewDims.width}, {viewDims.height}]</span>
-      <span>Mouse Down [{down}]</span>
-      <span>Drag [{$view.dragging}]</span>
-      <span>Dragging [{$view?.moveStep?.id || "no"}]</span>
-      <span>Scale [{$view.scale}]</span>
-      <span>Content [{JSON.stringify($contentPos)}]</span>
-      <span>Content Cursor [{JSON.stringify(dragOffset)}]</span>
-    </div>
     <div
       class="content-wrap"
       style={wrapStyles}
       bind:this={contentWrap}
       class:dragging={down}
     >
-      <!--delete me-->
-      <div class="reticle-content" />
       <div
         class="content"
         bind:this={mainContent}
@@ -643,33 +581,7 @@
     overflow: hidden;
     position: relative;
   }
-
-  .reticle {
-    display: none;
-    z-index: 10000;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 2px;
-    height: 2px;
-    background-color: red;
-    border-radius: 50%;
-  }
-
-  .reticle-content {
-    z-index: 10000;
-    position: absolute;
-    top: var(--ccY);
-    left: var(--ccX);
-    width: 2px;
-    height: 2px;
-    background-color: greenyellow;
-    border-radius: 50%;
-  }
-
   .content {
-    transform-origin: var(--ccX) var(--ccY);
     transform: scale(var(--scale));
     user-select: none;
     padding: var(--dragPadding);

From 89e8e1e2adb31226ff9fb9370b6928a0d58fa53d Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 8 Nov 2024 14:09:53 +0000
Subject: [PATCH 04/12] Added new background pattern to automation screen with
 some UI tweaks

---
 .../AutomationBuilder/DraggableCanvas.svelte  | 91 +++++++++++++------
 .../FlowChart/FlowChart.svelte                | 47 +++++-----
 2 files changed, 91 insertions(+), 47 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte b/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
index 22b2c03947..c3a73a34e4 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
@@ -7,6 +7,7 @@
     onDestroy,
     tick,
   } from "svelte"
+  import Logo from "assets/bb-emblem.svg?raw"
   import { Utils } from "@budibase/frontend-core"
   import { selectedAutomation, automationStore } from "stores/builder"
   import { memo } from "@budibase/frontend-core"
@@ -15,17 +16,19 @@
     viewToFocusEle()
   }
 
-  export function zoomIn() {
-    const scale = parseFloat(Math.min($view.scale + 0.1, 1.5).toFixed(2))
+  export async function zoomIn() {
+    const newScale = parseFloat(Math.min($view.scale + 0.1, 1.5).toFixed(2))
+    if ($view.scale === 1.5) return
 
     view.update(state => ({
       ...state,
-      scale,
+      scale: newScale,
     }))
   }
 
   export function zoomOut() {
     const scale = parseFloat(Math.max($view.scale - 0.1, 0.1).toFixed(2))
+    if ($view.scale === 0.1) return
 
     view.update(state => ({
       ...state,
@@ -45,6 +48,8 @@
       x: 0,
       y: 0,
     }))
+    offsetX = 0
+    offsetY = 0
     view.update(state => ({
       ...state,
       scale: 1,
@@ -82,6 +87,7 @@
       scrollX: 0,
       scrollY: 0,
     }))
+    offsetY = parseInt(0 + adjustedY)
   }
 
   const dispatch = createEventDispatcher()
@@ -110,10 +116,6 @@
   })
   setContext("contentPos", contentPos)
 
-  $: if ($view || contentDims) {
-    window.testValues = { ...$view, contentDims }
-  }
-
   // Elements
   let mainContent
   let viewPort
@@ -140,17 +142,31 @@
   // Auto scroll
   let scrollInterval
 
-  let zoomOrigin = []
-
   // Used to track where the draggable item is scrolling into
   let scrollZones
 
+  // Used to track the movements of the dragged content
+  // This allows things like the background to have their own starting coords
+  let offsetX = 0
+  let offsetY = 0
+
   // Focus element details. Used to move the viewport
   let focusElement = memo()
 
   // Memo Focus
   $: focusElement.set($view.focusEle)
 
+  // Background pattern
+  let bgDim = 24
+
+  // Scale prop for the icon
+  let dotDefault = 0.006
+
+  $: bgSize = Math.max(bgDim * $view.scale, 10)
+  $: bgWidth = bgSize
+  $: bgHeight = bgSize
+  $: dotSize = Math.max(dotDefault * $view.scale, dotDefault)
+
   const onScale = async () => {
     dispatch("zoom", $view.scale)
     await getDims()
@@ -184,10 +200,9 @@
     return { x: Math.max(x, 0), y: Math.max(y, 0) }
   }
 
-  const buildWrapStyles = (pos, scale, dims, contentCursor) => {
+  const buildWrapStyles = (pos, scale, dims) => {
     const { x, y } = pos
     const { w, h } = dims
-    const [cursorContentX, cursorContentY] = contentCursor
     return `
       --posX: ${x}px; --posY: ${y}px; 
       --scale: ${scale}; 
@@ -216,6 +231,8 @@
             }
           : {}),
       }))
+
+      offsetX = offsetX - xBump
     } else if (e.ctrlKey || e.metaKey) {
       // Scale the content on scrolling
       let updatedScale
@@ -242,6 +259,7 @@
             }
           : {}),
       }))
+      offsetY = offsetY - yBump
     }
   }
 
@@ -264,6 +282,8 @@
         x: x - dragOffset[0],
         y: y - dragOffset[1],
       }))
+      offsetX = x - dragOffset[0]
+      offsetY = y - dragOffset[1]
     }
 
     const clearScrollInterval = () => {
@@ -310,6 +330,8 @@
                 scrollX: state.scrollX + xInterval,
                 scrollY: state.scrollY + yInterval,
               }))
+              offsetX = offsetX + xInterval
+              offsetY = offsetY + yInterval
             }
           }
 
@@ -398,8 +420,6 @@
     if (!viewPort) {
       return
     }
-    // Update viewDims to get the latest viewport dimensions
-    viewDims = viewPort.getBoundingClientRect()
 
     if ($view.moveStep && $view.dragging === false) {
       view.update(state => ({
@@ -499,12 +519,7 @@
 
   // Content mouse pos and scale to css variables.
   // The wrap is set to match the content size
-  $: wrapStyles = buildWrapStyles(
-    $contentPos,
-    $view.scale,
-    contentDims,
-    zoomOrigin
-  )
+  $: wrapStyles = buildWrapStyles($contentPos, $view.scale, contentDims)
 
   onMount(() => {
     // As the view/browser resizes, ensure the stored view is up to date
@@ -535,6 +550,20 @@
   on:mousemove={Utils.domDebounce(onMouseMove)}
   style={`--dragPadding: ${contentDragPadding}px;`}
 >
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <svg class="draggable-background" style={`--dotSize: ${dotSize};`}>
+    <!-- Small 2px offset to tuck the points under the viewport on load-->
+    <pattern
+      id="dot-pattern"
+      width={bgWidth}
+      height={bgHeight}
+      patternUnits="userSpaceOnUse"
+      patternTransform={`translate(${offsetX - 2}, ${offsetY - 2})`}
+    >
+      {@html Logo}
+    </pattern>
+    <rect x="0" y="0" width="100%" height="100%" fill="url(#dot-pattern)" />
+  </svg>
   <!-- svelte-ignore a11y-mouse-events-have-key-events -->
   <div
     class="draggable-view"
@@ -582,6 +611,7 @@
     position: relative;
   }
   .content {
+    transform-origin: 50% 50%;
     transform: scale(var(--scale));
     user-select: none;
     padding: var(--dragPadding);
@@ -602,13 +632,22 @@
     cursor: grabbing;
   }
 
-  .debug {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    position: fixed;
-    padding: var(--spacing-l);
-    z-index: 2;
+  .draggable-background {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
     pointer-events: none;
+    z-index: -1;
+    background-color: var(--spectrum-global-color-gray-50);
+  }
+
+  .draggable-background :global(svg g path) {
+    fill: #91919a;
+  }
+
+  .draggable-background :global(svg g) {
+    transform: scale(var(--dotSize));
   }
 </style>
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
index a12e55f26d..67ed8ff647 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
@@ -7,7 +7,6 @@
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import TestDataModal from "./TestDataModal.svelte"
   import {
-    Icon,
     notifications,
     Modal,
     Toggle,
@@ -100,15 +99,18 @@
       Run test
     </Button>
     <div class="buttons">
-      <Icon disabled={!$automationStore.testResults} size="M" name="Multiple" />
-      <div
-        class:disabled={!$automationStore.testResults}
-        on:click={() => {
-          $automationStore.showTestPanel = true
-        }}
-      >
-        Test details
-      </div>
+      {#if !$automationStore.showTestPanel && $automationStore.testResults}
+        <Button
+          secondary
+          icon={"Multiple"}
+          disabled={!$automationStore.testResults}
+          on:click={() => {
+            $automationStore.showTestPanel = true
+          }}
+        >
+          Test details
+        </Button>
+      {/if}
     </div>
     {#if !isRowAction}
       <div class="toggle-active setting-spacing">
@@ -168,9 +170,6 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    max-height: 100%;
-    height: 100%;
-    width: 100%;
   }
 
   .header-left {
@@ -210,15 +209,26 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-left: var(--spacing-l);
-    transition: background 130ms ease-out;
+    padding: var(--spacing-l);
     flex: 0 0 60px;
     padding-right: var(--spacing-xl);
+    position: absolute;
+    width: 100%;
+    box-sizing: border-box;
+    pointer-events: none;
+  }
+
+  .header > * {
+    pointer-events: auto;
   }
 
   .controls {
     display: flex;
-    gap: var(--spacing-xl);
+    gap: var(--spacing-l);
+  }
+
+  .controls .toggle-active :global(.spectrum-Switch-label) {
+    margin-right: 0px;
   }
 
   .buttons {
@@ -232,11 +242,6 @@
     cursor: pointer;
   }
 
-  .disabled {
-    pointer-events: none;
-    color: var(--spectrum-global-color-gray-500) !important;
-  }
-
   .group {
     border-radius: 4px;
     display: flex;

From 072b3b3854b525a035bd3353a60abf2ab35d830e Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 8 Nov 2024 14:45:38 +0000
Subject: [PATCH 05/12] Lint

---
 .../AutomationBuilder/DraggableCanvas.svelte          | 11 +++++------
 .../AutomationBuilder/FlowChart/FlowChart.svelte      |  2 --
 .../AutomationBuilder/FlowChart/FlowItem.svelte       |  2 +-
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte b/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
index c3a73a34e4..21d872a88e 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
@@ -8,9 +8,8 @@
     tick,
   } from "svelte"
   import Logo from "assets/bb-emblem.svg?raw"
-  import { Utils } from "@budibase/frontend-core"
+  import { Utils, memo } from "@budibase/frontend-core"
   import { selectedAutomation, automationStore } from "stores/builder"
-  import { memo } from "@budibase/frontend-core"
 
   export function toFocus() {
     viewToFocusEle()
@@ -365,7 +364,7 @@
   }
 
   // Reset state on mouse up
-  const globalMouseUp = e => {
+  const globalMouseUp = () => {
     down = false
 
     if ($view.dragging) {
@@ -524,7 +523,7 @@
   onMount(() => {
     // As the view/browser resizes, ensure the stored view is up to date
     viewObserver = new ResizeObserver(
-      Utils.domDebounce(e => {
+      Utils.domDebounce(() => {
         getDims()
       })
     )
@@ -550,7 +549,6 @@
   on:mousemove={Utils.domDebounce(onMouseMove)}
   style={`--dragPadding: ${contentDragPadding}px;`}
 >
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
   <svg class="draggable-background" style={`--dotSize: ${dotSize};`}>
     <!-- Small 2px offset to tuck the points under the viewport on load-->
     <pattern
@@ -560,11 +558,12 @@
       patternUnits="userSpaceOnUse"
       patternTransform={`translate(${offsetX - 2}, ${offsetY - 2})`}
     >
+      <!-- eslint-disable-next-line svelte/no-at-html-tags-->
       {@html Logo}
     </pattern>
     <rect x="0" y="0" width="100%" height="100%" fill="url(#dot-pattern)" />
   </svg>
-  <!-- svelte-ignore a11y-mouse-events-have-key-events -->
+
   <div
     class="draggable-view"
     bind:this={viewPort}
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
index 67ed8ff647..5961ec1c02 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
@@ -65,8 +65,6 @@
   }
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="header" class:scrolling>
   <div class="header-left">
     <UndoRedoControl store={automationHistoryStore} showButtonGroup />
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
index 2e1d4d2c26..0fa93f360d 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@@ -51,7 +51,7 @@
     if (!blockEle) {
       return
     }
-    const { width, height, top, left } = blockEle?.getBoundingClientRect()
+    const { width, height, top, left } = blockEle.getBoundingClientRect()
     blockDims = {
       width: width / $view.scale,
       height: height / $view.scale,

From 293abc80e15e6eeacdaf49652b958915e7ccdab9 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Tue, 26 Nov 2024 16:45:29 +0000
Subject: [PATCH 06/12] Added infinite dragging and some css updates to make
 the canvas drag UX more consistent

---
 .../AutomationBuilder/DraggableCanvas.svelte  | 72 ++++++++++++-------
 .../FlowChart/BranchNode.svelte               |  2 +
 .../FlowChart/FlowChart.svelte                | 13 +++-
 .../FlowChart/FlowItem.svelte                 |  1 +
 .../FlowChart/FlowItemActions.svelte          |  1 +
 5 files changed, 61 insertions(+), 28 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte b/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
index 21d872a88e..53de2bec24 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
@@ -11,6 +11,9 @@
   import { Utils, memo } from "@budibase/frontend-core"
   import { selectedAutomation, automationStore } from "stores/builder"
 
+  // CSS classes that, on mouse down, will trigger the view drag behaviour
+  export let draggableClasses = []
+
   export function toFocus() {
     viewToFocusEle()
   }
@@ -161,6 +164,10 @@
   // Scale prop for the icon
   let dotDefault = 0.006
 
+  let viewDragStart = { x: 0, y: 0 }
+  let viewDragOffset = [0, 0]
+  let startPos = [0, 0]
+
   $: bgSize = Math.max(bgDim * $view.scale, 10)
   $: bgWidth = bgSize
   $: bgHeight = bgSize
@@ -275,14 +282,17 @@
       y,
     }))
 
-    if (down && !$view.dragging && dragOffset) {
+    if (down && !$view.dragging) {
+      // Determine how much the view has moved since
+      viewDragOffset = [x - viewDragStart.x, y - viewDragStart.y]
+
       contentPos.update(state => ({
         ...state,
-        x: x - dragOffset[0],
-        y: y - dragOffset[1],
+        x: startPos[0] + viewDragOffset[0],
+        y: startPos[1] + viewDragOffset[1],
       }))
-      offsetX = x - dragOffset[0]
-      offsetY = y - dragOffset[1]
+      offsetX = startPos[0] + viewDragOffset[0]
+      offsetY = startPos[1] + viewDragOffset[1]
     }
 
     const clearScrollInterval = () => {
@@ -367,6 +377,9 @@
   const globalMouseUp = () => {
     down = false
 
+    viewDragStart = { x: 0, y: 0 }
+    viewDragOffset = [0, 0]
+
     if ($view.dragging) {
       dragOffset = [0, 0]
       view.update(state => ({
@@ -482,6 +495,11 @@
     dragOffset = [Math.abs(x - $contentPos.x), Math.abs(y - $contentPos.y)]
   }
 
+  const isDraggable = e => {
+    const draggable = ["draggable-view", ...draggableClasses]
+    return draggable.some(cls => e.target.classList.contains(cls))
+  }
+
   const viewToFocusEle = () => {
     if ($focusElement) {
       const viewWidth = viewDims.width
@@ -566,31 +584,31 @@
 
   <div
     class="draggable-view"
+    class:dragging={down}
     bind:this={viewPort}
     on:wheel={Utils.domDebounce(onViewScroll)}
     on:mousemove={Utils.domDebounce(onViewMouseMove)}
-    on:mouseup={onViewDragEnd}
+    on:mousedown={e => {
+      if ((e.which === 1 || e.button === 0) && isDraggable(e)) {
+        const { x, y } = eleXY(e, viewPort)
+        viewDragStart = { x, y }
+        startPos = [$contentPos.x, $contentPos.y]
+        down = true
+      }
+    }}
+    on:mouseup={e => {
+      viewDragOffset = [0, 0]
+      if ((e.which === 1 || e.button === 0) && isDraggable(e)) {
+        down = false
+      }
+      onViewDragEnd()
+    }}
   >
-    <div
-      class="content-wrap"
-      style={wrapStyles}
-      bind:this={contentWrap}
-      class:dragging={down}
-    >
+    <div class="content-wrap" style={wrapStyles} bind:this={contentWrap}>
       <div
         class="content"
         bind:this={mainContent}
         on:mousemove={Utils.domDebounce(onMoveContent)}
-        on:mousedown={e => {
-          if (e.which === 1 || e.button === 0) {
-            down = true
-          }
-        }}
-        on:mouseup={e => {
-          if (e.which === 1 || e.button === 0) {
-            down = false
-          }
-        }}
       >
         <slot name="content" />
       </div>
@@ -608,7 +626,12 @@
     height: 100%;
     overflow: hidden;
     position: relative;
+    cursor: grab;
   }
+  .draggable-view.dragging {
+    cursor: grabbing;
+  }
+
   .content {
     transform-origin: 50% 50%;
     transform: scale(var(--scale));
@@ -623,14 +646,9 @@
     left: 0;
     width: var(--wrapW);
     height: var(--wrapH);
-    cursor: grab;
     transform: translate(var(--posX), var(--posY));
   }
 
-  .content-wrap.dragging {
-    cursor: grabbing;
-  }
-
   .draggable-background {
     position: absolute;
     width: 100%;
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/BranchNode.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/BranchNode.svelte
index 670067ea26..99428e56f4 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/BranchNode.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/BranchNode.svelte
@@ -223,6 +223,7 @@
   .branch-actions {
     display: flex;
     gap: var(--spacing-l);
+    cursor: default;
   }
   .footer {
     display: flex;
@@ -261,6 +262,7 @@
     background-color: var(--background);
     border: 1px solid var(--spectrum-global-color-gray-300);
     border-radius: 4px 4px 4px 4px;
+    cursor: default;
   }
 
   .blockSection {
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
index 5961ec1c02..26a15a134a 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
@@ -127,7 +127,18 @@
 </div>
 
 <div class="root" bind:this={treeEle}>
-  <DraggableCanvas bind:this={draggable}>
+  <DraggableCanvas
+    bind:this={draggable}
+    draggableClasses={[
+      "main-content",
+      "content",
+      "block",
+      "branched",
+      "branch",
+      "flow-item",
+      "branch-wrap",
+    ]}
+  >
     <span class="main-content" slot="content">
       {#if Object.keys(blockRefs).length}
         {#each blocks as block, idx (block.id)}
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
index 0fa93f360d..0e5a932aa0 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@@ -400,6 +400,7 @@
     width: 480px;
     font-size: 16px;
     border-radius: 4px;
+    cursor: default;
   }
   .block .wrap {
     width: 100%;
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemActions.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemActions.svelte
index 1542c65650..e3014f3e56 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemActions.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemActions.svelte
@@ -47,5 +47,6 @@
     display: flex;
     gap: var(--spacing-m);
     padding: 8px 12px;
+    cursor: default;
   }
 </style>

From 0eb83239ddc861506806e68c02c6c8f40996b291 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Tue, 26 Nov 2024 16:56:43 +0000
Subject: [PATCH 07/12] Lint

---
 .../automation/AutomationBuilder/DraggableCanvas.svelte   | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte b/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
index 53de2bec24..f3dcbf9181 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
@@ -44,7 +44,6 @@
       w: contentDims.original.w,
       h: contentDims.original.h,
     }
-    dragOffset = []
     contentPos.update(state => ({
       ...state,
       x: 0,
@@ -135,9 +134,6 @@
   // Size of the view port
   let viewDims = {}
 
-  // When dragging the content, maintain the drag start offset
-  let dragOffset = []
-
   // Edge around the draggable content
   let contentDragPadding = 200
 
@@ -356,7 +352,6 @@
 
   const onViewDragEnd = () => {
     down = false
-    dragOffset = [0, 0]
   }
 
   const handleDragDrop = () => {
@@ -381,7 +376,6 @@
     viewDragOffset = [0, 0]
 
     if ($view.dragging) {
-      dragOffset = [0, 0]
       view.update(state => ({
         ...state,
         dragging: false,
@@ -491,8 +485,6 @@
       return
     }
     const { x, y } = eleXY(e, viewPort)
-
-    dragOffset = [Math.abs(x - $contentPos.x), Math.abs(y - $contentPos.y)]
   }
 
   const isDraggable = e => {

From 1f0de9b9cb802938ffb5b2749beb549f165c8741 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Tue, 26 Nov 2024 17:00:02 +0000
Subject: [PATCH 08/12] Remove unused

---
 .../automation/AutomationBuilder/DraggableCanvas.svelte          | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte b/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
index f3dcbf9181..9e53015f3e 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
@@ -484,7 +484,6 @@
     if (down || !viewPort) {
       return
     }
-    const { x, y } = eleXY(e, viewPort)
   }
 
   const isDraggable = e => {

From 29c780a458bfa4f41baa42991407c3ba8d060194 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Tue, 26 Nov 2024 17:31:32 +0000
Subject: [PATCH 09/12] Removed unnecessary mouse behaviour and added in a fix
 for dragging an element into its own drag zone.

---
 .../AutomationBuilder/DraggableCanvas.svelte       | 12 +-----------
 packages/builder/src/stores/builder/automations.js | 14 +++++++++++---
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte b/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
index 9e53015f3e..b1a4f37f46 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
@@ -480,12 +480,6 @@
     }
   }
 
-  const onMoveContent = e => {
-    if (down || !viewPort) {
-      return
-    }
-  }
-
   const isDraggable = e => {
     const draggable = ["draggable-view", ...draggableClasses]
     return draggable.some(cls => e.target.classList.contains(cls))
@@ -596,11 +590,7 @@
     }}
   >
     <div class="content-wrap" style={wrapStyles} bind:this={contentWrap}>
-      <div
-        class="content"
-        bind:this={mainContent}
-        on:mousemove={Utils.domDebounce(onMoveContent)}
-      >
+      <div class="content" bind:this={mainContent}>
         <slot name="content" />
       </div>
     </div>
diff --git a/packages/builder/src/stores/builder/automations.js b/packages/builder/src/stores/builder/automations.js
index 8f54f85ef5..aa35f8ca09 100644
--- a/packages/builder/src/stores/builder/automations.js
+++ b/packages/builder/src/stores/builder/automations.js
@@ -77,6 +77,17 @@ const automationActions = store => ({
    * @param {Object} automation the automaton to be mutated
    */
   moveBlock: async (sourcePath, destPath, automation) => {
+    // The last part of the source node address, containing the id.
+    const pathSource = sourcePath.at(-1)
+
+    // The last part of the destination node address, containing the id.
+    const pathEnd = destPath.at(-1)
+
+    // If they are the same then ignore the drag and drop
+    if (pathSource.id === pathEnd.id) {
+      return
+    }
+
     // Use core delete to remove and return the deleted block
     // from the automation
     const { deleted, newAutomation } = store.actions.deleteBlock(
@@ -89,9 +100,6 @@ const automationActions = store => ({
     const newRefs = {}
     store.actions.traverse(newRefs, newAutomation)
 
-    // The last part of the destination node address, containing the id.
-    const pathEnd = destPath.at(-1)
-
     let finalPath
     // If dropping in a branch-step dropzone you need to find
     // the updated parent step route then add the branch details again

From 5ccd20a00b02f09f14b586801219e9fa591f4202 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Wed, 27 Nov 2024 10:07:15 +0000
Subject: [PATCH 10/12] Added checks to ignore a drag and drop if it doesn't
 alter the tree structure

---
 packages/builder/src/stores/builder/automations.js | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/stores/builder/automations.js b/packages/builder/src/stores/builder/automations.js
index 08d5cbe816..d9e9f39f0f 100644
--- a/packages/builder/src/stores/builder/automations.js
+++ b/packages/builder/src/stores/builder/automations.js
@@ -84,8 +84,18 @@ const automationActions = store => ({
     // The last part of the destination node address, containing the id.
     const pathEnd = destPath.at(-1)
 
-    // If they are the same then ignore the drag and drop
-    if (pathSource.id === pathEnd.id) {
+    // Check if dragging a step into its own drag zone
+    const isOwnDragzone = pathSource.id === pathEnd.id
+
+    // Check if dragging the first branch step into the branch node drag zone
+    const isFirstBranchStep =
+      pathEnd.branchStepId &&
+      pathEnd.branchIdx === pathSource.branchIdx &&
+      pathSource.stepIdx === 0
+
+    // If dragging into an area that will not affect the tree structure
+    // Ignore the drag and drop.
+    if (isOwnDragzone || isFirstBranchStep) {
       return
     }
 

From 2a1d002d7fbc083e90ed62a8b2c834bcc0074d69 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 11 Dec 2024 11:05:11 +0000
Subject: [PATCH 11/12] Fix client error SVG

---
 packages/client/src/components/ClientApp.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 1610f36bdc..2840d82f47 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -2,7 +2,7 @@
   import { writable, get } from "svelte/store"
   import { setContext, onMount } from "svelte"
   import { Layout, Heading, Body } from "@budibase/bbui"
-  import ErrorSVG from "@budibase/frontend-core/assets/error.svg"
+  import ErrorSVG from "@budibase/frontend-core/assets/error.svg?raw"
   import { Constants, CookieUtils } from "@budibase/frontend-core"
   import { getThemeClassNames } from "@budibase/shared-core"
   import Component from "./Component.svelte"

From eca009920ce2dcb8b10940a59267fa87f8d8a0c4 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Thu, 12 Dec 2024 16:00:28 +0000
Subject: [PATCH 12/12] Fixing some type issue found during the frontend-core
 updates.

---
 packages/server/src/api/controllers/permission.ts | 4 ++--
 packages/types/src/api/web/app/permission.ts      | 2 +-
 packages/types/src/api/web/global/self.ts         | 2 +-
 packages/types/src/documents/app/app.ts           | 1 +
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/server/src/api/controllers/permission.ts b/packages/server/src/api/controllers/permission.ts
index 2ef197dbca..e38c736c20 100644
--- a/packages/server/src/api/controllers/permission.ts
+++ b/packages/server/src/api/controllers/permission.ts
@@ -9,7 +9,7 @@ import {
   RemovePermissionRequest,
   RemovePermissionResponse,
   FetchResourcePermissionInfoResponse,
-  FetchBuiltinPermissionsRequest,
+  FetchBuiltinPermissionsResponse,
   FetchPermissionLevelsRequest,
 } from "@budibase/types"
 import {
@@ -22,7 +22,7 @@ import { PermissionUpdateType } from "../../sdk/app/permissions"
 const SUPPORTED_LEVELS = CURRENTLY_SUPPORTED_LEVELS
 
 export function fetchBuiltin(
-  ctx: UserCtx<void, FetchBuiltinPermissionsRequest>
+  ctx: UserCtx<void, FetchBuiltinPermissionsResponse>
 ) {
   ctx.body = Object.values(permissions.getBuiltinPermissions())
 }
diff --git a/packages/types/src/api/web/app/permission.ts b/packages/types/src/api/web/app/permission.ts
index 1a19fb0834..407dc2be86 100644
--- a/packages/types/src/api/web/app/permission.ts
+++ b/packages/types/src/api/web/app/permission.ts
@@ -1,6 +1,6 @@
 import { BuiltinPermission, PermissionLevel } from "../../../sdk"
 
-export type FetchBuiltinPermissionsRequest = BuiltinPermission[]
+export type FetchBuiltinPermissionsResponse = BuiltinPermission[]
 
 export type FetchPermissionLevelsRequest = string[]
 
diff --git a/packages/types/src/api/web/global/self.ts b/packages/types/src/api/web/global/self.ts
index 4ba51d2cd5..5f21a8ddc5 100644
--- a/packages/types/src/api/web/global/self.ts
+++ b/packages/types/src/api/web/global/self.ts
@@ -1,7 +1,7 @@
 import { DevInfo, User } from "../../../documents"
 
 export interface GenerateAPIKeyRequest {
-  userId: string
+  userId?: string
 }
 export interface GenerateAPIKeyResponse extends DevInfo {}
 
diff --git a/packages/types/src/documents/app/app.ts b/packages/types/src/documents/app/app.ts
index 06fca8307c..e31dd1e9ac 100644
--- a/packages/types/src/documents/app/app.ts
+++ b/packages/types/src/documents/app/app.ts
@@ -28,6 +28,7 @@ export interface App extends Document {
   upgradableVersion?: string
   snippets?: Snippet[]
   creationVersion?: string
+  updatedBy?: string
 }
 
 export interface AppInstance {