Files
n8n-enterprise-unlocked/packages/editor-ui/src/utils/canvasUtils.ts
T
766501723b refactor(editor): Upgrade to jsPlumb 5 (#4989)
* WIP: Nodeview

* Replace types

* Finish N8nPlus endpoint type

* Working on connector

* Apply prettier

* Fixed prettier issues

* Debugging rendering

* Fixed connectorrs position recalc

* Fix snapping and output labels, WIP dragging

* Fix N8nPlus endpoint rendering issues

* Cleanup

* Fix undo/redo and canvas add button position, cleanup

* Cleanup

* Revert accidental CLI changes

* Fix pnpm-lock

* Address bugs that came up during review

* Reset CLI package from master

* Various fixes

* Fix run items label toggling

* Linter fixes

* Fix stalk size for larger run items label

* Remove comment

* Correctly reset workspace after renaming the node

* Fix canvas e2e tests

* Fix undo/redo tests

* Fix stalk positioning and triggering of endpoint overlays

* Repaint connections on pin removal

* Limit repaintings

* Unbind jsPlumb events on deactivation

* Fix jsPlumb managment of Sticky and minor memort managment improvments

* Address rest of PR points

* Lint fix

* Copy patches folder to docker

* Fix e2e tests

* set allowNonAppliedPatches to allow build

* fix(editor): Handling router errors when navigation is canceled by user (#5271)

* 🔨 Handling router errors in main sidebar, removing unused code
* 🔨 Handling router errors in modals

* ci(core): Fix docker nightly/custom image build (no-changelog) (#5284)

* ci(core): Copy patches dir to Docker (no-changelog)

* Update patch

* Update package-lock

* reapply the patch

* skip patchedDependencies after the frontend is built

---------

Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in>

* Fix connector hover state on success

* Remove allowNonAppliedPatches from package.json

---------

Co-authored-by: Milorad FIlipović <milorad@n8n.io>
Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in>
2023-01-30 18:20:50 +01:00

120 lines
3.1 KiB
TypeScript

import { MAIN_HEADER_TABS, VIEWS } from '@/constants';
import { IZoomConfig } from '@/Interface';
import { useWorkflowsStore } from '@/stores/workflows';
import { ConnectionDetachedParams } from '@jsplumb/core';
import { IConnection } from 'n8n-workflow';
import { Route } from 'vue-router';
/*
Constants and utility functions mainly used by canvas store
and components used to display workflow in node view.
These are general-purpose functions that are exported
with this module and should be used by importing from
'@/utils'.
*/
export const scaleSmaller = ({ scale, offset: [xOffset, yOffset] }: IZoomConfig): IZoomConfig => {
scale /= 1.25;
xOffset /= 1.25;
yOffset /= 1.25;
xOffset += window.innerWidth / 10;
yOffset += window.innerHeight / 10;
return {
scale,
offset: [xOffset, yOffset],
};
};
export const scaleBigger = ({ scale, offset: [xOffset, yOffset] }: IZoomConfig): IZoomConfig => {
scale *= 1.25;
xOffset -= window.innerWidth / 10;
yOffset -= window.innerHeight / 10;
xOffset *= 1.25;
yOffset *= 1.25;
return {
scale,
offset: [xOffset, yOffset],
};
};
export const scaleReset = (config: IZoomConfig): IZoomConfig => {
if (config.scale > 1) {
// zoomed in
while (config.scale > 1) {
config = scaleSmaller(config);
}
} else {
while (config.scale < 1) {
config = scaleBigger(config);
}
}
config.scale = 1;
return config;
};
export const closestNumberDivisibleBy = (inputNumber: number, divisibleBy: number): number => {
const quotient = Math.ceil(inputNumber / divisibleBy);
// 1st possible closest number
const inputNumber1 = divisibleBy * quotient;
// 2nd possible closest number
const inputNumber2 =
inputNumber * divisibleBy > 0 ? divisibleBy * (quotient + 1) : divisibleBy * (quotient - 1);
// if true, then inputNumber1 is the required closest number
if (Math.abs(inputNumber - inputNumber1) < Math.abs(inputNumber - inputNumber2)) {
return inputNumber1;
}
// else inputNumber2 is the required closest number
return inputNumber2;
};
export const getNodeViewTab = (route: Route): string | null => {
const routeMeta = route.meta;
if (routeMeta && routeMeta.nodeView === true) {
return MAIN_HEADER_TABS.WORKFLOW;
} else {
const executionTabRoutes = [
VIEWS.WORKFLOW_EXECUTIONS.toString(),
VIEWS.EXECUTION_PREVIEW.toString(),
VIEWS.EXECUTION_HOME.toString(),
];
if (executionTabRoutes.includes(route.name || '')) {
return MAIN_HEADER_TABS.EXECUTIONS;
}
}
return null;
};
export const getConnectionInfo = (
connection: ConnectionDetachedParams,
): [IConnection, IConnection] | null => {
const sourceInfo = connection.sourceEndpoint.parameters;
const targetInfo = connection.targetEndpoint.parameters;
const sourceNode = useWorkflowsStore().getNodeById(sourceInfo.nodeId);
const targetNode = useWorkflowsStore().getNodeById(targetInfo.nodeId);
if (sourceNode && targetNode) {
return [
{
node: sourceNode.name,
type: sourceInfo.type,
index: sourceInfo.index,
},
{
node: targetNode.name,
type: targetInfo.type,
index: targetInfo.index,
},
];
}
return null;
};