alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(fitView): consider min and max zoom

Browse Source
This commit is contained in:
moklick
2020-08-03 23:48:12 +02:00
parent 9c90a83d01
commit 3fe9cfbf22
1 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/store/index.ts
+6 -5
View File
@@ -424,19 +424,20 @@ export const storeModel: StoreModel = {
fitView: action((state, payload = { padding: 0.1 }) => { fitView: action((state, payload = { padding: 0.1 }) => {
const { padding } = payload; const { padding } = payload;
const { nodes, width, height, d3Selection, d3Zoom } = state; const { nodes, width, height, d3Selection, minZoom, maxZoom } = state;
if (!d3Selection || !d3Zoom || !nodes.length) { if (!d3Selection || !nodes.length) {
return; return;
} }
const bounds = getRectOfNodes(nodes); const bounds = getRectOfNodes(nodes);
const maxBoundsSize = Math.max(bounds.width, bounds.height); const maxBoundsSize = Math.max(bounds.width, bounds.height);
const k = Math.min(width, height) / (maxBoundsSize + maxBoundsSize * padding); const zoom = Math.min(width, height) / (maxBoundsSize + maxBoundsSize * padding);
const clampedZoom = clamp(zoom, minZoom, maxZoom);
const boundsCenterX = bounds.x + bounds.width / 2; const boundsCenterX = bounds.x + bounds.width / 2;
const boundsCenterY = bounds.y + bounds.height / 2; const boundsCenterY = bounds.y + bounds.height / 2;
const transform = [width / 2 - boundsCenterX * k, height / 2 - boundsCenterY * k]; const transform = [width / 2 - boundsCenterX * clampedZoom, height / 2 - boundsCenterY * clampedZoom];
const fittedTransform = zoomIdentity.translate(transform[0], transform[1]).scale(k); const fittedTransform = zoomIdentity.translate(transform[0], transform[1]).scale(clampedZoom);
// we need to sync the d3 zoom transform with the fitted transform // we need to sync the d3 zoom transform with the fitted transform
d3Selection.property('__zoom', fittedTransform); d3Selection.property('__zoom', fittedTransform);