@tscircuit/schematic-viewer 2.0.28 → 2.0.30

package/dist/index.js

@@ -195,6 +195,28 @@ var useChangeSchematicTracesForMovedComponents = ({
 // lib/hooks/useSchematicGroupsOverlay.ts
 import { useEffect as useEffect3 } from "react";
 import { su as su3 } from "@tscircuit/soup-util";
+var GROUP_COLORS = [
+  "#8B0000",
+  // Dark Red
+  "#2F4F4F",
+  // Dark Slate Gray
+  "#191970",
+  // Midnight Blue
+  "#006400",
+  // Dark Green
+  "#FF4500",
+  // Dark Orange
+  "#800080",
+  // Purple
+  "#2E8B57",
+  // Sea Green
+  "#B8860B",
+  // Dark Goldenrod
+  "#C71585",
+  // Medium Violet Red
+  "#008B8B"
+  // Dark Cyan
+];
 var useSchematicGroupsOverlay = (options) => {
   const { svgDivRef, circuitJson, circuitJsonKey, showGroups } = options;
   useEffect3(() => {
@@ -214,10 +236,40 @@ var useSchematicGroupsOverlay = (options) => {
     const existingOverlays = svg.querySelectorAll(".schematic-group-overlay");
     existingOverlays.forEach((overlay) => overlay.remove());
     try {
-      const sourceGroups = su3(circuitJson).source_group?.list() || [];
+      const sourceGroups = su3(circuitJson).source_group?.list().filter((x) => !!!x.is_subcircuit) || [];
       const schematicComponents = su3(circuitJson).schematic_component?.list() || [];
-      let groupsToRender = [];
+      const sourceGroupHierarchy = /* @__PURE__ */ new Map();
+      sourceGroups.forEach((group) => {
+        const groupWithParent = group;
+        if (groupWithParent.parent_source_group_id) {
+          const children = sourceGroupHierarchy.get(groupWithParent.parent_source_group_id) || [];
+          children.push(group.source_group_id);
+          sourceGroupHierarchy.set(
+            groupWithParent.parent_source_group_id,
+            children
+          );
+        }
+      });
+      const getAllDescendantSourceGroups = (sourceGroupId) => {
+        const descendants = [];
+        const children = sourceGroupHierarchy.get(sourceGroupId) || [];
+        for (const child of children) {
+          descendants.push(child);
+          descendants.push(...getAllDescendantSourceGroups(child));
+        }
+        return descendants;
+      };
+      const getGroupDepthLevel = (sourceGroupId) => {
+        const groupWithParent = sourceGroups.find(
+          (g) => g.source_group_id === sourceGroupId
+        );
+        if (!groupWithParent?.parent_source_group_id) {
+          return 0;
+        }
+        return 1 + getGroupDepthLevel(groupWithParent.parent_source_group_id);
+      };
       const hasMeaningfulGroups = sourceGroups.length > 0 && sourceGroups.some((group) => group.name && group.name.trim() !== "");
+      let groupsToRender = [];
       if (hasMeaningfulGroups) {
         const groupMap = /* @__PURE__ */ new Map();
         for (const comp of schematicComponents) {
@@ -231,84 +283,138 @@ var useSchematicGroupsOverlay = (options) => {
             groupMap.get(sourceComp.source_group_id).push(comp);
           }
         }
-        groupsToRender = Array.from(groupMap.entries()).map(
-          ([groupId, components], index) => {
-            const group = sourceGroups.find(
-              (g) => g.source_group_id === groupId
-            );
-            return {
-              id: groupId,
-              name: group?.name || `Group ${index + 1}`,
-              components,
-              color: getGroupColor(index)
-            };
-          }
-        );
-      } else {
-        const componentTypeGroups = /* @__PURE__ */ new Map();
-        for (const comp of schematicComponents) {
-          const sourceComp = su3(circuitJson).source_component.get(
-            comp.source_component_id
+        sourceGroups.forEach((group, index) => {
+          let groupComponents = groupMap.get(group.source_group_id) || [];
+          const descendantGroups = getAllDescendantSourceGroups(
+            group.source_group_id
           );
-          if (sourceComp) {
-            const componentType = sourceComp.ftype || "other";
-            if (!componentTypeGroups.has(componentType)) {
-              componentTypeGroups.set(componentType, []);
-            }
-            componentTypeGroups.get(componentType).push(comp);
+          for (const descendantGroupId of descendantGroups) {
+            const descendantComponents = groupMap.get(descendantGroupId) || [];
+            groupComponents = [...groupComponents, ...descendantComponents];
           }
-        }
-        groupsToRender = Array.from(componentTypeGroups.entries()).map(
-          ([type, components], index) => ({
-            id: `type_${type}`,
-            name: `${type.charAt(0).toUpperCase() + type.slice(1)}s`,
-            components,
-            color: getGroupColor(index)
-          })
-        );
+          if (groupComponents.length > 0) {
+            const depthLevel = getGroupDepthLevel(group.source_group_id);
+            const hasChildren = getAllDescendantSourceGroups(group.source_group_id).length > 0;
+            if (group.name?.startsWith("unnamed_board")) return;
+            groupsToRender.push({
+              id: group.source_group_id,
+              name: group.name || `Group ${index + 1}`,
+              components: groupComponents,
+              color: GROUP_COLORS[index % GROUP_COLORS.length],
+              depthLevel,
+              hasChildren,
+              sourceGroupId: group.source_group_id
+            });
+          }
+        });
       }
-      groupsToRender.forEach((group, groupIndex) => {
+      const viewBox = svg.viewBox.baseVal;
+      const svgRect = svg.getBoundingClientRect();
+      const scale = Math.min(
+        svgRect.width / viewBox.width,
+        svgRect.height / viewBox.height
+      ) || 1;
+      groupsToRender.sort((a, b) => a.depthLevel - b.depthLevel);
+      groupsToRender.forEach((group) => {
         if (group.components.length === 0) return;
         const groupBounds = calculateGroupBounds(group.components, svg);
         if (!groupBounds) return;
+        const basePadding = Math.max(8, Math.min(25, 15 / Math.max(scale, 0.3)));
+        const hierarchyPadding = group.hasChildren ? basePadding * 0.6 : 0;
+        const totalPadding = basePadding + hierarchyPadding;
+        const baseStrokeWidth = Math.max(1, 2 / Math.max(scale, 0.5));
+        const strokeWidth = group.depthLevel === 0 ? baseStrokeWidth : baseStrokeWidth * 0.7;
+        const baseDashSize = Math.max(4, 8 / Math.max(scale, 0.5));
+        const dashMultiplier = group.hasChildren ? 1.3 : 1;
+        const dashSize = baseDashSize * dashMultiplier;
+        const gapSize = dashSize * 0.5;
         const groupOverlay = document.createElementNS(
           "http://www.w3.org/2000/svg",
           "rect"
         );
         groupOverlay.setAttribute("class", "schematic-group-overlay");
-        groupOverlay.setAttribute("x", (groupBounds.minX - 25).toString());
-        groupOverlay.setAttribute("y", (groupBounds.minY - 25).toString());
+        groupOverlay.setAttribute(
+          "x",
+          (groupBounds.minX - totalPadding).toString()
+        );
+        groupOverlay.setAttribute(
+          "y",
+          (groupBounds.minY - totalPadding).toString()
+        );
         groupOverlay.setAttribute(
           "width",
-          (groupBounds.maxX - groupBounds.minX + 50).toString()
+          (groupBounds.maxX - groupBounds.minX + totalPadding * 2).toString()
         );
         groupOverlay.setAttribute(
           "height",
-          (groupBounds.maxY - groupBounds.minY + 50).toString()
+          (groupBounds.maxY - groupBounds.minY + totalPadding * 2).toString()
         );
         groupOverlay.setAttribute("fill", "none");
         groupOverlay.setAttribute("stroke", group.color);
-        groupOverlay.setAttribute("stroke-width", "3");
-        groupOverlay.setAttribute("stroke-dasharray", "8,4");
+        groupOverlay.setAttribute("stroke-width", strokeWidth.toString());
+        groupOverlay.setAttribute("stroke-dasharray", `${dashSize},${gapSize}`);
         groupOverlay.setAttribute("opacity", "0.8");
         groupOverlay.setAttribute("rx", "4");
         groupOverlay.setAttribute("ry", "4");
+        const baseFontSize = Math.max(
+          6,
+          Math.min(20, 14 / Math.max(scale, 0.2))
+        );
+        const fontSizeReduction = group.depthLevel === 0 || group.depthLevel === 1 ? 0 : group.depthLevel * 0.2;
+        const fontSize = baseFontSize * (1 - fontSizeReduction);
+        const labelPadding = Math.max(1, fontSize * 0.2);
+        const labelText = group.name;
+        const tempText = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "text"
+        );
+        tempText.setAttribute("font-size", fontSize.toString());
+        tempText.setAttribute("font-family", "Arial, sans-serif");
+        tempText.textContent = labelText;
+        svg.appendChild(tempText);
+        const textBBox = tempText.getBBox();
+        svg.removeChild(tempText);
+        const labelWidth = textBBox.width + labelPadding * 2;
+        const labelHeight = fontSize + labelPadding * 2;
+        const labelX = groupBounds.minX - totalPadding;
+        const labelY = groupBounds.minY - totalPadding - labelHeight;
+        const labelBg = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "rect"
+        );
+        labelBg.setAttribute("class", "schematic-group-overlay");
+        labelBg.setAttribute("x", labelX.toString());
+        labelBg.setAttribute("y", (labelY - labelHeight).toString());
+        labelBg.setAttribute("width", labelWidth.toString());
+        labelBg.setAttribute("height", labelHeight.toString());
+        labelBg.setAttribute("fill", "transparent");
+        labelBg.setAttribute("rx", "3");
+        labelBg.setAttribute("ry", "3");
         const groupLabel = document.createElementNS(
           "http://www.w3.org/2000/svg",
           "text"
         );
         groupLabel.setAttribute("class", "schematic-group-overlay");
-        groupLabel.setAttribute("x", (groupBounds.minX - 10).toString());
-        groupLabel.setAttribute("y", (groupBounds.minY - 8).toString());
+        groupLabel.setAttribute("x", (labelX + labelPadding).toString());
+        groupLabel.setAttribute(
+          "y",
+          (labelY + labelHeight - labelPadding).toString()
+        );
         groupLabel.setAttribute("fill", group.color);
-        groupLabel.setAttribute("font-size", "14");
+        groupLabel.setAttribute("font-size", fontSize.toString());
         groupLabel.setAttribute("font-family", "Arial, sans-serif");
-        groupLabel.setAttribute("font-weight", "bold");
-        groupLabel.setAttribute("stroke", "#fff");
-        groupLabel.setAttribute("stroke-width", "0.5");
-        groupLabel.setAttribute("paint-order", "stroke fill");
-        groupLabel.textContent = group.name;
+        groupLabel.setAttribute(
+          "font-weight",
+          group.depthLevel === 0 ? "600" : "500"
+        );
+        groupLabel.setAttribute("stroke", group.color);
+        groupLabel.setAttribute(
+          "stroke-width",
+          Math.max(0.2, fontSize * 0.02).toString()
+        );
+        groupLabel.textContent = labelText;
         svg.appendChild(groupOverlay);
+        svg.appendChild(labelBg);
         svg.appendChild(groupLabel);
       });
     } catch (error) {
@@ -316,27 +422,6 @@ var useSchematicGroupsOverlay = (options) => {
     }
   }, [svgDivRef, circuitJsonKey, showGroups]);
 };
-function getGroupColor(index) {
-  const colors2 = [
-    "#FF6B6B",
-    // Red
-    "#4ECDC4",
-    // Teal
-    "#45B7D1",
-    // Blue
-    "#96CEB4",
-    // Green
-    "#FF8C42",
-    // Orange
-    "#DDA0DD",
-    // Plum
-    "#98D8C8",
-    // Mint
-    "#F7DC6F"
-    // Light Yellow
-  ];
-  return colors2[index % colors2.length];
-}
 function calculateGroupBounds(components, svg) {
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
   for (const component of components) {
@@ -1448,7 +1533,7 @@ var SchematicViewer = ({
       },
       colorOverrides
     });
-  }, [circuitJson, containerWidth, containerHeight]);
+  }, [circuitJsonKey, containerWidth, containerHeight]);
   const containerBackgroundColor = useMemo2(() => {
     const match = svgString.match(
       /<svg[^>]*style="[^"]*background-color:\s*([^;\"]+)/i