feat: Group overlay on moving child component

bun.lock

@@ -26,12 +26,12 @@
         "@storybook/react": "^8.0.6",
         "@swc/core": "^1.4.12",
         "@tscircuit/eagle-xml-converter": "^1.0.0",
-        "@tscircuit/props": "^0.0.181",
+        "@tscircuit/props": "^0.0.182",
         "@tscircuit/soup-util": "^0.0.41",
         "@types/color": "^3.0.6",
         "@types/node": "18.7.23",
         "@types/react": "^18.3.3",
-        "circuit-json": "^0.0.158",
+        "circuit-json": "^0.0.186",
         "next": "^14.1.4",
         "pixi.js": "^8.6.6",
         "react": "^18.2.0",
@@ -608,7 +608,7 @@
 
     "@tscircuit/mm": ["@tscircuit/[email protected]", "", { "dependencies": { "convert-units": "^2.3.4" }, "peerDependencies": { "typescript": "^5.0.0" } }, "sha512-5lZjeOsrkQDnMd4OEuXQYC8k+zuWCbX9Ruq69JhcvLu18FUen3pPjBxmFyF2DGZYxaTrKUpUdZvoTr49TISN2g=="],
 
-    "@tscircuit/props": ["@tscircuit/[email protected].181", "", { "peerDependencies": { "@tscircuit/layout": "*", "circuit-json": "*", "react": "*", "zod": "*" } }, "sha512-Oqt6Tyzo4diMepQog7WV5lOCtR1mcB10vnXeDWrzEIDKfLOt0kqNSeB9Le+Ew2JtD5l83ujZZZDOqHue02ZryA=="],
+    "@tscircuit/props": ["@tscircuit/[email protected].182", "", { "peerDependencies": { "@tscircuit/layout": "*", "circuit-json": "*", "react": "*", "zod": "*" } }, "sha512-kpzCd9FZIdqATOqUyIT1nD3A/h8PuVAuZNqHZeQ6YNeDfNVwVRjt744p34v1JJfc/NG38vAsKL9m4bNQqSmgcA=="],
 
     "@tscircuit/routing": ["@tscircuit/[email protected]", "", { "dependencies": { "bs58": "^5.0.0", "pathfinding": "^0.4.18", "react-error-boundary": "^4.0.11" } }, "sha512-6qHGsKC731TbeaqiQToHS5Zao+93nv99LjbpI479Bqz8Avc8CAUax9QnhMhJ5KvYQv5zLtjv2ywezzRxZf09ZA=="],
 
@@ -896,7 +896,7 @@
 
     "cipher-base": ["[email protected]", "", { "dependencies": { "inherits": "^2.0.4", "safe-buffer": "^5.2.1" } }, "sha512-3Ek9H3X6pj5TgenXYtNWdaBon1tgYCaebd+XPg0keyjEbEfkD4KkmAxkQ/i1vYvxdcT5nscLBfq9VJRmCBcFSw=="],
 
-    "circuit-json": ["[email protected].158", "", { "dependencies": { "nanoid": "^5.0.7", "zod": "^3.23.6" } }, "sha512-pqiEs9qMaWK8eujbAP8PbR92K4MdEQOiD1BS1RWskAJ9XrbFRrRUGvSCw/JGva0XjapgNATVusz/9lmbBbmybw=="],
+    "circuit-json": ["[email protected].186", "", { "dependencies": { "nanoid": "^5.0.7", "zod": "^3.23.6" } }, "sha512-2v4T9XCHdHguRaRDgrwAcSnKyLhKdHLKKPcmK9k+o6+rCHWzKswaazWXr/B/ePRTlkVl9ApT4KLgaQx/vPa8dw=="],
 
     "circuit-json-to-connectivity-map": ["[email protected]", "", { "dependencies": { "@tscircuit/math-utils": "^0.0.9" }, "peerDependencies": { "typescript": "^5.0.0" } }, "sha512-HN8DiISjZZLTglGEkYNRpKeQ/DMG4dDo5j4Hck0UGSJbpux9aFwtJOGszMf06Inh/gu5oKBrpZJIeWxaNacKUg=="],
 

package.json

@@ -27,12 +27,12 @@
     "@storybook/react": "^8.0.6",
     "@swc/core": "^1.4.12",
     "@tscircuit/eagle-xml-converter": "^1.0.0",
-    "@tscircuit/props": "^0.0.181",
+    "@tscircuit/props": "^0.0.182",
     "@tscircuit/soup-util": "^0.0.41",
     "@types/color": "^3.0.6",
     "@types/node": "18.7.23",
     "@types/react": "^18.3.3",
-    "circuit-json": "^0.0.158",
+    "circuit-json": "^0.0.186",
     "next": "^14.1.4",
     "pixi.js": "^8.6.6",
     "react": "^18.2.0",

src/components/EditPlacementOverlay.tsx

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react"
 import type { Matrix } from "transformation-matrix"
 import { applyToPoint, identity, inverse } from "transformation-matrix"
 import type { ManualEditEvent } from "@tscircuit/props"
+import { getGroupBoundingBox } from "lib/util/get-group-bounding-box"
 
 interface Props {
   transform?: Matrix
@@ -31,6 +32,19 @@ const isInsideOf = (
   return point.x > left && point.x < right && point.y > top && point.y < bottom
 }
 
+const findComponentsInSameGroup = (
+  pcbComponent: PcbComponent | null,
+  circuitJson: AnyCircuitElement[],
+): PcbComponent[] => {
+  if (!pcbComponent) return []
+  const groupComponents = circuitJson.filter(
+    (e) =>
+      e.type === "pcb_component" && e.pcb_group_id === pcbComponent.pcb_group_id,
+  ) as PcbComponent[]
+
+  return groupComponents
+}
+
 export const EditPlacementOverlay = ({
   children,
   disabled: disabledProp,
@@ -52,9 +66,20 @@ export const EditPlacementOverlay = ({
     edit_event_id: string
   } | null>(null)
   const isPcbComponentActive = activePcbComponentId !== null
-  const in_edit_mode = useGlobalStore((s) => s.in_edit_mode)
   const in_move_footprint_mode = useGlobalStore((s) => s.in_move_footprint_mode)
   const setIsMovingComponent = useGlobalStore((s) => s.setIsMovingComponent)
+
+  const [componentsInSameGroup, setComponentsInSameGroup] = useState<PcbComponent[]>([])
+  const [parentGroupBoundingBox, setParentGroupBoundingBox] = useState<ReturnType<typeof getGroupBoundingBox>>(null)
+  const pcbComponent = soup.find(e => e.type === "pcb_component" && e.pcb_component_id === activePcbComponentId) as PcbComponent
+
+  useEffect(() => {
+    const groupComponents = findComponentsInSameGroup(pcbComponent, soup)
+    setComponentsInSameGroup(groupComponents)
+
+    const boundingBox = getGroupBoundingBox(groupComponents, transform, 1)
+    setParentGroupBoundingBox(boundingBox)
+  }, [pcbComponent])
 
   const disabled = disabledProp || !in_move_footprint_mode
 
@@ -161,24 +186,40 @@ export const EditPlacementOverlay = ({
             const projectedCenter = applyToPoint(transform, e.center)
 
             return (
-              <div
-                key={e.pcb_component_id}
-                style={{
-                  position: "absolute",
-                  pointerEvents: "none",
-                  // b/c of transform, this is actually center not left/top
-                  left: projectedCenter.x,
-                  top: projectedCenter.y,
-                  width: e.width * transform.a + 20,
-                  height: e.height * transform.a + 20,
-                  transform: "translate(-50%, -50%)",
-                  background:
-                    isPcbComponentActive &&
-                    activePcbComponentId === e.pcb_component_id
-                      ? "rgba(255, 0, 0, 0.2)"
-                      : "",
-                }}
-              />
+              <>
+                <div
+                  key={e.pcb_component_id}
+                  style={{
+                    position: "absolute",
+                    pointerEvents: "none",
+                    left: projectedCenter.x,
+                    top: projectedCenter.y,
+                    width: e.width * transform.a + 20,
+                    height: e.height * transform.a + 20,
+                    transform: "translate(-50%, -50%)",
+                    background:
+                      isPcbComponentActive &&
+                      activePcbComponentId === e.pcb_component_id
+                        ? "rgba(255, 0, 0, 0.2)"
+                        : "",
+                  }}
+                />
+                {parentGroupBoundingBox && isPcbComponentActive && (
+                  <div
+                    style={{
+                      position: "absolute",
+                      left: parentGroupBoundingBox.x,
+                      top: parentGroupBoundingBox.y,
+                      width: parentGroupBoundingBox.width,
+                      height: parentGroupBoundingBox.height,
+                      transform: "translate(-50%, -50%)",
+                      border: "2px solid rgba(246, 255, 0, 0.82)",
+                      borderStyle: "dotted",
+                      pointerEvents: "none",
+                    }}
+                  />
+                )}
+              </>
             )
           })}
     </div>

src/lib/util/get-group-bounding-box.ts

@@ -0,0 +1,42 @@
+import type { PcbComponent } from "circuit-json"
+import { applyToPoint, type Matrix } from "transformation-matrix"
+
+export const getGroupBoundingBox = (
+  childComponentsOfGroup: PcbComponent[],
+  transform: Matrix,
+  padding = 1,
+) => {
+  if (childComponentsOfGroup.length === 0) return null
+
+  let minX = Infinity
+  let minY = Infinity
+  let maxX = -Infinity
+  let maxY = -Infinity
+
+  childComponentsOfGroup.forEach((comp) => {
+    const halfWidth = comp.width / 2
+    const halfHeight = comp.height / 2
+
+    minX = Math.min(minX, comp.center.x - halfWidth)
+    minY = Math.min(minY, comp.center.y - halfHeight)
+    maxX = Math.max(maxX, comp.center.x + halfWidth)
+    maxY = Math.max(maxY, comp.center.y + halfHeight)
+  })
+
+  // Apply transform to the center point
+  const transformedCenter = applyToPoint(transform, {
+    x: (minX + maxX) / 2,
+    y: (minY + maxY) / 2,
+  })
+
+  // Scale the width and height by the transform scale factor
+  const width = (maxX - minX + padding * 2) * transform.a
+  const height = (maxY - minY + padding * 2) * transform.a
+
+  return {
+    x: transformedCenter.x,
+    y: transformedCenter.y,
+    width,
+    height,
+  }
+}

src/stories/parent-group-hover.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta } from "@storybook/react"
+import { Circuit } from "@tscircuit/core"
+import { PCBViewer } from "../PCBViewer"
+
+export const ParentGroupHoverDemo: React.FC = () => {
+  const circuit = new Circuit()
+
+  circuit.add(
+    <board width="20mm" height="20mm">
+      <resistor
+        name="R1"
+        pcbX={0}
+        pcbY={0}
+        footprint="0402"
+        resistance="10kohm"
+      />
+      <group name="group-1">
+        <resistor
+          name="R0"
+          pcbX={-4}
+          pcbY={-2}
+          footprint="0402"
+          resistance="10kohm"
+        />
+        <capacitor
+          name="C1"
+          pcbX={-4}
+          pcbY={-4}
+          footprint="0402"
+          capacitance="100nF"
+        />
+      </group>
+    </board>,
+  )
+
+  const circuitJson = circuit.getCircuitJson()
+
+  return <PCBViewer circuitJson={circuitJson} />
+}
+
+const meta: Meta<typeof ParentGroupHoverDemo> = {
+  title: "Parent Group Hover",
+  component: ParentGroupHoverDemo,
+}
+
+export default meta