mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-27 21:49:41 -08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

set grid size

Browse source
This commit is contained in:
Mutasem 2021-11-11 14:50:47 +01:00
parent da6f585969
commit bbffc17e60
2 changed files with 7 additions and 6 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

@ -251,7 +251,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.nodeId, { this.instance.draggable(this.nodeId, {
grid: [20, 20], grid: [CanvasHelpers.GRID_SIZE, CanvasHelpers.GRID_SIZE],
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

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

@ -19,6 +19,7 @@ export const OVERLAY_INPUT_NAME_LABEL = 'input-name-label';
export const OVERLAY_INPUT_NAME_LABEL_POSITION = [-3, .5]; export const OVERLAY_INPUT_NAME_LABEL_POSITION = [-3, .5];
export const OVERLAY_INPUT_NAME_LABEL_POSITION_MOVED = [-4.5, .5]; export const OVERLAY_INPUT_NAME_LABEL_POSITION_MOVED = [-4.5, .5];
export const OVERLAY_OUTPUT_NAME_LABEL = 'output-name-label'; export const OVERLAY_OUTPUT_NAME_LABEL = 'output-name-label';
export const GRID_SIZE = 20;
const MIN_X_TO_SHOW_OUTPUT_LABEL = 90; const MIN_X_TO_SHOW_OUTPUT_LABEL = 90;
const MIN_Y_TO_SHOW_OUTPUT_LABEL = 100; const MIN_Y_TO_SHOW_OUTPUT_LABEL = 100;
@ -29,7 +30,7 @@ export const DEFAULT_START_POSITION_Y = 300;
export const HEADER_HEIGHT = 65; export const HEADER_HEIGHT = 65;
export const SIDEBAR_WIDTH = 65; export const SIDEBAR_WIDTH = 65;
export const MAX_X_TO_PUSH_DOWNSTREAM_NODES = 300; export const MAX_X_TO_PUSH_DOWNSTREAM_NODES = 300;
export const PUSH_NODES_OFFSET = 200; export const PUSH_NODES_OFFSET = GRID_SIZE * 10;
const LOOPBACK_MINIMUM = 140; const LOOPBACK_MINIMUM = 140;
export const DEFAULT_START_NODE = { export const DEFAULT_START_NODE = {
@ -338,8 +339,8 @@ const canUsePosition = (position1: XYPosition, position2: XYPosition) => {
export const getNewNodePosition = (nodes: INodeUi[], newPosition: XYPosition, movePosition?: XYPosition): XYPosition => { export const getNewNodePosition = (nodes: INodeUi[], newPosition: XYPosition, movePosition?: XYPosition): XYPosition => {
const targetPosition: XYPosition = [...newPosition]; const targetPosition: XYPosition = [...newPosition];
targetPosition[0] = targetPosition[0] - (targetPosition[0] % 20); targetPosition[0] = targetPosition[0] - (targetPosition[0] % GRID_SIZE);
targetPosition[1] = targetPosition[1] - (targetPosition[1] % 20); targetPosition[1] = targetPosition[1] - (targetPosition[1] % GRID_SIZE);
if (!movePosition) { if (!movePosition) {
movePosition = [40, 40]; movePosition = [40, 40];
@ -383,9 +384,9 @@ export const getRelativePosition = (x: number, y: number, scale: number, offset:
}; };
export const getBackgroundStyles = (scale: number, offsetPosition: XYPosition) => { export const getBackgroundStyles = (scale: number, offsetPosition: XYPosition) => {
const squareSize = 20 * scale; const squareSize = GRID_SIZE * scale;
const dotSize = 1 * scale; const dotSize = 1 * scale;
const dotPosition = 10 * scale; const dotPosition = (GRID_SIZE / 2) * scale;
const styles: object = { const styles: object = {
'background-size': `${squareSize}px ${squareSize}px`, 'background-size': `${squareSize}px ${squareSize}px`,
'background-position': `left ${offsetPosition[0]}px top ${offsetPosition[1]}px`, 'background-position': `left ${offsetPosition[0]}px top ${offsetPosition[1]}px`,