refactor(editor): Migrate mouseSelect & deviceSupportHelpers mixins to composables (no-changelog) (#5775)

* refactor(editor): Migrate mouseSelect & deviceSupportHelpers mixins to composables (no-changelog)

* Fix node drop position and correct event listeners
This commit is contained in:
OlegIvaniv
2023-03-24 14:52:06 +01:00
committed by GitHub
parent c9d9069c0e
commit 78c9707fa7
5 changed files with 294 additions and 247 deletions

View File

@@ -203,10 +203,10 @@ import {
import { copyPaste } from '@/mixins/copyPaste';
import { externalHooks } from '@/mixins/externalHooks';
import { genericHelpers } from '@/mixins/genericHelpers';
import { mouseSelect } from '@/mixins/mouseSelect';
import { moveNodeWorkflow } from '@/mixins/moveNodeWorkflow';
import { restApi } from '@/mixins/restApi';
import useGlobalLinkActions from '@/composables/useGlobalLinkActions';
import useCanvasMouseSelect from '@/composables/useCanvasMouseSelect';
import { showMessage } from '@/mixins/showMessage';
import { titleChange } from '@/mixins/titleChange';
@@ -321,7 +321,6 @@ export default mixins(
copyPaste,
externalHooks,
genericHelpers,
mouseSelect,
moveNodeWorkflow,
restApi,
showMessage,
@@ -342,10 +341,9 @@ export default mixins(
CanvasControls,
},
setup() {
const { registerCustomAction, unregisterCustomAction } = useGlobalLinkActions();
return {
registerCustomAction,
unregisterCustomAction,
...useCanvasMouseSelect(),
...useGlobalLinkActions(),
};
},
errorCaptured: (err, vm, info) => {
@@ -592,14 +590,12 @@ export default mixins(
GRID_SIZE: NodeViewUtils.GRID_SIZE,
STICKY_NODE_TYPE,
createNodeActive: false,
lastSelectedConnection: null as null | Connection,
lastClickPosition: [450, 450] as XYPosition,
ctrlKeyPressed: false,
moveCanvasKeyPressed: false,
stopExecutionInProgress: false,
blankRedirect: false,
credentialsUpdated: false,
newNodeInsertPosition: null as XYPosition | null,
pullConnActiveNodeName: null as string | null,
pullConnActive: false,
dropPrevented: false,
@@ -1682,7 +1678,8 @@ export default mixins(
// If adding more than one node, offset the X position
mousePosition[0] -
NodeViewUtils.NODE_SIZE / 2 +
NodeViewUtils.NODE_SIZE * (index * 2 + NodeViewUtils.GRID_SIZE),
NodeViewUtils.NODE_SIZE * index * 2 +
NodeViewUtils.GRID_SIZE,
mousePosition[1] - NodeViewUtils.NODE_SIZE / 2,
] as XYPosition,
dragAndDrop: true,
@@ -1711,8 +1708,8 @@ export default mixins(
this.nodeSelected(node);
this.uiStore.lastSelectedNode = node.name;
this.uiStore.lastSelectedNodeOutputIndex = null;
this.lastSelectedConnection = null;
this.newNodeInsertPosition = null;
this.canvasStore.lastSelectedConnection = null;
this.canvasStore.newNodeInsertPosition = null;
if (setActive) {
this.ndvStore.activeNodeName = node.name;
@@ -1854,7 +1851,7 @@ export default mixins(
options.position,
);
} else if (lastSelectedNode) {
const lastSelectedConnection = this.lastSelectedConnection;
const lastSelectedConnection = this.canvasStore.lastSelectedConnection;
if (lastSelectedConnection) {
// set when injecting into a connection
const [diffX] = NodeViewUtils.getConnectorLengths(lastSelectedConnection);
@@ -1868,12 +1865,12 @@ export default mixins(
}
// set when pulling connections
if (this.newNodeInsertPosition) {
if (this.canvasStore.newNodeInsertPosition) {
newNodeData.position = NodeViewUtils.getNewNodePosition(this.nodes, [
this.newNodeInsertPosition[0] + NodeViewUtils.GRID_SIZE,
this.newNodeInsertPosition[1] - NodeViewUtils.NODE_SIZE / 2,
this.canvasStore.newNodeInsertPosition[0] + NodeViewUtils.GRID_SIZE,
this.canvasStore.newNodeInsertPosition[1] - NodeViewUtils.NODE_SIZE / 2,
]);
this.newNodeInsertPosition = null;
this.canvasStore.newNodeInsertPosition = null;
} else {
let yOffset = 0;
@@ -2035,7 +2032,7 @@ export default mixins(
return;
}
const lastSelectedConnection = this.lastSelectedConnection;
const lastSelectedConnection = this.canvasStore.lastSelectedConnection;
const lastSelectedNode = this.lastSelectedNode;
const lastSelectedNodeOutputIndex = this.uiStore.lastSelectedNodeOutputIndex;
@@ -2087,10 +2084,10 @@ export default mixins(
this.uiStore.lastSelectedNode = sourceNode.name;
this.uiStore.lastSelectedNodeOutputIndex = info.index;
this.newNodeInsertPosition = null;
this.canvasStore.newNodeInsertPosition = null;
if (info.connection) {
this.lastSelectedConnection = info.connection;
this.canvasStore.lastSelectedConnection = info.connection;
}
this.onToggleNodeCreator({
@@ -2363,7 +2360,7 @@ export default mixins(
try {
this.pullConnActiveNodeName = null;
this.pullConnActive = true;
this.newNodeInsertPosition = null;
this.canvasStore.newNodeInsertPosition = null;
NodeViewUtils.resetConnection(connection);
const nodes = [...document.querySelectorAll('.node-wrapper')];
@@ -2414,7 +2411,7 @@ export default mixins(
const onMouseUp = (e: MouseEvent | TouchEvent) => {
this.pullConnActive = false;
this.newNodeInsertPosition = this.getMousePositionWithinNodeView(e);
this.canvasStore.newNodeInsertPosition = this.getMousePositionWithinNodeView(e);
NodeViewUtils.resetConnectionAfterPull(connection);
window.removeEventListener('mousemove', onMouseMove);
window.removeEventListener('mouseup', onMouseUp);