@yuzhouu/canvas-kit 0.1.2

package/_vendor/plugin-draw/DrawShapeRenderer.tsx

@@ -0,0 +1,60 @@
+import type { DrawShapeRecord } from "./types";
+import { getDrawShapeLocalGeometry } from "./drawGeometry";
+
+interface DrawShapeSvgProps {
+  shape: DrawShapeRecord;
+  stroke?: string;
+  strokeWidth?: number;
+}
+
+export function DrawShapeSvg({
+  shape,
+  stroke = shape.props.stroke,
+  strokeWidth = shape.props.strokeWidth,
+}: DrawShapeSvgProps) {
+  const localGeometry = getDrawShapeLocalGeometry({
+    props: {
+      ...shape.props,
+      strokeWidth,
+    },
+  });
+  const { fillPath, renderBounds, path, selectionPath } = localGeometry;
+
+  if (!path && !selectionPath) {
+    return null;
+  }
+
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox={`${renderBounds.x} ${renderBounds.y} ${Math.max(renderBounds.w, 1)} ${Math.max(renderBounds.h, 1)}`}
+      style={{ display: "block", overflow: "visible" }}
+      shapeRendering="geometricPrecision"
+    >
+      {fillPath && shape.props.fill !== "transparent" ? (
+        <path
+          d={fillPath}
+          fill={shape.props.fill}
+          stroke="none"
+        />
+      ) : null}
+      {shape.props.isClosed && selectionPath ? (
+        <path
+          d={selectionPath}
+          fill="none"
+          stroke={stroke}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      ) : path ? (
+        <path
+          d={path}
+          fill={stroke}
+          stroke="none"
+        />
+      ) : null}
+    </svg>
+  );
+}

package/_vendor/plugin-draw/DrawShapeUtil.ts

@@ -0,0 +1,372 @@
+import {
+  Box,
+  ShapeUtil,
+  Vec,
+  type ShapeBrushWrapInput,
+  type ShapeBrushSelectInput,
+  type ShapeLineSegmentHitTestInput,
+  type ShapeSelectionFlipInput,
+  type ShapeSelectionOverlayInfo,
+  type ShapeSelectionResizeInput,
+  type ShapeUpdate,
+} from "@land/canvas-core";
+import {
+  cloneDrawShapeSegmentsForUpdate,
+  flipDrawShapeInSelectionBounds,
+  getDrawShapeLocalGeometry,
+  getDrawShapePageGeometry,
+  getDrawShapePositionedGeometry,
+  normalizeTransformedDrawShape,
+  resizeDrawShapeToSelectionBounds,
+} from "./drawGeometry";
+import {
+  hitTestDrawShapeGeometry,
+  hitTestDrawShapeLineSegmentGeometry,
+} from "./drawHitTest";
+import { getDrawSegmentsFromPoints } from "./drawPath";
+import type {
+  DrawShapePoint,
+  DrawShapeProps,
+  DrawShapeRecord,
+  DrawShapeSegment,
+} from "./types";
+
+const DRAW_MIN_STROKE_WIDTH = 4;
+
+function getBrushBoundsEdges(bounds: Box): [Vec, Vec][] {
+  const topLeft = new Vec(bounds.minX, bounds.minY);
+  const topRight = new Vec(bounds.maxX, bounds.minY);
+  const bottomRight = new Vec(bounds.maxX, bounds.maxY);
+  const bottomLeft = new Vec(bounds.minX, bounds.maxY);
+
+  return [
+    [topLeft, topRight],
+    [topRight, bottomRight],
+    [bottomRight, bottomLeft],
+    [bottomLeft, topLeft],
+  ];
+}
+
+function clampNumber(value: unknown, fallback: number): number {
+  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+}
+
+function normalizePoint(point: unknown): DrawShapePoint | null {
+  if (!point || typeof point !== "object") {
+    return null;
+  }
+
+  const candidate = point as Partial<DrawShapePoint>;
+  const x = clampNumber(candidate.x, Number.NaN);
+  const y = clampNumber(candidate.y, Number.NaN);
+  if (!Number.isFinite(x) || !Number.isFinite(y)) {
+    return null;
+  }
+
+  const pressure = clampNumber(candidate.pressure, Number.NaN);
+  if (
+    candidate.x === x &&
+    candidate.y === y &&
+    (candidate.pressure === undefined || candidate.pressure === pressure) &&
+    (candidate.segment === undefined || candidate.segment === "straight")
+  ) {
+    return point as DrawShapePoint;
+  }
+
+  return {
+    x,
+    y,
+    ...(Number.isFinite(pressure) ? { pressure } : null),
+    ...(candidate.segment === "straight" ? { segment: "straight" as const } : null),
+  };
+}
+
+function normalizePoints(points: unknown, fallback: DrawShapePoint[]): DrawShapePoint[] {
+  if (!Array.isArray(points)) {
+    return fallback;
+  }
+
+  let changed = false;
+  const normalized: DrawShapePoint[] = [];
+  for (const point of points) {
+    const normalizedPoint = normalizePoint(point);
+    if (!normalizedPoint) {
+      changed = true;
+      continue;
+    }
+    changed = changed || normalizedPoint !== point;
+    normalized.push(normalizedPoint);
+  }
+
+  if (normalized.length === 0) {
+    return fallback;
+  }
+
+  return changed ? normalized : (points as DrawShapePoint[]);
+}
+
+function normalizeSegment(segment: unknown): DrawShapeSegment | null {
+  if (!segment || typeof segment !== "object") {
+    return null;
+  }
+
+  const candidate = segment as Partial<DrawShapeSegment>;
+  const points = normalizePoints(candidate.points, []);
+  if (points.length === 0) {
+    return null;
+  }
+
+  return points === candidate.points ? (segment as DrawShapeSegment) : { points };
+}
+
+function normalizeSegments(
+  segments: unknown,
+  fallback: DrawShapeSegment[],
+): DrawShapeSegment[] {
+  if (!Array.isArray(segments)) {
+    return fallback;
+  }
+
+  let changed = false;
+  const normalized: DrawShapeSegment[] = [];
+  for (const segment of segments) {
+    const normalizedSegment = normalizeSegment(segment);
+    if (!normalizedSegment) {
+      changed = true;
+      continue;
+    }
+    changed = changed || normalizedSegment !== segment;
+    normalized.push(normalizedSegment);
+  }
+
+  if (normalized.length === 0) {
+    return fallback;
+  }
+
+  return changed ? normalized : (segments as DrawShapeSegment[]);
+}
+
+export class DrawShapeUtil extends ShapeUtil<DrawShapeRecord> {
+  readonly type = "draw" as const;
+
+  getDefaultProps(): DrawShapeProps {
+    const points = [
+      { x: 0, y: 0 },
+      { x: 24, y: 12 },
+    ];
+
+    return {
+      segments: getDrawSegmentsFromPoints(points),
+      stroke: "#334155",
+      strokeWidth: 4,
+      fill: "transparent",
+      isClosed: false,
+      isPen: false,
+    };
+  }
+
+  validateProps(props: unknown): DrawShapeProps {
+    const candidate =
+      props && typeof props === "object"
+        ? (props as Partial<DrawShapeProps>)
+        : {};
+    const fallback = this.getDefaultProps();
+    const segments = normalizeSegments(candidate.segments, fallback.segments);
+
+    return {
+      segments,
+      stroke:
+        typeof candidate.stroke === "string"
+          ? candidate.stroke
+          : fallback.stroke,
+      strokeWidth: Math.max(
+        DRAW_MIN_STROKE_WIDTH,
+        clampNumber(candidate.strokeWidth, fallback.strokeWidth),
+      ),
+      fill:
+        typeof candidate.fill === "string"
+          ? candidate.fill
+          : fallback.fill,
+      isClosed:
+        typeof candidate.isClosed === "boolean"
+          ? candidate.isClosed
+          : fallback.isClosed,
+      isPen:
+        typeof candidate.isPen === "boolean" ? candidate.isPen : fallback.isPen,
+    };
+  }
+
+  getBounds(shape: DrawShapeRecord): Box {
+    const geometry = getDrawShapeLocalGeometry(shape);
+    return new Box(
+      shape.x + geometry.localBounds.x,
+      shape.y + geometry.localBounds.y,
+      geometry.localBounds.w,
+      geometry.localBounds.h,
+    );
+  }
+
+  getLocalBounds(shape: DrawShapeRecord): Box {
+    return getDrawShapeLocalGeometry(shape).localBounds;
+  }
+
+  getRenderBounds(shape: DrawShapeRecord): Box {
+    return getDrawShapeLocalGeometry(shape).renderBounds;
+  }
+
+  getExportBounds(shape: DrawShapeRecord): Box {
+    return this.getRenderBounds(shape);
+  }
+
+  getSelectionResizeLocalBounds(shape: DrawShapeRecord): Box {
+    return this.getLocalBounds(shape);
+  }
+
+  resizeSelectionBounds(
+    shape: DrawShapeRecord,
+    input: ShapeSelectionResizeInput,
+  ): ShapeUpdate {
+    const normalized = resizeDrawShapeToSelectionBounds(shape, {
+      targetSelectionStrokeBounds: input.selectionLocalBounds,
+      scaleX: input.scaleX,
+      scaleY: input.scaleY,
+      selectionRotation: input.selectionRotation,
+      selectionRotationCenter: input.selectionRotationCenter,
+    });
+
+    return {
+      id: shape.id,
+      x: normalized.x,
+      y: normalized.y,
+      rotation: 0,
+      scaleX: 1,
+      scaleY: 1,
+      props: {
+        segments: cloneDrawShapeSegmentsForUpdate(normalized.segments),
+      },
+    };
+  }
+
+  flipSelectionBounds(
+    shape: DrawShapeRecord,
+    input: ShapeSelectionFlipInput,
+  ): ShapeUpdate {
+    const normalized = flipDrawShapeInSelectionBounds(shape, {
+      axis: input.axis,
+      selectionMirrorBounds: input.selectionBounds,
+      selectionRotation: input.selectionRotation,
+      selectionRotationCenter: input.selectionRotationCenter,
+    });
+
+    return {
+      id: shape.id,
+      x: normalized.x,
+      y: normalized.y,
+      rotation: 0,
+      scaleX: 1,
+      scaleY: 1,
+      props: {
+        segments: cloneDrawShapeSegmentsForUpdate(normalized.segments),
+      },
+    };
+  }
+
+  getSelectionOverlayInfo(_shape: DrawShapeRecord): ShapeSelectionOverlayInfo {
+    return {
+      usesSelectionPathOverlay: false,
+      startPagePoint: null,
+      endPagePoint: null,
+      middlePagePoint: null,
+      path: null,
+    };
+  }
+
+  isWrappedByBrush(shape: DrawShapeRecord, input: ShapeBrushWrapInput): boolean {
+    const outline = getDrawShapePageGeometry(shape).outlineVertices;
+
+    return outline.every((point) => input.brushBounds.containsPoint(point));
+  }
+
+  canSelectByBrush(
+    shape: DrawShapeRecord,
+    input: ShapeBrushSelectInput,
+  ): boolean {
+    if (this.isWrappedByBrush(shape, input)) {
+      return true;
+    }
+
+    if (input.isWrapping) {
+      return false;
+    }
+
+    return getBrushBoundsEdges(input.brushBounds).some(([start, end]) =>
+      this.hitTestLineSegment(shape, {
+        pageStart: start,
+        pageEnd: end,
+        positionedStart: start,
+        positionedEnd: end,
+        margin: 0,
+      }),
+    );
+  }
+
+  getPositionedOutlineVertices(shape: DrawShapeRecord): Vec[] {
+    return getDrawShapePositionedGeometry(shape).outlineVertices;
+  }
+
+  hitTest(shape: DrawShapeRecord, positionedPoint: Vec): boolean {
+    return hitTestDrawShapeGeometry(
+      getDrawShapePositionedGeometry(shape),
+      shape.props.strokeWidth,
+      positionedPoint,
+      {
+        fill: shape.props.fill,
+        isClosed: shape.props.isClosed,
+      },
+    );
+  }
+
+  hitTestLineSegment(
+    shape: DrawShapeRecord,
+    input: ShapeLineSegmentHitTestInput,
+  ): boolean {
+    return hitTestDrawShapeLineSegmentGeometry(
+      getDrawShapePageGeometry(shape),
+      shape.props.strokeWidth,
+      input.pageStart,
+      input.pageEnd,
+      {
+        fill: shape.props.fill,
+        isClosed: shape.props.isClosed,
+        margin: input.margin,
+      },
+    );
+  }
+
+  repairLoadedShape(shape: DrawShapeRecord): DrawShapeRecord | null {
+    const geometry = getDrawShapeLocalGeometry(shape);
+    const hasCanonicalOrigin =
+      geometry.pointBounds.x === 0 && geometry.pointBounds.y === 0;
+    const hasCanonicalTransform =
+      shape.rotation === 0 && shape.scaleX === 1 && shape.scaleY === 1;
+
+    if (hasCanonicalOrigin && hasCanonicalTransform) {
+      return null;
+    }
+
+    const normalized = normalizeTransformedDrawShape(shape);
+
+    return {
+      ...shape,
+      x: normalized.x,
+      y: normalized.y,
+      rotation: 0,
+      scaleX: 1,
+      scaleY: 1,
+      props: {
+        ...shape.props,
+        segments: cloneDrawShapeSegmentsForUpdate(normalized.segments),
+      },
+    };
+  }
+}