feat(editor): Add Workflow Stickies (Notes) (#3154)

* N8N-3029 Add Node Type for Wokrflow Stickies/Notes * N8N-3029 Update Content, Update Aliasses * N8N-3030 Created N8N Sticky Component in Design System * N8N-3030 Fixed Code spaccing Sticky Component * N8N-3030 Fixed Code spaccing StickyStories Component * N8N-3030 Fixed Code spaccing Markdown Component * N8N-3030 Added Sticky Colors Pallete into Storybook, Update Color Variables for Sticky Component * N8N-3030 Added Unfocus Event * N8N-3030 Update Default Placeholder, Markdown Styles, Fixed Edit State, Added Text to EditState, Fixed Height of Area, Turned off Resize of textarea * N8N-3030 Update Sticky Overflow, Update Hover States, Updated Markdown Overflow * N8N-3030, N8N-3031 - Add Resize to Sticky, Created N8n-Resize component * N8N-3031 Fixed Importing Components in Editor-ui * N8N-3031 Fixed Resize Component, Fixed Gradient * N8N-3030, N8N-3031 Update Note Description * N8N-3032 Hotfix Building Storybook * N8N-3032 - Select Behaviour, Changes in Resize Component, Emit on Width/Height/Top/Left Change * N8N-3032 Update Resize Component to emmit left/top, Update Dynamic Resize on Selected Background * N8N-3032 Updated / Dragging vs Resizing, prevent open Modal for stickies * N8N-3032 Added ID props to n8n-sticky // dynamic id for multi resizing in NodeView * N8N-3033 Add dynamic size Tooltip on Sticky * N8N-3033 Updated Z-index for Sticky Component * N8N-3033 Updated N8N-Resize Component, Fixed SelectedBackround for Sticky Component * N8N-3033 Refactor * N8N-3033 Focus/Defocus on TextArea * N8N-3033 Fixed Resizing on NW Point * N8N-3030 Save content in vuex on input change * N8N-3033 Fixed Resizer, Save Width and Height in Vue * N8N-3033 Hide Sticky Footer on small height/width * N8N-3033 Fixed Resizer * N8N-3033 Dynamic Z-index for Stickies * N8N-3033 Dynamic Z-index for Stickies * N8N-3033 Removed static z-index for select sticky class * N8N-3034 Added Telemetry * N8N-3030 Formatter * N8N-3030 Format code * N8N-3030 Fixed Selecting Stickies * N8N-3033 Fixed Notifications * N8N-3030 Added new paddings for Default Stickies * N8N-3033 Prevent Scrolling NodeView when Sticky is in Edit mode and Mouse is Over the TextArea * N8N-3030 Prevent double clicking to switch state of Sticky component in Edit Mode * N8N-3033 Fixed Z-index of Stickies * N8N-3033 Prevent delete node when in EditMode * N8N-3030 Prevent Delete Button to delete the Sticky while in Edit Mode * N8N-3030 Change EditMode (emit) on keyboard shortucts, update Markdown Links & Images, Added new props * N8N-3030 Sticky Component - No padding when hiding footer text * N8N-3033 Fix Resizing enter into Edit Mode * N8N-3033 Selecting different nodes - exit the edit mode * N8N-3033 Auto Select Text in text-area by default - Sticky Component * N8N-3033 Prevent Default behaviour for CTRL + X, CTRL + A when Sticky is Active && inEditMode * N8N-3033 Refactor Resizer, Refactor Sticky, Update zIndex inEditMode * N8N-3033 Updated Default Text // Node-base, Storybook * N8N-3033 Add Resizing in EditMode - Components update * N8N-3033 Fixed Footer - Show/Hide on Resize in EditMode * N8N-3033 Fix ActiveSticky on Init * N8N-3033 Refactor Sticky in Vuex, Fixed Init Sticky Tweaks, Prevent Modal Openning, Save on Keyboard shortcuts * Stickies - Update Note node with new props * N8N-3030 Updated Default Note text, Update the Markdown Link * N8N-3030 CMD-C does not copy the text fix * N8N-3030 Fix Max Zoom / Zoom out shortcuts disabled in editState * N8N-3030 Z-index fixed during Edit Mode typing * N8N-3030 Prevent Autoselect Text in Stickies if the text is not default * N8N-3030 Fixed ReadOnly Bugs / Prevent showing Tooltip, Resizing * N8N-3030 Added Sticky Creator Button * N8N-3030 Update Icon / Sticky Creator Button * N8N-3033 Update Sticky Icon / StickyCreator Button * update package lock * 🔩 update note props * 🚿 clean props * 🔧 linting * 🔧 fix spacing * remove resize component * remove resize component * ✂ clean up sticky * revert back to height width * revert back to height/width * replace zindex property * replace default text property * use i18n to translate * update package lock * move resize * clean up how height/width are set * fix resize for sticky to support left/top * clean up resize * fix lasso/highlight bug * remove unused props * fix zoom to fit * fix padding for demo view * fix readonly * remove iseditable, use active state * clean up keyboard events * chang button size, no edit on insert * scale resizing correctly * make active on resize * fix select on resize/move * use outline icon * allow for multiple line breaks * fix multi line bug * fix edit mode outline * keep edit open as one resizes * respect multiple spaces * fix scrolling bug * clean up hover impl * clean up references to note * disable for rename * fix drifting while drag * fix mouse cursor on resize * fix sticky min height * refactor resize into component * fix pulling too far bug * fix delete/cut all bug * fix padding bottom * fix active change on resize * add transition to button * Fix sticky markdown click * add solid fa icon * update node graph, telemetry event * add snapping * change alt text * update package lock * fix bug in button hover * add back transition * clean up resize * add grid size as param * remove breaks * clean up markdown * lint fixes * fix spacing * clean up markdown colors * clean up classes in resize * clean up resize * update sticky story * fix spacing * clean up classes * revert change * revert change * revert change * clean up sticky component * remove unused component * remove unnessary data * remove unnessary data * clean up actions * clean up sticky size * clean up unnessary border style * fix bug * replace sticky note name * update description * remove support for multi spaces * update tracking name * update telemetry reqs * fix enter bug * update alt text * update sticky notes doc url * fix readonly bug * update class name * update quote marks Co-authored-by: SchnapsterDog <olivertrajceski@yahoo.com>
2022-04-25 12:38:37 +02:00
parent d446f9e281
commit 31dd01f9cb
34 changed files with 9501 additions and 67038 deletions
--- a/packages/editor-ui/package.json
+++ b/packages/editor-ui/package.json
@@ -25,14 +25,15 @@
  },
  "dependencies": {
    "@fontsource/open-sans": "^4.5.0",
+    "@fortawesome/free-regular-svg-icons": "^6.1.1",
    "luxon": "^2.3.0",
-    "n8n-design-system": "~0.17.0",
    "monaco-editor": "^0.29.1",
+    "n8n-design-system": "~0.17.0",
    "timeago.js": "^4.0.2",
    "v-click-outside": "^3.1.2",
    "vue-fragment": "^1.5.2",
-    "vue2-boring-avatars": "0.3.4",
    "vue-i18n": "^8.26.7",
+    "vue2-boring-avatars": "0.3.4",
    "xss": "^1.0.10"
  },
  "devDependencies": {
--- a/packages/editor-ui/src/components/DataDisplay.vue
+++ b/packages/editor-ui/src/components/DataDisplay.vue
@@ -1,6 +1,6 @@
 <template>
 	<el-dialog
-		:visible="!!node || renaming"
+		:visible="(!!node || renaming) && !isActiveStickyNode"
 		:before-close="close"
 		:show-close="false"
 		custom-class="data-display-wrapper"
@@ -41,6 +41,7 @@ import RunData from '@/components/RunData.vue';
 import mixins from 'vue-typed-mixins';
 import Vue from 'vue';
 import { mapGetters } from 'vuex';
+import { STICKY_NODE_TYPE } from '@/constants';

 export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
 	name: 'DataDisplay',
@@ -76,15 +77,18 @@ export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
 			}
 			return null;
 		},
+		isActiveStickyNode(): boolean {
+			return !!this.$store.getters.activeNode && this.$store.getters.activeNode.type === STICKY_NODE_TYPE;
+		},
 	},
 	watch: {
 		node (node, oldNode) {
-			if(node && !oldNode) {
+			if(node && !oldNode && !this.isActiveStickyNode) {
 				this.triggerWaitingWarningEnabled = false;
 				this.$externalHooks().run('dataDisplay.nodeTypeChanged', { nodeSubtitle: this.getNodeSubtitle(node, this.nodeType, this.getWorkflow()) });
 				this.$telemetry.track('User opened node modal', { node_type: this.nodeType ? this.nodeType.name : '', workflow_id: this.$store.getters.workflowId });
 			}
-			if (window.top) {
+			if (window.top && !this.isActiveStickyNode) {
 				window.top.postMessage(JSON.stringify({command: (node? 'openNDV': 'closeNDV')}), '*');
 			}
 		},
--- a/packages/editor-ui/src/components/Sticky.vue
+++ b/packages/editor-ui/src/components/Sticky.vue
@@ -0,0 +1,288 @@
+<template>
+	<div class="sticky-wrapper" :style="stickyPosition">
+		<div
+			:class="{'sticky-default': true, 'touch-active': isTouchActive, 'is-touch-device': isTouchDevice}"
+			:style="stickySize"
+		>
+			<div class="select-sticky-background" v-show="isSelected" />
+			<div
+				class="sticky-box"
+				:data-name="data.name"
+				:ref="data.name"
+				@click.left="mouseLeftClick"
+				v-touch:start="touchStart"
+				v-touch:end="touchEnd"
+			>
+				<n8n-sticky
+					:content.sync="node.parameters.content"
+					:height="node.parameters.height"
+					:width="node.parameters.width"
+					:scale="nodeViewScale"
+					:id="nodeIndex"
+					:readOnly="isReadOnly"
+					:defaultText="defaultText"
+					:editMode="isActive && !isReadOnly"
+					:gridSize="gridSize"
+					@input="onInputChange"
+					@edit="onEdit"
+					@resizestart="onResizeStart"
+					@resize="onResize"
+					@resizeend="onResizeEnd"
+				/>
+			</div>
+
+			<div v-show="showActions" class="sticky-options no-select-on-click">
+				<div v-touch:tap="deleteNode" class="option" :title="$locale.baseText('node.deleteNode')" >
+					<font-awesome-icon icon="trash" />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+import mixins from 'vue-typed-mixins';
+import { externalHooks } from '@/components/mixins/externalHooks';
+import { nodeBase } from '@/components/mixins/nodeBase';
+import { nodeHelpers } from '@/components/mixins/nodeHelpers';
+import { workflowHelpers } from '@/components/mixins/workflowHelpers';
+import { getStyleTokenValue, isNumber, isString } from './helpers';
+import { INodeUi, XYPosition } from '@/Interface';
+
+import {
+	INodeTypeDescription,
+} from 'n8n-workflow';
+
+export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).extend({
+	name: 'Sticky',
+	props: {
+		nodeViewScale: {
+			type: Number,
+		},
+		gridSize: {
+			type: Number,
+		},
+	},
+	computed: {
+		defaultText (): string {
+			if (!this.nodeType) {
+				return '';
+			}
+			const properties = this.nodeType.properties;
+			const content = properties.find((property) => property.name === 'content');
+
+			return content && isString(content.default) ? content.default : '';
+		},
+		isSelected (): boolean {
+			return this.$store.getters.getSelectedNodes.find((node: INodeUi) => node.name === this.data.name);
+		},
+		nodeType (): INodeTypeDescription | null {
+			return this.data && this.$store.getters.nodeType(this.data.type, this.data.typeVersion);
+		},
+		node (): INodeUi | undefined { // same as this.data but reactive..
+			return this.$store.getters.nodesByName[this.name] as INodeUi | undefined;
+		},
+		position (): XYPosition {
+			if (this.node) {
+				return this.node.position;
+			} else {
+				return [0, 0];
+			}
+		},
+		height(): number {
+			return this.node && isNumber(this.node.parameters.height)? this.node.parameters.height : 0;
+		},
+		width(): number {
+			return this.node && isNumber(this.node.parameters.width)? this.node.parameters.width : 0;
+		},
+		stickySize(): object {
+			const returnStyles: {
+				[key: string]: string | number;
+			} = {
+				height: this.height + 'px',
+				width: this.width + 'px',
+			};
+
+			return returnStyles;
+		},
+		stickyPosition (): object {
+			const returnStyles: {
+				[key: string]: string | number;
+			} = {
+				left: this.position[0] + 'px',
+				top: this.position[1] + 'px',
+				zIndex: this.isActive ? 9999999 : -1 * Math.floor((this.height * this.width) / 1000),
+			};
+
+			return returnStyles;
+		},
+		showActions(): boolean {
+			return !(this.hideActions || this.isReadOnly || this.workflowRunning || this.isResizing);
+		},
+		workflowRunning (): boolean {
+			return this.$store.getters.isActionActive('workflowRunning');
+		},
+ 	},
+	data () {
+		return {
+			isResizing: false,
+			isTouchActive: false,
+		};
+	},
+	methods: {
+		deleteNode () {
+			Vue.nextTick(() => {
+				// Wait a tick else vue causes problems because the data is gone
+				this.$emit('removeNode', this.data.name);
+			});
+		},
+		onEdit(edit: boolean) {
+			if (edit && !this.isActive && this.node) {
+				this.$store.commit('setActiveNode', this.node.name);
+			}
+			else if (this.isActive && !edit) {
+				this.$store.commit('setActiveNode', null);
+			}
+		},
+		onInputChange(content: string) {
+			this.setParameters({content});
+		},
+		onResizeStart() {
+			this.isResizing = true;
+			if (!this.isSelected && this.node) {
+				this.$emit('nodeSelected', this.node.name, false, true);
+			}
+			const nodeIndex = this.$store.getters.getNodeIndex(this.data.name);
+			const nodeIdName = `node-${nodeIndex}`;
+			this.instance.destroyDraggable(nodeIdName); // todo
+		},
+		onResize({height, width, dX, dY}:  { width: number, height: number, dX: number, dY: number }) {
+			if (!this.node) {
+				return;
+			}
+			if (dX !== 0 || dY !== 0) {
+				this.setPosition([this.node.position[0] + (dX || 0), this.node.position[1] + (dY || 0)]);
+			}
+
+			this.setParameters({ height, width });
+		},
+		onResizeEnd() {
+			this.isResizing = false;
+			this.__makeInstanceDraggable(this.data);
+		},
+		setParameters(params: {content?: string, height?: number, width?: number}) {
+			if (this.node) {
+				const nodeParameters = {
+					content: isString(params.content) ? params.content : this.node.parameters.content,
+					height: isNumber(params.height) ? params.height : this.node.parameters.height,
+					width: isNumber(params.width) ? params.width : this.node.parameters.width,
+				};
+
+				const updateInformation = {
+					name: this.node.name,
+					value: nodeParameters,
+				};
+
+				this.$store.commit('setNodeParameters', updateInformation);
+			}
+		},
+		setPosition(position: XYPosition) {
+			if (!this.node) {
+				return;
+			}
+
+			const updateInformation = {
+				name: this.node.name,
+				properties: {
+					position,
+				},
+			};
+
+			this.$store.commit('updateNodeProperties', updateInformation);
+		},
+		touchStart () {
+			if (this.isTouchDevice === true && this.isMacOs === false && this.isTouchActive === false) {
+				this.isTouchActive = true;
+				setTimeout(() => {
+					this.isTouchActive = false;
+				}, 2000);
+			}
+		},
+	},
+});
+
+</script>
+
+<style lang="scss" scoped>
+.sticky-wrapper {
+	position: absolute;
+
+	.sticky-default {
+		position: absolute;
+
+		.sticky-box {
+			width: 100%;
+			height: 100%;
+		}
+
+		&.touch-active,
+		&:hover {
+			.sticky-options {
+				display: flex;
+				cursor: pointer;
+			}
+		}
+
+		.sticky-options {
+			display: none;
+			justify-content: flex-start;
+			position: absolute;
+			top: -25px;
+			left: -8px;
+			height: 26px;
+			font-size: 0.9em;
+			text-align: left;
+			z-index: 10;
+			color: #aaa;
+			text-align: center;
+
+			.option {
+				width: 28px;
+				display: inline-block;
+
+				&.touch {
+					display: none;
+				}
+
+				&:hover {
+					color: $--color-primary;
+				}
+			}
+		}
+
+		&.is-touch-device .sticky-options {
+			left: -25px;
+			width: 150px;
+
+			.option.touch {
+				display: initial;
+			}
+		}
+	}
+}
+
+.select-sticky-background {
+	display: block;
+	position: absolute;
+	background-color: hsla(var(--color-foreground-base-h), var(--color-foreground-base-s), var(--color-foreground-base-l), 60%);
+	border-radius: var(--border-radius-xlarge);
+	overflow: hidden;
+	height: calc(100% + 16px);
+	width: calc(100% + 16px);
+	left: -8px;
+	top: -8px;
+	z-index: 0;
+}
+</style>
--- a/packages/editor-ui/src/components/helpers.ts
+++ b/packages/editor-ui/src/components/helpers.ts
@@ -59,3 +59,11 @@ export function filterTemplateNodes(nodes: ITemplatesNode[]) {
 export function setPageTitle(title: string) {
 	window.document.title = title;
 }
+
+export function isString(value: unknown): value is string {
+	return typeof value === 'string';
+}
+
+export function isNumber(value: unknown): value is number {
+	return typeof value === 'number';
+}
--- a/packages/editor-ui/src/components/mixins/mouseSelect.ts
+++ b/packages/editor-ui/src/components/mixins/mouseSelect.ts
@@ -190,7 +190,6 @@ export const mouseSelect = mixins(
 			this.$store.commit('resetSelectedNodes');
 			this.$store.commit('setLastSelectedNode', null);
 			this.$store.commit('setLastSelectedNodeOutputIndex', null);
-			this.$store.commit('setActiveNode', null);
 			// @ts-ignore
 			this.lastSelectedConnection = null;
 			// @ts-ignore
--- a/packages/editor-ui/src/components/mixins/nodeBase.ts
+++ b/packages/editor-ui/src/components/mixins/nodeBase.ts
@@ -4,7 +4,7 @@ import mixins from 'vue-typed-mixins';

 import { deviceSupportHelpers } from '@/components/mixins/deviceSupportHelpers';
 import { nodeIndex } from '@/components/mixins/nodeIndex';
-import { NODE_NAME_PREFIX, NO_OP_NODE_TYPE } from '@/constants';
+import { NODE_NAME_PREFIX, NO_OP_NODE_TYPE, STICKY_NODE_TYPE } from '@/constants';
 import * as CanvasHelpers from '@/views/canvasHelpers';
 import { Endpoint } from 'jsplumb';

@@ -221,7 +221,15 @@ export const nodeBase = mixins(
 					// @ts-ignore
 					this.dragging = true;

-					if (params.e && !this.$store.getters.isNodeSelected(this.data.name)) {
+					const isSelected = this.$store.getters.isNodeSelected(this.data.name);
+					const nodeName = this.data.name;
+					if (this.data.type === STICKY_NODE_TYPE && !isSelected) {
+						setTimeout(() => {
+							this.$emit('nodeSelected', nodeName, false, true);
+						}, 0);
+					}
+
+					if (params.e && !isSelected) {
 						// Only the node which gets dragged directly gets an event, for all others it is
 						// undefined. So check if the currently dragged node is selected and if not clear
 						// the drag-selection.
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@@ -65,6 +65,7 @@ export const JIRA_TRIGGER_NODE_TYPE = 'n8n-nodes-base.jiraTrigger';
 export const MICROSOFT_EXCEL_NODE_TYPE = 'n8n-nodes-base.microsoftExcel';
 export const MICROSOFT_TEAMS_NODE_TYPE = 'n8n-nodes-base.microsoftTeams';
 export const NO_OP_NODE_TYPE = 'n8n-nodes-base.noOp';
+export const STICKY_NODE_TYPE = 'n8n-nodes-base.stickyNote';
 export const NOTION_TRIGGER_NODE_TYPE = 'n8n-nodes-base.notionTrigger';
 export const PAGERDUTY_NODE_TYPE = 'n8n-nodes-base.pagerDuty';
 export const SALESFORCE_NODE_TYPE = 'n8n-nodes-base.salesforce';
--- a/packages/editor-ui/src/plugins/components.ts
+++ b/packages/editor-ui/src/plugins/components.ts
@@ -65,6 +65,7 @@ import {
 	N8nRadioButtons,
 	N8nSelect,
 	N8nSpinner,
+	N8nSticky,
 	N8nTabs,
 	N8nFormInputs,
 	N8nFormBox,
@@ -100,6 +101,7 @@ Vue.use(N8nMenuItem);
 Vue.use(N8nOption);
 Vue.use(N8nSelect);
 Vue.use(N8nSpinner);
+Vue.component('n8n-sticky', N8nSticky);
 Vue.use(N8nRadioButtons);
 Vue.component('n8n-square-button', N8nSquareButton);
 Vue.use(N8nTags);
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -411,6 +411,7 @@
 	"nodeSettings.waitBetweenTries.description": "How long to wait between each attempt (in milliseconds)",
 	"nodeSettings.waitBetweenTries.displayName": "Wait Between Tries (ms)",
 	"nodeView.addNode": "Add node",
+	"nodeView.addSticky": "Click to add sticky note",
 	"nodeView.confirmMessage.beforeRouteLeave.cancelButtonText": "Leave without saving",
 	"nodeView.confirmMessage.beforeRouteLeave.confirmButtonText": "Save",
 	"nodeView.confirmMessage.beforeRouteLeave.headline": "Save changes before leaving?",
--- a/packages/editor-ui/src/plugins/icons.ts
+++ b/packages/editor-ui/src/plugins/icons.ts
@@ -93,7 +93,11 @@ import {
 	faUserCircle,
 	faUserFriends,
 	faUsers,
+	faStickyNote as faSolidStickyNote,
 } from '@fortawesome/free-solid-svg-icons';
+import {
+	faStickyNote,
+} from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

 function addIcon(icon: any) { // tslint:disable-line:no-any
@@ -177,6 +181,8 @@ addIcon(faServer);
 addIcon(faSignInAlt);
 addIcon(faSlidersH);
 addIcon(faSpinner);
+addIcon(faSolidStickyNote);
+addIcon(faStickyNote);
 addIcon(faStop);
 addIcon(faSun);
 addIcon(faSync);
--- a/packages/editor-ui/src/plugins/telemetry/index.ts
+++ b/packages/editor-ui/src/plugins/telemetry/index.ts
@@ -169,6 +169,9 @@ class Telemetry {
 				case 'nodeView.addNodeButton':
 					this.telemetry.track('User added node to workflow canvas', properties);
 					break;
+				case 'nodeView.addSticky':
+					this.telemetry.track('User inserted workflow note', properties);
+					break;
 				default:
 					break;
 			}
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -21,29 +21,54 @@
 				class="node-view"
 				:style="workflowStyle"
 			>
-				<node
-					v-for="nodeData in nodes"
-					@duplicateNode="duplicateNode"
-					@deselectAllNodes="deselectAllNodes"
-					@deselectNode="nodeDeselectedByName"
-					@nodeSelected="nodeSelectedByName"
-					@removeNode="removeNode"
-					@runWorkflow="runWorkflow"
-					@moved="onNodeMoved"
-					@run="onNodeRun"
-					:id="'node-' + getNodeIndex(nodeData.name)"
-					:key="getNodeIndex(nodeData.name)"
-					:name="nodeData.name"
-					:isReadOnly="isReadOnly"
-					:instance="instance"
-					:isActive="!!activeNode && activeNode.name === nodeData.name"
-					:hideActions="pullConnActive"
-				/>
+				<div v-for="nodeData in nodes" :key="getNodeIndex(nodeData.name)">
+					<node
+						v-if="nodeData.type !== STICKY_NODE_TYPE"
+						@duplicateNode="duplicateNode"
+						@deselectAllNodes="deselectAllNodes"
+						@deselectNode="nodeDeselectedByName"
+						@nodeSelected="nodeSelectedByName"
+						@removeNode="removeNode"
+						@runWorkflow="runWorkflow"
+						@moved="onNodeMoved"
+						@run="onNodeRun"
+						:id="'node-' + getNodeIndex(nodeData.name)"
+						:key="getNodeIndex(nodeData.name)"
+						:name="nodeData.name"
+						:isReadOnly="isReadOnly"
+						:instance="instance"
+						:isActive="!!activeNode && activeNode.name === nodeData.name"
+						:hideActions="pullConnActive"
+					/>
+					<Sticky
+						v-else
+						@deselectAllNodes="deselectAllNodes"
+						@deselectNode="nodeDeselectedByName"
+						@nodeSelected="nodeSelectedByName"
+						@removeNode="removeNode"
+						:id="'node-' + getNodeIndex(nodeData.name)"
+						:name="nodeData.name"
+						:isReadOnly="isReadOnly"
+						:instance="instance"
+						:isActive="!!activeNode && activeNode.name === nodeData.name"
+						:nodeViewScale="nodeViewScale"
+						:gridSize="GRID_SIZE"
+						:hideActions="pullConnActive"
+					/>
+				</div>
 			</div>
 		</div>
 		<DataDisplay :renaming="renamingActive" @valueChanged="valueChanged"/>
-		<div v-if="!createNodeActive && !isReadOnly" class="node-creator-button" :title="$locale.baseText('nodeView.addNode')" @click="() => openNodeCreator('add_node_button')">
-			<n8n-icon-button size="xlarge" icon="plus" />
+		<div
+			class="node-buttons-wrapper"
+			v-if="!createNodeActive && !isReadOnly"
+		>
+			<div class="node-creator-button">
+				<n8n-icon-button size="xlarge" icon="plus" @click="() => openNodeCreator('add_node_button')" :title="$locale.baseText('nodeView.addNode')"/>
+				<div class="add-sticky-button" @click="nodeTypeSelected(STICKY_NODE_TYPE)">
+					<n8n-icon-button size="large" :icon="['far', 'note-sticky']" type="outline" :title="$locale.baseText('nodeView.addSticky')"/>
+				</div>
+			</div>
 		</div>
 		<node-creator
 			:active="createNodeActive"
@@ -122,7 +147,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, START_NODE_TYPE, VIEWS, WEBHOOK_NODE_TYPE, WORKFLOW_OPEN_MODAL_KEY } from '@/constants';
+import { MODAL_CANCEL, MODAL_CLOSE, MODAL_CONFIRMED, NODE_NAME_PREFIX, NODE_OUTPUT_DEFAULT_KEY, PLACEHOLDER_EMPTY_WORKFLOW_ID, 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';
@@ -141,6 +166,7 @@ import Node from '@/components/Node.vue';
 import NodeCreator from '@/components/NodeCreator/NodeCreator.vue';
 import NodeSettings from '@/components/NodeSettings.vue';
 import RunData from '@/components/RunData.vue';
+import Sticky from '@/components/Sticky.vue';

 import * as CanvasHelpers from './canvasHelpers';

@@ -211,6 +237,7 @@ export default mixins(
 			NodeCreator,
 			NodeSettings,
 			RunData,
+			Sticky,
 		},
 		errorCaptured: (err, vm, info) => {
 			console.error('errorCaptured'); // eslint-disable-line no-console
@@ -344,6 +371,8 @@ export default mixins(
 		},
 		data () {
 			return {
+				GRID_SIZE: CanvasHelpers.GRID_SIZE,
+				STICKY_NODE_TYPE,
 				createNodeActive: false,
 				instance: jsPlumb.getInstance(),
 				lastSelectedConnection: null as null | Connection,
@@ -710,7 +739,7 @@ export default mixins(
 					this.ctrlKeyPressed = true;
 				} else if (e.key === 'F2' && !this.isReadOnly) {
 					const lastSelectedNode = this.lastSelectedNode;
-					if (lastSelectedNode !== null) {
+					if (lastSelectedNode !== null && lastSelectedNode.type !== STICKY_NODE_TYPE) {
 						this.callDebounced('renameNodePrompt', { debounceTime: 1500 }, lastSelectedNode.name);
 					}
 				} else if ((e.key === '=' || e.key === '+') && !this.isCtrlKeyPressed(e)) {
@@ -777,6 +806,9 @@ export default mixins(
 					const lastSelectedNode = this.lastSelectedNode;

 					if (lastSelectedNode !== null) {
+						if (lastSelectedNode.type === STICKY_NODE_TYPE && this.isReadOnly) {
+							return;
+						}
 						this.$store.commit('setActiveNode', lastSelectedNode.name);
 					}
 				} else if (e.key === 'ArrowRight' && e.shiftKey === true) {
@@ -1391,18 +1423,22 @@ export default mixins(

 				this.$store.commit('setStateDirty', true);

-				this.$externalHooks().run('nodeView.addNodeButton', { nodeTypeName });
-				this.$telemetry.trackNodesPanel('nodeView.addNodeButton', {
-					node_type: nodeTypeName,
-					workflow_id: this.$store.getters.workflowId,
-					drag_and_drop: options.dragAndDrop,
-				} as IDataObject);
+				if (nodeTypeName === STICKY_NODE_TYPE) {
+					this.$telemetry.trackNodesPanel('nodeView.addSticky', { workflow_id: this.$store.getters.workflowId });
+				} else {
+					this.$externalHooks().run('nodeView.addNodeButton', { nodeTypeName });
+					this.$telemetry.trackNodesPanel('nodeView.addNodeButton', {
+						node_type: nodeTypeName,
+						workflow_id: this.$store.getters.workflowId,
+						drag_and_drop: options.dragAndDrop,
+					} as IDataObject);
+				}

 				// Automatically deselect all nodes and select the current one and also active
 				// current node
 				this.deselectAllNodes();
 				setTimeout(() => {
-					this.nodeSelectedByName(newNodeData.name, true);
+					this.nodeSelectedByName(newNodeData.name, nodeTypeName !== STICKY_NODE_TYPE);
 				});

 				return newNodeData;
@@ -2174,8 +2210,12 @@ export default mixins(
 					}
 				}

-				this.$externalHooks().run('node.deleteNode', { node });
-				this.$telemetry.track('User deleted node', { node_type: node.type, workflow_id: this.$store.getters.workflowId });
+				if(node.type === STICKY_NODE_TYPE) {
+					this.$telemetry.track('User deleted workflow note', { workflow_id: this.$store.getters.workflowId });
+				} else {
+					this.$externalHooks().run('node.deleteNode', { node });
+					this.$telemetry.track('User deleted node', { node_type: node.type, workflow_id: this.$store.getters.workflowId });
+				}

 				let waitForNewConnection = false;
 				// connect nodes before/after deleted node
@@ -2869,6 +2909,28 @@ export default mixins(
 	bottom: 10px;
 }

+.node-buttons-wrapper {
+	position: fixed;
+	width: 150px;
+	height: 200px;
+	top: 0;
+	right: 0;
+	display: flex;
+
+	.add-sticky-button {
+		margin-top: var(--spacing-2xs);
+		opacity: 0;
+		transition: .1s;
+		transition-timing-function: linear;
+	}
+
+	&:hover {
+		.add-sticky-button {
+			opacity: 1;
+		}
+	}
+}
+
 .node-creator-button {
 	position: fixed;
 	text-align: center;
--- a/packages/editor-ui/src/views/canvasHelpers.ts
+++ b/packages/editor-ui/src/views/canvasHelpers.ts
@@ -1,5 +1,5 @@
-import { getStyleTokenValue } from "@/components/helpers";
-import { NODE_OUTPUT_DEFAULT_KEY, START_NODE_TYPE } from "@/constants";
+import { getStyleTokenValue, isNumber } from "@/components/helpers";
+import { NODE_OUTPUT_DEFAULT_KEY, START_NODE_TYPE, STICKY_NODE_TYPE } from "@/constants";
 import { IBounds, INodeUi, IZoomConfig, XYPosition } from "@/Interface";
 import { Connection, Endpoint, Overlay, OverlaySpec, PaintStyle } from "jsplumb";
 import {
@@ -217,17 +217,22 @@ export const getLeftmostTopNode = (nodes: INodeUi[]): INodeUi => {

 export const getWorkflowCorners = (nodes: INodeUi[]): IBounds => {
 	return nodes.reduce((accu: IBounds, node: INodeUi) => {
-		if (node.position[0] < accu.minX) {
-			accu.minX = node.position[0];
+		const xOffset = node.type === STICKY_NODE_TYPE && isNumber(node.parameters.width) ? node.parameters.width : NODE_SIZE;
+		const yOffset = node.type === STICKY_NODE_TYPE && isNumber(node.parameters.height) ? node.parameters.height : NODE_SIZE;
+		const x = node.position[0];
+		const y = node.position[1];
+
+		if (x < accu.minX) {
+			accu.minX = x;
 		}
-		if (node.position[1] < accu.minY) {
-			accu.minY = node.position[1];
+		if (y < accu.minY) {
+			accu.minY = y;
 		}
-		if (node.position[0] > accu.maxX) {
-			accu.maxX = node.position[0];
+		if ((x + xOffset) > accu.maxX) {
+			accu.maxX = x + xOffset;
 		}
-		if (node.position[1] > accu.maxY) {
-			accu.maxY = node.position[1];
+		if ((y + yOffset) > accu.maxY) {
+			accu.maxY = y + yOffset;
 		}

 		return accu;
@@ -592,6 +597,7 @@ export const getZoomToFit = (nodes: INodeUi[], addComponentPadding = true): {off
 	const {minX, minY, maxX, maxY} = getWorkflowCorners(nodes);
 	const sidebarWidth = addComponentPadding? SIDEBAR_WIDTH: 0;
 	const headerHeight = addComponentPadding? HEADER_HEIGHT: 0;
+	const footerHeight = addComponentPadding? 200: 100;

 	const PADDING = NODE_SIZE * 4;

@@ -605,10 +611,10 @@ export const getZoomToFit = (nodes: INodeUi[], addComponentPadding = true): {off

 	const zoomLevel = Math.min(scaleX, scaleY, 1);
 	let xOffset = (minX * -1) * zoomLevel + sidebarWidth; // find top right corner
-	xOffset += (editorWidth - sidebarWidth - (maxX - minX + NODE_SIZE) * zoomLevel) / 2; // add padding to center workflow
+	xOffset += (editorWidth - sidebarWidth - (maxX - minX) * zoomLevel) / 2; // add padding to center workflow

 	let yOffset = (minY * -1) * zoomLevel + headerHeight; // find top right corner
-	yOffset += (editorHeight - headerHeight - (maxY - minY + NODE_SIZE * 2) * zoomLevel) / 2; // add padding to center workflow
+	yOffset += (editorHeight - headerHeight - (maxY - minY + footerHeight) * zoomLevel) / 2; // add padding to center workflow

 	return {
 		zoomLevel,