remove view change from debug panel (#866)

remove view change from debug

src/App.tsx

@@ -248,7 +248,7 @@ export function App() {
       <Stream className="absolute inset-0 z-0" />
       {showDebugPanel && (
         <DebugPanel
-          title="Debug"
+          title="Debug (AST Explorer)"
           className={
             'transition-opacity transition-duration-75 ' +
             paneOpacity +

src/components/DebugPanel.tsx

@@ -1,29 +1,7 @@
 import { CollapsiblePanel, CollapsiblePanelProps } from './CollapsiblePanel'
-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'
-import { isReducedMotion } from 'lang/util'
 import { AstExplorer } from './AstExplorer'
-import { engineCommandManager } from '../lang/std/engineConnection'
-
-type SketchModeCmd = Extract<
-  Extract<EngineCommand, { type: 'modeling_cmd_req' }>['cmd'],
-  { type: 'default_camera_enable_sketch_mode' }
->
 
 export const DebugPanel = ({ className, ...props }: CollapsiblePanelProps) => {
-  const [sketchModeCmd, setSketchModeCmd] = useState<SketchModeCmd>({
-    type: 'default_camera_enable_sketch_mode',
-    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,
-    animated: !isReducedMotion(),
-  })
-  if (!sketchModeCmd) return null
   return (
     <CollapsiblePanel
       {...props}
@@ -34,67 +12,6 @@ export const DebugPanel = ({ className, ...props }: CollapsiblePanelProps) => {
       style={{ maxHeight: 'calc(100% - 3rem - 1.25rem - 1.25rem)' }}
     >
       <section className="p-4 flex flex-col gap-4">
-        <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 dark:bg-chalkboard-90"
-            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) =>
-              setSketchModeCmd({
-                ...sketchModeCmd,
-                ortho: a.target.checked,
-              })
-            }
-          />
-        </div>
-        <ActionButton
-          Element="button"
-          onClick={() => {
-            engineCommandManager.sendSceneCommand({
-              type: 'modeling_cmd_req',
-              cmd: sketchModeCmd,
-              cmd_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 style={{ height: '400px' }} className="overflow-y-auto">
           <AstExplorer />
         </div>
@@ -102,41 +19,3 @@ export const DebugPanel = ({ className, ...props }: CollapsiblePanelProps) => {
     </CollapsiblePanel>
   )
 }
-
-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 dark:bg-chalkboard-90"
-              type="number"
-              value={val}
-              onChange={({ target }) => {
-                onChange({
-                  ...data,
-                  [pointKey]: {
-                    ...data[pointKey],
-                    [axis]: Number(target.value),
-                  },
-                })
-              }}
-            />
-          </div>
-        )
-      })}
-    </div>
-  )
-}