feat: Add assignment component with drag and drop to Set node (#8283)

Co-authored-by: Giulio Andreini <andreini@netseven.it>
This commit is contained in:
Elias Meire
2024-02-06 18:34:34 +01:00
committed by GitHub
parent c04f92f7fd
commit 2799de491b
53 changed files with 3296 additions and 1060 deletions

View File

@@ -1,5 +1,3 @@
import { useStorage } from '@/composables/useStorage';
import { LOCAL_STORAGE_MAPPING_IS_ONBOARDED, STORES } from '@/constants';
import type {
INodeUi,
IRunDataDisplayMode,
@@ -8,7 +6,9 @@ import type {
TargetItem,
XYPosition,
} from '@/Interface';
import type { INodeIssues, IRunData } from 'n8n-workflow';
import { useStorage } from '@/composables/useStorage';
import { LOCAL_STORAGE_MAPPING_IS_ONBOARDED, STORES } from '@/constants';
import type { INodeExecutionData, INodeIssues } from 'n8n-workflow';
import { NodeConnectionType } from 'n8n-workflow';
import { defineStore } from 'pinia';
import { v4 as uuid } from 'uuid';
@@ -46,8 +46,8 @@ export const useNDVStore = defineStore(STORES.NDV, {
isDragging: false,
type: '',
data: '',
activeTargetId: null,
stickyPosition: null,
dimensions: null,
activeTarget: null,
},
isMappingOnboarded: useStorage(LOCAL_STORAGE_MAPPING_IS_ONBOARDED).value === 'true',
}),
@@ -56,7 +56,7 @@ export const useNDVStore = defineStore(STORES.NDV, {
const workflowsStore = useWorkflowsStore();
return workflowsStore.getNodeByName(this.activeNodeName || '');
},
ndvInputData(): IRunData[] {
ndvInputData(): INodeExecutionData[] {
const workflowsStore = useWorkflowsStore();
const executionData = workflowsStore.getWorkflowExecution;
const inputNodeName: string | undefined = this.input.nodeName;
@@ -94,7 +94,7 @@ export const useNDVStore = defineStore(STORES.NDV, {
return this.draggable.data;
},
canDraggableDrop(): boolean {
return this.draggable.activeTargetId !== null;
return this.draggable.activeTarget !== null;
},
outputPanelEditMode(): NDVState['output']['editMode'] {
return this.output.editMode;
@@ -106,7 +106,7 @@ export const useNDVStore = defineStore(STORES.NDV, {
};
},
draggableStickyPos(): XYPosition | null {
return this.draggable.stickyPosition;
return this.draggable.activeTarget?.stickyPosition ?? null;
},
ndvInputNodeName(): string | undefined {
return this.input.nodeName;
@@ -189,13 +189,21 @@ export const useNDVStore = defineStore(STORES.NDV, {
setMappableNDVInputFocus(paramName: string): void {
this.focusedMappableInput = paramName;
},
draggableStartDragging({ type, data }: { type: string; data: string }): void {
draggableStartDragging({
type,
data,
dimensions,
}: {
type: string;
data: string;
dimensions: DOMRect | null;
}): void {
this.draggable = {
isDragging: true,
type,
data,
activeTargetId: null,
stickyPosition: null,
dimensions,
activeTarget: null,
};
},
draggableStopDragging(): void {
@@ -203,15 +211,11 @@ export const useNDVStore = defineStore(STORES.NDV, {
isDragging: false,
type: '',
data: '',
activeTargetId: null,
stickyPosition: null,
activeTarget: null,
};
},
setDraggableStickyPos(position: XYPosition | null): void {
this.draggable.stickyPosition = position;
},
setDraggableTargetId(id: string | null): void {
this.draggable.activeTargetId = id;
setDraggableTarget(target: NDVState['draggable']['activeTarget']): void {
this.draggable.activeTarget = target;
},
setMappingTelemetry(telemetry: { [key: string]: string | number | boolean }): void {
this.mappingTelemetry = { ...this.mappingTelemetry, ...telemetry };