@yuzhouu/canvas-kit 0.1.2 → 0.1.3

package/_vendor/plugin-image/core.ts

@@ -1,542 +0,0 @@
-import {
-  type ContextMenuContribution,
-  type LandCorePlugin,
-  type ShapeSvgExporter,
-  type SvgExportContext,
-  type SvgNode,
-  type ToolbarAction,
-  type ToolbarContext,
-  type ToolbarContribution,
-  type ToolbarGroup,
-} from "@land/canvas-core";
-import {
-  formatImageCropViewBox,
-  getImageCropAspectRatioPresetValue,
-  getImageCropResetUpdate,
-  getImageCropModeMarkId,
-  getImageCropRect,
-  getImageCropUpdateFromAspectRatioPreset,
-  getImageCropUpdateFromZoom,
-  IMAGE_CROP_ASPECT_RATIO_PRESETS,
-  isImageCropModeForShape,
-} from "./crop";
-import {
-  clearImageCropSessionBaseline,
-  getImageCropSessionBaseline,
-  rememberImageCropSessionBaseline,
-} from "./cropSession";
-import { createImageCropInteractionHandler } from "./cropInteractions";
-import { ImageShapeUtil } from "./ImageShapeUtil";
-import { isImageShapeRecord, type ImageShapeRecord } from "./types";
-
-export const IMAGE_REPLACE_TOOLBAR_ACTION_ID = "image.replace";
-export const IMAGE_DOWNLOAD_TOOLBAR_ACTION_ID = "image.download-original";
-export const IMAGE_INSERT_TOOLBAR_ACTION_ID = "image.insert";
-export const IMAGE_CROP_TOOLBAR_ACTION_ID = "image.crop";
-export const IMAGE_CROP_DONE_TOOLBAR_ACTION_ID = "image.crop.done";
-export const IMAGE_CROP_ZOOM_TOOLBAR_ACTION_ID = "image.crop.zoom";
-export const IMAGE_CROP_ASPECT_RATIO_TOOLBAR_ACTION_ID =
-  "image.crop.aspect-ratio";
-export const IMAGE_CROP_RESET_TOOLBAR_ACTION_ID = "image.crop.reset";
-
-export class ImageShapeSvgExporter
-  implements ShapeSvgExporter<ImageShapeRecord>
-{
-  readonly type = "image" as const;
-
-  toSvg(shape: ImageShapeRecord, context: SvgExportContext): SvgNode | null {
-    const { assetId, altText, crop, h, w } = shape.props;
-    if (!assetId) {
-      return null;
-    }
-    const href = context.resolveAssetUrl(assetId);
-    if (!href) {
-      return null;
-    }
-
-    const cropRect = getImageCropRect(crop);
-    if (cropRect) {
-      return {
-        tag: "svg",
-        attrs: {
-          x: 0,
-          y: 0,
-          width: w,
-          height: h,
-          viewBox: formatImageCropViewBox(cropRect),
-          preserveAspectRatio: "none",
-          overflow: "hidden",
-        },
-        children: [
-          {
-            tag: "image",
-            attrs: {
-              href,
-              x: 0,
-              y: 0,
-              width: 1,
-              height: 1,
-              preserveAspectRatio: "none",
-              "aria-label": altText || undefined,
-            },
-          },
-        ],
-      };
-    }
-
-    return {
-      tag: "image",
-      attrs: {
-        href,
-        width: w,
-        height: h,
-        preserveAspectRatio: "none",
-        "aria-label": altText || undefined,
-      },
-    };
-  }
-}
-
-export function createImageCorePlugin(): LandCorePlugin {
-  return {
-    id: "land.image",
-    shapeCapabilities: [
-      {
-        type: "image",
-        schemaProps: ["w", "h", "assetId", "crop", "altText"],
-        reactRenderer: "supported",
-        toolbarEntry: "supported",
-        notes: [
-          "Image shape util, SVG exporter, and React renderer live in @land/plugin-image. Asset records store serializable metadata plus a host storageKey; File/Blob/object URL/download behavior stays in the web host.",
-        ],
-      },
-    ],
-    shapeUtils: [new ImageShapeUtil()],
-    shapeSvgExporters: [new ImageShapeSvgExporter()],
-    interactionHandlers: [createImageCropInteractionHandler()],
-    toolbarActions: [
-      createImageHostToolbarActionContract(IMAGE_INSERT_TOOLBAR_ACTION_ID),
-      createImageHostToolbarActionContract(IMAGE_REPLACE_TOOLBAR_ACTION_ID),
-      createImageHostToolbarActionContract(IMAGE_DOWNLOAD_TOOLBAR_ACTION_ID),
-      createImageCropToolbarAction(),
-      createImageCropDoneToolbarAction(),
-      createImageCropZoomToolbarAction(),
-      createImageCropAspectRatioToolbarAction(),
-      createImageCropResetToolbarAction(),
-    ],
-    toolbarContributions: [
-      createImageToolToolbarContribution(),
-      createImageSelectionToolbarContribution(),
-    ],
-    contextMenuContributions: [createImageContextMenuContribution()],
-  };
-}
-
-function getSingleSelectedImageShape(
-  context: ToolbarContext,
-): ImageShapeRecord | null {
-  if (
-    context.selection.count !== 1 ||
-    context.selection.singleShapeType !== "image"
-  ) {
-    return null;
-  }
-  const [shape] = context.selection.selectedShapes;
-  return isImageShapeRecord(shape) ? shape : null;
-}
-
-export function isImageCropToolbarSession(context: ToolbarContext): boolean {
-  const shape = getSingleSelectedImageShape(context);
-  const session = context.editor.getShapeEditingSession();
-  return !!(
-    shape &&
-    session?.shapeId === shape.id &&
-    isImageCropModeForShape(shape, session.markId)
-  );
-}
-
-function createImageHostToolbarActionContract(actionId: string): ToolbarAction {
-  return {
-    id: actionId,
-    isVisible() {
-      return false;
-    },
-    isEnabled() {
-      return false;
-    },
-    run() {
-      throw new Error(
-        `Image toolbar action ${actionId} requires a host implementation.`,
-      );
-    },
-  };
-}
-
-function createImageCropToolbarAction(): ToolbarAction<boolean> {
-  return {
-    id: IMAGE_CROP_TOOLBAR_ACTION_ID,
-    isVisible(context) {
-      return !!getSingleSelectedImageShape(context) &&
-        !isImageCropToolbarSession(context);
-    },
-    isEnabled(context) {
-      const shape = getSingleSelectedImageShape(context);
-      return !!shape && !shape.isLocked;
-    },
-    getValue(context) {
-      return isImageCropToolbarSession(context);
-    },
-    run({ context }) {
-      const shape = getSingleSelectedImageShape(context);
-      if (!shape || shape.isLocked) {
-        return;
-      }
-
-      const session = context.editor.getShapeEditingSession();
-      if (
-        session?.shapeId === shape.id &&
-        isImageCropModeForShape(shape, session.markId)
-      ) {
-        context.editor.completeEditing("user");
-        return;
-      }
-
-      const nextSession = context.editor.startEditingShape(
-        {
-          shapeId: shape.id,
-          markId: getImageCropModeMarkId(shape.id),
-          entryMode: "focusEnd",
-        },
-        "user",
-      );
-      if (nextSession) {
-        rememberImageCropSessionBaseline(shape);
-      }
-    },
-  };
-}
-
-function createImageCropDoneToolbarAction(): ToolbarAction {
-  return {
-    id: IMAGE_CROP_DONE_TOOLBAR_ACTION_ID,
-    isVisible(context) {
-      return isImageCropToolbarSession(context);
-    },
-    isEnabled(context) {
-      return isImageCropToolbarSession(context);
-    },
-    run({ context }) {
-      const shape = getSingleSelectedImageShape(context);
-      if (!shape) {
-        return;
-      }
-      if (context.editor.completeEditing("user")) {
-        clearImageCropSessionBaseline(shape.id);
-      }
-    },
-  };
-}
-
-function createImageCropZoomToolbarAction(): ToolbarAction<number> {
-  return {
-    id: IMAGE_CROP_ZOOM_TOOLBAR_ACTION_ID,
-    isVisible(context) {
-      return isImageCropToolbarSession(context);
-    },
-    isEnabled(context) {
-      const shape = getSingleSelectedImageShape(context);
-      return !!shape && !shape.isLocked;
-    },
-    run({ context, value }) {
-      const shape = getSingleSelectedImageShape(context);
-      if (!shape || shape.isLocked || (value !== -1 && value !== 1)) {
-        return;
-      }
-
-      const update = getImageCropUpdateFromZoom({
-        direction: value === 1 ? "in" : "out",
-        shape,
-      });
-      if (!update) {
-        return;
-      }
-
-      context.editor.commands.updateShapes([update], { source: "user" });
-    },
-  };
-}
-
-function createImageCropAspectRatioToolbarAction(): ToolbarAction<string | null> {
-  return {
-    id: IMAGE_CROP_ASPECT_RATIO_TOOLBAR_ACTION_ID,
-    isVisible(context) {
-      return isImageCropToolbarSession(context);
-    },
-    isEnabled(context) {
-      const shape = getSingleSelectedImageShape(context);
-      return !!shape && !shape.isLocked;
-    },
-    getValue(context) {
-      const shape = getSingleSelectedImageShape(context);
-      return shape ? getImageCropAspectRatioPresetValue(shape) : null;
-    },
-    run({ context, value }) {
-      const shape = getSingleSelectedImageShape(context);
-      if (!shape || shape.isLocked || typeof value !== "string") {
-        return;
-      }
-
-      const preset = IMAGE_CROP_ASPECT_RATIO_PRESETS.find(
-        (candidate) => candidate.value === value,
-      );
-      if (!preset) {
-        return;
-      }
-
-      const update = getImageCropUpdateFromAspectRatioPreset({
-        preset: preset.value,
-        shape,
-      });
-      if (!update) {
-        return;
-      }
-
-      context.editor.commands.updateShapes([update], { source: "user" });
-    },
-  };
-}
-
-function createImageCropResetToolbarAction(): ToolbarAction {
-  return {
-    id: IMAGE_CROP_RESET_TOOLBAR_ACTION_ID,
-    isVisible(context) {
-      return isImageCropToolbarSession(context);
-    },
-    isEnabled(context) {
-      const shape = getSingleSelectedImageShape(context);
-      return !!shape && !shape.isLocked && !!shape.props.crop;
-    },
-    run({ context }) {
-      const shape = getSingleSelectedImageShape(context);
-      if (!shape || shape.isLocked) {
-        return;
-      }
-
-      const baselineShape = getImageCropSessionBaseline(shape.id) ?? shape;
-      const update = getImageCropResetUpdate({
-        baselineShape,
-        shape,
-      });
-      if (!update) {
-        return;
-      }
-
-      context.editor.commands.updateShapes([update], { source: "user" });
-    },
-  };
-}
-
-function createImageToolToolbarContribution(): ToolbarContribution {
-  return {
-    id: "image.tool-toolbar",
-    surface: "tool",
-    placement: "chrome",
-    order: 55,
-    actionIds: [IMAGE_INSERT_TOOLBAR_ACTION_ID],
-    getGroups() {
-      return [
-        {
-          id: "image.tools",
-          items: [
-            {
-              kind: "button",
-              id: IMAGE_INSERT_TOOLBAR_ACTION_ID,
-              actionId: IMAGE_INSERT_TOOLBAR_ACTION_ID,
-              label: "Image",
-              icon: "image-plus",
-              dataUi: "insert-image-tool-button",
-            },
-          ],
-        },
-      ];
-    },
-  };
-}
-
-function createImageSelectionToolbarContribution(): ToolbarContribution {
-  return {
-    id: "image.selection-toolbar",
-    surface: "selection",
-    order: 30,
-    actionIds: [
-      IMAGE_CROP_TOOLBAR_ACTION_ID,
-      IMAGE_CROP_DONE_TOOLBAR_ACTION_ID,
-      IMAGE_CROP_ZOOM_TOOLBAR_ACTION_ID,
-      IMAGE_CROP_ASPECT_RATIO_TOOLBAR_ACTION_ID,
-      IMAGE_CROP_RESET_TOOLBAR_ACTION_ID,
-      IMAGE_REPLACE_TOOLBAR_ACTION_ID,
-      IMAGE_DOWNLOAD_TOOLBAR_ACTION_ID,
-    ],
-    when(context) {
-      return (
-        context.selection.count === 1 &&
-        context.selection.singleShapeType === "image"
-      );
-    },
-    getGroups(context) {
-      const groups: ToolbarGroup[] = [];
-      if (isImageCropToolbarSession(context)) {
-        groups.push(
-          {
-            id: "image.crop-zoom",
-            order: 10,
-            items: [
-              {
-                kind: "stepper" as const,
-                id: "image.crop.zoom-stepper",
-                actionId: IMAGE_CROP_ZOOM_TOOLBAR_ACTION_ID,
-                label: "Zoom",
-                options: [
-                  {
-                    value: -1,
-                    label: "-",
-                    dataUi: "image-crop-zoom-out-button",
-                  },
-                  {
-                    value: 1,
-                    label: "+",
-                    dataUi: "image-crop-zoom-in-button",
-                  },
-                ],
-              },
-            ],
-          },
-          {
-            id: "image.crop-aspect",
-            order: 20,
-            items: [
-              {
-                kind: "segmented" as const,
-                id: "image.crop.aspect-ratio-segmented",
-                actionId: IMAGE_CROP_ASPECT_RATIO_TOOLBAR_ACTION_ID,
-                options: IMAGE_CROP_ASPECT_RATIO_PRESETS.map((preset) => ({
-                  value: preset.value,
-                  label: preset.label,
-                  dataUi: `image-crop-aspect-${preset.value.replace(":", "-")}-button`,
-                })),
-              },
-            ],
-          },
-          {
-            id: "image.crop-actions",
-            order: 30,
-            items: [
-              {
-                kind: "button" as const,
-                id: IMAGE_CROP_RESET_TOOLBAR_ACTION_ID,
-                actionId: IMAGE_CROP_RESET_TOOLBAR_ACTION_ID,
-                label: "Reset crop",
-                icon: "rotate-ccw",
-                dataUi: "reset-image-crop-button",
-              },
-            ],
-          },
-        );
-      }
-
-      groups.push({
-        id: "image.asset",
-        order: 40,
-        items: [
-          {
-            kind: "button" as const,
-            id: IMAGE_CROP_TOOLBAR_ACTION_ID,
-            actionId: IMAGE_CROP_TOOLBAR_ACTION_ID,
-            label: "Crop image",
-            icon: "crop",
-            dataUi: "crop-image-button",
-          },
-          {
-            kind: "button" as const,
-            id: IMAGE_CROP_DONE_TOOLBAR_ACTION_ID,
-            actionId: IMAGE_CROP_DONE_TOOLBAR_ACTION_ID,
-            label: "Done cropping",
-            icon: "check",
-            dataUi: "done-cropping-button",
-          },
-          {
-            kind: "button" as const,
-            id: IMAGE_REPLACE_TOOLBAR_ACTION_ID,
-            actionId: IMAGE_REPLACE_TOOLBAR_ACTION_ID,
-            label: "Replace image",
-            icon: "image-plus",
-            dataUi: "replace-image-button",
-          },
-          {
-            kind: "button" as const,
-            id: IMAGE_DOWNLOAD_TOOLBAR_ACTION_ID,
-            actionId: IMAGE_DOWNLOAD_TOOLBAR_ACTION_ID,
-            label: "Download original",
-            icon: "download",
-            dataUi: "download-image-original-button",
-          },
-        ],
-      });
-
-      return groups;
-    },
-  };
-}
-
-function createImageContextMenuContribution(): ContextMenuContribution {
-  return {
-    id: "image.shape-context-menu",
-    target: "selection",
-    order: 30,
-    actionIds: [
-      IMAGE_CROP_TOOLBAR_ACTION_ID,
-      IMAGE_REPLACE_TOOLBAR_ACTION_ID,
-      IMAGE_DOWNLOAD_TOOLBAR_ACTION_ID,
-    ],
-    when(context) {
-      return (
-        context.selection.count === 1 &&
-        context.selection.singleShapeType === "image"
-      );
-    },
-    getSections() {
-      return [
-        {
-          id: "image.asset-context-menu",
-          title: "Image",
-          items: [
-            {
-              kind: "command",
-              id: IMAGE_CROP_TOOLBAR_ACTION_ID,
-              actionId: IMAGE_CROP_TOOLBAR_ACTION_ID,
-              label: "Crop image",
-              icon: "crop",
-              dataUi: "context-menu-crop-image-button",
-            },
-            {
-              kind: "command",
-              id: IMAGE_REPLACE_TOOLBAR_ACTION_ID,
-              actionId: IMAGE_REPLACE_TOOLBAR_ACTION_ID,
-              label: "Replace image",
-              icon: "image-plus",
-              dataUi: "context-menu-replace-image-button",
-            },
-            {
-              kind: "command",
-              id: IMAGE_DOWNLOAD_TOOLBAR_ACTION_ID,
-              actionId: IMAGE_DOWNLOAD_TOOLBAR_ACTION_ID,
-              label: "Download original",
-              icon: "download",
-              dataUi: "context-menu-download-image-original-button",
-            },
-          ],
-        },
-      ];
-    },
-  };
-}