@yuzhouu/canvas-kit 0.1.2 → 0.1.3

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

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

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

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

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

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

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