@yuzhouu/canvas-kit 0.1.2

package/_vendor/canvas-product-react/capabilities/export/useSvgExport.ts

@@ -0,0 +1,156 @@
+import { useCallback, useState } from "react";
+import type {
+  Editor,
+  ExportIntegrityReport,
+  ShapeCapabilityManifest,
+  ShapeId,
+  SvgExportSkippedShape,
+} from "@land/canvas-core";
+
+export interface SvgAssetInliner {
+  inline(input: {
+    editor: Editor;
+    exportedShapeIds: readonly ShapeId[];
+    svg: string;
+  }): Promise<string>;
+}
+
+export type ExportStatus = {
+  tone: "success" | "warning" | "error";
+  title: string;
+  details: string;
+  integrity: ExportIntegrityReport;
+  capabilityManifest: ShapeCapabilityManifest;
+};
+
+export interface SvgExportResult {
+  status: ExportStatus;
+  svg: string | null;
+  exportedShapeIds: readonly ShapeId[];
+  skippedShapes: readonly SvgExportSkippedShape[];
+}
+
+export interface SvgExportControls {
+  status: ExportStatus | null;
+  exportSvg(shapeIds: readonly ShapeId[]): Promise<SvgExportResult>;
+}
+
+export function useSvgExport({
+  assetInliners = [],
+  editor,
+}: {
+  assetInliners?: readonly SvgAssetInliner[];
+  editor: Editor;
+}): SvgExportControls {
+  const [status, setStatus] = useState<ExportStatus | null>(null);
+  const exportSvg = useCallback(
+    async (shapeIds: readonly ShapeId[]): Promise<SvgExportResult> => {
+      const repair = editor.repairExportIntegrity(shapeIds);
+      const result = editor.getSvgString(shapeIds, { padding: 16 });
+      const integrity = editor.getExportIntegrityReport(shapeIds);
+      const capabilityManifest = editor.getShapeCapabilityManifest();
+      const nextStatus = getExportStatus({ capabilityManifest, integrity });
+      setStatus(nextStatus);
+
+      if (repair.before.issues.length > 0 || integrity.issues.length > 0) {
+        console.warn("SVG export integrity report", {
+          before: repair.before,
+          after: repair.after,
+          final: integrity,
+        });
+      }
+
+      if (!result) {
+        return {
+          status: nextStatus,
+          svg: null,
+          exportedShapeIds: [],
+          skippedShapes: [],
+        };
+      }
+      if (result.skippedShapes.length > 0) {
+        console.warn("Skipped shapes during SVG export", result.skippedShapes);
+      }
+
+      let svg = result.svg;
+      for (const inliner of assetInliners) {
+        svg = await inliner.inline({
+          editor,
+          exportedShapeIds: result.exportedShapeIds,
+          svg,
+        });
+      }
+
+      return {
+        status: nextStatus,
+        svg,
+        exportedShapeIds: result.exportedShapeIds,
+        skippedShapes: result.skippedShapes,
+      };
+    },
+    [assetInliners, editor],
+  );
+
+  return {
+    status,
+    exportSvg,
+  };
+}
+
+function formatCountMap(counts: Partial<Record<string, number>>): string {
+  const entries = Object.entries(counts).filter(
+    (entry): entry is [string, number] => typeof entry[1] === "number",
+  );
+  if (entries.length === 0) {
+    return "none";
+  }
+  return entries.map(([kind, count]) => `${kind} ${count}`).join(", ");
+}
+
+function countExportIntegrityIssues(
+  integrity: ExportIntegrityReport,
+): Partial<Record<string, number>> {
+  const counts: Partial<Record<string, number>> = {};
+  for (const issue of integrity.issues) {
+    counts[issue.kind] = (counts[issue.kind] ?? 0) + 1;
+  }
+  return counts;
+}
+
+function getExportStatus({
+  capabilityManifest,
+  integrity,
+}: {
+  capabilityManifest: ShapeCapabilityManifest;
+  integrity: ExportIntegrityReport;
+}): ExportStatus {
+  const issues = formatCountMap(countExportIntegrityIssues(integrity));
+
+  if (integrity.fatalIssueCount === 0 && integrity.issues.length === 0) {
+    return {
+      tone: "success",
+      title: "SVG export ready",
+      details: `${integrity.requestedShapeIds.length} shape(s) ready. Issues: ${issues}.`,
+      integrity,
+      capabilityManifest,
+    };
+  }
+
+  if (integrity.canExport) {
+    return {
+      tone: "warning",
+      title: "SVG export repaired",
+      details: `${integrity.requestedShapeIds.length} shape(s) exportable. Issues: ${issues}.`,
+      integrity,
+      capabilityManifest,
+    };
+  }
+
+  return {
+    tone: "error",
+    title: "SVG export blocked",
+    details: `Fatal export issue(s): ${issues}.`,
+    integrity,
+    capabilityManifest,
+  };
+}

package/_vendor/canvas-product-react/capabilities/history/useHistoryControls.ts

@@ -0,0 +1,23 @@
+import { useValue } from "@land/canvas-react";
+import type { Editor } from "@land/canvas-core";
+
+export interface HistoryControls {
+  canUndo: boolean;
+  canRedo: boolean;
+  undo(): void;
+  redo(): void;
+}
+
+export function useHistoryControls(editor: Editor): HistoryControls {
+  const historyState = useValue(editor.historyStateSignal);
+  return {
+    canUndo: historyState.canUndo,
+    canRedo: historyState.canRedo,
+    undo() {
+      editor.undo();
+    },
+    redo() {
+      editor.redo();
+    },
+  };
+}

package/_vendor/canvas-product-react/capabilities/pages/usePageControls.ts

@@ -0,0 +1,41 @@
+import { useValue } from "@land/canvas-react";
+import type { Editor, PageId, PageRecord } from "@land/canvas-core";
+
+export interface PageControls {
+  pages: readonly PageRecord[];
+  currentPage: PageRecord | null;
+  currentPageId: PageId;
+  canDeleteCurrentPage: boolean;
+  createPage(): void;
+  deleteCurrentPage(): void;
+  renameCurrentPage(nextName: string): void;
+  selectPage(pageId: PageId): void;
+}
+
+export function usePageControls(editor: Editor): PageControls {
+  const pageState = useValue(editor.pageStateSignal);
+  return {
+    pages: pageState.pages,
+    currentPage: pageState.currentPage,
+    currentPageId: pageState.currentPageId,
+    canDeleteCurrentPage: pageState.canDeleteCurrentPage,
+    createPage() {
+      editor.createPageAndSelect(undefined, "user");
+    },
+    deleteCurrentPage() {
+      if (!pageState.currentPage) {
+        return;
+      }
+      editor.deletePage(pageState.currentPage.id, "user");
+    },
+    renameCurrentPage(nextName) {
+      if (!pageState.currentPage) {
+        return;
+      }
+      editor.renamePage(pageState.currentPage.id, nextName, "user");
+    },
+    selectPage(pageId) {
+      editor.selectPage(pageId, "user");
+    },
+  };
+}

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

@@ -0,0 +1,490 @@
+import {
+  SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID,
+  TOGGLE_TOOL_LOCKED_TOOLBAR_ACTION_ID,
+  type Editor,
+  type ShapeId,
+  type ToolbarAction,
+  type ToolbarContext,
+  type ToolbarContribution,
+  type ToolbarGroup,
+} from "@land/canvas-core";
+import { type CanvasPluginHostRuntime } from "@land/canvas-react/host";
+
+export const SYSTEM_SELECTION_DELETE_ACTION_ID = "system.selection.delete";
+export const SYSTEM_SELECTION_GROUP_ACTION_ID = "system.selection.group";
+export const SYSTEM_SELECTION_UNGROUP_ACTION_ID = "system.selection.ungroup";
+
+const systemToolbarActions: readonly ToolbarAction[] = [
+  {
+    id: SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID,
+    getValue(context) {
+      return context.tool.activeToolId;
+    },
+    run({ context, value }) {
+      if (typeof value !== "string" || !context.editor.tools.hasTool(value)) {
+        return;
+      }
+      context.editor.setActiveTool(value, "system");
+    },
+  },
+  {
+    id: TOGGLE_TOOL_LOCKED_TOOLBAR_ACTION_ID,
+    getValue(context) {
+      return context.tool.isToolLocked;
+    },
+    run({ context }) {
+      context.editor.toggleToolLocked("system");
+    },
+  },
+  {
+    id: SYSTEM_SELECTION_GROUP_ACTION_ID,
+    isVisible(context) {
+      return context.selection.count > 1;
+    },
+    isEnabled(context) {
+      return context.editor.canGroupSelection();
+    },
+    run({ context }) {
+      context.editor.groupSelection("user");
+    },
+  },
+  {
+    id: SYSTEM_SELECTION_UNGROUP_ACTION_ID,
+    isVisible(context) {
+      return context.editor.canUngroupSelection();
+    },
+    isEnabled(context) {
+      return context.editor.canUngroupSelection();
+    },
+    run({ context }) {
+      context.editor.ungroupSelection("user");
+    },
+  },
+  {
+    id: "system.selection.reset-rotation",
+    isVisible(context) {
+      return context.selection.canResetRotation;
+    },
+    run({ context }) {
+      context.editor.resetSelectionRotation("user");
+    },
+  },
+  {
+    id: "system.selection.flip-horizontal",
+    isVisible(context) {
+      return context.selection.count > 0;
+    },
+    isEnabled(context) {
+      return context.selection.count > 0;
+    },
+    run({ context }) {
+      context.editor.flipSelection("horizontal", "user");
+    },
+  },
+  {
+    id: "system.selection.flip-vertical",
+    isVisible(context) {
+      return context.selection.count > 0;
+    },
+    isEnabled(context) {
+      return context.selection.count > 0;
+    },
+    run({ context }) {
+      context.editor.flipSelection("vertical", "user");
+    },
+  },
+  {
+    id: "system.selection.send-to-back",
+    isVisible(context) {
+      return (
+        context.selection.count > 0 &&
+        !isSingleSelectedFrameChild(context)
+      );
+    },
+    isEnabled(context) {
+      return context.editor.canMoveSelectionInParentOrder("backward");
+    },
+    run({ context }) {
+      context.editor.moveSelectionToParentOrderEdge("back", "user");
+    },
+  },
+  {
+    id: "system.selection.send-backward",
+    isVisible(context) {
+      return (
+        context.selection.count > 0 &&
+        !isSingleSelectedFrameChild(context)
+      );
+    },
+    isEnabled(context) {
+      return context.editor.canMoveSelectionInParentOrder("backward");
+    },
+    run({ context }) {
+      context.editor.moveSelectionInParentOrder("backward", "user");
+    },
+  },
+  {
+    id: "system.selection.bring-forward",
+    isVisible(context) {
+      return (
+        context.selection.count > 0 &&
+        !isSingleSelectedFrameChild(context)
+      );
+    },
+    isEnabled(context) {
+      return context.editor.canMoveSelectionInParentOrder("forward");
+    },
+    run({ context }) {
+      context.editor.moveSelectionInParentOrder("forward", "user");
+    },
+  },
+  {
+    id: "system.selection.bring-to-front",
+    isVisible(context) {
+      return (
+        context.selection.count > 0 &&
+        !isSingleSelectedFrameChild(context)
+      );
+    },
+    isEnabled(context) {
+      return context.editor.canMoveSelectionInParentOrder("forward");
+    },
+    run({ context }) {
+      context.editor.moveSelectionToParentOrderEdge("front", "user");
+    },
+  },
+  {
+    id: SYSTEM_SELECTION_DELETE_ACTION_ID,
+    isEnabled(context) {
+      return context.selection.count > 0;
+    },
+    run({ context }) {
+      context.editor.deleteSelection("user");
+    },
+  },
+];
+
+function isSingleSelectedFrameChild(context: ToolbarContext): 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";
+}
+
+const systemSelectToolToolbarContribution: ToolbarContribution = {
+  id: "system.select-tool-toolbar",
+  surface: "tool",
+  placement: "chrome",
+  order: 0,
+  actionIds: [SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID],
+  getGroups() {
+    return [
+      {
+        id: "system.select-tool",
+        items: [
+          {
+            kind: "button",
+            id: "system.select-tool",
+            actionId: SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID,
+            value: "select",
+            label: "Select",
+            shortcut: "V",
+            icon: "mouse-pointer-2",
+            dataUi: "select-tool-button",
+          },
+          {
+            kind: "button",
+            id: "system.hand-tool",
+            actionId: SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID,
+            value: "hand",
+            label: "Hand",
+            shortcut: "H",
+            icon: "hand",
+            dataUi: "hand-tool-button",
+          },
+        ],
+      },
+    ];
+  },
+};
+
+const systemToolLockToolbarContribution: ToolbarContribution = {
+  id: "system.tool-lock-toolbar",
+  surface: "tool",
+  placement: "chrome",
+  order: 1000,
+  actionIds: [TOGGLE_TOOL_LOCKED_TOOLBAR_ACTION_ID],
+  getGroups(context) {
+    return [
+      {
+        id: "system.tool-lock",
+        items: [
+          {
+            kind: "separator",
+            id: "system.tool-lock-separator",
+          },
+          {
+            kind: "button",
+            id: "system.tool-lock",
+            actionId: TOGGLE_TOOL_LOCKED_TOOLBAR_ACTION_ID,
+            value: true,
+            label: context.tool.isToolLocked ? "Unlock tool" : "Lock tool",
+            icon: "lock",
+            dataUi: "tool-lock-button",
+          },
+        ],
+      },
+    ];
+  },
+};
+
+const systemSelectionToolbarContribution: ToolbarContribution = {
+  id: "system.selection-toolbar",
+  surface: "selection",
+  order: 1000,
+  actionIds: [
+    "system.selection.reset-rotation",
+    "system.selection.flip-horizontal",
+    "system.selection.flip-vertical",
+    "system.selection.send-to-back",
+    "system.selection.send-backward",
+    "system.selection.bring-forward",
+    "system.selection.bring-to-front",
+    SYSTEM_SELECTION_GROUP_ACTION_ID,
+    SYSTEM_SELECTION_UNGROUP_ACTION_ID,
+    SYSTEM_SELECTION_DELETE_ACTION_ID,
+  ],
+  getGroups(context) {
+    const showGenericOrderActions =
+      context.selection.count > 0 && !isSingleSelectedFrameChild(context);
+    return [
+      {
+        id: "system.selection-actions",
+        items: [
+          ...(context.selection.canResetRotation
+            ? [
+                {
+                  kind: "button" as const,
+                  id: "system.selection.reset-rotation",
+                  actionId: "system.selection.reset-rotation",
+                  label: context.selection.isMixedFrameAndPointHandleSelection
+                    ? "Reset shape rotation"
+                    : "Reset rotation",
+                  icon: "rotate-ccw",
+                  dataUi: "reset-selection-rotation-button",
+                },
+                {
+                  kind: "separator" as const,
+                  id: "system.selection.reset-delete-separator",
+                },
+              ]
+            : []),
+          {
+            kind: "button" as const,
+            id: "system.selection.flip-horizontal",
+            actionId: "system.selection.flip-horizontal",
+            label: "Flip horizontal",
+            icon: "flip-horizontal-2",
+            dataUi: "flip-selection-horizontal-button",
+          },
+          {
+            kind: "button" as const,
+            id: "system.selection.flip-vertical",
+            actionId: "system.selection.flip-vertical",
+            label: "Flip vertical",
+            icon: "flip-vertical-2",
+            dataUi: "flip-selection-vertical-button",
+          },
+          {
+            kind: "separator" as const,
+            id: "system.selection.flip-order-separator",
+          },
+          ...(showGenericOrderActions
+            ? [
+                {
+                  kind: "button" as const,
+                  id: "system.selection.send-to-back",
+                  actionId: "system.selection.send-to-back",
+                  label: "Send to back",
+                  icon: "chevrons-down",
+                  dataUi: "send-selection-to-back-button",
+                },
+                {
+                  kind: "button" as const,
+                  id: "system.selection.send-backward",
+                  actionId: "system.selection.send-backward",
+                  label: "Send backward",
+                  icon: "move-down",
+                  dataUi: "send-selection-backward-button",
+                },
+                {
+                  kind: "button" as const,
+                  id: "system.selection.bring-forward",
+                  actionId: "system.selection.bring-forward",
+                  label: "Bring forward",
+                  icon: "move-up",
+                  dataUi: "bring-selection-forward-button",
+                },
+                {
+                  kind: "button" as const,
+                  id: "system.selection.bring-to-front",
+                  actionId: "system.selection.bring-to-front",
+                  label: "Bring to front",
+                  icon: "chevrons-up",
+                  dataUi: "bring-selection-to-front-button",
+                },
+                {
+                  kind: "separator" as const,
+                  id: "system.selection.order-delete-separator",
+                },
+              ]
+            : []),
+          {
+            kind: "button" as const,
+            id: SYSTEM_SELECTION_GROUP_ACTION_ID,
+            actionId: SYSTEM_SELECTION_GROUP_ACTION_ID,
+            label: "Group",
+            icon: "group",
+            dataUi: "group-selection-button",
+          },
+          {
+            kind: "button" as const,
+            id: SYSTEM_SELECTION_UNGROUP_ACTION_ID,
+            actionId: SYSTEM_SELECTION_UNGROUP_ACTION_ID,
+            label: "Ungroup",
+            icon: "ungroup",
+            dataUi: "ungroup-selection-button",
+          },
+          {
+            kind: "separator" as const,
+            id: "system.selection.group-delete-separator",
+          },
+          {
+            kind: "button",
+            id: SYSTEM_SELECTION_DELETE_ACTION_ID,
+            actionId: SYSTEM_SELECTION_DELETE_ACTION_ID,
+            label: "Delete selection",
+            icon: "trash-2",
+            dataUi: "delete-selection-toolbar-button",
+          },
+        ],
+      },
+    ];
+  },
+};
+
+export function registerSystemToolbarContributions(
+  pluginHostRuntime: CanvasPluginHostRuntime,
+) {
+  for (const action of systemToolbarActions) {
+    pluginHostRuntime.toolbarRegistry.registerAction(action);
+  }
+  pluginHostRuntime.toolbarRegistry.registerContribution(
+    systemSelectToolToolbarContribution,
+  );
+  pluginHostRuntime.toolbarRegistry.registerContribution(
+    systemToolLockToolbarContribution,
+  );
+  pluginHostRuntime.toolbarRegistry.registerContribution(
+    systemSelectionToolbarContribution,
+  );
+}
+
+export function createToolbarContext({
+  editor,
+  toolState,
+  selectionState,
+}: {
+  editor: Editor;
+  toolState: {
+    activeToolId: string;
+    isToolLocked: boolean;
+  };
+  selectionState: {
+    count: number;
+    singleShapeType: ToolbarContext["selection"]["singleShapeType"];
+    commonShapeType: ToolbarContext["selection"]["commonShapeType"];
+    canResetSelectionRotation: boolean;
+    isMixedFrameAndPointHandleSelection: boolean;
+  };
+}): ToolbarContext {
+  return {
+    editor,
+    selection: {
+      selectedShapeIds: editor.getSelectedShapeIds(),
+      selectedShapes: editor.getSelectedShapes(),
+      count: selectionState.count,
+      singleShapeType: selectionState.singleShapeType,
+      commonShapeType: selectionState.commonShapeType,
+      canResetRotation: selectionState.canResetSelectionRotation,
+      isMixedFrameAndPointHandleSelection:
+        selectionState.isMixedFrameAndPointHandleSelection,
+    },
+    tool: {
+      activeToolId: toolState.activeToolId,
+      isToolLocked: toolState.isToolLocked,
+    },
+  };
+}
+
+export function getActiveToolLabel(
+  groups: readonly ToolbarGroup[],
+  activeToolId: string,
+): string {
+  for (const group of groups) {
+    for (const item of group.items) {
+      if (
+        item.kind === "button" &&
+        item.actionId === SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID &&
+        item.value === activeToolId
+      ) {
+        return item.label;
+      }
+    }
+  }
+  return activeToolId;
+}
+
+export function getSelectionToolbarTitle({
+  commonShapeType,
+  count,
+  isMixedFrameAndPointHandleSelection,
+  singleShapeType,
+}: {
+  commonShapeType: string | null;
+  count: number;
+  isMixedFrameAndPointHandleSelection: boolean;
+  singleShapeType: string | null;
+}): string {
+  const shapeType = singleShapeType ?? commonShapeType;
+  if (!shapeType) {
+    return isMixedFrameAndPointHandleSelection
+      ? "Mixed selection"
+      : `${count} selected`;
+  }
+
+  const suffix = count > 1 ? ` (${count})` : "";
+  if (shapeType === "geo") return `Shape${suffix}`;
+  if (shapeType === "text") return `Text${suffix}`;
+  return `${shapeType.charAt(0).toUpperCase()}${shapeType.slice(1)}${suffix}`;
+}
+
+export function runToolbarAction({
+  context,
+  pluginHostRuntime,
+  actionId,
+}: {
+  context: ToolbarContext;
+  pluginHostRuntime: CanvasPluginHostRuntime;
+  actionId: string;
+}): void {
+  const action = pluginHostRuntime.toolbarRegistry.getAction(actionId);
+  if (!action || action.isVisible?.(context) === false) {
+    return;
+  }
+  if (action.isEnabled?.(context) === false) {
+    return;
+  }
+  action.run({ context, value: action.getValue?.(context) ?? null });
+}