Another set of small fixes

app/gui2/src/components/GraphEditor.vue

@@ -118,9 +118,10 @@ const interactionBindingsHandler = interactionBindings.handler({
 // used as the source of the placement. This means, for example, the selected nodes when creating from a selection
 // or the node that is being edited when creating from a port double click.
 function environmentForNodes(nodeIds: IterableIterator<NodeId>): Environment {
-  const nodeRects = [...graphStore.nodeRects.values()]
+  const nodeRects = graphStore.visibleNodeAreas
+  console.log(nodeRects)
   const selectedNodeRects = [...nodeIds]
-    .map((id) => graphStore.nodeRects.get(id))
+    .map((id) => graphStore.vizRects.get(id) ?? graphStore.nodeRects.get(id))
     .filter((item): item is Rect => item !== undefined)
   const screenBounds = graphNavigator.viewport
   const mousePosition = graphNavigator.sceneMousePos
@@ -207,9 +208,9 @@ const graphBindingsHandler = graphBindings.handler({
     let right = -Infinity
     let bottom = -Infinity
     const nodesToCenter =
-      nodeSelection.selected.size === 0 ? graphStore.currentNodeIds : nodeSelection.selected
+      nodeSelection.selected.size === 0 ? graphStore.db.nodeIdToNode.keys() : nodeSelection.selected
     for (const id of nodesToCenter) {
-      const rect = graphStore.nodeRects.get(id)
+      const rect = graphStore.vizRects.get(id) ?? graphStore.nodeRects.get(id)
       if (!rect) continue
       left = Math.min(left, rect.left)
       right = Math.max(right, rect.right)
@@ -418,7 +419,14 @@ function onComponentBrowserCommit(content: string, requiredImports: RequiredImpo
     } else {
       // We finish creating a new node.
       const metadata = undefined
-      graphStore.createNode(componentBrowserNodePosition.value, content, metadata, requiredImports)
+      const createdNode = graphStore.createNode(
+        componentBrowserNodePosition.value,
+        content,
+        metadata,
+        requiredImports,
+      )
+      console.log(createdNode)
+      if (createdNode) nodeSelection.setSelection(new Set([createdNode]))
     }
   }
   // Finish interaction. This should also hide component browser.

app/gui2/src/components/GraphEditor/dragging.ts

@@ -162,7 +162,7 @@ export function useDragging() {
     createSnapGrid() {
       const nonDraggedRects = computed(() => {
         const nonDraggedNodes = iteratorFilter(
-          graphStore.currentNodeIds.values(),
+          graphStore.db.nodeIdToNode.keys(),
           (id) => !this.draggedNodes.has(id),
         )
         return Array.from(nonDraggedNodes, (id) => graphStore.nodeRects.get(id)!)

app/gui2/src/components/widgets/EnsoTextInputWidget.vue

@@ -87,6 +87,7 @@ function blur() {
       v-model="editedValue"
       class="value"
       :style="inputStyle"
+      @keydown.enter.stop="($event.target as HTMLInputElement).blur()"
       @focus="focus"
       @blur="blur"
     />

app/gui2/src/components/widgets/NumericInputWidget.vue

@@ -135,6 +135,7 @@ function focus() {
       v-model="editedValue"
       class="value"
       :style="inputStyle"
+      @keydown.enter.stop="($event.target as HTMLInputElement).blur()"
       @blur="blur"
       @focus="focus"
     />

app/gui2/src/composables/selection.ts

@@ -143,6 +143,7 @@ export function useSelection<T>(
     },
     deselectAll: () => selected.clear(),
     isSelected: (element: T) => selected.has(element),
+    setSelection,
     handleSelectionOf,
     hoveredNode,
     hoveredPort,

app/gui2/src/stores/graph/index.ts

@@ -1,7 +1,7 @@
 import { nonDictatedPlacement } from '@/components/ComponentBrowser/placement'
 import type { PortId } from '@/providers/portInfo'
 import type { WidgetUpdate } from '@/providers/widgetRegistry'
-import { GraphDb, type NodeId } from '@/stores/graph/graphDatabase'
+import { GraphDb, asNodeId, type NodeId } from '@/stores/graph/graphDatabase'
 import {
   addImports,
   filterOutRedundantImports,
@@ -19,6 +19,7 @@ import type { Opt } from '@/util/data/opt'
 import { Rect } from '@/util/data/rect'
 import { Vec2 } from '@/util/data/vec2'
 import { map, set } from 'lib0'
+import { iteratorFilter } from 'lib0/iterator'
 import { defineStore } from 'pinia'
 import type { ExpressionUpdate, StackItem } from 'shared/languageServerTypes'
 import {
@@ -57,6 +58,11 @@ export const useGraphStore = defineStore('graph', () => {
 
   const nodeRects = reactive(new Map<NodeId, Rect>())
   const vizRects = reactive(new Map<NodeId, Rect>())
+  // The currently visible nodes' areas (including visualization).
+  const visibleNodeAreas = computed(() => {
+    const existing = iteratorFilter(nodeRects.entries(), ([id]) => db.nodeIdToNode.has(id))
+    return Array.from(existing, ([id, rect]) => vizRects.get(id) ?? rect)
+  })
 
   const db = new GraphDb(
     suggestionDb.entries,
@@ -66,7 +72,6 @@ export const useGraphStore = defineStore('graph', () => {
   const portInstances = reactive(new Map<PortId, Set<PortViewInstance>>())
   const editedNodeInfo = ref<NodeEditInfo>()
   const methodAst = ref<Ast.Function>()
-  const currentNodeIds = ref(new Set<NodeId>())
 
   const unconnectedEdge = ref<UnconnectedEdge>()
 
@@ -138,7 +143,7 @@ export const useGraphStore = defineStore('graph', () => {
     if (methodAst.value) {
       const rawFunc = moduleData.value.toRaw(methodAst.value.id)
       assert(rawFunc?.type === RawAst.Tree.Type.Function)
-      currentNodeIds.value = db.readFunctionAst(
+      db.readFunctionAst(
         methodAst.value,
         rawFunc,
         textContentLocal,
@@ -222,6 +227,7 @@ export const useGraphStore = defineStore('graph', () => {
     const assignment = Ast.Assignment.new(edit, ident, rhs)
     functionBlock.push(assignment)
     commitEdit(edit)
+    return asNodeId(rhs.id)
   }
 
   function addMissingImports(edit: MutableModule, newImports: RequiredImport[]) {
@@ -317,9 +323,7 @@ export const useGraphStore = defineStore('graph', () => {
     if (!nodeAst) return
     if (rect.pos.equals(Vec2.Zero) && !nodeAst.nodeMetadata.get('position')) {
       const { position } = nonDictatedPlacement(rect.size, {
-        nodeRects: [...nodeRects.entries()]
-          .filter(([id]) => db.nodeIdToNode.get(id))
-          .map(([id, rect]) => vizRects.get(id) ?? rect),
+        nodeRects: visibleNodeAreas.value,
         // The rest of the properties should not matter.
         selectedNodeRects: [],
         screenBounds: Rect.Zero,
@@ -530,10 +534,10 @@ export const useGraphStore = defineStore('graph', () => {
     editedNodeInfo,
     unconnectedEdge,
     edges,
-    currentNodeIds,
     moduleCode,
     nodeRects,
     vizRects,
+    visibleNodeAreas,
     unregisterNodeRect,
     methodAst,
     astModule,