@yuzhouu/canvas-kit 0.1.2 → 0.1.4

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

@@ -1,156 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,490 +0,0 @@
-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 });
-}