From b432655e7f9f6f295fa6ee29137e8faf26d3c2c8 Mon Sep 17 00:00:00 2001
From: Adam Obuchowicz <adam.obuchowicz@enso.org>
Date: Thu, 4 Jul 2024 12:03:07 +0200
Subject: [PATCH 1/2] Add node button is above port

---
 .../src/components/GraphEditor/GraphNode.vue   | 17 +++++++++++++++--
 .../src/components/VisualizationContainer.vue  | 12 ------------
 package-lock.json                              | 18 +-----------------
 3 files changed, 16 insertions(+), 31 deletions(-)

diff --git a/app/gui2/src/components/GraphEditor/GraphNode.vue b/app/gui2/src/components/GraphEditor/GraphNode.vue
index 29e7e69e268b..ec5504a93c7c 100644
--- a/app/gui2/src/components/GraphEditor/GraphNode.vue
+++ b/app/gui2/src/components/GraphEditor/GraphNode.vue
@@ -16,6 +16,7 @@ import NodeWidgetTree, {
   GRAB_HANDLE_X_MARGIN_R,
   ICON_WIDTH,
 } from '@/components/GraphEditor/NodeWidgetTree.vue'
+import SmallPlusButton from '@/components/SmallPlusButton.vue'
 import SvgIcon from '@/components/SvgIcon.vue'
 import { useDoubleClick } from '@/composables/doubleClick'
 import { usePointer, useResizeObserver } from '@/composables/events'
@@ -242,11 +243,9 @@ const isVisualizationFullscreen = computed(() => props.node.vis?.fullscreen ?? f
 
 const bgStyleVariables = computed(() => {
   const { x: width, y: height } = nodeSize.value
-  const visBelowNode = graphSelectionSize.value.y - nodeSize.value.y
   return {
     '--node-width': `${width}px`,
     '--node-height': `${height}px`,
-    '--output-port-transform': `translateY(${visBelowNode}px)`,
   }
 })
 
@@ -423,6 +422,7 @@ watchEffect(() => {
       minWidth: isVisualizationEnabled ? `${visualizationWidth ?? 200}px` : undefined,
       '--node-group-color': color,
       ...(node.zIndex ? { 'z-index': node.zIndex } : {}),
+      '--viz-below-node': `${graphSelectionSize.y - nodeSize.y}px`,
     }"
     :class="{
       selected,
@@ -549,6 +549,11 @@ watchEffect(() => {
         @update:nodeHovered="outputHovered = $event"
       />
     </svg>
+    <SmallPlusButton
+      v-if="menuVisible && isVisualizationVisible"
+      class="below-viz"
+      @createNodes="emit('createNodes', $event)"
+    />
   </div>
 </template>
 
@@ -562,6 +567,7 @@ watchEffect(() => {
   left: 0;
   display: flex;
 
+  --output-port-transform: translateY(var(--viz-below-node));
   --output-port-max-width: 4px;
   --output-port-hovered-extra-width: 2px;
   --output-port-overlap: -8px;
@@ -698,4 +704,11 @@ watchEffect(() => {
 .dragged {
   cursor: grabbing !important;
 }
+
+.below-viz {
+  position: absolute;
+  top: 100%;
+  transform: translateY(var(--viz-below-node));
+  margin-top: 4px;
+}
 </style>
diff --git a/app/gui2/src/components/VisualizationContainer.vue b/app/gui2/src/components/VisualizationContainer.vue
index bab67b0d07af..8df8ed10df19 100644
--- a/app/gui2/src/components/VisualizationContainer.vue
+++ b/app/gui2/src/components/VisualizationContainer.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import ResizeHandles from '@/components/ResizeHandles.vue'
-import SmallPlusButton from '@/components/SmallPlusButton.vue'
 import SvgButton from '@/components/SvgButton.vue'
 import VisualizationSelector from '@/components/VisualizationSelector.vue'
 import { isTriggeredByKeyboard } from '@/composables/events'
@@ -123,11 +122,6 @@ const contentStyle = computed(() => {
         bottom
         @update:resizing="resizing = $event"
       />
-      <SmallPlusButton
-        v-if="config.isCircularMenuVisible"
-        class="below-viz"
-        @createNodes="config.createNodes(...$event)"
-      />
       <div class="toolbars">
         <div
           v-if="!config.isPreview"
@@ -260,12 +254,6 @@ const contentStyle = computed(() => {
   top: 4px;
 }
 
-.below-viz {
-  position: absolute;
-  top: 100%;
-  margin-top: 4px;
-}
-
 .toolbar {
   position: relative;
   display: flex;
diff --git a/package-lock.json b/package-lock.json
index 930a45eb9d55..37e872ccd97a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -302,8 +302,7 @@
         "@stripe/stripe-js": "^2.1.10",
         "esbuild-plugin-inline-image": "^0.0.9",
         "eslint-plugin-react": "^7.32.2",
-        "eslint-plugin-react-hooks": "^4.6.0",
-        "is-hidden-file": "^1.1.2"
+        "eslint-plugin-react-hooks": "^4.6.0"
       },
       "devDependencies": {
         "@typescript-eslint/eslint-plugin": "^6.7.2",
@@ -13781,21 +13780,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-hidden-file": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/is-hidden-file/-/is-hidden-file-1.1.2.tgz",
-      "integrity": "sha512-WS2Y+gFNWlK8IPAvcvsqa4rwf4kZUqGz3VTpHVhAu4Zvrbk+XPbve/RKacyyVNYxHQulubZshXXlzmfCR7G+WQ==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "os": [
-        "darwin",
-        "linux",
-        "win32"
-      ],
-      "dependencies": {
-        "cross-spawn": "^7.0.3"
-      }
-    },
     "node_modules/is-inside-container": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz",

From 10e53b542451cb61628090bf5559bc7cc260cfc6 Mon Sep 17 00:00:00 2001
From: Adam Obuchowicz <adam.obuchowicz@enso.org>
Date: Thu, 4 Jul 2024 12:06:24 +0200
Subject: [PATCH 2/2] changelog

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 01268f7bccb1..6c514c564359 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 #### Enso IDE
 
+- ["Add node" button is not obscured by output port][10433]
+
+[10433]: https://github.com/enso-org/enso/pull/10443
+
 #### Enso Enso Standard Library
 
 - [Reamed `Data.list_directory` to `Data.list`. Removed list support from read