feat(editor-ui): Resizable main panel (#3980)

* 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 <ivov.src@gmail.com>
n8n-io · Sep 22, 2022 · d01f7d4 · d01f7d4
1 parent 8eeed77
commit d01f7d4
Show file tree

Hide file tree

Showing 16 changed files with 508 additions and 180 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.stories.js 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:
+		`<div style="width: fit-content; height: fit-content">
+			<n8n-resize-wrapper
+				v-bind="$props"
+				@resize="onResize"
+				@resizeend="onResizeEnd"
+				@resizestart="onResizeStart"
+				@input="onInput"
+				:width="newWidth"
+				:height="newHeight"
+			>
+				<div :style="containerStyles" />
+			</n8n-resize-wrapper>
+		</div>`,
+	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",
+	],
+};