@tscircuit/schematic-viewer 0.0.6 → 0.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/schematic-viewer",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "main": "dist/index.js",
   "license": "MIT",
   "scripts": {
@@ -35,6 +35,7 @@
     "framer-motion": "^6",
     "next": "^12.2.3",
     "parse-svg-path": "^0.1.2",
+    "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-no-ssr": "^1.1.0",
     "react-use-measure": "^2.1.1",
@@ -48,7 +49,9 @@
     "zustand": "^4.0.0"
   },
   "dependencies": {
-    "@tscircuit/builder": "^1.0.11",
-    "@tscircuit/react-fiber": "^0.0.5"
+    "@tscircuit/builder": "^1.0.12",
+    "@tscircuit/react-fiber": "^0.0.5",
+    "react-error-boundary": "^4.0.4",
+    "use-mouse-matrix-transform": "^1.0.2"
   }
 }

package/src/Schematic.tsx

@@ -3,8 +3,25 @@ import { ProjectComponent } from "schematic-components"
 import {
   createProjectBuilder,
   createProjectFromElements,
+  transformSchematicElement,
 } from "@tscircuit/builder"
 import { createRoot } from "@tscircuit/react-fiber"
+import { SchematicElement } from "schematic-components/SchematicElement"
+import { collectElementRefs } from "lib/utils/collect-element-refs"
+import { useMouseMatrixTransform } from "use-mouse-matrix-transform"
+import { ErrorBoundary } from "react-error-boundary"
+import { identity, compose, scale } from "transformation-matrix"
+import { useRenderContext } from "lib/render-context"
+
+const fallbackRender =
+  (elm) =>
+  ({ error, resetErrorBoundary }: any) => {
+    return (
+      <div style={{ color: "red" }}>
+        error rendering {elm.type}: {error.toString()}
+      </div>
+    )
+  }
 
 export const Schematic = ({
   children,
@@ -15,6 +32,11 @@ export const Schematic = ({
 }) => {
   const [elements, setElements] = useState<any>(initialElements)
   const [project, setProject] = useState<any>(null)
+  const setCameraTransform = useRenderContext((s) => s.setCameraTransform)
+  const { ref } = useMouseMatrixTransform({
+    onSetTransform: (transform) => setCameraTransform(transform),
+    initialTransform: compose(scale(100, 100, 0, 0)),
+  })
 
   useEffect(() => {
     if (initialElements.length > 0) {
@@ -36,5 +58,17 @@ export const Schematic = ({
 
   if (elements.length === 0) return null
 
-  return <ProjectComponent project={project} />
+  return (
+    <div ref={ref}>
+      {elements.map((elm) => (
+        <ErrorBoundary fallbackRender={fallbackRender(elm)}>
+          <SchematicElement
+            element={elm}
+            allElements={elements}
+            key={JSON.stringify(elm)}
+          />
+        </ErrorBoundary>
+      ))}
+    </div>
+  )
 }

package/src/lib/render-context/index.ts

@@ -3,13 +3,14 @@ import { Matrix, compose, scale } from "transformation-matrix"
 
 interface RenderContextState {
   camera_transform: Matrix
+  setCameraTransform: (transform: Matrix) => void
 }
 
-export const useRenderContext = createStore<RenderContextState>()(
-  (set, get) => ({
-    camera_transform: compose(scale(100, 100, 0, 0)),
-  })
-)
+export const useRenderContext = createStore<RenderContextState>((set, get) => ({
+  camera_transform: compose(scale(100, 100, 0, 0)),
+  setCameraTransform: (transform: Matrix) =>
+    set({ camera_transform: transform }),
+}))
 
 export const useCameraTransform = () =>
   useRenderContext((s) => s.camera_transform)

package/src/lib/utils/collect-element-refs.ts

@@ -0,0 +1,20 @@
+import { AnyElement } from "@tscircuit/builder"
+
+export const collectElementRefs = (elm: AnyElement, allElms: AnyElement[]) => {
+  const source_component = allElms.find(
+    (e) =>
+      e.type === "source_component" &&
+      e.source_component_id === (elm as any).source_component_id
+  )
+  if (
+    ["schematic_component", "schematic_trace", "schematic_port"].includes(
+      elm.type
+    )
+  ) {
+    return {
+      schematic: elm,
+      source: source_component,
+    }
+  }
+  return null
+}

package/src/schematic-components/ProjectComponent.tsx

@@ -7,6 +7,10 @@ interface Props {
   project: Types.Project | Promise<Types.Project>
 }
 
+/**
+ * @deprecated use SchematicElement instead because we're most likely
+ * deprecating projects
+ */
 export const ProjectComponent = ({ project: $project }: Props) => {
   const project = useMaybePromise($project)
 

package/src/schematic-components/SchematicElement.tsx

@@ -0,0 +1,45 @@
+import { AnyElement } from "@tscircuit/builder"
+import { collectElementRefs } from "lib/utils/collect-element-refs"
+import SchematicComponent from "./SchematicComponent"
+import SchematicPort from "./SchematicPort"
+import SchematicText from "./SchematicText"
+import SchematicTrace from "./SchematicTrace"
+
+/**
+ * Render any @tsbuilder/builder AnyElement that can be put on a schematic.
+ */
+export const SchematicElement = ({
+  element,
+  allElements,
+}: {
+  element: AnyElement
+  allElements: AnyElement[]
+}) => {
+  // A lot of the split logic for element types into a project is here:
+  // https://github.com/tscircuit/builder/blob/7e7bef9c0aadd11999795003b8986f0d244c111f/src/lib/project/create-project-from-elements.ts#L13
+  if (element.type === "schematic_component") {
+    return (
+      <SchematicComponent
+        component={collectElementRefs(element, allElements) as any}
+      />
+    )
+  }
+
+  if (element.type === "schematic_trace") {
+    return (
+      <SchematicTrace trace={collectElementRefs(element, allElements) as any} />
+    )
+  }
+
+  if (element.type === "schematic_port") {
+    return (
+      <SchematicPort port={collectElementRefs(element, allElements) as any} />
+    )
+  }
+
+  if (element.type === "schematic_text") {
+    return <SchematicText schematic_text={element} />
+  }
+
+  return null
+}

package/tsconfig.json

@@ -17,7 +17,7 @@
     "baseUrl": "./src",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "incremental": false
   },
   "include": [