@skillpet/circuit 0.6.0 → 0.6.2

package/dist/circuit.esm.js

@@ -17345,29 +17345,52 @@ function resolveElementColor(el) {
   const p = mergeParamsFirstWins(el.userParams, el.elmParams, el.defaults, el.dwgParams);
   return p.color ?? "black";
 }
+function getOutputAnchors(el) {
+  const pts = [];
+  const aa = el.absanchors;
+  if (aa.end) pts.push(aa.end);
+  if (aa.out && (!aa.end || !pointsClose(aa.out, aa.end, 0.01))) pts.push(aa.out);
+  return pts;
+}
+function getInputAnchors(el) {
+  const pts = [];
+  const aa = el.absanchors;
+  if (aa.start) pts.push(aa.start);
+  for (const [name, pt] of Object.entries(aa)) {
+    if (name.startsWith("in") && /^in\d+$/.test(name)) {
+      if (!aa.start || !pointsClose(pt, aa.start, 0.01)) pts.push(pt);
+    }
+  }
+  return pts;
+}
+function pointsClose(a, b, tol) {
+  return Math.hypot(a.x - b.x, a.y - b.y) <= tol;
+}
 function buildConnectionGraph(elements) {
   const edges = [];
   const seen = /* @__PURE__ */ new Set();
   const tol = 0.5;
   for (let i = 0; i < elements.length; i++) {
     const fromEl = elements[i];
-    const fromEnd = fromEl.absanchors.end;
-    if (!fromEnd) continue;
+    const fromPts = getOutputAnchors(fromEl);
+    if (fromPts.length === 0) continue;
+    const fromColor = resolveElementColor(fromEl);
     for (let j = 0; j < elements.length; j++) {
       if (i === j) continue;
       const toEl = elements[j];
-      const toStart = toEl.absanchors.start;
-      if (!toStart) continue;
-      const dx = fromEnd.x - toStart.x;
-      const dy = fromEnd.y - toStart.y;
-      if (Math.hypot(dx, dy) > tol) continue;
-      const fromColor = resolveElementColor(fromEl);
+      const toPts = getInputAnchors(toEl);
+      if (toPts.length === 0) continue;
       const toColor = resolveElementColor(toEl);
       if (colorsEqual(fromColor, toColor)) continue;
-      const key = `${i}|${j}`;
-      if (seen.has(key)) continue;
-      seen.add(key);
-      edges.push({ fromEl, toEl, fromColor, toColor });
+      for (const fp of fromPts) {
+        for (const tp of toPts) {
+          if (!pointsClose(fp, tp, tol)) continue;
+          const key = `${i}|${j}`;
+          if (seen.has(key)) continue;
+          seen.add(key);
+          edges.push({ fromEl, toEl, fromColor, toColor, junctionPt: fp });
+        }
+      }
     }
   }
   return edges;
@@ -17382,8 +17405,8 @@ function assignLeadTransitionIds(elements, edges, scale) {
   const cleanups = [];
   let n = 0;
   for (const edge of edges) {
-    const lead2Seg = findLeadSegment(edge.fromEl, "lead2");
-    const lead1Seg = findLeadSegment(edge.toEl, "lead1");
+    const lead2Seg = findLeadSegmentFor(edge.fromEl, "out", edge.junctionPt);
+    const lead1Seg = findLeadSegmentFor(edge.toEl, "in", edge.junctionPt);
     if (!lead2Seg && !lead1Seg) continue;
     if (lead2Seg?.gradientStrokeId && lead1Seg?.gradientStrokeId) continue;
     let gx1, gy1, gx2, gy2;
@@ -17430,11 +17453,32 @@ function assignLeadTransitionIds(elements, edges, scale) {
     }
   };
 }
-function findLeadSegment(el, role) {
+function findLeadSegmentFor(el, side, junctionPt) {
+  const role = side === "in" ? "lead1" : "lead2";
   for (const s of el.segments) {
     if (s instanceof Segment && s.role === role) return s;
   }
-  return void 0;
+  return findSegmentNearPoint(el, junctionPt);
+}
+function findSegmentNearPoint(el, absPt) {
+  let best;
+  let bestDist = Infinity;
+  const tol = 0.6;
+  for (const s of el.segments) {
+    if (!(s instanceof Segment)) continue;
+    if (s.path.length < 2) continue;
+    if (s.role === "body") continue;
+    const p0 = el.transform.transform(s.path[0]);
+    const pN = el.transform.transform(s.path[s.path.length - 1]);
+    const d0 = Math.hypot(p0.x - absPt.x, p0.y - absPt.y);
+    const dN = Math.hypot(pN.x - absPt.x, pN.y - absPt.y);
+    const d = Math.min(d0, dN);
+    if (d < bestDist && d < tol) {
+      bestDist = d;
+      best = s;
+    }
+  }
+  return best;
 }
 function segEndpointsSvg(el, seg, scale) {
   const p0 = el.transform.transform(seg.path[0]);
@@ -30527,13 +30571,28 @@ var SchemdrawController = class {
   }
   _initTooltip() {
     const tip = document.createElement("div");
-    tip.style.cssText = "position:fixed;z-index:99999;pointer-events:none;opacity:0;transition:opacity .12s ease;background:rgba(30,30,30,.92);color:#fff;font-size:12px;line-height:1.4;padding:5px 10px;border-radius:4px;max-width:260px;white-space:pre-wrap;box-shadow:0 2px 8px rgba(0,0,0,.25)";
+    tip.className = "schemdraw-tooltip";
+    tip.style.cssText = "position:fixed;z-index:99999;pointer-events:none;opacity:0;transition:opacity .15s ease;font-size:12px;line-height:1.4;padding:6px 12px;border-radius:6px;max-width:260px;white-space:pre-wrap;";
+    this._applyTooltipTheme(tip);
     document.body.appendChild(tip);
     this._tooltipEl = tip;
   }
+  _applyTooltipTheme(tip) {
+    const isDark = document.documentElement.classList.contains("dark") || document.documentElement.getAttribute("data-theme") === "dark" || typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)").matches && !document.documentElement.classList.contains("light");
+    if (isDark) {
+      tip.style.background = "rgba(250,250,250,.95)";
+      tip.style.color = "#1a1a1a";
+      tip.style.boxShadow = "0 2px 12px rgba(0,0,0,.4)";
+    } else {
+      tip.style.background = "rgba(15,15,15,.92)";
+      tip.style.color = "#fff";
+      tip.style.boxShadow = "0 2px 8px rgba(0,0,0,.2)";
+    }
+  }
   _showTooltip(text2, clientX, clientY) {
     const tip = this._tooltipEl;
     if (!tip) return;
+    this._applyTooltipTheme(tip);
     tip.textContent = text2;
     tip.style.opacity = "1";
     const gap2 = 10;

package/dist/drawing-transition.d.ts

@@ -6,18 +6,21 @@
  * a smooth color fade at the junction.
  */
 import type { Element } from "./element.js";
+import { Point } from "./geometry/point.js";
 interface ConnectionEdge {
     fromEl: Element;
     toEl: Element;
     fromColor: string;
     toColor: string;
+    /** The absolute point where the connection occurs. */
+    junctionPt: Point;
 }
 /**
- * Find directed pairs (fromEl → toEl) where `fromEl.absanchors.end` meets
- * `toEl.absanchors.start` (within tolerance) and resolved stroke colors differ.
+ * Find directed pairs (fromEl → toEl) where an output anchor of fromEl meets
+ * an input anchor of toEl (within tolerance) and resolved stroke colors differ.
  *
- * Uses all element pairs, not only consecutive indices, so chain order in the
- * array can differ from electrical adjacency (e.g. explicit `at` / `to`).
+ * Checks end/out → start/in1/in2/… to support both two-terminal chains
+ * and multi-terminal elements (logic gates, opamps, etc.).
  */
 export declare function buildConnectionGraph(elements: readonly Element[]): ConnectionEdge[];
 /**

package/dist/index.cjs

@@ -17732,29 +17732,52 @@ function resolveElementColor(el) {
   const p = mergeParamsFirstWins(el.userParams, el.elmParams, el.defaults, el.dwgParams);
   return p.color ?? "black";
 }
+function getOutputAnchors(el) {
+  const pts = [];
+  const aa = el.absanchors;
+  if (aa.end) pts.push(aa.end);
+  if (aa.out && (!aa.end || !pointsClose(aa.out, aa.end, 0.01))) pts.push(aa.out);
+  return pts;
+}
+function getInputAnchors(el) {
+  const pts = [];
+  const aa = el.absanchors;
+  if (aa.start) pts.push(aa.start);
+  for (const [name, pt] of Object.entries(aa)) {
+    if (name.startsWith("in") && /^in\d+$/.test(name)) {
+      if (!aa.start || !pointsClose(pt, aa.start, 0.01)) pts.push(pt);
+    }
+  }
+  return pts;
+}
+function pointsClose(a, b, tol) {
+  return Math.hypot(a.x - b.x, a.y - b.y) <= tol;
+}
 function buildConnectionGraph(elements) {
   const edges = [];
   const seen = /* @__PURE__ */ new Set();
   const tol = 0.5;
   for (let i = 0; i < elements.length; i++) {
     const fromEl = elements[i];
-    const fromEnd = fromEl.absanchors.end;
-    if (!fromEnd) continue;
+    const fromPts = getOutputAnchors(fromEl);
+    if (fromPts.length === 0) continue;
+    const fromColor = resolveElementColor(fromEl);
     for (let j = 0; j < elements.length; j++) {
       if (i === j) continue;
       const toEl = elements[j];
-      const toStart = toEl.absanchors.start;
-      if (!toStart) continue;
-      const dx = fromEnd.x - toStart.x;
-      const dy = fromEnd.y - toStart.y;
-      if (Math.hypot(dx, dy) > tol) continue;
-      const fromColor = resolveElementColor(fromEl);
+      const toPts = getInputAnchors(toEl);
+      if (toPts.length === 0) continue;
       const toColor = resolveElementColor(toEl);
       if (colorsEqual(fromColor, toColor)) continue;
-      const key = `${i}|${j}`;
-      if (seen.has(key)) continue;
-      seen.add(key);
-      edges.push({ fromEl, toEl, fromColor, toColor });
+      for (const fp of fromPts) {
+        for (const tp of toPts) {
+          if (!pointsClose(fp, tp, tol)) continue;
+          const key = `${i}|${j}`;
+          if (seen.has(key)) continue;
+          seen.add(key);
+          edges.push({ fromEl, toEl, fromColor, toColor, junctionPt: fp });
+        }
+      }
     }
   }
   return edges;
@@ -17769,8 +17792,8 @@ function assignLeadTransitionIds(elements, edges, scale) {
   const cleanups = [];
   let n = 0;
   for (const edge of edges) {
-    const lead2Seg = findLeadSegment(edge.fromEl, "lead2");
-    const lead1Seg = findLeadSegment(edge.toEl, "lead1");
+    const lead2Seg = findLeadSegmentFor(edge.fromEl, "out", edge.junctionPt);
+    const lead1Seg = findLeadSegmentFor(edge.toEl, "in", edge.junctionPt);
     if (!lead2Seg && !lead1Seg) continue;
     if (lead2Seg?.gradientStrokeId && lead1Seg?.gradientStrokeId) continue;
     let gx1, gy1, gx2, gy2;
@@ -17817,11 +17840,32 @@ function assignLeadTransitionIds(elements, edges, scale) {
     }
   };
 }
-function findLeadSegment(el, role) {
+function findLeadSegmentFor(el, side, junctionPt) {
+  const role = side === "in" ? "lead1" : "lead2";
   for (const s of el.segments) {
     if (s instanceof Segment && s.role === role) return s;
   }
-  return void 0;
+  return findSegmentNearPoint(el, junctionPt);
+}
+function findSegmentNearPoint(el, absPt) {
+  let best;
+  let bestDist = Infinity;
+  const tol = 0.6;
+  for (const s of el.segments) {
+    if (!(s instanceof Segment)) continue;
+    if (s.path.length < 2) continue;
+    if (s.role === "body") continue;
+    const p0 = el.transform.transform(s.path[0]);
+    const pN = el.transform.transform(s.path[s.path.length - 1]);
+    const d0 = Math.hypot(p0.x - absPt.x, p0.y - absPt.y);
+    const dN = Math.hypot(pN.x - absPt.x, pN.y - absPt.y);
+    const d = Math.min(d0, dN);
+    if (d < bestDist && d < tol) {
+      bestDist = d;
+      best = s;
+    }
+  }
+  return best;
 }
 function segEndpointsSvg(el, seg, scale) {
   const p0 = el.transform.transform(seg.path[0]);
@@ -30914,13 +30958,28 @@ var SchemdrawController = class {
   }
   _initTooltip() {
     const tip = document.createElement("div");
-    tip.style.cssText = "position:fixed;z-index:99999;pointer-events:none;opacity:0;transition:opacity .12s ease;background:rgba(30,30,30,.92);color:#fff;font-size:12px;line-height:1.4;padding:5px 10px;border-radius:4px;max-width:260px;white-space:pre-wrap;box-shadow:0 2px 8px rgba(0,0,0,.25)";
+    tip.className = "schemdraw-tooltip";
+    tip.style.cssText = "position:fixed;z-index:99999;pointer-events:none;opacity:0;transition:opacity .15s ease;font-size:12px;line-height:1.4;padding:6px 12px;border-radius:6px;max-width:260px;white-space:pre-wrap;";
+    this._applyTooltipTheme(tip);
     document.body.appendChild(tip);
     this._tooltipEl = tip;
   }
+  _applyTooltipTheme(tip) {
+    const isDark = document.documentElement.classList.contains("dark") || document.documentElement.getAttribute("data-theme") === "dark" || typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)").matches && !document.documentElement.classList.contains("light");
+    if (isDark) {
+      tip.style.background = "rgba(250,250,250,.95)";
+      tip.style.color = "#1a1a1a";
+      tip.style.boxShadow = "0 2px 12px rgba(0,0,0,.4)";
+    } else {
+      tip.style.background = "rgba(15,15,15,.92)";
+      tip.style.color = "#fff";
+      tip.style.boxShadow = "0 2px 8px rgba(0,0,0,.2)";
+    }
+  }
   _showTooltip(text2, clientX, clientY) {
     const tip = this._tooltipEl;
     if (!tip) return;
+    this._applyTooltipTheme(tip);
     tip.textContent = text2;
     tip.style.opacity = "1";
     const gap2 = 10;

package/dist/json/mount.d.ts

@@ -31,6 +31,7 @@ export declare class SchemdrawController {
     private _teardownAutoTheme;
     private _render;
     private _initTooltip;
+    private _applyTooltipTheme;
     private _showTooltip;
     private _hideTooltip;
     private _bindEvents;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skillpet/circuit",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "Circuit diagram library — render electrical schematics from JSON, with interactive SVG, themes, and Vue/React components",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",