恢复

"use client";
 
import type { RecoveryRecord } from "fabricjs-document-engine";
import {
  useDocumentEngine,
  useDocumentState,
} from "fabricjs-document-engine/react";
import { createMemoryRecovery } from "fabricjs-document-engine/recovery";
import { createMemoryStorage } from "fabricjs-document-engine/storage";
import { CircleIcon, SquareIcon, ZapIcon } from "lucide-react";
import { useFormatter, useTranslations } from "next-intl";
import { useEffect, useState } from "react";
 
import {
  DemoCanvas,
  DemoFrame,
  newShape,
  seedShapes,
  Status,
  Toolbar,
  ToolButton,
} from "./demo-ui";
import { useFabricCanvas } from "./use-fabric-canvas";
 
// In your app, use `createIndexedDbRecovery()` so copies survive a reload.
// Memory keeps this demo self-contained.
const storage = createMemoryStorage();
const recovery = { store: createMemoryRecovery(), interval: 500 };
 
function Editor({ fresh, onCrash }: { fresh: boolean; onCrash: () => void }) {
  const t = useTranslations("demos");
  const format = useFormatter();
  const { elementRef, canvas } = useFabricCanvas();
  const engine = useDocumentEngine(canvas, {
    storage,
    recovery,
    document: { id: "recovery-demo" },
  });
  const state = useDocumentState(engine);
  const [copy, setCopy] = useState<RecoveryRecord>();
 
  // The first session starts with a drawing that was never saved. After a
  // crash the editor opens empty and looks for the work it lost.
  useEffect(() => {
    if (!engine) return;
    if (fresh) engine.canvas.add(...seedShapes());
    engine.getRecoverableDocuments().then(([latest]) => setCopy(latest));
  }, [engine, fresh]);
 
  async function restore() {
    await engine?.restoreRecovery(copy?.documentId);
    setCopy(undefined);
  }
 
  async function discard() {
    await engine?.discardRecovery(copy?.documentId);
    setCopy(undefined);
  }
 
  return (
    <DemoFrame>
      <DemoCanvas elementRef={elementRef} label={t("canvas")}>
        {copy && (
          <div
            role="alert"
            className="absolute inset-x-2 bottom-2 flex items-center gap-2 rounded-md border bg-background/95 p-1.5 pl-3 text-[13px] shadow-sm backdrop-blur"
          >
            <span className="truncate">
              {t("recovery.found", {
                time: format.dateTime(new Date(copy.savedAt), {
                  timeStyle: "medium",
                }),
              })}
            </span>
            <button
              type="button"
              className="ml-auto h-7 shrink-0 rounded-md px-2 font-medium hover:bg-muted"
              onClick={() => void discard()}
            >
              {t("recovery.discard")}
            </button>
            <button
              type="button"
              className="h-7 shrink-0 rounded-md bg-foreground px-2.5 font-medium text-background hover:bg-foreground/85"
              onClick={() => void restore()}
            >
              {t("recovery.restore")}
            </button>
          </div>
        )}
      </DemoCanvas>
 
      <Toolbar>
        <ToolButton
          icon={SquareIcon}
          label={t("square")}
          onClick={() => canvas?.add(newShape("square"))}
        />
        <ToolButton
          icon={CircleIcon}
          label={t("circle")}
          onClick={() => canvas?.add(newShape("circle"))}
        />
        <ToolButton
          icon={ZapIcon}
          label={t("recovery.crash")}
          className="ml-auto"
          disabled={!state?.isDirty}
          onClick={onCrash}
        />
      </Toolbar>
 
      <Status tone={copy ? "error" : state?.isDirty ? "busy" : "ok"}>
        {copy
          ? t("recovery.crashed")
          : state?.isDirty
            ? t("recovery.unsaved")
            : t("recovery.saved")}
      </Status>
    </DemoFrame>
  );
}
 
export default function RecoveryDemo() {
  // A new key throws the editor away without saving, like a closed tab.
  const [session, setSession] = useState(0);
 
  return (
    <Editor
      key={session}
      fresh={session === 0}
      onCrash={() => setSession((n) => n + 1)}
    />
  );
}