mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-31 23:47:28 -08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

refactor setzoom level

Browse source
This commit is contained in:
Mutasem 2021-11-01 16:52:28 +01:00
parent b2f553a000
commit b939f7fbb9
2 changed files with 28 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -894,27 +894,10 @@ export default mixins(
return; return;
} }
const {minX, minY, maxX, maxY} = CanvasHelpers.getWorkflowCorners(nodes); const {zoomLevel, offset} = CanvasHelpers.getZoomToFit(nodes);
const PADDING = CanvasHelpers.NODE_SIZE * 4;
const editorWidth = window.innerWidth;
const diffX = maxX - minX + CanvasHelpers.SIDEBAR_WIDTH + PADDING;
const scaleX = editorWidth / diffX;
const editorHeight = window.innerHeight;
const diffY = maxY - minY + CanvasHelpers.HEADER_HEIGHT + PADDING;
const scaleY = editorHeight / diffY;
const zoomLevel = Math.min(scaleX, scaleY, 1);
let xOffset = (minX * -1) * zoomLevel + CanvasHelpers.SIDEBAR_WIDTH; // find top right corner
xOffset += (editorWidth - CanvasHelpers.SIDEBAR_WIDTH - (maxX - minX + CanvasHelpers.NODE_SIZE) * zoomLevel) / 2; // add padding to center workflow
let yOffset = (minY * -1) * zoomLevel + CanvasHelpers.HEADER_HEIGHT; // find top right corner
yOffset += (editorHeight - CanvasHelpers.HEADER_HEIGHT - (maxY - minY + CanvasHelpers.NODE_SIZE * 2) * zoomLevel) / 2; // add padding to center workflow
this.setZoomLevel(zoomLevel); this.setZoomLevel(zoomLevel);
this.$store.commit('setNodeViewOffsetPosition', {newOffset: [xOffset, yOffset]}); this.$store.commit('setNodeViewOffsetPosition', {newOffset: offset});
}, },
async stopExecution () { async stopExecution () {

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

@ -452,3 +452,29 @@ export const addConnectionOutputSuccess = (connection: Connection, output: {tota
showOrHideMidpointArrow(connection); showOrHideMidpointArrow(connection);
}; };
export const getZoomToFit = (nodes: INodeUi[]): {offset: XYPosition, zoomLevel: number} => {
const {minX, minY, maxX, maxY} = getWorkflowCorners(nodes);
const PADDING = NODE_SIZE * 4;
const editorWidth = window.innerWidth;
const diffX = maxX - minX + SIDEBAR_WIDTH + PADDING;
const scaleX = editorWidth / diffX;
const editorHeight = window.innerHeight;
const diffY = maxY - minY + HEADER_HEIGHT + PADDING;
const scaleY = editorHeight / diffY;
const zoomLevel = Math.min(scaleX, scaleY, 1);
let xOffset = (minX * -1) * zoomLevel + SIDEBAR_WIDTH; // find top right corner
xOffset += (editorWidth - SIDEBAR_WIDTH - (maxX - minX + NODE_SIZE) * zoomLevel) / 2; // add padding to center workflow
let yOffset = (minY * -1) * zoomLevel + HEADER_HEIGHT; // find top right corner
yOffset += (editorHeight - HEADER_HEIGHT - (maxY - minY + NODE_SIZE * 2) * zoomLevel) / 2; // add padding to center workflow
return {
zoomLevel,
offset: [xOffset, yOffset],
};
};