circuit-to-svg 0.0.223 → 0.0.224

package/dist/index.js

@@ -1788,7 +1788,7 @@ function getSoftwareUsedString(circuitJson) {
 var package_default = {
   name: "circuit-to-svg",
   type: "module",
-  version: "0.0.222",
+  version: "0.0.223",
   description: "Convert Circuit JSON to SVG",
   main: "dist/index.js",
   files: [
@@ -8621,16 +8621,23 @@ function createLegend(graphs, width) {
   return svgElement("g", { class: "legend" }, children);
 }
 function createDataGroup(graphs, clipPathId, scaleX, scaleY) {
-  const elements = [];
-  for (const entry of graphs) {
-    if (entry.points.length === 0) continue;
+  const LINE_REPEAT_COUNT = 3;
+  const DASH_PATTERN = [4, 8];
+  const dashArrayString = DASH_PATTERN.map((value) => formatNumber(value)).join(
+    " "
+  );
+  const dashCycleLength = DASH_PATTERN.reduce((sum, value) => sum + value, 0);
+  const dashOffsetStep = dashCycleLength / LINE_REPEAT_COUNT;
+  const processedGraphs = [];
+  graphs.forEach((entry, graphIndex) => {
+    if (entry.points.length === 0) return;
     const commands = [];
     entry.points.forEach((point, index) => {
       const x = formatNumber(scaleX(point.timeMs));
       const y = formatNumber(scaleY(point.voltage));
       commands.push(`${index === 0 ? "M" : "L"} ${x} ${y}`);
     });
-    const pathAttributes = {
+    const baseAttributes = {
       class: "simulation-line",
       d: commands.join(" "),
       stroke: entry.color,
@@ -8638,29 +8645,52 @@ function createDataGroup(graphs, clipPathId, scaleX, scaleY) {
       "data-simulation-transient-voltage-graph-id": entry.graph.simulation_transient_voltage_graph_id
     };
     if (entry.graph.schematic_voltage_probe_id) {
-      pathAttributes["data-schematic-voltage-probe-id"] = entry.graph.schematic_voltage_probe_id;
+      baseAttributes["data-schematic-voltage-probe-id"] = entry.graph.schematic_voltage_probe_id;
     }
     if (entry.graph.subcircuit_connecivity_map_key) {
-      pathAttributes["data-subcircuit-connectivity-map-key"] = entry.graph.subcircuit_connecivity_map_key;
+      baseAttributes["data-subcircuit-connectivity-map-key"] = entry.graph.subcircuit_connecivity_map_key;
     }
-    elements.push(svgElement("path", pathAttributes));
-    entry.points.forEach((point) => {
+    const pointElements2 = entry.points.map((point) => {
       const cx = formatNumber(scaleX(point.timeMs));
       const cy = formatNumber(scaleY(point.voltage));
-      elements.push(
-        svgElement("circle", {
-          class: "simulation-point",
-          cx,
-          cy,
-          r: "3.5",
-          stroke: entry.color,
-          fill: "#ffffff",
-          "clip-path": `url(#${clipPathId})`
+      return svgElement("circle", {
+        class: "simulation-point",
+        cx,
+        cy,
+        r: "3.5",
+        stroke: entry.color,
+        fill: "#ffffff",
+        "clip-path": `url(#${clipPathId})`
+      });
+    });
+    processedGraphs.push({
+      entry,
+      graphIndex,
+      pathAttributes: baseAttributes,
+      pointElements: pointElements2
+    });
+  });
+  const lineElements = [];
+  for (let cycle = 0; cycle < LINE_REPEAT_COUNT; cycle++) {
+    processedGraphs.forEach((graphInfo) => {
+      const offsetIndex = (graphInfo.graphIndex + cycle) % LINE_REPEAT_COUNT;
+      const dashOffset = formatNumber(offsetIndex * dashOffsetStep);
+      lineElements.push(
+        svgElement("path", {
+          ...graphInfo.pathAttributes,
+          "stroke-dasharray": dashArrayString,
+          "stroke-dashoffset": dashOffset
         })
       );
     });
   }
-  return svgElement("g", { class: "data-series" }, elements);
+  const pointElements = processedGraphs.flatMap(
+    (graphInfo) => graphInfo.pointElements
+  );
+  return svgElement("g", { class: "data-series" }, [
+    ...lineElements,
+    ...pointElements
+  ]);
 }
 function createTitleNode(experiment, width) {
   if (!experiment?.name) return null;