From 25ff092da291c50da31f0e72d94eff9956ee7c57 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 12 Aug 2024 14:54:39 +0100
Subject: [PATCH] Simplify some utils

---
 .../src/components/preview/GridDNDHandler.svelte | 16 +++++-----------
 .../src/components/preview/IndicatorSet.svelte   |  6 +-----
 packages/client/src/utils/grid.js                | 10 ----------
 3 files changed, 6 insertions(+), 26 deletions(-)

diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index a5ff8e0c27..cfcc2892af 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -40,12 +40,6 @@
   // Sugar for a combination of both min and max
   const minMax = (value, min, max) => Math.min(max, Math.max(min, value))
 
-  // Util to get the inner DOM node by a component ID
-  const getDOMNode = id => {
-    const component = document.getElementsByClassName(id)[0]
-    return Array.from(component?.children || [])[0]
-  }
-
   const enrichComponentStyles = styles => {
     let clone = { ...styles }
     if (styles) {
@@ -137,16 +131,16 @@
     }
 
     // Find grid parent and read from DOM
-    const domComponent = getDOMNode(id)
-    const domGrid = getGridParent(domComponent)
+    const domComponent = document.getElementsByClassName(id)[0]
+    const domGrid = domComponent?.closest(".grid")
     if (!domGrid) {
       return
     }
-    const styles = getComputedStyle(domComponent.parentNode)
+    const styles = getComputedStyle(domComponent)
 
     // Show as active
     builderStore.actions.selectComponent(id)
-    domComponent.parentNode.classList.add("dragging")
+    domComponent.classList.add("dragging")
     domGrid.classList.add("highlight")
 
     // Update state
@@ -187,7 +181,7 @@
     const { id, domTarget, domGrid, domComponent } = dragInfo
 
     // Reset DOM
-    domComponent.parentNode.classList.remove("dragging")
+    domComponent.classList.remove("dragging")
     domGrid.classList.remove("highlight")
     domTarget.removeEventListener("dragend", stopDragging)
 
diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte
index de7fc0f66c..af709d24ba 100644
--- a/packages/client/src/components/preview/IndicatorSet.svelte
+++ b/packages/client/src/components/preview/IndicatorSet.svelte
@@ -70,10 +70,6 @@
     }
   }
 
-  const checkInsideGrid = id => {
-    return isGridChild(document.getElementsByClassName(id)[0])
-  }
-
   const createIntersectionCallback = idx => entries => {
     if (callbackCount >= observers.length) {
       return
@@ -117,7 +113,7 @@
 
     // Check if we're inside a grid
     if (allowResizeAnchors) {
-      nextState.insideGrid = checkInsideGrid(componentId)
+      nextState.insideGrid = parents[0]?.dataset.insideGrid === "true"
     }
 
     // Get text to display
diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index a7ca3e5286..afce01bbaa 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -52,16 +52,6 @@ export const isGridEvent = e => {
   )
 }
 
-// Determines whether a DOM element is an immediate child of a grid
-export const isGridChild = node => {
-  return node?.parentNode.classList.contains("grid")
-}
-
-// Gets the component ID of the closest parent grid
-export const getGridParent = node => {
-  return node?.parentNode?.closest(".grid")
-}
-
 // Svelte action to apply required class names and styles to our component
 // wrappers
 export const gridLayout = (node, metadata) => {