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

package/dist/constants.d.ts

@@ -7,5 +7,6 @@ export declare const LEFT_SIDEBAR_WIDTH = 45;
 export declare const RIGHT_SIDEBAR_WIDTH = 400;
 export declare const BACKGROUND_COLOR = "rgb(74, 74, 74)";
 export declare const DEFAULT_MAX_ZOOM = 2;
+export declare const PAGE_SWITCH_REMAINING_RATIO = 0.25;
 export declare const DESIGNER_CLASSNAME = "pdfme-designer-";
 export declare const UI_CLASSNAME = "pdfme-ui-";

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/helper.d.ts

@@ -55,6 +55,12 @@ export declare const moveCommandToChangeSchemasArg: (props: {
     schemaId: string;
 }[];
 export declare const getPagesScrollTopByIndex: (pageSizes: Size[], index: number, scale: number) => number;
+export declare const getVisibleOverlap: (containerRect: DOMRect, elementRect: DOMRect) => {
+    width: number;
+    height: number;
+    area: number;
+};
+export declare const getStickyScrollPageIndex: (container: HTMLElement, papers: Array<HTMLElement | null | undefined>, pageCursor: number) => number;
 export type ZoomMode = 'manual' | 'fit-width' | 'fit-height';
 export type ZoomAnchor = {
     pageIndex: number;

package/dist/index.js

@@ -56104,9 +56104,29 @@ var import_client = (/* @__PURE__ */ __commonJSMin(((exports, module) => {
 var DESTROYED_ERR_MSG = "[@pdfme/ui] this instance is already destroyed";
 var SELECTABLE_CLASSNAME = "selectable";
 var BACKGROUND_COLOR = "rgb(74, 74, 74)";
+var PAGE_SWITCH_REMAINING_RATIO = .25;
 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
@@ -77316,6 +77336,44 @@ var moveCommandToChangeSchemasArg = (props) => {
 var getPagesScrollTopByIndex = (pageSizes, index, scale) => {
 	return pageSizes.slice(0, index).reduce((acc, cur) => acc + (cur.height * ZOOM + 30 * scale) * scale, 0);
 };
+var getVisibleOverlap = (containerRect, elementRect) => {
+	const width = Math.max(0, Math.min(containerRect.right, elementRect.right) - Math.max(containerRect.left, elementRect.left));
+	const height = Math.max(0, Math.min(containerRect.bottom, elementRect.bottom) - Math.max(containerRect.top, elementRect.top));
+	return {
+		width,
+		height,
+		area: width * height
+	};
+};
+var VERTICAL_SCROLL_EDGE_EPSILON = 1;
+var isAtVerticalScrollEdge = (container) => {
+	const maxScrollTop = container.scrollHeight - container.clientHeight;
+	if (maxScrollTop <= 0) return false;
+	const { scrollTop } = container;
+	return scrollTop <= VERTICAL_SCROLL_EDGE_EPSILON || scrollTop >= maxScrollTop - VERTICAL_SCROLL_EDGE_EPSILON;
+};
+var getStickyScrollPageIndex = (container, papers, pageCursor) => {
+	const containerRect = container.getBoundingClientRect();
+	const stickyHeight = containerRect.height * PAGE_SWITCH_REMAINING_RATIO;
+	let bestPageIndex = pageCursor;
+	let bestVisibleArea = 0;
+	let currentVisibleHeight = 0;
+	let currentVisibleArea = 0;
+	papers.forEach((paper, pageIndex) => {
+		if (!paper) return;
+		const { height, area } = getVisibleOverlap(containerRect, paper.getBoundingClientRect());
+		if (pageIndex === pageCursor) {
+			currentVisibleHeight = height;
+			currentVisibleArea = area;
+		}
+		if (area > bestVisibleArea) {
+			bestVisibleArea = area;
+			bestPageIndex = pageIndex;
+		}
+	});
+	if (bestVisibleArea <= 0) return pageCursor;
+	return !isAtVerticalScrollEdge(container) && currentVisibleArea > 0 && currentVisibleHeight >= stickyHeight ? pageCursor : bestPageIndex;
+};
 var MIN_ZOOM = .25;
 var FIT_GUTTER = 40;
 var clampZoomLevel = (zoomLevel, maxZoom, minZoom = MIN_ZOOM) => Math.min(Math.max(zoomLevel, minZoom), maxZoom);
@@ -77436,15 +77494,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 +77507,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;
@@ -88030,7 +88083,7 @@ function getPxValue$5(val) {
 /**
 * Get visible area of element
 */
-function getVisibleArea$6(initArea, scrollerList) {
+function getVisibleArea$5(initArea, scrollerList) {
 	const visibleArea = { ...initArea };
 	(scrollerList || []).forEach((ele) => {
 		if (ele instanceof HTMLBodyElement || ele instanceof HTMLHtmlElement) return;
@@ -88208,8 +88261,8 @@ function useAlign$5(open, popupEle, target, placement, builtinPlacements, popupA
 			const VISIBLE_FIRST = "visibleFirst";
 			if (htmlRegion !== "scroll" && htmlRegion !== VISIBLE_FIRST) htmlRegion = VISIBLE;
 			const isVisibleFirst = htmlRegion === VISIBLE_FIRST;
-			const scrollRegionArea = getVisibleArea$6(scrollRegion, scrollerList);
-			const visibleRegionArea = getVisibleArea$6(visibleRegion, scrollerList);
+			const scrollRegionArea = getVisibleArea$5(scrollRegion, scrollerList);
+			const visibleRegionArea = getVisibleArea$5(visibleRegion, scrollerList);
 			const visibleArea = htmlRegion === VISIBLE ? visibleRegionArea : scrollRegionArea;
 			const adjustCheckVisibleArea = isVisibleFirst ? visibleRegionArea : visibleArea;
 			popupElement.style.left = "auto";
@@ -95506,7 +95559,7 @@ function getPxValue$4(val) {
 /**
 * Get visible area of element
 */
-function getVisibleArea$5(initArea, scrollerList) {
+function getVisibleArea$4(initArea, scrollerList) {
 	const visibleArea = { ...initArea };
 	(scrollerList || []).forEach((ele) => {
 		if (ele instanceof HTMLBodyElement || ele instanceof HTMLHtmlElement) return;
@@ -95684,8 +95737,8 @@ function useAlign$4(open, popupEle, target, placement, builtinPlacements, popupA
 			const VISIBLE_FIRST = "visibleFirst";
 			if (htmlRegion !== "scroll" && htmlRegion !== VISIBLE_FIRST) htmlRegion = VISIBLE;
 			const isVisibleFirst = htmlRegion === VISIBLE_FIRST;
-			const scrollRegionArea = getVisibleArea$5(scrollRegion, scrollerList);
-			const visibleRegionArea = getVisibleArea$5(visibleRegion, scrollerList);
+			const scrollRegionArea = getVisibleArea$4(scrollRegion, scrollerList);
+			const visibleRegionArea = getVisibleArea$4(visibleRegion, scrollerList);
 			const visibleArea = htmlRegion === VISIBLE ? visibleRegionArea : scrollRegionArea;
 			const adjustCheckVisibleArea = isVisibleFirst ? visibleRegionArea : visibleArea;
 			popupElement.style.left = "auto";
@@ -101632,7 +101685,7 @@ function getPxValue$3(val) {
 /**
 * Get visible area of element
 */
-function getVisibleArea$4(initArea, scrollerList) {
+function getVisibleArea$3(initArea, scrollerList) {
 	const visibleArea = { ...initArea };
 	(scrollerList || []).forEach((ele) => {
 		if (ele instanceof HTMLBodyElement || ele instanceof HTMLHtmlElement) return;
@@ -101810,8 +101863,8 @@ function useAlign$3(open, popupEle, target, placement, builtinPlacements, popupA
 			const VISIBLE_FIRST = "visibleFirst";
 			if (htmlRegion !== "scroll" && htmlRegion !== VISIBLE_FIRST) htmlRegion = VISIBLE;
 			const isVisibleFirst = htmlRegion === VISIBLE_FIRST;
-			const scrollRegionArea = getVisibleArea$4(scrollRegion, scrollerList);
-			const visibleRegionArea = getVisibleArea$4(visibleRegion, scrollerList);
+			const scrollRegionArea = getVisibleArea$3(scrollRegion, scrollerList);
+			const visibleRegionArea = getVisibleArea$3(visibleRegion, scrollerList);
 			const visibleArea = htmlRegion === VISIBLE ? visibleRegionArea : scrollRegionArea;
 			const adjustCheckVisibleArea = isVisibleFirst ? visibleRegionArea : visibleArea;
 			popupElement.style.left = "auto";
@@ -103998,7 +104051,7 @@ function getPxValue$2(val) {
 /**
 * Get visible area of element
 */
-function getVisibleArea$3(initArea, scrollerList) {
+function getVisibleArea$2(initArea, scrollerList) {
 	const visibleArea = { ...initArea };
 	(scrollerList || []).forEach((ele) => {
 		if (ele instanceof HTMLBodyElement || ele instanceof HTMLHtmlElement) return;
@@ -104176,8 +104229,8 @@ function useAlign$2(open, popupEle, target, placement, builtinPlacements, popupA
 			const VISIBLE_FIRST = "visibleFirst";
 			if (htmlRegion !== "scroll" && htmlRegion !== VISIBLE_FIRST) htmlRegion = VISIBLE;
 			const isVisibleFirst = htmlRegion === VISIBLE_FIRST;
-			const scrollRegionArea = getVisibleArea$3(scrollRegion, scrollerList);
-			const visibleRegionArea = getVisibleArea$3(visibleRegion, scrollerList);
+			const scrollRegionArea = getVisibleArea$2(scrollRegion, scrollerList);
+			const visibleRegionArea = getVisibleArea$2(visibleRegion, scrollerList);
 			const visibleArea = htmlRegion === VISIBLE ? visibleRegionArea : scrollRegionArea;
 			const adjustCheckVisibleArea = isVisibleFirst ? visibleRegionArea : visibleArea;
 			popupElement.style.left = "auto";
@@ -106054,7 +106107,7 @@ function getPxValue$1(val) {
 /**
 * Get visible area of element
 */
-function getVisibleArea$2(initArea, scrollerList) {
+function getVisibleArea$1(initArea, scrollerList) {
 	const visibleArea = { ...initArea };
 	(scrollerList || []).forEach((ele) => {
 		if (ele instanceof HTMLBodyElement || ele instanceof HTMLHtmlElement) return;
@@ -106232,8 +106285,8 @@ function useAlign$1(open, popupEle, target, placement, builtinPlacements, popupA
 			const VISIBLE_FIRST = "visibleFirst";
 			if (htmlRegion !== "scroll" && htmlRegion !== VISIBLE_FIRST) htmlRegion = VISIBLE;
 			const isVisibleFirst = htmlRegion === VISIBLE_FIRST;
-			const scrollRegionArea = getVisibleArea$2(scrollRegion, scrollerList);
-			const visibleRegionArea = getVisibleArea$2(visibleRegion, scrollerList);
+			const scrollRegionArea = getVisibleArea$1(scrollRegion, scrollerList);
+			const visibleRegionArea = getVisibleArea$1(visibleRegion, scrollerList);
 			const visibleArea = htmlRegion === VISIBLE ? visibleRegionArea : scrollRegionArea;
 			const adjustCheckVisibleArea = isVisibleFirst ? visibleRegionArea : visibleArea;
 			popupElement.style.left = "auto";
@@ -122369,27 +122422,10 @@ var useZoom = ({ baseScale, maxZoom, pageCursor, pageSizes, containerRef, paperR
 		fitHeight: () => fitZoom("fit-height")
 	};
 };
-var getVisibleArea$1 = (containerRect, elementRect) => {
-	return Math.max(0, Math.min(containerRect.right, elementRect.right) - Math.max(containerRect.left, elementRect.left)) * Math.max(0, Math.min(containerRect.bottom, elementRect.bottom) - Math.max(containerRect.top, elementRect.top));
-};
-var getMostVisiblePageIndex = (container, paperRefs, pageCursor) => {
-	const containerRect = container.getBoundingClientRect();
-	let bestPageIndex = pageCursor;
-	let bestVisibleArea = 0;
-	paperRefs.current.forEach((paper, pageIndex) => {
-		if (!paper) return;
-		const visibleArea = getVisibleArea$1(containerRect, paper.getBoundingClientRect());
-		if (visibleArea > bestVisibleArea) {
-			bestVisibleArea = visibleArea;
-			bestPageIndex = pageIndex;
-		}
-	});
-	return bestVisibleArea > 0 ? bestPageIndex : pageCursor;
-};
 var useScrollPageCursor = ({ ref, paperRefs, pageSizes, scale, pageCursor, onChangePageCursor }) => {
 	const onScroll = (0, import_react$9.useCallback)(() => {
 		if (!pageSizes[0] || !ref.current) return;
-		const _pageCursor = getMostVisiblePageIndex(ref.current, paperRefs, pageCursor);
+		const _pageCursor = getStickyScrollPageIndex(ref.current, paperRefs.current, pageCursor);
 		if (_pageCursor !== pageCursor) onChangePageCursor(_pageCursor);
 	}, [
 		onChangePageCursor,