@tscircuit/schematic-viewer 1.4.3 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (98) hide show
  1. package/.github/workflows/bun-pver-release.yml +24 -0
  2. package/.github/workflows/{npm-typecheck.yml → bun-typecheck.yml} +6 -6
  3. package/LICENSE +21 -0
  4. package/README.md +16 -26
  5. package/biome.json +8 -1
  6. package/bun.lockb +0 -0
  7. package/cosmos.config.json +3 -0
  8. package/cosmos.decorator.tsx +3 -0
  9. package/examples/resistor-and-capacitor.fixture.tsx +14 -0
  10. package/index.html +12 -0
  11. package/lib/components/SchematicViewer.tsx +79 -0
  12. package/lib/dev/render-to-circuit-json.ts +7 -0
  13. package/lib/index.ts +1 -0
  14. package/package.json +27 -74
  15. package/src/main.tsx +20 -0
  16. package/test.ts +0 -0
  17. package/tsconfig.json +28 -25
  18. package/vite.config.js +12 -4
  19. package/.codesandbox/tasks.json +0 -36
  20. package/.github/workflows/chromatic.yml +0 -30
  21. package/.github/workflows/npm-build.yml +0 -26
  22. package/.github/workflows/release.yml +0 -29
  23. package/.prettierrc +0 -1
  24. package/.storybook/main.ts +0 -12
  25. package/.storybook/preview.ts +0 -17
  26. package/ava.config.js +0 -7
  27. package/dist/index.css +0 -7
  28. package/dist/index.css.map +0 -1
  29. package/dist/index.d.ts +0 -15
  30. package/dist/index.js +0 -2502
  31. package/dist/index.js.map +0 -1
  32. package/next-env.d.ts +0 -5
  33. package/parsel.d.ts +0 -81
  34. package/release.config.js +0 -15
  35. package/renovate.json +0 -17
  36. package/src/Schematic.tsx +0 -250
  37. package/src/index.ts +0 -1
  38. package/src/lib/hooks/index.ts +0 -1
  39. package/src/lib/hooks/use-maybe-promise.ts +0 -14
  40. package/src/lib/render-context/index.ts +0 -28
  41. package/src/lib/types/core.ts +0 -181
  42. package/src/lib/types/index.ts +0 -4
  43. package/src/lib/types/route-solver.ts +0 -10
  44. package/src/lib/types/source-component.ts +0 -73
  45. package/src/lib/types/util.ts +0 -52
  46. package/src/lib/utils/collect-element-refs.ts +0 -45
  47. package/src/lib/utils/colors.ts +0 -235
  48. package/src/lib/utils/direction-to-vec.ts +0 -50
  49. package/src/lib/utils/get-rotation-from-anchor-side.ts +0 -11
  50. package/src/lib/utils/get-svg-path-bounds.ts +0 -22
  51. package/src/lib/utils/get-vec-from-anchor-side.ts +0 -11
  52. package/src/lib/utils/point-math.ts +0 -26
  53. package/src/pages/_app.tsx +0 -23
  54. package/src/pages/index.tsx +0 -10
  55. package/src/pages/led-circuit-react.tsx +0 -54
  56. package/src/pages/style.css +0 -5
  57. package/src/schematic-components/ContextProviders.tsx +0 -15
  58. package/src/schematic-components/DebugPoint.tsx +0 -25
  59. package/src/schematic-components/RenderError.tsx +0 -23
  60. package/src/schematic-components/SVGPathComponent.tsx +0 -183
  61. package/src/schematic-components/SVGPathComponent2.tsx +0 -76
  62. package/src/schematic-components/SchematicChip.tsx +0 -202
  63. package/src/schematic-components/SchematicComponent.tsx +0 -51
  64. package/src/schematic-components/SchematicComponentFromSymbol.tsx +0 -46
  65. package/src/schematic-components/SchematicElement.tsx +0 -43
  66. package/src/schematic-components/SchematicGroup.tsx +0 -3
  67. package/src/schematic-components/SchematicNetLabel.tsx +0 -63
  68. package/src/schematic-components/SchematicText.tsx +0 -44
  69. package/src/schematic-components/SchematicTrace.tsx +0 -51
  70. package/src/schematic-components/TableViewer.tsx +0 -13
  71. package/src/schematic-components/index.tsx +0 -9
  72. package/src/stories/basics/schematic-net-label.stories.tsx +0 -138
  73. package/src/stories/basics/schematic-net-labels-2.stories.tsx +0 -35
  74. package/src/stories/bug-connections.stories.tsx +0 -31
  75. package/src/stories/bug-high-port-numbers.stories.tsx +0 -130
  76. package/src/stories/bug-one-sided.stories.tsx +0 -34
  77. package/src/stories/bug-pin-spacing.stories.tsx +0 -52
  78. package/src/stories/bugs/bug1-y-flip.stories.tsx +0 -20
  79. package/src/stories/bugs/bug2-component-bounds.stories.tsx +0 -62
  80. package/src/stories/bugs/bug3-scaling-trace.stories.tsx +0 -24
  81. package/src/stories/bugs/bug4-schematic-line.stories.tsx +0 -17
  82. package/src/stories/bugs/bug5-diode.stories.tsx +0 -16
  83. package/src/stories/bugs/bug6-trace-scaling.stories.tsx +0 -18
  84. package/src/stories/bugs/bug7-multiple-schematic-panning.stories.tsx +0 -23
  85. package/src/stories/bugs/bug8-autolayout.stories.tsx +0 -43
  86. package/src/stories/circuit-components/diode.stories.tsx +0 -16
  87. package/src/stories/circuit-components/netalias.stories.tsx +0 -14
  88. package/src/stories/circuit-components/resistor.stories.tsx +0 -16
  89. package/src/stories/component-drawing-example.stories.tsx +0 -17
  90. package/src/stories/led-circuit-react.stories.tsx +0 -48
  91. package/src/stories/net-alias.stories.tsx +0 -92
  92. package/src/stories/off-center-render.stories.tsx +0 -29
  93. package/src/stories/rotated-resistor.stories.tsx +0 -23
  94. package/src/stories/schematic-path.stories.tsx +0 -40
  95. package/src/stories/three-sided-bug.stories.tsx +0 -30
  96. package/tsconfig.tsbuildinfo +0 -1
  97. package/tsup.config.ts +0 -8
  98. package/vercel.json +0 -3
@@ -1,18 +0,0 @@
1
- import { Schematic } from "../../Schematic"
2
-
3
- export const Bug6TraceScaling = () => {
4
- return (
5
- <Schematic style={{ height: 500 }}>
6
- <board width={10} height={10}>
7
- <resistor name="R1" resistance="10 ohm" schX={2} schY={1} />
8
- <resistor resistance="1k" schX={1} schY={2} name="main_power" />
9
- <trace path={[".main_power > port.right", ".R1 > port.left"]} />
10
- </board>
11
- </Schematic>
12
- )
13
- }
14
-
15
- export default {
16
- title: "Bugs/Bug6TraceScaling",
17
- component: Bug6TraceScaling,
18
- }
@@ -1,23 +0,0 @@
1
- import { Schematic } from "../../Schematic"
2
-
3
- export const Bug7MultipleSchematicPanning = () => {
4
- return (
5
- <div>
6
- <Schematic style={{ height: 500 }}>
7
- <resistor name="R1" resistance="10 ohm" schX={2} schY={1} />
8
- <resistor resistance="1k" schX={1} schY={2} name="main_power" />
9
- <trace path={[".main_power > port.right", ".R1 > port.left"]} />
10
- </Schematic>
11
- <Schematic style={{ height: 500 }}>
12
- <resistor name="R1" resistance="10 ohm" schX={2} schY={1} />
13
- <resistor resistance="1k" schX={1} schY={2} name="main_power" />
14
- <trace path={[".main_power > port.right", ".R1 > port.left"]} />
15
- </Schematic>
16
- </div>
17
- )
18
- }
19
-
20
- export default {
21
- title: "Bugs/Bug7MultipleSchematicPanning",
22
- component: Bug7MultipleSchematicPanning,
23
- }
@@ -1,43 +0,0 @@
1
- import { layout } from "@tscircuit/layout"
2
- import { Schematic } from "../../Schematic"
3
-
4
- export const Bug8Autolayout = () => {
5
- return (
6
- <div>
7
- <Schematic style={{ height: 500 }}>
8
- <board
9
- layout={layout().autoLayoutSchematic()}
10
- pcbX={0}
11
- pcbY={0}
12
- width={"10mm"}
13
- height={"10mm"}
14
- >
15
- <bug
16
- name="U1"
17
- schX={0}
18
- schY={0}
19
- schPortArrangement={{
20
- leftSize: 3,
21
- topSize: 0,
22
- bottomSize: 0,
23
- rightSize: 3,
24
- }}
25
- />
26
- <resistor name="R1" resistance="10k" schX={0} schY={1} />
27
- <resistor name="R2" resistance="1k" schX={0} schY={3} />
28
- <resistor name="R3" resistance="5k" schX={2} schY={1} />
29
- <capacitor name="C1" capacitance="1uF" schX={2} schY={3} />
30
- <trace path={[".R1 > port.right", ".R2 > port.left"]} />
31
- <trace path={[".R2 > port.right", ".R3 > port.left"]} />
32
- <trace path={[".R3 > port.right", ".C1 > port.left"]} />
33
- <trace path={[".C1 > port.right", ".R1 > port.left"]} />
34
- </board>
35
- </Schematic>
36
- </div>
37
- )
38
- }
39
-
40
- export default {
41
- title: "Bugs/Bug8Autolayout",
42
- component: Bug8Autolayout,
43
- }
@@ -1,16 +0,0 @@
1
- import { Schematic } from "../../Schematic"
2
-
3
- export const Diode = () => {
4
- return (
5
- <Schematic style={{ height: 500 }}>
6
- <board width={10} height={10}>
7
- <diode name="D1" schX={2} schY={1} />
8
- </board>
9
- </Schematic>
10
- )
11
- }
12
-
13
- export default {
14
- title: "Circuit Components/Diode",
15
- component: Diode,
16
- }
@@ -1,14 +0,0 @@
1
- import { Schematic } from "../../Schematic"
2
-
3
- export const NetAlias = () => {
4
- return (
5
- <Schematic style={{ height: 500 }}>
6
- <netalias net="GND" />
7
- </Schematic>
8
- )
9
- }
10
-
11
- export default {
12
- title: "Circuit Components/NetAlias",
13
- component: NetAlias,
14
- }
@@ -1,16 +0,0 @@
1
- import { Schematic } from "../../Schematic"
2
-
3
- export const Resistor = () => {
4
- return (
5
- <Schematic style={{ height: 500 }}>
6
- <board width={10} height={10}>
7
- <resistor name="R1" resistance="10 ohm" schX={2} schY={1} />
8
- </board>
9
- </Schematic>
10
- )
11
- }
12
-
13
- export default {
14
- title: "Circuit Components/Resistor",
15
- component: Resistor,
16
- }
@@ -1,17 +0,0 @@
1
- import { Schematic } from "Schematic"
2
-
3
- export const ComponentDrawingExample = () => {
4
- return (
5
- <Schematic style={{ height: 600 }}>
6
- <component name={"C1"}>
7
- <schematicbox schX={0} schY={0} width="6mm" height="6mm" />
8
- <schematicline x1={0} y1={0} x2={1} y2={1} />
9
- </component>
10
- </Schematic>
11
- )
12
- }
13
-
14
- export default {
15
- title: "ComponentDrawingExample",
16
- component: ComponentDrawingExample,
17
- }
@@ -1,48 +0,0 @@
1
- import { Schematic } from "../Schematic"
2
-
3
- export const LEDCircuitReact = () => {
4
- return (
5
- <Schematic style={{ height: 500 }}>
6
- <group>
7
- <resistor name="R1" resistance="10 ohm" schX={2} schY={1} />
8
- <capacitor
9
- name="C1"
10
- capacitance="10 uF"
11
- schX={4}
12
- schY={2}
13
- symbolName="capacitor_vert"
14
- />
15
- <resistor name="R2" resistance="10 ohm" schX={6} schY={1} />
16
- <trace path={[".R1 > port.right", ".C1 > port.left"]} />
17
- <trace path={[".C1 > port.right", ".R2 > port.left"]} />
18
- <powersource voltage={5} schX={1} schY={2} name="main_power" />
19
- <trace path={[".main_power > port.positive", ".R1 > port.left"]} />
20
- <trace path={[".main_power > port.negative", ".C1 > port.right"]} />
21
- <trace path={[".C1 > port.right", ".R2 > port.right"]} />
22
- <bug
23
- name="B1"
24
- schPortArrangement={{
25
- leftSide: { pins: [3, 2, 1], direction: "top-to-bottom" },
26
- rightSide: { pins: [6, 5, 4], direction: "top-to-bottom" },
27
- }}
28
- // schWidth={4}
29
- schX={8}
30
- schY={3}
31
- pinLabels={{
32
- 1: "PWR",
33
- 2: "NC",
34
- 3: "RG",
35
- 4: "D0",
36
- 5: "D1",
37
- 6: "GND",
38
- }}
39
- />
40
- </group>
41
- </Schematic>
42
- )
43
- }
44
-
45
- export default {
46
- title: "LEDCircuitReact",
47
- component: LEDCircuitReact,
48
- }
@@ -1,92 +0,0 @@
1
- import { Schematic } from "../Schematic"
2
-
3
- const soup = [
4
- {
5
- type: "source_component",
6
- source_component_id: "net_alias_0",
7
- ftype: "net_alias",
8
- source: {
9
- type: "source_component",
10
- source_component_id: "net_alias_0",
11
- ftype: "net_alias",
12
- },
13
- },
14
- {
15
- type: "schematic_component",
16
- schematic_component_id: "schematic_net_alias_component_0",
17
- source_component_id: "net_alias_0",
18
- center: {
19
- x: 2,
20
- y: 2,
21
- },
22
- rotation: 0,
23
- size: {
24
- width: 0,
25
- height: 0,
26
- },
27
- source: {
28
- type: "source_component",
29
- source_component_id: "net_alias_0",
30
- ftype: "net_alias",
31
- },
32
- },
33
- {
34
- type: "source_port",
35
- name: "gnd",
36
- source_port_id: "source_port_0",
37
- },
38
- {
39
- type: "schematic_port",
40
- schematic_port_id: "schematic_port_0",
41
- source_port_id: "source_port_0",
42
- center: {
43
- x: 2,
44
- y: 2,
45
- },
46
- source: {
47
- type: "source_port",
48
- name: "gnd",
49
- source_port_id: "source_port_0",
50
- },
51
- },
52
- {
53
- drawing_type: "line",
54
- type: "schematic_line",
55
- x1: 0,
56
- y1: 1,
57
- x2: 4,
58
- y2: 1,
59
- schematic_component_id: "schematic_net_alias_component_0",
60
- source: null,
61
- },
62
- {
63
- drawing_type: "line",
64
- type: "schematic_line",
65
- x1: 2,
66
- y1: 1,
67
- x2: 2,
68
- y2: 2,
69
- schematic_component_id: "schematic_net_alias_component_0",
70
- source: null,
71
- },
72
- {
73
- anchor: "center",
74
- type: "schematic_text",
75
- position: {
76
- x: 2,
77
- y: 0.75,
78
- },
79
- text: "gnd",
80
- schematic_component_id: "schematic_net_alias_component_0",
81
- source: null,
82
- },
83
- ]
84
-
85
- export const NetAliasSoup = () => {
86
- return <Schematic style={{ height: 500 }} soup={soup as any} />
87
- }
88
-
89
- export default {
90
- title: "NetAliasSoup",
91
- component: NetAliasSoup,
92
- }
@@ -1,29 +0,0 @@
1
- import { Schematic } from "Schematic"
2
-
3
- export const OffCenterRendering = () => {
4
- return (
5
- <>
6
- <div style={{ height: 600 }}>scroll down</div>
7
- <Schematic style={{ height: 600 }}>
8
- <bug
9
- name="B1"
10
- schPortArrangement={{
11
- leftSide: { pins: [3, 2, 1], direction: "top-to-bottom" },
12
- rightSide: { pins: [6, 5, 4], direction: "top-to-bottom" },
13
- }}
14
- schX={8}
15
- schY={3}
16
- pinLabels={{
17
- "1": "D0",
18
- "2": "D1",
19
- }}
20
- />
21
- </Schematic>
22
- </>
23
- )
24
- }
25
-
26
- export default {
27
- title: "OffCenterRendering",
28
- component: OffCenterRendering,
29
- }
@@ -1,23 +0,0 @@
1
- import { Schematic } from "../Schematic"
2
-
3
- export const RotatedResistor = () => {
4
- return (
5
- <Schematic style={{ height: 500 }}>
6
- <board width={10} height={10}>
7
- <resistor
8
- name="R1"
9
- resistance="10 ohm"
10
- schX={2}
11
- schY={1}
12
- schRotation="90deg"
13
- pcbRotation="90deg"
14
- />
15
- </board>
16
- </Schematic>
17
- )
18
- }
19
-
20
- export default {
21
- title: "RotatedResistor",
22
- component: RotatedResistor,
23
- }
@@ -1,40 +0,0 @@
1
- import { AnyElement } from "lib/types"
2
- import { Schematic } from "../Schematic"
3
-
4
- const soup: AnyElement[] = [
5
- {
6
- type: "source_component",
7
- source_component_id: "source_component_1",
8
- name: "my source component",
9
- },
10
- {
11
- type: "schematic_component",
12
- schematic_component_id: "schematic_component_1",
13
- center: { x: 0, y: 0 },
14
- rotation: 0,
15
- size: { width: 1, height: 1 },
16
- source_component_id: "source_component_1",
17
- },
18
- {
19
- type: "schematic_path",
20
- drawing_type: "path",
21
- is_filled: true,
22
- is_closed: true,
23
- fill_color: "red",
24
- points: [
25
- { x: 0, y: 0 },
26
- { x: 1, y: 1 },
27
- { x: 0, y: 1 },
28
- ],
29
- schematic_component_id: "schematic_component_1",
30
- },
31
- ]
32
-
33
- export const SchematicPathSoup = () => {
34
- return <Schematic style={{ height: 500 }} soup={soup as any} />
35
- }
36
-
37
- export default {
38
- title: "SchematicPathSoup",
39
- component: SchematicPathSoup,
40
- }
@@ -1,30 +0,0 @@
1
- import { Schematic } from "Schematic"
2
-
3
- export const ThreeSidedBug = () => {
4
- return (
5
- <Schematic style={{ height: 600 }}>
6
- <board width={10} height={10}>
7
- <bug
8
- name="B1"
9
- schPortArrangement={{
10
- leftSize: 3,
11
- rightSize: 3,
12
- topSize: 0,
13
- bottomSize: 5,
14
- }}
15
- schX={8}
16
- schY={3}
17
- pinLabels={{
18
- "1": "D0",
19
- "2": "D1",
20
- }}
21
- />
22
- </board>
23
- </Schematic>
24
- )
25
- }
26
-
27
- export default {
28
- title: "ThreeSidedBug",
29
- component: ThreeSidedBug,
30
- }