Set of improvements: selection "committed" state and "add new compnent" button hitbox fix. (#9775)

1. Did selection refactoring as follow-up of #9519. Now the circular menu visibility or node extension is altered only when selection is ended (before, node shrank once the selection started a bit less blinking).

[Screencast from 2024-04-24 10-56-05.webm](https://github.com/enso-org/enso/assets/3919101/744e7579-80dd-4d44-a545-7af812239be2)

3. Fixes #9699 I don't know why the add-node button shape was done in :before element, if it happily works by shaping the main div itself.

[Screencast from 2024-04-24 10-51-57.webm](https://github.com/enso-org/enso/assets/3919101/004aede5-ea00-4e30-9a3d-6e2574e3b755)

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

@@ -161,7 +161,9 @@ const selected = computed(() => nodeSelection?.isSelected(nodeId.value) ?? false
 const selectionVisible = ref(false)
 
 const isOnlyOneSelected = computed(
-  () => selected.value && nodeSelection?.selected.size === 1 && !nodeSelection.isChanging,
+  () =>
+    nodeSelection?.committedSelection.size === 1 &&
+    nodeSelection?.committedSelection.has(nodeId.value),
 )
 
 const menuVisible = computed(() => menuEnabledByHover.value || isOnlyOneSelected.value)

app/gui2/src/components/SmallPlusButton.vue

@@ -12,8 +12,13 @@ function addNode() {
 </script>
 
 <template>
-  <div class="SmallPlusButton add-node" @click.stop @pointerdown.stop @pointerup.stop>
-    <SvgIcon name="add" class="icon button" @click.stop="addNode" />
+  <div
+    class="SmallPlusButton add-node button"
+    @click.stop="addNode"
+    @pointerdown.stop
+    @pointerup.stop
+  >
+    <SvgIcon name="add" class="icon" />
   </div>
 </template>
 
@@ -21,21 +26,15 @@ function addNode() {
 .SmallPlusButton {
   width: var(--node-height);
   height: var(--node-height);
-  &:before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    backdrop-filter: var(--blur-app-bg);
-    background: var(--color-app-bg);
-    border-radius: 16px;
-    width: var(--node-height);
-    height: var(--node-height);
-  }
-  &:hover:before {
+
+  backdrop-filter: var(--blur-app-bg);
+  background: var(--color-app-bg);
+  border-radius: 16px;
+
+  &:hover {
     background: rgb(230, 230, 255);
   }
-  &:active:before {
+  &:active {
     background: rgb(158, 158, 255);
   }
 }

app/gui2/src/components/VisualizationContainer.vue

@@ -264,7 +264,6 @@ const resizeBottomRight = usePointer((pos, _, type) => {
 .below-viz {
   position: absolute;
   top: 100%;
-  width: 100%;
   margin-top: 4px;
 }
 

app/gui2/src/composables/selection.ts

@@ -25,6 +25,9 @@ export function useSelection<T>(
   const hoveredNode = ref<NodeId>()
   const hoveredElement = ref<Element>()
 
+  const isChanging = computed(() => anchor.value != null)
+  const committedSelection = computed(() => (isChanging.value ? initiallySelected : selected))
+
   useEvent(document, 'pointerover', (event) => {
     hoveredElement.value = event.target instanceof Element ? event.target : undefined
   })
@@ -171,7 +174,8 @@ export function useSelection<T>(
     },
     deselectAll: () => selected.clear(),
     isSelected: (element: T) => selected.has(element),
-    isChanging: computed(() => anchor.value != null),
+    isChanging,
+    committedSelection,
     setSelection,
     handleSelectionOf,
     hoveredNode,