@tscircuit/pcb-viewer 1.10.16 → 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

@@ -13747,7 +13747,7 @@ var import_css = require("@emotion/css");
 // package.json
 var package_default = {
     name: "@tscircuit/pcb-viewer",
-    version: "1.10.15",
+    version: "1.10.16",
     main: "dist/index.js",
     repository: "tscircuit/pcb-viewer",
     license: "MIT",
@@ -14955,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];
@@ -14997,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() {