From 210f0482a404f6efef8c87e7c67d3b49327f284f Mon Sep 17 00:00:00 2001
From: Adam Obuchowicz <adam.obuchowicz@enso.org>
Date: Mon, 29 Apr 2024 13:31:26 +0200
Subject: [PATCH] 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)
---
 .../src/components/GraphEditor/GraphNode.vue  |  4 ++-
 app/gui2/src/components/SmallPlusButton.vue   | 29 +++++++++----------
 .../src/components/VisualizationContainer.vue |  1 -
 app/gui2/src/composables/selection.ts         |  6 +++-
 4 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/app/gui2/src/components/GraphEditor/GraphNode.vue b/app/gui2/src/components/GraphEditor/GraphNode.vue
index 03ae9cc47b..7956419043 100644
--- a/app/gui2/src/components/GraphEditor/GraphNode.vue
+++ b/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)
diff --git a/app/gui2/src/components/SmallPlusButton.vue b/app/gui2/src/components/SmallPlusButton.vue
index 75936c3b0d..808fa235be 100644
--- a/app/gui2/src/components/SmallPlusButton.vue
+++ b/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);
   }
 }
diff --git a/app/gui2/src/components/VisualizationContainer.vue b/app/gui2/src/components/VisualizationContainer.vue
index 17556e9a72..619d4e2ff9 100644
--- a/app/gui2/src/components/VisualizationContainer.vue
+++ b/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;
 }
 
diff --git a/app/gui2/src/composables/selection.ts b/app/gui2/src/composables/selection.ts
index ade0322beb..bae9a8d3f0 100644
--- a/app/gui2/src/composables/selection.ts
+++ b/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,