From d01f7d4d93366054075fdfcadfdff5cf03913472 Mon Sep 17 00:00:00 2001 From: OlegIvaniv Date: Thu, 22 Sep 2022 17:41:15 +0200 Subject: [PATCH] feat(editor-ui): Resizable main panel (#3980) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Introduce node deprecation (#3930) :sparkles: Introduce node deprecation * :construction: Scaffold out Code node * :shirt: Fix lint * :blue_book: Create types file * :truck: Rename theme * :fire: Remove unneeded prop * :zap: Override keybindings * :zap: Expand lintings * :zap: Create editor content getter * :truck: Ensure all helpers use `$` * :sparkles: Add autocompletion * :recycle: Refactore Resize UI lib component, allow to use it in different than n8n-sticky context * :construction: Use variable width for node settings and allow for resizing * :sparkles: Use store to keep track of wide and regular main panel widths * :recycle: Extract Resize wrapper from the Sticky and create a story for it * :bug: Fixed cherry-pick conflicts * :zap: Filter out welcome note node * :zap: Convey error line number * :zap: Highlight error line * :zap: Restore logging from node * :sparkles: More autocompletions * :zap: Streamline completions * :lipstick: Fix drag-button border * :pencil2: Update placeholders * :zap: Update linter to new methods * :sparkles: Preserve main panel width in local storage * :bug: Fallback to max size size if window is too big * :fire: Remove `$nodeItem` completions * :zap: Re-update placeholders * :art: Fix formatting * :package: Update `package-lock.json` * :zap: Refresh with multi-line empty string * :recycle: Refactored DraggablePanels to use relative units and implemented independent resizing, cleaned store * :bug: Re-implement dragging indicators and move border styles to NDVDraggablePanels component * :rotating_light: Fix semis * :rotating_light: Remove unsused UI state props * :recycle: Use only relative left position and calculate right based on it, fix quirks * 🚨Fix linting error * :recycle: Store and retrieve main panel dimensions from store to make them persistable in the same app mount session * :bug: Prevent resizing of unknown nodes * :recycle: Add typings for `nodeType` prop, remove unused `convertRemToPixels` import * :label: Add typings for `nodeType` prop in NodeSettings.vue * :bug: Prevent the main panel resize below 280px * :bug: Fix inputless panel left position * :sparkles: Resize resource locator on main panel size change * :bug: Resize resource locator on window resize Co-authored-by: Iván Ovejero --- package-lock.json | 62 +-- .../N8nResizeWrapper/ResizeWrapper.stories.js | 77 ++++ .../ResizeWrapper.vue} | 83 ++-- .../src/components/N8nResizeWrapper/index.js | 3 + .../src/components/N8nSticky/Sticky.vue | 8 +- .../src/plugins/n8nComponents.ts | 2 + packages/editor-ui/src/Interface.ts | 1 + .../src/components/NDVDraggablePanels.vue | 372 +++++++++++++----- .../src/components/NodeDetailsView.vue | 2 + .../editor-ui/src/components/NodeSettings.vue | 25 +- .../src/components/PanelDragButton.vue | 7 +- .../ResourceLocator/ResourceLocator.vue | 20 +- .../ResourceLocatorDropdown.vue | 7 +- packages/editor-ui/src/components/helpers.ts | 4 + packages/editor-ui/src/constants.ts | 2 + packages/editor-ui/src/modules/ui.ts | 17 +- 16 files changed, 510 insertions(+), 182 deletions(-) create mode 100644 packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.stories.js rename packages/design-system/src/components/{N8nSticky/Resize.vue => N8nResizeWrapper/ResizeWrapper.vue} (67%) create mode 100644 packages/design-system/src/components/N8nResizeWrapper/index.js diff --git a/package-lock.json b/package-lock.json index 57c3b6cb4a9..c42ee68111c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "n8n", - "version": "0.194.0", + "version": "0.195.3", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "n8n", - "version": "0.194.0", + "version": "0.195.3", "workspaces": [ "packages/*", "packages/@n8n_io/*" @@ -52142,7 +52142,7 @@ }, "packages/cli": { "name": "n8n", - "version": "0.194.0", + "version": "0.195.3", "license": "SEE LICENSE IN LICENSE.md", "dependencies": { "@oclif/command": "^1.5.18", @@ -52186,10 +52186,10 @@ "lodash.split": "^4.4.2", "lodash.unset": "^4.5.2", "mysql2": "~2.3.0", - "n8n-core": "~0.134.0", - "n8n-editor-ui": "~0.160.0", - "n8n-nodes-base": "~0.192.0", - "n8n-workflow": "~0.116.0", + "n8n-core": "~0.135.0", + "n8n-editor-ui": "~0.161.1", + "n8n-nodes-base": "~0.193.1", + "n8n-workflow": "~0.117.0", "nodemailer": "^6.7.1", "oauth-1.0a": "^2.2.6", "open": "^7.0.0", @@ -52268,7 +52268,7 @@ }, "packages/core": { "name": "n8n-core", - "version": "0.134.0", + "version": "0.135.0", "license": "SEE LICENSE IN LICENSE.md", "dependencies": { "axios": "^0.21.1", @@ -52280,7 +52280,7 @@ "form-data": "^4.0.0", "lodash.get": "^4.4.2", "mime-types": "^2.1.27", - "n8n-workflow": "~0.116.0", + "n8n-workflow": "~0.117.0", "oauth-1.0a": "^2.2.6", "p-cancelable": "^2.0.0", "qs": "^6.10.1", @@ -52367,7 +52367,7 @@ }, "packages/design-system": { "name": "n8n-design-system", - "version": "0.34.0", + "version": "0.35.0", "license": "SEE LICENSE IN LICENSE.md", "dependencies": { "element-ui": "~2.15.7", @@ -52434,14 +52434,14 @@ }, "packages/editor-ui": { "name": "n8n-editor-ui", - "version": "0.160.0", + "version": "0.161.1", "license": "SEE LICENSE IN LICENSE.md", "dependencies": { "@fontsource/open-sans": "^4.5.0", "@fortawesome/free-regular-svg-icons": "^6.1.1", "luxon": "^2.3.0", "monaco-editor": "^0.30.1", - "n8n-design-system": "~0.34.0", + "n8n-design-system": "~0.35.0", "timeago.js": "^4.0.2", "v-click-outside": "^3.1.2", "vue-fragment": "1.5.1", @@ -52487,7 +52487,7 @@ "lodash.get": "^4.4.2", "lodash.set": "^4.3.2", "monaco-editor-webpack-plugin": "^5.0.0", - "n8n-workflow": "~0.116.0", + "n8n-workflow": "~0.117.0", "normalize-wheel": "^1.0.1", "prismjs": "^1.17.1", "quill": "^2.0.0-dev.3", @@ -52513,7 +52513,7 @@ }, "packages/node-dev": { "name": "n8n-node-dev", - "version": "0.73.0", + "version": "0.74.0", "license": "SEE LICENSE IN LICENSE.md", "dependencies": { "@oclif/command": "^1.5.18", @@ -52521,8 +52521,8 @@ "change-case": "^4.1.1", "fast-glob": "^3.2.5", "inquirer": "^7.0.1", - "n8n-core": "~0.134.0", - "n8n-workflow": "~0.116.0", + "n8n-core": "~0.135.0", + "n8n-workflow": "~0.117.0", "oauth-1.0a": "^2.2.6", "replace-in-file": "^6.0.0", "request": "^2.88.2", @@ -52544,7 +52544,7 @@ }, "packages/nodes-base": { "name": "n8n-nodes-base", - "version": "0.192.0", + "version": "0.193.1", "license": "SEE LICENSE IN LICENSE.md", "dependencies": { "@kafkajs/confluent-schema-registry": "1.0.6", @@ -52579,7 +52579,7 @@ "mqtt": "4.2.6", "mssql": "^8.1.2", "mysql2": "~2.3.0", - "n8n-core": "~0.134.0", + "n8n-core": "~0.135.0", "node-html-markdown": "^1.1.3", "node-ssh": "^12.0.0", "nodemailer": "^6.7.1", @@ -52636,7 +52636,7 @@ "eslint-plugin-n8n-nodes-base": "^1.9.3", "gulp": "^4.0.0", "jest": "^27.4.7", - "n8n-workflow": "~0.116.0", + "n8n-workflow": "~0.117.0", "ts-jest": "^27.1.3", "tslint": "^6.1.2", "typescript": "~4.6.0" @@ -52686,7 +52686,7 @@ }, "packages/workflow": { "name": "n8n-workflow", - "version": "0.116.0", + "version": "0.117.0", "license": "SEE LICENSE IN LICENSE.md", "dependencies": { "@n8n_io/riot-tmpl": "^1.0.1", @@ -81496,10 +81496,10 @@ "lodash.split": "^4.4.2", "lodash.unset": "^4.5.2", "mysql2": "~2.3.0", - "n8n-core": "~0.134.0", - "n8n-editor-ui": "~0.160.0", - "n8n-nodes-base": "~0.192.0", - "n8n-workflow": "~0.116.0", + "n8n-core": "~0.135.0", + "n8n-editor-ui": "~0.161.1", + "n8n-nodes-base": "~0.193.1", + "n8n-workflow": "~0.117.0", "nodemailer": "^6.7.1", "nodemon": "^2.0.2", "oauth-1.0a": "^2.2.6", @@ -81553,7 +81553,7 @@ "jest": "^27.4.7", "lodash.get": "^4.4.2", "mime-types": "^2.1.27", - "n8n-workflow": "~0.116.0", + "n8n-workflow": "~0.117.0", "oauth-1.0a": "^2.2.6", "p-cancelable": "^2.0.0", "qs": "^6.10.1", @@ -81699,8 +81699,8 @@ "luxon": "^2.3.0", "monaco-editor": "^0.30.1", "monaco-editor-webpack-plugin": "^5.0.0", - "n8n-design-system": "~0.34.0", - "n8n-workflow": "~0.116.0", + "n8n-design-system": "~0.35.0", + "n8n-workflow": "~0.117.0", "normalize-wheel": "^1.0.1", "prismjs": "^1.17.1", "quill": "^2.0.0-dev.3", @@ -81746,8 +81746,8 @@ "change-case": "^4.1.1", "fast-glob": "^3.2.5", "inquirer": "^7.0.1", - "n8n-core": "~0.134.0", - "n8n-workflow": "~0.116.0", + "n8n-core": "~0.135.0", + "n8n-workflow": "~0.117.0", "oauth-1.0a": "^2.2.6", "replace-in-file": "^6.0.0", "request": "^2.88.2", @@ -81824,8 +81824,8 @@ "mqtt": "4.2.6", "mssql": "^8.1.2", "mysql2": "~2.3.0", - "n8n-core": "~0.134.0", - "n8n-workflow": "~0.116.0", + "n8n-core": "~0.135.0", + "n8n-workflow": "~0.117.0", "node-html-markdown": "^1.1.3", "node-ssh": "^12.0.0", "nodemailer": "^6.7.1", diff --git a/packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.stories.js b/packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.stories.js new file mode 100644 index 00000000000..d4bca014f46 --- /dev/null +++ b/packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.stories.js @@ -0,0 +1,77 @@ +import { action } from '@storybook/addon-actions'; +import N8nResizeWrapper from './ResizeWrapper.vue'; + +export default { + title: 'Atoms/ResizeWrapper', + component: N8nResizeWrapper, +}; + +const methods = { + onInput: action('input'), + onResize(resizeData) { + action('resize', resizeData); + this.newHeight = resizeData.height; + this.newWidth = resizeData.width; + }, + onResizeEnd: action('resizeend'), + onResizeStart: action('resizestart'), +}; + +const Template = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { + N8nResizeWrapper, + }, + data() { + return { + newWidth: this.width, + newHeight: this.height, + background: "linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%)", + }; + }, + computed: { + containerStyles() { + return { + width: `${this.newWidth}px`, + height: `${this.newHeight}px`, + background: this.background, + }; + }, + }, + template: + `
+ +
+ +
`, + methods, +}); + +export const Resize = Template.bind({}); +Resize.args = { + width: 200, + height: 200, + minWidth: 200, + minHeight: 200, + scale: 1, + gridSize: 20, + isResizingEnabled: true, + supportedDirections: [ + "right", + "top", + "bottom", + "left", + "topLeft", + "topRight", + "bottomLeft", + "bottomRight", + ], +}; diff --git a/packages/design-system/src/components/N8nSticky/Resize.vue b/packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.vue similarity index 67% rename from packages/design-system/src/components/N8nSticky/Resize.vue rename to packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.vue index 8427ac2ebde..607aa03daba 100644 --- a/packages/design-system/src/components/N8nSticky/Resize.vue +++ b/packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.vue @@ -1,34 +1,24 @@