@yuzhouu/canvas-kit 0.1.2

package/_vendor/plugin-image-product-react/imageHostActions.ts

@@ -0,0 +1,438 @@
+import {
+  type AssetId,
+  type Editor,
+  type ShapeId,
+  Vec,
+} from "@land/canvas-core";
+import type { CanvasPluginHostRuntime } from "@land/canvas-react/host";
+import {
+  IMAGE_DOWNLOAD_TOOLBAR_ACTION_ID,
+  IMAGE_INSERT_TOOLBAR_ACTION_ID,
+  IMAGE_REPLACE_TOOLBAR_ACTION_ID,
+  isImageAssetRecord,
+  isImageShapeRecord,
+  type ImageAssetRecord,
+} from "@land/plugin-image";
+import {
+  deleteImageBlob,
+  getImageAssetStorageKey,
+  readImageBlob,
+  writeImageBlob,
+  type ImageObjectUrlStore,
+} from "./imageBlobStore";
+import type { ImageToolbarHostBridge } from "./imageToolbarHostBridge";
+
+interface LocalImageAssetInput {
+  name: string;
+  storageKey: string;
+  mimeType: string;
+  fileSize: number;
+  width: number;
+  height: number;
+}
+
+export type ImageImportSource = "file-picker" | "paste" | "drop";
+
+export interface InsertImageFileInput {
+  editor: Editor;
+  file: File;
+  imageObjectUrls: ImageObjectUrlStore;
+  pagePoint?: Vec;
+  persistEditorSnapshot?: (editor: Editor) => Promise<void>;
+  source: ImageImportSource;
+}
+
+export interface ReplaceSelectedImageFileInput {
+  editor: Editor;
+  file: File;
+  imageObjectUrls: ImageObjectUrlStore;
+  persistEditorSnapshot?: (editor: Editor) => Promise<void>;
+}
+
+function decodeImageSize(
+  src: string,
+): Promise<{ width: number; height: number }> {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.addEventListener("load", () => {
+      resolve({
+        width: image.naturalWidth || image.width,
+        height: image.naturalHeight || image.height,
+      });
+    });
+    image.addEventListener("error", () => {
+      reject(new Error("Could not decode image file."));
+    });
+    image.src = src;
+  });
+}
+
+async function getLocalImageAssetInput(
+  file: File,
+): Promise<LocalImageAssetInput> {
+  const temporaryUrl = URL.createObjectURL(file);
+  const size = await decodeImageSize(temporaryUrl).finally(() => {
+    URL.revokeObjectURL(temporaryUrl);
+  });
+  const { storageKey } = await writeImageBlob(file);
+  return {
+    name: file.name || "Image",
+    storageKey,
+    mimeType: file.type || "image/png",
+    fileSize: file.size,
+    width: size.width,
+    height: size.height,
+  };
+}
+
+function createImageAsset(
+  editor: Editor,
+  input: LocalImageAssetInput,
+): ImageAssetRecord {
+  return editor.commands.createAsset(
+    {
+      type: "image",
+      props: {
+        w: input.width,
+        h: input.height,
+        name: input.name,
+        storageKey: input.storageKey,
+        mimeType: input.mimeType,
+        fileSize: input.fileSize,
+        isAnimated: input.mimeType === "image/gif",
+      },
+    },
+    { source: "user" },
+  ) as ImageAssetRecord;
+}
+
+function fitLocalImageSize({
+  height,
+  width,
+}: {
+  height: number;
+  width: number;
+}) {
+  const maxSize = 360;
+  const scale = Math.min(1, maxSize / Math.max(width, height));
+  return {
+    w: Math.max(24, Math.round(width * scale)),
+    h: Math.max(24, Math.round(height * scale)),
+  };
+}
+
+function isAssetReferenced(editor: Editor, assetId: AssetId): boolean {
+  return editor
+    .getDocumentSnapshot()
+    .records.some(
+      (record) =>
+        record.typeName === "shape" &&
+        (record.props as Record<string, unknown>).assetId === assetId,
+    );
+}
+
+export function getFirstImageFile(files: Iterable<File>): File | null {
+  for (const file of files) {
+    if (file.type.startsWith("image/")) {
+      return file;
+    }
+  }
+  return null;
+}
+
+export function getFirstImageFileFromDataTransfer(
+  dataTransfer: DataTransfer | null,
+): File | null {
+  if (!dataTransfer) {
+    return null;
+  }
+
+  const fileFromFiles = getFirstImageFile(dataTransfer.files);
+  if (fileFromFiles) {
+    return fileFromFiles;
+  }
+
+  for (const item of Array.from(dataTransfer.items)) {
+    if (item.kind !== "file" || !item.type.startsWith("image/")) {
+      continue;
+    }
+    const file = item.getAsFile();
+    if (file?.type.startsWith("image/")) {
+      return file;
+    }
+  }
+
+  return null;
+}
+
+export function hasImageFileItem(dataTransfer: DataTransfer | null): boolean {
+  if (!dataTransfer) {
+    return false;
+  }
+
+  return Array.from(dataTransfer.items).some(
+    (item) => item.kind === "file" && item.type.startsWith("image/"),
+  );
+}
+
+function getEditableEventTarget(target: EventTarget | null): HTMLElement | null {
+  return target instanceof HTMLElement ? target : null;
+}
+
+export function isEditableEventTarget(target: EventTarget | null): boolean {
+  const element = getEditableEventTarget(target);
+  if (!element) {
+    return false;
+  }
+
+  if (element.isContentEditable) {
+    return true;
+  }
+
+  if (element.closest('[contenteditable="true"]')) {
+    return true;
+  }
+
+  return (
+    element instanceof HTMLInputElement ||
+    element instanceof HTMLTextAreaElement ||
+    element instanceof HTMLSelectElement
+  );
+}
+
+export function getDropPagePoint(editor: Editor, event: DragEvent): Vec {
+  const canvasSurface = document.querySelector<HTMLElement>(
+    '[data-ui="canvas-surface"]',
+  );
+  if (!canvasSurface) {
+    return editor.screenToPage(new Vec(event.clientX, event.clientY));
+  }
+  const rect = canvasSurface.getBoundingClientRect();
+  return editor.screenToPage(
+    new Vec(event.clientX - rect.left, event.clientY - rect.top),
+  );
+}
+
+export async function insertImageFileIntoEditor({
+  editor,
+  file,
+  imageObjectUrls,
+  pagePoint,
+  persistEditorSnapshot,
+  source,
+}: InsertImageFileInput): Promise<ShapeId | null> {
+  if (!file.type.startsWith("image/")) {
+    return null;
+  }
+  const input = await getLocalImageAssetInput(file);
+  await imageObjectUrls.preload(input.storageKey);
+  let createdAssetId: AssetId | null = null;
+  try {
+    const asset = createImageAsset(editor, input);
+    createdAssetId = asset.id;
+    const size = fitLocalImageSize({
+      width: asset.props.w,
+      height: asset.props.h,
+    });
+    const viewportBounds = editor.viewportPageBoundsSignal.get();
+    const center =
+      pagePoint ??
+      viewportBounds?.center ??
+      editor.screenToPage(new Vec(360, 240));
+    const [shape] = editor.commands.createShapes(
+      [
+        {
+          type: "image",
+          x: Math.round(center.x - size.w / 2),
+          y: Math.round(center.y - size.h / 2),
+          props: {
+            ...size,
+            assetId: asset.id,
+            crop: null,
+            altText: input.name,
+          },
+        },
+      ],
+      { source: "user" },
+    );
+    if (shape) {
+      editor.commands.setSelectedShapeIds([shape.id], { source: "user" });
+      await persistEditorSnapshot?.(editor);
+      return shape.id;
+    }
+    return null;
+  } catch (error) {
+    if (createdAssetId) {
+      editor.commands.deleteAsset(createdAssetId, { source: "system" });
+    }
+    imageObjectUrls.release(input.storageKey);
+    await deleteImageBlob(input.storageKey);
+    throw error;
+  }
+}
+
+export async function replaceSelectedImageFromFile({
+  editor,
+  file,
+  imageObjectUrls,
+  persistEditorSnapshot,
+}: ReplaceSelectedImageFileInput): Promise<void> {
+  if (!file.type.startsWith("image/")) {
+    return;
+  }
+  const [shape] = editor.getSelectedShapes();
+  if (!isImageShapeRecord(shape) || shape.isLocked) {
+    return;
+  }
+  const previousAssetId = shape.props.assetId;
+  const input = await getLocalImageAssetInput(file);
+  await imageObjectUrls.preload(input.storageKey);
+  let createdAssetId: AssetId | null = null;
+  try {
+    const asset = createImageAsset(editor, input);
+    createdAssetId = asset.id;
+    editor.commands.updateShapes(
+      [
+        {
+          id: shape.id,
+          props: {
+            assetId: asset.id,
+            crop: null,
+            altText: input.name,
+          },
+        },
+      ],
+      { source: "user" },
+    );
+    if (previousAssetId && !isAssetReferenced(editor, previousAssetId)) {
+      editor.commands.deleteAsset(previousAssetId, { source: "user" });
+    }
+    editor.commands.setSelectedShapeIds([shape.id], { source: "user" });
+    await persistEditorSnapshot?.(editor);
+  } catch (error) {
+    if (createdAssetId) {
+      editor.commands.deleteAsset(createdAssetId, { source: "system" });
+    }
+    imageObjectUrls.release(input.storageKey);
+    await deleteImageBlob(input.storageKey);
+    throw error;
+  }
+}
+
+function downloadObjectUrl({
+  filename,
+  url,
+}: {
+  filename: string;
+  url: string;
+}) {
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  anchor.click();
+}
+
+async function downloadBlob({
+  blob,
+  filename,
+}: {
+  blob: Blob;
+  filename: string;
+}) {
+  const url = URL.createObjectURL(blob);
+  try {
+    downloadObjectUrl({ filename, url });
+  } finally {
+    window.setTimeout(() => URL.revokeObjectURL(url), 0);
+  }
+}
+
+export async function downloadSelectedImageOriginal({
+  editor,
+  imageObjectUrls,
+}: {
+  editor: Editor;
+  imageObjectUrls: ImageObjectUrlStore;
+}): Promise<void> {
+  const [shape] = editor.getSelectedShapes();
+  if (!isImageShapeRecord(shape) || !shape.props.assetId) {
+    return;
+  }
+  const asset = editor.getAsset(shape.props.assetId);
+  if (!isImageAssetRecord(asset)) {
+    return;
+  }
+  const storageKey = asset.props.storageKey;
+  const name =
+    typeof asset.props.name === "string" && asset.props.name.length > 0
+      ? asset.props.name
+      : "land-image";
+  if (!storageKey) {
+    return;
+  }
+  const blob = await readImageBlob(storageKey);
+  if (blob) {
+    await downloadBlob({ blob, filename: name });
+    return;
+  }
+  const url = imageObjectUrls.resolve(storageKey);
+  if (url) {
+    downloadObjectUrl({ filename: name, url });
+  }
+}
+
+export function registerImageToolbarActions({
+  hostBridge,
+  imageObjectUrls,
+  pluginHostRuntime,
+}: {
+  hostBridge: ImageToolbarHostBridge;
+  imageObjectUrls: ImageObjectUrlStore;
+  pluginHostRuntime: CanvasPluginHostRuntime;
+}): void {
+  pluginHostRuntime.toolbarRegistry.registerHostAction({
+    id: IMAGE_INSERT_TOOLBAR_ACTION_ID,
+    run() {
+      hostBridge.openInsertFilePicker();
+    },
+  });
+  pluginHostRuntime.toolbarRegistry.registerHostAction({
+    id: IMAGE_REPLACE_TOOLBAR_ACTION_ID,
+    isVisible(context) {
+      return (
+        context.selection.count === 1 &&
+        context.selection.singleShapeType === "image"
+      );
+    },
+    isEnabled(context) {
+      const [shape] = context.selection.selectedShapes;
+      return isImageShapeRecord(shape) && !shape.isLocked;
+    },
+    run() {
+      hostBridge.openReplaceFilePicker();
+    },
+  });
+  pluginHostRuntime.toolbarRegistry.registerHostAction({
+    id: IMAGE_DOWNLOAD_TOOLBAR_ACTION_ID,
+    isVisible(context) {
+      return (
+        context.selection.count === 1 &&
+        context.selection.singleShapeType === "image"
+      );
+    },
+    isEnabled(context) {
+      const [shape] = context.selection.selectedShapes;
+      return (
+        isImageShapeRecord(shape) &&
+        !!shape.props.assetId &&
+        !!getImageAssetStorageKey(context.editor, shape.props.assetId)
+      );
+    },
+    run({ context }) {
+      void downloadSelectedImageOriginal({
+        editor: context.editor,
+        imageObjectUrls,
+      });
+    },
+  });
+}

package/_vendor/plugin-image-product-react/imageProductApi.ts

@@ -0,0 +1,88 @@
+import type { Editor, ShapeId, Vec } from "@land/canvas-core";
+import {
+  createProductApiToken,
+  type CanvasProductRuntimeSetup,
+} from "@land/canvas-product-react";
+import { isImageShapeRecord } from "@land/plugin-image";
+import {
+  downloadSelectedImageOriginal,
+  insertImageFileIntoEditor,
+  replaceSelectedImageFromFile,
+  type ImageImportSource,
+} from "./imageHostActions";
+import { imageAssetServiceToken } from "./imageAssetService";
+
+export interface ImageInsertInput {
+  file: File;
+  pagePoint?: Vec;
+  source?: ImageImportSource;
+}
+
+export interface ImageReplaceInput {
+  file: File;
+}
+
+export interface ImageProductApi {
+  insertImage(input: ImageInsertInput): Promise<ShapeId | null>;
+  replaceSelectedImage(input: ImageReplaceInput): Promise<boolean>;
+  downloadSelectedImageOriginal(): Promise<void>;
+}
+
+export const imageProductApiToken =
+  createProductApiToken<ImageProductApi>("plugin-image.product-api");
+
+export interface ImageProductApiRuntimeOptions {
+  persistEditorSnapshot?: (editor: Editor) => Promise<void>;
+}
+
+export function registerImageProductApi({
+  persistEditorSnapshot,
+}: ImageProductApiRuntimeOptions = {}): CanvasProductRuntimeSetup {
+  return ({ apiRegistry, editor, services }) => {
+    if (apiRegistry.get(imageProductApiToken)) {
+      return;
+    }
+
+    const imageAssetService = services.get(imageAssetServiceToken);
+    if (!imageAssetService) {
+      return;
+    }
+
+    const imageApi: ImageProductApi = {
+      insertImage({ file, pagePoint, source = "file-picker" }) {
+        return insertImageFileIntoEditor({
+          editor,
+          file,
+          imageObjectUrls: imageAssetService.objectUrls,
+          pagePoint,
+          persistEditorSnapshot,
+          source,
+        });
+      },
+      async replaceSelectedImage({ file }) {
+        if (!file.type.startsWith("image/")) {
+          return false;
+        }
+        const [shape] = editor.getSelectedShapes();
+        if (!isImageShapeRecord(shape) || shape.isLocked) {
+          return false;
+        }
+        await replaceSelectedImageFromFile({
+          editor,
+          file,
+          imageObjectUrls: imageAssetService.objectUrls,
+          persistEditorSnapshot,
+        });
+        return true;
+      },
+      downloadSelectedImageOriginal() {
+        return downloadSelectedImageOriginal({
+          editor,
+          imageObjectUrls: imageAssetService.objectUrls,
+        });
+      },
+    };
+
+    apiRegistry.register(imageProductApiToken, imageApi);
+  };
+}

package/_vendor/plugin-image-product-react/imageToolbarHostBridge.ts

@@ -0,0 +1,48 @@
+import {
+  createProductServiceToken,
+  type ProductServiceFactory,
+} from "@land/canvas-product-react";
+
+export interface ImageToolbarHostBridgeHandlers {
+  openInsertFilePicker(): void;
+  openReplaceFilePicker(): void;
+}
+
+export class ImageToolbarHostBridge {
+  private handlers: ImageToolbarHostBridgeHandlers | null = null;
+
+  register(handlers: ImageToolbarHostBridgeHandlers): () => void {
+    this.handlers = handlers;
+    return () => {
+      if (this.handlers === handlers) {
+        this.handlers = null;
+      }
+    };
+  }
+
+  openInsertFilePicker(): void {
+    this.handlers?.openInsertFilePicker();
+  }
+
+  openReplaceFilePicker(): void {
+    this.handlers?.openReplaceFilePicker();
+  }
+}
+
+export function createImageToolbarHostBridge(): ImageToolbarHostBridge {
+  return new ImageToolbarHostBridge();
+}
+
+export const imageToolbarHostBridgeToken =
+  createProductServiceToken<ImageToolbarHostBridge>(
+    "plugin-image.toolbar-host-bridge",
+  );
+
+export function imageToolbarHostBridgeService(): ProductServiceFactory<ImageToolbarHostBridge> {
+  return {
+    token: imageToolbarHostBridgeToken,
+    create() {
+      return createImageToolbarHostBridge();
+    },
+  };
+}

package/_vendor/plugin-image-product-react/imageToolbarRuntime.ts

@@ -0,0 +1,21 @@
+import type {
+  CanvasProductRuntimeSetupContext,
+} from "@land/canvas-product-react";
+import { imageAssetServiceToken } from "./imageAssetService";
+import { registerImageToolbarActions } from "./imageHostActions";
+import { imageToolbarHostBridgeToken } from "./imageToolbarHostBridge";
+
+export function registerImageProductToolbarActions({
+  pluginHostRuntime,
+  services,
+}: CanvasProductRuntimeSetupContext): void {
+  const imageAssetService = services.get(imageAssetServiceToken);
+  const hostBridge = services.get(imageToolbarHostBridgeToken);
+  if (imageAssetService && hostBridge) {
+    registerImageToolbarActions({
+      hostBridge,
+      imageObjectUrls: imageAssetService.objectUrls,
+      pluginHostRuntime,
+    });
+  }
+}

package/_vendor/plugin-image-product-react/index.ts

@@ -0,0 +1,60 @@
+export { ImageImportController } from "./ImageImportController";
+export {
+  imageProductApiToken,
+  registerImageProductApi,
+} from "./imageProductApi";
+export type {
+  ImageInsertInput,
+  ImageProductApi,
+  ImageProductApiRuntimeOptions,
+  ImageReplaceInput,
+} from "./imageProductApi";
+export {
+  imageAssetServiceToken,
+  localImageAssetService,
+} from "./imageAssetService";
+export type { ImageAssetService } from "./imageAssetService";
+export { registerImageProductToolbarActions } from "./imageToolbarRuntime";
+export {
+  createImageToolbarHostBridge,
+  ImageToolbarHostBridge,
+  imageToolbarHostBridgeService,
+  imageToolbarHostBridgeToken,
+} from "./imageToolbarHostBridge";
+export type { ImageToolbarHostBridgeHandlers } from "./imageToolbarHostBridge";
+export {
+  cleanupUnreferencedImageBlobs,
+  createImageObjectUrlStore,
+  createImageStorageKey,
+  deleteImageBlob,
+  getAllImageBlobStorageKeys,
+  getImageAssetStorageKey,
+  getReferencedImageStorageKeys,
+  readImageBlob,
+  readImageBlobAsDataUrl,
+  writeImageBlob,
+} from "./imageBlobStore";
+export type {
+  ImageBlobWriteResult,
+  ImageObjectUrlStore,
+} from "./imageBlobStore";
+export {
+  downloadSelectedImageOriginal,
+  getDropPagePoint,
+  getFirstImageFile,
+  getFirstImageFileFromDataTransfer,
+  hasImageFileItem,
+  insertImageFileIntoEditor,
+  isEditableEventTarget,
+  registerImageToolbarActions,
+  replaceSelectedImageFromFile,
+} from "./imageHostActions";
+export type {
+  ImageImportSource,
+  InsertImageFileInput,
+  ReplaceSelectedImageFileInput,
+} from "./imageHostActions";
+export { createImageSvgAssetInliner } from "./svgImageAssetInliner";
+export { hasLegacyImageDataUrlSnapshot } from "./snapshotGuards";
+export { useImageImport } from "./useImageImport";
+export type { ImageImportControls } from "./useImageImport";

package/_vendor/plugin-image-product-react/snapshotGuards.ts

@@ -0,0 +1,33 @@
+export function hasLegacyImageDataUrlSnapshot(snapshot: unknown): boolean {
+  if (!snapshot || typeof snapshot !== "object") {
+    return false;
+  }
+  const records = (snapshot as { records?: unknown }).records;
+  if (!Array.isArray(records)) {
+    return false;
+  }
+
+  return records.some((record) => {
+    if (!record || typeof record !== "object") {
+      return false;
+    }
+    const candidate = record as {
+      typeName?: unknown;
+      type?: unknown;
+      props?: unknown;
+    };
+    if (candidate.typeName !== "asset" || candidate.type !== "image") {
+      return false;
+    }
+    const props =
+      candidate.props && typeof candidate.props === "object"
+        ? (candidate.props as Record<string, unknown>)
+        : {};
+    return (
+      typeof props.src === "string" ||
+      Object.values(props).some(
+        (value) => typeof value === "string" && value.startsWith("data:image"),
+      )
+    );
+  });
+}