@tscircuit/pcb-viewer 1.10.15 → 1.10.17

package/README.md

@@ -12,12 +12,18 @@ If you want to render to an image, check out [circuit-to-png](https://github.com
 
 ## Usage
 
-```
+```bash
 npm install @tscircuit/pcb-viewer
 ```
 
+There are two main ways to use the PCBViewer:
+
+### 1. Using Circuit Components
+
+This approach allows you to declaratively define your circuit using React components:
+
 ```tsx
-import React, { useEffect, useRef } from "react"
+import React from "react"
 import { PCBViewer } from "@tscircuit/pcb-viewer"
 
 export default () => {
@@ -25,8 +31,57 @@ export default () => {
     <div style={{ backgroundColor: "black" }}>
       <PCBViewer>
         <resistor footprint="0805" resistance="10k" />
+        <capacitor footprint="0603" capacitance="100nF" />
       </PCBViewer>
     </div>
   )
 }
 ```
+
+### 2. Using Circuit JSON
+
+If you already have circuit JSON data, you can pass it directly:
+
+```tsx
+import React from "react"
+import { PCBViewer } from "@tscircuit/pcb-viewer"
+
+const circuitJson = [
+  {
+    type: "pcb_component",
+    pcb_component_id: "R1",
+    center: { x: 0, y: 0 },
+    // ... other component properties
+  },
+  // ... more elements
+]
+
+export default () => {
+  return (
+    <div style={{ backgroundColor: "black" }}>
+      <PCBViewer circuitJson={circuitJson} />
+    </div>
+  )
+}
+```
+
+### Props
+
+The PCBViewer component accepts these props:
+
+- `children`: Circuit components to render
+- `circuitJson`: Circuit JSON elements array (alternative to children)
+- `height`: Height of viewer in pixels (default: 600)
+- `allowEditing`: Enable/disable editing capabilities (default: true)
+- `editEvents`: Array of edit events to apply
+- `onEditEventsChanged`: Callback when edit events change
+- `initialState`: Initial state for the viewer
+
+### Features
+
+- Interactive PCB viewing with pan and zoom
+- Multiple layer support (top, bottom, inner layers)
+- Component placement editing
+- Trace routing
+- DRC (Design Rule Check) visualization
+- Measurement tools

package/dist/index.d.ts

@@ -56,6 +56,7 @@ type EditEvent = EditComponentLocationEvent | EditTraceHintEvent;
 
 type Props = {
     children?: any;
+    circuitJson?: AnyCircuitElement[];
     soup?: any;
     height?: number;
     allowEditing?: boolean;
@@ -63,7 +64,7 @@ type Props = {
     initialState?: Partial<StateProps>;
     onEditEventsChanged?: (editEvents: EditEvent[]) => void;
 };
-declare const PCBViewer: ({ children, soup, height, initialState, allowEditing, editEvents: editEventsProp, onEditEventsChanged, }: Props) => react_jsx_runtime.JSX.Element;
+declare const PCBViewer: ({ children, soup, circuitJson, height, initialState, allowEditing, editEvents: editEventsProp, onEditEventsChanged, }: Props) => react_jsx_runtime.JSX.Element;
 
 declare const applyEditEvents: (soup: AnyCircuitElement[], edit_events: EditEvent[]) => AnyCircuitElement[];
 

package/dist/index.js

@@ -11947,6 +11947,16 @@ var scaleOnly = function(mat) {
     if (Math.abs(mat.a) !== Math.abs(mat.d)) throw new Error("Cannot scale non-uniformly");
     return value * Math.abs(mat.a);
 };
+// src/lib/util/z-index-map.ts
+var zIndexMap = {
+    elementOverlay: 30,
+    dimensionOverlay: 30,
+    editTraceHintOverlay: 30,
+    errorOverlay: 30,
+    ratsNestOverlay: 20,
+    toolbarOverlay: 20,
+    topLayer: 10
+};
 // src/lib/Drawer.ts
 var LAYER_NAME_TO_COLOR = _object_spread({
     // Standard colors, you shouldn't use these except for testing
@@ -12246,7 +12256,7 @@ var Drawer = /*#__PURE__*/ function() {
                 order.forEach(function(layer, i) {
                     var canvas = canvasLayerMap[layer];
                     if (!canvas) return;
-                    canvas.style.zIndex = "".concat(100 - i);
+                    canvas.style.zIndex = "".concat(zIndexMap.topLayer - i);
                     canvas.style.opacity = opaqueLayers.has(layer) ? "1" : "0.5";
                 });
             }
@@ -13297,7 +13307,7 @@ var HighlightedPrimitiveBoxWithText = function(param) {
     var color2 = (_layerColorHightlightMap_primitive__element_layer = layerColorHightlightMap[primitive === null || primitive === void 0 ? void 0 : (_primitive__element = primitive._element) === null || _primitive__element === void 0 ? void 0 : _primitive__element.layer]) !== null && _layerColorHightlightMap_primitive__element_layer !== void 0 ? _layerColorHightlightMap_primitive__element_layer : "red";
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", {
         style: {
-            zIndex: 98,
+            zIndex: zIndexMap.elementOverlay,
             position: "absolute",
             left: x - w / 2 - 8,
             top: y - h / 2 - 8,
@@ -13612,7 +13622,7 @@ var DimensionOverlay = function(param) {
                             marginTop: arrowScreenBounds.flipY ? 0 : -20,
                             fontSize: 12,
                             fontFamily: "sans-serif",
-                            zIndex: 1e3
+                            zIndex: zIndexMap.dimensionOverlay
                         },
                         children: Math.abs(dStart.x - dEnd.x).toFixed(2)
                     }),
@@ -13630,7 +13640,7 @@ var DimensionOverlay = function(param) {
                             mixBlendMode: "difference",
                             fontSize: 12,
                             fontFamily: "sans-serif",
-                            zIndex: 1e3
+                            zIndex: zIndexMap.dimensionOverlay
                         },
                         children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", {
                             style: {
@@ -13647,7 +13657,7 @@ var DimensionOverlay = function(param) {
                             top: 0,
                             pointerEvents: "none",
                             mixBlendMode: "difference",
-                            zIndex: 1e3
+                            zIndex: zIndexMap.dimensionOverlay
                         },
                         width: containerBounds.width,
                         height: containerBounds.height,
@@ -13737,7 +13747,7 @@ var import_css = require("@emotion/css");
 // package.json
 var package_default = {
     name: "@tscircuit/pcb-viewer",
-    version: "1.10.14",
+    version: "1.10.16",
     main: "dist/index.js",
     repository: "tscircuit/pcb-viewer",
     license: "MIT",
@@ -13752,7 +13762,7 @@ var package_default = {
         "dist"
     ],
     devDependencies: {
-        "@biomejs/biome": "^1.7.3",
+        "@biomejs/biome": "^1.9.4",
         "@semantic-release/commit-analyzer": "^9.0.2",
         "@semantic-release/git": "^10.0.1",
         "@semantic-release/npm": "^9.0.1",
@@ -13964,7 +13974,7 @@ var ToolbarOverlay = function(param) {
                     top: 16,
                     left: 16,
                     transition: isMouseOverContainer ? "opacity 100ms linear" : "opacity 1s linear",
-                    zIndex: 100,
+                    zIndex: zIndexMap.toolbarOverlay,
                     color: "red",
                     display: "flex",
                     fontSize: 12,
@@ -14109,7 +14119,7 @@ var ErrorSVG = function(param) {
             top: 0,
             pointerEvents: "none",
             mixBlendMode: "difference",
-            zIndex: 1e3
+            zIndex: zIndexMap.errorOverlay
         },
         width: "100%",
         height: "100%",
@@ -14606,7 +14616,7 @@ var EditTraceHintOverlay = function(param) {
                     top: 0,
                     pointerEvents: "none",
                     mixBlendMode: "difference",
-                    zIndex: 1e3
+                    zIndex: zIndexMap.editTraceHintOverlay
                 },
                 width: containerBounds === null || containerBounds === void 0 ? void 0 : containerBounds.width,
                 height: containerBounds === null || containerBounds === void 0 ? void 0 : containerBounds.height,
@@ -14659,7 +14669,7 @@ var EditTraceHintOverlay = function(param) {
                     top: 0,
                     pointerEvents: "none",
                     mixBlendMode: "difference",
-                    zIndex: 1e3
+                    zIndex: zIndexMap.editTraceHintOverlay
                 },
                 width: containerBounds === null || containerBounds === void 0 ? void 0 : containerBounds.width,
                 height: containerBounds === null || containerBounds === void 0 ? void 0 : containerBounds.height,
@@ -14771,7 +14781,7 @@ var RatsNestOverlay = function(param) {
                     height: "100%",
                     pointerEvents: "none",
                     opacity: 0.5,
-                    zIndex: 100
+                    zIndex: zIndexMap.ratsNestOverlay
                 },
                 children: groups.map(function(group, index) {
                     var points = group.map(function(port) {
@@ -14945,7 +14955,8 @@ var CanvasElementsRenderer = function(props) {
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var defaultTransform = (0, import_transformation_matrix10.compose)((0, import_transformation_matrix10.translate)(400, 300), (0, import_transformation_matrix10.scale)(40, -40));
 var PCBViewer = function(param) {
-    var children = param.children, soup = param.soup, _param_height = param.height, height = _param_height === void 0 ? 600 : _param_height, initialState = param.initialState, _param_allowEditing = param.allowEditing, allowEditing = _param_allowEditing === void 0 ? true : _param_allowEditing, editEventsProp = param.editEvents, onEditEventsChanged = param.onEditEventsChanged;
+    var children = param.children, soup = param.soup, circuitJson = param.circuitJson, _param_height = param.height, height = _param_height === void 0 ? 600 : _param_height, initialState = param.initialState, _param_allowEditing = param.allowEditing, allowEditing = _param_allowEditing === void 0 ? true : _param_allowEditing, editEventsProp = param.editEvents, onEditEventsChanged = param.onEditEventsChanged;
+    soup !== null && soup !== void 0 ? soup : soup = circuitJson;
     var _ref = (0, import_core.useRenderedCircuit)(children), circuitJsonFromChildren = _ref.circuitJson, errorFromChildren = _ref.error, isLoading = _ref.isLoading;
     var _useMeasure_default = _sliced_to_array(useMeasure_default(), 2), ref = _useMeasure_default[0], refDimensions = _useMeasure_default[1];
     var _ref1 = _sliced_to_array((0, import_react20.useState)(defaultTransform), 2), transform = _ref1[0], setTransformInternal = _ref1[1];
@@ -14987,7 +14998,8 @@ var PCBViewer = function(param) {
         children,
         refDimensions
     ]);
-    var pcbElmsPreEdit = (soup !== null && soup !== void 0 ? soup : stateElements).filter(function(e) {
+    var _ref5;
+    var pcbElmsPreEdit = ((_ref5 = circuitJson !== null && circuitJson !== void 0 ? circuitJson : soup) !== null && _ref5 !== void 0 ? _ref5 : stateElements).filter(function(e) {
         return e.type.startsWith("pcb_") || e.type.startsWith("source_");
     });
     var elements = (0, import_react20.useMemo)(function() {