Some CB fixes (#8507)

Partially addresses #8495

* Delete key not working in CB and in Code Editor
* Cursor not placed at the end when adding new node with source node
* Garbage added when edited node while having another one selected.
* Closing CB when navigating.
* Too eager selecting component after filtering update.
* Premature node creation when dropping edges
* Discarding changes when clicking-off CB

Author: farmaazon

app/gui2/src/components/CodeEditor.vue

@@ -202,6 +202,7 @@ const editorStyle = computed(() => {
     :style="editorStyle"
     @keydown.enter.stop
     @keydown.backspace.stop
+    @keydown.delete.stop
     @wheel.stop.passive
     @pointerdown.stop
     @contextmenu.stop

app/gui2/src/components/ComponentBrowser.vue

@@ -19,16 +19,15 @@ import type { Opt } from '@/util/opt'
 import { allRanges } from '@/util/range'
 import { Vec2 } from '@/util/vec2'
 import type { SuggestionId } from 'shared/languageServerTypes/suggestions'
-import type { ContentRange, ExprId } from 'shared/yjsModel.ts'
 import { computed, nextTick, onMounted, ref, watch, type ComputedRef, type Ref } from 'vue'
-import { useComponentBrowserInput } from './ComponentBrowser/input'
+import { useComponentBrowserInput, type Usage } from './ComponentBrowser/input'
 import GraphVisualization from './GraphEditor/GraphVisualization.vue'
 
 const ITEM_SIZE = 32
 const TOP_BAR_HEIGHT = 32
 // Difference in position between the component browser and a node for the input of the component browser to
 // be placed at the same position as the node.
-const COMPONENT_BROWSER_TO_NODE_OFFSET = new Vec2(20, 35)
+const COMPONENT_BROWSER_TO_NODE_OFFSET = new Vec2(-4, -4)
 
 const projectStore = useProjectStore()
 const suggestionDbStore = useSuggestionDbStore()
@@ -37,42 +36,24 @@ const graphStore = useGraphStore()
 const props = defineProps<{
   nodePosition: Vec2
   navigator: ReturnType<typeof useNavigator>
-  initialContent: string
-  initialCaretPosition: ContentRange
-  sourcePort: Opt<ExprId>
+  usage: Usage
 }>()
 
 const emit = defineEmits<{
   accepted: [searcherExpression: string, requiredImports: RequiredImport[]]
-  closed: [searcherExpression: string]
+  closed: [searcherExpression: string, requiredImports: RequiredImport[]]
   canceled: []
 }>()
 
-function getInitialContent(): string {
-  if (props.sourcePort == null) return props.initialContent
-  const sourceNodeName = graphStore.db.getOutputPortIdentifier(props.sourcePort)
-  const sourceNodeNameWithDot = sourceNodeName ? sourceNodeName + '.' : ''
-  return sourceNodeNameWithDot + props.initialContent
-}
-
-function getInitialCaret(): ContentRange {
-  if (props.sourcePort == null) return props.initialCaretPosition
-  const sourceNodeName = graphStore.db.getOutputPortIdentifier(props.sourcePort)
-  const sourceNodeNameWithDot = sourceNodeName ? sourceNodeName + '.' : ''
-  return [
-    props.initialCaretPosition[0] + sourceNodeNameWithDot.length,
-    props.initialCaretPosition[1] + sourceNodeNameWithDot.length,
-  ]
-}
-
 onMounted(() => {
   nextTick(() => {
-    input.code.value = getInitialContent()
-    const caret = getInitialCaret()
+    input.reset(props.usage)
     if (inputField.value != null) {
       inputField.value.focus({ preventScroll: true })
-      input.selection.value = { start: caret[0], end: caret[1] }
-      selectLastAfterRefresh()
+    } else {
+      console.warn(
+        'Component Browser input element was not mounted. This is not expected and may break the Component Browser',
+      )
     }
   })
 })
@@ -108,7 +89,15 @@ const currentFiltering = computed(() => {
   )
 })
 
-watch(currentFiltering, selectLastAfterRefresh)
+watch(currentFiltering, () => {
+  selected.value = input.autoSelectFirstComponent.value ? 0 : null
+  nextTick(() => {
+    scrollToBottom()
+    animatedScrollPosition.skip()
+    animatedHighlightPosition.skip()
+    animatedHighlightHeight.skip()
+  })
+})
 
 function readInputFieldSelection() {
   if (
@@ -159,9 +148,10 @@ useEvent(
   window,
   'pointerdown',
   (event) => {
+    if (event.button !== 0) return
     if (!(event.target instanceof Element)) return
     if (!cbRoot.value?.contains(event.target)) {
-      emit('closed', input.code.value)
+      emit('closed', input.code.value, input.importsToAdd())
     }
   },
   { capture: true },
@@ -263,21 +253,6 @@ const highlightClipPath = computed(() => {
   return `inset(${top}px 0px ${bottom}px 0px round 16px)`
 })
 
-/**
- * Select the last element after updating component list.
- *
- * As the list changes the scroller's content, we need to wait a frame so the scroller
- * recalculates its height and setting scrollTop will work properly.
- */
-function selectLastAfterRefresh() {
-  selected.value = 0
-  nextTick(() => {
-    scrollToSelected()
-    animatedScrollPosition.skip()
-    animatedHighlightPosition.skip()
-  })
-}
-
 // === Scrolling ===
 
 const scroller = ref<HTMLElement>()
@@ -297,6 +272,10 @@ function scrollToSelected() {
   scrollPosition.value = Math.max(selectedPosition.value - scrollerSize.value.y + ITEM_SIZE, 0)
 }
 
+function scrollToBottom() {
+  scrollPosition.value = listContentHeight.value - scrollerSize.value.y
+}
+
 function updateScroll() {
   if (scroller.value && Math.abs(scroller.value.scrollTop - animatedScrollPosition.value) > 1.0) {
     scrollPosition.value = scroller.value.scrollTop
@@ -385,6 +364,9 @@ const handler = componentBrowserBindings.handler({
     @focusout="handleDefocus"
     @keydown="handler"
     @pointerdown.stop
+    @keydown.enter.stop
+    @keydown.backspace.stop
+    @keydown.delete.stop
   >
     <div class="panels">
       <div class="panel components">
@@ -490,8 +472,7 @@ const handler = componentBrowserBindings.handler({
           v-model="input.code.value"
           name="cb-input"
           autocomplete="off"
-          @keydown.backspace.stop
-          @keyup="readInputFieldSelection"
+          @input="readInputFieldSelection"
         />
       </div>
     </div>

app/gui2/src/components/ComponentBrowser/input.ts

@@ -21,9 +21,14 @@ import {
   type QualifiedName,
 } from '@/util/qualifiedName'
 import { equalFlat } from 'lib0/array'
-import { IdMap, type ContentRange } from 'shared/yjsModel'
+import { IdMap, type ContentRange, type ExprId } from 'shared/yjsModel'
 import { computed, ref, type ComputedRef } from 'vue'
 
+/** Information how the component browser is used, needed for proper input initializing. */
+export type Usage =
+  | { type: 'newNode'; sourcePort?: ExprId | undefined }
+  | { type: 'editNode'; node: ExprId; cursorPos: number }
+
 /** Input's editing context.
  *
  * It suggests what part of the input should be altered when accepting suggestion.
@@ -66,6 +71,7 @@ export function useComponentBrowserInput(
   const code = ref('')
   const selection = ref({ start: 0, end: 0 })
   const ast = computed(() => RawAstExtended.parse(code.value))
+  const imports = ref<RequiredImport[]>([])
 
   const context: ComputedRef<EditingContext> = computed(() => {
     const cursorPosition = selection.value.start
@@ -143,7 +149,20 @@ export function useComponentBrowserInput(
     return filter
   })
 
-  const imports = ref<RequiredImport[]>([])
+  const autoSelectFirstComponent = computed(() => {
+    // We want to autoselect first component only when we may safely assume user want's to continue
+    // editing - they want to immediately see preview of best component and rather won't press
+    // enter (and if press, they won't be surprised by the results).
+    const ctx = context.value
+    // If no input, we're sure user want's to add something.
+    if (!code.value) return true
+    // When changing identifier, it is unfinished. Or, the best match should be exactly what
+    // the user wants
+    if (ctx.type === 'changeIdentifier') return true
+    // With partially written `.` chain we ssume user want's to add something.
+    if (ctx.type === 'insert' && ctx.oprApp?.lastOpr()?.repr() === '.') return true
+    return false
+  })
 
   function readOprApp(
     leafParent: IteratorResult<RawAstExtended<RawAst.Tree, false>>,
@@ -390,6 +409,27 @@ export function useComponentBrowserInput(
     }
   }
 
+  function reset(usage: Usage) {
+    switch (usage.type) {
+      case 'newNode':
+        if (usage.sourcePort) {
+          const sourceNodeName = graphDb.getOutputPortIdentifier(usage.sourcePort)
+          code.value = sourceNodeName ? sourceNodeName + '.' : ''
+          const caretPosition = code.value.length
+          selection.value = { start: caretPosition, end: caretPosition }
+        } else {
+          code.value = ''
+          selection.value = { start: 0, end: 0 }
+        }
+        break
+      case 'editNode':
+        code.value = graphDb.nodeIdToNode.get(usage.node)?.rootSpan.repr() ?? ''
+        selection.value = { start: usage.cursorPos, end: usage.cursorPos }
+        break
+    }
+    imports.value = []
+  }
+
   return {
     /** The current input's text (code). */
     code,
@@ -399,6 +439,10 @@ export function useComponentBrowserInput(
     context,
     /** The filter deduced from code and selection. */
     filter,
+    /** Flag indicating that we should autoselect first component after last update */
+    autoSelectFirstComponent,
+    /** Re-initializes the input for given usage. */
+    reset,
     /** Apply given suggested entry to the input. */
     applySuggestion,
     /** Return input after applying given suggestion, without changing state. */