@yuzhouu/canvas-kit 0.1.2

package/_vendor/plugin-image/core.ts

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