@yuzhouu/canvas-kit 0.1.2

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

@@ -0,0 +1,245 @@
+import type {
+  ContextMenuContext,
+  EditorClipboardPayload,
+  ToolbarAction,
+  ToolbarContext,
+} from "@land/canvas-core";
+import type { CanvasPluginHostRuntime } from "@land/canvas-react/host";
+import type {
+  CanvasProductRuntimeSetupContext,
+} from "../../runtime/productDefinition";
+import type { ProductServiceRegistry } from "../../runtime/productServices";
+import {
+  canvasClipboardServiceToken,
+  memoryCanvasClipboardService,
+  type CanvasClipboardService,
+} from "./clipboardService";
+
+export const SYSTEM_CLIPBOARD_COPY_ACTION_ID = "system.clipboard.copy";
+export const SYSTEM_CLIPBOARD_CUT_ACTION_ID = "system.clipboard.cut";
+export const SYSTEM_CLIPBOARD_PASTE_ACTION_ID = "system.clipboard.paste";
+export const SYSTEM_CLIPBOARD_PASTE_AT_POINT_ACTION_ID =
+  "system.clipboard.paste-at-point";
+export const SYSTEM_SELECTION_DUPLICATE_ACTION_ID =
+  "system.selection.duplicate";
+export const SYSTEM_SELECTION_SELECT_ALL_ACTION_ID =
+  "system.selection.select-all";
+
+export function registerSystemClipboardRuntime({
+  pluginHostRuntime,
+  productId,
+  services,
+}: CanvasProductRuntimeSetupContext): void {
+  services.register(memoryCanvasClipboardService(), { productId });
+  registerSystemClipboardActions({
+    pluginHostRuntime,
+    services,
+  });
+}
+
+export function registerSystemClipboardActions({
+  pluginHostRuntime,
+  services,
+}: {
+  pluginHostRuntime: CanvasPluginHostRuntime;
+  services: ProductServiceRegistry;
+}): void {
+  for (const action of createSystemClipboardActions(services)) {
+    pluginHostRuntime.toolbarRegistry.registerHostAction(action);
+  }
+}
+
+export function getCanvasClipboardService(
+  services: ProductServiceRegistry,
+): CanvasClipboardService | null {
+  return services.get(canvasClipboardServiceToken);
+}
+
+function createSystemClipboardActions(
+  services: ProductServiceRegistry,
+): readonly ToolbarAction[] {
+  return [
+    {
+      id: SYSTEM_CLIPBOARD_COPY_ACTION_ID,
+      isVisible(context) {
+        return context.selection.count > 0;
+      },
+      isEnabled(context) {
+        return (
+          context.selection.count > 0 &&
+          !!getCanvasClipboardService(services)
+        );
+      },
+      run({ context }) {
+        void copySelectionToClipboard({
+          context,
+          services,
+        });
+      },
+    },
+    {
+      id: SYSTEM_CLIPBOARD_CUT_ACTION_ID,
+      isVisible(context) {
+        return context.selection.count > 0;
+      },
+      isEnabled(context) {
+        return (
+          context.selection.count > 0 &&
+          !!getCanvasClipboardService(services)
+        );
+      },
+      run({ context }) {
+        void cutSelectionToClipboard({
+          context,
+          services,
+        });
+      },
+    },
+    {
+      id: SYSTEM_CLIPBOARD_PASTE_ACTION_ID,
+      isVisible() {
+        return !!getCanvasClipboardService(services)?.getMemoryPayload();
+      },
+      isEnabled() {
+        return !!getCanvasClipboardService(services)?.getMemoryPayload();
+      },
+      run({ context }) {
+        void pasteFromClipboard({
+          context,
+          services,
+        });
+      },
+    },
+    {
+      id: SYSTEM_CLIPBOARD_PASTE_AT_POINT_ACTION_ID,
+      isVisible(context) {
+        return (
+          hasContextMenuContext(context) &&
+          !!getCanvasClipboardService(services)?.getMemoryPayload()
+        );
+      },
+      isEnabled(context) {
+        return (
+          hasContextMenuContext(context) &&
+          !!getCanvasClipboardService(services)?.getMemoryPayload()
+        );
+      },
+      run({ context }) {
+        if (!hasContextMenuContext(context)) {
+          return;
+        }
+        void pasteFromClipboard({
+          context,
+          services,
+          atMenuPoint: true,
+        });
+      },
+    },
+    {
+      id: SYSTEM_SELECTION_DUPLICATE_ACTION_ID,
+      isVisible(context) {
+        return context.selection.count > 0;
+      },
+      isEnabled(context) {
+        return context.selection.count > 0;
+      },
+      run({ context }) {
+        context.editor.duplicateSelection({ source: "user" });
+      },
+    },
+    {
+      id: SYSTEM_SELECTION_SELECT_ALL_ACTION_ID,
+      isEnabled(context) {
+        return context.editor.getCurrentPageShapeIds().length > 0;
+      },
+      run({ context }) {
+        context.editor.selectAllCurrentPage("user");
+      },
+    },
+  ];
+}
+
+async function copySelectionToClipboard({
+  context,
+  services,
+}: {
+  context: ToolbarContext;
+  services: ProductServiceRegistry;
+}): Promise<EditorClipboardPayload | null> {
+  const clipboard = getCanvasClipboardService(services);
+  if (!clipboard) {
+    return null;
+  }
+
+  const payload = context.editor.createClipboardPayloadFromSelection();
+  if (!payload) {
+    return null;
+  }
+
+  await clipboard.write(payload);
+  return payload;
+}
+
+async function cutSelectionToClipboard({
+  context,
+  services,
+}: {
+  context: ToolbarContext;
+  services: ProductServiceRegistry;
+}): Promise<void> {
+  const payload = await copySelectionToClipboard({ context, services });
+  if (!payload) {
+    return;
+  }
+  context.editor.deleteSelection("user");
+}
+
+async function pasteFromClipboard({
+  atMenuPoint = false,
+  context,
+  services,
+}: {
+  atMenuPoint?: boolean;
+  context: ToolbarContext;
+  services: ProductServiceRegistry;
+}): Promise<void> {
+  const clipboard = getCanvasClipboardService(services);
+  if (!clipboard) {
+    return;
+  }
+
+  const payload = await clipboard.read();
+  if (!payload) {
+    return;
+  }
+
+  context.editor.pasteClipboardPayload({
+    payload,
+    pagePoint: getPastePagePoint({ atMenuPoint, context }),
+    source: "user",
+  });
+}
+
+function getPastePagePoint({
+  atMenuPoint,
+  context,
+}: {
+  atMenuPoint: boolean;
+  context: ToolbarContext;
+}) {
+  if (atMenuPoint && hasContextMenuContext(context)) {
+    return context.menu.pagePoint;
+  }
+
+  return (
+    context.editor.inputs.state.get().currentPagePoint ??
+    context.editor.viewportPageBoundsSignal.get()?.center ??
+    undefined
+  );
+}
+
+function hasContextMenuContext(
+  context: ToolbarContext,
+): context is ContextMenuContext {
+  return "menu" in context;
+}

package/_vendor/canvas-product-react/capabilities/context-menu/systemContextMenu.ts

@@ -0,0 +1,396 @@
+import {
+  SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID,
+  type ContextMenuContext,
+  type ContextMenuContribution,
+  type ContextMenuContributionTarget,
+  type ContextMenuSection,
+  type ContextMenuTarget,
+  type Editor,
+  type ShapeId,
+  type ToolbarAction,
+  type ToolbarActionValue,
+} from "@land/canvas-core";
+import { type CanvasPluginHostRuntime } from "@land/canvas-react/host";
+import {
+  createToolbarContext,
+  SYSTEM_SELECTION_DELETE_ACTION_ID,
+  SYSTEM_SELECTION_GROUP_ACTION_ID,
+  SYSTEM_SELECTION_UNGROUP_ACTION_ID,
+} from "../toolbar/systemToolbar";
+import {
+  SYSTEM_CLIPBOARD_COPY_ACTION_ID,
+  SYSTEM_CLIPBOARD_CUT_ACTION_ID,
+  SYSTEM_CLIPBOARD_PASTE_AT_POINT_ACTION_ID,
+  SYSTEM_SELECTION_DUPLICATE_ACTION_ID,
+  SYSTEM_SELECTION_SELECT_ALL_ACTION_ID,
+} from "../clipboard/systemClipboard";
+
+export const SYSTEM_VIEW_ZOOM_IN_ACTION_ID = "system.view.zoom-in";
+export const SYSTEM_VIEW_ZOOM_OUT_ACTION_ID = "system.view.zoom-out";
+export const SYSTEM_VIEW_RESET_ZOOM_ACTION_ID = "system.view.reset-zoom";
+
+const systemContextMenuActions: readonly ToolbarAction[] = [
+  {
+    id: SYSTEM_VIEW_ZOOM_IN_ACTION_ID,
+    run({ context }) {
+      context.editor.zoomAtViewportCenter(-120, "system");
+    },
+  },
+  {
+    id: SYSTEM_VIEW_ZOOM_OUT_ACTION_ID,
+    run({ context }) {
+      context.editor.zoomAtViewportCenter(120, "system");
+    },
+  },
+  {
+    id: SYSTEM_VIEW_RESET_ZOOM_ACTION_ID,
+    run({ context }) {
+      context.editor.resetZoom("user");
+    },
+  },
+];
+
+const systemSelectionContextMenuContribution: ContextMenuContribution = {
+  id: "system.selection-context-menu",
+  target: "selection",
+  order: 1000,
+  actionIds: [
+    SYSTEM_CLIPBOARD_COPY_ACTION_ID,
+    SYSTEM_CLIPBOARD_CUT_ACTION_ID,
+    SYSTEM_SELECTION_DUPLICATE_ACTION_ID,
+    SYSTEM_SELECTION_GROUP_ACTION_ID,
+    SYSTEM_SELECTION_UNGROUP_ACTION_ID,
+    "system.selection.reset-rotation",
+    "system.selection.flip-horizontal",
+    "system.selection.flip-vertical",
+    "system.selection.bring-to-front",
+    "system.selection.bring-forward",
+    "system.selection.send-backward",
+    "system.selection.send-to-back",
+    SYSTEM_SELECTION_DELETE_ACTION_ID,
+  ],
+  getSections(context) {
+    const showGenericOrderActions =
+      context.selection.count > 0 && !isSingleSelectedFrameChild(context);
+    const sections: ContextMenuSection[] = [
+      {
+        id: "system.selection-edit",
+        title: "Edit",
+        order: 10,
+        items: [
+          {
+            kind: "command",
+            id: SYSTEM_CLIPBOARD_COPY_ACTION_ID,
+            actionId: SYSTEM_CLIPBOARD_COPY_ACTION_ID,
+            label: "Copy",
+            icon: "copy",
+            shortcut: "⌘C",
+            dataUi: "context-menu-copy-selection-button",
+          },
+          {
+            kind: "command",
+            id: SYSTEM_CLIPBOARD_CUT_ACTION_ID,
+            actionId: SYSTEM_CLIPBOARD_CUT_ACTION_ID,
+            label: "Cut",
+            icon: "scissors",
+            shortcut: "⌘X",
+            dataUi: "context-menu-cut-selection-button",
+          },
+          {
+            kind: "command",
+            id: SYSTEM_SELECTION_DUPLICATE_ACTION_ID,
+            actionId: SYSTEM_SELECTION_DUPLICATE_ACTION_ID,
+            label: "Duplicate",
+            icon: "copy-plus",
+            shortcut: "⌘D",
+            dataUi: "context-menu-duplicate-selection-button",
+          },
+          {
+            kind: "separator",
+            id: "system.selection-clipboard-separator",
+          },
+          {
+            kind: "command",
+            id: SYSTEM_SELECTION_GROUP_ACTION_ID,
+            actionId: SYSTEM_SELECTION_GROUP_ACTION_ID,
+            label: "Group",
+            icon: "group",
+            dataUi: "context-menu-group-selection-button",
+          },
+          {
+            kind: "command",
+            id: SYSTEM_SELECTION_UNGROUP_ACTION_ID,
+            actionId: SYSTEM_SELECTION_UNGROUP_ACTION_ID,
+            label: "Ungroup",
+            icon: "ungroup",
+            dataUi: "context-menu-ungroup-selection-button",
+          },
+          {
+            kind: "command",
+            id: SYSTEM_SELECTION_DELETE_ACTION_ID,
+            actionId: SYSTEM_SELECTION_DELETE_ACTION_ID,
+            label: "Delete selection",
+            icon: "trash-2",
+            tone: "destructive",
+            dataUi: "context-menu-delete-selection-button",
+          },
+        ],
+      },
+    ];
+
+    if (context.selection.canResetRotation || context.selection.count > 0) {
+      sections.push({
+        id: "system.selection-transform",
+        title: "Transform",
+        order: 20,
+        items: [
+          {
+            kind: "command",
+            id: "system.selection.reset-rotation",
+            actionId: "system.selection.reset-rotation",
+            label: "Reset rotation",
+            icon: "rotate-ccw",
+            dataUi: "context-menu-reset-rotation-button",
+          },
+          {
+            kind: "command",
+            id: "system.selection.flip-horizontal",
+            actionId: "system.selection.flip-horizontal",
+            label: "Flip horizontal",
+            icon: "flip-horizontal-2",
+            dataUi: "context-menu-flip-horizontal-button",
+          },
+          {
+            kind: "command",
+            id: "system.selection.flip-vertical",
+            actionId: "system.selection.flip-vertical",
+            label: "Flip vertical",
+            icon: "flip-vertical-2",
+            dataUi: "context-menu-flip-vertical-button",
+          },
+        ],
+      });
+    }
+
+    if (showGenericOrderActions) {
+      sections.push({
+        id: "system.selection-arrange",
+        title: "Arrange",
+        order: 30,
+        items: [
+          {
+            kind: "command",
+            id: "system.selection.bring-to-front",
+            actionId: "system.selection.bring-to-front",
+            label: "Bring to front",
+            icon: "chevrons-up",
+            dataUi: "context-menu-bring-to-front-button",
+          },
+          {
+            kind: "command",
+            id: "system.selection.bring-forward",
+            actionId: "system.selection.bring-forward",
+            label: "Bring forward",
+            icon: "move-up",
+            dataUi: "context-menu-bring-forward-button",
+          },
+          {
+            kind: "command",
+            id: "system.selection.send-backward",
+            actionId: "system.selection.send-backward",
+            label: "Send backward",
+            icon: "move-down",
+            dataUi: "context-menu-send-backward-button",
+          },
+          {
+            kind: "command",
+            id: "system.selection.send-to-back",
+            actionId: "system.selection.send-to-back",
+            label: "Send to back",
+            icon: "chevrons-down",
+            dataUi: "context-menu-send-to-back-button",
+          },
+        ],
+      });
+    }
+
+    return sections;
+  },
+};
+
+const systemCanvasContextMenuContribution: ContextMenuContribution = {
+  id: "system.canvas-context-menu",
+  target: "canvas",
+  order: 1000,
+  actionIds: [
+    SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID,
+    SYSTEM_CLIPBOARD_PASTE_AT_POINT_ACTION_ID,
+    SYSTEM_SELECTION_SELECT_ALL_ACTION_ID,
+    SYSTEM_VIEW_ZOOM_IN_ACTION_ID,
+    SYSTEM_VIEW_ZOOM_OUT_ACTION_ID,
+    SYSTEM_VIEW_RESET_ZOOM_ACTION_ID,
+  ],
+  getSections() {
+    return [
+      {
+        id: "system.canvas-edit",
+        title: "Edit",
+        order: 5,
+        items: [
+          {
+            kind: "command",
+            id: SYSTEM_CLIPBOARD_PASTE_AT_POINT_ACTION_ID,
+            actionId: SYSTEM_CLIPBOARD_PASTE_AT_POINT_ACTION_ID,
+            label: "Paste here",
+            icon: "clipboard-paste",
+            shortcut: "⌘V",
+            dataUi: "context-menu-paste-here-button",
+          },
+          {
+            kind: "command",
+            id: SYSTEM_SELECTION_SELECT_ALL_ACTION_ID,
+            actionId: SYSTEM_SELECTION_SELECT_ALL_ACTION_ID,
+            label: "Select all",
+            icon: "scan",
+            shortcut: "⌘A",
+            dataUi: "context-menu-select-all-button",
+          },
+        ],
+      },
+      {
+        id: "system.canvas-view",
+        title: "View",
+        order: 10,
+        items: [
+          {
+            kind: "command",
+            id: SYSTEM_VIEW_ZOOM_IN_ACTION_ID,
+            actionId: SYSTEM_VIEW_ZOOM_IN_ACTION_ID,
+            label: "Zoom in",
+            icon: "plus",
+            dataUi: "context-menu-zoom-in-button",
+          },
+          {
+            kind: "command",
+            id: SYSTEM_VIEW_ZOOM_OUT_ACTION_ID,
+            actionId: SYSTEM_VIEW_ZOOM_OUT_ACTION_ID,
+            label: "Zoom out",
+            icon: "minus",
+            dataUi: "context-menu-zoom-out-button",
+          },
+          {
+            kind: "command",
+            id: SYSTEM_VIEW_RESET_ZOOM_ACTION_ID,
+            actionId: SYSTEM_VIEW_RESET_ZOOM_ACTION_ID,
+            label: "Reset zoom",
+            icon: "rotate-ccw",
+            dataUi: "context-menu-reset-zoom-button",
+          },
+        ],
+      },
+      {
+        id: "system.canvas-tools",
+        title: "Tools",
+        order: 20,
+        items: [
+          {
+            kind: "command",
+            id: "system.canvas.select-tool",
+            actionId: SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID,
+            value: "select",
+            label: "Select tool",
+            icon: "mouse-pointer-2",
+            shortcut: "V",
+            dataUi: "context-menu-select-tool-button",
+          },
+          {
+            kind: "command",
+            id: "system.canvas.hand-tool",
+            actionId: SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID,
+            value: "hand",
+            label: "Hand tool",
+            icon: "hand",
+            shortcut: "H",
+            dataUi: "context-menu-hand-tool-button",
+          },
+        ],
+      },
+    ];
+  },
+};
+
+export function registerSystemContextMenuContributions(
+  pluginHostRuntime: CanvasPluginHostRuntime,
+): void {
+  for (const action of systemContextMenuActions) {
+    pluginHostRuntime.toolbarRegistry.registerHostAction(action);
+  }
+  pluginHostRuntime.contextMenuRegistry.registerContribution(
+    systemSelectionContextMenuContribution,
+  );
+  pluginHostRuntime.contextMenuRegistry.registerContribution(
+    systemCanvasContextMenuContribution,
+  );
+}
+
+export function createContextMenuContext({
+  editor,
+  menu,
+}: {
+  editor: Editor;
+  menu: ContextMenuContext["menu"];
+}): ContextMenuContext {
+  const toolState = editor.toolStateSignal.get();
+  const selectionState = editor.selectionStateSignal.get();
+  return {
+    ...createToolbarContext({
+      editor,
+      selectionState,
+      toolState,
+    }),
+    menu,
+  };
+}
+
+export function getContextMenuContributionTarget(
+  target: ContextMenuTarget,
+  editor: Editor,
+): ContextMenuContributionTarget {
+  if (target.type === "canvas") {
+    return "canvas";
+  }
+  const selectedShapeIds = editor.getSelectedShapeIds();
+  return selectedShapeIds.length > 0 ? "selection" : "shape";
+}
+
+export function runContextMenuAction({
+  actionId,
+  context,
+  pluginHostRuntime,
+  value,
+}: {
+  actionId: string;
+  context: ContextMenuContext;
+  pluginHostRuntime: CanvasPluginHostRuntime;
+  value?: ToolbarActionValue;
+}): void {
+  const action = pluginHostRuntime.toolbarRegistry.getAction(actionId);
+  if (!action || action.isVisible?.(context) === false) {
+    return;
+  }
+  if (action.isEnabled?.(context) === false) {
+    return;
+  }
+  action.run({
+    context,
+    value: value !== undefined ? value : (action.getValue?.(context) ?? null),
+  });
+}
+
+function isSingleSelectedFrameChild(context: ContextMenuContext): boolean {
+  const [shape] = context.selection.selectedShapes;
+  if (context.selection.count !== 1 || !shape?.parentId.startsWith("shape:")) {
+    return false;
+  }
+  return context.editor.getShape(shape.parentId as ShapeId)?.type === "frame";
+}

package/_vendor/canvas-product-react/capabilities/context-menu/useContextMenuSurface.ts

@@ -0,0 +1,59 @@
+import { useMemo } from "react";
+import { useValue } from "@land/canvas-react";
+import type {
+  ContextMenuContext,
+  ContextMenuOpenSnapshot,
+  ContextMenuSection,
+  Editor,
+} from "@land/canvas-core";
+import type { CanvasPluginHostRuntime } from "@land/canvas-react/host";
+import {
+  createContextMenuContext,
+  getContextMenuContributionTarget,
+} from "./systemContextMenu";
+
+export interface ContextMenuSurface {
+  context: ContextMenuContext | null;
+  openSnapshot: ContextMenuOpenSnapshot | null;
+  sections: readonly ContextMenuSection[];
+}
+
+export function useContextMenuSurface({
+  editor,
+  openSnapshot,
+  pluginHostRuntime,
+}: {
+  editor: Editor;
+  openSnapshot: ContextMenuOpenSnapshot | null;
+  pluginHostRuntime: CanvasPluginHostRuntime;
+}): ContextMenuSurface {
+  useValue(editor.selectionStateSignal);
+  useValue(editor.toolStateSignal);
+
+  return useMemo(() => {
+    if (!openSnapshot) {
+      return {
+        context: null,
+        openSnapshot: null,
+        sections: [],
+      };
+    }
+
+    const context = createContextMenuContext({
+      editor,
+      menu: openSnapshot,
+    });
+    const target = getContextMenuContributionTarget(
+      openSnapshot.target,
+      editor,
+    );
+    return {
+      context,
+      openSnapshot,
+      sections: pluginHostRuntime.contextMenuRegistry.getSections(
+        target,
+        context,
+      ),
+    };
+  }, [editor, openSnapshot, pluginHostRuntime]);
+}