circuit-to-svg 0.0.180 → 0.0.181

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.180",
   description: "Convert Circuit JSON to SVG",
   main: "dist/index.js",
   files: [
@@ -5240,7 +5240,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 +5260,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 +5312,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 +5321,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 +5340,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 +5368,23 @@ function createSchematicTrace({
       value: "",
       attributes: {
         class: "trace",
+        "data-layer": "base",
         "data-circuit-json-type": "schematic_trace",
         "data-schematic-trace-id": trace.schematic_trace_id
       },
-      children: svgObjects
+      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
+      },
+      children: overlayObjects
     }
   ];
 }
@@ -6199,9 +6213,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,