mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-29 06:29:42 -08:00
Code Issues Actions 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
// 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

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 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';
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];

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

@ -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;