@yuzhouu/canvas-kit 0.1.2

package/_vendor/plugin-group/canvas.tsx

@@ -0,0 +1,59 @@
+import type {
+  LandCanvasPlugin,
+  ShapeRendererProps,
+} from "@land/canvas-plugin-api";
+import type { GroupShapeRecord } from "./GroupShapeUtil";
+
+interface GroupShapeSvgProps {
+  shape: GroupShapeRecord;
+}
+
+export function createGroupCanvasPlugin(): LandCanvasPlugin {
+  return {
+    id: "land.group.react",
+    setup(registerShapeRenderer) {
+      registerShapeRenderer({
+        type: "group",
+        component: GroupShapeRenderer,
+      });
+    },
+  };
+}
+
+function GroupShapeRenderer({
+  shape,
+  isSelected,
+}: ShapeRendererProps<GroupShapeRecord>) {
+  return <GroupShapeSvg shape={shape} isSelected={isSelected} />;
+}
+
+export function GroupShapeSvg({
+  shape,
+  isSelected = false,
+}: GroupShapeSvgProps & { isSelected?: boolean }) {
+  const { h, w } = shape.props;
+
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox={`0 0 ${w} ${h}`}
+      style={{ display: "block", overflow: "visible" }}
+      shapeRendering="geometricPrecision"
+    >
+      {isSelected ? (
+        <rect
+          x={0.5}
+          y={0.5}
+          width={Math.max(w - 1, 0)}
+          height={Math.max(h - 1, 0)}
+          fill="none"
+          stroke="#64748b"
+          strokeDasharray="4 4"
+          strokeWidth={1}
+          vectorEffect="non-scaling-stroke"
+        />
+      ) : null}
+    </svg>
+  );
+}

package/_vendor/plugin-group/core.ts

@@ -0,0 +1,40 @@
+import {
+  type LandCorePlugin,
+  type ShapeSvgExporter,
+  type SvgNode,
+} from "@land/canvas-core";
+import {
+  GroupShapeUtil,
+  type GroupShapeRecord,
+} from "./GroupShapeUtil";
+
+export class GroupShapeSvgExporter
+  implements ShapeSvgExporter<GroupShapeRecord>
+{
+  readonly type = "group" as const;
+
+  toSvg(_shape: GroupShapeRecord): SvgNode {
+    return {
+      tag: "g",
+    };
+  }
+}
+
+export function createGroupCorePlugin(): LandCorePlugin {
+  return {
+    id: "land.group",
+    shapeCapabilities: [
+      {
+        type: "group",
+        schemaProps: ["w", "h"],
+        reactRenderer: "supported",
+        toolbarEntry: "supported",
+        notes: [
+          "Group is a transparent parent shape. The editor core handles group/ungroup commands, descendant-aware selection transforms, group hit selection bubbling, selected-group child hit selection, descendant export traversal, and child movement through existing parentId queries.",
+        ],
+      },
+    ],
+    shapeUtils: [new GroupShapeUtil()],
+    shapeSvgExporters: [new GroupShapeSvgExporter()],
+  };
+}

package/_vendor/plugin-group/feature.ts

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

package/_vendor/plugin-group/index.ts

@@ -0,0 +1,5 @@
+export { GroupShapeUtil } from "./GroupShapeUtil";
+export type { GroupShapeProps, GroupShapeRecord } from "./GroupShapeUtil";
+export { GroupShapeSvgExporter, createGroupCorePlugin } from "./core";
+export { createGroupCanvasPlugin } from "./canvas";
+export { Group, createGroupFeatureBundle } from "./feature";

package/_vendor/plugin-image/ImageShapeUtil.ts

@@ -0,0 +1,95 @@
+import {
+  Box,
+  ShapeUtil,
+  type AssetId,
+  type ShapeSelectionHandleAnchorInput,
+  type ShapeSelectionHandleAnchors,
+} from "@land/canvas-core";
+import {
+  getImageCropHandleAnchors,
+  isImageCropModeForShape,
+  normalizeImageShapeCrop,
+} from "./crop";
+import type { ImageShapeProps, ImageShapeRecord } from "./types";
+
+function clampNumber(value: unknown, fallback: number): number {
+  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+}
+
+function isAssetId(value: unknown): value is AssetId {
+  return typeof value === "string" && value.startsWith("asset:");
+}
+
+export class ImageShapeUtil extends ShapeUtil<ImageShapeRecord> {
+  readonly type = "image" as const;
+
+  getDefaultProps(): ImageShapeProps {
+    return {
+      w: 240,
+      h: 180,
+      assetId: null,
+      crop: null,
+      altText: "",
+    };
+  }
+
+  validateProps(props: unknown): ImageShapeProps {
+    const candidate =
+      props && typeof props === "object"
+        ? (props as Partial<ImageShapeProps>)
+        : {};
+    const fallback = this.getDefaultProps();
+
+    return {
+      w: Math.max(24, clampNumber(candidate.w, fallback.w)),
+      h: Math.max(24, clampNumber(candidate.h, fallback.h)),
+      assetId: isAssetId(candidate.assetId) ? candidate.assetId : null,
+      crop: normalizeImageShapeCrop(candidate.crop),
+      altText:
+        typeof candidate.altText === "string"
+          ? candidate.altText
+          : fallback.altText,
+    };
+  }
+
+  getBounds(shape: ImageShapeRecord): Box {
+    return new Box(shape.x, shape.y, shape.props.w, shape.props.h);
+  }
+
+  canEdit(_shape: ImageShapeRecord): boolean {
+    return true;
+  }
+
+  getSelectionHandleAnchors(
+    shape: ImageShapeRecord,
+    input: ShapeSelectionHandleAnchorInput,
+  ): ShapeSelectionHandleAnchors {
+    const empty = {
+      terminalHandleAnchors: [],
+      middleHandleAnchors: [],
+      customHandleAnchors: [],
+    };
+    if (!input.isOnlySelected) {
+      return empty;
+    }
+
+    const session = input.editor.getShapeEditingSession();
+    if (
+      !session ||
+      session.shapeId !== shape.id ||
+      !isImageCropModeForShape(shape, session.markId)
+    ) {
+      return empty;
+    }
+
+    return {
+      terminalHandleAnchors: [],
+      middleHandleAnchors: [],
+      customHandleAnchors: getImageCropHandleAnchors({
+        crop: shape.props.crop,
+        localToPage: input.editor.computeShapeLocalToPageTransform(shape),
+        shape,
+      }),
+    };
+  }
+}

package/_vendor/plugin-image/canvas.tsx

@@ -0,0 +1,212 @@
+import type { CSSProperties } from "react";
+import type {
+  CanvasDomEventGuard,
+  LandCanvasPlugin,
+  ShapeRendererProps,
+} from "@land/canvas-plugin-api";
+import { Vec } from "@land/canvas-core";
+import {
+  getImageCropPlacement,
+  isImageCropModeForShape,
+} from "./crop";
+import { isImageShapeRecord, type ImageShapeRecord } from "./types";
+
+const imageCropDomEventGuard: CanvasDomEventGuard = {
+  id: "land.image.crop.dom-events",
+  handle() {
+    return "continue";
+  },
+  getCursor({ clientPoint, editor, element, container }) {
+    const shape = getActiveImageCropShape(editor);
+    if (!shape) {
+      return undefined;
+    }
+
+    if (element?.closest('[data-selection-custom-handle-type="image.crop"]')) {
+      return undefined;
+    }
+
+    if (!clientPoint) {
+      return undefined;
+    }
+
+    const rect = container.getBoundingClientRect();
+    const screenPoint = new Vec(
+      clientPoint.x - rect.left,
+      clientPoint.y - rect.top,
+    );
+    const pagePoint = editor.screenToPage(screenPoint);
+    if (!isPointInsideImageShape(editor, shape, pagePoint)) {
+      return undefined;
+    }
+
+    return editor.inputs.state.get().buttons !== 0 ? "grabbing" : "grab";
+  },
+};
+
+export function createImageCanvasPlugin(): LandCanvasPlugin {
+  return {
+    id: "land.image.react",
+    domEventGuards: [imageCropDomEventGuard],
+    setup(registerShapeRenderer) {
+      registerShapeRenderer({
+        type: "image",
+        component: ImageShapeRenderer,
+      });
+    },
+  };
+}
+
+function ImageShapeRenderer({
+  editor,
+  shape,
+  shapeEditingSession,
+}: ShapeRendererProps<ImageShapeRecord>) {
+  const { altText, assetId, crop, h, w } = shape.props;
+  const src = assetId ? editor.resolveAssetUrl(assetId) : null;
+
+  if (!src) {
+    return (
+      <div
+        data-ui="image-shape-missing-asset"
+        style={{
+          alignItems: "center",
+          background: "#f1f5f9",
+          border: "1px solid #cbd5e1",
+          color: "#64748b",
+          display: "flex",
+          fontFamily:
+            "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+          fontSize: 12,
+          height: h,
+          justifyContent: "center",
+          overflow: "hidden",
+          width: w,
+        }}
+      >
+        Missing image
+      </div>
+    );
+  }
+
+  const cropPlacement = getImageCropPlacement({
+    crop,
+    shapeHeight: h,
+    shapeWidth: w,
+  });
+  if (cropPlacement) {
+    const isCropMode =
+      shapeEditingSession?.shapeId === shape.id &&
+      isImageCropModeForShape(shape, shapeEditingSession.markId);
+    const cropImageStyle = {
+      display: "block",
+      height: cropPlacement.imageHeight,
+      left: cropPlacement.imageX,
+      maxWidth: "none",
+      objectFit: "fill",
+      pointerEvents: "none",
+      position: "absolute",
+      top: cropPlacement.imageY,
+      userSelect: "none",
+      width: cropPlacement.imageWidth,
+    } satisfies CSSProperties;
+
+    return (
+      <div
+        data-ui="image-shape"
+        style={{
+          display: "block",
+          height: h,
+          overflow: isCropMode ? "visible" : "hidden",
+          pointerEvents: "none",
+          position: "relative",
+          userSelect: "none",
+          width: w,
+        }}
+      >
+        {isCropMode ? (
+          <img
+            alt=""
+            aria-hidden="true"
+            data-ui="image-crop-preview"
+            draggable={false}
+            src={src}
+            style={{
+              ...cropImageStyle,
+              opacity: 0.1,
+            }}
+          />
+        ) : null}
+        <div
+          data-ui="image-crop-window"
+          style={{
+            height: h,
+            overflow: "hidden",
+            position: "absolute",
+            inset: 0,
+            width: w,
+          }}
+        >
+          <img
+            alt={altText}
+            draggable={false}
+            src={src}
+            style={cropImageStyle}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <img
+      alt={altText}
+      data-ui="image-shape"
+      draggable={false}
+      src={src}
+      style={{
+        display: "block",
+        height: h,
+        objectFit: "fill",
+        pointerEvents: "none",
+        userSelect: "none",
+        width: w,
+      }}
+    />
+  );
+}
+
+function getActiveImageCropShape(
+  editor: ShapeRendererProps<ImageShapeRecord>["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: ShapeRendererProps<ImageShapeRecord>["editor"],
+  shape: ImageShapeRecord,
+  pagePoint: Vec,
+): boolean {
+  const pageToLocal = editor.computeShapeLocalToPageTransform(shape).invert();
+  const localPoint = pageToLocal.applyToPoint(pagePoint);
+  return (
+    localPoint.x >= 0 &&
+    localPoint.y >= 0 &&
+    localPoint.x <= shape.props.w &&
+    localPoint.y <= shape.props.h
+  );
+}