@yuzhouu/canvas-kit 0.1.2

package/_vendor/canvas-product-react/api/canvasProductApi.ts

@@ -0,0 +1,422 @@
+import { useEffect, useEffectEvent, useMemo } from "react";
+import type {
+  Camera,
+  Editor,
+  LayerOrderDirection,
+  LayerOrderEdge,
+  LayerTreeNode,
+  PageId,
+  PageRecord,
+  ReparentShapePlacementFailureReason,
+  ShapeId,
+  ShapeParentId,
+} from "@land/canvas-core";
+import type { CanvasPluginHostRuntime } from "@land/canvas-react/host";
+import type {
+  ProductServiceRegistry,
+} from "../runtime/productServices";
+import type {
+  ProductApiRegistry,
+} from "./apiRegistry";
+
+export interface CanvasProductShapeRef {
+  id: ShapeId;
+  type: string;
+}
+
+export interface CanvasProductSessionPageState {
+  pageId: string;
+  selectedShapeIds: ShapeId[];
+  camera: { x: number; y: number; z: number };
+}
+
+export interface CanvasProductSessionSnapshot<
+  TToolId extends string = string,
+> {
+  currentPageId: string;
+  activeToolId: TToolId;
+  isToolLocked: boolean;
+  pages: CanvasProductSessionPageState[];
+}
+
+export interface CanvasProductApiSnapshot<TToolId extends string = string> {
+  productId: string;
+  pageId: string;
+  activeToolId: TToolId;
+  selectedShapeIds: ShapeId[];
+  shapeCount: number;
+  session: CanvasProductSessionSnapshot<TToolId>;
+}
+
+export interface CanvasProductLayerNode {
+  id: ShapeId;
+  parentId: string;
+  pageId: string;
+  type: string;
+  childIds: ShapeId[];
+  siblingIndex: number;
+  depth: number;
+  displayName: string;
+  canReceiveChildren: boolean;
+  isHidden: boolean;
+  isLocked: boolean;
+  isEffectivelyHidden: boolean;
+  isEffectivelyLocked: boolean;
+}
+
+export interface CanvasProductLayerPlacement {
+  parentId: string;
+  beforeId?: ShapeId;
+}
+
+export type CanvasProductLayerPlacementFailureReason =
+  ReparentShapePlacementFailureReason;
+
+export type CanvasProductLayerPlacementResult =
+  | { ok: true; movedIds: ShapeId[] }
+  | { ok: false; reason: CanvasProductLayerPlacementFailureReason };
+
+export interface CanvasProductLayerActionState {
+  canGroup: boolean;
+  canUngroup: boolean;
+  canMoveBackward: boolean;
+  canMoveForward: boolean;
+}
+
+export interface CanvasProductPageRef {
+  id: string;
+  name: string;
+  index: string;
+}
+
+export interface CanvasProductApi<TToolId extends string = string> {
+  plugins: ProductApiRegistry;
+  snapshot(): CanvasProductApiSnapshot<TToolId>;
+  clearHistory(): void;
+  select(ids: ShapeId[]): void;
+  selectAll(): void;
+  deleteSelection(): void;
+  deleteShapes(ids: ShapeId[]): void;
+  duplicateSelection(): ShapeId[];
+  centerOnShape(id: ShapeId): boolean;
+  getLayerTree(pageId?: string): CanvasProductLayerNode[];
+  getLayerNode(id: ShapeId): CanvasProductLayerNode | null;
+  setShapesHidden(ids: ShapeId[], isHidden: boolean): ShapeId[];
+  setShapesLocked(ids: ShapeId[], isLocked: boolean): ShapeId[];
+  groupShapes(ids: ShapeId[]): ShapeId | null;
+  ungroupShapes(ids: ShapeId[]): ShapeId[];
+  moveShapesInParentOrder(
+    ids: ShapeId[],
+    direction: LayerOrderDirection,
+  ): boolean;
+  moveShapesToParentOrderEdge(ids: ShapeId[], edge: LayerOrderEdge): boolean;
+  moveShapesToLayerPlacement(
+    ids: ShapeId[],
+    placement: CanvasProductLayerPlacement,
+  ): CanvasProductLayerPlacementResult;
+  getLayerActionState(ids: ShapeId[]): CanvasProductLayerActionState;
+  setTool(toolId: TToolId): void;
+  setCamera(camera: Partial<Camera>, pageId?: string): void;
+  resetView(): void;
+  getPages(): CanvasProductPageRef[];
+  createPage(name?: string): CanvasProductPageRef;
+  renamePage(pageId: string, name: string): void;
+  deletePage(pageId: string): boolean;
+  selectPage(pageId: string): void;
+  exportSelectionSvg(): string | null;
+  exportPageSvg(): string | null;
+}
+
+export interface CanvasProductApiContext {
+  editor: Editor;
+  services: ProductServiceRegistry;
+  pluginHostRuntime: CanvasPluginHostRuntime;
+  apiRegistry: ProductApiRegistry;
+  productId: string;
+}
+
+export interface CanvasProductApiOptions<TToolId extends string = string>
+  extends CanvasProductApiContext {
+  assertToolId: (toolId: string) => asserts toolId is TToolId;
+}
+
+export interface CanvasProductApiLifecycleOptions<TApi> {
+  api: TApi;
+  exposeOnWindow?: boolean;
+  windowKey?: string;
+  onDispose?: () => void;
+  onReady?: (api: TApi) => void;
+}
+
+function toPageRef(page: PageRecord): CanvasProductPageRef {
+  return { id: page.id, name: page.name, index: page.index };
+}
+
+function toLayerNode(
+  node: LayerTreeNode,
+  editor: Editor,
+): CanvasProductLayerNode {
+  return {
+    id: node.id,
+    parentId: node.parentId,
+    pageId: node.pageId,
+    type: node.type,
+    childIds: node.childIds.slice(),
+    siblingIndex: node.index,
+    depth: node.depth,
+    displayName: node.type,
+    canReceiveChildren: editor.canUseShapeParent(node.id),
+    isHidden: node.isHidden,
+    isLocked: node.isLocked,
+    isEffectivelyHidden: node.isEffectivelyHidden,
+    isEffectivelyLocked: node.isEffectivelyLocked,
+  };
+}
+
+function toSessionSnapshot<TToolId extends string>(
+  editor: Editor,
+  options: CanvasProductApiOptions<TToolId>,
+): CanvasProductSessionSnapshot<TToolId> {
+  const session = editor.sessionSignal.get();
+  const rawToolId = session.activeToolId;
+  options.assertToolId(rawToolId);
+  const activeToolId: TToolId = rawToolId;
+  const pages: CanvasProductSessionPageState[] = editor.getPages().map((page) => ({
+    pageId: page.id,
+    selectedShapeIds: editor.getSelectedShapeIds(page.id),
+    camera: { ...editor.getCamera(page.id) },
+  }));
+  return {
+    currentPageId: session.currentPageId,
+    activeToolId,
+    isToolLocked: session.isToolLocked,
+    pages,
+  };
+}
+
+export function createCanvasProductApi<TToolId extends string = string>(
+  options: CanvasProductApiOptions<TToolId>,
+): CanvasProductApi<TToolId> {
+  const { apiRegistry, editor, productId } = options;
+
+  return {
+    plugins: apiRegistry,
+    snapshot() {
+      const rawToolId = editor.getActiveToolId();
+      options.assertToolId(rawToolId);
+      const activeToolId: TToolId = rawToolId;
+      return {
+        productId,
+        pageId: editor.getCurrentPageId(),
+        activeToolId,
+        selectedShapeIds: editor.getSelectedShapeIds(),
+        shapeCount: editor.getCurrentPageShapeIds().length,
+        session: toSessionSnapshot(editor, options),
+      };
+    },
+    clearHistory() {
+      editor.history.clear();
+    },
+    select(ids) {
+      editor.commands.setSelectedShapeIds(ids, { source: "user" });
+    },
+    selectAll() {
+      editor.selectAllCurrentPage("user");
+    },
+    deleteSelection() {
+      editor.deleteSelection("user");
+    },
+    deleteShapes(ids) {
+      editor.deleteShapesById(ids, "user");
+    },
+    duplicateSelection() {
+      return editor.duplicateSelection();
+    },
+    centerOnShape(id) {
+      const pageId = editor.getShapePageId(id);
+      if (!pageId) {
+        return false;
+      }
+      if (pageId !== editor.getCurrentPageId()) {
+        editor.commands.setCurrentPageId(pageId, { source: "user" });
+      }
+      const bounds = editor.getShapeSubtreePageBounds(id);
+      if (!bounds) {
+        return false;
+      }
+      const viewport = editor.viewportScreenSizeSignal.get();
+      if (viewport.w <= 0 || viewport.h <= 0) {
+        return false;
+      }
+      const camera = editor.getCurrentCamera();
+      editor.commands.setCamera(
+        {
+          pageId,
+          camera: {
+            x: bounds.center.x - viewport.w / (2 * camera.z),
+            y: bounds.center.y - viewport.h / (2 * camera.z),
+            z: camera.z,
+          },
+        },
+        { source: "user" },
+      );
+      return true;
+    },
+    getLayerTree(pageId) {
+      const pid = (pageId as PageId | undefined) ?? editor.getCurrentPageId();
+      return editor.getLayerTree(pid).map((node) => toLayerNode(node, editor));
+    },
+    getLayerNode(id) {
+      const node = editor.getLayerNode(id);
+      return node ? toLayerNode(node, editor) : null;
+    },
+    setShapesHidden(ids, isHidden) {
+      return editor.setShapesHidden(ids, isHidden, "user");
+    },
+    setShapesLocked(ids, isLocked) {
+      return editor.setShapesLocked(ids, isLocked, "user");
+    },
+    groupShapes(ids) {
+      return editor.groupShapes(ids, "user")?.id ?? null;
+    },
+    ungroupShapes(ids) {
+      return editor.ungroupShapes(ids, "user");
+    },
+    moveShapesInParentOrder(ids, direction) {
+      return editor.moveShapesInParentOrder(ids, direction, "user");
+    },
+    moveShapesToParentOrderEdge(ids, edge) {
+      return editor.moveShapesToParentOrderEdge(ids, edge, "user");
+    },
+    moveShapesToLayerPlacement(ids, placement) {
+      return editor.moveShapesToParentPlacementResult(
+        {
+          ids,
+          parentId: placement.parentId as ShapeParentId,
+          beforeId: placement.beforeId,
+        },
+        "user",
+      );
+    },
+    getLayerActionState(ids) {
+      return {
+        canGroup: editor.canGroupShapes(ids),
+        canUngroup: editor.canUngroupShapes(ids),
+        canMoveBackward: editor.canMoveShapesInParentOrder(ids, "backward"),
+        canMoveForward: editor.canMoveShapesInParentOrder(ids, "forward"),
+      };
+    },
+    setTool(toolId) {
+      editor.setActiveTool(toolId, "user");
+    },
+    setCamera(camera, pageId) {
+      editor.commands.setCamera(
+        {
+          pageId: pageId as PageId | undefined,
+          camera,
+        },
+        { source: "user" },
+      );
+    },
+    resetView() {
+      editor.commands.setCamera(
+        {
+          camera: {
+            x: 0,
+            y: 0,
+            z: 1,
+          },
+        },
+        { source: "user" },
+      );
+    },
+    getPages() {
+      return editor.getPages().map(toPageRef);
+    },
+    createPage(name) {
+      const page = editor.createPageAndSelect(
+        name ? { name } : undefined,
+        "user",
+      );
+      return toPageRef(page);
+    },
+    renamePage(pageId, name) {
+      editor.renamePage(pageId as PageId, name, "user");
+    },
+    deletePage(pageId) {
+      return editor.deletePage(pageId as PageId, "user");
+    },
+    selectPage(pageId) {
+      editor.selectPage(pageId as PageId, "user");
+    },
+    exportSelectionSvg() {
+      return (
+        editor.getSvgString(editor.getSelectedShapeIds(), {
+          padding: 16,
+        })?.svg ?? null
+      );
+    },
+    exportPageSvg() {
+      return (
+        editor.getSvgString(editor.getCurrentPageShapeIds(), {
+          padding: 16,
+        })?.svg ?? null
+      );
+    },
+  };
+}
+
+export function useCanvasProductApi<TToolId extends string = string>(
+  options: CanvasProductApiOptions<TToolId>,
+): CanvasProductApi<TToolId> {
+  const {
+    apiRegistry,
+    assertToolId,
+    editor,
+    pluginHostRuntime,
+    productId,
+    services,
+  } = options;
+  return useMemo(
+    () =>
+      createCanvasProductApi({
+        apiRegistry,
+        assertToolId,
+        editor,
+        pluginHostRuntime,
+        productId,
+        services,
+      }),
+    [apiRegistry, assertToolId, editor, pluginHostRuntime, productId, services],
+  );
+}
+
+export function useCanvasProductApiLifecycle<TApi>({
+  api,
+  exposeOnWindow = false,
+  windowKey,
+  onDispose,
+  onReady,
+}: CanvasProductApiLifecycleOptions<TApi>): void {
+  const emitReady = useEffectEvent((nextApi: TApi) => {
+    onReady?.(nextApi);
+  });
+  const emitDispose = useEffectEvent(() => {
+    onDispose?.();
+  });
+
+  useEffect(() => {
+    const windowRecord = window as unknown as Record<string, TApi | undefined>;
+    if (exposeOnWindow && windowKey) {
+      windowRecord[windowKey] = api;
+    }
+    emitReady(api);
+
+    return () => {
+      if (exposeOnWindow && windowKey && windowRecord[windowKey] === api) {
+        delete windowRecord[windowKey];
+      }
+      emitDispose();
+    };
+  }, [api, exposeOnWindow, windowKey]);
+}

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

@@ -0,0 +1,31 @@
+export {
+  createProductApiRegistry,
+  createProductApiToken,
+} from "./apiRegistry";
+export type {
+  ProductApiRegistry,
+  ProductApiRegistryRuntime,
+  ProductApiToken,
+} from "./apiRegistry";
+export {
+  createCanvasProductApi,
+  useCanvasProductApi,
+  useCanvasProductApiLifecycle,
+} from "./canvasProductApi";
+export type {
+  CanvasProductApi,
+  CanvasProductApiContext,
+  CanvasProductApiLifecycleOptions,
+  CanvasProductApiOptions,
+  CanvasProductApiSnapshot,
+  CanvasProductLayerActionState,
+  CanvasProductLayerNode,
+  CanvasProductLayerPlacement,
+  CanvasProductLayerPlacementFailureReason,
+  CanvasProductLayerPlacementResult,
+  CanvasProductPageRef,
+  CanvasProductSessionPageState,
+  CanvasProductSessionSnapshot,
+  CanvasProductShapeRef,
+} from "./canvasProductApi";
+

package/_vendor/canvas-product-react/capabilities/clipboard/clipboardService.ts

@@ -0,0 +1,36 @@
+import type { EditorClipboardPayload } from "@land/canvas-core";
+import {
+  createProductServiceToken,
+  type ProductServiceFactory,
+} from "../../runtime/productServices";
+
+export interface CanvasClipboardService {
+  write(payload: EditorClipboardPayload): Promise<void>;
+  read(): Promise<EditorClipboardPayload | null>;
+  getMemoryPayload(): EditorClipboardPayload | null;
+}
+
+export const canvasClipboardServiceToken =
+  createProductServiceToken<CanvasClipboardService>(
+    "canvas-product.clipboard-service",
+  );
+
+export function memoryCanvasClipboardService(): ProductServiceFactory<CanvasClipboardService> {
+  return {
+    token: canvasClipboardServiceToken,
+    create() {
+      let memoryPayload: EditorClipboardPayload | null = null;
+      return {
+        async write(payload) {
+          memoryPayload = payload;
+        },
+        async read() {
+          return memoryPayload;
+        },
+        getMemoryPayload() {
+          return memoryPayload;
+        },
+      };
+    },
+  };
+}