Extend output port and remove selection halo (#11715)

Closes #11507 - Output port area extended twice - Selection halo is removed (but most of the code is still there – I understood we don’t want to remove everything before testing) https://github.com/user-attachments/assets/4c6d7837-362e-4309-aa9b-5c0679d600e9
enso-org · Dec 3, 2024 · ce1df4e · ce1df4e
1 parent a6d040e
commit ce1df4e
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 29 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -42,6 +42,8 @@
 - [New design for vector-editing widget][11620].
 - [Default values on widgets are displayed in italic][11666].
 - [Fixed bug causing Table Visualization to show wrong data][11684].
+- [No halo is displayed around components when hovering][11715].
+- [The hover area of the component output port extended twice its size][11715].
 
 [11151]: https://github.com/enso-org/enso/pull/11151
 [11271]: https://github.com/enso-org/enso/pull/11271
@@ -68,6 +70,7 @@
 [11666]: https://github.com/enso-org/enso/pull/11666
 [11690]: https://github.com/enso-org/enso/pull/11690
 [11684]: https://github.com/enso-org/enso/pull/11684
+[11715]: https://github.com/enso-org/enso/pull/11715
 
 #### Enso Standard Library
 

diff --git a/app/gui/integration-test/project-view/selectingNodes.spec.ts b/app/gui/integration-test/project-view/selectingNodes.spec.ts
@@ -50,16 +50,13 @@ test('Selecting nodes by area drag', async ({ page }) => {
   await expect(node1).not.toBeSelected()
   await expect(node2).not.toBeSelected()
 
-  const node1Id = await node1.getAttribute('data-node-id')
-  const node1Selection = page.locator(`.GraphNodeSelection[data-node-id="${node1Id}"]`)
-  const node1BBox = await node1Selection.boundingBox()
+  const node1BBox = await node1.boundingBox()
   const node2BBox = await node2.boundingBox()
   assert(node1BBox)
   assert(node2BBox)
   await page.mouse.move(node1BBox.x - 50, node1BBox.y - 50)
   await page.mouse.down()
   await page.mouse.move(node1BBox.x - 40, node1BBox.y - 40)
-  // await expect(page.locator('.SelectionBrush')).toBeVisible()
   await page.mouse.move(node2BBox.x + node2BBox.width, node2BBox.y + node2BBox.height)
   await expect(node1).toBeSelected()
   await expect(node2).toBeSelected()

diff --git a/app/gui/src/project-view/assets/base.css b/app/gui/src/project-view/assets/base.css
@@ -47,7 +47,7 @@
   /** The amount of overlap for the port shape with the node. */
   --output-port-overlap: -8px;
   /** Stroke width of output port active hover area shape. Should be large enough to allow easy targetting. */
-  --output-port-hover-width: 20px;
+  --output-port-hover-width: 40px;
   /** The width of selection area around node. */
   --selected-node-border-width: 20px;
   /** Padding added to token widgets to push them away from rounded corners of the parent widget. */

diff --git a/app/gui/src/project-view/components/GraphEditor/GraphNode.vue b/app/gui/src/project-view/components/GraphEditor/GraphNode.vue
@@ -9,7 +9,6 @@ import GraphNodeMessage, {
   type MessageType,
 } from '@/components/GraphEditor/GraphNodeMessage.vue'
 import GraphNodeOutputPorts from '@/components/GraphEditor/GraphNodeOutputPorts.vue'
-import GraphNodeSelection from '@/components/GraphEditor/GraphNodeSelection.vue'
 import GraphVisualization from '@/components/GraphEditor/GraphVisualization.vue'
 import type { NodeCreationOptions } from '@/components/GraphEditor/nodeCreation'
 import NodeWidgetTree, {
@@ -184,9 +183,6 @@ const selectionHoverPos = ref<Vec2>()
 function updateNodeHover(event: PointerEvent | undefined) {
   nodeHoverPos.value = event && eventScenePos(event)
 }
-function updateSelectionHover(event: PointerEvent | undefined) {
-  selectionHoverPos.value = event && eventScenePos(event)
-}
 
 const menuCloseTimeout = ref<ReturnType<typeof setTimeout>>()
 const menuEnabledByHover = ref(false)
@@ -505,22 +501,6 @@ const showMenuAt = ref<{ x: number; y: number }>()
     @pointermove="updateNodeHover"
     @contextmenu.stop.prevent="ensureSelected(), (showMenuAt = $event)"
   >
-    <Teleport v-if="navigator && !edited && graphNodeSelections" :to="graphNodeSelections">
-      <GraphNodeSelection
-        :data-node-id="nodeId"
-        :nodePosition="nodePosition"
-        :nodeSize="graphSelectionSize"
-        :class="{ draggable: true, dragged: isDragged }"
-        :color
-        :externalHovered="nodeHovered"
-        @visible="selectionVisible = $event"
-        @pointerenter="updateSelectionHover"
-        @pointermove="updateSelectionHover"
-        @pointerleave="updateSelectionHover(undefined)"
-        v-on="dragPointer.events"
-        @click="handleNodeClick"
-      />
-    </Teleport>
     <div class="binding" v-text="node.pattern?.code()" />
     <button
       v-if="!menuVisible && isRecordingOverridden"
@@ -602,7 +582,7 @@ const showMenuAt = ref<{ x: number; y: number }>()
       <GraphNodeOutputPorts
         v-if="props.node.type !== 'output'"
         :nodeId="nodeId"
-        :forceVisible="selectionVisible"
+        :forceVisible="nodeHovered"
         @portClick="(...args) => emit('outputPortClick', ...args)"
         @portDoubleClick="(...args) => emit('outputPortDoubleClick', ...args)"
         @update:hoverAnim="emit('update:hoverAnim', $event)"

diff --git a/app/gui/src/project-view/components/GraphEditor/GraphNodeOutputPorts.vue b/app/gui/src/project-view/components/GraphEditor/GraphNodeOutputPorts.vue
@@ -132,11 +132,13 @@ graph.suggestEdgeFromOutput(outputHovered)
 <template>
   <template v-for="port of outputPorts" :key="port.portId">
     <g :style="portGroupStyle(port)">
-      <g class="portClip">
+      <g
+        class="portClip"
+        @pointerenter="mouseOverOutput = port.portId"
+        @pointerleave="mouseOverOutput = undefined"
+      >
         <rect
           class="outputPortHoverArea clickable"
-          @pointerenter="mouseOverOutput = port.portId"
-          @pointerleave="mouseOverOutput = undefined"
           @pointerdown.stop.prevent="handlePortClick($event, port.portId)"
         />
         <rect class="outputPort" />