circuit-to-svg 0.0.180 → 0.0.182

package/dist/index.js

@@ -1495,7 +1495,7 @@ function getSoftwareUsedString(circuitJson) {
 var package_default = {
   name: "circuit-to-svg",
   type: "module",
-  version: "0.0.179",
+  version: "0.0.181",
   description: "Convert Circuit JSON to SVG",
   main: "dist/index.js",
   files: [
@@ -1520,9 +1520,10 @@ var package_default = {
     esbuild: "^0.20.2",
     "performance-now": "^2.1.0",
     react: "19.1.0",
+    "react-dom": "19.1.0",
     "react-cosmos": "7.0.0",
     "react-cosmos-plugin-vite": "7.0.0",
-    tscircuit: "^0.0.609",
+    tscircuit: "^0.0.617",
     tsup: "^8.0.2",
     typescript: "^5.4.5",
     "vite-tsconfig-paths": "^5.0.1"
@@ -5240,7 +5241,8 @@ function createSchematicTrace({
 }) {
   const edges = trace.edges;
   if (edges.length === 0) return [];
-  const svgObjects = [];
+  const baseObjects = [];
+  const overlayObjects = [];
   let path = "";
   for (let edgeIndex = 0; edgeIndex < edges.length; edgeIndex++) {
     const edge = edges[edgeIndex];
@@ -5259,6 +5261,38 @@ function createSchematicTrace({
       path += ` L ${screenToX} ${screenToY}`;
     }
   }
+  if (path) {
+    baseObjects.push({
+      name: "path",
+      type: "element",
+      attributes: {
+        d: path,
+        class: "trace-invisible-hover-outline",
+        stroke: colorMap2.schematic.wire,
+        fill: "none",
+        "stroke-width": `${getSchStrokeSize(transform) * 8}px`,
+        "stroke-linecap": "round",
+        opacity: "0",
+        "stroke-linejoin": "round"
+      },
+      value: "",
+      children: []
+    });
+    baseObjects.push({
+      name: "path",
+      type: "element",
+      attributes: {
+        d: path,
+        stroke: colorMap2.schematic.wire,
+        fill: "none",
+        "stroke-width": `${getSchStrokeSize(transform)}px`,
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      },
+      value: "",
+      children: []
+    });
+  }
   for (const edge of edges) {
     if (!edge.is_crossing) continue;
     const [screenFromX, screenFromY] = applyToPoint38(transform, [
@@ -5279,7 +5313,7 @@ function createSchematicTrace({
     const perpY = dx / len * hopHeight;
     const controlX = midX + perpX;
     const controlY = midY - Math.abs(perpY);
-    svgObjects.push({
+    overlayObjects.push({
       name: "path",
       type: "element",
       attributes: {
@@ -5288,12 +5322,12 @@ function createSchematicTrace({
         stroke: colorMap2.schematic.background,
         fill: "none",
         "stroke-width": `${getSchStrokeSize(transform) * 1.5}px`,
-        "stroke-linecap": "round"
+        "stroke-linecap": "butt"
       },
       value: "",
       children: []
     });
-    svgObjects.push({
+    overlayObjects.push({
       name: "path",
       type: "element",
       attributes: {
@@ -5307,45 +5341,13 @@ function createSchematicTrace({
       children: []
     });
   }
-  if (path) {
-    svgObjects.push({
-      name: "path",
-      type: "element",
-      attributes: {
-        d: path,
-        class: "trace-invisible-hover-outline",
-        stroke: colorMap2.schematic.wire,
-        fill: "none",
-        "stroke-width": `${getSchStrokeSize(transform) * 8}px`,
-        "stroke-linecap": "round",
-        opacity: "0",
-        "stroke-linejoin": "round"
-      },
-      value: "",
-      children: []
-    });
-    svgObjects.push({
-      name: "path",
-      type: "element",
-      attributes: {
-        d: path,
-        stroke: colorMap2.schematic.wire,
-        fill: "none",
-        "stroke-width": `${getSchStrokeSize(transform)}px`,
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round"
-      },
-      value: "",
-      children: []
-    });
-  }
   if (trace.junctions) {
     for (const junction of trace.junctions) {
       const [screenX, screenY] = applyToPoint38(transform, [
         junction.x,
         junction.y
       ]);
-      svgObjects.push({
+      overlayObjects.push({
         name: "circle",
         type: "element",
         attributes: {
@@ -5367,10 +5369,29 @@ function createSchematicTrace({
       value: "",
       attributes: {
         class: "trace",
+        "data-layer": "base",
+        "data-circuit-json-type": "schematic_trace",
+        "data-schematic-trace-id": trace.schematic_trace_id,
+        ...trace.subcircuit_connectivity_map_key && {
+          "data-subcircuit-connectivity-map-key": trace.subcircuit_connectivity_map_key
+        }
+      },
+      children: baseObjects
+    },
+    {
+      name: "g",
+      type: "element",
+      value: "",
+      attributes: {
+        class: "trace-overlays",
+        "data-layer": "overlay",
         "data-circuit-json-type": "schematic_trace",
-        "data-schematic-trace-id": trace.schematic_trace_id
+        "data-schematic-trace-id": trace.schematic_trace_id,
+        ...trace.subcircuit_connectivity_map_key && {
+          "data-subcircuit-connectivity-map-key": trace.subcircuit_connectivity_map_key
+        }
       },
-      children: svgObjects
+      children: overlayObjects
     }
   ];
 }
@@ -6053,6 +6074,23 @@ var createSvgObjectsForSchComponentPortHovers = ({
 };
 
 // lib/sch/convert-circuit-json-to-schematic-svg.ts
+function buildNetHoverStyles(connectivityKeys) {
+  const rules = [];
+  const esc = (v) => String(v).replace(/"/g, '\\"');
+  for (const key of connectivityKeys) {
+    const k = esc(key);
+    const keyAttr = `[data-subcircuit-connectivity-map-key="${k}"]`;
+    const baseSel = `g.trace${keyAttr}`;
+    const overlaySel = `g.trace-overlays${keyAttr}`;
+    const hovered = `:is(${baseSel}, ${overlaySel}):hover`;
+    const target = `:is(${baseSel}, ${overlaySel})`;
+    rules.push(`svg:has(${hovered}) ${target} { filter: invert(1); }`);
+    rules.push(
+      `svg:has(${hovered}) ${overlaySel} .trace-crossing-outline { opacity: 0; }`
+    );
+  }
+  return rules.join("\n");
+}
 function convertCircuitJsonToSchematicSvg(circuitJson, options) {
   const realBounds = getSchematicBoundsFromCircuitJson(circuitJson);
   const realWidth = realBounds.maxX - realBounds.minX;
@@ -6118,6 +6156,7 @@ function convertCircuitJsonToSchematicSvg(circuitJson, options) {
   const schDebugObjectSvgs = [];
   const schComponentSvgs = [];
   const schTraceSvgs = [];
+  const connectivityKeys = /* @__PURE__ */ new Set();
   const schNetLabel = [];
   const schText = [];
   const voltageProbeSvgs = [];
@@ -6164,6 +6203,7 @@ function convertCircuitJsonToSchematicSvg(circuitJson, options) {
           colorMap: colorMap2
         })
       );
+      connectivityKeys.add(elm.subcircuit_connectivity_map_key);
     } else if (elm.type === "schematic_net_label") {
       schNetLabel.push(
         ...createSvgObjectsForSchNetLabel({
@@ -6199,9 +6239,16 @@ function convertCircuitJsonToSchematicSvg(circuitJson, options) {
       );
     }
   }
+  const schTraceBaseSvgs = schTraceSvgs.filter(
+    (o) => o.attributes?.["data-layer"] !== "overlay"
+  );
+  const schTraceOverlaySvgs = schTraceSvgs.filter(
+    (o) => o.attributes?.["data-layer"] === "overlay"
+  );
   svgChildren.push(
     ...schDebugObjectSvgs,
-    ...schTraceSvgs,
+    ...schTraceBaseSvgs,
+    ...schTraceOverlaySvgs,
     ...schComponentSvgs,
     ...schPortHoverSvgs,
     ...schNetLabel,
@@ -6252,6 +6299,7 @@ function convertCircuitJsonToSchematicSvg(circuitJson, options) {
               .component { fill: none; stroke: ${colorMap2.schematic.component_outline}; }
               .chip { fill: ${colorMap2.schematic.component_body}; stroke: ${colorMap2.schematic.component_outline}; }
               .component-pin { fill: none; stroke: ${colorMap2.schematic.component_outline}; }
+              /* Basic per-trace hover fallback */
               .trace:hover {
                 filter: invert(1);
               }
@@ -6261,6 +6309,10 @@ function convertCircuitJsonToSchematicSvg(circuitJson, options) {
               .trace:hover .trace-junction {
                 filter: invert(1);
               }
+              /* Net-hover highlighting: when a trace or its overlays are hovered,
+                 invert color for all traces (base + overlays) sharing the same
+                 subcircuit connectivity key. Also hide crossing outline during hover. */
+              ${buildNetHoverStyles(connectivityKeys)}
               .text { font-family: sans-serif; fill: ${colorMap2.schematic.wire}; }
               .pin-number { fill: ${colorMap2.schematic.pin_number}; }
               .port-label { fill: ${colorMap2.schematic.reference}; }