@tscircuit/schematic-viewer 0.0.1

package/dist/schematic-components/SimpleInductor.js

@@ -0,0 +1,102 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/schematic-components/SimpleInductor.tsx
+var SimpleInductor_exports = {};
+__export(SimpleInductor_exports, {
+  SimpleInductor: () => SimpleInductor,
+  default: () => SimpleInductor_default
+});
+module.exports = __toCommonJS(SimpleInductor_exports);
+
+// src/lib/render-context/index.ts
+var import_zustand = __toESM(require("zustand"));
+var import_transformation_matrix = require("transformation-matrix");
+var useRenderContext = (0, import_zustand.default)()(
+  (set, get) => ({
+    camera_transform: (0, import_transformation_matrix.compose)((0, import_transformation_matrix.scale)(100, 100, 0, 0))
+  })
+);
+var useCameraTransform = () => useRenderContext((s) => s.camera_transform);
+
+// src/lib/utils/get-svg-path-bounds.ts
+var import_svg_path_bounds = __toESM(require("svg-path-bounds"));
+function getSVGPathBounds(ds) {
+  if (typeof ds === "string")
+    ds = [ds];
+  let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+  for (const d of ds) {
+    const [left, top, right, bottom] = (0, import_svg_path_bounds.default)(d);
+    minX = Math.min(left, minX);
+    maxX = Math.max(right, maxX);
+    minY = Math.min(top, minY);
+    maxY = Math.max(bottom, maxY);
+  }
+  return { minX, maxX, minY, maxY, width: maxX - minX, height: maxY - minY };
+}
+var get_svg_path_bounds_default = getSVGPathBounds;
+
+// src/schematic-components/SVGPathComponent.tsx
+var import_transformation_matrix2 = require("transformation-matrix");
+var SVGPathComponent = ({ size, center, rotation, paths }) => {
+  const ct = useCameraTransform();
+  const pathBounds = get_svg_path_bounds_default(paths.map((p) => p.d));
+  const badRatio = Math.abs(pathBounds.width / pathBounds.height - size.width / size.height) > 0.01;
+  if (badRatio) {
+    console.warn(
+      `Ratio doesn't match for component. ${pathBounds.width}:${pathBounds.height} is not close to ${size.width}:${size.height}`
+    );
+  }
+  pathBounds.height = Math.max(pathBounds.height, 1);
+  pathBounds.width = Math.max(pathBounds.width, 1);
+  const absoluteCenter = (0, import_transformation_matrix2.applyToPoint)(ct, center);
+  const absoluteSize = {
+    width: Math.max(1, size.width * ct.a),
+    height: Math.max(1, size.height * ct.d)
+  };
+  return <svg style={{
+    position: "absolute",
+    transform: rotation === 0 ? "" : `rotate(${rotation}rad)`,
+    left: absoluteCenter.x - absoluteSize.width / 2,
+    top: absoluteCenter.y - absoluteSize.height / 2
+  }} overflow="visible" width={absoluteSize.width} height={absoluteSize.height} viewBox={`${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`}>{paths.map((p, i) => <path key={i} fill="none" strokeWidth={2 * (p.strokeWidth || 1)} stroke={p.stroke || "red"} d={p.d} />)}</svg>;
+};
+var SVGPathComponent_default = SVGPathComponent;
+
+// src/schematic-components/SimpleInductor.tsx
+var SimpleInductor = ({ component: { source, schematic } }) => {
+  return <SVGPathComponent_default rotation={schematic.rotation} center={schematic.center} size={schematic.size} paths={[
+    {
+      stroke: "red",
+      strokeWidth: 1,
+      d: "m 371,710.41665 h -14 c -0.0421,-16.39898 -14.02104,-16.39898 -14,0 -0.021,-16.399 -14.04182,-16.34072 -14,0 -2.6e-4,-16.45722 -14.04236,-16.45722 -14,0 2.8e-4,-16.3407 -13.97896,-16.39898 -14,0 -0.0421,-16.39898 -13.91338,-16.39898 -13.91338,0 H 273"
+    }
+  ]} />;
+};
+var SimpleInductor_default = SimpleInductor;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SimpleInductor
+});
+//# sourceMappingURL=SimpleInductor.js.map

package/dist/schematic-components/SimpleInductor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/schematic-components/SimpleInductor.tsx","../../src/lib/render-context/index.ts","../../src/lib/utils/get-svg-path-bounds.ts","../../src/schematic-components/SVGPathComponent.tsx"],"sourcesContent":["import * as Type from \"lib/types\"\nimport SVGPathComponent from \"./SVGPathComponent\"\n\ninterface Props {\n  component: {\n    source: Type.SimpleInductor\n    schematic: Type.SchematicComponent\n  }\n}\n\nexport const SimpleInductor = ({ component: { source, schematic } }: Props) => {\n  return (\n    <SVGPathComponent\n      rotation={schematic.rotation}\n      center={schematic.center}\n      size={schematic.size}\n      paths={[\n        {\n          stroke: \"red\",\n          strokeWidth: 1,\n          // https://commons.wikimedia.org/wiki/File:Electrical_symbols_library.svg\n          d: \"m 371,710.41665 h -14 c -0.0421,-16.39898 -14.02104,-16.39898 -14,0 -0.021,-16.399 -14.04182,-16.34072 -14,0 -2.6e-4,-16.45722 -14.04236,-16.45722 -14,0 2.8e-4,-16.3407 -13.97896,-16.39898 -14,0 -0.0421,-16.39898 -13.91338,-16.39898 -13.91338,0 H 273\",\n        },\n      ]}\n    />\n  )\n}\n\nexport default SimpleInductor\n","import createStore from \"zustand\"\nimport { Matrix, compose, scale } from \"transformation-matrix\"\n\ninterface RenderContextState {\n  camera_transform: Matrix\n}\n\nexport const useRenderContext = createStore<RenderContextState>()(\n  (set, get) => ({\n    camera_transform: compose(scale(100, 100, 0, 0)),\n  })\n)\n\nexport const useCameraTransform = () =>\n  useRenderContext((s) => s.camera_transform)\n","import svgPathBounds from \"svg-path-bounds\"\n\nexport function getSVGPathBounds(ds: string[] | string) {\n  if (typeof ds === \"string\") ds = [ds]\n  let minX = Infinity,\n    maxX = -Infinity,\n    minY = Infinity,\n    maxY = -Infinity\n\n  for (const d of ds) {\n    const [left, top, right, bottom] = svgPathBounds(d)\n\n    minX = Math.min(left, minX)\n    maxX = Math.max(right, maxX)\n    minY = Math.min(top, minY)\n    maxY = Math.max(bottom, maxY)\n  }\n\n  return { minX, maxX, minY, maxY, width: maxX - minX, height: maxY - minY }\n}\n\nexport default getSVGPathBounds\n","import { useCameraTransform } from \"lib/render-context\"\nimport getSVGPathBounds from \"lib/utils/get-svg-path-bounds\"\n\nimport { applyToPoint } from \"transformation-matrix\"\n\ninterface Props {\n  rotation: number\n  center: { x: number; y: number }\n  size: { width: number; height: number }\n  paths: Array<{\n    strokeWidth: number\n    stroke: string\n    d: string\n  }>\n}\n\nexport const SVGPathComponent = ({ size, center, rotation, paths }: Props) => {\n  const ct = useCameraTransform()\n  const pathBounds = getSVGPathBounds(paths.map((p) => p.d))\n  // Margin in SVG Space\n  const badRatio =\n    Math.abs(pathBounds.width / pathBounds.height - size.width / size.height) >\n    0.01\n  if (badRatio) {\n    console.warn(\n      `Ratio doesn't match for component. ${pathBounds.width}:${pathBounds.height} is not close to ${size.width}:${size.height}`\n    )\n  }\n  pathBounds.height = Math.max(pathBounds.height, 1)\n  pathBounds.width = Math.max(pathBounds.width, 1)\n  const absoluteCenter = applyToPoint(ct, center)\n  const absoluteSize = {\n    width: Math.max(1, size.width * ct.a),\n    height: Math.max(1, size.height * ct.d),\n  }\n\n  return (\n    <svg\n      style={{\n        position: \"absolute\",\n        transform: rotation === 0 ? \"\" : `rotate(${rotation}rad)`,\n        left: absoluteCenter.x - absoluteSize.width / 2,\n        top: absoluteCenter.y - absoluteSize.height / 2,\n        // backgroundColor: badRatio ? \"rgba(255, 0, 0, 0.5)\" : \"transparent\",\n      }}\n      overflow=\"visible\"\n      width={absoluteSize.width}\n      height={absoluteSize.height}\n      viewBox={`${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`}\n    >\n      {paths.map((p, i) => (\n        <path\n          key={i}\n          fill=\"none\"\n          strokeWidth={2 * (p.strokeWidth || 1)}\n          stroke={p.stroke || \"red\"}\n          d={p.d}\n        />\n      ))}\n    </svg>\n  )\n}\n\nexport default SVGPathComponent\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,qBAAwB;AACxB,mCAAuC;AAMhC,IAAM,uBAAmB,eAAAA,SAAgC;AAAA,EAC9D,CAAC,KAAK,SAAS;AAAA,IACb,sBAAkB,0CAAQ,oCAAM,KAAK,KAAK,GAAG,CAAC,CAAC;AAAA,EACjD;AACF;AAEO,IAAM,qBAAqB,MAChC,iBAAiB,CAAC,MAAM,EAAE,gBAAgB;;;ACd5C,6BAA0B;AAEnB,SAAS,iBAAiB,IAAuB;AACtD,MAAI,OAAO,OAAO;AAAU,SAAK,CAAC,EAAE;AACpC,MAAI,OAAO,UACT,OAAO,WACP,OAAO,UACP,OAAO;AAET,aAAW,KAAK,IAAI;AAClB,UAAM,CAAC,MAAM,KAAK,OAAO,MAAM,QAAI,uBAAAC,SAAc,CAAC;AAElD,WAAO,KAAK,IAAI,MAAM,IAAI;AAC1B,WAAO,KAAK,IAAI,OAAO,IAAI;AAC3B,WAAO,KAAK,IAAI,KAAK,IAAI;AACzB,WAAO,KAAK,IAAI,QAAQ,IAAI;AAAA,EAC9B;AAEA,SAAO,EAAE,MAAM,MAAM,MAAM,MAAM,OAAO,OAAO,MAAM,QAAQ,OAAO,KAAK;AAC3E;AAEA,IAAO,8BAAQ;;;AClBf,IAAAC,gCAA6B;AAatB,IAAM,mBAAmB,CAAC,EAAE,MAAM,QAAQ,UAAU,MAAM,MAAa;AAC5E,QAAM,KAAK,mBAAmB;AAC9B,QAAM,aAAa,4BAAiB,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;AAEzD,QAAM,WACJ,KAAK,IAAI,WAAW,QAAQ,WAAW,SAAS,KAAK,QAAQ,KAAK,MAAM,IACxE;AACF,MAAI,UAAU;AACZ,YAAQ;AAAA,MACN,sCAAsC,WAAW,SAAS,WAAW,0BAA0B,KAAK,SAAS,KAAK;AAAA,IACpH;AAAA,EACF;AACA,aAAW,SAAS,KAAK,IAAI,WAAW,QAAQ,CAAC;AACjD,aAAW,QAAQ,KAAK,IAAI,WAAW,OAAO,CAAC;AAC/C,QAAM,qBAAiB,4CAAa,IAAI,MAAM;AAC9C,QAAM,eAAe;AAAA,IACnB,OAAO,KAAK,IAAI,GAAG,KAAK,QAAQ,GAAG,CAAC;AAAA,IACpC,QAAQ,KAAK,IAAI,GAAG,KAAK,SAAS,GAAG,CAAC;AAAA,EACxC;AAEA,SACE,CAAC,IACC,OAAO;AAAA,IACL,UAAU;AAAA,IACV,WAAW,aAAa,IAAI,KAAK,UAAU;AAAA,IAC3C,MAAM,eAAe,IAAI,aAAa,QAAQ;AAAA,IAC9C,KAAK,eAAe,IAAI,aAAa,SAAS;AAAA,EAEhD,GACA,SAAS,UACT,OAAO,aAAa,OACpB,QAAQ,aAAa,QACrB,SAAS,GAAG,WAAW,QAAQ,WAAW,QAAQ,WAAW,SAAS,WAAW,WAEhF,MAAM,IAAI,CAAC,GAAG,MACb,CAAC,KACC,KAAK,GACL,KAAK,OACL,aAAa,KAAK,EAAE,eAAe,IACnC,QAAQ,EAAE,UAAU,OACpB,GAAG,EAAE,GACP,EACD,EACH,EAtBC;AAwBL;AAEA,IAAO,2BAAQ;;;AHrDR,IAAM,iBAAiB,CAAC,EAAE,WAAW,EAAE,QAAQ,UAAU,EAAE,MAAa;AAC7E,SACE,CAAC,yBACC,UAAU,UAAU,UACpB,QAAQ,UAAU,QAClB,MAAM,UAAU,MAChB,OAAO;AAAA,IACL;AAAA,MACE,QAAQ;AAAA,MACR,aAAa;AAAA,MAEb,GAAG;AAAA,IACL;AAAA,EACF,GACF;AAEJ;AAEA,IAAO,yBAAQ;","names":["createStore","svgPathBounds","import_transformation_matrix"]}

package/dist/schematic-components/SimplePowerSource.js

@@ -0,0 +1,104 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/schematic-components/SimplePowerSource.tsx
+var SimplePowerSource_exports = {};
+__export(SimplePowerSource_exports, {
+  SimplePowerSource: () => SimplePowerSource,
+  default: () => SimplePowerSource_default
+});
+module.exports = __toCommonJS(SimplePowerSource_exports);
+
+// src/lib/render-context/index.ts
+var import_zustand = __toESM(require("zustand"));
+var import_transformation_matrix = require("transformation-matrix");
+var useRenderContext = (0, import_zustand.default)()(
+  (set, get) => ({
+    camera_transform: (0, import_transformation_matrix.compose)((0, import_transformation_matrix.scale)(100, 100, 0, 0))
+  })
+);
+var useCameraTransform = () => useRenderContext((s) => s.camera_transform);
+
+// src/lib/utils/get-svg-path-bounds.ts
+var import_svg_path_bounds = __toESM(require("svg-path-bounds"));
+function getSVGPathBounds(ds) {
+  if (typeof ds === "string")
+    ds = [ds];
+  let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+  for (const d of ds) {
+    const [left, top, right, bottom] = (0, import_svg_path_bounds.default)(d);
+    minX = Math.min(left, minX);
+    maxX = Math.max(right, maxX);
+    minY = Math.min(top, minY);
+    maxY = Math.max(bottom, maxY);
+  }
+  return { minX, maxX, minY, maxY, width: maxX - minX, height: maxY - minY };
+}
+var get_svg_path_bounds_default = getSVGPathBounds;
+
+// src/schematic-components/SVGPathComponent.tsx
+var import_transformation_matrix2 = require("transformation-matrix");
+var SVGPathComponent = ({ size, center, rotation, paths }) => {
+  const ct = useCameraTransform();
+  const pathBounds = get_svg_path_bounds_default(paths.map((p) => p.d));
+  const badRatio = Math.abs(pathBounds.width / pathBounds.height - size.width / size.height) > 0.01;
+  if (badRatio) {
+    console.warn(
+      `Ratio doesn't match for component. ${pathBounds.width}:${pathBounds.height} is not close to ${size.width}:${size.height}`
+    );
+  }
+  pathBounds.height = Math.max(pathBounds.height, 1);
+  pathBounds.width = Math.max(pathBounds.width, 1);
+  const absoluteCenter = (0, import_transformation_matrix2.applyToPoint)(ct, center);
+  const absoluteSize = {
+    width: Math.max(1, size.width * ct.a),
+    height: Math.max(1, size.height * ct.d)
+  };
+  return <svg style={{
+    position: "absolute",
+    transform: rotation === 0 ? "" : `rotate(${rotation}rad)`,
+    left: absoluteCenter.x - absoluteSize.width / 2,
+    top: absoluteCenter.y - absoluteSize.height / 2
+  }} overflow="visible" width={absoluteSize.width} height={absoluteSize.height} viewBox={`${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`}>{paths.map((p, i) => <path key={i} fill="none" strokeWidth={2 * (p.strokeWidth || 1)} stroke={p.stroke || "red"} d={p.d} />)}</svg>;
+};
+var SVGPathComponent_default = SVGPathComponent;
+
+// src/schematic-components/SimplePowerSource.tsx
+var SimplePowerSource = ({
+  component: { source, schematic }
+}) => {
+  return <SVGPathComponent_default rotation={schematic.rotation} center={schematic.center} size={schematic.size} paths={[
+    {
+      stroke: "red",
+      strokeWidth: 1,
+      d: "M 0 -17 L 0 -3 M -8 3 L 8 3 M 0 17 L 0 3 M -12 -3 L 12 -3"
+    }
+  ]} />;
+};
+var SimplePowerSource_default = SimplePowerSource;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SimplePowerSource
+});
+//# sourceMappingURL=SimplePowerSource.js.map

package/dist/schematic-components/SimplePowerSource.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/schematic-components/SimplePowerSource.tsx","../../src/lib/render-context/index.ts","../../src/lib/utils/get-svg-path-bounds.ts","../../src/schematic-components/SVGPathComponent.tsx"],"sourcesContent":["import * as Type from \"lib/types\"\nimport SVGPathComponent from \"./SVGPathComponent\"\n\ninterface Props {\n  component: {\n    source: Type.SimplePowerSource\n    schematic: Type.SchematicComponent\n  }\n}\n\nexport const SimplePowerSource = ({\n  component: { source, schematic },\n}: Props) => {\n  return (\n    <SVGPathComponent\n      rotation={schematic.rotation}\n      center={schematic.center}\n      size={schematic.size}\n      paths={[\n        {\n          stroke: \"red\",\n          strokeWidth: 1,\n          d: \"M 0 -17 L 0 -3 M -8 3 L 8 3 M 0 17 L 0 3 M -12 -3 L 12 -3\",\n        },\n      ]}\n    />\n  )\n}\n\nexport default SimplePowerSource\n","import createStore from \"zustand\"\nimport { Matrix, compose, scale } from \"transformation-matrix\"\n\ninterface RenderContextState {\n  camera_transform: Matrix\n}\n\nexport const useRenderContext = createStore<RenderContextState>()(\n  (set, get) => ({\n    camera_transform: compose(scale(100, 100, 0, 0)),\n  })\n)\n\nexport const useCameraTransform = () =>\n  useRenderContext((s) => s.camera_transform)\n","import svgPathBounds from \"svg-path-bounds\"\n\nexport function getSVGPathBounds(ds: string[] | string) {\n  if (typeof ds === \"string\") ds = [ds]\n  let minX = Infinity,\n    maxX = -Infinity,\n    minY = Infinity,\n    maxY = -Infinity\n\n  for (const d of ds) {\n    const [left, top, right, bottom] = svgPathBounds(d)\n\n    minX = Math.min(left, minX)\n    maxX = Math.max(right, maxX)\n    minY = Math.min(top, minY)\n    maxY = Math.max(bottom, maxY)\n  }\n\n  return { minX, maxX, minY, maxY, width: maxX - minX, height: maxY - minY }\n}\n\nexport default getSVGPathBounds\n","import { useCameraTransform } from \"lib/render-context\"\nimport getSVGPathBounds from \"lib/utils/get-svg-path-bounds\"\n\nimport { applyToPoint } from \"transformation-matrix\"\n\ninterface Props {\n  rotation: number\n  center: { x: number; y: number }\n  size: { width: number; height: number }\n  paths: Array<{\n    strokeWidth: number\n    stroke: string\n    d: string\n  }>\n}\n\nexport const SVGPathComponent = ({ size, center, rotation, paths }: Props) => {\n  const ct = useCameraTransform()\n  const pathBounds = getSVGPathBounds(paths.map((p) => p.d))\n  // Margin in SVG Space\n  const badRatio =\n    Math.abs(pathBounds.width / pathBounds.height - size.width / size.height) >\n    0.01\n  if (badRatio) {\n    console.warn(\n      `Ratio doesn't match for component. ${pathBounds.width}:${pathBounds.height} is not close to ${size.width}:${size.height}`\n    )\n  }\n  pathBounds.height = Math.max(pathBounds.height, 1)\n  pathBounds.width = Math.max(pathBounds.width, 1)\n  const absoluteCenter = applyToPoint(ct, center)\n  const absoluteSize = {\n    width: Math.max(1, size.width * ct.a),\n    height: Math.max(1, size.height * ct.d),\n  }\n\n  return (\n    <svg\n      style={{\n        position: \"absolute\",\n        transform: rotation === 0 ? \"\" : `rotate(${rotation}rad)`,\n        left: absoluteCenter.x - absoluteSize.width / 2,\n        top: absoluteCenter.y - absoluteSize.height / 2,\n        // backgroundColor: badRatio ? \"rgba(255, 0, 0, 0.5)\" : \"transparent\",\n      }}\n      overflow=\"visible\"\n      width={absoluteSize.width}\n      height={absoluteSize.height}\n      viewBox={`${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`}\n    >\n      {paths.map((p, i) => (\n        <path\n          key={i}\n          fill=\"none\"\n          strokeWidth={2 * (p.strokeWidth || 1)}\n          stroke={p.stroke || \"red\"}\n          d={p.d}\n        />\n      ))}\n    </svg>\n  )\n}\n\nexport default SVGPathComponent\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,qBAAwB;AACxB,mCAAuC;AAMhC,IAAM,uBAAmB,eAAAA,SAAgC;AAAA,EAC9D,CAAC,KAAK,SAAS;AAAA,IACb,sBAAkB,0CAAQ,oCAAM,KAAK,KAAK,GAAG,CAAC,CAAC;AAAA,EACjD;AACF;AAEO,IAAM,qBAAqB,MAChC,iBAAiB,CAAC,MAAM,EAAE,gBAAgB;;;ACd5C,6BAA0B;AAEnB,SAAS,iBAAiB,IAAuB;AACtD,MAAI,OAAO,OAAO;AAAU,SAAK,CAAC,EAAE;AACpC,MAAI,OAAO,UACT,OAAO,WACP,OAAO,UACP,OAAO;AAET,aAAW,KAAK,IAAI;AAClB,UAAM,CAAC,MAAM,KAAK,OAAO,MAAM,QAAI,uBAAAC,SAAc,CAAC;AAElD,WAAO,KAAK,IAAI,MAAM,IAAI;AAC1B,WAAO,KAAK,IAAI,OAAO,IAAI;AAC3B,WAAO,KAAK,IAAI,KAAK,IAAI;AACzB,WAAO,KAAK,IAAI,QAAQ,IAAI;AAAA,EAC9B;AAEA,SAAO,EAAE,MAAM,MAAM,MAAM,MAAM,OAAO,OAAO,MAAM,QAAQ,OAAO,KAAK;AAC3E;AAEA,IAAO,8BAAQ;;;AClBf,IAAAC,gCAA6B;AAatB,IAAM,mBAAmB,CAAC,EAAE,MAAM,QAAQ,UAAU,MAAM,MAAa;AAC5E,QAAM,KAAK,mBAAmB;AAC9B,QAAM,aAAa,4BAAiB,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;AAEzD,QAAM,WACJ,KAAK,IAAI,WAAW,QAAQ,WAAW,SAAS,KAAK,QAAQ,KAAK,MAAM,IACxE;AACF,MAAI,UAAU;AACZ,YAAQ;AAAA,MACN,sCAAsC,WAAW,SAAS,WAAW,0BAA0B,KAAK,SAAS,KAAK;AAAA,IACpH;AAAA,EACF;AACA,aAAW,SAAS,KAAK,IAAI,WAAW,QAAQ,CAAC;AACjD,aAAW,QAAQ,KAAK,IAAI,WAAW,OAAO,CAAC;AAC/C,QAAM,qBAAiB,4CAAa,IAAI,MAAM;AAC9C,QAAM,eAAe;AAAA,IACnB,OAAO,KAAK,IAAI,GAAG,KAAK,QAAQ,GAAG,CAAC;AAAA,IACpC,QAAQ,KAAK,IAAI,GAAG,KAAK,SAAS,GAAG,CAAC;AAAA,EACxC;AAEA,SACE,CAAC,IACC,OAAO;AAAA,IACL,UAAU;AAAA,IACV,WAAW,aAAa,IAAI,KAAK,UAAU;AAAA,IAC3C,MAAM,eAAe,IAAI,aAAa,QAAQ;AAAA,IAC9C,KAAK,eAAe,IAAI,aAAa,SAAS;AAAA,EAEhD,GACA,SAAS,UACT,OAAO,aAAa,OACpB,QAAQ,aAAa,QACrB,SAAS,GAAG,WAAW,QAAQ,WAAW,QAAQ,WAAW,SAAS,WAAW,WAEhF,MAAM,IAAI,CAAC,GAAG,MACb,CAAC,KACC,KAAK,GACL,KAAK,OACL,aAAa,KAAK,EAAE,eAAe,IACnC,QAAQ,EAAE,UAAU,OACpB,GAAG,EAAE,GACP,EACD,EACH,EAtBC;AAwBL;AAEA,IAAO,2BAAQ;;;AHrDR,IAAM,oBAAoB,CAAC;AAAA,EAChC,WAAW,EAAE,QAAQ,UAAU;AACjC,MAAa;AACX,SACE,CAAC,yBACC,UAAU,UAAU,UACpB,QAAQ,UAAU,QAClB,MAAM,UAAU,MAChB,OAAO;AAAA,IACL;AAAA,MACE,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,GAAG;AAAA,IACL;AAAA,EACF,GACF;AAEJ;AAEA,IAAO,4BAAQ;","names":["createStore","svgPathBounds","import_transformation_matrix"]}

package/dist/schematic-components/SimpleResistor.js

@@ -0,0 +1,102 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/schematic-components/SimpleResistor.tsx
+var SimpleResistor_exports = {};
+__export(SimpleResistor_exports, {
+  SimpleResistor: () => SimpleResistor,
+  default: () => SimpleResistor_default
+});
+module.exports = __toCommonJS(SimpleResistor_exports);
+
+// src/lib/render-context/index.ts
+var import_zustand = __toESM(require("zustand"));
+var import_transformation_matrix = require("transformation-matrix");
+var useRenderContext = (0, import_zustand.default)()(
+  (set, get) => ({
+    camera_transform: (0, import_transformation_matrix.compose)((0, import_transformation_matrix.scale)(100, 100, 0, 0))
+  })
+);
+var useCameraTransform = () => useRenderContext((s) => s.camera_transform);
+
+// src/lib/utils/get-svg-path-bounds.ts
+var import_svg_path_bounds = __toESM(require("svg-path-bounds"));
+function getSVGPathBounds(ds) {
+  if (typeof ds === "string")
+    ds = [ds];
+  let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+  for (const d of ds) {
+    const [left, top, right, bottom] = (0, import_svg_path_bounds.default)(d);
+    minX = Math.min(left, minX);
+    maxX = Math.max(right, maxX);
+    minY = Math.min(top, minY);
+    maxY = Math.max(bottom, maxY);
+  }
+  return { minX, maxX, minY, maxY, width: maxX - minX, height: maxY - minY };
+}
+var get_svg_path_bounds_default = getSVGPathBounds;
+
+// src/schematic-components/SVGPathComponent.tsx
+var import_transformation_matrix2 = require("transformation-matrix");
+var SVGPathComponent = ({ size, center, rotation, paths }) => {
+  const ct = useCameraTransform();
+  const pathBounds = get_svg_path_bounds_default(paths.map((p) => p.d));
+  const badRatio = Math.abs(pathBounds.width / pathBounds.height - size.width / size.height) > 0.01;
+  if (badRatio) {
+    console.warn(
+      `Ratio doesn't match for component. ${pathBounds.width}:${pathBounds.height} is not close to ${size.width}:${size.height}`
+    );
+  }
+  pathBounds.height = Math.max(pathBounds.height, 1);
+  pathBounds.width = Math.max(pathBounds.width, 1);
+  const absoluteCenter = (0, import_transformation_matrix2.applyToPoint)(ct, center);
+  const absoluteSize = {
+    width: Math.max(1, size.width * ct.a),
+    height: Math.max(1, size.height * ct.d)
+  };
+  return <svg style={{
+    position: "absolute",
+    transform: rotation === 0 ? "" : `rotate(${rotation}rad)`,
+    left: absoluteCenter.x - absoluteSize.width / 2,
+    top: absoluteCenter.y - absoluteSize.height / 2
+  }} overflow="visible" width={absoluteSize.width} height={absoluteSize.height} viewBox={`${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`}>{paths.map((p, i) => <path key={i} fill="none" strokeWidth={2 * (p.strokeWidth || 1)} stroke={p.stroke || "red"} d={p.d} />)}</svg>;
+};
+var SVGPathComponent_default = SVGPathComponent;
+
+// src/schematic-components/SimpleResistor.tsx
+var SimpleResistor = ({ component: { source, schematic } }) => {
+  return <SVGPathComponent_default rotation={schematic.rotation} center={schematic.center} size={schematic.size} paths={[
+    {
+      stroke: "red",
+      strokeWidth: 1,
+      d: "M 0 15 l 10 0 l 0 -6 l 20 0 l 0 12 l -20 0 l 0 -6 m 20 0 l 10 0"
+    }
+  ]} />;
+};
+var SimpleResistor_default = SimpleResistor;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SimpleResistor
+});
+//# sourceMappingURL=SimpleResistor.js.map

package/dist/schematic-components/SimpleResistor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/schematic-components/SimpleResistor.tsx","../../src/lib/render-context/index.ts","../../src/lib/utils/get-svg-path-bounds.ts","../../src/schematic-components/SVGPathComponent.tsx"],"sourcesContent":["import * as Type from \"lib/types\"\nimport SVGPathComponent from \"./SVGPathComponent\"\n\ninterface Props {\n  component: {\n    source: Type.SimpleResistor\n    schematic: Type.SchematicComponent\n  }\n}\n\nexport const SimpleResistor = ({ component: { source, schematic } }: Props) => {\n  return (\n    <SVGPathComponent\n      rotation={schematic.rotation}\n      center={schematic.center}\n      size={schematic.size}\n      paths={[\n        {\n          stroke: \"red\",\n          strokeWidth: 1,\n          d: \"M 0 15 l 10 0 l 0 -6 l 20 0 l 0 12 l -20 0 l 0 -6 m 20 0 l 10 0\",\n        },\n      ]}\n    />\n  )\n}\n\nexport default SimpleResistor\n","import createStore from \"zustand\"\nimport { Matrix, compose, scale } from \"transformation-matrix\"\n\ninterface RenderContextState {\n  camera_transform: Matrix\n}\n\nexport const useRenderContext = createStore<RenderContextState>()(\n  (set, get) => ({\n    camera_transform: compose(scale(100, 100, 0, 0)),\n  })\n)\n\nexport const useCameraTransform = () =>\n  useRenderContext((s) => s.camera_transform)\n","import svgPathBounds from \"svg-path-bounds\"\n\nexport function getSVGPathBounds(ds: string[] | string) {\n  if (typeof ds === \"string\") ds = [ds]\n  let minX = Infinity,\n    maxX = -Infinity,\n    minY = Infinity,\n    maxY = -Infinity\n\n  for (const d of ds) {\n    const [left, top, right, bottom] = svgPathBounds(d)\n\n    minX = Math.min(left, minX)\n    maxX = Math.max(right, maxX)\n    minY = Math.min(top, minY)\n    maxY = Math.max(bottom, maxY)\n  }\n\n  return { minX, maxX, minY, maxY, width: maxX - minX, height: maxY - minY }\n}\n\nexport default getSVGPathBounds\n","import { useCameraTransform } from \"lib/render-context\"\nimport getSVGPathBounds from \"lib/utils/get-svg-path-bounds\"\n\nimport { applyToPoint } from \"transformation-matrix\"\n\ninterface Props {\n  rotation: number\n  center: { x: number; y: number }\n  size: { width: number; height: number }\n  paths: Array<{\n    strokeWidth: number\n    stroke: string\n    d: string\n  }>\n}\n\nexport const SVGPathComponent = ({ size, center, rotation, paths }: Props) => {\n  const ct = useCameraTransform()\n  const pathBounds = getSVGPathBounds(paths.map((p) => p.d))\n  // Margin in SVG Space\n  const badRatio =\n    Math.abs(pathBounds.width / pathBounds.height - size.width / size.height) >\n    0.01\n  if (badRatio) {\n    console.warn(\n      `Ratio doesn't match for component. ${pathBounds.width}:${pathBounds.height} is not close to ${size.width}:${size.height}`\n    )\n  }\n  pathBounds.height = Math.max(pathBounds.height, 1)\n  pathBounds.width = Math.max(pathBounds.width, 1)\n  const absoluteCenter = applyToPoint(ct, center)\n  const absoluteSize = {\n    width: Math.max(1, size.width * ct.a),\n    height: Math.max(1, size.height * ct.d),\n  }\n\n  return (\n    <svg\n      style={{\n        position: \"absolute\",\n        transform: rotation === 0 ? \"\" : `rotate(${rotation}rad)`,\n        left: absoluteCenter.x - absoluteSize.width / 2,\n        top: absoluteCenter.y - absoluteSize.height / 2,\n        // backgroundColor: badRatio ? \"rgba(255, 0, 0, 0.5)\" : \"transparent\",\n      }}\n      overflow=\"visible\"\n      width={absoluteSize.width}\n      height={absoluteSize.height}\n      viewBox={`${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`}\n    >\n      {paths.map((p, i) => (\n        <path\n          key={i}\n          fill=\"none\"\n          strokeWidth={2 * (p.strokeWidth || 1)}\n          stroke={p.stroke || \"red\"}\n          d={p.d}\n        />\n      ))}\n    </svg>\n  )\n}\n\nexport default SVGPathComponent\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,qBAAwB;AACxB,mCAAuC;AAMhC,IAAM,uBAAmB,eAAAA,SAAgC;AAAA,EAC9D,CAAC,KAAK,SAAS;AAAA,IACb,sBAAkB,0CAAQ,oCAAM,KAAK,KAAK,GAAG,CAAC,CAAC;AAAA,EACjD;AACF;AAEO,IAAM,qBAAqB,MAChC,iBAAiB,CAAC,MAAM,EAAE,gBAAgB;;;ACd5C,6BAA0B;AAEnB,SAAS,iBAAiB,IAAuB;AACtD,MAAI,OAAO,OAAO;AAAU,SAAK,CAAC,EAAE;AACpC,MAAI,OAAO,UACT,OAAO,WACP,OAAO,UACP,OAAO;AAET,aAAW,KAAK,IAAI;AAClB,UAAM,CAAC,MAAM,KAAK,OAAO,MAAM,QAAI,uBAAAC,SAAc,CAAC;AAElD,WAAO,KAAK,IAAI,MAAM,IAAI;AAC1B,WAAO,KAAK,IAAI,OAAO,IAAI;AAC3B,WAAO,KAAK,IAAI,KAAK,IAAI;AACzB,WAAO,KAAK,IAAI,QAAQ,IAAI;AAAA,EAC9B;AAEA,SAAO,EAAE,MAAM,MAAM,MAAM,MAAM,OAAO,OAAO,MAAM,QAAQ,OAAO,KAAK;AAC3E;AAEA,IAAO,8BAAQ;;;AClBf,IAAAC,gCAA6B;AAatB,IAAM,mBAAmB,CAAC,EAAE,MAAM,QAAQ,UAAU,MAAM,MAAa;AAC5E,QAAM,KAAK,mBAAmB;AAC9B,QAAM,aAAa,4BAAiB,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;AAEzD,QAAM,WACJ,KAAK,IAAI,WAAW,QAAQ,WAAW,SAAS,KAAK,QAAQ,KAAK,MAAM,IACxE;AACF,MAAI,UAAU;AACZ,YAAQ;AAAA,MACN,sCAAsC,WAAW,SAAS,WAAW,0BAA0B,KAAK,SAAS,KAAK;AAAA,IACpH;AAAA,EACF;AACA,aAAW,SAAS,KAAK,IAAI,WAAW,QAAQ,CAAC;AACjD,aAAW,QAAQ,KAAK,IAAI,WAAW,OAAO,CAAC;AAC/C,QAAM,qBAAiB,4CAAa,IAAI,MAAM;AAC9C,QAAM,eAAe;AAAA,IACnB,OAAO,KAAK,IAAI,GAAG,KAAK,QAAQ,GAAG,CAAC;AAAA,IACpC,QAAQ,KAAK,IAAI,GAAG,KAAK,SAAS,GAAG,CAAC;AAAA,EACxC;AAEA,SACE,CAAC,IACC,OAAO;AAAA,IACL,UAAU;AAAA,IACV,WAAW,aAAa,IAAI,KAAK,UAAU;AAAA,IAC3C,MAAM,eAAe,IAAI,aAAa,QAAQ;AAAA,IAC9C,KAAK,eAAe,IAAI,aAAa,SAAS;AAAA,EAEhD,GACA,SAAS,UACT,OAAO,aAAa,OACpB,QAAQ,aAAa,QACrB,SAAS,GAAG,WAAW,QAAQ,WAAW,QAAQ,WAAW,SAAS,WAAW,WAEhF,MAAM,IAAI,CAAC,GAAG,MACb,CAAC,KACC,KAAK,GACL,KAAK,OACL,aAAa,KAAK,EAAE,eAAe,IACnC,QAAQ,EAAE,UAAU,OACpB,GAAG,EAAE,GACP,EACD,EACH,EAtBC;AAwBL;AAEA,IAAO,2BAAQ;;;AHrDR,IAAM,iBAAiB,CAAC,EAAE,WAAW,EAAE,QAAQ,UAAU,EAAE,MAAa;AAC7E,SACE,CAAC,yBACC,UAAU,UAAU,UACpB,QAAQ,UAAU,QAClB,MAAM,UAAU,MAChB,OAAO;AAAA,IACL;AAAA,MACE,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,GAAG;AAAA,IACL;AAAA,EACF,GACF;AAEJ;AAEA,IAAO,yBAAQ;","names":["createStore","svgPathBounds","import_transformation_matrix"]}