mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-31 23:47:28 -08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

set values, increase grid size

Browse source
This commit is contained in:
Mutasem 2021-11-01 11:06:43 +01:00
parent bb2f84ae54
commit ff3a6a832a
4 changed files with 17 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/editor-ui/src/components/mixins/nodeBase.ts
View file

@ -280,7 +280,7 @@ export const nodeBase = mixins(
// https://jsplumb.github.io/jsplumb/home.html // https://jsplumb.github.io/jsplumb/home.html
// Make nodes draggable // Make nodes draggable
this.instance.draggable(this.nodeName, { this.instance.draggable(this.nodeName, {
grid: [10, 10], grid: [20, 20],
start: (params: { e: MouseEvent }) => { start: (params: { e: MouseEvent }) => {
if (this.isReadOnly === true) { if (this.isReadOnly === true) {
// Do not allow to move nodes in readOnly mode // Do not allow to move nodes in readOnly mode

7
packages/editor-ui/src/constants.ts
View file

@ -117,10 +117,3 @@ export const COMPANY_SIZE_PERSONAL_USE = 'personalUser';
export const CODING_SKILL_KEY = 'codingSkill'; export const CODING_SKILL_KEY = 'codingSkill';
export const OTHER_WORK_AREA_KEY = 'otherWorkArea'; 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;

53
packages/editor-ui/src/views/NodeView.vue
View file

@ -114,7 +114,7 @@ import {
} from 'jsplumb'; } from 'jsplumb';
import { MessageBoxInputData } from 'element-ui/types/message-box'; import { MessageBoxInputData } from 'element-ui/types/message-box';
import { jsPlumb, Endpoint, OnConnectionBindInfo } from 'jsplumb'; 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 { copyPaste } from '@/components/mixins/copyPaste';
import { externalHooks } from '@/components/mixins/externalHooks'; import { externalHooks } from '@/components/mixins/externalHooks';
import { genericHelpers } from '@/components/mixins/genericHelpers'; import { genericHelpers } from '@/components/mixins/genericHelpers';
@ -135,7 +135,7 @@ import NodeCreator from '@/components/NodeCreator/NodeCreator.vue';
import NodeSettings from '@/components/NodeSettings.vue'; import NodeSettings from '@/components/NodeSettings.vue';
import RunData from '@/components/RunData.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 mixins from 'vue-typed-mixins';
import { v4 as uuidv4} from 'uuid'; import { v4 as uuidv4} from 'uuid';
@ -175,10 +175,11 @@ import { getStyleTokenValue } from '@/components/helpers';
import '../plugins/N8nFlowchartType'; import '../plugins/N8nFlowchartType';
const NODE_SIZE = 100; const NODE_SIZE = 100;
const DEFAULT_START_POSITION_X = 250; const DEFAULT_START_POSITION_X = 240;
const DEFAULT_START_POSITION_Y = 300; const DEFAULT_START_POSITION_Y = 300;
const HEADER_HEIGHT = 65; const HEADER_HEIGHT = 65;
const SIDEBAR_WIDTH = 65; const SIDEBAR_WIDTH = 65;
const MAX_X_TO_PUSH_DOWNSTREAM_NODES = 300;
const DEFAULT_START_NODE = { const DEFAULT_START_NODE = {
name: 'Start', name: 'Start',
@ -191,35 +192,10 @@ const DEFAULT_START_NODE = {
parameters: {}, parameters: {},
}; };
if (!window.localStorage.getItem('CURVINESS')) { const _OUTLINE_STROKE_COLOR = 'transparent';
window.localStorage.setItem('CURVINESS', '150'); const _OUTLINE_STROKE_WIDTH = 12;
} const _ALWAYS_RESPECT_STUB = true;
// @ts-ignore const _PUSH_NODES_LENGTH = 200;
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 CONNECTOR_PAINT_STYLE_DEFAULT: PaintStyle = { const CONNECTOR_PAINT_STYLE_DEFAULT: PaintStyle = {
stroke: getStyleTokenValue('--color-foreground-dark'), stroke: getStyleTokenValue('--color-foreground-dark'),
@ -256,8 +232,8 @@ const getFlowChartType = (connection: Connection) => {
stub: JSPLUMB_FLOWCHART_STUB + 10 * outputIndex + 10 * inputIndex + labelOffset, stub: JSPLUMB_FLOWCHART_STUB + 10 * outputIndex + 10 * inputIndex + labelOffset,
gap: 5, gap: 5,
alwaysRespectStubs: _ALWAYS_RESPECT_STUB, alwaysRespectStubs: _ALWAYS_RESPECT_STUB,
yOffset: NODE_SIZE + 5, yOffset: NODE_SIZE,
loopbackMinimum: 150, 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[]) => { const addOverlays = (connection: Connection, overlays: OverlaySpec[]) => {
overlays.forEach((overlay: OverlaySpec) => { overlays.forEach((overlay: OverlaySpec) => {
connection.addOverlay(overlay); connection.addOverlay(overlay);
@ -1364,7 +1333,7 @@ export default mixins(
if (lastSelectedConnection) { if (lastSelectedConnection) {
const sourceNodeType = this.$store.getters.nodeType(lastSelectedNode.type); 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) { if (sourceNodeType && sourceNodeType.outputs.length > 1) {
const offset = offsets[sourceNodeType.outputs.length - 2]; const offset = offsets[sourceNodeType.outputs.length - 2];
yOffset = offset[lastSelectedConnection.__meta.sourceOutputIndex]; yOffset = offset[lastSelectedConnection.__meta.sourceOutputIndex];

19
packages/editor-ui/src/views/canvasHelpers.ts
View file

@ -1,24 +1,15 @@
import { INodeUi, IZoomConfig, XYPositon } from "@/Interface"; 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_DROP_NODE_ID = 'drop-add-node';
export const OVERLAY_MIDPOINT_ARROW_ID = 'midpoint-arrow'; export const OVERLAY_MIDPOINT_ARROW_ID = 'midpoint-arrow';
export const OVERLAY_ENDPOINT_ARROW_ID = 'endpoint-arrow'; export const OVERLAY_ENDPOINT_ARROW_ID = 'endpoint-arrow';
export const OVERLAY_RUN_ITEMS_ID = 'output-items-label'; export const OVERLAY_RUN_ITEMS_ID = 'output-items-label';
export const OVERLAY_CONNECTION_ACTIONS_ID = 'connection-actions'; export const OVERLAY_CONNECTION_ACTIONS_ID = 'connection-actions';
export const JSPLUMB_FLOWCHART_STUB = 20;
const _MIN_X_TO_SHOW_OUTPUT_LABEL = 90;
if (!window.localStorage.getItem('MIN_X_TO_SHOW_OUTPUT_LABEL')) { const _MIN_Y_TO_SHOW_OUTPUT_LABEL = 100;
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);
interface ICorners { interface ICorners {
minX: number; minX: number;
@ -191,7 +182,7 @@ export const getNewNodePosition = (nodes: INodeUi[], newPosition: XYPositon, mov
newPosition = newPosition.slice(); newPosition = newPosition.slice();
if (!movePosition) { if (!movePosition) {
movePosition = [50, 50]; movePosition = [20, 20];
} }
let conflictFound = false; let conflictFound = false;