mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-29 06:29:42 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor func

Browse source
This commit is contained in:
Mutasem 2021-11-01 15:49:40 +01:00
parent 9a39c655f8
commit a822539195
2 changed files with 19 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
packages/editor-ui/src/views/NodeView.vue
View file

@ -278,23 +278,7 @@ export default mixins(
};
},
backgroundStyle (): object {
const scale = this.nodeViewScale;
const offsetPosition = this.$store.getters.getNodeViewOffsetPosition;
const squareSize = 20 * scale;
const dotSize = 1 * scale;
const dotPosition = 10 * scale;
const styles: object = {
'background-size': `${squareSize}px ${squareSize}px`,
'background-position': `left ${offsetPosition[0]}px top ${offsetPosition[1]}px`,
};
if (squareSize > 10.5) {
const dotColor = getStyleTokenValue('--color-canvas-dot');
return {
...styles,
'background-image': `radial-gradient(circle at ${dotPosition}px ${dotPosition}px, ${dotColor} ${dotSize}px, transparent 0)`,
};
}
return styles;
return CanvasHelpers.getBackgroundStyles(this.nodeViewScale, this.$store.getters.getNodeViewOffsetPosition);
},
workflowClasses () {
const returnClasses = [];

18
packages/editor-ui/src/views/canvasHelpers.ts
View file

@ -325,3 +325,21 @@ export const getRelativePosition = (x: number, y: number, scale: number, offset:
(y - offset[1]) / scale,
];
};
export const getBackgroundStyles = (scale: number, offsetPosition: XYPosition) => {
const squareSize = 20 * scale;
const dotSize = 1 * scale;
const dotPosition = 10 * scale;
const styles: object = {
'background-size': `${squareSize}px ${squareSize}px`,
'background-position': `left ${offsetPosition[0]}px top ${offsetPosition[1]}px`,
};
if (squareSize > 10.5) {
const dotColor = getStyleTokenValue('--color-canvas-dot');
return {
...styles,
'background-image': `radial-gradient(circle at ${dotPosition}px ${dotPosition}px, ${dotColor} ${dotSize}px, transparent 0)`,
};
}
return styles;
};