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

package/dist/types/contexts.d.ts

@@ -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/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.4",
+  "version": "5.3.3-dev.5",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

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/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/hooks.ts

@@ -19,8 +19,7 @@ import {
   moveCommandToChangeSchemasArg,
   arrayBufferToBase64,
   initShortCuts,
-  destroyShortCuts,
-  getMaxZoom,
+  destroyShortCuts
 } from './helper.js';
 import { RULER_HEIGHT } from './constants.js';
 
@@ -36,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);
@@ -69,7 +68,7 @@ export const useUIPreProcessor = ({ template, size, zoomLevel }: UIPreProcessorP
 
       const [_pages, imgBuffers] = await Promise.all([
         pdf2size(b64toUint8Array(_basePdf)),
-        pdf2img(b64toUint8Array(_basePdf), { scale: getMaxZoom() }),
+        pdf2img(b64toUint8Array(_basePdf), { scale: maxZoom }),
       ]);
 
       _pageSizes = _pages;