Simplify some utils

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)
 

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

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) => {