@xom11/whiteboard 0.10.0 → 0.10.1

package/dist/index.js

@@ -2308,15 +2308,15 @@ function CloseIcon() {
   ] });
 }
 function UndoIcon() {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "3 7 3 13 9 13" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.51 13a9 9 0 1 0 2.13-9.36L3 7" })
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 10 L8 5 L8 8 L15 8 A5 5 0 0 1 20 13 L20 16" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 10 L8 15 L8 12" })
   ] });
 }
 function RedoIcon() {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "21 7 21 13 15 13" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20.49 13a9 9 0 1 1-2.13-9.36L21 7" })
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 10 L16 5 L16 8 L9 8 A5 5 0 0 0 4 13 L4 16" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 10 L16 15 L16 12" })
   ] });
 }
 function AxisIcon() {
@@ -8756,9 +8756,15 @@ function CloseIcon3() {
   ] });
 }
 function UndoIcon3() {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "3 7 3 13 9 13" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.51 13a9 9 0 1 0 2.13-9.36L3 7" })
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 10 L8 5 L8 8 L15 8 A5 5 0 0 1 20 13 L20 16" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 10 L8 15 L8 12" })
+  ] });
+}
+function RedoIcon3() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 10 L16 5 L16 8 L9 8 A5 5 0 0 0 4 13 L4 16" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 10 L16 15 L16 12" })
   ] });
 }
 function ResetViewIcon() {
@@ -8843,9 +8849,23 @@ function PanelBody(props) {
           disabled: !props.canUndo,
           title: "Ho\xE0n t\xE1c (Ctrl/Cmd+Z)",
           "aria-label": "Ho\xE0n t\xE1c",
+          "data-testid": "undo-btn",
           className: "inline-flex items-center justify-center rounded p-1 text-slate-600 transition hover:bg-slate-100 hover:text-slate-900 disabled:cursor-not-allowed disabled:text-slate-300 disabled:hover:bg-transparent",
           children: /* @__PURE__ */ jsxRuntime.jsx(UndoIcon3, {})
         }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: props.onRedo,
+          disabled: !props.canRedo,
+          title: "L\xE0m l\u1EA1i (Ctrl/Cmd+Shift+Z)",
+          "aria-label": "L\xE0m l\u1EA1i",
+          "data-testid": "redo-btn",
+          className: "inline-flex items-center justify-center rounded p-1 text-slate-600 transition hover:bg-slate-100 hover:text-slate-900 disabled:cursor-not-allowed disabled:text-slate-300 disabled:hover:bg-transparent",
+          children: /* @__PURE__ */ jsxRuntime.jsx(RedoIcon3, {})
+        }
       )
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(Section4, { label: "C\xF4ng c\u1EE5", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-4 gap-1", children: GRAPH_TOOLS.map((t) => {
@@ -9201,6 +9221,7 @@ var init_EditorPanel3 = __esm({
       const [errors, setErrors] = React8.useState({});
       const [tool, setToolState] = React8.useState("move");
       const undoStackRef = React8.useRef([]);
+      const redoStackRef = React8.useRef([]);
       const idCounterRef = React8.useRef(1);
       const toolRef = React8.useRef(tool);
       toolRef.current = tool;
@@ -9211,6 +9232,7 @@ var init_EditorPanel3 = __esm({
       const pushUndo = React8.useCallback((g) => {
         undoStackRef.current.push(g);
         if (undoStackRef.current.length > 30) undoStackRef.current.shift();
+        redoStackRef.current = [];
       }, []);
       const setErrorsWithNotify = React8.useCallback(
         (updater) => {
@@ -9227,7 +9249,8 @@ var init_EditorPanel3 = __esm({
           tool: t,
           showAxis: g.view.showAxis,
           showGrid: g.view.showGrid,
-          canUndo: undoStackRef.current.length > 0
+          canUndo: undoStackRef.current.length > 0,
+          canRedo: redoStackRef.current.length > 0
         });
       }, []);
       const updateGraph = React8.useCallback(
@@ -9242,6 +9265,58 @@ var init_EditorPanel3 = __esm({
         },
         [pushUndo, notifyStateChange]
       );
+      const doUndo = React8.useCallback(() => {
+        const prev = undoStackRef.current.pop();
+        if (!prev) return;
+        redoStackRef.current.push(graphRef.current);
+        if (redoStackRef.current.length > 30) redoStackRef.current.shift();
+        graphRef.current = prev;
+        forceUpdate((n) => n + 1);
+        propsRef.current.onStateChange({
+          tool: toolRef.current,
+          showAxis: prev.view.showAxis,
+          showGrid: prev.view.showGrid,
+          canUndo: undoStackRef.current.length > 0,
+          canRedo: redoStackRef.current.length > 0
+        });
+        propsRef.current.onGraphChange?.(prev);
+      }, []);
+      const doRedo = React8.useCallback(() => {
+        const next = redoStackRef.current.pop();
+        if (!next) return;
+        undoStackRef.current.push(graphRef.current);
+        if (undoStackRef.current.length > 30) undoStackRef.current.shift();
+        graphRef.current = next;
+        forceUpdate((n) => n + 1);
+        propsRef.current.onStateChange({
+          tool: toolRef.current,
+          showAxis: next.view.showAxis,
+          showGrid: next.view.showGrid,
+          canUndo: undoStackRef.current.length > 0,
+          canRedo: redoStackRef.current.length > 0
+        });
+        propsRef.current.onGraphChange?.(next);
+      }, []);
+      React8.useEffect(() => {
+        const onKey = (e) => {
+          const ae = document.activeElement;
+          const inField = !!(ae && (ae.tagName === "INPUT" || ae.tagName === "TEXTAREA" || ae.isContentEditable));
+          if (inField) return;
+          if (!(e.metaKey || e.ctrlKey)) return;
+          const key = e.key.toLowerCase();
+          if (key === "z" && !e.shiftKey) {
+            e.preventDefault();
+            e.stopPropagation();
+            doUndo();
+          } else if (key === "z" && e.shiftKey || key === "y" && !e.shiftKey) {
+            e.preventDefault();
+            e.stopPropagation();
+            doRedo();
+          }
+        };
+        window.addEventListener("keydown", onKey, { capture: true });
+        return () => window.removeEventListener("keydown", onKey, { capture: true });
+      }, [doUndo, doRedo]);
       const onBoardEvent = React8.useCallback((ev) => {
         const currentTool = toolRef.current;
         if (currentTool === "point-on-curve" && ev.type === "click-curve" && ev.functionId && ev.x !== void 0) {
@@ -9294,7 +9369,8 @@ var init_EditorPanel3 = __esm({
               tool: t,
               showAxis: g.view.showAxis,
               showGrid: g.view.showGrid,
-              canUndo: undoStackRef.current.length > 0
+              canUndo: undoStackRef.current.length > 0,
+              canRedo: redoStackRef.current.length > 0
             });
           },
           setShowAxis: (b) => updateGraph((g) => ({ ...g, view: { ...g.view, showAxis: b } })),
@@ -9303,19 +9379,8 @@ var init_EditorPanel3 = __esm({
             ...g,
             view: { ...g.view, xMin: -10, xMax: 10, yMin: -10, yMax: 10 }
           })),
-          undo: () => {
-            const prev = undoStackRef.current.pop();
-            if (!prev) return;
-            graphRef.current = prev;
-            forceUpdate((n) => n + 1);
-            propsRef.current.onStateChange({
-              tool: toolRef.current,
-              showAxis: prev.view.showAxis,
-              showGrid: prev.view.showGrid,
-              canUndo: undoStackRef.current.length > 0
-            });
-            propsRef.current.onGraphChange?.(prev);
-          },
+          undo: doUndo,
+          redo: doRedo,
           addFunction: (expr) => {
             const g = graphRef.current;
             if (g.functions.length >= MAX_FUNCTIONS) {
@@ -9408,7 +9473,7 @@ var init_EditorPanel3 = __esm({
         }),
         // deps: updateGraph stable; errors changes when function errors change; setErrorsWithNotify stable
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        [updateGraph, errors, setErrorsWithNotify]
+        [updateGraph, errors, setErrorsWithNotify, doUndo, doRedo]
       );
       React8.useEffect(() => {
         if (!initialGraphNotifiedRef.current) {
@@ -9553,7 +9618,8 @@ var init_host4 = __esm({
       tool: "move",
       showAxis: true,
       showGrid: true,
-      canUndo: false
+      canUndo: false,
+      canRedo: false
     };
     Graph2DStampHost = React8.forwardRef(
       function Graph2DStampHost2({ api, editingElement, onClose, isDark }, ref) {
@@ -9613,6 +9679,8 @@ var init_host4 = __esm({
               onResetView: () => panelRef.current?.resetView(),
               onUndo: () => panelRef.current?.undo(),
               canUndo: graphUIState.canUndo,
+              onRedo: () => panelRef.current?.redo(),
+              canRedo: graphUIState.canRedo,
               onClose,
               isDark,
               isMobile,