n8n/packages/editor-ui/src/Interface.ts
Mutasem Aldmour d8598b0126
Workflow canvas revamp (#2388)
* bring back overrides

* fix input output label positions

* simply update label positions

* refactor a bunch

* update min x to show items

* hide overlay on connection

* only delete target connection, add maximum to push nodes out

* rename const

* rename const

* set new insert position

* fix insert behavior

* update position handling

* show arrow along with label

* update connector

* set endpoint styles

* update pattern

* push nodes up / down in case of if node

* set position in switch

* only one action at a time

* add custom flow chart type

* select start node by default when opening new workflow

* add enter delay

* fix delete bug

* change connection type

* add offset for if/switch/merge

* fix gap

* fix drag issue

* implement new states

* update disabled state

* add selected state

* make selects faster

* update positioning

* truncate when selected

* remove offset for actions

* fix icon scaling

* refactor js plumb

* fix looping behavior at close distance

* lock version

* change background to dots

* update endpoints styling

* increase spacing

* udpate node z-index

* fix output label positions

* fix output label positions

* reset location

* add label offset

* update border radius

* fix height issue

* fix parallaxing issue

* fix zoomout issue

* add success z-index

* clean up js file

* add package lock

* fix z-index bug

* update dot grid

* update zoom level

* set values, increase grid size

* fix drop position

* prevent duplicate connections

* fix stub

* use localstorage overrides for colors

* add colors to system

* revert no longer needed changes

* revert no longer needed changes

* add canvas colors

* add canvas colors

* use variable for id

* force type

* refactor helpers

* add label constants

* refactor func

* refactor

* fix

* refactor

* clean up css

* refactor setzoom level

* refactor

* refactor

* refactor func

* remove scope

* remove localstorage caching

* clean up imports

* update zero case

* add delete connection

* update selected state

* add base type, remove straight line

* add stub offset back

* rename param

* add label offset

* update font size of items

* move up label

* fix error state while executing

* disrespect stubs

* check for errors

* refactor position

* clean up extra space

* make entire node connectable

* Revert "make entire node connectable"

e304f7c5b8

* always show border

* add border to zoom buttons

* update spacing

* update colors

* allow connecting to entire node

* fix pull conn active

* two line names

* apply select to all lines

* increase input margin

* override target pos

* reset conn after pull

* fix types

* update orientation

* fix up connectors snapping

* hide arrow on pull

* update overrides for connectors

* change text

* update pull colors

* set to 1 line when selected

* fix executions bug

* build

* refactor node component

* remove comment

* refactor more

* remove prop

* fix build issue

* fix input drag bug in executions

* reset offset

* update select background

* handle issue when endpoints are not set

* fix connection aborted issue

* add try catch to help show errors

* wrap bind with try/catch

* set default styles

* reset pos despite zoom

* add more checks

* clean up impl

* update icon

* handle unknown types

* hide items on init

* fix importing unknown types with credentials

* change opacity

* push up item label

* update color

* update label class and colors

* add to drop distance

* fix z-index to match node

* disable eslint

* fix lasso tool selection

* update background color

* update waiting state

* update tooltip positions

* update wait node border

* fix selection bug mostly

* if selected, move above other nodes

* add line through disabled nodes

* remove node color option

* move label above connection

* success color for line through

* update options index

* hide waiting icon when disabled

* fix gmail icon

* refactor icons

* clear execution data on disable/delete

* fix selected node

* fix executing behavior

* optional __meta

* set grid size

* remove default color

* remove node color

* add comments

* comments

* add comments

* remove empty space

* update comment

* refactor uuids

* fix type issue

* Revert "fix type issue"

9523b34f96

* Revert "fix type issue"

9523b34f96

* Revert "refactor uuids"

07f6848065

* fix build issues

* refactor

* update uuid

* child nodes

* skip nodes behind when pushing in loop

* shift output icon for switch node

* don't show output if waiting

* waiting on init

* build

* change to bezier

* revert connector change

* add bezier type

* fix snapping

* clean up impl

* refactor func

* make const

* rename type

* refactor to simplify

* Revert "refactor to simplify"

2db0ed504c

* enable flowchart mode

* clean up flowchart type

* refactor type

* merge types

* configure curviness

* set in localstorage

* fix straight line arrow bug

* show arrow when pulling

* refactor / simplify

* fix target gap in bezier

* refactor target gap

* add comments

* add comment

* fix dragging connections

* fix bug when moving connection

* update comment

* rename file

* update values

* update minor

* update straight line box

* clean up conn types

* clean up z-indexes

* move color filters to node icon

* update background color

* update to use grid size value

* fix endpoint offsets

* set yspan range lower

* remove overlays when moving conn

* prevent unwanted connections

* fix messed up connections

* remove console log

* clear execution issues on workflow run

* update corner radius

* fix drag/delete bug

* increase offset

* update disabled state

* address comments

* refactor

* refactor func

*  Add full license text to N8nCustomConnectorType.js

Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>
2021-11-19 10:17:13 +01:00

704 lines
16 KiB
TypeScript

import {
IConnections,
ICredentialsDecrypted,
ICredentialsEncrypted,
ICredentialType,
IDataObject,
GenericValue,
IWorkflowSettings as IWorkflowSettingsWorkflow,
INode,
INodeCredentials,
INodeIssues,
INodeParameters,
INodePropertyOptions,
INodeTypeDescription,
INodeTypeNameVersion,
IRunExecutionData,
IRun,
IRunData,
ITaskData,
ITelemetrySettings,
WorkflowExecuteMode,
} from 'n8n-workflow';
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,
};
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; // 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 {
originalSourceEndpoint: Endpoint;
originalTargetEndpoint: Endpoint;
getParameters(): { index: number };
}
}
// EndpointOptions from jsplumb seems incomplete and wrong so we define an own one
export interface IEndpointOptions {
anchor?: any; // tslint:disable-line:no-any
createEndpoint?: boolean;
dragAllowedWhenFull?: boolean;
dropOptions?: any; // tslint:disable-line:no-any
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;
enabled?: boolean;
}
export interface IUpdateInformation {
name: string;
key: string;
value: string | number; // with null makes problems in NodeSettings.vue
node?: string;
oldValue?: string | number;
}
export interface INodeUpdatePropertiesInformation {
name: string; // Node-Name
properties: {
[key: string]: IDataObject;
};
}
export type XYPosition = [number, number];
export type MessageType = 'success' | 'warning' | 'info' | 'error';
export interface INodeUi extends INode {
position: XYPosition;
color?: string;
notes?: string;
issues?: INodeIssues;
name: string;
}
export interface INodeTypesMaxCount {
[key: string]: {
exist: number;
max: number;
nodeNames: string[];
};
}
export interface IExternalHooks {
run(eventName: string, metadata?: IDataObject): Promise<void>;
}
export interface IRestApi {
getActiveWorkflows(): Promise<string[]>;
getActivationError(id: string): Promise<IActivationError | undefined >;
getCurrentExecutions(filter: object): Promise<IExecutionsCurrentSummaryExtended[]>;
getPastExecutions(filter: object, limit: number, lastId?: string | number, firstId?: string | number): Promise<IExecutionsListResponse>;
stopCurrentExecution(executionId: string): Promise<IExecutionsStopData>;
makeRestApiRequest(method: string, endpoint: string, data?: any): Promise<any>; // tslint:disable-line:no-any
getNodeTypes(onlyLatest?: boolean): Promise<INodeTypeDescription[]>;
getNodesInformation(nodeInfos: INodeTypeNameVersion[]): Promise<INodeTypeDescription[]>;
getNodeParameterOptions(nodeTypeAndVersion: INodeTypeNameVersion, path: string, methodName: string, currentNodeParameters: INodeParameters, credentials?: INodeCredentials): Promise<INodePropertyOptions[]>;
removeTestWebhook(workflowId: string): Promise<boolean>;
runWorkflow(runData: IStartRunData): Promise<IExecutionPushResponse>;
createNewWorkflow(sendData: IWorkflowDataUpdate): Promise<IWorkflowDb>;
updateWorkflow(id: string, data: IWorkflowDataUpdate): Promise<IWorkflowDb>;
deleteWorkflow(name: string): Promise<void>;
getWorkflow(id: string): Promise<IWorkflowDb>;
getWorkflows(filter?: object): Promise<IWorkflowShortResponse[]>;
getWorkflowFromUrl(url: string): Promise<IWorkflowDb>;
getExecution(id: string): Promise<IExecutionResponse>;
deleteExecutions(sendData: IExecutionDeleteFilter): Promise<void>;
retryExecution(id: string, loadWorkflow?: boolean): Promise<boolean>;
getTimezones(): Promise<IDataObject>;
}
export interface IBinaryDisplayData {
index: number;
key: string;
node: string;
outputIndex: number;
runIndex: number;
}
export interface IStartRunData {
workflowData: IWorkflowData;
startNodes?: string[];
destinationNode?: string;
runData?: IRunData;
}
export interface IRunDataUi {
node?: string;
workflowData: IWorkflowData;
}
export interface ITableData {
columns: string[];
data: GenericValue[][];
}
export interface IVariableItemSelected {
variable: string;
}
export interface IVariableSelectorOption {
name: string;
key?: string;
value?: string;
options?: IVariableSelectorOption[] | null;
allowParentSelect?: boolean;
dataType?: string;
}
// Simple version of n8n-workflow.Workflow
export interface IWorkflowData {
id?: string | number;
name?: string;
active?: boolean;
nodes: INode[];
connections: IConnections;
settings?: IWorkflowSettings;
tags?: string[];
}
export interface IWorkflowDataUpdate {
id?: string | number;
name?: string;
nodes?: INode[];
connections?: IConnections;
settings?: IWorkflowSettings;
active?: boolean;
tags?: ITag[] | string[]; // string[] when store or requested, ITag[] from API response
}
export interface IWorkflowTemplate {
id: string;
name: string;
workflow: {
nodes: INodeUi[];
connections: IConnections;
};
}
// Almost identical to cli.Interfaces.ts
export interface IWorkflowDb {
id: string;
name: string;
active: boolean;
createdAt: number | string;
updatedAt: number | string;
nodes: INodeUi[];
connections: IConnections;
settings?: IWorkflowSettings;
tags?: ITag[] | string[]; // string[] when store or requested, ITag[] from API response
}
// Identical to cli.Interfaces.ts
export interface IWorkflowShortResponse {
id: string;
name: string;
active: boolean;
createdAt: number | string;
updatedAt: number | string;
tags: ITag[];
}
// Identical or almost identical to cli.Interfaces.ts
export interface IActivationError {
time: number;
error: {
message: string;
};
}
export interface ICredentialsResponse extends ICredentialsEncrypted {
id: string;
createdAt: number | string;
updatedAt: number | string;
}
export interface ICredentialsBase {
createdAt: number | string;
updatedAt: number | string;
}
export interface ICredentialsDecryptedResponse extends ICredentialsBase, ICredentialsDecrypted{
id: string;
}
export interface IExecutionBase {
id?: number | string;
finished: boolean;
mode: WorkflowExecuteMode;
retryOf?: string;
retrySuccessId?: string;
startedAt: Date;
stoppedAt?: Date;
workflowId?: string; // To be able to filter executions easily //
}
export interface IExecutionFlatted extends IExecutionBase {
data: string;
workflowData: IWorkflowDb;
}
export interface IExecutionFlattedResponse extends IExecutionFlatted {
id: string;
}
export interface IExecutionPushResponse {
executionId?: string;
waitingForWebhook?: boolean;
}
export interface IExecutionResponse extends IExecutionBase {
id: string;
data: IRunExecutionData;
workflowData: IWorkflowDb;
}
export interface IExecutionShortResponse {
id: string;
workflowData: {
id: string;
name: string;
};
mode: WorkflowExecuteMode;
finished: boolean;
startedAt: Date;
stoppedAt: Date;
executionTime?: number;
}
export interface IExecutionsListResponse {
count: number;
results: IExecutionsSummary[];
estimated: boolean;
}
export interface IExecutionsCurrentSummaryExtended {
id: string;
finished?: boolean;
mode: WorkflowExecuteMode;
retryOf?: string;
retrySuccessId?: string;
startedAt: Date;
stoppedAt?: Date;
workflowId: string;
workflowName?: string;
}
export interface IExecutionsStopData {
finished?: boolean;
mode: WorkflowExecuteMode;
startedAt: Date;
stoppedAt: Date;
}
export interface IExecutionsSummary {
id: string;
mode: WorkflowExecuteMode;
finished?: boolean;
retryOf?: string;
retrySuccessId?: string;
waitTill?: Date;
startedAt: Date;
stoppedAt?: Date;
workflowId: string;
workflowName?: string;
}
export interface IExecutionDeleteFilter {
deleteBefore?: Date;
filters?: IDataObject;
ids?: string[];
}
export type IPushDataType = IPushData['type'];
export type IPushData =
| PushDataExecutionFinished
| PushDataExecutionStarted
| PushDataExecuteAfter
| PushDataExecuteBefore
| PushDataConsoleMessage
| PushDataTestWebhook;
type PushDataExecutionFinished = {
data: IPushDataExecutionFinished;
type: 'executionFinished';
};
type PushDataExecutionStarted = {
data: IPushDataExecutionStarted;
type: 'executionStarted';
};
type PushDataExecuteAfter = {
data: IPushDataNodeExecuteAfter;
type: 'nodeExecuteAfter';
};
type PushDataExecuteBefore = {
data: IPushDataNodeExecuteBefore;
type: 'nodeExecuteBefore';
};
type PushDataConsoleMessage = {
data: IPushDataConsoleMessage;
type: 'sendConsoleMessage';
};
type PushDataTestWebhook = {
data: IPushDataTestWebhook;
type: 'testWebhookDeleted' | 'testWebhookReceived';
};
export interface IPushDataExecutionStarted {
executionId: string;
mode: WorkflowExecuteMode;
startedAt: Date;
retryOf?: string;
workflowId: string;
workflowName?: string;
}
export interface IPushDataExecutionFinished {
data: IRun;
executionId: string;
retryOf?: string;
}
export interface IPushDataExecutionStarted {
executionId: string;
}
export interface IPushDataNodeExecuteAfter {
data: ITaskData;
executionId: string;
nodeName: string;
}
export interface IPushDataNodeExecuteBefore {
executionId: string;
nodeName: string;
}
export interface IPushDataTestWebhook {
executionId: string;
workflowId: string;
}
export interface IPushDataConsoleMessage {
source: string;
message: string;
}
export interface IVersionNotificationSettings {
enabled: boolean;
endpoint: string;
infoUrl: string;
}
export type IPersonalizationSurveyKeys = 'companySize' | 'codingSkill' | 'workArea' | 'otherWorkArea';
export type IPersonalizationSurveyAnswers = {
[key in IPersonalizationSurveyKeys]: string | null
};
export interface IPersonalizationSurvey {
answers?: IPersonalizationSurveyAnswers;
shouldShow: boolean;
}
export interface IN8nUISettings {
endpointWebhook: string;
endpointWebhookTest: string;
saveDataErrorExecution: string;
saveDataSuccessExecution: string;
saveManualExecutions: boolean;
timezone: string;
executionTimeout: number;
maxExecutionTimeout: number;
oauthCallbackUrls: {
oauth1: string;
oauth2: string;
};
urlBaseWebhook: string;
versionCli: string;
n8nMetadata?: {
[key: string]: string | number | undefined;
};
versionNotifications: IVersionNotificationSettings;
instanceId: string;
personalizationSurvey?: IPersonalizationSurvey;
telemetry: ITelemetrySettings;
}
export interface IWorkflowSettings extends IWorkflowSettingsWorkflow {
errorWorkflow?: string;
saveDataErrorExecution?: string;
saveDataSuccessExecution?: string;
saveManualExecutions?: boolean;
timezone?: string;
executionTimeout?: number;
}
export interface ITimeoutHMS {
hours: number;
minutes: number;
seconds: number;
}
export type WorkflowTitleStatus = 'EXECUTING' | 'IDLE' | 'ERROR';
export type MenuItemType = 'link';
export type MenuItemPosition = 'top' | 'bottom';
export interface IMenuItem {
id: string;
type: MenuItemType;
position?: MenuItemPosition;
properties: ILinkMenuItemProperties;
}
export interface ILinkMenuItemProperties {
title: string;
icon: string;
href: string;
newWindow?: boolean;
}
export interface ISubcategoryItemProps {
subcategory: string;
description: string;
}
export interface INodeItemProps {
subcategory: string;
nodeType: INodeTypeDescription;
}
export interface ICategoryItemProps {
expanded: boolean;
}
export interface INodeCreateElement {
type: 'node' | 'category' | 'subcategory';
category: string;
key: string;
includedByTrigger?: boolean;
includedByRegular?: boolean;
properties: ISubcategoryItemProps | INodeItemProps | ICategoryItemProps;
}
export interface ICategoriesWithNodes {
[category: string]: {
[subcategory: string]: {
regularCount: number;
triggerCount: number;
nodes: INodeCreateElement[];
};
};
}
export interface ITag {
id: string;
name: string;
usageCount?: number;
}
export interface ITagRow {
tag?: ITag;
usage?: string;
create?: boolean;
disable?: boolean;
update?: boolean;
delete?: boolean;
}
export interface IVersion {
name: string;
nodes: IVersionNode[];
createdAt: string;
description: string;
documentationUrl: string;
hasBreakingChange: boolean;
hasSecurityFix: boolean;
hasSecurityIssue: boolean;
securityIssueFixVersion: string;
}
export interface IVersionNode {
name: string;
displayName: string;
icon: string;
defaults: INodeParameters;
iconData: {
type: string;
icon?: string;
fileBuffer?: string;
};
}
export interface IRootState {
activeExecutions: IExecutionsCurrentSummaryExtended[];
activeWorkflows: string[];
activeActions: string[];
activeNode: string | null;
baseUrl: string;
endpointWebhook: string;
endpointWebhookTest: string;
executionId: string | null;
executingNode: string | null;
executionWaitingForWebhook: boolean;
pushConnectionActive: boolean;
saveDataErrorExecution: string;
saveDataSuccessExecution: string;
saveManualExecutions: boolean;
timezone: string;
stateIsDirty: boolean;
executionTimeout: number;
maxExecutionTimeout: number;
versionCli: string;
oauthCallbackUrls: object;
n8nMetadata: object;
workflowExecutionData: IExecutionResponse | null;
lastSelectedNode: string | null;
lastSelectedNodeOutputIndex: number | null;
nodeIndex: Array<string | null>;
nodeTypes: INodeTypeDescription[];
nodeViewOffsetPosition: XYPosition;
nodeViewMoveInProgress: boolean;
selectedNodes: INodeUi[];
sessionId: string;
urlBaseWebhook: string;
workflow: IWorkflowDb;
sidebarMenuItems: IMenuItem[];
instanceId: string;
telemetry: ITelemetrySettings | null;
}
export interface ICredentialTypeMap {
[name: string]: ICredentialType;
}
export interface ICredentialMap {
[name: string]: ICredentialsResponse;
}
export interface ICredentialsState {
credentialTypes: ICredentialTypeMap;
credentials: ICredentialMap;
}
export interface ITagsState {
tags: { [id: string]: ITag };
isLoading: boolean;
fetchedAll: boolean;
fetchedUsageCount: boolean;
}
export interface IModalState {
open: boolean;
mode?: string | null;
activeId?: string | null;
}
export interface IUiState {
sidebarMenuCollapsed: boolean;
modalStack: string[];
modals: {
[key: string]: IModalState;
};
isPageLoading: boolean;
}
export interface ISettingsState {
settings: IN8nUISettings;
}
export interface IVersionsState {
versionNotificationSettings: IVersionNotificationSettings;
nextVersions: IVersion[];
currentVersion: IVersion | undefined;
}
export interface IWorkflowsState {
}
export interface IRestApiContext {
baseUrl: string;
sessionId: string;
}
export interface IZoomConfig {
scale: number;
offset: XYPosition;
}
export interface IBounds {
minX: number;
minY: number;
maxX: number;
maxY: number;
}