{
+ let fitToWindow: FitToWindow;
+ let list: any;
+ let containerRect: any;
+ let scale;
+ let panX;
+ let panY;
+
+ beforeEach(() => {
+ list = [
+ {
+ position: { x: 0, y: 207.5, id: '1', deps: [] },
+ elRect: {
+ x: 121,
+ y: 342.5,
+ bottom: 737.5,
+ left: 121,
+ right: 521,
+ top: 342.5,
+ width: 400,
+ height: 395,
+ },
+ dots: [],
+ },
+ {
+ position: { x: 500, y: 207.5, id: '2', deps: ['1'] },
+ elRect: {
+ x: 621,
+ y: 342.5,
+ bottom: 737.5,
+ left: 621,
+ right: 1021,
+ top: 342.5,
+ width: 400,
+ height: 395,
+ },
+ dots: [],
+ },
+ {
+ position: { x: 1000, y: 0, id: '3', deps: ['2'] },
+ elRect: {
+ x: 1121,
+ y: 135,
+ bottom: 530,
+ left: 1121,
+ right: 1521,
+ top: 135,
+ width: 400,
+ height: 395,
+ },
+ dots: [],
+ },
+ {
+ position: { x: 1000, y: 415, id: '4', deps: ['2'] },
+ elRect: {
+ x: 1121,
+ y: 550,
+ bottom: 945,
+ left: 1121,
+ right: 1521,
+ top: 550,
+ width: 400,
+ height: 395,
+ },
+ dots: [],
+ },
+ ];
+ containerRect = {
+ bottom: 696,
+ height: 628,
+ left: 61,
+ right: 1139,
+ top: 68,
+ width: 1078,
+ x: 61,
+ y: 68,
+ };
+ scale = 1;
+ panX = 0;
+ panY = 0;
+ fitToWindow = new FitToWindow(list, containerRect, scale, panX, panY);
+ });
+
+ it('should return positions', () => {
+ const positions = fitToWindow.getPositions();
+ expect(positions).toEqual([
+ { x: 121, y: 342.5, width: 400, height: 395 },
+ { x: 621, y: 342.5, width: 400, height: 395 },
+ { x: 1121, y: 135, width: 400, height: 395 },
+ { x: 1121, y: 550, width: 400, height: 395 },
+ ]);
+ });
+
+ it('should return boundaries', () => {
+ const positions = [
+ { x: 0, y: 0, width: 100, height: 100 },
+ { x: 100, y: 100, width: 100, height: 100 },
+ ];
+ const { minX, maxX, minY, maxY } = fitToWindow.getBoundaries(positions);
+ expect(minX).toBe(0);
+ expect(maxX).toBe(200);
+ expect(minY).toBe(0);
+ expect(maxY).toBe(200);
+ });
+
+ it('should return new scale', () => {
+ const newScale = fitToWindow.getNewScale(100, 100);
+ expect(newScale).toBe(6.28);
+ });
+
+ it('should return pan values', () => {
+ const { panX, panY } = fitToWindow.getPanValues(
+ 1430,
+ 840,
+ 0.7476,
+ 121,
+ 135
+ );
+ expect(panX).toBe(-29.176000000000016);
+ expect(panY).toBe(-38.867200000000004);
+ });
+
+ it('should return pan and scale values', () => {
+ const { scale, panX, panY } = fitToWindow.fitToWindow();
+ expect(scale).toBe(0.7476190476190476);
+ expect(panX).toBe(-29.19047619047616);
+ expect(panY).toBe(-38.876190476190494);
+ });
+});
diff --git a/src/app/flow/fit-to-window.ts b/src/app/flow/fit-to-window.ts
new file mode 100644
index 0000000..1353f19
--- /dev/null
+++ b/src/app/flow/fit-to-window.ts
@@ -0,0 +1,122 @@
+import { ChildInfo } from './connections';
+
+export class FitToWindow {
+ cRect: CPosition;
+ containerPadding = 0;
+
+ constructor(
+ private list: ChildInfo[],
+ private containerRect: DOMRect,
+ private scale: number,
+ private panX: number,
+ private panY: number
+ ) {
+ const tt = { list, containerRect, scale, panX, panY };
+ this.containerPadding = 30 / this.scale;
+ this.cRect = {
+ x: this.containerRect.x / this.scale - this.panX,
+ y: this.containerRect.y / this.scale - this.panY,
+ width: this.containerRect.width / this.scale,
+ height: this.containerRect.height / this.scale,
+ };
+ }
+
+ fitToWindow() {
+ const positions = this.getPositions();
+ const { minX, maxX, minY, maxY } = this.getBoundaries(positions);
+ const adjMaxX = maxX - minX + this.containerPadding;
+ const adjMaxY = maxY - minY + this.containerPadding;
+ const newScale = this.getNewScale(adjMaxX, adjMaxY);
+ const { panX, panY } = this.getPanValues(
+ adjMaxX,
+ adjMaxY,
+ newScale,
+ minX,
+ minY
+ );
+ return { scale: newScale, panX, panY };
+ }
+
+ getPositions() {
+ return this.list.map((child) => {
+ const scaledX = child.elRect.x / this.scale - this.panX;
+ const scaledY = child.elRect.y / this.scale - this.panY;
+ const scaledWidth = child.elRect.width;
+ const scaledHeight = child.elRect.height;
+ return {
+ x: scaledX,
+ y: scaledY,
+ width: scaledWidth,
+ height: scaledHeight,
+ };
+ });
+ }
+
+ getBoundaries(positions: CPosition[]) {
+ const minX = Math.min(...positions.map((p) => p.x));
+ const maxX = Math.max(...positions.map((p) => p.x + p.width));
+ const minY = Math.min(...positions.map((p) => p.y));
+ const maxY = Math.max(...positions.map((p) => p.y + p.height));
+ return { minX, maxX, minY, maxY };
+ }
+
+ getNewScale(adjMaxX: number, adjMaxY: number) {
+ const scaleX = this.cRect.width / adjMaxX;
+ const scaleY = this.cRect.height / adjMaxY;
+ return Math.min(scaleX, scaleY);
+ }
+
+ // getPanValues(
+ // adjMaxX: number,
+ // adjMaxY: number,
+ // newScale: number,
+ // minX: number,
+ // minY: number
+ // ) {
+ // const panX =
+ // this.cRect.x +
+ // (this.cRect.width - (adjMaxX - this.containerPadding) * newScale) / 2 -
+ // minX * newScale;
+ // const panY =
+ // this.cRect.y +
+ // (this.cRect.height - (adjMaxY - this.containerPadding) * newScale) / 2 -
+ // minY * newScale;
+ // return { panX, panY };
+ // }
+ // }
+ getPanValues(
+ adjMaxX: number,
+ adjMaxY: number,
+ newScale: number,
+ minX: number,
+ minY: number
+ ) {
+ // Calculate the center point of the scaled content
+ const scaledContentWidth = adjMaxX * newScale;
+ const scaledContentHeight = adjMaxY * newScale;
+
+ // Calculate the center point of the container
+ const containerCenterX = this.cRect.width / 2;
+ const containerCenterY = this.cRect.height / 2;
+
+ // Calculate the difference between the container center and the content center
+ const offsetX =
+ containerCenterX - (scaledContentWidth / 2 + minX * newScale);
+ const offsetY =
+ containerCenterY - (scaledContentHeight / 2 + minY * newScale);
+
+ // Adjust pan values to center the content
+ const nPad = (this.containerPadding * newScale) / 2;
+ const panX = this.cRect.x * newScale + offsetX + nPad;
+ const panY = this.cRect.y * newScale + offsetY + nPad;
+
+ return { panX, panY };
+ }
+}
+
+interface CPosition {
+ x: number;
+ y: number;
+ width: number;
+ height: number;
+}
diff --git a/src/app/flow/flow.component.ts b/src/app/flow/flow.component.ts
index ac2bd33..5f6abe3 100644
--- a/src/app/flow/flow.component.ts
+++ b/src/app/flow/flow.component.ts
@@ -17,6 +17,7 @@ import { FlowChildComponent } from './flow-child.component';
import { FlowService } from './flow.service';
import { FlowOptions } from './flow-interface';
import { SvgHandler } from './svg';
+import { FitToWindow } from './fit-to-window';
@Component({
standalone: true,
@@ -227,6 +228,7 @@ export class FlowComponent
public _dragZoomContainer = (event: MouseEvent) => {
if (this.flow.isDraggingZoomContainer) {
+ event.preventDefault();
event.stopPropagation();
this.flow.panX = event.clientX - this.initialX;
this.flow.panY = event.clientY - this.initialY;
@@ -287,6 +289,82 @@ export class FlowComponent
return { scale: newScale, panX: newPanX, panY: newPanY };
}
+ fitToWindow() {
+ const ftw = new FitToWindow(
+ this.list,
+ this.zoomContainer.nativeElement.getBoundingClientRect(),
+ this.flow.scale,
+ this.flow.panX,
+ this.flow.panY
+ );
+ const { scale, panX, panY } = ftw.fitToWindow();
+ this.flow.scale = scale;
+ this.flow.panX = panX;
+ this.flow.panY = panY;
+ this.updateZoomContainer();
+ }
+
+ // fitToWindow() {
+ // // The amount of padding to leave around the edges of the container and it should be scale independent
+ // const containerPadding = 30 / this.flow.scale;
+ // // Step 1: Get the positions of all nodes and dimensions of the container
+ // const positions = this.list.map((child) => {
+ // const scaledX = child.elRect.x / this.flow.scale - this.flow.panX;
+ // const scaledY = child.elRect.y / this.flow.scale - this.flow.panY;
+ // const scaledWidth = child.elRect.width;
+ // const scaledHeight = child.elRect.height;
+ // return {
+ // x: scaledX,
+ // y: scaledY,
+ // width: scaledWidth,
+ // height: scaledHeight,
+ // };
+ // });
+ // const containerRect =
+ // this.zoomContainer.nativeElement.getBoundingClientRect();
+
+ // // Step 2: Calculate the boundaries (min and max coordinates) of the nodes
+ // const minX = Math.min(...positions.map((p) => p.x));
+ // const maxX = Math.max(...positions.map((p) => p.x + p.width));
+ // const minY = Math.min(...positions.map((p) => p.y));
+ // const maxY = Math.max(...positions.map((p) => p.y + p.height));
+
+ // // Step 3: Determine the scaling factor to fit nodes within the container
+ // const adjMaxX = maxX - minX + containerPadding;
+ // const adjMaxY = maxY - minY + containerPadding;
+
+ // // find the actual width and height of the container after scale
+ // const cRect = {
+ // x: containerRect.x / this.flow.scale - this.flow.panX,
+ // y: containerRect.y / this.flow.scale - this.flow.panY,
+ // width: containerRect.width / this.flow.scale,
+ // height: containerRect.height / this.flow.scale,
+ // };
+
+ // const scaleX = cRect.width / adjMaxX;
+ // const scaleY = cRect.height / adjMaxY;
+ // const newScale = Math.min(scaleX, scaleY);
+
+ // // Step 4: Determine the panning values to center the content within the container
+ // // These are now calculated relative to the unscaled positions
+ // const panX =
+ // cRect.x +
+ // (cRect.width - (adjMaxX - containerPadding) * newScale) / 2 -
+ // minX * newScale;
+ // const panY =
+ // cRect.y +
+ // (cRect.height - (adjMaxY - containerPadding) * newScale) / 2 -
+ // minY * newScale;
+
+ // // Apply the calculated scale and pan values
+ // this.flow.scale = newScale;
+ // this.flow.panX = panX;
+ // this.flow.panY = panY;
+
+ // // Update the zoomContainer's transform property to apply the new scale and pan
+ // this.updateZoomContainer();
+ // }
+
private updateZoomContainer() {
this.zoomContainer.nativeElement.style.transform = `translate(${this.flow.panX}px, ${this.flow.panY}px) scale(${this.flow.scale})`;
}
@@ -316,7 +394,16 @@ export class FlowComponent
const elRect = x.el.nativeElement.getBoundingClientRect();
const width = elRect.width / this.flow.scale;
const height = elRect.height / this.flow.scale;
- const newElRect = { ...elRect, width, height };
+ const newElRect = {
+ x: elRect.x,
+ y: elRect.y,
+ bottom: elRect.bottom,
+ left: elRect.left,
+ right: elRect.right,
+ top: elRect.top,
+ width,
+ height,
+ };
return {
position: x.position,
elRect: newElRect,