@yuzhouu/canvas-kit 0.1.2 → 0.1.4

package/_vendor/plugin-group/canvas.tsx

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

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

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

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

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

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