Integrate sketch mode debug (#186)

integrate sketch mode debug

src/App.tsx

@@ -1,5 +1,6 @@
 import { useRef, useEffect, useMemo } from 'react'
 import { Allotment } from 'allotment'
+import { DebugPanel } from './components/DebugPanel'
 import { asyncLexer } from './lang/tokeniser'
 import { abstractSyntaxTree } from './lang/abstractSyntaxTree'
 import { _executor, ExtrudeGroup, SketchGroup } from './lang/executor'
@@ -50,6 +51,7 @@ export function App() {
     isStreamReady,
     token,
     formatCode,
+    debugPanel,
   } = useStore((s) => ({
     editorView: s.editorView,
     setEditorView: s.setEditorView,
@@ -77,6 +79,7 @@ export function App() {
     setIsStreamReady: s.setIsStreamReady,
     token: s.token,
     formatCode: s.formatCode,
+    debugPanel: s.debugPanel,
   }))
   // const onChange = React.useCallback((value: string, viewUpdate: ViewUpdate) => {
   const onChange = (value: string, viewUpdate: ViewUpdate) => {
@@ -291,6 +294,7 @@ export function App() {
         <Allotment vertical defaultSizes={[40, 400]} minSize={20}>
           <Stream />
         </Allotment>
+        {debugPanel && <DebugPanel />}
       </Allotment>
     </div>
   )

src/components/DebugPanel.tsx

@@ -0,0 +1,118 @@
+import { PanelHeader } from '../components/PanelHeader'
+import { useStore } from '../useStore'
+import { v4 as uuidv4 } from 'uuid'
+import { EngineCommand } from '../lang/std/engineConnection'
+import { useState } from 'react'
+import { ActionButton } from '../components/ActionButton'
+import { faCheck } from '@fortawesome/free-solid-svg-icons'
+
+type SketchModeCmd = EngineCommand['cmd']['DefaultCameraEnableSketchMode']
+
+export const DebugPanel = () => {
+  const { engineCommandManager } = useStore((s) => ({
+    engineCommandManager: s.engineCommandManager,
+  }))
+  const [sketchModeCmd, setSketchModeCmd] = useState<SketchModeCmd>({
+    origin: { x: 0, y: 0, z: 0 },
+    x_axis: { x: 1, y: 0, z: 0 },
+    y_axis: { x: 0, y: 1, z: 0 },
+    distance_to_plane: 100,
+    ortho: true,
+  })
+  if (!sketchModeCmd) return null
+  return (
+    <div>
+      <PanelHeader title="Debug" />
+      <Xyz onChange={setSketchModeCmd} pointKey="origin" data={sketchModeCmd} />
+      <Xyz onChange={setSketchModeCmd} pointKey="x_axis" data={sketchModeCmd} />
+      <Xyz onChange={setSketchModeCmd} pointKey="y_axis" data={sketchModeCmd} />
+      <div className="flex">
+        <div className="pr-4">distance_to_plane</div>
+        <input
+          className="w-16"
+          type="number"
+          value={sketchModeCmd.distance_to_plane}
+          onChange={({ target }) => {
+            setSketchModeCmd({
+              ...sketchModeCmd,
+              distance_to_plane: Number(target.value),
+            })
+          }}
+        />
+        <div className="pr-4">ortho</div>
+        <input
+          className="w-16"
+          type="checkbox"
+          checked={sketchModeCmd.ortho}
+          onChange={(a) => {
+            console.log(a, (a as any).checked)
+            setSketchModeCmd({
+              ...sketchModeCmd,
+              ortho: a.target.checked,
+            })
+          }}
+        />
+      </div>
+      <ActionButton
+        onClick={() => {
+          engineCommandManager?.sendSceneCommand({
+            type: 'ModelingCmdReq',
+            cmd: {
+              DefaultCameraEnableSketchMode: sketchModeCmd,
+            },
+            cmd_id: uuidv4(),
+            file_id: uuidv4(),
+          })
+        }}
+        className="hover:border-succeed-50"
+        icon={{
+          icon: faCheck,
+          bgClassName:
+            'bg-succeed-80 group-hover:bg-succeed-70 hover:bg-succeed-70',
+          iconClassName:
+            'text-succeed-20 group-hover:text-succeed-10 hover:text-succeed-10',
+        }}
+      >
+        Send sketch mode command
+      </ActionButton>
+    </div>
+  )
+}
+
+const Xyz = ({
+  pointKey,
+  data,
+  onChange,
+}: {
+  pointKey: 'origin' | 'y_axis' | 'x_axis'
+  data: SketchModeCmd
+  onChange: (a: SketchModeCmd) => void
+}) => {
+  if (!data) return null
+  return (
+    <div className="flex">
+      <div className="pr-4">{pointKey}</div>
+      {Object.entries(data[pointKey]).map(([axis, val]) => {
+        return (
+          <div key={axis} className="flex">
+            <div className="w-4">{axis}</div>
+            <input
+              className="w-16"
+              type="number"
+              value={val}
+              onChange={({ target }) => {
+                onChange({
+                  ...data,
+                  [pointKey]: {
+                    ...data[pointKey],
+                    [axis]: Number(target.value),
+                  },
+                })
+              }}
+            />
+          </div>
+        )
+      })}
+    </div>
+  )
+}

src/lang/std/engineConnection.ts

@@ -47,7 +47,7 @@ interface XYZ {
   y: number
   z: number
 }
-interface EngineCommand {
+export interface EngineCommand {
   type: 'ModelingCmdReq'
   cmd: {
     StartPath?: {}
@@ -74,6 +74,13 @@ interface EngineCommand {
     CameraDragMove?: MouseDrag
     CameraDragStart?: MouseStuff
     CameraDragEnd?: MouseStuff
+    DefaultCameraEnableSketchMode?: {
+      origin: XYZ
+      x_axis: XYZ
+      y_axis: XYZ
+      distance_to_plane: number
+      ortho: boolean
+    }
   }
   cmd_id: uuid
   file_id: uuid

src/routes/Settings.tsx

@@ -12,16 +12,21 @@ export const Settings = () => {
     setDefaultDir: saveDefaultDir,
     defaultProjectName: originalDefaultProjectName,
     setDefaultProjectName: saveDefaultProjectName,
+    saveDebugPanel,
+    originalDebugPanel,
   } = useStore((s) => ({
     defaultDir: s.defaultDir,
     setDefaultDir: s.setDefaultDir,
     defaultProjectName: s.defaultProjectName,
     setDefaultProjectName: s.setDefaultProjectName,
+    saveDebugPanel: s.setDebugPanel,
+    originalDebugPanel: s.debugPanel,
   }))
   const [defaultDir, setDefaultDir] = useState(originalDefaultDir)
   const [defaultProjectName, setDefaultProjectName] = useState(
     originalDefaultProjectName
   )
+  const [debugPanel, setDebugPanel] = useState(originalDebugPanel)
 
   async function handleDirectorySelection() {
     const newDirectory = await open({
@@ -38,6 +43,7 @@ export const Settings = () => {
   const handleSaveClick = () => {
     saveDefaultDir(defaultDir)
     saveDefaultProjectName(defaultProjectName)
+    saveDebugPanel(debugPanel)
     toast.success('Settings saved!')
   }
 
@@ -103,6 +109,16 @@ export const Settings = () => {
             onChange={(e) => setDefaultProjectName(e.target.value)}
           />
         </SettingsSection>
+        <SettingsSection
+          title="Debug Panel"
+          description="Show the debug panel in the editor"
+        >
+          <input
+            type="checkbox"
+            checked={debugPanel}
+            onChange={(e) => setDebugPanel(e.target.checked)}
+          />
+        </SettingsSection>
         <ActionButton
           className="hover:border-succeed-50"
           onClick={handleSaveClick}

src/useStore.ts

@@ -16,11 +16,6 @@ import { asyncLexer } from './lang/tokeniser'
 import { EditorSelection } from '@codemirror/state'
 import { BaseDirectory } from '@tauri-apps/api/fs'
 import { ArtifactMap, SourceRangeMap, EngineCommandManager } from './lang/std/engineConnection'
-// import {
-//   ArtifactMap,
-//   SourceRangeMap,
-//   EngineCommandManager,
-// } from './lang/std/engineConnection'
 
 export type Selection = {
   type: 'default' | 'line-end' | 'line-mid'
@@ -166,6 +161,8 @@ export interface StoreState {
   setHomeMenuItems: (items: { name: string; path: string }[]) => void
   token: string
   setToken: (token: string) => void
+  debugPanel: boolean
+  setDebugPanel: (debugPanel: boolean) => void
 }
 
 let pendingAstUpdates: number[] = []
@@ -323,6 +320,8 @@ export const useStore = create<StoreState>()(
       setHomeMenuItems: (homeMenuItems) => set({ homeMenuItems }),
       token: '',
       setToken: (token) => set({ token }),
+      debugPanel: false,
+      setDebugPanel: (debugPanel) => set({ debugPanel }),
     }),
     {
       name: 'store',
@@ -333,6 +332,7 @@ export const useStore = create<StoreState>()(
             'defaultDir',
             'defaultProjectName',
             'token',
+            'debugPanel'
           ].includes(key))
         ),
     }

tsconfig.node.json

@@ -5,5 +5,7 @@
     "moduleResolution": "Node",
     "allowSyntheticDefaultImports": true
   },
-    "include": ["vite.config.ts"]
+  "include": [
+    "vite.config.ts"
+  ]
 }