@pdfme/ui 6.1.13-dev.4 → 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/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,6 +56104,7 @@ 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
@@ -77335,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);
@@ -88044,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;
@@ -88222,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";
@@ -95520,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;
@@ -95698,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";
@@ -101646,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;
@@ -101824,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";
@@ -104012,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;
@@ -104190,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";
@@ -106068,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;
@@ -106246,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";
@@ -122383,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,