@pdfme/ui 5.3.19 → 5.4.0-dev.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "5.3.19",
+  "version": "5.4.0-dev.2",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",
@@ -68,7 +68,7 @@
     "is-path-inside": "^4.0.0",
     "jest-canvas-mock": "^2.3.1",
     "jest-environment-jsdom": "^29.7.0",
-    "postcss": "^8.5.3",
+    "postcss": "^8.5.4",
     "process": "^0.11.10",
     "rollup": "^4.40.2",
     "vite": "^6.3.5",

package/src/components/Designer/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useContext, useCallback } from 'react';
+import React, { useRef, useState, useContext, useCallback, useEffect } from 'react';
 import {
   cloneDeep,
   ZOOM,
@@ -70,8 +70,8 @@ const TemplateEditor = ({
   const [activeElements, setActiveElements] = useState<HTMLElement[]>([]);
   const [schemasList, setSchemasList] = useState<SchemaForUI[][]>([[]] as SchemaForUI[][]);
   const [pageCursor, setPageCursor] = useState(0);
-  const [zoomLevel, setZoomLevel] = useState(1);
-  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [zoomLevel, setZoomLevel] = useState(options.zoomLevel ?? 1);
+  const [sidebarOpen, setSidebarOpen] = useState(options.sidebarOpen ?? true);
   const [prevTemplate, setPrevTemplate] = useState<Template | null>(null);
 
   const { backgrounds, pageSizes, scale, error, refresh } = useUIPreProcessor({
@@ -91,6 +91,18 @@ const TemplateEditor = ({
     setHoveringSchemaId(null);
   };
 
+  // Update component state only when _options_ changes
+  // Ignore exhaustive useEffect dependency warnings here
+  useEffect(() => {
+    if (typeof options.zoomLevel === 'number' && options.zoomLevel !== zoomLevel) {
+      setZoomLevel(options.zoomLevel);
+    }
+    if (typeof options.sidebarOpen === 'boolean' && options.sidebarOpen !== sidebarOpen) {
+      setSidebarOpen(options.sidebarOpen);
+    }
+    // eslint-disable-next-line
+  }, [options]);
+
   useScrollPageCursor({
     ref: canvasRef,
     pageSizes,

package/src/components/Preview.tsx

@@ -16,7 +16,7 @@ import CtlBar from './CtlBar.js';
 import Paper from './Paper.js';
 import Renderer from './Renderer.js';
 import { useUIPreProcessor, useScrollPageCursor } from '../hooks.js';
-import { FontContext } from '../contexts.js';
+import { FontContext, OptionsContext } from '../contexts.js';
 import { template2SchemasList, getPagesScrollTopByIndex, useMaxZoom } from '../helper.js';
 import { theme } from 'antd';
 
@@ -34,6 +34,7 @@ const Preview = ({
   const { token } = theme.useToken();
 
   const font = useContext(FontContext);
+  const options = useContext(OptionsContext);
   const maxZoom = useMaxZoom();
 
   const containerRef = useRef<HTMLDivElement>(null);
@@ -41,7 +42,7 @@ const Preview = ({
 
   const [unitCursor, setUnitCursor] = useState(0);
   const [pageCursor, setPageCursor] = useState(0);
-  const [zoomLevel, setZoomLevel] = useState(1);
+  const [zoomLevel, setZoomLevel] = useState(options.zoomLevel ?? 1);
   const [schemasList, setSchemasList] = useState<SchemaForUI[][]>([[]] as SchemaForUI[][]);
 
   const { backgrounds, pageSizes, scale, error, refresh } = useUIPreProcessor({
@@ -79,6 +80,15 @@ const Preview = ({
       .catch((err) => console.error(`[@pdfme/ui] `, err));
   };
 
+  // Update component state only when _options_ changes
+  // Ignore exhaustive useEffect dependency warnings here
+  useEffect(() => {
+    if (typeof options.zoomLevel === 'number' && options.zoomLevel !== zoomLevel) {
+      setZoomLevel(options.zoomLevel);
+    }
+    // eslint-disable-next-line
+  }, [options]);
+
   useEffect(() => {
     if (unitCursor > inputs.length - 1) {
       setUnitCursor(inputs.length - 1);