@tscircuit/cli 0.0.83 → 0.0.85

package/dev-server-frontend/src/ExampleContentView.tsx

@@ -7,6 +7,8 @@ import { cn } from "./lib/utils"
 import { ErrorBoundary } from "react-error-boundary"
 import { SoupTableViewer } from "@tscircuit/table-viewer"
 import "react-data-grid/lib/styles.css"
+import { useEffect, useRef, useState } from "react"
+import type { EditEvent } from "@tscircuit/pcb-viewer"
 
 export const ExampleContentView = () => {
   const devExamplePackageId = useGlobalStore(
@@ -34,10 +36,18 @@ export const ExampleContentView = () => {
     }
   )
 
+  const sentEditEvents = useRef<Record<string, boolean>>({})
+
   const notFound = (error as any)?.response?.status === 404
 
   const viewMode = useGlobalStore((s) => s.view_mode)
   const splitMode = useGlobalStore((s) => s.split_mode)
+  // eslint-disable-next-line prefer-const
+  let [editEvents, setEditEvents] = useState<EditEvent[]>([])
+
+  editEvents = editEvents.filter(
+    (ee) => ee.created_at > new Date(pkg?.edit_events_last_applied_at).valueOf()
+  )
 
   const editorHeight = window.innerHeight - 52
   const halfHeight = Math.floor(editorHeight / 2)
@@ -47,7 +57,7 @@ export const ExampleContentView = () => {
 
   return (
     <div
-      key={pkg?.last_updated_at}
+      key={pkg?.soup_last_updated_at}
       className={cn(
         "relative",
         `h-[${editorHeight}px]`,
@@ -60,7 +70,7 @@ export const ExampleContentView = () => {
       {pkg && (viewMode === "schematic" || viewMode === "split") && (
         <ErrorBoundary fallback={<div>Failed to render Schematic</div>}>
           <Schematic
-            key={`sch-${pkg?.last_updated_at}`}
+            key={`sch-${pkg?.soup_last_updated_at}`}
             style={{ height: itemHeight }}
             soup={pkg.tscircuit_soup}
             showTable={false}
@@ -70,8 +80,33 @@ export const ExampleContentView = () => {
       {pkg && (viewMode === "pcb" || viewMode === "split") && (
         <ErrorBoundary fallback={<div>Failed to render PCB</div>}>
           <PCBViewer
-            key={`pcb-${pkg?.last_updated_at}`}
+            key={`pcb-${pkg?.soup_last_updated_at}`}
             height={itemHeight}
+            allowEditing
+            editEvents={editEvents}
+            onEditEventsChanged={(changedEditEvents) => {
+              // Look for any edit events that have not been sent to the server
+              // and send them, then mark them as sent
+              let hasUnsentEditEvents = false
+              for (const editEvent of changedEditEvents) {
+                if (
+                  !editEvent.in_progress &&
+                  !sentEditEvents.current[editEvent.edit_event_id]
+                ) {
+                  hasUnsentEditEvents = true
+                  sentEditEvents.current[editEvent.edit_event_id] = true
+                }
+              }
+              if (hasUnsentEditEvents) {
+                axios.post(`/api/dev_package_examples/update`, {
+                  dev_package_example_id: devExamplePackageId,
+                  completed_edit_events: changedEditEvents.filter(
+                    (ee) => ee.in_progress === false
+                  ),
+                })
+              }
+              setEditEvents(changedEditEvents)
+            }}
             soup={pkg.tscircuit_soup}
           />
         </ErrorBoundary>
@@ -79,7 +114,7 @@ export const ExampleContentView = () => {
       {pkg && viewMode === "soup" && (
         <ErrorBoundary fallback={<div>Failed to render Soup</div>}>
           <SoupTableViewer
-            key={`soup-${pkg?.last_updated_at}`}
+            key={`soup-${pkg?.soup_last_updated_at}`}
             height={itemHeight}
             elements={pkg.tscircuit_soup}
             appearance="dark"

package/dev-server-frontend/src/HeaderMenu.tsx

@@ -64,7 +64,7 @@ export const HeaderMenu = () => {
       <Menubar className="border-none shadow-none">
         <MenubarMenu>
           <MenubarTrigger>File</MenubarTrigger>
-          <MenubarContent>
+          <MenubarContent className="z-[200]">
             <MenubarItem disabled>seveibar/arduino@1.0.0</MenubarItem>
             <MenubarSeparator />
             <MenubarItem
@@ -110,7 +110,7 @@ export const HeaderMenu = () => {
         </MenubarMenu>
         <MenubarMenu>
           <MenubarTrigger>View</MenubarTrigger>
-          <MenubarContent>
+          <MenubarContent className="z-[200]">
             <MenubarRadioGroup
               value={viewMode}
               onValueChange={(v) => setViewMode(v as any)}
@@ -149,7 +149,7 @@ export const HeaderMenu = () => {
         </MenubarMenu>
         <MenubarMenu>
           <MenubarTrigger>Package</MenubarTrigger>
-          <MenubarContent>
+          <MenubarContent className="z-[200]">
             <MenubarItem disabled>seveibar/arduino@1.0.0</MenubarItem>
             <MenubarSeparator />
             <MenubarCheckboxItem
@@ -187,7 +187,7 @@ export const HeaderMenu = () => {
         </MenubarMenu>
         <MenubarMenu>
           <MenubarTrigger>About</MenubarTrigger>
-          <MenubarContent>
+          <MenubarContent className="z-[200]">
             <MenubarItem
               onSelect={() => {
                 window.open("https://github.com/tscircuit/tscircuit", "_blank")