N8n 2349 workflow canvas revamp

packages/design-system/src/styleguide/border.stories.mdx

@@ -16,7 +16,7 @@ import VariableTable from './VariableTable.vue';
 <Canvas>
 	<Story name="border-radius">
 		{{
-			template: `<variable-table :variables="['--border-radius-small','--border-radius-base']" />`,
+			template: `<variable-table :variables="['--border-radius-small','--border-radius-base', '--border-radius-large', '--border-radius-xlarge']" />`,
 			components: {
 				VariableTable,
 			},

packages/design-system/src/styleguide/colors.stories.mdx

@@ -44,7 +44,7 @@ import ColorCircles from './ColorCircles.vue';
 <Canvas>
 	<Story name="success">
 		{{
-			template: `<color-circles :colors="['--color-success', '--color-success-tint-1', '--color-success-tint-2']" />`,
+			template: `<color-circles :colors="['--color-success', '--color-success-tint-1', '--color-success-tint-2', '--color-success-light']" />`,
 			components: {
 				ColorCircles,
 			},
@@ -109,7 +109,7 @@ import ColorCircles from './ColorCircles.vue';
 <Canvas>
 	<Story name="foreground">
 		{{
-			template: `<color-circles :colors="['--color-foreground-base', '--color-foreground-light', '--color-foreground-xlight']" />`,
+			template: `<color-circles :colors="['--color-foreground-xdark', '--color-foreground-dark', '--color-foreground-base', '--color-foreground-light', '--color-foreground-xlight']" />`,
 			components: {
 				ColorCircles,
 			},
@@ -129,3 +129,16 @@ import ColorCircles from './ColorCircles.vue';
 		}}
 	</Story>
 </Canvas>
+
+## Canvas
+
+<Canvas>
+	<Story name="canvas">
+		{{
+			template: `<color-circles :colors="['--color-canvas-background', '--color-canvas-dot']" />`,
+			components: {
+				ColorCircles,
+			},
+		}}
+	</Story>
+</Canvas>

packages/design-system/theme/src/_tokens.scss

@@ -75,6 +75,15 @@
 		var(--color-success-tint-2-l)
 	);
 
+	--color-success-light-h: 150;
+	--color-success-light-s: 54%;
+	--color-success-light-l: 70%;
+	--color-success-light: hsl(
+		var(--color-success-light-h),
+		var(--color-success-light-s),
+		var(--color-success-light-l)
+	);
+
 	--color-warning-h: 36;
 	--color-warning-s: 77%;
 	--color-warning-l: 57%;
@@ -187,6 +196,24 @@
 		var(--color-text-xlight-l)
 	);
 
+	--color-foreground-xdark-h: 220;
+	--color-foreground-xdark-s: 7.4%;
+	--color-foreground-xdark-l: 52.5%;
+	--color-foreground-xdark: hsl(
+		var(--color-foreground-xdark-h),
+		var(--color-foreground-xdark-s),
+		var(--color-foreground-xdark-l)
+	);
+
+	--color-foreground-dark-h: 228;
+	--color-foreground-dark-s: 9.6%;
+	--color-foreground-dark-l: 79.6%;
+	--color-foreground-dark: hsl(
+		var(--color-foreground-dark-h),
+		var(--color-foreground-dark-s),
+		var(--color-foreground-dark-l)
+	);
+
 	--color-foreground-base-h: 220;
 	--color-foreground-base-s: 20%;
 	--color-foreground-base-l: 88.2%;
@@ -259,6 +286,25 @@
 		var(--color-background-xlight-l)
 	);
 
+	--color-canvas-dot-h: 204;
+	--color-canvas-dot-s: 15.6%;
+	--color-canvas-dot-l: 87.5%;
+	--color-canvas-dot: hsl(
+		var(--color-canvas-dot-h),
+		var(--color-canvas-dot-s),
+		var(--color-canvas-dot-l)
+	);
+
+	--color-canvas-background-h: 260;
+	--color-canvas-background-s: 100%;
+	--color-canvas-background-l: 99.4%;
+	--color-canvas-background: hsl(
+		var(--color-canvas-background-h),
+		var(--color-canvas-background-s),
+		var(--color-canvas-background-l)
+	);
+
+	--border-radius-xlarge: 12px;
 	--border-radius-large: 8px;
 	--border-radius-base: 4px;
 	--border-radius-small: 2px;

packages/editor-ui/src/Interface.ts

@@ -22,32 +22,60 @@ import {
 	WorkflowExecuteMode,
 } from 'n8n-workflow';
 
-import {
-	PaintStyle,
-} from 'jsplumb';
-
 declare module 'jsplumb' {
+	interface PaintStyle {
+		stroke?: string;
+		fill?: string;
+		strokeWidth?: number;
+		outlineStroke?: string;
+		outlineWidth?: number;
+	}
+
 	interface Anchor {
 		lastReturnValue: number[];
 	}
 
 	interface Connection {
+		__meta?: {
+			sourceNodeName: string,
+			sourceOutputIndex: number,
+			targetNodeName: string,
+			targetOutputIndex: number,
+		};
+		connector?: {
+			setTargetEndpoint: (endpoint: Endpoint) => void;
+			resetTargetEndpoint: () => void;
+			bounds: {
+				minX: number;
+				maxX: number;
+				minY: number;
+				maxY: number;
+			}
+		};
+
 		// bind(event: string, (connection: Connection): void;): void; // tslint:disable-line:no-any
-		bind(event: string, callback: Function): void; // tslint:disable-line:no-any
+		bind(event: string, callback: Function): void;
 		removeOverlay(name: string): void;
 		removeOverlays(): void;
 		setParameter(name: string, value: any): void; // tslint:disable-line:no-any
 		setPaintStyle(arg0: PaintStyle): void;
 		addOverlay(arg0: any[]): void; // tslint:disable-line:no-any
 		setConnector(arg0: any[]): void; // tslint:disable-line:no-any
+		getUuids(): [string, string];
 	}
 
 	interface Endpoint {
+		__meta?: {
+			nodeName: string,
+			index: number,
+		};
 		getOverlay(name: string): any; // tslint:disable-line:no-any
 	}
 
 	interface Overlay {
 		setVisible(visible: boolean): void;
+		setLocation(location: number): void;
+		canvas?: HTMLElement;
 	}
 
 	interface OnConnectionBindInfo {
@@ -66,18 +94,14 @@ export interface IEndpointOptions {
 	dragProxy?: any; // tslint:disable-line:no-any
 	endpoint?: string;
 	endpointStyle?: object;
+	endpointHoverStyle?: object;
 	isSource?: boolean;
 	isTarget?: boolean;
 	maxConnections?: number;
 	overlays?: any; // tslint:disable-line:no-any
 	parameters?: any; // tslint:disable-line:no-any
 	uuid?: string;
-}
-
-export interface IConnectionsUi {
-	[key: string]: {
-		[key: string]: IEndpointOptions;
-	};
+	enabled?: boolean;
 }
 
 export interface IUpdateInformation {
@@ -95,20 +119,16 @@ export interface INodeUpdatePropertiesInformation {
 	};
 }
 
-export type XYPositon = [number, number];
+export type XYPosition = [number, number];
 
 export type MessageType = 'success' | 'warning' | 'info' | 'error';
 
 export interface INodeUi extends INode {
-	position: XYPositon;
+	position: XYPosition;
 	color?: string;
 	notes?: string;
 	issues?: INodeIssues;
-	_jsPlumb?: {
-		endpoints?: {
-			[key: string]: IEndpointOptions[];
-		};
-	};
+	name: string;
 }
 
 export interface INodeTypesMaxCount {
@@ -604,7 +624,7 @@ export interface IRootState {
 	lastSelectedNodeOutputIndex: number | null;
 	nodeIndex: Array<string | null>;
 	nodeTypes: INodeTypeDescription[];
-	nodeViewOffsetPosition: XYPositon;
+	nodeViewOffsetPosition: XYPosition;
 	nodeViewMoveInProgress: boolean;
 	selectedNodes: INodeUi[];
 	sessionId: string;
@@ -670,5 +690,13 @@ export interface IRestApiContext {
 
 export interface IZoomConfig {
 	scale: number;
-	offset: XYPositon;
+	offset: XYPosition;
+}
+
+export interface IBounds {
+	minX: number;
+	minY: number;
+	maxX: number;
+	maxY: number;
 }
+