Skip to content

fix: Canvas icon cannot be dragged or dropped #3951

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
shaohuzhang1 merged 1 commit into from
Aug 27, 2025
Merged

fix: Canvas icon cannot be dragged or dropped #3951

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion ui/src/workflow/common/NodeContainer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,14 @@
>
<div v-resize="resizeStepContainer">
<div class="flex-between">
<div class="flex align-center" style="width: 70%">
<div
class="flex align-center"
@dragstart.prevent
@drag.prevent
@dragover.prevent
@dragend.prevent
style="width: 70%"
>
<component
:is="iconComponent(`${nodeModel.type}-icon`)"
class="mr-8"
Copy link
Contributor Author

@shaohuzhang1 shaohuzhang1 Aug 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The given code snippet has several potential issues that could be addressed:

  1. Multiple Drag Event Handlers: The @dragstart, @drag, @dragover, and @dragend events seem unnecessary here. These should only be attached to the element being dragged, not its container.

  2. Inline Styles: Using inline styles like style="width: 70%" can increase complexity and potentially lead to reflows if the parent's dimensions change. Consider using CSS classes instead.

  3. Component Lifecycle Concerns: The v-resize directive might interfere with drag behavior because it likely uses event listeners or animations within itself. Ensure that these directives do not conflict with any existing drag handling logic.

  4. Flexbox Alignment: The align-center class in both components suggests center alignment, which may not work properly with dynamic widths. Verify that all children of these divs have consistent sizing.

Here is an improved version of the code:

<div v-resize="resizeStepContainer">
  <div class="flex-between">
    <div v-draggable 
        @draggableenter.prevent @draggableresume.prevent @draggableleave.prevent
        ondragmove="onDragMove(event)" ondragend="onDragEnd(event)"
        class="flex align-end mr-8"
        style="width: 70%">
      <component :is="iconComponent(`${nodeModel.type}-icon`)"/>
    </div>
  </div>
</div>

<script>
// Example implementation of draggable and resizing logic
export default {
  methods: {
    onClick() { /* Your click handler */ },
    resizeStepContainer({ newSize }) {/* Your resize logic */ }
    // Add custom drag handlers
    onDragMove(event) {}, onDragEnd(event) {}
  }
}
</script>

<style scoped>
/* Use css flexbox styling for centered alignment */
.flex-between > * {
  align-self: center;
}

.dragging {
  position: relative; !important /* Adjust positioning as needed */
}

#container {
  width: 100%; /* Full width */
}
</style>

Key Corrections Made:

  • Removed Unnecessary Events: Only @mousemove, @mouseup, and possibly other necessary drag-related events are typically required on the draggable target.

  • Separated Draggable Logic: Added specific drag related JavaScript methods (onClick, resizeStepContainer) in addition to Vue lifecycle hooks (like mounted(), computed(): {}).

  • Optimized Inline Styles: Removed inline styles from child components where possible and used external or scoped CSS for better performance and maintainability.

This refactored version assumes you need custom drag interaction and handles those behaviors separately, thus improving readability and efficiency.

Expand Down
Loading