set cursor on geo click

src/components/SketchLine.tsx

@@ -13,6 +13,7 @@ import { isOverlapping } from '../lib/utils'
 import { LineGeos } from '../lang/engine'
 import { Vector3, DoubleSide, Quaternion, Vector2 } from 'three'
 import { combineTransformsAlt } from '../lang/sketch'
+import { useSetCursor } from '../hooks/useSetCursor'
 
 function SketchLine({
   geo,
@@ -23,15 +24,10 @@ function SketchLine({
   sourceRange: [number, number]
   forceHighlight?: boolean
 }) {
-  const { setHighlightRange } = useStore(
+  const { setHighlightRange } = useStore(({ setHighlightRange }) => ({
-    ({ setHighlightRange, selectionRange, guiMode, setGuiMode, ast }) => ({
+    setHighlightRange,
-      setHighlightRange,
+  }))
-      selectionRange,
+  const onClick = useSetCursor(sourceRange)
-      guiMode,
-      setGuiMode,
-      ast,
-    })
-  )
   // This reference will give us direct access to the mesh
   const ref = useRef<BufferGeometry | undefined>() as any
   const [hovered, setHover] = useState(false)
@@ -48,6 +44,7 @@ function SketchLine({
           setHover(false)
           setHighlightRange([0, 0])
         }}
+        onClick={onClick}
       >
         <primitive object={geo.line} />
         <meshStandardMaterial
@@ -81,6 +78,7 @@ function ExtrudeWall({
       ast,
     })
   )
+  const onClick = useSetCursor(sourceRange)
   // This reference will give us direct access to the mesh
   const ref = useRef<BufferGeometry | undefined>() as any
   const [hovered, setHover] = useState(false)
@@ -97,6 +95,7 @@ function ExtrudeWall({
           setHover(false)
           setHighlightRange([0, 0])
         }}
+        onClick={onClick}
       >
         <primitive object={geo} />
         <meshStandardMaterial

src/hooks/useSetCursor.ts

@@ -0,0 +1,12 @@
+import { useStore } from '../useStore'
+
+export function useSetCursor(sourceRange: [number, number]) {
+  const setCursor = useStore((state) => state.setCursor)
+  return () => {
+    setCursor(sourceRange[1])
+    const element: HTMLDivElement | null = document.querySelector('.cm-content')
+    if (element) {
+      element.focus()
+    }
+  }
+}

src/useStore.ts

@@ -46,6 +46,7 @@ interface StoreState {
   setEditorView: (editorView: EditorView) => void
   highlightRange: [number, number]
   setHighlightRange: (range: Range) => void
+  setCursor: (cursor: number) => void
   selectionRange: [number, number]
   setSelectionRange: (range: Range) => void
   guiMode: GuiModes
@@ -83,6 +84,13 @@ export const useStore = create<StoreState>()((set, get) => ({
       editorView.dispatch({ effects: addLineHighlight.of(highlightRange) })
     }
   },
+  setCursor: (cursor: number) => {
+    const editorView = get().editorView
+    if (!editorView) return
+    editorView.dispatch({
+      selection: { anchor: cursor, head: cursor },
+    })
+  },
   selectionRange: [0, 0],
   setSelectionRange: (selectionRange) => {
     set({ selectionRange })