Add multi-cursor support (#30)

* update execution of callExpressions

* tweak types to store multiple cursor ranges and hook up with artifact highlighting

* multi-cursor from 3d scene

Working but has to be capslock for the time being

* tweak pannel headers

* add issue to todo comment

src/App.tsx

@@ -22,19 +22,20 @@ import { AxisIndicator } from './components/AxisIndicator'
 import { RenderViewerArtifacts } from './components/RenderViewerArtifacts'
 import { PanelHeader } from './components/PanelHeader'
 import { MemoryPanel } from './components/MemoryPanel'
+import { useHotKeyListener } from './hooks/useHotKeyListener'
 
 const OrrthographicCamera = OrthographicCamera as any
 
 function App() {
   const cam = useRef()
+  useHotKeyListener()
   const {
     editorView,
     setEditorView,
-    setSelectionRange,
-    selectionRange,
+    setSelectionRanges,
+    selectionRanges: selectionRange,
     guiMode,
     lastGuiMode,
-    removeError,
     addLog,
     code,
     setCode,
@@ -48,11 +49,10 @@ function App() {
   } = useStore((s) => ({
     editorView: s.editorView,
     setEditorView: s.setEditorView,
-    setSelectionRange: s.setSelectionRange,
-    selectionRange: s.selectionRange,
+    setSelectionRanges: s.setSelectionRanges,
+    selectionRanges: s.selectionRanges,
     guiMode: s.guiMode,
     setGuiMode: s.setGuiMode,
-    removeError: s.removeError,
     addLog: s.addLog,
     code: s.code,
     setCode: s.setCode,
@@ -76,13 +76,16 @@ function App() {
     if (!editorView) {
       setEditorView(viewUpdate.view)
     }
-    const range = viewUpdate.state.selection.ranges[0]
-    // console.log(viewUpdate.state.selection.ranges)
-    // TODO allow multiple cursors so that we can do constrain style features
-    const isNoChange =
-      range.from === selectionRange[0] && range.to === selectionRange[1]
-    if (isNoChange) return
-    setSelectionRange([range.from, range.to])
+    const ranges = viewUpdate.state.selection.ranges
+
+    const isChange =
+      ranges.length !== selectionRange.length ||
+      ranges.some(({ from, to }, i) => {
+        return from !== selectionRange[i][0] || to !== selectionRange[i][1]
+      })
+
+    if (!isChange) return
+    setSelectionRanges(ranges.map(({ from, to }) => [from, to]))
   }
   const [geoArray, setGeoArray] = useState<(ExtrudeGroup | SketchGroup)[]>([])
   useEffect(() => {
@@ -90,7 +93,6 @@ function App() {
       if (!code) {
         setGeoArray([])
         setAst(null)
-        removeError()
         return
       }
       const tokens = lexer(code)
@@ -129,7 +131,6 @@ function App() {
         .filter((a) => a) as (ExtrudeGroup | SketchGroup)[]
 
       setGeoArray(geos)
-      removeError()
       console.log(programMemory)
       setError()
     } catch (e: any) {
@@ -138,15 +139,15 @@ function App() {
       addLog(e)
     }
   }, [code])
-  const shouldFormat = useMemo(() => {
-    if (!ast) return false
-    const recastedCode = recast(ast)
-    return recastedCode !== code
-  }, [code, ast])
+  // const shouldFormat = useMemo(() => {
+  //   if (!ast) return false
+  //   const recastedCode = recast(ast)
+  //   return recastedCode !== code
+  // }, [code, ast])
   return (
     <div className="h-screen">
       <Allotment snap={true}>
-        <Allotment vertical defaultSizes={[4, 1, 1]}>
+        <Allotment vertical defaultSizes={[4, 1, 1]} minSize={20}>
           <div className="h-full flex flex-col items-start">
             <PanelHeader title="Editor" />
             {/* <button