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

package/dist/class.d.ts

@@ -12,7 +12,7 @@ export declare abstract class BaseUIClass {
     private readonly setSize;
     resizeObserver: ResizeObserver;
     constructor(props: UIProps);
-    protected getLang(): "ar" | "de" | "en" | "es" | "fr" | "it" | "ja" | "ko" | "pl" | "th" | "zh" | "zh-TW";
+    protected getLang(): "ar" | "de" | "en" | "es" | "fr" | "it" | "ja" | "ko" | "pl" | "th" | "tr" | "zh" | "zh-TW";
     protected getFont(): Record<string, {
         data: string | ArrayBuffer | Uint8Array<ArrayBuffer>;
         fallback?: boolean | undefined;

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

@@ -45375,6 +45375,7 @@ var Lang = _enum([
 	"ko",
 	"ar",
 	"th",
+	"tr",
 	"pl",
 	"it",
 	"de",
@@ -56104,6 +56105,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
@@ -57367,6 +57369,113 @@ var dictionaries = {
 		"schemas.list.indentItem": "เพิ่มย่อหน้า",
 		"schemas.list.outdentItem": "ลดย่อหน้า"
 	},
+	tr: {
+		cancel: "İptal",
+		close: "Kapat",
+		clear: "Temizle",
+		set: "Ayarla",
+		field: "alan",
+		fieldName: "Ad",
+		align: "Hizala",
+		width: "Genişlik",
+		height: "Yükseklik",
+		opacity: "Opaklık",
+		rotate: "Döndür",
+		required: "Zorunlu",
+		editable: "Düzenlenebilir",
+		edit: "Düzenle",
+		plsInputName: "Lütfen bir ad girin",
+		fieldMustUniq: "Alan adı benzersiz olmalı",
+		notUniq: "(Benzersiz olmayan ad)",
+		noKeyName: "Adsız",
+		fieldsList: "Alan Listesi",
+		editField: "Alanı Düzenle",
+		type: "Tür",
+		errorOccurred: "Bir hata oluştu",
+		errorBulkUpdateFieldName: "Öğe sayısı değiştiği için değişiklik kaydedilemedi.",
+		commitBulkUpdateFieldName: "Değişiklikleri Kaydet",
+		bulkUpdateFieldName: "Alan adlarını toplu güncelle",
+		addPageAfter: "Sonrasına Sayfa Ekle",
+		removePage: "Mevcut Sayfayı Kaldır",
+		removePageConfirm: "Bu sayfayı silmek istediğinizden emin misiniz? Bu işlem geri alınamaz.",
+		zoomIn: "Yakınlaştır",
+		zoomOut: "Uzaklaştır",
+		fitWidth: "Genişliğe sığdır",
+		fitHeight: "Yüksekliğe sığdır",
+		"validation.hexColor": "Lütfen geçerli bir hex renk kodu girin.",
+		"validation.uniqueName": "Lütfen benzersiz bir ad girin.",
+		"validation.dateTimeFormat": "Geçersiz tarih saat biçimi.",
+		"validation.outOfBounds": "Sayfa sınırlarını aşıyor.",
+		"schemas.color": "Renk",
+		"schemas.borderWidth": "Kenarlık Genişliği",
+		"schemas.borderColor": "Kenarlık Rengi",
+		"schemas.backgroundColor": "Arka Plan Rengi",
+		"schemas.textColor": "Metin Rengi",
+		"schemas.bgColor": "Arka Plan Rengi",
+		"schemas.horizontal": "Yatay",
+		"schemas.vertical": "Dikey",
+		"schemas.left": "Sol",
+		"schemas.center": "Orta",
+		"schemas.right": "Sağ",
+		"schemas.top": "Üst",
+		"schemas.middle": "Orta",
+		"schemas.bottom": "Alt",
+		"schemas.padding": "İç Boşluk",
+		"schemas.text.fontName": "Yazı Tipi Adı",
+		"schemas.text.size": "Boyut",
+		"schemas.text.spacing": "Aralık",
+		"schemas.text.textAlign": "Metin Hizası",
+		"schemas.text.verticalAlign": "Dikey Hizalama",
+		"schemas.text.lineHeight": "Satır Yüksekliği",
+		"schemas.text.min": "En Az",
+		"schemas.text.max": "En Çok",
+		"schemas.text.fit": "Sığdır",
+		"schemas.text.dynamicFontSize": "Dinamik Yazı Tipi Boyutu",
+		"schemas.text.overflow": "Taşma",
+		"schemas.text.overflowVisible": "Görünür",
+		"schemas.text.overflowExpand": "Genişlet",
+		"schemas.text.format": "Biçim",
+		"schemas.text.plain": "Düz",
+		"schemas.text.inlineMarkdown": "Satır İçi Markdown Kullan",
+		"schemas.text.markdownFonts": "Markdown Yazı Tipleri",
+		"schemas.text.boldFont": "Kalın Yazı Tipi",
+		"schemas.text.italicFont": "İtalik Yazı Tipi",
+		"schemas.text.boldItalicFont": "Kalın İtalik Yazı Tipi",
+		"schemas.text.codeFont": "Kod Yazı Tipi",
+		"schemas.text.variantFallback": "Varyant Geri Dönüşü",
+		"schemas.text.synthetic": "Yapay Stil",
+		"schemas.text.error": "Hata",
+		"schemas.radius": "Yarıçap",
+		"schemas.mvt.typingInstructions": "Değişken eklemek için süslü parantez içine kelime yazın, örneğin",
+		"schemas.mvt.sampleField": "ad",
+		"schemas.mvt.variablesSampleData": "Değişken Örnek Verisi",
+		"schemas.mvt.placeholderDynamicVariable": "Yer Tutucu Dinamik Değişken",
+		"schemas.barcodes.barColor": "Çubuk Rengi",
+		"schemas.barcodes.includetext": "Metni Dahil Et",
+		"schemas.table.alternateBackgroundColor": "Alternatif Arka Plan Rengi",
+		"schemas.table.tableStyle": "Tablo Stili",
+		"schemas.table.showHead": "Başlığı Göster",
+		"schemas.table.repeatHead": "Başlığı Tekrarla",
+		"schemas.table.headStyle": "Başlık Stili",
+		"schemas.table.bodyStyle": "Gövde Stili",
+		"schemas.table.columnStyle": "Sütun Stili",
+		"schemas.date.format": "Tarih Biçimi",
+		"schemas.date.locale": "Yerel Ayar",
+		"schemas.select.options": "Seçenekler",
+		"schemas.select.optionPlaceholder": "Bir seçenek girin",
+		"schemas.radioGroup.groupName": "Grup Adı",
+		"schemas.list.listStyle": "Liste Stili",
+		"schemas.list.bullet": "Madde İşaretli",
+		"schemas.list.ordered": "Numaralı",
+		"schemas.list.markerWidth": "İşaret Genişliği",
+		"schemas.list.markerGap": "İşaret Aralığı",
+		"schemas.list.indentSize": "Girinti Boyutu",
+		"schemas.list.itemSpacing": "Öğe Aralığı",
+		"schemas.list.addItem": "Öğe Ekle",
+		"schemas.list.removeItem": "Öğe Kaldır",
+		"schemas.list.indentItem": "Girintiyi Artır",
+		"schemas.list.outdentItem": "Girintiyi Azalt"
+	},
 	it: {
 		cancel: "Annulla",
 		close: "Chiudi",
@@ -77335,6 +77444,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 +88191,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 +88369,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 +95667,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 +95845,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 +101793,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 +101971,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 +104159,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 +104337,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 +106215,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 +106393,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 +122530,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,