diff --git a/packages/editor-ui/src/components/mixins/nodeBase.ts b/packages/editor-ui/src/components/mixins/nodeBase.ts index d50464840d..92da0b8c63 100644 --- a/packages/editor-ui/src/components/mixins/nodeBase.ts +++ b/packages/editor-ui/src/components/mixins/nodeBase.ts @@ -280,7 +280,7 @@ export const nodeBase = mixins( // https://jsplumb.github.io/jsplumb/home.html // Make nodes draggable this.instance.draggable(this.nodeName, { - grid: [10, 10], + grid: [20, 20], start: (params: { e: MouseEvent }) => { if (this.isReadOnly === true) { // Do not allow to move nodes in readOnly mode diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts index 68df563d8b..fa1ab10baa 100644 --- a/packages/editor-ui/src/constants.ts +++ b/packages/editor-ui/src/constants.ts @@ -117,10 +117,3 @@ export const COMPANY_SIZE_PERSONAL_USE = 'personalUser'; export const CODING_SKILL_KEY = 'codingSkill'; export const OTHER_WORK_AREA_KEY = 'otherWorkArea'; -if (!window.localStorage.getItem('JSPLUMB_FLOWCHART_STUB')) { - window.localStorage.setItem('JSPLUMB_FLOWCHART_STUB', '20'); -} -// @ts-ignore -const _JSPLUMB_FLOWCHART_STUB = parseInt(window.localStorage.getItem('JSPLUMB_FLOWCHART_STUB'), 10); -export const JSPLUMB_FLOWCHART_STUB = _JSPLUMB_FLOWCHART_STUB; - diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue index d7d39d6545..a377ff7e0a 100644 --- a/packages/editor-ui/src/views/NodeView.vue +++ b/packages/editor-ui/src/views/NodeView.vue @@ -114,7 +114,7 @@ import { } from 'jsplumb'; import { MessageBoxInputData } from 'element-ui/types/message-box'; import { jsPlumb, Endpoint, OnConnectionBindInfo } from 'jsplumb'; -import { JSPLUMB_FLOWCHART_STUB, NODE_NAME_PREFIX, PLACEHOLDER_EMPTY_WORKFLOW_ID, START_NODE_TYPE, WEBHOOK_NODE_TYPE, WORKFLOW_OPEN_MODAL_KEY } from '@/constants'; +import { NODE_NAME_PREFIX, PLACEHOLDER_EMPTY_WORKFLOW_ID, START_NODE_TYPE, WEBHOOK_NODE_TYPE, WORKFLOW_OPEN_MODAL_KEY } from '@/constants'; import { copyPaste } from '@/components/mixins/copyPaste'; import { externalHooks } from '@/components/mixins/externalHooks'; import { genericHelpers } from '@/components/mixins/genericHelpers'; @@ -135,7 +135,7 @@ import NodeCreator from '@/components/NodeCreator/NodeCreator.vue'; import NodeSettings from '@/components/NodeSettings.vue'; import RunData from '@/components/RunData.vue'; -import { getLeftmostTopNode, getWorkflowCorners, scaleSmaller, scaleBigger, scaleReset, showOrHideMidpointArrow, getIcon, getNewNodePosition, hideOverlay, showOrHideItemsLabel, showOverlay, OVERLAY_ENDPOINT_ARROW_ID, OVERLAY_MIDPOINT_ARROW_ID, OVERLAY_DROP_NODE_ID, OVERLAY_RUN_ITEMS_ID, OVERLAY_CONNECTION_ACTIONS_ID, getConnectorLengths, getRelativePosition, getMousePosition } from './canvasHelpers'; +import { JSPLUMB_FLOWCHART_STUB, getLeftmostTopNode, getWorkflowCorners, scaleSmaller, scaleBigger, scaleReset, showOrHideMidpointArrow, getIcon, getNewNodePosition, hideOverlay, showOrHideItemsLabel, showOverlay, OVERLAY_ENDPOINT_ARROW_ID, OVERLAY_MIDPOINT_ARROW_ID, OVERLAY_DROP_NODE_ID, OVERLAY_RUN_ITEMS_ID, OVERLAY_CONNECTION_ACTIONS_ID, getConnectorLengths, getRelativePosition, getMousePosition } from './canvasHelpers'; import mixins from 'vue-typed-mixins'; import { v4 as uuidv4} from 'uuid'; @@ -175,10 +175,11 @@ import { getStyleTokenValue } from '@/components/helpers'; import '../plugins/N8nFlowchartType'; const NODE_SIZE = 100; -const DEFAULT_START_POSITION_X = 250; +const DEFAULT_START_POSITION_X = 240; const DEFAULT_START_POSITION_Y = 300; const HEADER_HEIGHT = 65; const SIDEBAR_WIDTH = 65; +const MAX_X_TO_PUSH_DOWNSTREAM_NODES = 300; const DEFAULT_START_NODE = { name: 'Start', @@ -191,35 +192,10 @@ const DEFAULT_START_NODE = { parameters: {}, }; -if (!window.localStorage.getItem('CURVINESS')) { - window.localStorage.setItem('CURVINESS', '150'); -} -// @ts-ignore -const _CURVINESS = parseInt(window.localStorage.getItem('CURVINESS'), 10); - -if (!window.localStorage.getItem('OUTLINE_STROKE_COLOR')) { - window.localStorage.setItem('OUTLINE_STROKE_COLOR', 'transparent'); -} -// @ts-ignore -const _OUTLINE_STROKE_COLOR = window.localStorage.getItem('OUTLINE_STROKE_COLOR') as string; - -if (!window.localStorage.getItem('OUTLINE_STROKE_WIDTH')) { - window.localStorage.setItem('OUTLINE_STROKE_WIDTH', '12'); -} -// @ts-ignore -const _OUTLINE_STROKE_WIDTH = parseInt(window.localStorage.getItem('OUTLINE_STROKE_WIDTH'), 10); - -if (!window.localStorage.getItem('ALWAYS_RESPECT_STUB')) { - window.localStorage.setItem('ALWAYS_RESPECT_STUB', 'true'); -} -// @ts-ignore -const _ALWAYS_RESPECT_STUB = window.localStorage.getItem('ALWAYS_RESPECT_STUB') === 'true'; - -if (!window.localStorage.getItem('PUSH_NODES_LENGTH')) { - window.localStorage.setItem('PUSH_NODES_LENGTH', '200'); -} -// @ts-ignore -const _PUSH_NODES_LENGTH = parseInt(window.localStorage.getItem('PUSH_NODES_LENGTH'), 10); +const _OUTLINE_STROKE_COLOR = 'transparent'; +const _OUTLINE_STROKE_WIDTH = 12; +const _ALWAYS_RESPECT_STUB = true; +const _PUSH_NODES_LENGTH = 200; const CONNECTOR_PAINT_STYLE_DEFAULT: PaintStyle = { stroke: getStyleTokenValue('--color-foreground-dark'), @@ -256,8 +232,8 @@ const getFlowChartType = (connection: Connection) => { stub: JSPLUMB_FLOWCHART_STUB + 10 * outputIndex + 10 * inputIndex + labelOffset, gap: 5, alwaysRespectStubs: _ALWAYS_RESPECT_STUB, - yOffset: NODE_SIZE + 5, - loopbackMinimum: 150, + yOffset: NODE_SIZE, + loopbackMinimum: 140, }]; }; @@ -299,13 +275,6 @@ const CONNECTOR_DROP_NODE_OVERLAY: OverlaySpec[] = [ ], ]; - -if (!window.localStorage.getItem('MAX_X_TO_PUSH_DOWNSTREAM_NODES')) { - window.localStorage.setItem('MAX_X_TO_PUSH_DOWNSTREAM_NODES', '300'); -} -// @ts-ignore -const MAX_X_TO_PUSH_DOWNSTREAM_NODES = parseInt(window.localStorage.getItem('MAX_X_TO_PUSH_DOWNSTREAM_NODES'), 10); - const addOverlays = (connection: Connection, overlays: OverlaySpec[]) => { overlays.forEach((overlay: OverlaySpec) => { connection.addOverlay(overlay); @@ -1364,7 +1333,7 @@ export default mixins( if (lastSelectedConnection) { const sourceNodeType = this.$store.getters.nodeType(lastSelectedNode.type); - const offsets = [[-100, 100], [-150, 0, 150], [-250, -100, 100, 250]]; + const offsets = [[-100, 100], [-140, 0, 140], [-240, -100, 100, 240]]; if (sourceNodeType && sourceNodeType.outputs.length > 1) { const offset = offsets[sourceNodeType.outputs.length - 2]; yOffset = offset[lastSelectedConnection.__meta.sourceOutputIndex]; diff --git a/packages/editor-ui/src/views/canvasHelpers.ts b/packages/editor-ui/src/views/canvasHelpers.ts index 8758c636cc..b0613c8e1d 100644 --- a/packages/editor-ui/src/views/canvasHelpers.ts +++ b/packages/editor-ui/src/views/canvasHelpers.ts @@ -1,24 +1,15 @@ import { INodeUi, IZoomConfig, XYPositon } from "@/Interface"; -import { Connection, OverlaySpec } from "jsplumb"; +import { Connection } from "jsplumb"; export const OVERLAY_DROP_NODE_ID = 'drop-add-node'; export const OVERLAY_MIDPOINT_ARROW_ID = 'midpoint-arrow'; export const OVERLAY_ENDPOINT_ARROW_ID = 'endpoint-arrow'; export const OVERLAY_RUN_ITEMS_ID = 'output-items-label'; export const OVERLAY_CONNECTION_ACTIONS_ID = 'connection-actions'; +export const JSPLUMB_FLOWCHART_STUB = 20; - -if (!window.localStorage.getItem('MIN_X_TO_SHOW_OUTPUT_LABEL')) { - window.localStorage.setItem('MIN_X_TO_SHOW_OUTPUT_LABEL', '90'); -} -// @ts-ignore -const _MIN_X_TO_SHOW_OUTPUT_LABEL = parseInt(window.localStorage.getItem('MIN_X_TO_SHOW_OUTPUT_LABEL'), 10); - -if (!window.localStorage.getItem('MIN_Y_TO_SHOW_OUTPUT_LABEL')) { - window.localStorage.setItem('MIN_Y_TO_SHOW_OUTPUT_LABEL', '100'); -} -// @ts-ignore -const _MIN_Y_TO_SHOW_OUTPUT_LABEL = parseInt(window.localStorage.getItem('MIN_Y_TO_SHOW_OUTPUT_LABEL'), 10); +const _MIN_X_TO_SHOW_OUTPUT_LABEL = 90; +const _MIN_Y_TO_SHOW_OUTPUT_LABEL = 100; interface ICorners { minX: number; @@ -191,7 +182,7 @@ export const getNewNodePosition = (nodes: INodeUi[], newPosition: XYPositon, mov newPosition = newPosition.slice(); if (!movePosition) { - movePosition = [50, 50]; + movePosition = [20, 20]; } let conflictFound = false;