@yuzhouu/canvas-kit 0.1.2

package/_vendor/canvas-product-react/capabilities/toolbar/useToolbarSurfaces.ts

@@ -0,0 +1,92 @@
+import { useValue } from "@land/canvas-react";
+import type { Editor, ToolbarContext, ToolbarGroup } from "@land/canvas-core";
+import type { CanvasPluginHostRuntime } from "@land/canvas-react/host";
+import {
+  createToolbarContext,
+  getActiveToolLabel,
+  getSelectionToolbarTitle,
+} from "./systemToolbar";
+
+export interface ToolbarSurfaces {
+  context: ToolbarContext;
+  activeToolId: string;
+  activeToolLabel: string;
+  isToolLocked: boolean;
+  selectionCount: number;
+  hasMixedSelectionRotation: boolean;
+  toolChromeToolbarGroups: readonly ToolbarGroup[];
+  contextToolbarGroups: readonly ToolbarGroup[];
+  contextToolbarTitle: string;
+  showContextToolbar: boolean;
+}
+
+export function useToolbarSurfaces({
+  canShowContextToolbarDuringEditing,
+  editor,
+  pluginHostRuntime,
+}: {
+  canShowContextToolbarDuringEditing?: (context: ToolbarContext) => boolean;
+  editor: Editor;
+  pluginHostRuntime: CanvasPluginHostRuntime;
+}): ToolbarSurfaces {
+  const toolState = useValue(editor.toolStateSignal);
+  const selectionState = useValue(editor.selectionStateSignal);
+  const textEditingState = useValue(editor.shapeEditingStateSignal);
+  const canShowSelectionSurface = toolState.activeToolId === "select";
+  const selectionCount = canShowSelectionSurface ? selectionState.count : 0;
+  const toolbarContext = createToolbarContext({
+    editor,
+    selectionState,
+    toolState,
+  });
+  const selectionToolbarGroups = pluginHostRuntime.toolbarRegistry.getGroups(
+    "selection",
+    toolbarContext,
+  );
+  const toolToolbarGroups = pluginHostRuntime.toolbarRegistry.getGroups(
+    "tool",
+    toolbarContext,
+    { placement: "context" },
+  );
+  const toolChromeToolbarGroups = pluginHostRuntime.toolbarRegistry.getGroups(
+    "tool",
+    toolbarContext,
+    { placement: "chrome" },
+  );
+  const contextToolbarGroups =
+    canShowSelectionSurface && selectionState.count > 0
+      ? selectionToolbarGroups
+      : toolToolbarGroups;
+  const canShowDuringEditing = textEditingState.session
+    ? (canShowContextToolbarDuringEditing?.(toolbarContext) ?? false)
+    : true;
+  const showContextToolbar =
+    canShowDuringEditing && contextToolbarGroups.length > 0;
+  const activeToolLabel = getActiveToolLabel(
+    toolToolbarGroups,
+    toolState.activeToolId,
+  );
+  const contextToolbarTitle =
+    canShowSelectionSurface && selectionState.count > 0
+      ? getSelectionToolbarTitle({
+          commonShapeType: selectionState.commonShapeType,
+          count: selectionCount,
+          isMixedFrameAndPointHandleSelection:
+            selectionState.isMixedFrameAndPointHandleSelection,
+          singleShapeType: selectionState.singleShapeType,
+        })
+      : activeToolLabel;
+
+  return {
+    context: toolbarContext,
+    activeToolId: toolState.activeToolId,
+    activeToolLabel,
+    isToolLocked: toolState.isToolLocked,
+    selectionCount,
+    hasMixedSelectionRotation: selectionState.hasMixedSelectionRotation,
+    toolChromeToolbarGroups,
+    contextToolbarGroups,
+    contextToolbarTitle,
+    showContextToolbar,
+  };
+}

package/_vendor/canvas-product-react/capabilities/zoom/useZoomControls.ts

@@ -0,0 +1,27 @@
+import { useValue } from "@land/canvas-react";
+import type { Editor } from "@land/canvas-core";
+
+export interface ZoomControlsState {
+  zoom: number;
+  label: string;
+  zoomIn(): void;
+  zoomOut(): void;
+  resetZoom(): void;
+}
+
+export function useZoomControls(editor: Editor): ZoomControlsState {
+  const zoom = useValue(editor.cameraZoomSignal);
+  return {
+    zoom,
+    label: `${Math.round(zoom * 100)}%`,
+    zoomIn() {
+      editor.zoomAtViewportCenter(-120, "system");
+    },
+    zoomOut() {
+      editor.zoomAtViewportCenter(120, "system");
+    },
+    resetZoom() {
+      editor.resetZoom("user");
+    },
+  };
+}

package/_vendor/canvas-product-react/index.ts

@@ -0,0 +1,84 @@
+export { CanvasProductRoot } from "./runtime/CanvasProductRoot";
+export { defineCanvasProduct } from "./runtime/productDefinition";
+export {
+  createProductApiRegistry,
+  createProductApiToken,
+} from "./api/apiRegistry";
+export {
+  createProductServiceRegistry,
+  createProductServiceToken,
+  requireProductService,
+} from "./runtime/productServices";
+export type {
+  CanvasProductDefinition,
+  CanvasProductShellProps,
+  CanvasProductRuntimeSetup,
+  CanvasProductRuntimeSetupContext,
+  CreateCanvasProductEditorOptions,
+  ProductPersistenceAdapter,
+} from "./runtime/productDefinition";
+export type {
+  ProductAssetResolverService,
+  ProductServiceFactory,
+  ProductServiceFactoryContext,
+  ProductServiceRegistry,
+  ProductServiceRegistryRuntime,
+  ProductServiceToken,
+} from "./runtime/productServices";
+export type {
+  ProductApiRegistry,
+  ProductApiRegistryRuntime,
+  ProductApiToken,
+} from "./api/apiRegistry";
+export {
+  SYSTEM_SELECTION_DELETE_ACTION_ID,
+  SYSTEM_SELECTION_GROUP_ACTION_ID,
+  SYSTEM_SELECTION_UNGROUP_ACTION_ID,
+  createToolbarContext,
+  getActiveToolLabel,
+  getSelectionToolbarTitle,
+  registerSystemToolbarContributions,
+  runToolbarAction,
+} from "./capabilities/toolbar/systemToolbar";
+export {
+  SYSTEM_VIEW_RESET_ZOOM_ACTION_ID,
+  SYSTEM_VIEW_ZOOM_IN_ACTION_ID,
+  SYSTEM_VIEW_ZOOM_OUT_ACTION_ID,
+  createContextMenuContext,
+  getContextMenuContributionTarget,
+  registerSystemContextMenuContributions,
+  runContextMenuAction,
+} from "./capabilities/context-menu/systemContextMenu";
+export { useContextMenuSurface } from "./capabilities/context-menu/useContextMenuSurface";
+export type { ContextMenuSurface } from "./capabilities/context-menu/useContextMenuSurface";
+export {
+  canvasClipboardServiceToken,
+  memoryCanvasClipboardService,
+} from "./capabilities/clipboard/clipboardService";
+export type { CanvasClipboardService } from "./capabilities/clipboard/clipboardService";
+export {
+  SYSTEM_CLIPBOARD_COPY_ACTION_ID,
+  SYSTEM_CLIPBOARD_CUT_ACTION_ID,
+  SYSTEM_CLIPBOARD_PASTE_ACTION_ID,
+  SYSTEM_CLIPBOARD_PASTE_AT_POINT_ACTION_ID,
+  SYSTEM_SELECTION_DUPLICATE_ACTION_ID,
+  SYSTEM_SELECTION_SELECT_ALL_ACTION_ID,
+  getCanvasClipboardService,
+  registerSystemClipboardActions,
+  registerSystemClipboardRuntime,
+} from "./capabilities/clipboard/systemClipboard";
+export { useHistoryControls } from "./capabilities/history/useHistoryControls";
+export type { HistoryControls } from "./capabilities/history/useHistoryControls";
+export { usePageControls } from "./capabilities/pages/usePageControls";
+export type { PageControls } from "./capabilities/pages/usePageControls";
+export { useSvgExport } from "./capabilities/export/useSvgExport";
+export type {
+  ExportStatus,
+  SvgAssetInliner,
+  SvgExportControls,
+  SvgExportResult,
+} from "./capabilities/export/useSvgExport";
+export { useToolbarSurfaces } from "./capabilities/toolbar/useToolbarSurfaces";
+export type { ToolbarSurfaces } from "./capabilities/toolbar/useToolbarSurfaces";
+export { useZoomControls } from "./capabilities/zoom/useZoomControls";
+export type { ZoomControlsState } from "./capabilities/zoom/useZoomControls";

package/_vendor/canvas-product-react/persistence/index.ts

@@ -0,0 +1,18 @@
+export {
+  LAND_DOCUMENT_INDEXEDDB_NAME,
+  LAND_DOCUMENT_INDEXEDDB_STORE,
+  LAND_DOCUMENT_INDEXEDDB_VERSION,
+  LAND_DOCUMENT_STORAGE_KEY,
+  LAND_IMAGE_BLOB_INDEXEDDB_STORE,
+  LAND_SESSION_STORAGE_KEY,
+  PersistenceManager,
+  createLocalSnapshotPersistence,
+  persistEditorSnapshot,
+  readPersistedDocumentSnapshot,
+  readPersistedEditorSnapshots,
+  readPersistedSessionSnapshot,
+} from "./localSnapshotPersistence";
+export type {
+  LocalSnapshotPersistenceOptions,
+  PersistedEditorSnapshots,
+} from "./localSnapshotPersistence";

package/_vendor/canvas-product-react/persistence/localSnapshotPersistence.ts

@@ -0,0 +1,294 @@
+import type { Editor } from "@land/canvas-core";
+import type { ProductPersistenceAdapter } from "../runtime/productDefinition";
+
+export const LAND_DOCUMENT_INDEXEDDB_NAME = "land.canvas.persistence";
+export const LAND_DOCUMENT_INDEXEDDB_STORE = "snapshots";
+export const LAND_IMAGE_BLOB_INDEXEDDB_STORE = "imageBlobs";
+export const LAND_DOCUMENT_STORAGE_KEY = "land.canvas.document";
+export const LAND_SESSION_STORAGE_KEY = "land.canvas.session";
+
+export const LAND_DOCUMENT_INDEXEDDB_VERSION = 2;
+type PersistedSnapshot = string;
+
+export interface PersistedEditorSnapshots {
+  documentSnapshot: unknown | null;
+  sessionSnapshot: unknown | null;
+}
+
+export interface LocalSnapshotPersistenceOptions {
+  storageNamespace?: string;
+  shouldIgnoreDocumentSnapshot?: (snapshot: unknown) => boolean;
+}
+
+export function createLocalSnapshotPersistence(
+  options: LocalSnapshotPersistenceOptions = {},
+): ProductPersistenceAdapter {
+  return {
+    async restore(editor) {
+      const { documentSnapshot, sessionSnapshot } =
+        await readPersistedEditorSnapshots(options);
+      if (
+        documentSnapshot &&
+        options.shouldIgnoreDocumentSnapshot?.(documentSnapshot)
+      ) {
+        console.warn("Ignoring persisted canvas document snapshot.");
+      } else if (documentSnapshot) {
+        editor.loadDocumentSnapshot(documentSnapshot, { source: "system" });
+      }
+      if (sessionSnapshot) {
+        editor.loadSessionSnapshot(sessionSnapshot, { source: "system" });
+      }
+      editor.history.clear();
+    },
+    start(editor) {
+      const persistence = new PersistenceManager(editor, options);
+      persistence.start();
+      return () => persistence.stop();
+    },
+  };
+}
+
+export class PersistenceManager {
+  private static readonly SAVE_DELAY_MS = 200;
+
+  private unsubscribe: (() => void) | null = null;
+  private saveTimeoutId: number | null = null;
+  private hasPendingSave = false;
+  private isSaving = false;
+  private saveAgainAfterCurrentSave = false;
+
+  constructor(
+    private readonly editor: Editor,
+    private readonly options: LocalSnapshotPersistenceOptions = {},
+  ) {}
+
+  start(): void {
+    if (this.unsubscribe) return;
+    this.unsubscribe = this.editor.listen(() => {
+      this.scheduleSave();
+    });
+    document.addEventListener("visibilitychange", this.flushWhenHidden);
+    window.addEventListener("pagehide", this.flushWhenPageIsLeaving);
+    window.addEventListener("beforeunload", this.flushWhenPageIsLeaving);
+  }
+
+  stop(): void {
+    this.flush();
+    this.unsubscribe?.();
+    this.unsubscribe = null;
+    document.removeEventListener("visibilitychange", this.flushWhenHidden);
+    window.removeEventListener("pagehide", this.flushWhenPageIsLeaving);
+    window.removeEventListener("beforeunload", this.flushWhenPageIsLeaving);
+  }
+
+  flush(): void {
+    if (!this.hasPendingSave) return;
+    this.cancelScheduledSave();
+    this.save();
+  }
+
+  private save(): void {
+    if (this.isSaving) {
+      this.saveAgainAfterCurrentSave = true;
+      return;
+    }
+
+    this.isSaving = true;
+    this.hasPendingSave = false;
+    this.saveAgainAfterCurrentSave = false;
+
+    void persistEditorSnapshot(this.editor, this.options)
+      .catch((error: unknown) => {
+        console.warn("Could not persist canvas snapshot.", error);
+      })
+      .finally(() => {
+        this.isSaving = false;
+        if (this.saveAgainAfterCurrentSave || this.hasPendingSave) {
+          this.save();
+        }
+      });
+  }
+
+  private scheduleSave(): void {
+    this.hasPendingSave = true;
+    if (this.saveTimeoutId !== null) return;
+
+    this.saveTimeoutId = window.setTimeout(() => {
+      this.saveTimeoutId = null;
+      this.flush();
+    }, PersistenceManager.SAVE_DELAY_MS);
+  }
+
+  private cancelScheduledSave(): void {
+    if (this.saveTimeoutId === null) return;
+    window.clearTimeout(this.saveTimeoutId);
+    this.saveTimeoutId = null;
+  }
+
+  private readonly flushWhenHidden = (): void => {
+    if (document.visibilityState === "hidden") {
+      this.flush();
+    }
+  };
+
+  private readonly flushWhenPageIsLeaving = (): void => {
+    this.flush();
+  };
+}
+
+export async function persistEditorSnapshot(
+  editor: Editor,
+  options: LocalSnapshotPersistenceOptions = {},
+): Promise<void> {
+  const documentSnapshot = JSON.stringify(editor.getDocumentSnapshot());
+  const sessionSnapshot = JSON.stringify(editor.getSessionSnapshot());
+
+  await Promise.all([
+    writeIndexedDbSnapshot(
+      getDocumentStorageKey(options),
+      documentSnapshot,
+    ),
+    writeIndexedDbSnapshot(
+      getSessionStorageKey(options),
+      sessionSnapshot,
+    ),
+  ]);
+}
+
+export async function readPersistedEditorSnapshots(
+  options: LocalSnapshotPersistenceOptions = {},
+): Promise<PersistedEditorSnapshots> {
+  const [documentSnapshot, sessionSnapshot] = await Promise.all([
+    readPersistedSnapshot(getDocumentStorageKey(options)),
+    readPersistedSnapshot(getSessionStorageKey(options)),
+  ]);
+
+  return {
+    documentSnapshot,
+    sessionSnapshot,
+  };
+}
+
+export async function readPersistedDocumentSnapshot(): Promise<unknown | null> {
+  return readPersistedSnapshot(LAND_DOCUMENT_STORAGE_KEY);
+}
+
+export async function readPersistedSessionSnapshot(): Promise<unknown | null> {
+  return readPersistedSnapshot(LAND_SESSION_STORAGE_KEY);
+}
+
+function getDocumentStorageKey(options: LocalSnapshotPersistenceOptions): string {
+  return options.storageNamespace
+    ? `${options.storageNamespace}.document`
+    : LAND_DOCUMENT_STORAGE_KEY;
+}
+
+function getSessionStorageKey(options: LocalSnapshotPersistenceOptions): string {
+  return options.storageNamespace
+    ? `${options.storageNamespace}.session`
+    : LAND_SESSION_STORAGE_KEY;
+}
+
+async function readPersistedSnapshot(key: string): Promise<unknown | null> {
+  const raw = await readIndexedDbSnapshot(key);
+  if (!raw) return null;
+
+  try {
+    return JSON.parse(raw) as unknown;
+  } catch {
+    return null;
+  }
+}
+
+function openSnapshotDatabase(): Promise<IDBDatabase | null> {
+  if (typeof indexedDB === "undefined") {
+    return Promise.resolve(null);
+  }
+
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(
+      LAND_DOCUMENT_INDEXEDDB_NAME,
+      LAND_DOCUMENT_INDEXEDDB_VERSION,
+    );
+    request.addEventListener("upgradeneeded", () => {
+      if (
+        !request.result.objectStoreNames.contains(
+          LAND_DOCUMENT_INDEXEDDB_STORE,
+        )
+      ) {
+        request.result.createObjectStore(LAND_DOCUMENT_INDEXEDDB_STORE);
+      }
+      if (
+        !request.result.objectStoreNames.contains(
+          LAND_IMAGE_BLOB_INDEXEDDB_STORE,
+        )
+      ) {
+        request.result.createObjectStore(LAND_IMAGE_BLOB_INDEXEDDB_STORE);
+      }
+    });
+    request.addEventListener("success", () => resolve(request.result));
+    request.addEventListener("error", () => reject(request.error));
+  });
+}
+
+async function readIndexedDbSnapshot(
+  key: string,
+): Promise<PersistedSnapshot | null> {
+  const database = await openSnapshotDatabase();
+  if (!database) {
+    return null;
+  }
+
+  return new Promise((resolve, reject) => {
+    const transaction = database.transaction(
+      LAND_DOCUMENT_INDEXEDDB_STORE,
+      "readonly",
+    );
+    transaction.addEventListener("complete", () => database.close());
+    transaction.addEventListener("abort", () => {
+      database.close();
+      reject(transaction.error);
+    });
+    transaction.addEventListener("error", () => {
+      database.close();
+      reject(transaction.error);
+    });
+    const store = transaction.objectStore(LAND_DOCUMENT_INDEXEDDB_STORE);
+    const request = store.get(key);
+    request.addEventListener("success", () => {
+      resolve(typeof request.result === "string" ? request.result : null);
+    });
+    request.addEventListener("error", () => reject(request.error));
+  });
+}
+
+async function writeIndexedDbSnapshot(
+  key: string,
+  snapshot: PersistedSnapshot,
+): Promise<void> {
+  const database = await openSnapshotDatabase();
+  if (!database) {
+    return;
+  }
+
+  await new Promise<void>((resolve, reject) => {
+    const transaction = database.transaction(
+      LAND_DOCUMENT_INDEXEDDB_STORE,
+      "readwrite",
+    );
+    transaction.addEventListener("complete", () => {
+      database.close();
+      resolve();
+    });
+    transaction.addEventListener("abort", () => {
+      database.close();
+      reject(transaction.error);
+    });
+    transaction.addEventListener("error", () => {
+      database.close();
+      reject(transaction.error);
+    });
+    const store = transaction.objectStore(LAND_DOCUMENT_INDEXEDDB_STORE);
+    store.put(snapshot, key);
+  });
+}