@pdfme/ui 5.3.3-dev.3 → 5.3.3-dev.5

package/dist/types/class.d.ts

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

package/dist/types/constants.d.ts

@@ -6,4 +6,4 @@ export declare const PAGE_GAP = 10;
 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 MAX_ZOOM = 2;
+export declare const DEFAULT_MAX_ZOOM = 2;

package/dist/types/contexts.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Plugins, UIOptions } from '@pdfme/common';
-export declare const I18nContext: import("react").Context<(key: "type" | "width" | "height" | "rotate" | "opacity" | "required" | "cancel" | "close" | "set" | "clear" | "field" | "fieldName" | "align" | "edit" | "editable" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName" | "addPageAfter" | "removePage" | "removePageConfirm" | "validation.uniqueName" | "validation.hexColor" | "validation.dateTimeFormat" | "schemas.color" | "schemas.borderWidth" | "schemas.borderColor" | "schemas.backgroundColor" | "schemas.textColor" | "schemas.bgColor" | "schemas.horizontal" | "schemas.vertical" | "schemas.left" | "schemas.center" | "schemas.right" | "schemas.top" | "schemas.middle" | "schemas.bottom" | "schemas.padding" | "schemas.text.fontName" | "schemas.text.size" | "schemas.text.spacing" | "schemas.text.textAlign" | "schemas.text.verticalAlign" | "schemas.text.lineHeight" | "schemas.text.min" | "schemas.text.max" | "schemas.text.fit" | "schemas.text.dynamicFontSize" | "schemas.text.format" | "schemas.mvt.typingInstructions" | "schemas.mvt.sampleField" | "schemas.mvt.variablesSampleData" | "schemas.barcodes.barColor" | "schemas.barcodes.includetext" | "schemas.table.alternateBackgroundColor" | "schemas.table.tableStyle" | "schemas.table.showHead" | "schemas.table.headStyle" | "schemas.table.bodyStyle" | "schemas.table.columnStyle" | "schemas.date.format" | "schemas.date.locale" | "schemas.select.options" | "schemas.select.optionPlaceholder" | "schemas.radioGroup.groupName", dict?: {
+export declare const I18nContext: import("react").Context<(key: "cancel" | "close" | "set" | "clear" | "field" | "fieldName" | "align" | "width" | "opacity" | "height" | "rotate" | "edit" | "required" | "editable" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "editField" | "type" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName" | "addPageAfter" | "removePage" | "removePageConfirm" | "validation.uniqueName" | "validation.hexColor" | "validation.dateTimeFormat" | "schemas.color" | "schemas.borderWidth" | "schemas.borderColor" | "schemas.backgroundColor" | "schemas.textColor" | "schemas.bgColor" | "schemas.horizontal" | "schemas.vertical" | "schemas.left" | "schemas.center" | "schemas.right" | "schemas.top" | "schemas.middle" | "schemas.bottom" | "schemas.padding" | "schemas.text.fontName" | "schemas.text.size" | "schemas.text.spacing" | "schemas.text.textAlign" | "schemas.text.verticalAlign" | "schemas.text.lineHeight" | "schemas.text.min" | "schemas.text.max" | "schemas.text.fit" | "schemas.text.dynamicFontSize" | "schemas.text.format" | "schemas.mvt.typingInstructions" | "schemas.mvt.sampleField" | "schemas.mvt.variablesSampleData" | "schemas.barcodes.barColor" | "schemas.barcodes.includetext" | "schemas.table.alternateBackgroundColor" | "schemas.table.tableStyle" | "schemas.table.showHead" | "schemas.table.headStyle" | "schemas.table.bodyStyle" | "schemas.table.columnStyle" | "schemas.date.format" | "schemas.date.locale" | "schemas.select.options" | "schemas.select.optionPlaceholder" | "schemas.radioGroup.groupName", dict?: {
     cancel: string;
     close: string;
     set: string;
@@ -82,3 +82,4 @@ export declare const FontContext: import("react").Context<Record<string, {
 }>>;
 export declare const PluginsRegistry: import("react").Context<Plugins>;
 export declare const OptionsContext: import("react").Context<UIOptions>;
+export declare const CacheContext: import("react").Context<Map<any, any>>;

package/dist/types/helper.d.ts

@@ -72,4 +72,5 @@ export declare const changeSchemas: (args: {
     };
     commitSchemas: (newSchemas: SchemaForUI[]) => void;
 }) => void;
+export declare const getMaxZoom: () => number;
 export {};

package/dist/types/hooks.d.ts

@@ -5,8 +5,9 @@ type UIPreProcessorProps = {
     template: Template;
     size: Size;
     zoomLevel: number;
+    maxZoom: number;
 };
-export declare const useUIPreProcessor: ({ template, size, zoomLevel }: UIPreProcessorProps) => {
+export declare const useUIPreProcessor: ({ template, size, zoomLevel, maxZoom }: UIPreProcessorProps) => {
     backgrounds: string[];
     pageSizes: {
         width: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "5.3.3-dev.3",
+  "version": "5.3.3-dev.5",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/components/CtlBar.tsx

@@ -5,7 +5,7 @@ import { Plus, Minus, ChevronLeft, ChevronRight, Ellipsis } from 'lucide-react';
 import type { MenuProps } from 'antd';
 import { theme, Typography, Button, Dropdown } from 'antd';
 import { I18nContext } from '../contexts';
-import { MAX_ZOOM } from '../constants';
+import { getMaxZoom } from "../helper";
 
 const { Text } = Typography;
 
@@ -18,7 +18,7 @@ type ZoomProps = {
 
 const Zoom = ({ zoomLevel, setZoomLevel, style }: ZoomProps) => {
   const zoomStep = 0.25;
-  const maxZoom = MAX_ZOOM;
+  const maxZoom = getMaxZoom();
   const minZoom = 0.25;
 
   const nextZoomOut = zoomLevel - zoomStep;

package/src/components/Designer/index.tsx

@@ -24,6 +24,7 @@ import {
   template2SchemasList,
   getPagesScrollTopByIndex,
   changeSchemas as _changeSchemas,
+  getMaxZoom,
 } from '../../helper';
 import { useUIPreProcessor, useScrollPageCursor, useInitEvents } from '../../hooks';
 import Root from '../Root';
@@ -63,6 +64,7 @@ const TemplateEditor = ({
   const i18n = useContext(I18nContext);
   const pluginsRegistry = useContext(PluginsRegistry);
   const options = useContext(OptionsContext);
+  const maxZoom = getMaxZoom();
 
   const [hoveringSchemaId, setHoveringSchemaId] = useState<string | null>(null);
   const [activeElements, setActiveElements] = useState<HTMLElement[]>([]);
@@ -73,7 +75,7 @@ const TemplateEditor = ({
   const [prevTemplate, setPrevTemplate] = useState<Template | null>(null);
 
   const { backgrounds, pageSizes, scale, error, refresh } =
-    useUIPreProcessor({ template, size, zoomLevel });
+    useUIPreProcessor({ template, size, zoomLevel, maxZoom });
 
   const onEdit = (targets: HTMLElement[]) => {
     setActiveElements(targets);

package/src/components/Preview.tsx

@@ -10,7 +10,7 @@ import Paper from './Paper';
 import Renderer from './Renderer';
 import { useUIPreProcessor, useScrollPageCursor } from '../hooks';
 import { FontContext } from '../contexts';
-import { template2SchemasList, getPagesScrollTopByIndex } from '../helper';
+import { template2SchemasList, getPagesScrollTopByIndex, getMaxZoom } from '../helper';
 import { theme } from 'antd';
 
 const _cache = new Map();
@@ -27,6 +27,7 @@ const Preview = ({
   const { token } = theme.useToken();
 
   const font = useContext(FontContext);
+  const maxZoom = getMaxZoom();
 
   const containerRef = useRef<HTMLDivElement>(null);
   const paperRefs = useRef<HTMLDivElement[]>([]);
@@ -37,7 +38,7 @@ const Preview = ({
   const [schemasList, setSchemasList] = useState<SchemaForUI[][]>([[]] as SchemaForUI[][]);
 
   const { backgrounds, pageSizes, scale, error, refresh } =
-    useUIPreProcessor({ template, size, zoomLevel });
+    useUIPreProcessor({ template, size, zoomLevel, maxZoom });
 
   const isForm = Boolean(onChangeInput);
 

package/src/components/Renderer.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useContext, ReactNode, useRef, useMemo } from 'react'
 import { Dict, Mode, ZOOM, UIRenderProps, SchemaForUI, BasePdf, Schema, Plugin, UIOptions, cloneDeep } from '@pdfme/common';
 import { theme as antdTheme } from 'antd';
 import { SELECTABLE_CLASSNAME } from '../constants';
-import { PluginsRegistry, OptionsContext, I18nContext } from '../contexts';
+import { PluginsRegistry, OptionsContext, I18nContext, CacheContext } from '../contexts';
 
 type RendererProps = Omit<
   UIRenderProps<Schema>,
@@ -96,7 +96,7 @@ const Renderer = (props: RendererProps) => {
 
   
   const ref = useRef<HTMLDivElement>(null);
-  const _cache = useRef<Map<any, any>>(new Map());
+  const _cache = useContext(CacheContext);
   const plugin = Object.values(pluginsRegistry).find(
     (plugin) => plugin?.propPanel.defaultSchema.type === schema.type
   ) as Plugin<any>;
@@ -133,7 +133,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         options,
         theme,
         i18n,
-        _cache: _cache.current,
+        _cache,
       });
     }
     return () => {

package/src/constants.ts

@@ -14,4 +14,4 @@ export const RIGHT_SIDEBAR_WIDTH = 400;
 
 export const BACKGROUND_COLOR = 'rgb(74, 74, 74)';
 
-export const MAX_ZOOM = 2;
+export const DEFAULT_MAX_ZOOM = 2;

package/src/contexts.ts

@@ -10,3 +10,5 @@ export const FontContext = createContext(getDefaultFont());
 export const PluginsRegistry = createContext<Plugins>(builtInPlugins);
 
 export const OptionsContext = createContext<UIOptions>({});
+
+export const CacheContext = createContext<Map<any, any>>(new Map());

package/src/helper.ts

@@ -1,4 +1,5 @@
 import hotkeys from 'hotkeys-js';
+import { useContext } from 'react';
 import {
   cloneDeep,
   ZOOM,
@@ -12,7 +13,8 @@ import {
   Plugins,
 } from '@pdfme/common';
 import { pdf2size } from '@pdfme/converter';
-import { RULER_HEIGHT } from './constants.js';
+import { DEFAULT_MAX_ZOOM, RULER_HEIGHT } from './constants.js';
+import { OptionsContext } from './contexts';
 
 export const uuid = () =>
   'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
@@ -469,3 +471,9 @@ export const changeSchemas = (args: {
   }, cloneDeep(schemas));
   commitSchemas(newSchemas);
 };
+
+export const getMaxZoom = () => {
+  const options = useContext(OptionsContext);
+
+  return options.maxZoom ? (options.maxZoom as number) / 100 : DEFAULT_MAX_ZOOM;
+}

package/src/hooks.ts

@@ -19,9 +19,9 @@ import {
   moveCommandToChangeSchemasArg,
   arrayBufferToBase64,
   initShortCuts,
-  destroyShortCuts,
+  destroyShortCuts
 } from './helper.js';
-import { RULER_HEIGHT, MAX_ZOOM } from './constants.js';
+import { RULER_HEIGHT } from './constants.js';
 
 export const usePrevious = <T>(value: T) => {
   const ref = useRef<T | null>(null);
@@ -35,9 +35,9 @@ export const usePrevious = <T>(value: T) => {
 const getScale = (n: number, paper: number) =>
   Math.floor((n / paper > 1 ? 1 : n / paper) * 100) / 100;
 
-type UIPreProcessorProps = { template: Template; size: Size; zoomLevel: number };
+type UIPreProcessorProps = { template: Template; size: Size; zoomLevel: number; maxZoom: number };
 
-export const useUIPreProcessor = ({ template, size, zoomLevel }: UIPreProcessorProps) => {
+export const useUIPreProcessor = ({ template, size, zoomLevel, maxZoom }: UIPreProcessorProps) => {
   const [backgrounds, setBackgrounds] = useState<string[]>([]);
   const [pageSizes, setPageSizes] = useState<Size[]>([]);
   const [scale, setScale] = useState(0);
@@ -68,7 +68,7 @@ export const useUIPreProcessor = ({ template, size, zoomLevel }: UIPreProcessorP
 
       const [_pages, imgBuffers] = await Promise.all([
         pdf2size(b64toUint8Array(_basePdf)),
-        pdf2img(b64toUint8Array(_basePdf), { scale: MAX_ZOOM }),
+        pdf2img(b64toUint8Array(_basePdf), { scale: maxZoom }),
       ]);
 
       _pageSizes = _pages;