@tscircuit/schematic-viewer 2.0.3 → 2.0.5

package/docs/circuit-to-svg-metadata.md

@@ -0,0 +1,151 @@
+# circuit-to-svg
+
+Circuit to SVG is a library that's used for converting Circuit JSON into an SVG.
+
+Circuit to SVG attaches metadata, classes and ids to the SVG elements to allow
+for interaction.
+
+## Metadata
+
+- `<g data-circuit-json-type="schematic_component" data-schematic-component-id="..."` - The id of the schematic component, the
+  group contains all the relevant elements for the component.
+- `<g data-circuit-json-type="schematic_trace" data-schematic-trace-id="..."` - The id of the schematic trace, the
+  group contains all the relevant elements for the trace.
+
+## Example
+
+Let's consider the following example:
+
+```tsx
+const MyCircuit = () => (
+  <board width="10mm" height="10mm">
+    <resistor name="R1" resistance={1000} schX={-2} />
+    <capacitor name="C1" capacitance="1uF" schX={2} />
+    <trace from=".R1 .pin2" to=".C1 .pin1" />
+  </board>
+)
+```
+
+Will become the following SVG:
+
+```svg
+<svg xmlns="http://www.w3.org/2000/svg" width="1728" height="421" style="background-color: rgb(245, 241, 237)" data-real-to-screen-transform="matrix(264.7769766545,0,0,-264.7769766545,861.6939778772,210.5)">
+  <style>
+    .boundary {
+      fill: rgb(245, 241, 237);
+    }
+
+    .schematic-boundary {
+      fill: none;
+      stroke: #fff;
+    }
+
+    .component {
+      fill: none;
+      stroke: rgb(132, 0, 0);
+    }
+
+    .chip {
+      fill: rgb(255, 255, 194);
+      stroke: rgb(132, 0, 0);
+    }
+
+    .component-pin {
+      fill: none;
+      stroke: rgb(132, 0, 0);
+    }
+
+    .trace:hover {
+      filter: invert(1);
+    }
+
+    .trace:hover .trace-crossing-outline {
+      opacity: 0;
+    }
+
+    .text {
+      font-family: sans-serif;
+      fill: rgb(0, 150, 0);
+    }
+
+    .pin-number {
+      fill: rgb(169, 0, 0);
+    }
+
+    .port-label {
+      fill: rgb(0, 100, 100);
+    }
+
+    .component-name {
+      fill: rgb(0, 100, 100);
+    }
+  </style>
+  <rect class="boundary" x="0" y="0" width="1728" height="421"></rect>
+  <g class="grid">
+    <line x1="-197.41392874079997" y1="421.0000000000242" x2="-197.41392874079997" y2="-2.4243718144134618e-11" stroke="rgb(181, 181, 181)" stroke-width="2.647769766545" stroke-opacity="0.5"></line>
+    <line x1="67.36304791370003" y1="421.0000000000242" x2="67.36304791370003" y2="-2.4243718144134618e-11" stroke="rgb(181, 181, 181)" stroke-width="2.647769766545" stroke-opacity="0.5"></line>
+    <line x1="332.14002456820003" y1="421.0000000000242" x2="332.14002456820003" y2="-2.4243718144134618e-11" stroke="rgb(181, 181, 181)" stroke-width="2.647769766545" stroke-opacity="0.5"></line>
+    <line x1="596.9170012227" y1="421.0000000000242" x2="596.9170012227" y2="-2.4243718144134618e-11" stroke="rgb(181, 181, 181)" stroke-width="2.647769766545" stroke-opacity="0.5"></line>
+    <line x1="861.6939778772" y1="421.0000000000242" x2="861.6939778772" y2="-2.4243718144134618e-11" stroke="rgb(181, 181, 181)" stroke-width="2.647769766545" stroke-opacity="0.5"></line>
+    <line x1="1126.4709545317" y1="421.0000000000242" x2="1126.4709545317" y2="-2.4243718144134618e-11" stroke="rgb(181, 181, 181)" stroke-width="2.647769766545" stroke-opacity="0.5"></line>
+    <line x1="1391.2479311862" y1="421.0000000000242" x2="1391.2479311862" y2="-2.4243718144134618e-11" stroke="rgb(181, 181, 181)" stroke-width="2.647769766545" stroke-opacity="0.5"></line>
+    <line x1="1656.0249078407" y1="421.0000000000242" x2="1656.0249078407" y2="-2.4243718144134618e-11" stroke="rgb(181, 181, 181)" stroke-width="2.647769766545" stroke-opacity="0.5"></line>
+    <line x1="1920.8018844952" y1="421.0000000000242" x2="1920.8018844952" y2="-2.4243718144134618e-11" stroke="rgb(181, 181, 181)" stroke-width="2.647769766545" stroke-opacity="0.5"></line>
+    <line x1="31.938350863210758" y1="475.2769766545" x2="1696.0616491367432" y2="475.2769766545" stroke="rgb(181, 181, 181)" stroke-width="2.647769766545" stroke-opacity="0.5"></line>
+    <line x1="31.938350863210758" y1="210.5" x2="1696.0616491367432" y2="210.5" stroke="rgb(181, 181, 181)" stroke-width="2.647769766545" stroke-opacity="0.5"></line>
+    <line x1="31.938350863210758" y1="-54.276976654500004" x2="1696.0616491367432" y2="-54.276976654500004" stroke="rgb(181, 181, 181)" stroke-width="2.647769766545" stroke-opacity="0.5"></line>
+    <text x="-199.91392874079997" y="470.2769766545" fill="rgb(181, 181, 181)" font-size="52.955395330900004" fill-opacity="0.5" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif">-4,-1</text>
+    <text x="-199.91392874079997" y="205.5" fill="rgb(181, 181, 181)" font-size="52.955395330900004" fill-opacity="0.5" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif">-4,0</text>
+    <text x="-199.91392874079997" y="-59.276976654500004" fill="rgb(181, 181, 181)" font-size="52.955395330900004" fill-opacity="0.5" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif">-4,1</text>
+    <text x="64.86304791370003" y="470.2769766545" fill="rgb(181, 181, 181)" font-size="52.955395330900004" fill-opacity="0.5" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif">-3,-1</text>
+    <text x="64.86304791370003" y="205.5" fill="rgb(181, 181, 181)" font-size="52.955395330900004" fill-opacity="0.5" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif">-3,0</text>
+    <text x="64.86304791370003" y="-59.276976654500004" fill="rgb(181, 181, 181)" font-size="52.955395330900004" fill-opacity="0.5" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif">-3,1</text>
+    <text x="329.64002456820003" y="470.2769766545" fill="rgb(181, 181, 181)" font-size="52.955395330900004" fill-opacity="0.5" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif">-2,-1</text>
+    <text x="329.64002456820003" y="205.5" fill="rgb(181, 181, 181)" font-size="52.955395330900004" fill-opacity="0.5" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif">-2,0</text>
+    <text x="329.64002456820003" y="-59.276976654500004" fill="rgb(181, 181, 181)" font-size="52.955395330900004" fill-opacity="0.5" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif">-2,1</text>
+    <text x="594.4170012227" y="470.2769766545" fill="rgb(181, 181, 181)" font-size="52.955395330900004" fill-opacity="0.5" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif">-1,-1</text>
+    <text x="594.4170012227" y="205.5" fill="rgb(181, 181, 181)" font-size="52.955395330900004" fill-opacity="0.5" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif">-1,0</text>
+    <text x="594.4170012227" y="-59.276976654500004" fill="rgb(181, 181, 181)" font-size="52.955395330900004" fill-opacity="0.5" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif">-1,1</text>
+    <text x="859.1939778772" y="470.2769766545" fill="rgb(181, 181, 181)" font-size="52.955395330900004" fill-opacity="0.5" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif">0,-1</text>
+    <text x="859.1939778772" y="205.5" fill="rgb(181, 181, 181)" font-size="52.955395330900004" fill-opacity="0.5" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif">0,0</text>
+    <text x="859.1939778772" y="-59.276976654500004" fill="rgb(181, 181, 181)" font-size="52.955395330900004" fill-opacity="0.5" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif">0,1</text>
+    <text x="1123.9709545317" y="470.2769766545" fill="rgb(181, 181, 181)" font-size="52.955395330900004" fill-opacity="0.5" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif">1,-1</text>
+    <text x="1123.9709545317" y="205.5" fill="rgb(181, 181, 181)" font-size="52.955395330900004" fill-opacity="0.5" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif">1,0</text>
+    <text x="1123.9709545317" y="-59.276976654500004" fill="rgb(181, 181, 181)" font-size="52.955395330900004" fill-opacity="0.5" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif">1,1</text>
+    <text x="1388.7479311862" y="470.2769766545" fill="rgb(181, 181, 181)" font-size="52.955395330900004" fill-opacity="0.5" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif">2,-1</text>
+    <text x="1388.7479311862" y="205.5" fill="rgb(181, 181, 181)" font-size="52.955395330900004" fill-opacity="0.5" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif">2,0</text>
+    <text x="1388.7479311862" y="-59.276976654500004" fill="rgb(181, 181, 181)" font-size="52.955395330900004" fill-opacity="0.5" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif">2,1</text>
+    <text x="1653.5249078407" y="470.2769766545" fill="rgb(181, 181, 181)" font-size="52.955395330900004" fill-opacity="0.5" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif">3,-1</text>
+    <text x="1653.5249078407" y="205.5" fill="rgb(181, 181, 181)" font-size="52.955395330900004" fill-opacity="0.5" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif">3,0</text>
+    <text x="1653.5249078407" y="-59.276976654500004" fill="rgb(181, 181, 181)" font-size="52.955395330900004" fill-opacity="0.5" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif">3,1</text>
+    <text x="1918.3018844952" y="470.2769766545" fill="rgb(181, 181, 181)" font-size="52.955395330900004" fill-opacity="0.5" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif">4,-1</text>
+    <text x="1918.3018844952" y="205.5" fill="rgb(181, 181, 181)" font-size="52.955395330900004" fill-opacity="0.5" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif">4,0</text>
+    <text x="1918.3018844952" y="-59.276976654500004" fill="rgb(181, 181, 181)" font-size="52.955395330900004" fill-opacity="0.5" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif">4,1</text>
+  </g>
+  <g data-circuit-json-type="schematic_component" data-schematic-component-id="schematic_component_0" style="">
+    <rect class="component-overlay" x="196.61371724601327" y="174.45583073493046" width="280.2222914667798" height="70.05559272496805" fill="transparent"></rect>
+    <path d="M 196.61371724601327 209.48362709741448 L 266.66928349328373 209.48362709741448" stroke="rgb(132, 0, 0)" fill="none" stroke-width="5.29553953309px"></path>
+    <path d="M 406.78041598782505 209.48362709741448 L 476.83600871279305 209.48362709741448" stroke="rgb(132, 0, 0)" fill="none" stroke-width="5.29553953309px"></path>
+    <path d="M 336.7248232628566 244.5114234598985 L 406.78038951012707 244.5114234598985 L 406.78038951012707 174.45583073493046 L 266.6692305378881 174.45583073493046 L 266.6692305378881 244.5114234598985 L 336.72482326285615 244.5114234598985" stroke="rgb(132, 0, 0)" fill="none" stroke-width="5.29553953309px"></path>
+    <text x="331.762770331863" y="263.45486577694686" dominant-baseline="hanging" text-anchor="middle" font-family="sans-serif" font-size="47.659855797809996px">R1</text>
+    <text x="332.0174857834045" y="131.06743655760317" dominant-baseline="auto" text-anchor="middle" font-family="sans-serif" font-size="47.659855797809996px">1kΩ</text>
+    <circle cx="190.80453685591092" cy="209.38931353832953" r="5.29553953309px" stroke-width="5.29553953309px" fill="none" stroke="rgb(132, 0, 0)"></circle>
+    <circle cx="473.4755122804894" cy="209.2446129205882" r="5.29553953309px" stroke-width="5.29553953309px" fill="none" stroke="rgb(132, 0, 0)"></circle>
+  </g>
+  <g data-circuit-json-type="schematic_component" data-schematic-component-id="schematic_component_1" style="">
+    <rect class="component-overlay" x="1249.4875293817756" y="131.78175188522167" width="280.22229146678" height="140.11113249454112" fill="transparent"></rect>
+    <path d="M 1529.7098208485556 201.83731813249176 L 1410.6153608759655 201.83731813249176" stroke="rgb(132, 0, 0)" fill="none" stroke-width="5.29553953309px"></path>
+    <path d="M 1368.5820158320637 201.83731813249176 L 1249.4875293817756 201.83731813249176" stroke="rgb(132, 0, 0)" fill="none" stroke-width="5.29553953309px"></path>
+    <path d="M 1410.6153608759655 271.8928843797628 L 1410.6153608759655 131.78175188522167" stroke="rgb(132, 0, 0)" fill="none" stroke-width="5.29553953309px"></path>
+    <path d="M 1368.5820158320637 271.8928843797628 L 1368.5820158320637 131.78175188522167" stroke="rgb(132, 0, 0)" fill="none" stroke-width="5.29553953309px"></path>
+    <text x="1387.8417077700283" y="308.4697849218618" dominant-baseline="hanging" text-anchor="middle" font-family="sans-serif" font-size="47.659855797809996px">C1</text>
+    <text x="1390.2284074375918" y="86.05251741268826" dominant-baseline="auto" text-anchor="middle" font-family="sans-serif" font-size="47.659855797809996px">1µF</text>
+    <circle cx="1245.3003992283566" cy="201.5983039556664" r="5.29553953309px" stroke-width="5.29553953309px" fill="none" stroke="rgb(132, 0, 0)"></circle>
+    <circle cx="1537.1954631440433" cy="201.74300457340775" r="5.29553953309px" stroke-width="5.29553953309px" fill="none" stroke="rgb(132, 0, 0)"></circle>
+  </g>
+  <g class="trace" data-circuit-json-type="schematic_trace" data-schematic-trace-id="schematic_trace_0">
+    <path d="M 473.47551228048934 209.2446129205882 L 1205.5838527301817 209.2446129205882 L 1245.3003992283566 209.2446129205882 L 1245.3003992283566 201.59830395566638" class="trace-invisible-hover-outline" stroke="rgb(0, 150, 0)" fill="none" stroke-width="42.36431626472px" stroke-linecap="round" opacity="0" stroke-linejoin="round"></path>
+    <path d="M 473.47551228048934 209.2446129205882 L 1205.5838527301817 209.2446129205882 L 1245.3003992283566 209.2446129205882 L 1245.3003992283566 201.59830395566638" stroke="rgb(0, 150, 0)" fill="none" stroke-width="5.29553953309px" stroke-linecap="round" stroke-linejoin="round"></path>
+  </g>
+</svg>
+```

package/docs/dragndrop-spec.md

@@ -0,0 +1,39 @@
+# Drag and Drop Feature Specification
+
+Drag'n'drop allows users to move schematic components inside the schematic
+viewer.
+
+It uses the "edit event architecture" to manage edits. Here's how it works:
+
+- When the user starts dragging a component, there is an `activeEditEvent` that
+  specifies the component to be moved
+- When the user releases the mouse button, the `activeEditEvent` is committed
+  via the `onEditEvent` callback
+- The schematic viewer applies any edit events passed to it via the `editEvents`
+  prop
+
+## Types
+
+The following is an excerpt from the types of the `@tscircuit/props` package,
+which should be imported.
+
+```tsx
+export interface BaseManualEditEvent {
+  edit_event_id: string
+  in_progress?: boolean
+  created_at: number
+}
+
+export interface EditSchematicComponentLocationEvent
+  extends BaseManualEditEvent {
+  edit_event_type: "edit_schematic_component_location"
+  schematic_component_id: string
+  original_center: { x: number; y: number }
+  new_center: { x: number; y: number }
+}
+
+export type ManualEditEvent =
+  | EditPcbComponentLocationEvent
+  | EditTraceHintEvent
+  | EditSchematicComponentLocationEvent
+```

package/examples/{resistor-and-capacitor.fixture.tsx → example1-resistor-and-capacitor.fixture.tsx}

@@ -1,8 +1,8 @@
-import { SchematicViewer } from "lib/components/SchematicViewer"
+import { ControlledSchematicViewer } from "lib/components/ControlledSchematicViewer"
 import { renderToCircuitJson } from "lib/dev/render-to-circuit-json"
 
 export default () => (
-  <SchematicViewer
+  <ControlledSchematicViewer
     circuitJson={renderToCircuitJson(
       <board width="10mm" height="10mm">
         <resistor name="R1" resistance={1000} schX={-2} />
@@ -11,5 +11,6 @@ export default () => (
       </board>,
     )}
     containerStyle={{ height: "100%" }}
+    debugGrid
   />
 )

package/examples/example2-small-circuit.fixture.tsx

@@ -0,0 +1,45 @@
+import { ControlledSchematicViewer } from "lib/components/ControlledSchematicViewer"
+import { renderToCircuitJson } from "lib/dev/render-to-circuit-json"
+
+export default () => (
+  <ControlledSchematicViewer
+    circuitJson={renderToCircuitJson(
+      <board width="10mm" height="10mm">
+        <resistor name="R1" resistance={1000} schX={-2} />
+        <capacitor name="C1" capacitance="1uF" schX={2} schY={2} />
+        <capacitor
+          name="C2"
+          schRotation={90}
+          capacitance="1uF"
+          schX={0}
+          schY={-4}
+        />
+        <chip
+          name="U1"
+          pinLabels={{
+            pin1: "D0",
+            pin2: "D1",
+            pin3: "D2",
+            pin4: "GND",
+            pin5: "D3",
+            pin6: "EN",
+            pin7: "D4",
+            pin8: "VCC",
+          }}
+          footprint="soic8"
+          schX={0}
+          schY={-1.5}
+        />
+
+        <trace from=".R1 .pin2" to=".C1 .pin1" />
+        <trace from=".C1 .pin2" to=".U1 .pin4" />
+        <trace from=".U1 .pin8" to=".C2 .pin1" />
+        <trace from=".C2 .pin2" to=".R1 .pin1" />
+        <trace from=".U1 .pin1" to=".U1 .pin5" />
+      </board>,
+    )}
+    editingEnabled
+    containerStyle={{ height: "100%" }}
+    debugGrid
+  />
+)

package/examples/example3-small-circuit-without-debug-grid.fixture.tsx

@@ -0,0 +1,44 @@
+import { ControlledSchematicViewer } from "lib/components/ControlledSchematicViewer"
+import { renderToCircuitJson } from "lib/dev/render-to-circuit-json"
+
+export default () => (
+  <ControlledSchematicViewer
+    circuitJson={renderToCircuitJson(
+      <board width="10mm" height="10mm">
+        <resistor name="R1" resistance={1000} schX={-2} />
+        <capacitor name="C1" capacitance="1uF" schX={2} schY={2} />
+        <capacitor
+          name="C2"
+          schRotation={90}
+          capacitance="1uF"
+          schX={0}
+          schY={-4}
+        />
+        <chip
+          name="U1"
+          pinLabels={{
+            pin1: "D0",
+            pin2: "D1",
+            pin3: "D2",
+            pin4: "GND",
+            pin5: "D3",
+            pin6: "EN",
+            pin7: "D4",
+            pin8: "VCC",
+          }}
+          footprint="soic8"
+          schX={0}
+          schY={-1.5}
+        />
+
+        <trace from=".R1 .pin2" to=".C1 .pin1" />
+        <trace from=".C1 .pin2" to=".U1 .pin4" />
+        <trace from=".U1 .pin8" to=".C2 .pin1" />
+        <trace from=".C2 .pin2" to=".R1 .pin1" />
+        <trace from=".U1 .pin1" to=".U1 .pin5" />
+      </board>,
+    )}
+    editingEnabled
+    containerStyle={{ height: "100%" }}
+  />
+)

package/examples/example4-reset-edit-events.fixture.tsx

@@ -0,0 +1,55 @@
+import { useState } from "react"
+import { ControlledSchematicViewer } from "lib/components/ControlledSchematicViewer"
+import { renderToCircuitJson } from "lib/dev/render-to-circuit-json"
+import type { ManualEditEvent } from "lib/types/edit-events"
+import { SchematicViewer } from "lib/index"
+
+export default () => {
+  const [editEvents, setEditEvents] = useState<ManualEditEvent[]>([])
+
+  return (
+    <div style={{ position: "relative", height: "100%" }}>
+      <button
+        type="button"
+        onClick={() => setEditEvents([])}
+        style={{
+          position: "absolute",
+          top: "16px",
+          right: "64px",
+          zIndex: 1001,
+          backgroundColor: "#f44336",
+          color: "#fff",
+          padding: "8px",
+          borderRadius: "4px",
+          cursor: "pointer",
+          border: "none",
+          boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+        }}
+      >
+        Reset Edits
+      </button>
+      <SchematicViewer
+        editEvents={editEvents}
+        onEditEvent={(event) => setEditEvents([...editEvents, event])}
+        circuitJson={renderToCircuitJson(
+          <board width="10mm" height="10mm">
+            <resistor name="R1" resistance={1000} schX={-2} />
+            <capacitor name="C1" capacitance="1uF" schX={2} schY={2} />
+            <capacitor
+              name="C2"
+              schRotation={90}
+              capacitance="1uF"
+              schX={0}
+              schY={-4}
+            />
+            <trace from=".R1 .pin2" to=".C1 .pin1" />
+            <trace from=".C1 .pin2" to=".C2 .pin1" />
+          </board>,
+        )}
+        containerStyle={{ height: "100%" }}
+        debugGrid
+        editingEnabled
+      />
+    </div>
+  )
+}

package/lib/components/ControlledSchematicViewer.tsx

@@ -0,0 +1,29 @@
+import { useState } from "react"
+import { SchematicViewer } from "./SchematicViewer"
+import type { ManualEditEvent } from "@tscircuit/props"
+import type { CircuitJson } from "circuit-json"
+
+export const ControlledSchematicViewer = ({
+  circuitJson,
+  containerStyle,
+  debugGrid = false,
+  editingEnabled = false,
+}: {
+  circuitJson: CircuitJson
+  containerStyle?: React.CSSProperties
+  debugGrid?: boolean
+  editingEnabled?: boolean
+}) => {
+  const [editEvents, setEditEvents] = useState<ManualEditEvent[]>([])
+
+  return (
+    <SchematicViewer
+      circuitJson={circuitJson}
+      editEvents={editEvents}
+      onEditEvent={(event) => setEditEvents([...editEvents, event])}
+      containerStyle={containerStyle}
+      debugGrid={debugGrid}
+      editingEnabled={editingEnabled}
+    />
+  )
+}

package/lib/components/EditIcon.tsx

@@ -0,0 +1,37 @@
+export const EditIcon = ({
+  onClick,
+  active,
+}: { onClick: () => void; active: boolean }) => {
+  return (
+    <div
+      onClick={onClick}
+      style={{
+        position: "absolute",
+        top: "16px",
+        right: "16px",
+        backgroundColor: active ? "#4CAF50" : "#fff",
+        color: active ? "#fff" : "#000",
+        padding: "8px",
+        borderRadius: "4px",
+        cursor: "pointer",
+        boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+        display: "flex",
+        alignItems: "center",
+        gap: "4px",
+        zIndex: 1000,
+      }}
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+      >
+        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+      </svg>
+    </div>
+  )
+}

package/lib/components/SchematicViewer.tsx

@@ -1,79 +1,144 @@
 import { useMouseMatrixTransform } from "use-mouse-matrix-transform"
 import { convertCircuitJsonToSchematicSvg } from "circuit-to-svg"
-import { useEffect, useMemo, useRef, useState } from "react"
-import { toString as transformToString } from "transformation-matrix"
+import { useMemo, useRef, useState } from "react"
+import { EditIcon } from "./EditIcon"
+import { useResizeHandling } from "../hooks/use-resize-handling"
+import { useComponentDragging } from "../hooks/useComponentDragging"
+import type { ManualEditEvent } from "../types/edit-events"
+import {
+  identity,
+  fromString,
+  toString as transformToString,
+} from "transformation-matrix"
+import { useChangeSchematicComponentLocationsInSvg } from "lib/hooks/useChangeSchematicComponentLocationsInSvg"
+import { useChangeSchematicTracesForMovedComponents } from "lib/hooks/useChangeSchematicTracesForMovedComponents"
+import type { CircuitJson } from "circuit-json"
 
 interface Props {
-  circuitJson: Array<{ type: string }>
+  circuitJson: CircuitJson
   containerStyle?: React.CSSProperties
+  editEvents?: ManualEditEvent[]
+  onEditEvent?: (event: ManualEditEvent) => void
+  defaultEditMode?: boolean
+  debugGrid?: boolean
+  editingEnabled?: boolean
 }
 
-export const SchematicViewer = ({ circuitJson, containerStyle }: Props) => {
+export const SchematicViewer = ({
+  circuitJson,
+  containerStyle,
+  editEvents = [],
+  onEditEvent,
+  defaultEditMode = false,
+  debugGrid = false,
+  editingEnabled = false,
+}: Props) => {
+  const [editModeEnabled, setEditModeEnabled] = useState(defaultEditMode)
   const svgDivRef = useRef<HTMLDivElement>(null)
-  const { ref: containerRef } = useMouseMatrixTransform({
+
+  const {
+    ref: containerRef,
+    cancelDrag,
+    transform: svgToScreenProjection,
+  } = useMouseMatrixTransform({
     onSetTransform(transform) {
       if (!svgDivRef.current) return
       svgDivRef.current.style.transform = transformToString(transform)
     },
   })
-  const [containerWidth, setContainerWidth] = useState(0)
-  const [containerHeight, setContainerHeight] = useState(0)
-
-  useEffect(() => {
-    if (!containerRef.current) return
-
-    const updateDimensions = () => {
-      const rect = containerRef.current?.getBoundingClientRect()
-
-      setContainerWidth(rect?.width || 0)
-      setContainerHeight(rect?.height || 0)
-    }
-
-    // Set initial dimensions
-    updateDimensions()
-
-    // Add resize listener
-    const resizeObserver = new ResizeObserver(updateDimensions)
-    resizeObserver.observe(containerRef.current)
-
-    // Fallback to window resize
-    window.addEventListener("resize", updateDimensions)
-
-    return () => {
-      resizeObserver.disconnect()
-      window.removeEventListener("resize", updateDimensions)
-    }
-  }, [])
 
-  const svg = useMemo(() => {
+  const { containerWidth, containerHeight } = useResizeHandling(containerRef)
+  const svgString = useMemo(() => {
     if (!containerWidth || !containerHeight) return ""
 
     return convertCircuitJsonToSchematicSvg(circuitJson as any, {
       width: containerWidth,
       height: containerHeight || 720,
+      grid: !debugGrid
+        ? undefined
+        : {
+            cellSize: 1,
+            labelCells: true,
+          },
     })
   }, [circuitJson, containerWidth, containerHeight])
 
+  const realToSvgProjection = useMemo(() => {
+    if (!svgString) return identity()
+    const transformString = svgString.match(
+      /data-real-to-screen-transform="([^"]+)"/,
+    )?.[1]!
+
+    try {
+      return fromString(transformString)
+    } catch (e) {
+      console.error(e)
+      return identity()
+    }
+  }, [svgString])
+
+  const { handleMouseDown, isDragging, activeEditEvent } = useComponentDragging(
+    {
+      onEditEvent,
+      cancelDrag,
+      realToSvgProjection,
+      svgToScreenProjection,
+      circuitJson,
+      editEvents,
+      enabled: editModeEnabled,
+    },
+  )
+
+  useChangeSchematicComponentLocationsInSvg({
+    svgDivRef,
+    editEvents,
+    realToSvgProjection,
+    svgToScreenProjection,
+    activeEditEvent,
+  })
+
+  useChangeSchematicTracesForMovedComponents({
+    svgDivRef,
+    circuitJson,
+    activeEditEvent,
+    editEvents,
+  })
+
+  const svgDiv = useMemo(
+    () => (
+      <div
+        ref={svgDivRef}
+        style={{
+          pointerEvents: "auto",
+          transformOrigin: "0 0",
+        }}
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
+        dangerouslySetInnerHTML={{ __html: svgString }}
+      />
+    ),
+    [svgString],
+  )
+
   return (
     <div
       ref={containerRef}
       style={{
+        position: "relative",
         backgroundColor: "#F5F1ED",
         overflow: "hidden",
-        cursor: "grab",
+        cursor: isDragging ? "grabbing" : "grab",
         minHeight: "300px",
         ...containerStyle,
       }}
+      onMouseDown={handleMouseDown}
     >
-      <div
-        ref={svgDivRef}
-        style={{
-          pointerEvents: "auto",
-          transformOrigin: "0 0",
-        }}
-        // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
-        dangerouslySetInnerHTML={{ __html: svg }}
-      />
+      {editingEnabled && (
+        <EditIcon
+          active={editModeEnabled}
+          onClick={() => setEditModeEnabled(!editModeEnabled)}
+        />
+      )}
+      {svgDiv}
     </div>
   )
 }

package/lib/hooks/use-resize-handling.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react"
+
+export const useResizeHandling = (
+  containerRef: React.RefObject<HTMLElement>,
+) => {
+  const [containerWidth, setContainerWidth] = useState(0)
+  const [containerHeight, setContainerHeight] = useState(0)
+
+  useEffect(() => {
+    if (!containerRef.current) return
+
+    const updateDimensions = () => {
+      const rect = containerRef.current?.getBoundingClientRect()
+      setContainerWidth(rect?.width || 0)
+      setContainerHeight(rect?.height || 0)
+    }
+
+    // Set initial dimensions
+    updateDimensions()
+
+    // Add resize listener
+    const resizeObserver = new ResizeObserver(updateDimensions)
+    resizeObserver.observe(containerRef.current)
+
+    // Fallback to window resize
+    window.addEventListener("resize", updateDimensions)
+
+    return () => {
+      resizeObserver.disconnect()
+      window.removeEventListener("resize", updateDimensions)
+    }
+  }, [])
+
+  return { containerWidth, containerHeight }
+}