From 2d867f7eda873b1a9f31b528f1f5d8f1f680b3a6 Mon Sep 17 00:00:00 2001 From: Csaba Tuncsik Date: Mon, 24 Oct 2022 00:16:18 +0200 Subject: [PATCH 01/28] feat(editor): encapsulating canvas actions --- package-lock.json | 134 +++++++++++--- packages/editor-ui/package.json | 1 + .../src/components/CanvasControls.vue | 93 ++++++++++ packages/editor-ui/src/main.ts | 7 +- packages/editor-ui/src/modules/canvas.ts | 101 +++++++++++ packages/editor-ui/src/store.ts | 7 + packages/editor-ui/src/views/NodeView.vue | 165 ++++-------------- 7 files changed, 347 insertions(+), 161 deletions(-) create mode 100644 packages/editor-ui/src/components/CanvasControls.vue create mode 100644 packages/editor-ui/src/modules/canvas.ts diff --git a/package-lock.json b/package-lock.json index 35d4ed9d1883e..d45b503702dfb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9919,6 +9919,11 @@ "yallist": "^2.1.2" } }, + "node_modules/@vue/devtools-api": { + "version": "6.4.5", + "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.4.5.tgz", + "integrity": "sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ==" + }, "node_modules/@vue/eslint-config-typescript": { "version": "11.0.2", "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-11.0.2.tgz", @@ -32356,6 +32361,31 @@ "node": ">=6" } }, + "node_modules/pinia": { + "version": "2.0.23", + "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.23.tgz", + "integrity": "sha512-N15hFf4o5STrxpNrib1IEb1GOArvPYf1zPvQVRGOO1G1d74Ak0J0lVyalX/SmrzdT4Q0nlEFjbURsmBmIGUR5Q==", + "dependencies": { + "@vue/devtools-api": "^6.4.4", + "vue-demi": "*" + }, + "funding": { + "url": "https://github.com/sponsors/posva" + }, + "peerDependencies": { + "@vue/composition-api": "^1.4.0", + "typescript": ">=4.4.4", + "vue": "^2.6.14 || ^3.2.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + }, + "typescript": { + "optional": true + } + } + }, "node_modules/pinkie": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz", @@ -41183,6 +41213,31 @@ "tinycolor2": "^1.1.2" } }, + "node_modules/vue-demi": { + "version": "0.13.11", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz", + "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==", + "hasInstallScript": true, + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, "node_modules/vue-docgen-api": { "version": "4.52.0", "resolved": "https://registry.npmjs.org/vue-docgen-api/-/vue-docgen-api-4.52.0.tgz", @@ -43375,7 +43430,7 @@ }, "packages/cli": { "name": "n8n", - "version": "0.198.2", + "version": "0.199.0", "license": "SEE LICENSE IN LICENSE.md", "dependencies": { "@oclif/command": "^1.5.18", @@ -43421,10 +43476,10 @@ "lodash.split": "^4.4.2", "lodash.unset": "^4.5.2", "mysql2": "~2.3.0", - "n8n-core": "~0.138.0", - "n8n-editor-ui": "~0.164.2", - "n8n-nodes-base": "~0.196.0", - "n8n-workflow": "~0.120.0", + "n8n-core": "~0.139.0", + "n8n-editor-ui": "~0.165.0", + "n8n-nodes-base": "~0.197.0", + "n8n-workflow": "~0.121.0", "nodemailer": "^6.7.1", "oauth-1.0a": "^2.2.6", "open": "^7.0.0", @@ -44571,7 +44626,7 @@ }, "packages/core": { "name": "n8n-core", - "version": "0.138.0", + "version": "0.139.0", "license": "SEE LICENSE IN LICENSE.md", "dependencies": { "axios": "^0.21.1", @@ -44583,7 +44638,7 @@ "form-data": "^4.0.0", "lodash.get": "^4.4.2", "mime-types": "^2.1.27", - "n8n-workflow": "~0.120.0", + "n8n-workflow": "~0.121.0", "oauth-1.0a": "^2.2.6", "p-cancelable": "^2.0.0", "qs": "^6.10.1", @@ -45639,7 +45694,7 @@ }, "packages/design-system": { "name": "n8n-design-system", - "version": "0.38.0", + "version": "0.39.0", "license": "SEE LICENSE IN LICENSE.md", "dependencies": { "element-ui": "~2.15.7", @@ -45822,7 +45877,7 @@ }, "packages/editor-ui": { "name": "n8n-editor-ui", - "version": "0.164.2", + "version": "0.165.0", "license": "SEE LICENSE IN LICENSE.md", "dependencies": { "@codemirror/autocomplete": "^6.1.0", @@ -45854,9 +45909,10 @@ "lodash.set": "^4.3.2", "luxon": "~2.3.0", "monaco-editor": "^0.30.1", - "n8n-design-system": "~0.38.0", - "n8n-workflow": "~0.120.0", + "n8n-design-system": "~0.39.0", + "n8n-workflow": "~0.121.0", "normalize-wheel": "^1.0.1", + "pinia": "^2.0.23", "prismjs": "^1.17.1", "quill": "2.0.0-dev.4", "quill-autoformat": "^0.1.1", @@ -46331,7 +46387,7 @@ }, "packages/node-dev": { "name": "n8n-node-dev", - "version": "0.77.0", + "version": "0.78.0", "license": "SEE LICENSE IN LICENSE.md", "dependencies": { "@oclif/command": "^1.5.18", @@ -46339,8 +46395,8 @@ "change-case": "^4.1.1", "fast-glob": "^3.2.5", "inquirer": "^7.0.1", - "n8n-core": "~0.138.0", - "n8n-workflow": "~0.120.0", + "n8n-core": "~0.139.0", + "n8n-workflow": "~0.121.0", "oauth-1.0a": "^2.2.6", "replace-in-file": "^6.0.0", "request": "^2.88.2", @@ -46362,7 +46418,7 @@ }, "packages/nodes-base": { "name": "n8n-nodes-base", - "version": "0.196.0", + "version": "0.197.0", "license": "SEE LICENSE IN LICENSE.md", "dependencies": { "@kafkajs/confluent-schema-registry": "1.0.6", @@ -46401,7 +46457,7 @@ "mqtt": "4.2.6", "mssql": "^8.1.2", "mysql2": "~2.3.0", - "n8n-core": "~0.138.0", + "n8n-core": "~0.139.0", "node-html-markdown": "^1.1.3", "node-ssh": "^12.0.0", "nodemailer": "^6.7.1", @@ -46456,7 +46512,7 @@ "eslint-plugin-n8n-nodes-base": "^1.10.0", "gulp": "^4.0.0", "jest": "^27.4.7", - "n8n-workflow": "~0.120.0", + "n8n-workflow": "~0.121.0", "ts-jest": "^27.1.3", "tslint": "^6.1.2", "typescript": "~4.8.0" @@ -47493,7 +47549,7 @@ }, "packages/workflow": { "name": "n8n-workflow", - "version": "0.120.0", + "version": "0.121.0", "license": "SEE LICENSE IN LICENSE.md", "dependencies": { "@n8n_io/riot-tmpl": "^1.0.1", @@ -56204,6 +56260,11 @@ } } }, + "@vue/devtools-api": { + "version": "6.4.5", + "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.4.5.tgz", + "integrity": "sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ==" + }, "@vue/eslint-config-typescript": { "version": "11.0.2", "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-11.0.2.tgz", @@ -72168,10 +72229,10 @@ "lodash.split": "^4.4.2", "lodash.unset": "^4.5.2", "mysql2": "~2.3.0", - "n8n-core": "~0.138.0", - "n8n-editor-ui": "~0.164.2", - "n8n-nodes-base": "~0.196.0", - "n8n-workflow": "~0.120.0", + "n8n-core": "~0.139.0", + "n8n-editor-ui": "~0.165.0", + "n8n-nodes-base": "~0.197.0", + "n8n-workflow": "~0.121.0", "nodemailer": "^6.7.1", "nodemon": "^2.0.2", "oauth-1.0a": "^2.2.6", @@ -73061,7 +73122,7 @@ "jest": "^27.4.7", "lodash.get": "^4.4.2", "mime-types": "^2.1.27", - "n8n-workflow": "~0.120.0", + "n8n-workflow": "~0.121.0", "oauth-1.0a": "^2.2.6", "p-cancelable": "^2.0.0", "qs": "^6.10.1", @@ -74054,9 +74115,10 @@ "lodash.set": "^4.3.2", "luxon": "~2.3.0", "monaco-editor": "^0.30.1", - "n8n-design-system": "~0.38.0", - "n8n-workflow": "~0.120.0", + "n8n-design-system": "~0.39.0", + "n8n-workflow": "~0.121.0", "normalize-wheel": "^1.0.1", + "pinia": "^2.0.23", "prismjs": "^1.17.1", "quill": "2.0.0-dev.4", "quill-autoformat": "^0.1.1", @@ -74411,8 +74473,8 @@ "change-case": "^4.1.1", "fast-glob": "^3.2.5", "inquirer": "^7.0.1", - "n8n-core": "~0.138.0", - "n8n-workflow": "~0.120.0", + "n8n-core": "~0.139.0", + "n8n-workflow": "~0.121.0", "oauth-1.0a": "^2.2.6", "replace-in-file": "^6.0.0", "request": "^2.88.2", @@ -74491,8 +74553,8 @@ "mqtt": "4.2.6", "mssql": "^8.1.2", "mysql2": "~2.3.0", - "n8n-core": "~0.138.0", - "n8n-workflow": "~0.120.0", + "n8n-core": "~0.139.0", + "n8n-workflow": "~0.121.0", "node-html-markdown": "^1.1.3", "node-ssh": "^12.0.0", "nodemailer": "^6.7.1", @@ -77954,6 +78016,15 @@ "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", "dev": true }, + "pinia": { + "version": "2.0.23", + "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.23.tgz", + "integrity": "sha512-N15hFf4o5STrxpNrib1IEb1GOArvPYf1zPvQVRGOO1G1d74Ak0J0lVyalX/SmrzdT4Q0nlEFjbURsmBmIGUR5Q==", + "requires": { + "@vue/devtools-api": "^6.4.4", + "vue-demi": "*" + } + }, "pinkie": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz", @@ -84739,6 +84810,11 @@ "tinycolor2": "^1.1.2" } }, + "vue-demi": { + "version": "0.13.11", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz", + "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==" + }, "vue-docgen-api": { "version": "4.52.0", "resolved": "https://registry.npmjs.org/vue-docgen-api/-/vue-docgen-api-4.52.0.tgz", diff --git a/packages/editor-ui/package.json b/packages/editor-ui/package.json index 978084000d18f..861b308357105 100644 --- a/packages/editor-ui/package.json +++ b/packages/editor-ui/package.json @@ -57,6 +57,7 @@ "n8n-design-system": "~0.39.0", "n8n-workflow": "~0.121.0", "normalize-wheel": "^1.0.1", + "pinia": "^2.0.23", "prismjs": "^1.17.1", "quill": "2.0.0-dev.4", "quill-autoformat": "^0.1.1", diff --git a/packages/editor-ui/src/components/CanvasControls.vue b/packages/editor-ui/src/components/CanvasControls.vue new file mode 100644 index 0000000000000..669d38f7e5ec7 --- /dev/null +++ b/packages/editor-ui/src/components/CanvasControls.vue @@ -0,0 +1,93 @@ + + + + diff --git a/packages/editor-ui/src/main.ts b/packages/editor-ui/src/main.ts index de091b8dcba8d..40cc591022c7d 100644 --- a/packages/editor-ui/src/main.ts +++ b/packages/editor-ui/src/main.ts @@ -1,6 +1,7 @@ // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue'; +import { createPinia, PiniaVuePlugin } from 'pinia'; import './plugins'; import 'prismjs'; @@ -31,15 +32,19 @@ router.afterEach((to, from) => { Vue.use(TelemetryPlugin); Vue.use((vue) => I18nPlugin(vue, store)); +Vue.use(PiniaVuePlugin); + +const pinia = createPinia(); new Vue({ i18n: i18nInstance, router, store, + pinia, render: h => h(App), }).$mount('#app'); -if (import.meta.env.NODE_ENV !== 'production') { +if (process.env.NODE_ENV !== 'production') { // Make sure that we get all error messages properly displayed // as long as we are not in production mode window.onerror = (message, source, lineno, colno, error) => { diff --git a/packages/editor-ui/src/modules/canvas.ts b/packages/editor-ui/src/modules/canvas.ts new file mode 100644 index 0000000000000..536ab2104cc2b --- /dev/null +++ b/packages/editor-ui/src/modules/canvas.ts @@ -0,0 +1,101 @@ +import { ref } from "vue"; +import { defineStore } from "pinia"; +import { jsPlumb } from 'jsplumb'; +import { useRootStore } from "@/store"; +import { INodeUi } from "@/Interface"; +import * as CanvasHelpers from "@/views/canvasHelpers"; +import '@/plugins/N8nCustomConnectorType'; +import '@/plugins/PlusEndpointType'; + +export const useCanvasStore = defineStore('canvas', () => { + const rootStore = useRootStore(); + const jsPlumbInstance = jsPlumb.getInstance(); + + const nodeViewHtmlElement = ref(null); + const nodeViewScale = ref(1); + const nodesWithPlaceholderNode = ref([]); + + const setNodeViewHtmlElement = (element: HTMLDivElement | null | undefined) => { + nodeViewHtmlElement.value = element; + }; + + const setNodesWithPlaceholderNode = (nodes: INodeUi[]) => { + nodesWithPlaceholderNode.value = nodes; + }; + + const setZoomLevel = (zoomLevel: number) => { + nodeViewScale.value = zoomLevel; + const element = nodeViewHtmlElement.value; + if (!element) { + return; + } + + // https://docs.jsplumbtoolkit.com/community/current/articles/zooming.html + const prependProperties = ['webkit', 'moz', 'ms', 'o']; + const scaleString = 'scale(' + zoomLevel + ')'; + + for (let i = 0; i < prependProperties.length; i++) { + // @ts-ignore + element.style[prependProperties[i] + 'Transform'] = scaleString; + } + element.style['transform'] = scaleString; + + jsPlumbInstance.setZoom(zoomLevel); + }; + + const resetZoom = () => { + const {scale, offset} = CanvasHelpers.scaleReset({ + scale: nodeViewScale.value, + offset: rootStore.getters.getNodeViewOffsetPosition, + }); + + setZoomLevel(scale); + rootStore.commit('setNodeViewOffsetPosition', {newOffset: offset}); + }; + + const zoomIn = () => { + const {scale, offset: [xOffset, yOffset]} = CanvasHelpers.scaleBigger({ + scale: nodeViewScale.value, + offset: rootStore.getters.getNodeViewOffsetPosition, + }); + + setZoomLevel(scale); + rootStore.commit('setNodeViewOffsetPosition', {newOffset: [xOffset, yOffset]}); + }; + + const zoomOut = () => { + const {scale, offset: [xOffset, yOffset]} = CanvasHelpers.scaleSmaller({ + scale: nodeViewScale.value, + offset: rootStore.getters.getNodeViewOffsetPosition, + }); + + setZoomLevel(scale); + rootStore.commit('setNodeViewOffsetPosition', {newOffset: [xOffset, yOffset]}); + }; + + const zoomToFit = () => { + console.log(nodesWithPlaceholderNode.value); + if (nodesWithPlaceholderNode.value.length === 0) { // some unknown workflow executions + return; + } + + const {zoomLevel, offset} = CanvasHelpers.getZoomToFit(nodesWithPlaceholderNode.value); + + setZoomLevel(zoomLevel); + rootStore.commit('setNodeViewOffsetPosition', {newOffset: offset}); + }; + + return { + jsPlumbInstance, + setNodeViewHtmlElement, + setNodesWithPlaceholderNode, + nodeViewHtmlElement, + nodeViewScale, + nodesWithPlaceholderNode, + setZoomLevel, + resetZoom, + zoomIn, + zoomOut, + zoomToFit, + }; +}); diff --git a/packages/editor-ui/src/store.ts b/packages/editor-ui/src/store.ts index b18211592dec0..8fc7ae2c694fe 100644 --- a/packages/editor-ui/src/store.ts +++ b/packages/editor-ui/src/store.ts @@ -125,6 +125,7 @@ const modules = { }; export const store = new Vuex.Store({ + // @ts-ignore strict: import.meta.env.NODE_ENV !== 'production', modules, state, @@ -790,14 +791,18 @@ export const store = new Vuex.Store({ }, getRestUrl: (state): string => { let endpoint = 'rest'; + // @ts-ignore if (import.meta.env.VUE_APP_ENDPOINT_REST) { + // @ts-ignore endpoint = import.meta.env.VUE_APP_ENDPOINT_REST; } return `${state.baseUrl}${endpoint}`; }, getRestApiContext(state): IRestApiContext { let endpoint = 'rest'; + // @ts-ignore if (import.meta.env.VUE_APP_ENDPOINT_REST) { + // @ts-ignore endpoint = import.meta.env.VUE_APP_ENDPOINT_REST; } return { @@ -1063,3 +1068,5 @@ export const store = new Vuex.Store({ }, }, }); + +export const useRootStore = () => store; diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue index 9ba2eaf4dc3b3..f020070502992 100644 --- a/packages/editor-ui/src/views/NodeView.vue +++ b/packages/editor-ui/src/views/NodeView.vue @@ -71,17 +71,13 @@ @toggleNodeCreator="onToggleNodeCreator" @addNode="onAddNode" /> -
- - - - -
+
@@ -122,10 +118,9 @@ From e6c2e2b907e1c1e6f055fb4ec6b63f2167e66c00 Mon Sep 17 00:00:00 2001 From: Csaba Tuncsik Date: Tue, 25 Oct 2022 20:16:07 +0200 Subject: [PATCH 15/28] fix(editor): modify canvas control position styling --- packages/editor-ui/src/components/CanvasControls.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/editor-ui/src/components/CanvasControls.vue b/packages/editor-ui/src/components/CanvasControls.vue index 24fc013a76a2b..459d4ea93df83 100644 --- a/packages/editor-ui/src/components/CanvasControls.vue +++ b/packages/editor-ui/src/components/CanvasControls.vue @@ -82,11 +82,11 @@ onBeforeUnmount(() => { .regularZoomMenu { @media (max-width: $breakpoint-2xs) { - transform: translateY(90px); + transform: translateY(-90px); } } .demoZoomMenu { - transform: translate(10px); + transform: translate(-10px, 10px); } From 6d92771d2f3b3917586dc9b05ae3b08da095fae9 Mon Sep 17 00:00:00 2001 From: Csaba Tuncsik Date: Wed, 26 Oct 2022 10:45:57 +0200 Subject: [PATCH 16/28] fix(editor): roll back process.env --- packages/editor-ui/src/main.ts | 3 ++- packages/editor-ui/src/store.ts | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/editor-ui/src/main.ts b/packages/editor-ui/src/main.ts index 40cc591022c7d..761e4a8ba373e 100644 --- a/packages/editor-ui/src/main.ts +++ b/packages/editor-ui/src/main.ts @@ -44,7 +44,8 @@ new Vue({ render: h => h(App), }).$mount('#app'); -if (process.env.NODE_ENV !== 'production') { +// @ts-ignore +if (import.meta.env.NODE_ENV !== 'production') { // Make sure that we get all error messages properly displayed // as long as we are not in production mode window.onerror = (message, source, lineno, colno, error) => { diff --git a/packages/editor-ui/src/store.ts b/packages/editor-ui/src/store.ts index ea19cf968b83b..9acbfc33350a4 100644 --- a/packages/editor-ui/src/store.ts +++ b/packages/editor-ui/src/store.ts @@ -126,7 +126,8 @@ const modules = { }; export const store = new Vuex.Store({ - strict: process.env.NODE_ENV !== 'production', + // @ts-ignore + strict: import.meta.env.NODE_ENV !== 'production', modules, state, mutations: { From 5f00ee72203a91e38c664939a5791436caa6918d Mon Sep 17 00:00:00 2001 From: Csaba Tuncsik Date: Wed, 26 Oct 2022 10:46:45 +0200 Subject: [PATCH 17/28] fix(editor): fix canvas controls positioning --- packages/editor-ui/src/components/CanvasControls.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/editor-ui/src/components/CanvasControls.vue b/packages/editor-ui/src/components/CanvasControls.vue index 459d4ea93df83..3a73407f7b845 100644 --- a/packages/editor-ui/src/components/CanvasControls.vue +++ b/packages/editor-ui/src/components/CanvasControls.vue @@ -55,7 +55,7 @@ onBeforeUnmount(() => { width: 210px; left: 0; bottom: 0; - transform: translate($sidebar-width + $--zoom-menu-margin, 44px); + transform: translate($sidebar-width + $--zoom-menu-margin, -44px); line-height: 25px; color: #444; padding-right: 5px; @@ -82,11 +82,11 @@ onBeforeUnmount(() => { .regularZoomMenu { @media (max-width: $breakpoint-2xs) { - transform: translateY(-90px); + transform: translate($sidebar-width + $--zoom-menu-margin, -100px); } } .demoZoomMenu { - transform: translate(-10px, 10px); + transform: translate(10px, -10px); } From e0e3b99f438e9213a20b68ef6f4c720ab9019f46 Mon Sep 17 00:00:00 2001 From: Csaba Tuncsik Date: Wed, 26 Oct 2022 11:22:49 +0200 Subject: [PATCH 18/28] fix(editor): fix canvas controls positioning --- packages/editor-ui/src/components/CanvasControls.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/editor-ui/src/components/CanvasControls.vue b/packages/editor-ui/src/components/CanvasControls.vue index 3a73407f7b845..ba44b5f51d506 100644 --- a/packages/editor-ui/src/components/CanvasControls.vue +++ b/packages/editor-ui/src/components/CanvasControls.vue @@ -48,9 +48,9 @@ onBeforeUnmount(() => { From e18fff94a1816fa85a85fcbd9c18e1526ea1c3cf Mon Sep 17 00:00:00 2001 From: Csaba Tuncsik Date: Wed, 26 Oct 2022 16:42:36 +0200 Subject: [PATCH 20/28] fix(editor): not storing html element in the store --- packages/editor-ui/src/modules/canvas.ts | 20 +++----------------- packages/editor-ui/src/views/NodeView.vue | 9 ++++++++- 2 files changed, 11 insertions(+), 18 deletions(-) diff --git a/packages/editor-ui/src/modules/canvas.ts b/packages/editor-ui/src/modules/canvas.ts index c5cf4bf581aca..c991a8779fa73 100644 --- a/packages/editor-ui/src/modules/canvas.ts +++ b/packages/editor-ui/src/modules/canvas.ts @@ -19,7 +19,7 @@ export const useCanvasStore = defineStore('canvas', () => { node => node.type === START_NODE_TYPE || rootStore.getters['nodeTypes/isTriggerNode'](node.type), ), ); - const nodeViewHtmlElement = ref(null); + const isDemo = ref(false); const nodeViewScale = ref(1); const canvasAddButtonPosition = ref([1, 1]); @@ -47,20 +47,6 @@ export const useCanvasStore = defineStore('canvas', () => { const setZoomLevel = (zoomLevel: number) => { nodeViewScale.value = zoomLevel; - const element = nodeViewHtmlElement.value; - if (!element) { - return; - } - - // https://docs.jsplumbtoolkit.com/community/current/articles/zooming.html - const scaleString = 'scale(' + zoomLevel + ')'; - - ['webkit', 'moz', 'ms', 'o'].forEach((prefix) => { - // @ts-ignore - element.style[prefix + 'Transform'] = scaleString; - }); - element.style.transform = scaleString; - jsPlumbInstance.setZoom(zoomLevel); }; @@ -100,7 +86,7 @@ export const useCanvasStore = defineStore('canvas', () => { return; } - const {zoomLevel, offset} = CanvasHelpers.getZoomToFit(nodes); + const {zoomLevel, offset} = CanvasHelpers.getZoomToFit(nodes, !isDemo.value); setZoomLevel(zoomLevel); rootStore.commit('setNodeViewOffsetPosition', {newOffset: offset}); @@ -108,7 +94,7 @@ export const useCanvasStore = defineStore('canvas', () => { return { jsPlumbInstance, - nodeViewHtmlElement, + isDemo, nodeViewScale, canvasAddButtonPosition, setRecenteredCanvasAddButtonPosition, diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue index 5b2579985f76b..b212e5c47b373 100644 --- a/packages/editor-ui/src/views/NodeView.vue +++ b/packages/editor-ui/src/views/NodeView.vue @@ -309,6 +309,13 @@ export default mixins( if (containsTrigger === false) this.canvasStore.setRecenteredCanvasAddButtonPosition(this.getNodeViewOffsetPosition); else this.tryToAddWelcomeSticky(); }, + nodeViewScale(newScale) { + const element = this.$refs.nodeView as HTMLDivElement; + + if(element) { + element.style.transform = `scale(${newScale})`; + } + }, }, async beforeRouteLeave(to, from, next) { const nextTab = getNodeViewTab(to); @@ -3165,7 +3172,6 @@ export default mixins( }, }, async mounted() { - this.canvasStore.nodeViewHtmlElement = this.$refs.nodeView as HTMLDivElement; this.$titleReset(); window.addEventListener('message', this.onPostMessageReceived); this.$root.$on('importWorkflowData', this.onImportWorkflowDataEvent); @@ -3270,6 +3276,7 @@ export default mixins( this.$root.$on('importWorkflowUrl', this.onImportWorkflowUrlEvent); dataPinningEventBus.$on('pin-data', this.addPinDataConnections); dataPinningEventBus.$on('unpin-data', this.removePinDataConnections); + this.canvasStore.isDemo = this.isDemo; }, deactivated () { document.removeEventListener('keydown', this.keyDown); From 6de36e6476f473966d830ebe1cc78ec20cf85f9f Mon Sep 17 00:00:00 2001 From: Csaba Tuncsik Date: Wed, 26 Oct 2022 16:59:22 +0200 Subject: [PATCH 21/28] fix(editor): remove unused variables --- packages/editor-ui/src/components/CanvasControls.vue | 8 ++------ packages/editor-ui/src/views/NodeView.vue | 8 +------- 2 files changed, 3 insertions(+), 13 deletions(-) diff --git a/packages/editor-ui/src/components/CanvasControls.vue b/packages/editor-ui/src/components/CanvasControls.vue index 09f27afbffb1d..5e77148eaf568 100644 --- a/packages/editor-ui/src/components/CanvasControls.vue +++ b/packages/editor-ui/src/components/CanvasControls.vue @@ -1,6 +1,6 @@