@yuzhouu/canvas-kit 0.1.2 → 0.1.4

package/_vendor/plugin-image/cropInteractions.ts

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

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

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

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

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

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

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