@windoc/react 0.3.17 → 0.3.19

package/dist/index.mjs

@@ -38,6 +38,9 @@ function FooterProvider({
   const [rowNo, setRowNo] = useState2(0);
   const [colNo, setColNo] = useState2(0);
   const [pageScale, setPageScale] = useState2(100);
+  const [paperDirection, setPaperDirection] = useState2("vertical");
+  const [paperWidth, setPaperWidth] = useState2(794);
+  const [paperHeight, setPaperHeight] = useState2(1123);
   return /* @__PURE__ */ jsx2(
     FooterContext.Provider,
     {
@@ -49,6 +52,9 @@ function FooterProvider({
         rowNo,
         colNo,
         pageScale,
+        paperDirection,
+        paperWidth,
+        paperHeight,
         setPageNoList,
         setPageNo,
         setPageSize,
@@ -56,6 +62,9 @@ function FooterProvider({
         setRowNo,
         setColNo,
         setPageScale,
+        setPaperDirection,
+        setPaperWidth,
+        setPaperHeight,
         handleToggleCatalogAction
       },
       children
@@ -1779,25 +1788,28 @@ function PageScaleAddTool() {
 import { useState as useState10 } from "react";
 import { jsx as jsx35, jsxs as jsxs21 } from "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] = useState10(false);
   const handlePaperSize = (width, height) => {
     editorRef.current?.command.executePaperSize(width, height);
+    setPaperWidth(width);
+    setPaperHeight(height);
     setVisible(false);
   };
   return /* @__PURE__ */ jsxs21("div", { className: "paper-size", onClick: () => setVisible(!visible), children: [
     /* @__PURE__ */ jsx35("i", { title: "Paper Type" }),
-    /* @__PURE__ */ jsx35("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ jsx35("ul", { children: SIZES2.map(({ label, width, height, active }) => /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx35("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ jsx35("ul", { children: SIZES2.map(({ label, width, height }) => /* @__PURE__ */ jsx35(
       "li",
       {
         onClick: () => handlePaperSize(width, height),
-        className: active ? "active" : "",
+        className: paperWidth === width && paperHeight === height ? "active" : "",
         children: label
       },
       label
@@ -1810,9 +1822,11 @@ import { useState as useState11 } from "react";
 import { jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
 function PaperDirectionTool() {
   const { editorRef } = useEditor();
+  const { paperDirection, setPaperDirection } = useFooter();
   const [visible, setVisible] = useState11(false);
   const handlePaperDirection = (direction) => {
     editorRef.current?.command.executePaperDirection(direction);
+    setPaperDirection(direction);
     setVisible(false);
   };
   return /* @__PURE__ */ jsxs22("div", { className: "paper-direction", onClick: () => setVisible(!visible), children: [
@@ -1822,11 +1836,18 @@ function PaperDirectionTool() {
         "li",
         {
           onClick: () => handlePaperDirection("vertical"),
-          className: "active",
+          className: paperDirection === "vertical" ? "active" : "",
           children: "Portrait"
         }
       ),
-      /* @__PURE__ */ jsx36("li", { onClick: () => handlePaperDirection("horizontal"), children: "Landscape" })
+      /* @__PURE__ */ jsx36(
+        "li",
+        {
+          onClick: () => handlePaperDirection("horizontal"),
+          className: paperDirection === "horizontal" ? "active" : "",
+          children: "Landscape"
+        }
+      )
     ] }) })
   ] });
 }
@@ -2389,7 +2410,10 @@ function EditorInner({
     setWordCount,
     setRowNo,
     setColNo,
-    setPageScale
+    setPageScale,
+    setPaperDirection,
+    setPaperWidth,
+    setPaperHeight
   } = useFooter();
   useEffect5(() => {
     let instance = null;
@@ -2414,8 +2438,11 @@ function EditorInner({
         { maskMargin: [24, 0, 24, 0], ...userOptions }
       );
       editorRef.current = instance;
-      const initialScale = userOptions?.scale ?? 1;
-      setPageScale(Math.round(initialScale * 100));
+      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);
@@ -2438,6 +2465,12 @@ function EditorInner({
       instance.listener.pageScaleChange = (payload) => {
         setPageScale(Math.floor(payload * 10 * 10));
       };
+      instance.listener.optionsChange = (payload) => {
+        setPageScale(Math.round(payload.scale * 100));
+        setPaperDirection(payload.paperDirection);
+        setPaperWidth(payload.width);
+        setPaperHeight(payload.height);
+      };
       instance.listener.contentChange = async () => {
         const count2 = await instance?.command.getWordCount();
         setWordCount(count2 || 0);