Add-node buttons

app/gui2/e2e/collapsingAndEntering.spec.ts

@@ -65,15 +65,15 @@ test('Collapsing nodes', async ({ page }) => {
 
   // Widgets may "steal" clicks, so we always click at icon.
   await locate
-    .graphNodeByBinding(page, 'ten')
+    .graphNodeByBinding(page, 'prod')
     .locator('.icon')
     .click({ modifiers: ['Shift'] })
   await locate
     .graphNodeByBinding(page, 'sum')
     .locator('.icon')
     .click({ modifiers: ['Shift'] })
   await locate
-    .graphNodeByBinding(page, 'prod')
+    .graphNodeByBinding(page, 'ten')
     .locator('.icon')
     .click({ modifiers: ['Shift'] })
 

app/gui2/e2e/main.ts

@@ -53,6 +53,7 @@ provideVisualizationConfig._mock(
       },
     ],
     updateType() {},
+    addNode() {},
   },
   app,
 )

app/gui2/e2e/selectingNodes.spec.ts

@@ -11,9 +11,16 @@ test('Selecting nodes by click', async ({ page }) => {
   await expect(node1).not.toBeSelected()
   await expect(node2).not.toBeSelected()
 
+  const deselectAll = async () => {
+    await page.keyboard.press('Escape')
+    await expect(node1).not.toBeSelected()
+    await expect(node2).not.toBeSelected()
+  }
+
   await locate.graphNodeIcon(node1).click()
   await expect(node1).toBeSelected()
   await expect(node2).not.toBeSelected()
+  await deselectAll()
 
   await locate.graphNodeIcon(node2).click()
   await expect(node1).not.toBeSelected()
@@ -23,14 +30,12 @@ test('Selecting nodes by click', async ({ page }) => {
   await locate.graphNodeIcon(node1).click({ modifiers: ['Shift'] })
   await expect(node1).toBeSelected()
   await expect(node2).toBeSelected()
+  await deselectAll()
 
   await locate.graphNodeIcon(node2).click()
   await expect(node1).not.toBeSelected()
   await expect(node2).toBeSelected()
-
-  await page.mouse.click(600, 200)
-  await expect(node1).not.toBeSelected()
-  await expect(node2).not.toBeSelected()
+  await deselectAll()
 })
 
 test('Selecting nodes by area drag', async ({ page }) => {

app/gui2/src/components/CircularMenu.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import SmallPlusButton from '@/components/SmallPlusButton.vue'
 import SvgIcon from '@/components/SvgIcon.vue'
 import ToggleIcon from '@/components/ToggleIcon.vue'
+import { Vec2 } from '@/util/data/vec2'
 
 const props = defineProps<{
   isOutputContextEnabledGlobally: boolean
@@ -17,68 +19,75 @@ const emit = defineEmits<{
   startEditingComment: []
   openFullMenu: []
   delete: []
+  addNode: [pos: Vec2 | undefined]
 }>()
 </script>
 
 <template>
-  <div
-    :class="`${props.isFullMenuVisible ? 'CircularMenu full' : 'CircularMenu partial'}`"
-    @pointerdown.stop
-    @pointerup.stop
-    @click.stop
-  >
-    <div v-if="!isFullMenuVisible" class="More" @pointerdown.stop="emit('openFullMenu')"></div>
-    <SvgIcon
-      v-if="isFullMenuVisible"
-      name="comment"
-      class="icon-container button slot2"
-      :alt="`Edit comment`"
-      @click.stop="emit('startEditingComment')"
-    />
-    <SvgIcon
-      v-if="isFullMenuVisible"
-      name="trash2"
-      class="icon-container button slot4"
-      :alt="`Delete component`"
-      @click.stop="emit('delete')"
-    />
-    <ToggleIcon
-      icon="eye"
-      class="icon-container button slot5"
-      :alt="`${props.isVisualizationVisible ? 'Hide' : 'Show'} visualization`"
-      :modelValue="props.isVisualizationVisible"
-      @update:modelValue="emit('update:isVisualizationVisible', $event)"
-    />
-    <SvgIcon
-      name="edit"
-      class="icon-container button slot6"
-      data-testid="edit-button"
-      @click.stop="emit('startEditing')"
-    />
-    <ToggleIcon
-      :icon="props.isOutputContextEnabledGlobally ? 'no_auto_replay' : 'auto_replay'"
-      class="icon-container button slot7"
-      :class="{ 'output-context-overridden': props.isOutputContextOverridden }"
-      :alt="`${
-        props.isOutputContextEnabledGlobally != props.isOutputContextOverridden ?
-          'Disable'
-        : 'Enable'
-      } output context`"
-      :modelValue="props.isOutputContextOverridden"
-      @update:modelValue="emit('update:isOutputContextOverridden', $event)"
+  <div class="CircularMenu" @pointerdown.stop @pointerup.stop @click.stop>
+    <div class="circle" :class="`${props.isFullMenuVisible ? 'full' : 'partial'}`">
+      <div v-if="!isFullMenuVisible" class="More" @pointerdown.stop="emit('openFullMenu')"></div>
+      <SvgIcon
+        v-if="isFullMenuVisible"
+        name="comment"
+        class="icon-container button slot2"
+        :alt="`Edit comment`"
+        @click.stop="emit('startEditingComment')"
+      />
+      <SvgIcon
+        v-if="isFullMenuVisible"
+        name="trash2"
+        class="icon-container button slot4"
+        :alt="`Delete component`"
+        @click.stop="emit('delete')"
+      />
+      <ToggleIcon
+        icon="eye"
+        class="icon-container button slot5"
+        :alt="`${props.isVisualizationVisible ? 'Hide' : 'Show'} visualization`"
+        :modelValue="props.isVisualizationVisible"
+        @update:modelValue="emit('update:isVisualizationVisible', $event)"
+      />
+      <SvgIcon
+        name="edit"
+        class="icon-container button slot6"
+        data-testid="edit-button"
+        @click.stop="emit('startEditing')"
+      />
+      <ToggleIcon
+        :icon="props.isOutputContextEnabledGlobally ? 'no_auto_replay' : 'auto_replay'"
+        class="icon-container button slot7"
+        :class="{ 'output-context-overridden': props.isOutputContextOverridden }"
+        :alt="`${
+          props.isOutputContextEnabledGlobally != props.isOutputContextOverridden ?
+            'Disable'
+          : 'Enable'
+        } output context`"
+        :modelValue="props.isOutputContextOverridden"
+        @update:modelValue="emit('update:isOutputContextOverridden', $event)"
+      />
+    </div>
+    <SmallPlusButton
+      v-if="!isVisualizationVisible"
+      class="below-slot5"
+      @addNode="emit('addNode', $event)"
     />
   </div>
 </template>
 
 <style scoped>
 .CircularMenu {
-  user-select: none;
   position: absolute;
+  user-select: none;
+  pointer-events: none;
+}
+
+.circle {
+  position: relative;
   left: -36px;
   top: -36px;
   width: 114px;
   height: 114px;
-  pointer-events: none;
 
   > * {
     pointer-events: all;
@@ -126,6 +135,7 @@ const emit = defineEmits<{
   backdrop-filter: var(--blur-app-bg);
   background: var(--color-app-bg);
   z-index: -2;
+  pointer-events: all;
 
   &:after {
     content: '...';
@@ -144,6 +154,7 @@ const emit = defineEmits<{
   padding: 0;
   border: none;
   opacity: 30%;
+  pointer-events: all;
 }
 
 .toggledOn {
@@ -202,6 +213,12 @@ const emit = defineEmits<{
   top: 80px;
 }
 
+.below-slot5 {
+  position: absolute;
+  top: calc(108px - 36px);
+  pointer-events: all;
+}
+
 .slot6 {
   position: absolute;
   top: 69.46px;

app/gui2/src/components/GraphEditor.vue

@@ -394,13 +394,18 @@ function showComponentBrowser(nodePosition?: Vec2, usage?: Usage) {
   componentBrowserVisible.value = true
 }
 
-function startCreatingNodeFromButton() {
+function addNodeFromSelection() {
   const targetPos =
     placementPositionForSelection() ??
     nonDictatedPlacement(DEFAULT_NODE_SIZE, placementEnvironment.value).position
   showComponentBrowser(targetPos)
 }
 
+function addNodeAt(pos: Vec2 | undefined) {
+  if (!pos) return addNodeFromSelection()
+  showComponentBrowser(pos)
+}
+
 function hideComponentBrowser() {
   graphStore.editedNodeInfo = undefined
   componentBrowserVisible.value = false
@@ -618,6 +623,7 @@ function handleEdgeDrop(source: AstId, position: Vec2) {
       <GraphNodes
         @nodeOutputPortDoubleClick="handleNodeOutputPortDoubleClick"
         @nodeDoubleClick="(id) => stackNavigator.enterNode(id)"
+        @addNode="addNodeAt($event)"
       />
     </div>
     <GraphEdges :navigator="graphNavigator" @createNodeFromEdge="handleEdgeDrop" />
@@ -645,7 +651,7 @@ function handleEdgeDrop(source: AstId, position: Vec2) {
       @zoomIn="graphNavigator.scale *= 1.1"
       @zoomOut="graphNavigator.scale *= 0.9"
     />
-    <PlusButton @pointerdown.stop @click.stop="startCreatingNodeFromButton()" @pointerup.stop />
+    <PlusButton @pointerdown.stop @click.stop="addNodeFromSelection()" @pointerup.stop />
     <Transition>
       <Suspense ref="codeEditorArea">
         <CodeEditor v-if="showCodeEditor" />

app/gui2/src/components/GraphEditor/GraphNode.vue

@@ -51,6 +51,7 @@ const emit = defineEmits<{
   outputPortClick: [portId: AstId]
   outputPortDoubleClick: [portId: AstId]
   doubleClick: []
+  addNode: [pos: Vec2 | undefined]
   'update:edited': [cursorPosition: number]
   'update:rect': [rect: Rect]
   'update:visualizationId': [id: Opt<VisualizationIdentifier>]
@@ -416,6 +417,7 @@ const documentation = computed<string | undefined>({
       @startEditingComment="editingComment = true"
       @openFullMenu="openFullMenu"
       @delete="emit('delete')"
+      @addNode="emit('addNode', $event)"
     />
     <GraphVisualization
       v-if="isVisualizationVisible"
@@ -434,6 +436,7 @@ const documentation = computed<string | undefined>({
       @update:visible="emit('update:visualizationVisible', $event)"
       @update:fullscreen="emit('update:visualizationFullscreen', $event)"
       @update:width="emit('update:visualizationWidth', $event)"
+      @addNode="emit('addNode', $event)"
     />
     <Suspense>
       <GraphNodeComment

app/gui2/src/components/GraphEditor/GraphNodes.vue

@@ -21,6 +21,7 @@ const navigator = injectGraphNavigator(true)
 const emit = defineEmits<{
   nodeOutputPortDoubleClick: [portId: AstId]
   nodeDoubleClick: [nodeId: NodeId]
+  addNode: [pos: Vec2 | undefined]
 }>()
 
 function nodeIsDragged(movedId: NodeId, offset: Vec2) {
@@ -54,6 +55,7 @@ const uploadingFiles = computed<[FileName, File][]>(() => {
     @outputPortClick="graphStore.createEdgeFromOutput($event)"
     @outputPortDoubleClick="emit('nodeOutputPortDoubleClick', $event)"
     @doubleClick="emit('nodeDoubleClick', id)"
+    @addNode="emit('addNode', $event)"
     @update:edited="graphStore.setEditedNode(id, $event)"
     @update:rect="graphStore.updateNodeRect(id, $event)"
     @update:visualizationId="

app/gui2/src/components/GraphEditor/GraphVisualization.vue

@@ -59,6 +59,7 @@ const emit = defineEmits<{
   'update:visible': [visible: boolean]
   'update:fullscreen': [fullscreen: boolean]
   'update:width': [width: number]
+  addNode: [pos: Vec2 | undefined]
 }>()
 
 const visPreprocessor = ref(DEFAULT_VISUALIZATION_CONFIGURATION)
@@ -292,6 +293,7 @@ provideVisualizationConfig({
   },
   hide: () => emit('update:visible', false),
   updateType: (id) => emit('update:id', id),
+  addNode: (pos) => emit('addNode', pos),
 })
 
 const effectiveVisualization = computed(() => {