@yuzhouu/canvas-kit 0.1.2

package/_vendor/plugin-image/cropInteractions.ts

@@ -0,0 +1,350 @@
+import {
+  Vec,
+  type Editor,
+  type KeyboardEditorEvent,
+  type LandInteractionHandler,
+  type PointerEditorEvent,
+  type SelectionResizeHandleId,
+  type SelectionHandleInteractionHandler,
+  type SelectionHandleInteractionSession,
+  type ShapeId,
+  type ShapeUpdate,
+} from "@land/canvas-core";
+import {
+  getImageCropUpdateFromHandleDrag,
+  getImageCropUpdateFromContentDrag,
+  getImageCropUpdateFromContentNudge,
+  IMAGE_CROP_HANDLE_HISTORY_MARK,
+  IMAGE_CROP_HANDLE_TYPE,
+  IMAGE_CROP_TRANSLATE_HISTORY_MARK,
+  isImageCropModeForShape,
+  isImageCropHandleId,
+} from "./crop";
+import { clearImageCropSessionBaseline } from "./cropSession";
+import {
+  isImageShapeRecord,
+  type ImageShapeCrop,
+  type ImageShapeRecord,
+} from "./types";
+
+const IMAGE_CROP_DRAG_START_DISTANCE_SQUARED = 9;
+const IMAGE_CROP_NUDGE_DISTANCE = 1;
+const IMAGE_CROP_FAST_NUDGE_DISTANCE = 10;
+
+interface ImageCropContentDragSession {
+  pointerId: number;
+  shapeId: ShapeId;
+  startCrop: ImageShapeCrop | null;
+  startPagePoint: Vec;
+  startPageToLocal: { applyToPoint(point: Vec): Vec };
+  startShape: ImageShapeRecord;
+  hasDragged: boolean;
+}
+
+function createImageCropSession({
+  handleId,
+  shapeId,
+  startPagePoint,
+  startPageToLocal,
+  startShape,
+  startCrop,
+}: {
+  handleId: SelectionResizeHandleId;
+  shapeId: ShapeId;
+  startPagePoint: Vec;
+  startPageToLocal: { applyToPoint(point: Vec): Vec };
+  startShape: ImageShapeRecord;
+  startCrop: ImageShapeCrop | null;
+}): SelectionHandleInteractionSession {
+  return {
+    shapeId,
+    historyMark: IMAGE_CROP_HANDLE_HISTORY_MARK,
+    update({ editor, pagePoint, source }) {
+      const shape = editor.getShape(shapeId);
+      if (!isImageShapeRecord(shape)) {
+        return "stop";
+      }
+
+      const update = getImageCropUpdateFromHandleDrag({
+        handleId,
+        currentPagePoint: pagePoint,
+        pageToLocal: startPageToLocal,
+        shape: startShape,
+        startCrop,
+        startPagePoint,
+      });
+      if (!update) {
+        return "continue";
+      }
+
+      editor.commands.updateShapes(
+        [update],
+        { source },
+      );
+      return "continue";
+    },
+  };
+}
+
+export function createImageCropSelectionHandleInteractionHandler(): SelectionHandleInteractionHandler {
+  return {
+    createSession(editor, { handle, shape, originPagePoint }) {
+      if (
+        !isImageShapeRecord(shape) ||
+        handle.kind !== "custom" ||
+        handle.type !== IMAGE_CROP_HANDLE_TYPE ||
+        !isImageCropHandleId(handle.id)
+      ) {
+        return null;
+      }
+
+      return createImageCropSession({
+        handleId: handle.id,
+        shapeId: shape.id,
+        startPagePoint: originPagePoint,
+        startPageToLocal: editor.computeShapeLocalToPageTransform(shape).invert(),
+        startShape: shape,
+        startCrop: shape.props.crop,
+      });
+    },
+  };
+}
+
+export function createImageCropInteractionHandler(): LandInteractionHandler {
+  let contentDragSession: ImageCropContentDragSession | null = null;
+
+  const clearContentDragSession = (): void => {
+    contentDragSession = null;
+  };
+
+  return {
+    id: "land.image.crop.interactions",
+    editorEvent: {
+      handleEvent(editor, event) {
+        if (event.type === "keyboard") {
+          return handleCropKeyboardEvent(editor, event);
+        }
+
+        if (event.type !== "pointer") {
+          return "continue";
+        }
+
+        if (event.name === "pointer_cancel") {
+          if (contentDragSession?.hasDragged) {
+            editor.history.bailToMark(IMAGE_CROP_TRANSLATE_HISTORY_MARK);
+          }
+          clearContentDragSession();
+          return "continue";
+        }
+
+        if (event.name === "pointer_down") {
+          clearContentDragSession();
+
+          if (
+            event.button !== 0 ||
+            editor.getActiveToolId() !== "select" ||
+            !editor.isActiveToolInInitialState()
+          ) {
+            return "continue";
+          }
+
+          const handle = editor.hitTestSelectionHandle(event.pagePoint);
+          if (handle) {
+            return "continue";
+          }
+
+          const shape = getActiveImageCropShape(editor);
+          if (!shape) {
+            return "continue";
+          }
+
+          if (!isPointInsideImageShape(editor, shape, event)) {
+            if (editor.completeEditing("user")) {
+              clearImageCropSessionBaseline(shape.id);
+              editor.dispatch(event);
+              return "handled";
+            }
+            return "continue";
+          }
+
+          contentDragSession = {
+            pointerId: event.pointerId,
+            shapeId: shape.id,
+            startCrop: shape.props.crop,
+            startPagePoint: event.pagePoint.clone(),
+            startPageToLocal: editor.computeShapeLocalToPageTransform(shape).invert(),
+            startShape: shape,
+            hasDragged: false,
+          };
+          return "handled";
+        }
+
+        if (!contentDragSession || event.pointerId !== contentDragSession.pointerId) {
+          return "continue";
+        }
+
+        if (event.name === "pointer_move") {
+          updateContentDrag(editor, event, contentDragSession);
+          return "handled";
+        }
+
+        if (event.name === "pointer_up") {
+          updateContentDrag(editor, event, contentDragSession);
+          if (contentDragSession.hasDragged) {
+            editor.history.squashToMark(
+              IMAGE_CROP_TRANSLATE_HISTORY_MARK,
+              "shape.edit",
+            );
+          }
+          clearContentDragSession();
+          return "handled";
+        }
+
+        return "continue";
+      },
+    },
+    selectionHandle: createImageCropSelectionHandleInteractionHandler(),
+  };
+}
+
+function handleCropKeyboardEvent(
+  editor: Editor,
+  event: KeyboardEditorEvent,
+): "continue" | "handled" {
+  if (event.name !== "key_down") {
+    return "continue";
+  }
+
+  const shape = getActiveImageCropShape(editor);
+  if (!shape) {
+    return "continue";
+  }
+
+  if (
+    event.key === "Escape" &&
+    !event.altKey &&
+    !event.accelKey
+  ) {
+    if (editor.cancelEditing("user")) {
+      clearImageCropSessionBaseline(shape.id);
+    }
+    return "handled";
+  }
+
+  if (
+    event.key === "Enter" &&
+    !event.altKey &&
+    !event.accelKey
+  ) {
+    if (editor.completeEditing("user")) {
+      clearImageCropSessionBaseline(shape.id);
+    }
+    return "handled";
+  }
+
+  const nudgeDelta = getCropNudgeDelta(event);
+  if (nudgeDelta) {
+    const update = getImageCropUpdateFromContentNudge({
+      pageDelta: nudgeDelta,
+      shape,
+      startCrop: shape.props.crop,
+    });
+    if (update) {
+      editor.commands.updateShapes([update], { source: "user" });
+    }
+    return "handled";
+  }
+
+  return "continue";
+}
+
+function getCropNudgeDelta(event: KeyboardEditorEvent): Vec | null {
+  if (event.altKey || event.accelKey) {
+    return null;
+  }
+
+  const distance = event.shiftKey
+    ? IMAGE_CROP_FAST_NUDGE_DISTANCE
+    : IMAGE_CROP_NUDGE_DISTANCE;
+  switch (event.key) {
+    case "ArrowLeft":
+      return new Vec(distance, 0);
+    case "ArrowRight":
+      return new Vec(-distance, 0);
+    case "ArrowUp":
+      return new Vec(0, distance);
+    case "ArrowDown":
+      return new Vec(0, -distance);
+    default:
+      return null;
+  }
+}
+
+function getActiveImageCropShape(editor: Editor): ImageShapeRecord | null {
+  const [shape] = editor.getSelectedShapes();
+  if (!isImageShapeRecord(shape)) {
+    return null;
+  }
+
+  const session = editor.getShapeEditingSession();
+  if (
+    !session ||
+    session.shapeId !== shape.id ||
+    !isImageCropModeForShape(shape, session.markId)
+  ) {
+    return null;
+  }
+
+  return shape;
+}
+
+function isPointInsideImageShape(
+  editor: Editor,
+  shape: ImageShapeRecord,
+  event: PointerEditorEvent,
+): boolean {
+  const pageToLocal = editor.computeShapeLocalToPageTransform(shape).invert();
+  const localPoint = pageToLocal.applyToPoint(event.pagePoint);
+  return (
+    localPoint.x >= 0 &&
+    localPoint.y >= 0 &&
+    localPoint.x <= shape.props.w &&
+    localPoint.y <= shape.props.h
+  );
+}
+
+function updateContentDrag(
+  editor: Editor,
+  event: PointerEditorEvent,
+  session: ImageCropContentDragSession,
+): void {
+  if (!session.hasDragged) {
+    if (
+      session.startPagePoint.dist2(event.pagePoint) <
+      IMAGE_CROP_DRAG_START_DISTANCE_SQUARED
+    ) {
+      return;
+    }
+    editor.history.mark(IMAGE_CROP_TRANSLATE_HISTORY_MARK);
+    session.hasDragged = true;
+  }
+
+  const currentShape = editor.getShape(session.shapeId);
+  if (!isImageShapeRecord(currentShape)) {
+    return;
+  }
+
+  const update: ShapeUpdate | null = getImageCropUpdateFromContentDrag({
+    currentPagePoint: event.pagePoint,
+    pageToLocal: session.startPageToLocal,
+    shape: session.startShape,
+    shiftKey: event.shiftKey,
+    startCrop: session.startCrop,
+    startPagePoint: session.startPagePoint,
+  });
+  if (!update) {
+    return;
+  }
+
+  editor.commands.updateShapes([update], { source: "user" });
+}

package/_vendor/plugin-image/cropSession.ts

@@ -0,0 +1,38 @@
+import type { ImageShapeRecord } from "./types";
+
+const imageCropSessionBaselineByShapeId = new Map<
+  ImageShapeRecord["id"],
+  ImageShapeRecord
+>();
+
+export function rememberImageCropSessionBaseline(
+  shape: ImageShapeRecord,
+): void {
+  imageCropSessionBaselineByShapeId.set(shape.id, {
+    ...shape,
+    props: {
+      ...shape.props,
+      crop: shape.props.crop
+        ? {
+            topLeft: { ...shape.props.crop.topLeft },
+            bottomRight: { ...shape.props.crop.bottomRight },
+          }
+        : null,
+    },
+    meta: {
+      ...shape.meta,
+    },
+  });
+}
+
+export function getImageCropSessionBaseline(
+  shapeId: ImageShapeRecord["id"],
+): ImageShapeRecord | null {
+  return imageCropSessionBaselineByShapeId.get(shapeId) ?? null;
+}
+
+export function clearImageCropSessionBaseline(
+  shapeId: ImageShapeRecord["id"],
+): void {
+  imageCropSessionBaselineByShapeId.delete(shapeId);
+}

package/_vendor/plugin-image/feature.ts

@@ -0,0 +1,20 @@
+import {
+  defineLandExtension,
+  type LandFeatureBundle,
+} from "@land/canvas-plugin-api";
+import { createImageCanvasPlugin } from "./canvas";
+import { createImageCorePlugin } from "./core";
+
+export function createImageFeatureBundle(): LandFeatureBundle {
+  return {
+    id: "land.image.bundle",
+    corePlugins: [createImageCorePlugin()],
+    canvasPlugins: [createImageCanvasPlugin()],
+    shapeTypes: ["image"],
+  };
+}
+
+export const Image = defineLandExtension({
+  name: "image",
+  createFeature: createImageFeatureBundle,
+});

package/_vendor/plugin-image/index.ts

@@ -0,0 +1,29 @@
+export {
+  IMAGE_CROP_ASPECT_RATIO_TOOLBAR_ACTION_ID,
+  IMAGE_CROP_DONE_TOOLBAR_ACTION_ID,
+  IMAGE_CROP_RESET_TOOLBAR_ACTION_ID,
+  IMAGE_CROP_TOOLBAR_ACTION_ID,
+  IMAGE_CROP_ZOOM_TOOLBAR_ACTION_ID,
+  IMAGE_DOWNLOAD_TOOLBAR_ACTION_ID,
+  IMAGE_INSERT_TOOLBAR_ACTION_ID,
+  IMAGE_REPLACE_TOOLBAR_ACTION_ID,
+  ImageShapeSvgExporter,
+  createImageCorePlugin,
+  isImageCropToolbarSession,
+} from "./core";
+export { createImageCanvasPlugin } from "./canvas";
+export {
+  createImageCropInteractionHandler,
+  createImageCropSelectionHandleInteractionHandler,
+} from "./cropInteractions";
+export { getImageCropModeMarkId } from "./crop";
+export { Image, createImageFeatureBundle } from "./feature";
+export { ImageShapeUtil } from "./ImageShapeUtil";
+export type {
+  ImageAssetProps,
+  ImageAssetRecord,
+  ImageShapeCrop,
+  ImageShapeProps,
+  ImageShapeRecord,
+} from "./types";
+export { isImageAssetRecord, isImageShapeRecord } from "./types";

package/_vendor/plugin-image/types.ts

@@ -0,0 +1,55 @@
+import {
+  isAssetRecord,
+  isShapeRecord,
+  type AssetId,
+  type AssetRecordBase,
+  type BaseRecord,
+  type ShapeRecordBase,
+} from "@land/canvas-core";
+
+export interface ImageAssetProps {
+  w: number;
+  h: number;
+  name: string;
+  storageKey: string;
+  mimeType: string | null;
+  fileSize?: number;
+  isAnimated: boolean;
+}
+
+export interface ImageAssetRecord
+  extends AssetRecordBase<"image", ImageAssetProps> {
+  type: "image";
+  props: ImageAssetProps;
+}
+
+export interface ImageShapeCrop {
+  topLeft: { x: number; y: number };
+  bottomRight: { x: number; y: number };
+}
+
+export interface ImageShapeProps {
+  w: number;
+  h: number;
+  assetId: AssetId | null;
+  crop: ImageShapeCrop | null;
+  altText: string;
+}
+
+export interface ImageShapeRecord
+  extends ShapeRecordBase<"image", ImageShapeProps> {
+  type: "image";
+  props: ImageShapeProps;
+}
+
+export function isImageAssetRecord(
+  record: BaseRecord | null | undefined,
+): record is ImageAssetRecord {
+  return isAssetRecord(record) && record.type === "image";
+}
+
+export function isImageShapeRecord(
+  record: BaseRecord | null | undefined,
+): record is ImageShapeRecord {
+  return isShapeRecord(record) && record.type === "image";
+}

package/_vendor/plugin-image-product-react/ImageImportController.tsx

@@ -0,0 +1,143 @@
+import { memo, useEffect, useRef } from "react";
+import type { Editor } from "@land/canvas-core";
+import {
+  getDropPagePoint,
+  getFirstImageFileFromDataTransfer,
+  hasImageFileItem,
+  isEditableEventTarget,
+} from "./imageHostActions";
+import type { ImageAssetService } from "./imageAssetService";
+import { useImageImport } from "./useImageImport";
+import type { ImageToolbarHostBridge } from "./imageToolbarHostBridge";
+
+export const ImageImportController = memo(function ImageImportController({
+  editor,
+  hostBridge,
+  imageAssetService,
+  persistEditorSnapshot,
+}: {
+  editor: Editor;
+  hostBridge?: ImageToolbarHostBridge;
+  imageAssetService: ImageAssetService;
+  persistEditorSnapshot?: (editor: Editor) => Promise<void>;
+}) {
+  const insertImageInputRef = useRef<HTMLInputElement | null>(null);
+  const replaceImageInputRef = useRef<HTMLInputElement | null>(null);
+  const { insertImageFromFile, replaceSelectedImage } = useImageImport({
+    editor,
+    imageAssetService,
+    persistEditorSnapshot,
+  });
+
+  useEffect(() => {
+    if (!hostBridge) {
+      return;
+    }
+    return hostBridge.register({
+      openInsertFilePicker() {
+        insertImageInputRef.current?.click();
+      },
+      openReplaceFilePicker() {
+        replaceImageInputRef.current?.click();
+      },
+    });
+  }, [hostBridge]);
+
+  useEffect(() => {
+    const handlePaste = (event: ClipboardEvent) => {
+      if (editor.shapeEditingStateSignal.get().session) {
+        return;
+      }
+      if (isEditableEventTarget(event.target)) {
+        return;
+      }
+      const file = getFirstImageFileFromDataTransfer(event.clipboardData);
+      if (!file) {
+        return;
+      }
+      event.preventDefault();
+      void insertImageFromFile({ file, source: "paste" });
+    };
+
+    const handleDragOver = (event: DragEvent) => {
+      if (editor.shapeEditingStateSignal.get().session) {
+        return;
+      }
+      if (isEditableEventTarget(event.target)) {
+        return;
+      }
+      if (!hasImageFileItem(event.dataTransfer)) {
+        return;
+      }
+      event.preventDefault();
+      if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = "copy";
+      }
+    };
+
+    const handleDrop = (event: DragEvent) => {
+      if (editor.shapeEditingStateSignal.get().session) {
+        return;
+      }
+      if (isEditableEventTarget(event.target)) {
+        return;
+      }
+      const file = getFirstImageFileFromDataTransfer(event.dataTransfer);
+      if (!file) {
+        return;
+      }
+      event.preventDefault();
+      const pagePoint = getDropPagePoint(editor, event);
+      void insertImageFromFile({
+        file,
+        pagePoint,
+        source: "drop",
+      });
+    };
+
+    window.addEventListener("paste", handlePaste);
+    window.addEventListener("dragover", handleDragOver);
+    window.addEventListener("drop", handleDrop);
+    return () => {
+      window.removeEventListener("paste", handlePaste);
+      window.removeEventListener("dragover", handleDragOver);
+      window.removeEventListener("drop", handleDrop);
+    };
+  }, [editor, insertImageFromFile]);
+
+  return (
+    <>
+      <input
+        ref={insertImageInputRef}
+        type="file"
+        accept="image/*"
+        hidden
+        data-ui="insert-image-file-input"
+        onChange={(event) => {
+          const file = event.currentTarget.files?.[0] ?? null;
+          event.currentTarget.value = "";
+          if (file) {
+            void insertImageFromFile({
+              file,
+              source: "file-picker",
+            });
+          }
+        }}
+      />
+      <input
+        ref={replaceImageInputRef}
+        type="file"
+        accept="image/*"
+        hidden
+        data-ui="replace-image-file-input"
+        onChange={(event) => {
+          const file = event.currentTarget.files?.[0] ?? null;
+          event.currentTarget.value = "";
+          if (file) {
+            void replaceSelectedImage(file);
+          }
+        }}
+      />
+    </>
+  );
+});

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

@@ -0,0 +1,52 @@
+import type { Editor } from "@land/canvas-core";
+import {
+  createProductServiceToken,
+  type ProductAssetResolverService,
+  type ProductServiceFactory,
+} from "@land/canvas-product-react";
+import {
+  cleanupUnreferencedImageBlobs,
+  createImageObjectUrlStore,
+  type ImageObjectUrlStore,
+} from "./imageBlobStore";
+
+export interface ImageAssetService extends ProductAssetResolverService {
+  objectUrls: ImageObjectUrlStore;
+}
+
+export const imageAssetServiceToken =
+  createProductServiceToken<ImageAssetService>("plugin-image.asset-service");
+
+export function localImageAssetService(): ProductServiceFactory<ImageAssetService> {
+  return {
+    token: imageAssetServiceToken,
+    create() {
+      const objectUrls = createImageObjectUrlStore();
+      return {
+        objectUrls,
+        cleanupAfterRestore(editor: Editor) {
+          return cleanupUnreferencedImageBlobs({
+            editor,
+            objectUrls,
+          })
+            .then(() => undefined)
+            .catch((error: unknown) => {
+              console.warn(
+                "Could not clean up unreferenced image blobs.",
+                error,
+              );
+            });
+        },
+        preloadForEditor(editor: Editor) {
+          return objectUrls.preloadForEditor(editor);
+        },
+        resolveAssetUrl(editor, assetId) {
+          return objectUrls.resolveAssetUrl(editor, assetId);
+        },
+      };
+    },
+    dispose(service) {
+      service.objectUrls.releaseAll();
+    },
+  };
+}