mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-01-12 21:37:32 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Fix sticky duplication and position bug (#3755)

Browse source 
* fix bug when inserting sticky

* center sticky on insert

* export as const
This commit is contained in:
Mutasem Aldmour 2022-07-26 12:41:34 +02:00 committed by GitHub
parent 1a7318b4cf
commit 92614c81ab
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -289,3 +289,6 @@ export const TEST_PIN_DATA = [
},
];
export const MAPPING_PARAMS = [`$evaluateExpression`, `$item`, `$jmespath`, `$node`, `$binary`, `$data`, `$env`, `$json`, `$now`, `$parameters`, `$position`, `$resumeWebhookUrl`, `$runIndex`, `$today`, `$workflow`, '$parameter'];
export const DEFAULT_STICKY_HEIGHT = 160;
export const DEFAULT_STICKY_WIDTH = 240;

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

@ -72,7 +72,7 @@
/>
<div
:class="['add-sticky-button', showStickyButton ? 'visible-button' : '']"
@click="nodeTypeSelected(STICKY_NODE_TYPE)"
@click="addStickyNote"
>
<n8n-icon-button
size="medium"
@ -154,7 +154,7 @@ import {
} from 'jsplumb';
import { MessageBoxInputData } from 'element-ui/types/message-box';
import { jsPlumb, OnConnectionBindInfo } from 'jsplumb';
import { MODAL_CANCEL, MODAL_CLOSE, MODAL_CONFIRMED, NODE_NAME_PREFIX, NODE_OUTPUT_DEFAULT_KEY, PLACEHOLDER_EMPTY_WORKFLOW_ID, QUICKSTART_NOTE_NAME, START_NODE_TYPE, STICKY_NODE_TYPE, VIEWS, WEBHOOK_NODE_TYPE, WORKFLOW_OPEN_MODAL_KEY } from '@/constants';
import { DEFAULT_STICKY_HEIGHT, DEFAULT_STICKY_WIDTH, MODAL_CANCEL, MODAL_CLOSE, MODAL_CONFIRMED, NODE_NAME_PREFIX, NODE_OUTPUT_DEFAULT_KEY, PLACEHOLDER_EMPTY_WORKFLOW_ID, QUICKSTART_NOTE_NAME, START_NODE_TYPE, STICKY_NODE_TYPE, VIEWS, 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';
@ -227,6 +227,7 @@ interface AddNodeOptions {
dragAndDrop?: boolean;
}
export default mixins(
copyPaste,
externalHooks,
@ -1371,6 +1372,22 @@ export default mixins(
this.createNodeActive = false;
},
addStickyNote() {
if (document.activeElement) {
(document.activeElement as HTMLElement).blur();
}
const offset: [number, number] = [...(this.$store.getters.getNodeViewOffsetPosition as [number, number])];
const position = CanvasHelpers.getMidCanvasPosition(this.nodeViewScale, offset);
position[0] -= DEFAULT_STICKY_WIDTH / 2;
position[1] -= DEFAULT_STICKY_HEIGHT / 2;
this.addNodeButton(STICKY_NODE_TYPE, {
position,
});
},
nodeTypeSelected (nodeTypeName: string) {
this.addNodeButton(nodeTypeName);
this.createNodeActive = false;

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

@ -474,6 +474,10 @@ export const getRelativePosition = (x: number, y: number, scale: number, offset:
];
};
export const getMidCanvasPosition = (scale: number, offset: XYPosition): XYPosition => {
return getRelativePosition((window.innerWidth - SIDEBAR_WIDTH) / 2, (window.innerHeight - HEADER_HEIGHT) / 2, scale, offset);
};
export const getBackgroundStyles = (scale: number, offsetPosition: XYPosition) => {
const squareSize = GRID_SIZE * scale;
const dotSize = 1 * scale;