@xom11/whiteboard 0.10.0 → 0.11.0

package/dist/index.d.mts

@@ -79,8 +79,24 @@ interface WhiteboardProps {
      * `STABLE_STAMPS` để chỉ bật stamp ổn định.
      */
     stamps?: ReadonlyArray<StampType>;
+    /**
+     * Snapshot từ server. Precedence: `initialScene` > localStorage > blank.
+     * - `undefined` (default) → đọc từ localStorage qua `storageKey`
+     * - `null` → explicit blank, bỏ qua localStorage
+     * - object → dùng làm initialData của Excalidraw, bỏ qua localStorage
+     *
+     * Dùng để load board từ server. Thường đi cùng `storageKey={null}` để
+     * tránh localStorage stale override server data.
+     */
+    initialScene?: ExcalidrawSceneSnapshot | null;
+    /**
+     * Binary files (raster, base64) từ server. Add vào Excalidraw đúng 1 lần
+     * khi api ready. Dùng kèm `initialScene` cho flow load-from-server.
+     * Nếu cần inject files động về sau, dùng `onApi` rồi gọi `api.addFiles`.
+     */
+    initialFiles?: BinaryFiles;
 }
-declare function Whiteboard({ storageKey, readOnly, onSceneChange, onFilesChange, onApi, langCode, stamps, }: WhiteboardProps): react_jsx_runtime.JSX.Element;
+declare function Whiteboard({ storageKey, readOnly, onSceneChange, onFilesChange, onApi, langCode, stamps, initialScene, initialFiles, }: WhiteboardProps): react_jsx_runtime.JSX.Element;
 
 declare function pickSyncableAppState(s: AppState): SyncableAppState;
 

package/dist/index.d.ts

@@ -79,8 +79,24 @@ interface WhiteboardProps {
      * `STABLE_STAMPS` để chỉ bật stamp ổn định.
      */
     stamps?: ReadonlyArray<StampType>;
+    /**
+     * Snapshot từ server. Precedence: `initialScene` > localStorage > blank.
+     * - `undefined` (default) → đọc từ localStorage qua `storageKey`
+     * - `null` → explicit blank, bỏ qua localStorage
+     * - object → dùng làm initialData của Excalidraw, bỏ qua localStorage
+     *
+     * Dùng để load board từ server. Thường đi cùng `storageKey={null}` để
+     * tránh localStorage stale override server data.
+     */
+    initialScene?: ExcalidrawSceneSnapshot | null;
+    /**
+     * Binary files (raster, base64) từ server. Add vào Excalidraw đúng 1 lần
+     * khi api ready. Dùng kèm `initialScene` cho flow load-from-server.
+     * Nếu cần inject files động về sau, dùng `onApi` rồi gọi `api.addFiles`.
+     */
+    initialFiles?: BinaryFiles;
 }
-declare function Whiteboard({ storageKey, readOnly, onSceneChange, onFilesChange, onApi, langCode, stamps, }: WhiteboardProps): react_jsx_runtime.JSX.Element;
+declare function Whiteboard({ storageKey, readOnly, onSceneChange, onFilesChange, onApi, langCode, stamps, initialScene, initialFiles, }: WhiteboardProps): react_jsx_runtime.JSX.Element;
 
 declare function pickSyncableAppState(s: AppState): SyncableAppState;
 

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,
@@ -11361,7 +11429,9 @@ function Whiteboard({
   onFilesChange,
   onApi,
   langCode = "vi-VN",
-  stamps = DEFAULT_STAMPS
+  stamps = DEFAULT_STAMPS,
+  initialScene,
+  initialFiles
 }) {
   const [api, setApi] = React8.useState(null);
   const apiRef = React8.useRef(null);
@@ -11390,7 +11460,7 @@ function Whiteboard({
     () => persistEnabled ? readScene(storageKey) : null,
     [persistEnabled, storageKey]
   );
-  const effectiveInitialScene = persistedInitial ? {
+  const effectiveInitialScene = initialScene !== void 0 ? initialScene : persistedInitial ? {
     elements: persistedInitial.elements,
     appState: persistedInitial.appState
   } : null;
@@ -11565,6 +11635,30 @@ function Whiteboard({
       console.warn("[whiteboard] flushPrune th\u1EA5t b\u1EA1i:", err);
     }
   };
+  const initialFilesAddedRef = React8.useRef(false);
+  React8.useEffect(() => {
+    if (!api || initialFilesAddedRef.current) return;
+    initialFilesAddedRef.current = true;
+    if (!initialFiles) return;
+    const entries = Object.entries(initialFiles);
+    if (entries.length === 0) return;
+    try {
+      api.addFiles(
+        entries.map(([id, f]) => ({
+          id,
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          dataURL: f.dataURL,
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          mimeType: f.mimeType,
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          created: f.created ?? Date.now()
+        }))
+      );
+      entries.forEach(([id]) => knownFileIdsRef.current.add(id));
+    } catch (err) {
+      console.warn("[whiteboard] addFiles initialFiles th\u1EA5t b\u1EA1i:", err);
+    }
+  }, [api]);
   React8.useEffect(() => {
     if (!api || !persistEnabled) return;
     let cancelled = false;