From 248317f3547f7e1120f05ca72119db8135efb98b Mon Sep 17 00:00:00 2001
From: Kurt Hutten IrevDev <k.hutten@protonmail.ch>
Date: Fri, 6 Jan 2023 09:07:22 +1100
Subject: [PATCH] set cursor on geo click

---
 src/components/SketchLine.tsx | 17 ++++++++---------
 src/hooks/useSetCursor.ts     | 12 ++++++++++++
 src/useStore.ts               |  8 ++++++++
 3 files changed, 28 insertions(+), 9 deletions(-)
 create mode 100644 src/hooks/useSetCursor.ts

diff --git a/src/components/SketchLine.tsx b/src/components/SketchLine.tsx
index d909926f0..a2365c190 100644
--- a/src/components/SketchLine.tsx
+++ b/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(
-    ({ setHighlightRange, selectionRange, guiMode, setGuiMode, ast }) => ({
-      setHighlightRange,
-      selectionRange,
-      guiMode,
-      setGuiMode,
-      ast,
-    })
-  )
+  const { setHighlightRange } = useStore(({ setHighlightRange }) => ({
+    setHighlightRange,
+  }))
+  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)
@@ -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
diff --git a/src/hooks/useSetCursor.ts b/src/hooks/useSetCursor.ts
new file mode 100644
index 000000000..2a7008d26
--- /dev/null
+++ b/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()
+    }
+  }
+}
diff --git a/src/useStore.ts b/src/useStore.ts
index c854ad8d4..e97efcc02 100644
--- a/src/useStore.ts
+++ b/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 })