@tscircuit/schematic-viewer 2.0.37 → 2.0.38

package/dist/index.js

@@ -220,206 +220,218 @@ var GROUP_COLORS = [
 var useSchematicGroupsOverlay = (options) => {
   const { svgDivRef, circuitJson, circuitJsonKey, showGroups } = options;
   useEffect3(() => {
-    if (!svgDivRef.current || !showGroups || !circuitJson || circuitJson.length === 0) {
-      if (svgDivRef.current) {
-        const existingOverlays2 = svgDivRef.current.querySelectorAll(
-          ".schematic-group-overlay"
-        );
-        existingOverlays2.forEach((overlay) => overlay.remove());
-      }
-      return;
+    if (svgDivRef.current) {
+      const existingOverlays = svgDivRef.current.querySelectorAll(
+        ".schematic-group-overlay"
+      );
+      existingOverlays.forEach((overlay) => overlay.remove());
     }
-    const svg = svgDivRef.current.querySelector("svg");
-    if (!svg) {
+    if (!svgDivRef.current || !showGroups || !circuitJson || circuitJson.length === 0) {
       return;
     }
-    const existingOverlays = svg.querySelectorAll(".schematic-group-overlay");
-    existingOverlays.forEach((overlay) => overlay.remove());
-    try {
-      const sourceGroups = su3(circuitJson).source_group?.list().filter((x) => !!!x.is_subcircuit) || [];
-      const schematicComponents = su3(circuitJson).schematic_component?.list() || [];
-      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) {
-          const sourceComp = su3(circuitJson).source_component.get(
-            comp.source_component_id
+    const timeoutId = setTimeout(() => {
+      if (!svgDivRef.current) return;
+      const svg = svgDivRef.current.querySelector("svg");
+      if (!svg) {
+        return;
+      }
+      const existingOverlays = svg.querySelectorAll(".schematic-group-overlay");
+      existingOverlays.forEach((overlay) => overlay.remove());
+      try {
+        const sourceGroups = su3(circuitJson).source_group?.list().filter((x) => !!!x.is_subcircuit) || [];
+        const schematicComponents = su3(circuitJson).schematic_component?.list() || [];
+        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 (sourceComp?.source_group_id) {
-            if (!groupMap.has(sourceComp.source_group_id)) {
-              groupMap.set(sourceComp.source_group_id, []);
+          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) {
+            const sourceComp = su3(circuitJson).source_component.get(
+              comp.source_component_id
+            );
+            if (sourceComp?.source_group_id) {
+              if (!groupMap.has(sourceComp.source_group_id)) {
+                groupMap.set(sourceComp.source_group_id, []);
+              }
+              groupMap.get(sourceComp.source_group_id).push(comp);
             }
-            groupMap.get(sourceComp.source_group_id).push(comp);
           }
+          sourceGroups.forEach((group, index) => {
+            let groupComponents = groupMap.get(group.source_group_id) || [];
+            const descendantGroups = getAllDescendantSourceGroups(
+              group.source_group_id
+            );
+            for (const descendantGroupId of descendantGroups) {
+              const descendantComponents = groupMap.get(descendantGroupId) || [];
+              groupComponents = [...groupComponents, ...descendantComponents];
+            }
+            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
+              });
+            }
+          });
         }
-        sourceGroups.forEach((group, index) => {
-          let groupComponents = groupMap.get(group.source_group_id) || [];
-          const descendantGroups = getAllDescendantSourceGroups(
-            group.source_group_id
+        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))
           );
-          for (const descendantGroupId of descendantGroups) {
-            const descendantComponents = groupMap.get(descendantGroupId) || [];
-            groupComponents = [...groupComponents, ...descendantComponents];
-          }
-          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
-            });
-          }
+          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 - totalPadding).toString()
+          );
+          groupOverlay.setAttribute(
+            "y",
+            (groupBounds.minY - totalPadding).toString()
+          );
+          groupOverlay.setAttribute(
+            "width",
+            (groupBounds.maxX - groupBounds.minX + totalPadding * 2).toString()
+          );
+          groupOverlay.setAttribute(
+            "height",
+            (groupBounds.maxY - groupBounds.minY + totalPadding * 2).toString()
+          );
+          groupOverlay.setAttribute("fill", "none");
+          groupOverlay.setAttribute("stroke", group.color);
+          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", (labelX + labelPadding).toString());
+          groupLabel.setAttribute(
+            "y",
+            (labelY + labelHeight - labelPadding).toString()
+          );
+          groupLabel.setAttribute("fill", group.color);
+          groupLabel.setAttribute("font-size", fontSize.toString());
+          groupLabel.setAttribute("font-family", "Arial, sans-serif");
+          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) {
+        console.error("Error creating group overlays:", error);
       }
-      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 - totalPadding).toString()
-        );
-        groupOverlay.setAttribute(
-          "y",
-          (groupBounds.minY - totalPadding).toString()
-        );
-        groupOverlay.setAttribute(
-          "width",
-          (groupBounds.maxX - groupBounds.minX + totalPadding * 2).toString()
-        );
-        groupOverlay.setAttribute(
-          "height",
-          (groupBounds.maxY - groupBounds.minY + totalPadding * 2).toString()
-        );
-        groupOverlay.setAttribute("fill", "none");
-        groupOverlay.setAttribute("stroke", group.color);
-        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", (labelX + labelPadding).toString());
-        groupLabel.setAttribute(
-          "y",
-          (labelY + labelHeight - labelPadding).toString()
-        );
-        groupLabel.setAttribute("fill", group.color);
-        groupLabel.setAttribute("font-size", fontSize.toString());
-        groupLabel.setAttribute("font-family", "Arial, sans-serif");
-        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) {
-      console.error("Error creating group overlays:", error);
-    }
+    }, 10);
+    return () => clearTimeout(timeoutId);
   }, [svgDivRef, circuitJsonKey, showGroups]);
 };
 function calculateGroupBounds(components, svg) {
@@ -834,7 +846,7 @@ import { su as su5 } from "@tscircuit/soup-util";
 // package.json
 var package_default = {
   name: "@tscircuit/schematic-viewer",
-  version: "2.0.36",
+  version: "2.0.37",
   main: "dist/index.js",
   type: "module",
   scripts: {