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>
This commit is contained in:
OlegIvaniv
2023-01-30 18:20:50 +01:00
committed by GitHub
parent 5cb7e5007d
commit 766501723b
30 changed files with 1756 additions and 2268 deletions

View File

@@ -1,17 +1,6 @@
import { CREDENTIAL_EDIT_MODAL_KEY } from './constants';
/* eslint-disable @typescript-eslint/no-explicit-any */
import { IMenuItem } from 'n8n-design-system';
import {
jsPlumbInstance,
DragOptions,
DropOptions,
ElementGroupRef,
Endpoint,
EndpointOptions,
EndpointRectangle,
EndpointRectangleOptions,
EndpointSpec,
} from 'jsplumb';
import {
GenericValue,
IConnections,
@@ -47,98 +36,6 @@ import { BulkCommand, Undoable } from '@/models/history';
export * from 'n8n-design-system/types';
declare module 'jsplumb' {
interface PaintStyle {
stroke?: string;
fill?: string;
strokeWidth?: number;
outlineStroke?: string;
outlineWidth?: number;
}
// Extend jsPlumb Anchor interface
interface Anchor {
lastReturnValue: number[];
}
interface Connection {
__meta?: {
sourceNodeName: string;
sourceOutputIndex: number;
targetNodeName: string;
targetOutputIndex: number;
};
canvas?: HTMLElement;
connector?: {
setTargetEndpoint: (endpoint: Endpoint) => void;
resetTargetEndpoint: () => void;
bounds: {
minX: number;
maxX: number;
minY: number;
maxY: number;
};
};
// bind(event: string, (connection: Connection): void;): void;
bind(event: string, callback: Function): void;
removeOverlay(name: string): void;
removeOverlays(): void;
setParameter(name: string, value: any): void;
setPaintStyle(arg0: PaintStyle): void;
addOverlay(arg0: any[]): void;
setConnector(arg0: any[]): void;
getUuids(): [string, string];
}
interface Endpoint {
endpoint: any;
elementId: string;
__meta?: {
nodeName: string;
nodeId: string;
index: number;
totalEndpoints: number;
};
getUuid(): string;
getOverlay(name: string): any;
repaint(params?: object): void;
}
interface N8nPlusEndpoint extends Endpoint {
setSuccessOutput(message: string): void;
clearSuccessOutput(): void;
}
interface Overlay {
setVisible(visible: boolean): void;
setLocation(location: number): void;
canvas?: HTMLElement;
}
interface OnConnectionBindInfo {
originalSourceEndpoint: Endpoint;
originalTargetEndpoint: Endpoint;
getParameters(): { index: number };
}
}
// EndpointOptions from jsplumb seems incomplete and wrong so we define an own one
export type IEndpointOptions = Omit<EndpointOptions, 'endpoint' | 'dragProxy'> & {
endpointStyle: EndpointStyle;
endpointHoverStyle: EndpointStyle;
endpoint?: EndpointSpec | string;
dragAllowedWhenFull?: boolean;
dropOptions?: DropOptions & {
tolerance: string;
};
dragProxy?:
| string
| string[]
| EndpointSpec
| [EndpointRectangle, EndpointRectangleOptions & { strokeWidth: number }];
};
export type EndpointStyle = {
width?: number;
height?: number;
@@ -152,21 +49,6 @@ export type EndpointStyle = {
hoverMessage?: string;
};
export type IDragOptions = DragOptions & {
grid: [number, number];
filter: string;
};
export type IJsPlumbInstance = Omit<jsPlumbInstance, 'addEndpoint' | 'draggable'> & {
clearDragSelection: () => void;
addEndpoint(
el: ElementGroupRef,
params?: IEndpointOptions,
referenceParams?: IEndpointOptions,
): Endpoint | Endpoint[];
draggable(el: {}, options?: IDragOptions): IJsPlumbInstance;
};
export interface IUpdateInformation {
name: string;
key?: string;