fix vertex selection (#869)

src/components/ModelingMachineProvider.tsx

@@ -282,7 +282,7 @@ export const ModelingMachineProvider = ({
         }
         // This DOES NOT set the `selectionRanges` in xstate context
         // same as comment above
-        const selectionRangeTypeMap = dispatchCodeMirrorCursor({
+        const { selectionRangeTypeMap } = dispatchCodeMirrorCursor({
           selections: setSelections.selection,
           editorView,
         })

src/components/TextEditor.tsx

@@ -160,15 +160,24 @@ export const TextEditor = ({
     )
     const idBasedSelections = codeBasedSelections
       .map(({ type, range }) => {
-        const hasOverlap = Object.entries(
+        // TODO #868: loops over all artifacts will become inefficient at a large scale
+        const entriesWithOverlap = Object.entries(
           engineCommandManager.artifactMap || {}
-        ).filter(([_, { range: artifactRange }]) => {
+        ).filter(([_, artifact]) => {
-          return artifactRange && isOverlap(artifactRange, range)
+          return artifact.range && isOverlap(artifact.range, range)
+            ? artifact
+            : false
         })
-        if (hasOverlap.length) {
+        if (entriesWithOverlap.length) {
+          const [id, artifact] = entriesWithOverlap?.[0]
           return {
             type,
-            id: hasOverlap?.[0]?.[0],
+            id:
+              type === 'line-end' &&
+              artifact.type === 'result' &&
+              artifact.headVertexId
+                ? artifact.headVertexId
+                : id,
           }
         }
         return null

src/hooks/useEngineConnectionSubscriptions.ts

@@ -3,6 +3,7 @@ import { useStore } from 'useStore'
 import { engineCommandManager } from '../lang/std/engineConnection'
 import { useModelingContext } from './useModelingContext'
 import { v4 as uuidv4 } from 'uuid'
+import { SourceRange } from 'lang/wasm'
 
 export function useEngineConnectionSubscriptions() {
   const { setHighlightRange, highlightRange } = useStore((s) => ({
@@ -10,6 +11,12 @@ export function useEngineConnectionSubscriptions() {
     highlightRange: s.highlightRange,
   }))
   const { send, context } = useModelingContext()
+
+  interface RangeAndId {
+    id: string
+    range: SourceRange
+  }
+
   useEffect(() => {
     if (!engineCommandManager) return
 
@@ -62,19 +69,26 @@ export function useEngineConnectionSubscriptions() {
             })
             .then((res) => {
               const curveIds = res?.data?.data?.curve_ids
-              const ranges = curveIds
+              const ranges: RangeAndId[] = curveIds
                 .map(
-                  (id: string) => engineCommandManager.artifactMap[id]?.range
+                  (id: string): RangeAndId => ({
+                    id,
+                    range: engineCommandManager.artifactMap[id].range,
+                  })
                 )
-                .sort((a: [number, number], b: [number, number]) => a[0] - b[0])
+                .sort((a: RangeAndId, b: RangeAndId) => a.range[0] - b.range[0])
               // default to the head of the curve selected
-              const _sourceRange = ranges?.[0]
+              const _sourceRange = ranges?.[0].range
-              // TODO, we telling the engine that the line is selected, becasue we don't store
+              const artifact = engineCommandManager.artifactMap[ranges?.[0]?.id]
-              // vertex ranges in the artifact map, needs some thought.
+              if (artifact.type === 'result') {
+                artifact.headVertexId = data.entity_id
+              }
               send({
                 type: 'Set selection',
                 data: {
                   selectionType: 'singleCodeCursor',
+                  // line-end is used to indicate that headVertexId should be sent to the engine as "selected"
+                  // not the whole curve
                   selection: { range: _sourceRange, type: 'line-end' },
                 },
               })

src/lang/std/engineConnection.ts

@@ -21,6 +21,7 @@ interface ResultCommand extends CommandInfo {
   type: 'result'
   data: any
   raw: WebSocketResponse
+  headVertexId?: string
 }
 interface FailedCommand extends CommandInfo {
   type: 'failed'

src/useStore.ts

@@ -392,7 +392,7 @@ export function setCodeMirrorCursor({
   // because we want to respect the user manually placing the cursor too.
   const code = kclManager.code
   if (!codeSelection) {
-    const selectionRangeTypeMap = dispatchCodeMirrorCursor({
+    const { selectionRangeTypeMap } = dispatchCodeMirrorCursor({
       editorView,
       selections: {
         otherSelections: currestSelections.otherSelections,
@@ -412,7 +412,7 @@ export function setCodeMirrorCursor({
       ? [...currestSelections.codeBasedSelections, codeSelection]
       : [codeSelection],
   }
-  const selectionRangeTypeMap = dispatchCodeMirrorCursor({
+  const { selectionRangeTypeMap } = dispatchCodeMirrorCursor({
     editorView,
     selections,
   })