@skillpet/circuit 0.6.2 → 0.6.4

package/README.ko.md

@@ -0,0 +1,150 @@
+# @skillpet/circuit
+
+[English](./README.md) | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md) | [한국어](./README.ko.md) | [Español](./README.es.md) | [Français](./README.fr.md) | [Deutsch](./README.de.md)
+
+<p align="center">
+  <strong>회로도 라이브러리 — JSON에서 전기 회로도를 렌더링합니다. 인터랙티브 SVG, 테마, Vue / React 컴포넌트를 지원합니다.</strong>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@skillpet/circuit"><img src="https://img.shields.io/npm/v/@skillpet/circuit.svg" alt="npm version"></a>
+  <a href="https://www.npmjs.com/package/@skillpet/circuit"><img src="https://img.shields.io/npm/l/@skillpet/circuit.svg" alt="license"></a>
+  <a href="https://circuit.skill.pet"><img src="https://img.shields.io/badge/docs-circuit.skill.pet-blue" alt="docs"></a>
+</p>
+
+---
+
+**웹사이트 & 데모:** [circuit.skill.pet](https://circuit.skill.pet)
+
+## 특징
+
+- 간단한 JSON 설명으로 회로도 렌더링
+- 200개 이상의 내장 전기 부품 (저항, 커패시터, 다이오드, 트랜지스터, IC, 논리 게이트 등)
+- 인터랙티브 SVG: 호버 하이라이트, 툴팁, 클릭 이벤트
+- 3가지 내장 테마 (라이트, 다크, 인쇄) + 커스텀 테마
+- 부품 간 부드러운 색상 전환
+- Vue 3 & React 컴포넌트 기본 제공
+- 브라우저 번들 (script 태그) & ESM / CJS 지원
+- KaTeX 수학 레이블 렌더링
+- 순서도, DSP 블록, 브레드보드 부품
+- 런타임 의존성 없음 (KaTeX는 선택사항)
+
+## 설치
+
+```bash
+npm install @skillpet/circuit
+```
+
+## 빠른 시작
+
+### ESM / TypeScript
+
+```ts
+import { renderFromJson } from "@skillpet/circuit";
+
+const svg = renderFromJson({
+  elements: [
+    { type: "SourceV", d: "up", label: "12V" },
+    { type: "ResistorIEEE", label: "R1 10kΩ" },
+    { type: "Capacitor", d: "down", label: "C1 100nF" },
+    { type: "Line", d: "left" },
+    { type: "Ground" },
+  ],
+});
+```
+
+### 브라우저 (Script 태그)
+
+```html
+<script src="https://unpkg.com/@skillpet/circuit/dist/circuit.bundle.min.js"></script>
+<script>
+  const svg = Circuit.renderFromJson({
+    elements: [
+      { type: "ResistorIEEE", label: "R1" },
+      { type: "Capacitor", d: "down", label: "C1" },
+    ],
+  });
+  document.getElementById("output").innerHTML = svg;
+</script>
+```
+
+### 인터랙티브 모드
+
+DOM에 마운트하여 호버 하이라이트, 툴팁, 클릭 이벤트를 활성화:
+
+```ts
+import { mountFromJson } from "@skillpet/circuit";
+
+const ctrl = mountFromJson(document.getElementById("container"), {
+  elements: [
+    { type: "ResistorIEEE", id: "R1", tooltip: "100kΩ 탄소 피막" },
+    { type: "Capacitor", d: "down", id: "C1", tooltip: "0.1μF 세라믹" },
+  ],
+}, { interactive: true });
+
+ctrl.on("element:click", (info) => console.log("클릭:", info.id));
+ctrl.on("element:hover", (info) => console.log("호버:", info.tooltip));
+```
+
+### Vue 3
+
+```vue
+<script setup>
+import { CircuitDiagram } from "@skillpet/circuit/vue";
+
+const circuit = {
+  elements: [
+    { type: "ResistorIEEE", label: "R1", id: "R1", tooltip: "100kΩ" },
+    { type: "Capacitor", d: "down", label: "C1" },
+  ],
+};
+</script>
+
+<template>
+  <CircuitDiagram :circuit="circuit" interactive @element-click="console.log" />
+</template>
+```
+
+### React
+
+```tsx
+import { CircuitDiagram } from "@skillpet/circuit/react";
+
+function App() {
+  return (
+    <CircuitDiagram
+      circuit={{ elements: [{ type: "ResistorIEEE", label: "R1" }] }}
+      interactive
+      onElementClick={(info) => console.log(info)}
+    />
+  );
+}
+```
+
+## 테마
+
+3가지 내장 테마: `light` (기본값), `dark`, `print`.
+
+```ts
+const svg = renderFromJson(circuit, { theme: "dark" });
+```
+
+## 색상 전환
+
+서로 다른 색상의 부품 간 부드러운 그라데이션 전환:
+
+```ts
+const svg = renderFromJson({
+  drawing: { colorTransition: true },
+  elements: [
+    { type: "SourceV", d: "up", color: "#2ecc71" },
+    { type: "ResistorIEEE", color: "#e74c3c" },
+  ],
+}, { colorTransition: true });
+```
+
+## 라이선스
+
+개인 및 교육 목적은 무료입니다. 상업적 사용에는 별도의 라이선스가 필요합니다.
+자세한 내용은 이 패키지에 포함된 LICENSE 파일을 참조하세요.
+상용 라이선스 문의: **license@skill.pet** 또는 [circuit.skill.pet/license](https://circuit.skill.pet/license).

package/README.md

@@ -1,9 +1,34 @@
 # @skillpet/circuit
 
-A circuit diagram library for rendering electrical schematics from JSON. Produces interactive SVG with hover tooltips, click events, theming, and color transitions. Ships with Vue 3 and React components.
+[English](./README.md) | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md) | [한국어](./README.ko.md) | [Español](./README.es.md) | [Français](./README.fr.md) | [Deutsch](./README.de.md)
+
+<p align="center">
+  <strong>Circuit diagram library — render electrical schematics from JSON, with interactive SVG, themes, and Vue / React components.</strong>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@skillpet/circuit"><img src="https://img.shields.io/npm/v/@skillpet/circuit.svg" alt="npm version"></a>
+  <a href="https://www.npmjs.com/package/@skillpet/circuit"><img src="https://img.shields.io/npm/l/@skillpet/circuit.svg" alt="license"></a>
+  <a href="https://circuit.skill.pet"><img src="https://img.shields.io/badge/docs-circuit.skill.pet-blue" alt="docs"></a>
+</p>
+
+---
 
 **Website & Demos:** [circuit.skill.pet](https://circuit.skill.pet)
 
+## Features
+
+- Render circuit diagrams from a simple JSON description
+- 200+ built-in electrical components (resistors, capacitors, diodes, transistors, ICs, logic gates, etc.)
+- Interactive SVG: hover highlights, tooltips, click events
+- 3 built-in themes (light, dark, print) + custom themes
+- Smooth color transitions between elements
+- Vue 3 & React components out of the box
+- Browser bundle (script tag) & ESM / CJS support
+- KaTeX math label rendering
+- Flow charts, DSP blocks, pictorial breadboard components
+- Zero runtime dependencies (except optional KaTeX)
+
 ## Installation
 
 ```bash

package/README.zh-CN.md

@@ -0,0 +1,150 @@
+# @skillpet/circuit
+
+[English](./README.md) | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md) | [한국어](./README.ko.md) | [Español](./README.es.md) | [Français](./README.fr.md) | [Deutsch](./README.de.md)
+
+<p align="center">
+  <strong>电路图绘制库 — 从 JSON 描述渲染电气原理图，支持交互式 SVG、主题切换与 Vue / React 组件。</strong>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@skillpet/circuit"><img src="https://img.shields.io/npm/v/@skillpet/circuit.svg" alt="npm version"></a>
+  <a href="https://www.npmjs.com/package/@skillpet/circuit"><img src="https://img.shields.io/npm/l/@skillpet/circuit.svg" alt="license"></a>
+  <a href="https://circuit.skill.pet"><img src="https://img.shields.io/badge/docs-circuit.skill.pet-blue" alt="docs"></a>
+</p>
+
+---
+
+**官网与在线演示：** [circuit.skill.pet](https://circuit.skill.pet)
+
+## 特性
+
+- 通过简洁的 JSON 描述渲染电路图
+- 200+ 内置电气元件（电阻、电容、二极管、晶体管、集成电路、逻辑门等）
+- 交互式 SVG：悬停高亮、工具提示、点击事件
+- 3 种内置主题（浅色、深色、打印）+ 自定义主题
+- 元件间平滑的颜色过渡
+- 开箱即用的 Vue 3 与 React 组件
+- 浏览器 Bundle（script 标签）与 ESM / CJS 支持
+- KaTeX 数学公式标签渲染
+- 流程图、DSP 模块、实物面包板元件
+- 零运行时依赖（KaTeX 为可选）
+
+## 安装
+
+```bash
+npm install @skillpet/circuit
+```
+
+## 快速上手
+
+### ESM / TypeScript
+
+```ts
+import { renderFromJson } from "@skillpet/circuit";
+
+const svg = renderFromJson({
+  elements: [
+    { type: "SourceV", d: "up", label: "12V" },
+    { type: "ResistorIEEE", label: "R1 10kΩ" },
+    { type: "Capacitor", d: "down", label: "C1 100nF" },
+    { type: "Line", d: "left" },
+    { type: "Ground" },
+  ],
+});
+```
+
+### 浏览器（Script 标签）
+
+```html
+<script src="https://unpkg.com/@skillpet/circuit/dist/circuit.bundle.min.js"></script>
+<script>
+  const svg = Circuit.renderFromJson({
+    elements: [
+      { type: "ResistorIEEE", label: "R1" },
+      { type: "Capacitor", d: "down", label: "C1" },
+    ],
+  });
+  document.getElementById("output").innerHTML = svg;
+</script>
+```
+
+### 交互模式
+
+挂载到 DOM，支持悬停高亮、工具提示和点击事件：
+
+```ts
+import { mountFromJson } from "@skillpet/circuit";
+
+const ctrl = mountFromJson(document.getElementById("container"), {
+  elements: [
+    { type: "ResistorIEEE", id: "R1", tooltip: "100kΩ 碳膜电阻" },
+    { type: "Capacitor", d: "down", id: "C1", tooltip: "0.1μF 瓷片电容" },
+  ],
+}, { interactive: true });
+
+ctrl.on("element:click", (info) => console.log("点击:", info.id));
+ctrl.on("element:hover", (info) => console.log("悬停:", info.tooltip));
+```
+
+### Vue 3
+
+```vue
+<script setup>
+import { CircuitDiagram } from "@skillpet/circuit/vue";
+
+const circuit = {
+  elements: [
+    { type: "ResistorIEEE", label: "R1", id: "R1", tooltip: "100kΩ" },
+    { type: "Capacitor", d: "down", label: "C1" },
+  ],
+};
+</script>
+
+<template>
+  <CircuitDiagram :circuit="circuit" interactive @element-click="console.log" />
+</template>
+```
+
+### React
+
+```tsx
+import { CircuitDiagram } from "@skillpet/circuit/react";
+
+function App() {
+  return (
+    <CircuitDiagram
+      circuit={{ elements: [{ type: "ResistorIEEE", label: "R1" }] }}
+      interactive
+      onElementClick={(info) => console.log(info)}
+    />
+  );
+}
+```
+
+## 主题
+
+三种内置主题：`light`（默认）、`dark` 和 `print`。
+
+```ts
+const svg = renderFromJson(circuit, { theme: "dark" });
+```
+
+## 颜色过渡
+
+不同颜色元件之间平滑的渐变过渡：
+
+```ts
+const svg = renderFromJson({
+  drawing: { colorTransition: true },
+  elements: [
+    { type: "SourceV", d: "up", color: "#2ecc71" },
+    { type: "ResistorIEEE", color: "#e74c3c" },
+  ],
+}, { colorTransition: true });
+```
+
+## 许可证
+
+个人和教育用途免费。商业使用需要单独授权。
+详见本包中的 LICENSE 文件。
+商业授权请联系 **license@skill.pet** 或访问 [circuit.skill.pet/license](https://circuit.skill.pet/license)。

package/dist/circuit.bundle.js

@@ -15539,8 +15539,8 @@ var Circuit = (() => {
       let [x0, y0] = this.xform(x, y);
       const fontsize = opts.fontsize ?? 14;
       let font = opts.fontfamily ?? "sans-serif";
-      if (font.toLowerCase() === "sans-serif" || font.toLowerCase() === "arial") {
-        font = "sans";
+      if (font.toLowerCase() === "sans" || font.toLowerCase() === "arial") {
+        font = "sans-serif";
       }
       const valign = opts.valign ?? "center";
       if (valign === "base") {
@@ -15552,14 +15552,13 @@ var Circuit = (() => {
       const rot = opts.rotation ?? 0;
       const transform = rot !== 0 ? ` transform="rotate(${fmt(rot)} ${fmt(x0)} ${fmt(y0)})"` : "";
       const color = opts.color ?? "black";
-      const textY = y0 - fontsize;
       let textContent;
       if (opts.textDecoration) {
         textContent = `<tspan text-decoration="${opts.textDecoration}">${escapeXml(s)}</tspan>`;
       } else {
         textContent = escapeXml(s);
       }
-      let inner2 = `<text x="${fmt(x0)}" y="${fmt(textY)}" dominant-baseline="${baseline}" fill="${escapeXml(color)}" font-size="${fmt(fontsize)}" font-family="${escapeXml(font)}" text-anchor="${anchor}"${transform}><tspan x="${fmt(x0)}" dy="${fmt(fontsize)}" dominant-baseline="${baseline}">${textContent}</tspan></text>`;
+      let inner2 = `<text x="${fmt(x0)}" y="${fmt(y0)}" dominant-baseline="${baseline}" fill="${escapeXml(color)}" font-size="${fmt(fontsize)}" font-family="${escapeXml(font)}" text-anchor="${anchor}"${transform}>${textContent}</text>`;
       if (opts.href) {
         inner2 = `<a href="${escapeXml(opts.href)}">${inner2}</a>`;
       }
@@ -17738,51 +17737,55 @@ var Circuit = (() => {
     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;
+  var EXCLUDED_ANCHORS = /* @__PURE__ */ new Set([
+    "xy",
+    "center",
+    "istart",
+    "iend",
+    "mid",
+    "label",
+    "vd",
+    "vs",
+    "n1",
+    "n2",
+    "n1a",
+    "n2a"
+  ]);
+  function isConnectionAnchor(name) {
+    return !EXCLUDED_ANCHORS.has(name);
   }
-  function getInputAnchors(el) {
+  function getConnectionAnchors(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);
-      }
+    for (const [name, pt] of Object.entries(el.absanchors)) {
+      if (isConnectionAnchor(name)) 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 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 toPts = getInputAnchors(toEl);
-        if (toPts.length === 0) continue;
-        const toColor = resolveElementColor(toEl);
-        if (colorsEqual(fromColor, toColor)) continue;
-        for (const fp of fromPts) {
-          for (const tp of toPts) {
-            if (!pointsClose(fp, tp, tol)) continue;
+      const elA = elements[i];
+      const colorA = resolveElementColor(elA);
+      const anchorsA = getConnectionAnchors(elA);
+      if (anchorsA.length === 0) continue;
+      for (let j = i + 1; j < elements.length; j++) {
+        const elB = elements[j];
+        const colorB = resolveElementColor(elB);
+        if (colorsEqual(colorA, colorB)) continue;
+        const anchorsB = getConnectionAnchors(elB);
+        if (anchorsB.length === 0) continue;
+        for (const pa of anchorsA) {
+          for (const pb of anchorsB) {
+            if (Math.hypot(pa.x - pb.x, pa.y - pb.y) > tol) continue;
             const key = `${i}|${j}`;
             if (seen.has(key)) continue;
             seen.add(key);
-            edges.push({ fromEl, toEl, fromColor, toColor, junctionPt: fp });
+            edges.push({ elA, elB, colorA, colorB, junctionPt: pa });
+            break;
           }
+          if (seen.has(`${i}|${j}`)) break;
         }
       }
     }
@@ -17798,26 +17801,28 @@ var Circuit = (() => {
     const cleanups = [];
     let n = 0;
     for (const edge of edges) {
-      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;
+      const segA = findSegAtJunction(edge.elA, edge.junctionPt);
+      const segB = findSegAtJunction(edge.elB, edge.junctionPt);
+      if (!segA && !segB) continue;
+      if (segA?.gradientStrokeId && segB?.gradientStrokeId) continue;
       let gx1, gy1, gx2, gy2;
-      if (lead2Seg && lead1Seg) {
-        const from = segEndpointsSvg(edge.fromEl, lead2Seg, scale);
-        const to = segEndpointsSvg(edge.toEl, lead1Seg, scale);
-        gx1 = from.x1;
-        gy1 = from.y1;
-        gx2 = to.x2;
-        gy2 = to.y2;
-      } else if (lead2Seg) {
-        const c = segEndpointsSvg(edge.fromEl, lead2Seg, scale);
+      if (segA && segB) {
+        const a = segEndpointsSvg(edge.elA, segA, scale);
+        const b = segEndpointsSvg(edge.elB, segB, scale);
+        const aNear = nearFarSvg(edge.elA, segA, edge.junctionPt, scale);
+        const bNear = nearFarSvg(edge.elB, segB, edge.junctionPt, scale);
+        gx1 = aNear.farX;
+        gy1 = aNear.farY;
+        gx2 = bNear.farX;
+        gy2 = bNear.farY;
+      } else if (segA) {
+        const c = segEndpointsSvg(edge.elA, segA, scale);
         gx1 = c.x1;
         gy1 = c.y1;
         gx2 = c.x2;
         gy2 = c.y2;
       } else {
-        const c = segEndpointsSvg(edge.toEl, lead1Seg, scale);
+        const c = segEndpointsSvg(edge.elB, segB, scale);
         gx1 = c.x1;
         gy1 = c.y1;
         gx2 = c.x2;
@@ -17825,17 +17830,17 @@ var Circuit = (() => {
       }
       if (gradientVectorLength({ x1: gx1, y1: gy1, x2: gx2, y2: gy2 }) < 1e-6) continue;
       const id = `sd-trans-${n++}`;
-      parts.push(gradientXml(id, gx1, gy1, gx2, gy2, edge.fromColor, edge.toColor));
-      if (lead2Seg && !lead2Seg.gradientStrokeId) {
-        lead2Seg.gradientStrokeId = id;
+      parts.push(gradientXml(id, gx1, gy1, gx2, gy2, edge.colorA, edge.colorB));
+      if (segA && !segA.gradientStrokeId) {
+        segA.gradientStrokeId = id;
         cleanups.push(() => {
-          lead2Seg.gradientStrokeId = void 0;
+          segA.gradientStrokeId = void 0;
         });
       }
-      if (lead1Seg && !lead1Seg.gradientStrokeId) {
-        lead1Seg.gradientStrokeId = id;
+      if (segB && !segB.gradientStrokeId) {
+        segB.gradientStrokeId = id;
         cleanups.push(() => {
-          lead1Seg.gradientStrokeId = void 0;
+          segB.gradientStrokeId = void 0;
         });
       }
     }
@@ -17846,26 +17851,21 @@ var Circuit = (() => {
       }
     };
   }
-  function findLeadSegmentFor(el, side, junctionPt) {
-    const role = side === "in" ? "lead1" : "lead2";
+  function findSegAtJunction(el, junctionPt) {
+    const tol = 0.6;
     for (const s of el.segments) {
-      if (s instanceof Segment && s.role === role) return s;
+      if (!(s instanceof Segment)) continue;
+      if (s.role !== "lead1" && s.role !== "lead2") continue;
+      if (segTouchesPoint(el, s, junctionPt, tol)) return s;
     }
-    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 (s.path.length > 6) continue;
+      const d = segDistToPoint(el, s, junctionPt);
       if (d < bestDist && d < tol) {
         bestDist = d;
         best = s;
@@ -17873,6 +17873,25 @@ var Circuit = (() => {
     }
     return best;
   }
+  function segTouchesPoint(el, seg, absPt, tol) {
+    return segDistToPoint(el, seg, absPt) < tol;
+  }
+  function segDistToPoint(el, seg, absPt) {
+    const p0 = el.transform.transform(seg.path[0]);
+    const pN = el.transform.transform(seg.path[seg.path.length - 1]);
+    return Math.min(
+      Math.hypot(p0.x - absPt.x, p0.y - absPt.y),
+      Math.hypot(pN.x - absPt.x, pN.y - absPt.y)
+    );
+  }
+  function nearFarSvg(el, seg, junctionPt, scale) {
+    const p0 = el.transform.transform(seg.path[0]);
+    const pN = el.transform.transform(seg.path[seg.path.length - 1]);
+    const d0 = Math.hypot(p0.x - junctionPt.x, p0.y - junctionPt.y);
+    const dN = Math.hypot(pN.x - junctionPt.x, pN.y - junctionPt.y);
+    const far = d0 > dN ? p0 : pN;
+    return { farX: far.x * scale, farY: -far.y * scale };
+  }
   function segEndpointsSvg(el, seg, scale) {
     const p0 = el.transform.transform(seg.path[0]);
     const p1 = el.transform.transform(seg.path[seg.path.length - 1]);