@pdfme/ui 6.1.13-dev.1 → 6.1.13-dev.4

package/dist/containerSize.d.ts

@@ -0,0 +1,11 @@
+import type { Size } from '@pdfme/common';
+export type ViewportSize = {
+    height: number;
+    width: number;
+};
+export type ContainerBox = {
+    clientHeight: number;
+    clientWidth: number;
+    getBoundingClientRect: () => Pick<DOMRect, 'bottom' | 'left' | 'right' | 'top'>;
+};
+export declare const measureUiContainerSize: (container: ContainerBox, viewport: ViewportSize) => Size;

package/dist/index.js

@@ -56107,6 +56107,25 @@ var BACKGROUND_COLOR = "rgb(74, 74, 74)";
 var DESIGNER_CLASSNAME = "pdfme-designer-";
 var UI_CLASSNAME = "pdfme-ui-";
 //#endregion
+//#region src/containerSize.ts
+var visibleIntersection = (start, end, viewportSize) => Math.max(0, Math.min(end, viewportSize) - Math.max(start, 0));
+var capOverflowToViewport = (layout, visible, viewportSize) => layout > viewportSize ? Math.min(layout, visible) : layout;
+var measureUiContainerSize = (container, viewport) => {
+	const layoutWidth = container.clientWidth || viewport.width;
+	const layoutHeight = container.clientHeight || viewport.height;
+	const rect = container.getBoundingClientRect();
+	const visibleWidth = visibleIntersection(rect.left, rect.right, viewport.width);
+	const visibleHeight = visibleIntersection(rect.top, rect.bottom, viewport.height);
+	if (visibleWidth === 0 || visibleHeight === 0) return {
+		height: layoutHeight,
+		width: layoutWidth
+	};
+	return {
+		height: capOverflowToViewport(layoutHeight, visibleHeight, viewport.height),
+		width: capOverflowToViewport(layoutWidth, visibleWidth, viewport.width)
+	};
+};
+//#endregion
 //#region ../../node_modules/hotkeys-js/dist/hotkeys-js.js
 /*!
 * hotkeys-js v4.0.7
@@ -77436,15 +77455,10 @@ var BaseUIClass = class {
 		_defineProperty$14(this, "options", {});
 		_defineProperty$14(this, "setSize", debounce$2(() => {
 			if (!this.domContainer) return;
-			const rect = this.domContainer.getBoundingClientRect();
-			const vw = window.innerWidth;
-			const vh = window.innerHeight;
-			const visibleWidth = Math.max(0, Math.min(rect.right, vw) - Math.max(rect.left, 0));
-			const visibleHeight = Math.max(0, Math.min(rect.bottom, vh) - Math.max(rect.top, 0));
-			this.size = {
-				height: visibleHeight,
-				width: visibleWidth
-			};
+			this.size = measureUiContainerSize(this.domContainer, {
+				height: window.innerHeight,
+				width: window.innerWidth
+			});
 			this.render();
 		}, 100));
 		_defineProperty$14(this, "resizeObserver", new ResizeObserver(this.setSize));
@@ -77454,10 +77468,10 @@ var BaseUIClass = class {
 		this.template = cloneDeep$1(template);
 		this.options = options;
 		const container = this.domContainer;
-		this.size = {
-			height: container.clientHeight || window.innerHeight,
-			width: container.clientWidth || window.innerWidth
-		};
+		this.size = measureUiContainerSize(container, {
+			height: window.innerHeight,
+			width: window.innerWidth
+		});
 		this.resizeObserver.observe(container);
 		const { lang, font } = options;
 		if (lang) this.lang = lang;