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/hooks/useHotKeyListener.ts

@@ -0,0 +1,21 @@
+import { useStore } from '../useStore'
+import { useEffect } from 'react'
+
+export function useHotKeyListener() {
+  const { setIsShiftDown } = useStore((s) => ({
+    setIsShiftDown: s.setIsShiftDown,
+  }))
+  const keyName = 'CapsLock' // TODO #32 should be shift, but shift conflicts with the editor's use of the shift key atm.
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) =>
+      event.key === keyName && setIsShiftDown(true)
+    const handleKeyUp = (event: KeyboardEvent) =>
+      event.key === keyName && setIsShiftDown(false)
+    window.addEventListener('keydown', handleKeyDown)
+    window.addEventListener('keyup', handleKeyUp)
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown)
+      window.removeEventListener('keyup', handleKeyUp)
+    }
+  }, [setIsShiftDown])
+}

src/hooks/useSetCursor.ts

@@ -1,9 +1,17 @@
-import { useStore } from '../useStore'
+import { useStore, Range } from '../useStore'
 
-export function useSetCursor(sourceRange: [number, number]) {
-  const setCursor = useStore((state) => state.setCursor)
+export function useSetCursor(sourceRange: Range) {
+  const { setCursor, selectionRanges, isShiftDown } = useStore((s) => ({
+    setCursor: s.setCursor,
+    selectionRanges: s.selectionRanges,
+    isShiftDown: s.isShiftDown,
+  }))
   return () => {
-    setCursor(sourceRange[1])
+    console.log('isShiftDown', isShiftDown, selectionRanges, sourceRange)
+    const ranges = isShiftDown
+      ? [...selectionRanges, sourceRange]
+      : [sourceRange]
+    setCursor(ranges)
     const element: HTMLDivElement | null = document.querySelector('.cm-content')
     if (element) {
       element.focus()