@windoc/react 0.3.16 → 0.3.18

package/dist/index.d.mts

@@ -99,6 +99,10 @@ type EditorInstance = {
             footer: {
                 disabled: boolean;
             };
+            scale: number;
+            paperDirection: string;
+            width: number;
+            height: number;
             [key: string]: unknown;
         };
         executeUpdateOptions: (options: object) => void;
@@ -312,6 +316,9 @@ interface FooterContextValue {
     rowNo: number;
     colNo: number;
     pageScale: number;
+    paperDirection: string;
+    paperWidth: number;
+    paperHeight: number;
     setPageNoList: (v: string) => void;
     setPageNo: (v: number) => void;
     setPageSize: (v: number) => void;
@@ -319,6 +326,9 @@ interface FooterContextValue {
     setRowNo: (v: number) => void;
     setColNo: (v: number) => void;
     setPageScale: (v: number) => void;
+    setPaperDirection: (v: string) => void;
+    setPaperWidth: (v: number) => void;
+    setPaperHeight: (v: number) => void;
     handleToggleCatalogAction?: () => void;
 }
 declare function FooterProvider({ handleToggleCatalogAction, children }: {

package/dist/index.d.ts

@@ -99,6 +99,10 @@ type EditorInstance = {
             footer: {
                 disabled: boolean;
             };
+            scale: number;
+            paperDirection: string;
+            width: number;
+            height: number;
             [key: string]: unknown;
         };
         executeUpdateOptions: (options: object) => void;
@@ -312,6 +316,9 @@ interface FooterContextValue {
     rowNo: number;
     colNo: number;
     pageScale: number;
+    paperDirection: string;
+    paperWidth: number;
+    paperHeight: number;
     setPageNoList: (v: string) => void;
     setPageNo: (v: number) => void;
     setPageSize: (v: number) => void;
@@ -319,6 +326,9 @@ interface FooterContextValue {
     setRowNo: (v: number) => void;
     setColNo: (v: number) => void;
     setPageScale: (v: number) => void;
+    setPaperDirection: (v: string) => void;
+    setPaperWidth: (v: number) => void;
+    setPaperHeight: (v: number) => void;
     handleToggleCatalogAction?: () => void;
 }
 declare function FooterProvider({ handleToggleCatalogAction, children }: {

package/dist/index.js

@@ -118,6 +118,9 @@ function FooterProvider({
   const [rowNo, setRowNo] = (0, import_react2.useState)(0);
   const [colNo, setColNo] = (0, import_react2.useState)(0);
   const [pageScale, setPageScale] = (0, import_react2.useState)(100);
+  const [paperDirection, setPaperDirection] = (0, import_react2.useState)("vertical");
+  const [paperWidth, setPaperWidth] = (0, import_react2.useState)(794);
+  const [paperHeight, setPaperHeight] = (0, import_react2.useState)(1123);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     FooterContext.Provider,
     {
@@ -129,6 +132,9 @@ function FooterProvider({
         rowNo,
         colNo,
         pageScale,
+        paperDirection,
+        paperWidth,
+        paperHeight,
         setPageNoList,
         setPageNo,
         setPageSize,
@@ -136,6 +142,9 @@ function FooterProvider({
         setRowNo,
         setColNo,
         setPageScale,
+        setPaperDirection,
+        setPaperWidth,
+        setPaperHeight,
         handleToggleCatalogAction
       },
       children
@@ -1859,25 +1868,28 @@ function PageScaleAddTool() {
 var import_react21 = require("react");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var SIZES2 = [
-  { label: "A4", width: 794, height: 1123, active: true },
+  { label: "A4", width: 794, height: 1123 },
   { label: "A2", width: 1593, height: 2251 },
   { label: "A3", width: 1125, height: 1593 },
   { label: "A5", width: 565, height: 796 }
 ];
 function PaperSizeTool() {
   const { editorRef } = useEditor();
+  const { paperWidth, paperHeight, setPaperWidth, setPaperHeight } = useFooter();
   const [visible, setVisible] = (0, import_react21.useState)(false);
   const handlePaperSize = (width, height) => {
     editorRef.current?.command.executePaperSize(width, height);
+    setPaperWidth(width);
+    setPaperHeight(height);
     setVisible(false);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "paper-size", onClick: () => setVisible(!visible), children: [
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("i", { title: "Paper Type" }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("ul", { children: SIZES2.map(({ label, width, height, active }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("ul", { children: SIZES2.map(({ label, width, height }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       "li",
       {
         onClick: () => handlePaperSize(width, height),
-        className: active ? "active" : "",
+        className: paperWidth === width && paperHeight === height ? "active" : "",
         children: label
       },
       label
@@ -1890,9 +1902,11 @@ var import_react22 = require("react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 function PaperDirectionTool() {
   const { editorRef } = useEditor();
+  const { paperDirection, setPaperDirection } = useFooter();
   const [visible, setVisible] = (0, import_react22.useState)(false);
   const handlePaperDirection = (direction) => {
     editorRef.current?.command.executePaperDirection(direction);
+    setPaperDirection(direction);
     setVisible(false);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "paper-direction", onClick: () => setVisible(!visible), children: [
@@ -1902,11 +1916,18 @@ function PaperDirectionTool() {
         "li",
         {
           onClick: () => handlePaperDirection("vertical"),
-          className: "active",
+          className: paperDirection === "vertical" ? "active" : "",
           children: "Portrait"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { onClick: () => handlePaperDirection("horizontal"), children: "Landscape" })
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        "li",
+        {
+          onClick: () => handlePaperDirection("horizontal"),
+          className: paperDirection === "horizontal" ? "active" : "",
+          children: "Landscape"
+        }
+      )
     ] }) })
   ] });
 }
@@ -2469,7 +2490,10 @@ function EditorInner({
     setWordCount,
     setRowNo,
     setColNo,
-    setPageScale
+    setPageScale,
+    setPaperDirection,
+    setPaperWidth,
+    setPaperHeight
   } = useFooter();
   (0, import_react24.useEffect)(() => {
     let instance = null;
@@ -2494,6 +2518,11 @@ function EditorInner({
         { maskMargin: [24, 0, 24, 0], ...userOptions }
       );
       editorRef.current = instance;
+      const opts = instance.command.getOptions();
+      setPageScale(Math.round(opts.scale * 100));
+      setPaperDirection(opts.paperDirection);
+      setPaperWidth(opts.width);
+      setPaperHeight(opts.height);
       instance.listener.rangeStyleChange = (payload) => {
         setRangeStyle(payload);
         onRangeStyleChange?.(payload);