Merge pull request galaxyproject#17240 from ElectronicBlueberry/workf…

…low-node-connector-improvements

Workflow node connector improvements

client/src/components/Workflow/Editor/Draggable.vue

@@ -32,6 +32,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    snappable: {
+        type: Boolean,
+        default: true,
+    },
 });
 
 const emit = defineEmits<{
@@ -81,7 +85,7 @@ const { toolbarStore } = useWorkflowStores();
 const { snapActive } = storeToRefs(toolbarStore);
 
 function getSnappedPosition<T extends Position>(position: T) {
-    if (snapActive.value) {
+    if (props.snappable && snapActive.value) {
         return {
             ...position,
             x: Math.round(position.x / toolbarStore.snapDistance) * toolbarStore.snapDistance,

client/src/components/Workflow/Editor/DraggablePan.vue

@@ -35,6 +35,10 @@ const props = defineProps({
         type: Number,
         default: 60,
     },
+    snappable: {
+        type: Boolean,
+        default: true,
+    },
 });
 
 type Position = { x: number; y: number };
@@ -157,6 +161,7 @@ function onStart() {
         :stop-propagation="stopPropagation"
         :drag-data="dragData"
         :disabled="disabled"
+        :snappable="snappable"
         @move="onMove"
         @mouseup="onMouseUp"
         @start="onStart"

client/src/components/Workflow/Editor/NodeInput.vue

@@ -2,7 +2,7 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faChevronCircleRight, faMinusSquare } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import type { UseElementBoundingReturn } from "@vueuse/core";
+import { useDebounce, type UseElementBoundingReturn } from "@vueuse/core";
 import { storeToRefs } from "pinia";
 import {
     computed,
@@ -188,10 +188,31 @@ function onDrop(event: DragEvent) {
         terminal.value.connect(droppedTerminal);
     }
 }
+
+const draggedOver = ref(false);
+const draggedOverDebounced = useDebounce(draggedOver, 50);
+
+function nodeDragOver() {
+    draggedOver.value = true && Boolean(draggingTerminal.value);
+}
+
+function nodeDragOut() {
+    draggedOver.value = false;
+}
+
+watch(
+    () => draggingTerminal.value,
+    () => {
+        if (!draggingTerminal.value) {
+            draggedOver.value = false;
+        }
+    }
+);
 </script>
 
 <template>
-    <div class="node-input" :class="rowClass">
+    <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
+    <div class="node-input" :class="rowClass" @drop.prevent="onDrop" @dragover="nodeDragOver" @dragleave="nodeDragOut">
         <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
         <div
             :id="id"
@@ -202,12 +223,13 @@ function onDrop(event: DragEvent) {
                 'can-accept': acceptsInput,
                 'can-not-accept': !acceptsInput,
                 'mapped-over': isMultiple,
+                'is-dragging': Boolean(draggingTerminal),
+                'is-dragover': draggedOverDebounced,
             }"
             :input-name="input.name"
-            @drop.prevent="onDrop"
             @dragenter.prevent="dragEnter"
             @dragleave.prevent="dragLeave">
-            <b-tooltip :target="id" :show="showTooltip">
+            <b-tooltip v-if="reason" :target="id" :show="showTooltip">
                 {{ reason }}
             </b-tooltip>
             <FontAwesomeIcon class="terminal-icon" icon="fa-chevron-circle-right" />
@@ -258,6 +280,19 @@ function onDrop(event: DragEvent) {
         &.can-not-accept {
             color: $brand-warning;
         }
+
+        // expand size on drag
+        &.is-dragging {
+            --offset-extra: 10px;
+        }
+
+        &.mapped-over.is-dragging {
+            --offset-extra: 5px;
+        }
+
+        &.is-dragover.can-accept::after {
+            outline: solid 3px $brand-primary;
+        }
     }
 }
 

client/src/components/Workflow/Editor/NodeOutput.vue

@@ -388,6 +388,7 @@ const removeTagsAction = computed(() => {
             :drag-data="{ stepId: stepId, output: effectiveOutput }"
             :draggable="!readonly"
             :disabled="readonly"
+            :snappable="false"
             @pan-by="onPanBy"
             @start="isDragging = true"
             @stop="onStopDragging"

client/src/components/Workflow/Editor/_nodeTerminalStyle.scss

@@ -1,36 +1,40 @@
 @mixin node-terminal-style($side) {
+    --size: 11px;
+    --offset-extra: 0px;
+
     position: absolute;
-    #{$side}: -0.65rem;
-    border-radius: 50%;
-    background-color: $white;
+    #{$side}: calc(var(--offset-extra) * -1 - 0.65rem);
     display: grid;
     place-items: center;
-    width: 11px;
-    height: 11px;
+    width: calc(var(--size) + var(--offset-extra) * 2);
+    height: calc(var(--size) + var(--offset-extra) * 2);
     margin-top: 0.25rem;
+    transform: translateY(calc(var(--offset-extra) * -1));
 
     color: $brand-primary;
 
+    &::after {
+        position: absolute;
+        z-index: -1;
+        content: "";
+        width: var(--size);
+        height: var(--size);
+        border-radius: 50%;
+        background-color: $white;
+    }
+
     &.mapped-over {
-        width: 20px;
-        height: 20px;
+        --size: 20px;
+        #{$side}: calc(var(--offset-extra) * -1 - 0.8rem);
         margin-top: 0;
-        #{$side}: -0.8rem;
-
-        .terminal-icon {
-            top: -1px;
-            left: -1px;
-            width: 22px;
-            height: 22px;
-        }
     }
 
     .terminal-icon {
         position: absolute;
-        top: -1px;
-        left: -1px;
-        width: 13px;
-        height: 13px;
+        top: calc(var(--offset-extra) - 1px);
+        left: calc(var(--offset-extra) - 1px);
+        width: calc(var(--size) + 2px);
+        height: calc(var(--size) + 2px);
         pointer-events: none;
     }
 }