mohiit1502/Automata
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(editor): Apply Prettier (no-changelog) (#4920)

Browse Source 
* ⚡ Adjust `format` script

* 🔥 Remove exemption for `editor-ui`

* 🎨 Prettify

* 👕 Fix lint
This commit is contained in:
Iván Ovejero
2022-12-14 10:04:10 +01:00
committed by GitHub
parent bcde07e032
commit 5ca2148c7e
284 changed files with 19247 additions and 15540 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
packages/editor-ui/src/components/NDVDraggablePanels.vue
View File

@@ -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);
},