+
@@ -38,12 +43,12 @@
diff --git a/packages/editor-ui/src/components/NDVDraggablePanels.vue b/packages/editor-ui/src/components/NDVDraggablePanels.vue
index cb72316efb..5ff5cc40e5 100644
--- a/packages/editor-ui/src/components/NDVDraggablePanels.vue
+++ b/packages/editor-ui/src/components/NDVDraggablePanels.vue
@@ -43,24 +43,20 @@ import { get } from 'lodash';
import { INodeTypeDescription } from 'n8n-workflow';
import PanelDragButton from './PanelDragButton.vue';
-import {
- LOCAL_STORAGE_MAIN_PANEL_RELATIVE_WIDTH,
- MAIN_NODE_PANEL_WIDTH,
-} from '@/constants';
+import { LOCAL_STORAGE_MAIN_PANEL_RELATIVE_WIDTH, MAIN_NODE_PANEL_WIDTH } from '@/constants';
import mixins from 'vue-typed-mixins';
import { debounceHelper } from '@/mixins/debounce';
import { mapStores } from 'pinia';
import { useNDVStore } from '@/stores/ndv';
import { NodePanelType } from '@/Interface';
-
const SIDE_MARGIN = 24;
const SIDE_PANELS_MARGIN = 80;
const MIN_PANEL_WIDTH = 280;
const PANEL_WIDTH = 320;
const PANEL_WIDTH_LARGE = 420;
-const initialMainPanelWidth:{ [key: string]: number } = {
+const initialMainPanelWidth: { [key: string]: number } = {
regular: MAIN_NODE_PANEL_WIDTH,
dragless: MAIN_NODE_PANEL_WIDTH,
unknown: MAIN_NODE_PANEL_WIDTH,
@@ -88,7 +84,12 @@ export default mixins(debounceHelper).extend({
default: () => ({}),
},
},
- data(): { windowWidth: number, isDragging: boolean, MIN_PANEL_WIDTH: number, initialized: boolean} {
+ data(): {
+ windowWidth: number;
+ isDragging: boolean;
+ MIN_PANEL_WIDTH: number;
+ initialized: boolean;
+ } {
return {
windowWidth: 1,
isDragging: false,
@@ -103,7 +104,10 @@ export default mixins(debounceHelper).extend({
Only set(or restore) initial position if `mainPanelDimensions`
is at the default state({relativeLeft:1, relativeRight: 1, relativeWidth: 1}) to make sure we use store values if they are set
*/
- if(this.mainPanelDimensions.relativeLeft === 1 && this.mainPanelDimensions.relativeRight === 1) {
+ if (
+ this.mainPanelDimensions.relativeLeft === 1 &&
+ this.mainPanelDimensions.relativeRight === 1
+ ) {
this.setMainPanelWidth();
this.setPositions(this.getInitialLeftPosition(this.mainPanelDimensions.relativeWidth));
this.restorePositionData();
@@ -119,26 +123,24 @@ export default mixins(debounceHelper).extend({
window.removeEventListener('resize', this.setTotalWidth);
},
computed: {
- ...mapStores(
- useNDVStore,
- ),
+ ...mapStores(useNDVStore),
mainPanelDimensions(): {
- relativeWidth: number,
- relativeLeft: number,
- relativeRight: number
- } {
+ relativeWidth: number;
+ relativeLeft: number;
+ relativeRight: number;
+ } {
return this.ndvStore.getMainPanelDimensions(this.currentNodePaneType);
},
supportedResizeDirections(): string[] {
const supportedDirections = ['right'];
- if(this.isDraggable) supportedDirections.push('left');
+ if (this.isDraggable) supportedDirections.push('left');
return supportedDirections;
},
currentNodePaneType(): string {
- if(!this.hasInputSlot) return 'inputless';
- if(!this.isDraggable) return 'dragless';
- if(this.nodeType === null) return 'unknown';
+ if (!this.hasInputSlot) return 'inputless';
+ if (!this.isDraggable) return 'dragless';
+ if (this.nodeType === null) return 'unknown';
return get(this, 'nodeType.parameterPane') || 'regular';
},
hasInputSlot(): boolean {
@@ -151,13 +153,13 @@ export default mixins(debounceHelper).extend({
return 2 * (SIDE_MARGIN + SIDE_PANELS_MARGIN) + MIN_PANEL_WIDTH;
},
minimumLeftPosition(): number {
- if(this.windowWidth < this.minWindowWidth) return this.pxToRelativeWidth(1);
+ if (this.windowWidth < this.minWindowWidth) return this.pxToRelativeWidth(1);
- if(!this.hasInputSlot) return this.pxToRelativeWidth(SIDE_MARGIN);
+ if (!this.hasInputSlot) return this.pxToRelativeWidth(SIDE_MARGIN);
return this.pxToRelativeWidth(SIDE_MARGIN + 20) + this.inputPanelMargin;
},
maximumRightPosition(): number {
- if(this.windowWidth < this.minWindowWidth) return this.pxToRelativeWidth(1);
+ if (this.windowWidth < this.minWindowWidth) return this.pxToRelativeWidth(1);
return this.pxToRelativeWidth(SIDE_MARGIN + 20) + this.inputPanelMargin;
},
@@ -167,39 +169,41 @@ export default mixins(debounceHelper).extend({
canMoveRight(): boolean {
return this.mainPanelDimensions.relativeRight > this.maximumRightPosition;
},
- mainPanelStyles(): { left: string, right: string } {
+ mainPanelStyles(): { left: string; right: string } {
return {
- 'left': `${this.relativeWidthToPx(this.mainPanelDimensions.relativeLeft)}px`,
- 'right': `${this.relativeWidthToPx(this.mainPanelDimensions.relativeRight)}px`,
+ left: `${this.relativeWidthToPx(this.mainPanelDimensions.relativeLeft)}px`,
+ right: `${this.relativeWidthToPx(this.mainPanelDimensions.relativeRight)}px`,
};
},
- inputPanelStyles():{ right: string } {
+ inputPanelStyles(): { right: string } {
return {
right: `${this.relativeWidthToPx(this.calculatedPositions.inputPanelRelativeRight)}px`,
};
},
- outputPanelStyles(): { left: string, transform: string} {
+ outputPanelStyles(): { left: string; transform: string } {
return {
left: `${this.relativeWidthToPx(this.calculatedPositions.outputPanelRelativeLeft)}px`,
transform: `translateX(-${this.relativeWidthToPx(this.outputPanelRelativeTranslate)}px)`,
};
},
- calculatedPositions():{ inputPanelRelativeRight: number, outputPanelRelativeLeft: number } {
+ calculatedPositions(): { inputPanelRelativeRight: number; outputPanelRelativeLeft: number } {
const hasInput = this.$slots.input !== undefined;
- const outputPanelRelativeLeft = this.mainPanelDimensions.relativeLeft + this.mainPanelDimensions.relativeWidth;
+ const outputPanelRelativeLeft =
+ this.mainPanelDimensions.relativeLeft + this.mainPanelDimensions.relativeWidth;
const inputPanelRelativeRight = hasInput
? 1 - outputPanelRelativeLeft + this.mainPanelDimensions.relativeWidth
- : (1 - this.pxToRelativeWidth(SIDE_MARGIN));
+ : 1 - this.pxToRelativeWidth(SIDE_MARGIN);
return {
inputPanelRelativeRight,
outputPanelRelativeLeft,
};
},
- outputPanelRelativeTranslate():number {
+ outputPanelRelativeTranslate(): number {
const panelMinLeft = 1 - this.pxToRelativeWidth(MIN_PANEL_WIDTH + SIDE_MARGIN);
- const currentRelativeLeftDelta = this.calculatedPositions.outputPanelRelativeLeft - panelMinLeft;
+ const currentRelativeLeftDelta =
+ this.calculatedPositions.outputPanelRelativeLeft - panelMinLeft;
return currentRelativeLeftDelta > 0 ? currentRelativeLeftDelta : 0;
},
hasDoubleWidth(): boolean {
@@ -223,7 +227,7 @@ export default mixins(debounceHelper).extend({
windowWidth(windowWidth) {
const minRelativeWidth = this.pxToRelativeWidth(MIN_PANEL_WIDTH);
// Prevent the panel resizing below MIN_PANEL_WIDTH whhile maintaing position
- if(this.isBelowMinWidthMainPanel) {
+ if (this.isBelowMinWidthMainPanel) {
this.setMainPanelWidth(minRelativeWidth);
}
@@ -231,7 +235,7 @@ export default mixins(debounceHelper).extend({
const isMaxRight = this.maximumRightPosition > this.mainPanelDimensions.relativeRight;
// When user is resizing from non-supported view(sub ~488px) we need to refit the panels
- if((windowWidth > this.minWindowWidth) && isBelowMinLeft && isMaxRight) {
+ if (windowWidth > this.minWindowWidth && isBelowMinLeft && isMaxRight) {
this.setMainPanelWidth(minRelativeWidth);
this.setPositions(this.getInitialLeftPosition(this.mainPanelDimensions.relativeWidth));
}
@@ -241,14 +245,14 @@ export default mixins(debounceHelper).extend({
},
methods: {
getInitialLeftPosition(width: number) {
- if(this.currentNodePaneType === 'dragless') return this.pxToRelativeWidth(SIDE_MARGIN + 1 + this.fixedPanelWidth);
+ if (this.currentNodePaneType === 'dragless')
+ return this.pxToRelativeWidth(SIDE_MARGIN + 1 + this.fixedPanelWidth);
- return this.hasInputSlot
- ? 0.5 - (width / 2)
- : this.minimumLeftPosition;
+ return this.hasInputSlot ? 0.5 - width / 2 : this.minimumLeftPosition;
},
setMainPanelWidth(relativeWidth?: number) {
- const mainPanelRelativeWidth = relativeWidth || this.pxToRelativeWidth(initialMainPanelWidth[this.currentNodePaneType]);
+ const mainPanelRelativeWidth =
+ relativeWidth || this.pxToRelativeWidth(initialMainPanelWidth[this.currentNodePaneType]);
this.ndvStore.setMainPanelDimensions({
panelType: this.currentNodePaneType,
@@ -258,14 +262,16 @@ export default mixins(debounceHelper).extend({
});
},
setPositions(relativeLeft: number) {
- const mainPanelRelativeLeft = relativeLeft || 1 - this.calculatedPositions.inputPanelRelativeRight;
- const mainPanelRelativeRight = 1 - mainPanelRelativeLeft - this.mainPanelDimensions.relativeWidth;
+ const mainPanelRelativeLeft =
+ relativeLeft || 1 - this.calculatedPositions.inputPanelRelativeRight;
+ const mainPanelRelativeRight =
+ 1 - mainPanelRelativeLeft - this.mainPanelDimensions.relativeWidth;
const isMaxRight = this.maximumRightPosition > mainPanelRelativeRight;
const isMinLeft = this.minimumLeftPosition > mainPanelRelativeLeft;
const isInputless = this.currentNodePaneType === 'inputless';
- if(isMinLeft) {
+ if (isMinLeft) {
this.ndvStore.setMainPanelDimensions({
panelType: this.currentNodePaneType,
dimensions: {
@@ -276,7 +282,7 @@ export default mixins(debounceHelper).extend({
return;
}
- if(isMaxRight) {
+ if (isMaxRight) {
this.ndvStore.setMainPanelDimensions({
panelType: this.currentNodePaneType,
dimensions: {
@@ -307,29 +313,30 @@ export default mixins(debounceHelper).extend({
onResizeEnd() {
this.storePositionData();
},
- onResizeDebounced(data: { direction: string, x: number, width: number}) {
+ onResizeDebounced(data: { direction: string; x: number; width: number }) {
if (this.initialized) {
this.callDebounced('onResize', { debounceTime: 10, trailing: true }, data);
}
},
- onResize({ direction, x, width }: { direction: string, x: number, width: number}) {
+ onResize({ direction, x, width }: { direction: string; x: number; width: number }) {
const relativeDistance = this.pxToRelativeWidth(x);
const relativeWidth = this.pxToRelativeWidth(width);
- if(direction === "left" && relativeDistance <= this.minimumLeftPosition) return;
- if(direction === "right" && (1 - relativeDistance) <= this.maximumRightPosition) return;
- if(width <= MIN_PANEL_WIDTH) return;
+ if (direction === 'left' && relativeDistance <= this.minimumLeftPosition) return;
+ if (direction === 'right' && 1 - relativeDistance <= this.maximumRightPosition) return;
+ if (width <= MIN_PANEL_WIDTH) return;
this.setMainPanelWidth(relativeWidth);
- this.setPositions(direction === 'left'
- ? relativeDistance
- : this.mainPanelDimensions.relativeLeft,
+ this.setPositions(
+ direction === 'left' ? relativeDistance : this.mainPanelDimensions.relativeLeft,
);
},
restorePositionData() {
- const storedPanelWidthData = window.localStorage.getItem(`${LOCAL_STORAGE_MAIN_PANEL_RELATIVE_WIDTH}_${this.currentNodePaneType}`);
+ const storedPanelWidthData = window.localStorage.getItem(
+ `${LOCAL_STORAGE_MAIN_PANEL_RELATIVE_WIDTH}_${this.currentNodePaneType}`,
+ );
- if(storedPanelWidthData) {
+ if (storedPanelWidthData) {
const parsedWidth = parseFloat(storedPanelWidthData);
this.setMainPanelWidth(parsedWidth);
const initialPosition = this.getInitialLeftPosition(parsedWidth);
@@ -340,14 +347,17 @@ export default mixins(debounceHelper).extend({
return false;
},
storePositionData() {
- window.localStorage.setItem(`${LOCAL_STORAGE_MAIN_PANEL_RELATIVE_WIDTH}_${this.currentNodePaneType}`, this.mainPanelDimensions.relativeWidth.toString());
+ window.localStorage.setItem(
+ `${LOCAL_STORAGE_MAIN_PANEL_RELATIVE_WIDTH}_${this.currentNodePaneType}`,
+ this.mainPanelDimensions.relativeWidth.toString(),
+ );
},
onDragStart() {
this.isDragging = true;
this.$emit('dragstart', { position: this.mainPanelDimensions.relativeLeft });
},
- onDrag(e: {x: number, y: number}) {
- const relativeLeft = this.pxToRelativeWidth(e.x) - (this.mainPanelDimensions.relativeWidth / 2);
+ onDrag(e: { x: number; y: number }) {
+ const relativeLeft = this.pxToRelativeWidth(e.x) - this.mainPanelDimensions.relativeWidth / 2;
this.setPositions(relativeLeft);
},
diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
index d2683b6c70..fe25ec4d23 100644
--- a/packages/editor-ui/src/components/Node.vue
+++ b/packages/editor-ui/src/components/Node.vue
@@ -1,11 +1,28 @@
-
-
-
+
+
+
-
+
@@ -35,7 +52,12 @@
-
+
-
-
+
-
+
-
+
-
{{ nodeTitle }}
-
- ({{ $locale.baseText('node.disabled') }})
-
+
({{ $locale.baseText('node.disabled') }})
{{ nodeSubtitle }}
@@ -95,21 +141,20 @@
diff --git a/packages/editor-ui/src/components/Node/NodeCreation.vue b/packages/editor-ui/src/components/Node/NodeCreation.vue
index 97103fbee4..58f4948226 100644
--- a/packages/editor-ui/src/components/Node/NodeCreation.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreation.vue
@@ -1,10 +1,29 @@
-
+
@@ -17,11 +36,11 @@
@@ -557,7 +636,6 @@ const { activeSubcategoryIndex, activeIndex, mainPanelContainer } = toRefs(state
right: 0;
}
-
:global(.panel-slide-out-enter),
:global(.panel-slide-in-leave-to) {
transform: translateX(0);
@@ -593,7 +671,7 @@ const { activeSubcategoryIndex, activeIndex, mainPanelContainer } = toRefs(state
margin: 0 var(--spacing-xs) 0;
padding: var(--spacing-4xs) 0;
line-height: var(--font-line-height-regular);
- border-top: 1px solid #DBDFE7;
+ border-top: 1px solid #dbdfe7;
z-index: 1;
margin-top: -1px;
}
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/CategoryItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/CategoryItem.vue
index d67616f57f..18363d692c 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/CategoryItem.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/CategoryItem.vue
@@ -1,13 +1,9 @@
- {{ renderCategoryName(item.category) }}{{ count !== undefined ? ` (${count})` : ''}}
+ {{ renderCategoryName(item.category) }}{{ count !== undefined ? ` (${count})` : '' }}
-
+
@@ -25,15 +21,13 @@ export interface Props {
const props = defineProps
();
const instance = getCurrentInstance();
-const isExpanded = computed(() =>(props.item.properties as ICategoryItemProps).expanded);
+const isExpanded = computed(() => (props.item.properties as ICategoryItemProps).expanded);
function renderCategoryName(categoryName: string) {
const camelCasedCategoryName = camelcase(categoryName) as CategoryName;
const key = `nodeCreator.categoryNames.${camelCasedCategoryName}` as const;
- return instance?.proxy.$locale.exists(key)
- ? instance?.proxy.$locale.baseText(key)
- : categoryName;
+ return instance?.proxy.$locale.exists(key) ? instance?.proxy.$locale.baseText(key) : categoryName;
}
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/ItemIterator.vue b/packages/editor-ui/src/components/Node/NodeCreator/ItemIterator.vue
index 06e402b5f3..fcaa88eb0e 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/ItemIterator.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/ItemIterator.vue
@@ -12,10 +12,10 @@
:key="`${item.key}-${index}`"
data-test-id="item-iterator-item"
:class="{
- 'clickable': !disabled,
+ clickable: !disabled,
[$style[item.type]]: true,
[$style.active]: activeIndex === index && !disabled,
- [$style.iteratorItem]: true
+ [$style.iteratorItem]: true,
}"
ref="iteratorItems"
@click="wrappedEmit('selected', item)"
@@ -26,10 +26,7 @@
:count="enableGlobalCategoriesCounter ? getCategoryCount(item) : undefined"
/>
-
+