mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-18 10:31:15 +00:00
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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user