@tscircuit/schematic-viewer 1.2.12 → 1.2.14

package/.storybook/main.ts

@@ -1,9 +1,10 @@
-import type { StorybookConfig } from "@storybook/nextjs"
+import type { StorybookConfig } from "@storybook/react-vite"
+
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [],
   framework: {
-    name: "@storybook/nextjs",
+    name: "@storybook/react-vite",
     options: {},
   },
   docs: {},

package/dist/index.d.ts

@@ -1,12 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AnySoupElement } from '@tscircuit/soup';
+
 interface SchematicProps {
     children?: any;
     /** @deprecated use soup */
     elements?: any;
-    soup?: any;
+    soup?: AnySoupElement[];
     style?: any;
     showTable?: boolean;
+    _soupPostProcessor?: (soup: AnySoupElement[]) => AnySoupElement[];
 }
-declare const Schematic: (props: SchematicProps) => JSX.Element;
-declare const SchematicWithoutContext: ({ children, elements: initialElements, soup: initialSoup, style, showTable, }: SchematicProps) => JSX.Element;
+declare const Schematic: (props: SchematicProps) => react_jsx_runtime.JSX.Element;
+declare const SchematicWithoutContext: ({ children, elements: initialElements, soup: initialSoup, style, showTable, _soupPostProcessor, }: SchematicProps) => react_jsx_runtime.JSX.Element;
 
 export { Schematic, SchematicProps, SchematicWithoutContext };

package/dist/index.js

@@ -941,47 +941,62 @@ module.exports = __toCommonJS(src_exports);
 // src/Schematic.tsx
 var import_react9 = require("react");
 
-// node_modules/zustand/esm/vanilla.js
+// node_modules/zustand/esm/vanilla.mjs
+var import_meta = {};
 var createStoreImpl = (createState) => {
   let state;
   const listeners = /* @__PURE__ */ new Set();
   const setState = (partial, replace) => {
     const nextState = typeof partial === "function" ? partial(state) : partial;
-    if (nextState !== state) {
+    if (!Object.is(nextState, state)) {
       const previousState = state;
-      state = replace ? nextState : Object.assign({}, state, nextState);
+      state = (replace != null ? replace : typeof nextState !== "object" || nextState === null) ? nextState : Object.assign({}, state, nextState);
       listeners.forEach((listener) => listener(state, previousState));
     }
   };
   const getState = () => state;
+  const getInitialState = () => initialState;
   const subscribe = (listener) => {
     listeners.add(listener);
     return () => listeners.delete(listener);
   };
-  const destroy = () => listeners.clear();
-  const api = { setState, getState, subscribe, destroy };
-  state = createState(
-    setState,
-    getState,
-    api
-  );
+  const destroy = () => {
+    if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
+      console.warn(
+        "[DEPRECATED] The `destroy` method will be unsupported in a future version. Instead use unsubscribe function returned by subscribe. Everything will be garbage-collected if store is garbage-collected."
+      );
+    }
+    listeners.clear();
+  };
+  const api = { setState, getState, getInitialState, subscribe, destroy };
+  const initialState = state = createState(setState, getState, api);
   return api;
 };
 var createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
 
-// node_modules/zustand/esm/index.js
-var import_react = require("react");
-var import_with_selector = __toESM(require_with_selector());
+// node_modules/zustand/esm/index.mjs
+var import_react = __toESM(require("react"), 1);
+var import_with_selector = __toESM(require_with_selector(), 1);
+var import_meta2 = {};
+var { useDebugValue } = import_react.default;
 var { useSyncExternalStoreWithSelector } = import_with_selector.default;
-function useStore(api, selector = api.getState, equalityFn) {
+var didWarnAboutEqualityFn = false;
+var identity = (arg) => arg;
+function useStore(api, selector = identity, equalityFn) {
+  if ((import_meta2.env ? import_meta2.env.MODE : void 0) !== "production" && equalityFn && !didWarnAboutEqualityFn) {
+    console.warn(
+      "[DEPRECATED] Use `createWithEqualityFn` instead of `create` or use `useStoreWithEqualityFn` instead of `useStore`. They can be imported from 'zustand/traditional'. https://github.com/pmndrs/zustand/discussions/1937"
+    );
+    didWarnAboutEqualityFn = true;
+  }
   const slice = useSyncExternalStoreWithSelector(
     api.subscribe,
     api.getState,
-    api.getServerState || api.getState,
+    api.getServerState || api.getInitialState,
     selector,
     equalityFn
   );
-  (0, import_react.useDebugValue)(slice);
+  useDebugValue(slice);
   return slice;
 }
 
@@ -1814,7 +1829,10 @@ var SchematicBug = ({ component: { source, schematic } }) => {
       d: `M ${-bugw / 2} ${-bugh / 2} L ${bugw / 2} ${-bugh / 2} L ${bugw / 2} ${bugh / 2} L ${-bugw / 2} ${bugh / 2}Z`
     },
     ...port_indices.map((portNum) => {
-      const pos = (0, import_builder2.getPortPosition)(port_arrangement, portNum);
+      const pos = (0, import_builder2.getPortPosition)(
+        { ...port_arrangement, pin_spacing: schematic.pin_spacing },
+        portNum
+      );
       const x2 = pos.side === "left" ? -bugw / 2 : pos.side === "right" ? bugw / 2 : pos.x;
       const y2 = pos.side === "top" ? bugh / 2 : pos.side === "bottom" ? -bugh / 2 : pos.y;
       return {
@@ -2095,29 +2113,61 @@ var SchematicPath = (props) => {
 };
 var SchematicPath_default = SchematicPath;
 
+// src/lib/utils/get-rotation-from-anchor-side.ts
+var getRotationFromAnchorSide = (anchor_side) => {
+  if (anchor_side === "left")
+    return 0;
+  if (anchor_side === "top")
+    return Math.PI * 3 / 2;
+  if (anchor_side === "right")
+    return Math.PI;
+  if (anchor_side === "bottom")
+    return Math.PI / 2;
+  return 0;
+};
+
+// src/lib/utils/get-vec-from-anchor-side.ts
+var getVecFromAnchorSide = (anchor_side) => {
+  if (anchor_side === "left")
+    return { x: -1, y: 0 };
+  if (anchor_side === "top")
+    return { x: 0, y: -1 };
+  if (anchor_side === "right")
+    return { x: 1, y: 0 };
+  if (anchor_side === "bottom")
+    return { x: 0, y: 1 };
+  throw new Error(`invalid anchor side "${anchor_side}"`);
+};
+
 // src/schematic-components/SchematicNetLabel.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var SchematicNetLabel = ({
   net_label
 }) => {
-  console.log({ net_label });
-  const text_width = net_label.text.length * 0.15;
+  const anchor_side = net_label.anchor_side;
+  const is_vertical = anchor_side === "top" || anchor_side === "bottom";
+  const text_width = is_vertical ? 0.3 : net_label.text.length * 0.15;
   const path_width = 31 + net_label.text.length * 5;
+  const anchor_vec = getVecFromAnchorSide(anchor_side);
+  const anchor_dist = is_vertical ? 0.04 : text_width / 4;
+  anchor_vec.x *= anchor_dist;
+  anchor_vec.y *= anchor_dist;
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       SVGPathComponent_default,
       {
-        rotation: 0,
+        rotation: getRotationFromAnchorSide(anchor_side),
         center: net_label.center,
         size: {
           width: 0.05 + text_width,
-          height: 0.175
+          height: 0.2 + (is_vertical ? 0.1 * Math.max(1, net_label.text.length - 2) : 0)
         },
         paths: [
           {
             stroke: "gray",
             strokeWidth: 0.75,
-            d: `M 0 15 L 5 15 L 11 9 L ${path_width} 9 L ${path_width} 21 L 11 21 L 5 15`
+            // d: `M 0 15 L 5 15 L 11 9 L ${path_width} 9 L ${path_width} 21 L 11 21 L 5 15`,
+            d: `M 0 15 L 5 15 L 11 5 L ${path_width} 5 L ${path_width} 26 L 11 26 L 5 15`
           }
         ]
       }
@@ -2126,10 +2176,10 @@ var SchematicNetLabel = ({
       SchematicText_default,
       {
         schematic_text: {
-          anchor: "left",
+          anchor: is_vertical ? "center" : anchor_side,
           position: {
-            x: net_label.center.x - text_width / 4 + 0.025,
-            y: net_label.center.y
+            x: net_label.center.x + anchor_vec.x,
+            y: net_label.center.y + anchor_vec.y
           },
           schematic_component_id: "SYNTHETIC",
           schematic_text_id: "SYNTHETIC",
@@ -2216,7 +2266,8 @@ var SchematicWithoutContext = ({
   elements: initialElements,
   soup: initialSoup,
   style,
-  showTable = false
+  showTable = false,
+  _soupPostProcessor
 }) => {
   initialSoup = initialSoup ?? initialElements ?? [];
   const [elements, setElements] = (0, import_react9.useState)(initialSoup ?? []);
@@ -2261,6 +2312,9 @@ var SchematicWithoutContext = ({
     }
     const projectBuilder = (0, import_builder3.createProjectBuilder)();
     (import_react_fiber.createRoot ?? import_react_fiber.default.createRoot)().render(children, projectBuilder).then(async (elements2) => {
+      if (_soupPostProcessor) {
+        elements2 = _soupPostProcessor(elements2);
+      }
       setElementsAndCamera(elements2);
     }).catch((e) => {
       console.error("ERROR RENDERING CIRCUIT");