Skip to content

Commit

Permalink
✨ Added drag and drop animation. Added event cancellation when droppi…
Browse files Browse the repository at this point in the history
…ng node on main panel.
  • Loading branch information
alexgrozav committed Apr 14, 2022
1 parent c592d43 commit 3764773
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 19 deletions.
16 changes: 14 additions & 2 deletions packages/editor-ui/src/components/NodeCreator/MainPanel.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
<template>
<div @click="onClickInside" class="container">
<div
class="container"
ref="mainPanelContainer"
@click="onClickInside"
>
<SlideTransition>
<SubcategoryPanel
v-if="activeSubcategory"
Expand Down Expand Up @@ -287,7 +291,15 @@ export default mixins(externalHooks).extend({
this.searchEventBus.$emit('focus');
},
emitDragEvent(eventName: string, { element, event }: { element: INodeCreateElement, event: Event }) {
emitDragEvent(eventName: string, { element, event }: { element: INodeCreateElement, event: DragEvent }) {
// Abort drag end event propagation if dropped inside nodes panel
if (eventName === 'nodeTypeDragEnd') {
const mainPanelContainerBoundingRect = (this.$refs.mainPanelContainer as Element).getBoundingClientRect();
if (event.pageX >= mainPanelContainerBoundingRect.x && event.pageY >= mainPanelContainerBoundingRect.y) {
return;
}
}
this.$emit(eventName, {
nodeTypeName: (element.properties as INodeItemProps).nodeType.name,
event,
Expand Down
52 changes: 42 additions & 10 deletions packages/editor-ui/src/components/NodeCreator/NodeItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,16 @@
</div>

<div :class="$style['draggable-data-transfer']" ref="draggableDataTransfer" />
<div :class="$style.draggable" :style="{ top: `${draggablePosition.y}px`, left: `${draggablePosition.x}px` }" ref="draggable" v-show="dragging">
<NodeIcon class="node-icon" :nodeType="nodeType" :size="40" :shrink="false" />
</div>
<transition name="node-item-transition">
<div
:class="$style.draggable"
:style="draggableStyle"
ref="draggable"
v-show="dragging"
>
<NodeIcon class="node-icon" :nodeType="nodeType" :size="40" :shrink="false" />
</div>
</transition>
</div>
</div>
</template>
Expand Down Expand Up @@ -78,6 +85,12 @@ export default Vue.extend({
isTrigger (): boolean {
return this.nodeType.group.includes('trigger');
},
draggableStyle(): { top: string; left: string; } {
return {
top: `${this.draggablePosition.y}px`,
left: `${this.draggablePosition.x}px`,
};
},
},
mounted() {
/**
Expand All @@ -100,8 +113,8 @@ export default Vue.extend({
event.dataTransfer.setDragImage(this.$refs.draggableDataTransfer as Element, 0, 0);
}
this.$data.dragging = true;
this.$data.draggablePosition = { x, y };
this.dragging = true;
this.draggablePosition = { x, y };
},
onDragOver(event: DragEvent): void {
if (!this.dragging || event.pageX === 0 && event.pageY === 0) {
Expand All @@ -110,20 +123,22 @@ export default Vue.extend({
const [x,y] = getNewNodePosition([], [event.pageX - NODE_SIZE / 2, event.pageY - NODE_SIZE / 2]);
this.$data.draggablePosition = { x, y };
this.draggablePosition = { x, y };
},
onDragEnd(event: DragEvent): void {
this.$emit('dragend', {
...event,
// Safari and Firefox return incorrect values for "dragend" event,
// override with last known value
pageX: this.$data.draggablePosition.x,
pageY: this.$data.draggablePosition.y,
pageX: this.draggablePosition.x,
pageY: this.draggablePosition.y,
});
this.$data.dragging = false;
this.$data.draggablePosition = { x: -100, y: -100 };
this.dragging = false;
setTimeout(() => {
this.draggablePosition = { x: -100, y: -100 };
}, 300);
},
},
});
Expand Down Expand Up @@ -192,3 +207,20 @@ export default Vue.extend({
height: 1px;
}
</style>

<style lang="scss" scoped>
.node-item-transition {
&-enter-active,
&-leave-active {
transition-property: opacity, transform;
transition-duration: 300ms;
transition-timing-function: ease;
}
&-enter,
&-leave-to {
opacity: 0;
transform: scale(0);
}
}
</style>
15 changes: 8 additions & 7 deletions packages/editor-ui/src/views/NodeView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -184,8 +184,8 @@ import '../plugins/N8nCustomConnectorType';
import '../plugins/PlusEndpointType';
interface AddNodeOptions {
openDataDisplay?: boolean;
position?: XYPosition;
dragAndDrop?: boolean;
}
export default mixins(
Expand Down Expand Up @@ -1243,6 +1243,7 @@ export default mixins(
nodeTypeDragEnd ({ nodeTypeName, event }: { nodeTypeName: string, event: DragEvent }) {
this.addNodeButton(nodeTypeName, {
position: this.getMousePositionWithinNodeView(event),
dragAndDrop: true,
});
this.createNodeActive = false;
},
Expand Down Expand Up @@ -1383,7 +1384,11 @@ export default mixins(
this.$store.commit('setStateDirty', true);
this.$externalHooks().run('nodeView.addNodeButton', { nodeTypeName });
this.$telemetry.trackNodesPanel('nodeView.addNodeButton', { node_type: nodeTypeName, workflow_id: this.$store.getters.workflowId });
this.$telemetry.trackNodesPanel('nodeView.addNodeButton', {
node_type: nodeTypeName,
workflow_id: this.$store.getters.workflowId,
drag_and_drop: options.dragAndDrop,
} as IDataObject);
// Automatically deselect all nodes and select the current one and also active
// current node
Expand Down Expand Up @@ -1426,11 +1431,7 @@ export default mixins(
this.__addConnection(connectionData, true);
},
async addNodeButton (nodeTypeName: string, options: AddNodeOptions = {
openDataDisplay: true,
}) {
console.log(options.position);
async addNodeButton (nodeTypeName: string, options: AddNodeOptions = {}) {
if (this.editAllowedCheck() === false) {
return;
}
Expand Down

0 comments on commit 3764773

Please sign in to comment.