@yuzhouu/canvas-kit 0.1.2

package/_vendor/plugin-draw/drawPath.ts

@@ -0,0 +1,550 @@
+import { Vec } from "@land/canvas-core";
+import type { DrawShapePoint, DrawShapeSegment } from "./types";
+
+export interface DrawPointSamplingOptions {
+  minPointDistance: number;
+  positionBlend: number;
+  pressureBlend: number;
+  maxPointCount: number;
+}
+
+export interface DrawInputPointGuardOptions {
+  minPointDistance: number;
+  pressureDeltaThreshold: number;
+  softMaxPointCount: number;
+  hardMaxPointCount: number;
+  maxDistanceMultiplier: number;
+}
+
+export interface DrawPointSamplingResult {
+  points: DrawShapePoint[];
+  rawPointCount: number;
+  sampledPointCount: number;
+  maxPointCount: number;
+  reduced: boolean;
+  capped: boolean;
+}
+
+function formatNumber(value: number): string {
+  return Number.isInteger(value) ? `${value}` : `${Number(value.toFixed(2))}`;
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}
+
+export function getDrawPointSamplingLimit(isPen: boolean): number {
+  return isPen ? 640 : 480;
+}
+
+export function getDrawSegmentPointLimit(isPen: boolean): number {
+  return getDrawPointSamplingLimit(isPen);
+}
+
+function getAdaptiveMinPointDistance(
+  pointCount: number,
+  options: DrawInputPointGuardOptions,
+): number {
+  if (pointCount <= options.softMaxPointCount) {
+    return options.minPointDistance;
+  }
+
+  const overflowRatio = clamp(
+    (pointCount - options.softMaxPointCount) /
+      Math.max(options.hardMaxPointCount - options.softMaxPointCount, 1),
+    0,
+    1,
+  );
+
+  return options.minPointDistance * (1 + overflowRatio * options.maxDistanceMultiplier);
+}
+
+function areDrawPointsEqual(a: DrawShapePoint, b: DrawShapePoint): boolean {
+  return (
+    a.x === b.x &&
+    a.y === b.y &&
+    a.pressure === b.pressure &&
+    a.segment === b.segment
+  );
+}
+
+export function drawPointToVec(point: DrawShapePoint): Vec {
+  return new Vec(point.x, point.y);
+}
+
+export function cloneDrawPoint(point: DrawShapePoint): DrawShapePoint {
+  return {
+    x: point.x,
+    y: point.y,
+    ...(point.pressure === undefined ? null : { pressure: point.pressure }),
+    ...(point.segment === undefined ? null : { segment: point.segment }),
+  };
+}
+
+export function cloneDrawSegment(segment: DrawShapeSegment): DrawShapeSegment {
+  return {
+    points: segment.points.map(cloneDrawPoint),
+  };
+}
+
+export function getFlattenedDrawSegmentPoints(
+  segments: readonly DrawShapeSegment[],
+): DrawShapePoint[] {
+  const points: DrawShapePoint[] = [];
+  for (const segment of segments) {
+    points.push(...segment.points.map(cloneDrawPoint));
+  }
+  return points;
+}
+
+export function getDrawSegmentsFromPoints(
+  points: readonly DrawShapePoint[],
+): DrawShapeSegment[] {
+  return [{ points: points.map(cloneDrawPoint) }];
+}
+
+function normalizePressure(pressure: number | undefined): number | undefined {
+  if (pressure === undefined || !Number.isFinite(pressure)) {
+    return undefined;
+  }
+
+  return clamp(pressure, 0.05, 1);
+}
+
+export function getDrawInputPointGuardOptions(
+  strokeWidth: number,
+  isPen: boolean,
+): DrawInputPointGuardOptions {
+  return isPen
+    ? {
+        minPointDistance: Math.max(0.12, strokeWidth * 0.08),
+        pressureDeltaThreshold: 0.035,
+        softMaxPointCount: 1600,
+        hardMaxPointCount: 3200,
+        maxDistanceMultiplier: 2.5,
+      }
+    : {
+        minPointDistance: Math.max(0.3, strokeWidth * 0.14),
+        pressureDeltaThreshold: 0.08,
+        softMaxPointCount: 900,
+        hardMaxPointCount: 2200,
+        maxDistanceMultiplier: 6,
+      };
+}
+
+export function appendGuardedDrawPoint(
+  points: DrawShapePoint[],
+  point: DrawShapePoint,
+  options: DrawInputPointGuardOptions,
+): void {
+  const candidate = cloneDrawPoint(point);
+  const previous = points[points.length - 1];
+
+  if (!previous) {
+    points.push(candidate);
+    return;
+  }
+
+  if (areDrawPointsEqual(previous, candidate)) {
+    return;
+  }
+
+  const minDistance = getAdaptiveMinPointDistance(points.length, options);
+  const dx = candidate.x - previous.x;
+  const dy = candidate.y - previous.y;
+  const pressureDelta = Math.abs(
+    (candidate.pressure ?? 0) - (previous.pressure ?? 0),
+  );
+
+  if (
+    dx * dx + dy * dy < minDistance * minDistance &&
+    pressureDelta < options.pressureDeltaThreshold
+  ) {
+    points[points.length - 1] = candidate;
+    return;
+  }
+
+  points.push(candidate);
+}
+
+function getDrawPointsWithinStableLimit(
+  points: readonly DrawShapePoint[],
+  maxPointCount: number,
+): DrawShapePoint[] {
+  const limit = Math.max(2, Math.floor(maxPointCount));
+  if (points.length <= limit) {
+    return points.map(cloneDrawPoint);
+  }
+
+  const removalCount = points.length - limit;
+  const removalIndices = getStableDrawPointRemovalIndices(
+    points,
+    removalCount,
+  );
+
+  return points
+    .filter((_point, index) => !removalIndices.has(index))
+    .map(cloneDrawPoint);
+}
+
+function getStableDrawPointRemovalIndices(
+  points: readonly DrawShapePoint[],
+  removalCount: number,
+): Set<number> {
+  let candidates = getStableDrawPointRemovalCandidates(points, true);
+  if (candidates.length < removalCount) {
+    candidates = getStableDrawPointRemovalCandidates(points, false);
+  }
+
+  return new Set(
+    candidates
+      .slice(0, removalCount)
+      .map((candidate) => candidate.index),
+  );
+}
+
+function getStableDrawPointRemovalCandidates(
+  points: readonly DrawShapePoint[],
+  preserveStraightSegmentPoints: boolean,
+): { index: number; score: number }[] {
+  const candidates: { index: number; score: number }[] = [];
+
+  for (let index = 1; index < points.length - 1; index += 1) {
+    if (
+      preserveStraightSegmentPoints &&
+      isStraightSegmentControlPoint(points, index)
+    ) {
+      continue;
+    }
+
+    const point = points[index];
+    const previous = points[index - 1];
+    const next = points[index + 1];
+    if (!point || !previous || !next) {
+      continue;
+    }
+
+    candidates.push({
+      index,
+      score: getDrawPointRemovalCost(point, previous, next),
+    });
+  }
+
+  candidates.sort(
+    (a, b) =>
+      a.score - b.score ||
+      getDrawPointRemovalTieBreakScore(a.index) -
+        getDrawPointRemovalTieBreakScore(b.index),
+  );
+
+  return candidates;
+}
+
+function getDrawPointRemovalTieBreakScore(index: number): number {
+  return index;
+}
+
+function isStraightSegmentControlPoint(
+  points: readonly DrawShapePoint[],
+  index: number,
+): boolean {
+  return (
+    points[index]?.segment === "straight" ||
+    points[index + 1]?.segment === "straight"
+  );
+}
+
+function getDrawPointRemovalCost(
+  point: DrawShapePoint,
+  previous: DrawShapePoint,
+  next: DrawShapePoint,
+): number {
+  const positionCost = getPointToSegmentDistanceSquared(point, previous, next);
+  const pressureCost = getPressureRemovalCost(point, previous, next);
+  return positionCost + pressureCost * pressureCost;
+}
+
+function getPointToSegmentDistanceSquared(
+  point: DrawShapePoint,
+  start: DrawShapePoint,
+  end: DrawShapePoint,
+): number {
+  const dx = end.x - start.x;
+  const dy = end.y - start.y;
+  const lengthSquared = dx * dx + dy * dy;
+  if (lengthSquared === 0) {
+    const pointDx = point.x - start.x;
+    const pointDy = point.y - start.y;
+    return pointDx * pointDx + pointDy * pointDy;
+  }
+
+  const t = clamp(
+    ((point.x - start.x) * dx + (point.y - start.y) * dy) / lengthSquared,
+    0,
+    1,
+  );
+  const projectedX = start.x + dx * t;
+  const projectedY = start.y + dy * t;
+  const pointDx = point.x - projectedX;
+  const pointDy = point.y - projectedY;
+  return pointDx * pointDx + pointDy * pointDy;
+}
+
+function getPressureRemovalCost(
+  point: DrawShapePoint,
+  previous: DrawShapePoint,
+  next: DrawShapePoint,
+): number {
+  if (point.pressure === undefined) {
+    return 0;
+  }
+
+  const previousPressure = previous.pressure ?? point.pressure;
+  const nextPressure = next.pressure ?? point.pressure;
+  return Math.abs(point.pressure - (previousPressure + nextPressure) / 2) * 8;
+}
+
+export function sampleDrawPoints(
+  points: readonly DrawShapePoint[],
+  options: DrawPointSamplingOptions,
+): DrawPointSamplingResult {
+  if (points.length <= 1) {
+    return {
+      points: points.map(cloneDrawPoint),
+      rawPointCount: points.length,
+      sampledPointCount: points.length,
+      maxPointCount: options.maxPointCount,
+      reduced: false,
+      capped: false,
+    };
+  }
+
+  const sampled: DrawShapePoint[] = [cloneDrawPoint(points[0]!)];
+  const minDistanceSquared =
+    options.minPointDistance * options.minPointDistance;
+  let previousSmoothedPoint = drawPointToVec(points[0]!);
+  let previousSmoothedPressure = normalizePressure(points[0]!.pressure);
+
+  for (let index = 1; index < points.length; index += 1) {
+    const point = points[index];
+    if (!point) {
+      continue;
+    }
+
+    const rawPoint = drawPointToVec(point);
+    const rawPressure = normalizePressure(point.pressure);
+    const isLastPoint = index === points.length - 1;
+    const isStraightSegment = point.segment === "straight";
+    const smoothedPoint =
+      isLastPoint || isStraightSegment
+        ? rawPoint
+        : Vec.Lrp(previousSmoothedPoint, rawPoint, options.positionBlend);
+    const smoothedPressure =
+      isStraightSegment
+        ? rawPressure
+        : rawPressure === undefined
+          ? undefined
+          : previousSmoothedPressure === undefined
+          ? rawPressure
+          : previousSmoothedPressure +
+            (rawPressure - previousSmoothedPressure) * options.pressureBlend;
+
+    previousSmoothedPoint = smoothedPoint;
+    previousSmoothedPressure = smoothedPressure;
+
+    const candidate: DrawShapePoint =
+      smoothedPressure === undefined
+        ? {
+            x: smoothedPoint.x,
+            y: smoothedPoint.y,
+            ...(point.segment === undefined ? null : { segment: point.segment }),
+          }
+        : {
+            x: smoothedPoint.x,
+            y: smoothedPoint.y,
+            pressure: smoothedPressure,
+            ...(point.segment === undefined ? null : { segment: point.segment }),
+          };
+
+    const previousAccepted = sampled[sampled.length - 1];
+    if (!previousAccepted) {
+      sampled.push(candidate);
+      continue;
+    }
+
+    const dx = candidate.x - previousAccepted.x;
+    const dy = candidate.y - previousAccepted.y;
+    const pressureDelta = Math.abs(
+      (candidate.pressure ?? 0) - (previousAccepted.pressure ?? 0),
+    );
+
+    if (dx * dx + dy * dy < minDistanceSquared) {
+      if (isStraightSegment) {
+        if (areDrawPointsEqual(previousAccepted, candidate)) {
+          continue;
+        }
+        sampled.push(candidate);
+        continue;
+      }
+
+      if (pressureDelta > 0.08 || isLastPoint) {
+        sampled[sampled.length - 1] = candidate;
+      }
+      continue;
+    }
+
+    sampled.push(candidate);
+  }
+
+  const wasOverLimit = sampled.length > options.maxPointCount;
+  const clamped = getDrawPointsWithinStableLimit(
+    sampled,
+    options.maxPointCount,
+  );
+
+  return {
+    points: clamped,
+    rawPointCount: points.length,
+    sampledPointCount: clamped.length,
+    maxPointCount: options.maxPointCount,
+    reduced: clamped.length < points.length,
+    capped: wasOverLimit,
+  };
+}
+
+export function getDrawCenterlinePathFromPoints(
+  points: readonly DrawShapePoint[],
+): string | null {
+  if (points.length === 0) {
+    return null;
+  }
+
+  if (points.length === 1) {
+    const point = points[0]!;
+    return `M ${formatNumber(point.x)} ${formatNumber(point.y)}`;
+  }
+
+  if (points.length === 2) {
+    const start = points[0]!;
+    const end = points[1]!;
+    return [
+      `M ${formatNumber(start.x)} ${formatNumber(start.y)}`,
+      `L ${formatNumber(end.x)} ${formatNumber(end.y)}`,
+    ].join(" ");
+  }
+
+  const commands: string[] = [];
+  const first = points[0]!;
+  commands.push(`M ${formatNumber(first.x)} ${formatNumber(first.y)}`);
+
+  for (let index = 1; index < points.length; index += 1) {
+    const current = points[index];
+    if (!current) {
+      continue;
+    }
+
+    if (current.segment === "straight") {
+      commands.push(`L ${formatNumber(current.x)} ${formatNumber(current.y)}`);
+      continue;
+    }
+
+    const next = points[index + 1];
+    if (!next || next.segment === "straight") {
+      if (canSmoothFreeRunEnd(points, index)) {
+        const previous = points[index - 1]!;
+        commands.push(
+          `Q ${formatNumber(previous.x)} ${formatNumber(previous.y)} ${formatNumber(current.x)} ${formatNumber(current.y)}`,
+        );
+      } else {
+        commands.push(`L ${formatNumber(current.x)} ${formatNumber(current.y)}`);
+      }
+      continue;
+    }
+
+    const midpoint = Vec.Med(drawPointToVec(current), drawPointToVec(next));
+    commands.push(
+      `Q ${formatNumber(current.x)} ${formatNumber(current.y)} ${formatNumber(midpoint.x)} ${formatNumber(midpoint.y)}`,
+    );
+  }
+
+  return commands.join(" ");
+}
+
+export function getClosedDrawCenterlinePathFromPoints(
+  points: readonly DrawShapePoint[],
+): string | null {
+  if (points.length < 3) {
+    return null;
+  }
+
+  const centerlinePath = getDrawCenterlinePathFromPoints(points);
+  if (!centerlinePath) {
+    return null;
+  }
+
+  return `${centerlinePath} Z`;
+}
+
+function canSmoothFreeRunEnd(
+  points: readonly DrawShapePoint[],
+  index: number,
+): boolean {
+  return (
+    index >= 2 &&
+    points[index - 1]?.segment !== "straight" &&
+    points[index - 2]?.segment !== "straight"
+  );
+}
+
+export function getClosedSvgPathFromVecs(points: readonly Vec[]): string | null {
+  if (points.length === 0) {
+    return null;
+  }
+
+  const [first, ...rest] = points;
+  if (!first) {
+    return null;
+  }
+
+  return [
+    `M ${formatNumber(first.x)} ${formatNumber(first.y)}`,
+    ...rest.map(
+      (point) => `L ${formatNumber(point.x)} ${formatNumber(point.y)}`,
+    ),
+    "Z",
+  ].join(" ");
+}
+
+export function getSmoothClosedSvgPathFromVecs(
+  points: readonly Vec[],
+): string | null {
+  if (points.length < 3) {
+    return getClosedSvgPathFromVecs(points);
+  }
+
+  const first = points[0];
+  const last = points[points.length - 1];
+  if (!first || !last) {
+    return null;
+  }
+
+  const start = Vec.Med(last, first);
+  const commands: string[] = [
+    `M ${formatNumber(start.x)} ${formatNumber(start.y)}`,
+  ];
+  for (let index = 0; index < points.length; index += 1) {
+    const current = points[index];
+    const next = points[(index + 1) % points.length];
+    if (!current || !next) {
+      continue;
+    }
+
+    const midpoint = Vec.Med(current, next);
+    commands.push(
+      `Q ${formatNumber(current.x)} ${formatNumber(current.y)} ${formatNumber(midpoint.x)} ${formatNumber(midpoint.y)}`,
+    );
+  }
+
+  commands.push("Z");
+  return commands.join(" ");
+}

package/_vendor/plugin-draw/drawSegments.ts

@@ -0,0 +1,106 @@
+import { Box, Vec } from "@land/canvas-core";
+import {
+  cloneDrawPoint,
+  cloneDrawSegment as cloneDrawSegmentImpl,
+  drawPointToVec,
+} from "./drawPath";
+import type { DrawShapePoint, DrawShapeSegment } from "./types";
+
+export function cloneDrawPoints(
+  points: readonly DrawShapePoint[],
+): DrawShapePoint[] {
+  return points.map(cloneDrawPoint);
+}
+
+export function cloneDrawSegments(
+  segments: readonly DrawShapeSegment[],
+): DrawShapeSegment[] {
+  return segments.map(cloneDrawSegment);
+}
+
+export function cloneDrawSegment(segment: DrawShapeSegment): DrawShapeSegment {
+  return cloneDrawSegmentImpl(segment);
+}
+
+export function translateDrawPoints(
+  points: readonly DrawShapePoint[],
+  dx: number,
+  dy: number,
+): DrawShapePoint[] {
+  return points.map((point) => ({
+    x: point.x + dx,
+    y: point.y + dy,
+    ...(point.pressure === undefined ? null : { pressure: point.pressure }),
+    ...(point.segment === undefined ? null : { segment: point.segment }),
+  }));
+}
+
+export function translateDrawSegments(
+  segments: readonly DrawShapeSegment[],
+  dx: number,
+  dy: number,
+): DrawShapeSegment[] {
+  return segments.map((segment) => ({
+    points: translateDrawPoints(segment.points, dx, dy),
+  }));
+}
+
+export function mapDrawPointCoordinates(
+  points: readonly DrawShapePoint[],
+  mapper: (point: Vec, index: number) => Vec,
+): DrawShapePoint[] {
+  return points.map((point, index) => {
+    const mapped = mapper(drawPointToVec(point), index);
+    return {
+      x: mapped.x,
+      y: mapped.y,
+      ...(point.pressure === undefined ? null : { pressure: point.pressure }),
+      ...(point.segment === undefined ? null : { segment: point.segment }),
+    };
+  });
+}
+
+export function mapDrawSegmentCoordinates(
+  segments: readonly DrawShapeSegment[],
+  mapper: (point: Vec, segmentIndex: number, pointIndex: number) => Vec,
+): DrawShapeSegment[] {
+  return segments.map((segment, segmentIndex) => ({
+    points: segment.points.map((point, pointIndex) => {
+      const mapped = mapper(drawPointToVec(point), segmentIndex, pointIndex);
+      return {
+        x: mapped.x,
+        y: mapped.y,
+        ...(point.pressure === undefined ? null : { pressure: point.pressure }),
+        ...(point.segment === undefined ? null : { segment: point.segment }),
+      };
+    }),
+  }));
+}
+
+export function mapDrawShapePointsToBounds(
+  points: readonly DrawShapePoint[],
+  fromBounds: Box,
+  toBounds: Box,
+): DrawShapePoint[] {
+  const fromWidth = fromBounds.w === 0 ? 1 : fromBounds.w;
+  const fromHeight = fromBounds.h === 0 ? 1 : fromBounds.h;
+  const toWidth = toBounds.w === 0 ? 1 : toBounds.w;
+  const toHeight = toBounds.h === 0 ? 1 : toBounds.h;
+
+  return points.map((point) => ({
+    x: toBounds.minX + ((point.x - fromBounds.minX) / fromWidth) * toWidth,
+    y: toBounds.minY + ((point.y - fromBounds.minY) / fromHeight) * toHeight,
+    ...(point.pressure === undefined ? null : { pressure: point.pressure }),
+    ...(point.segment === undefined ? null : { segment: point.segment }),
+  }));
+}
+
+export function mapDrawShapeSegmentsToBounds(
+  segments: readonly DrawShapeSegment[],
+  fromBounds: Box,
+  toBounds: Box,
+): DrawShapeSegment[] {
+  return segments.map((segment) => ({
+    points: mapDrawShapePointsToBounds(segment.points, fromBounds, toBounds),
+  }));
+}

package/_vendor/plugin-draw/drawSelectionTransform.ts

@@ -0,0 +1,67 @@
+import {
+  Box,
+  Vec,
+  mirrorSelectionLocalPoint,
+  selectionLocalPointToPagePoint,
+  selectionPagePointToLocalPoint,
+  type SelectionMirrorAxis,
+} from "@land/canvas-core";
+import { mapDrawSegmentCoordinates } from "./drawSegments";
+import type { DrawShapeSegment } from "./types";
+
+export interface DrawSelectionRotationTransform {
+  selectionRotation: number;
+  selectionRotationCenter: Vec;
+}
+
+export interface DrawSelectionResizeInput
+  extends DrawSelectionRotationTransform {
+  targetSelectionStrokeBounds: Box;
+  scaleX: number;
+  scaleY: number;
+}
+
+export interface DrawSelectionFlipInput extends DrawSelectionRotationTransform {
+  axis: SelectionMirrorAxis;
+  selectionMirrorBounds: Box;
+}
+
+function getSelectionTransform(input: DrawSelectionRotationTransform) {
+  return {
+    rotation: input.selectionRotation,
+    rotationCenter: input.selectionRotationCenter,
+  };
+}
+
+export function mapPageDrawSegmentsToSelectionLocal(
+  segments: readonly DrawShapeSegment[],
+  input: DrawSelectionRotationTransform,
+): DrawShapeSegment[] {
+  const transform = getSelectionTransform(input);
+  return mapDrawSegmentCoordinates(segments, (point) =>
+    selectionPagePointToLocalPoint(point, transform),
+  );
+}
+
+export function mapSelectionLocalDrawSegmentsToPage(
+  segments: readonly DrawShapeSegment[],
+  input: DrawSelectionRotationTransform,
+): DrawShapeSegment[] {
+  const transform = getSelectionTransform(input);
+  return mapDrawSegmentCoordinates(segments, (point) =>
+    selectionLocalPointToPagePoint(point, transform),
+  );
+}
+
+export function mirrorSelectionLocalDrawSegments(
+  segments: readonly DrawShapeSegment[],
+  input: DrawSelectionFlipInput,
+): DrawShapeSegment[] {
+  return mapDrawSegmentCoordinates(segments, (point) =>
+    mirrorSelectionLocalPoint({
+      axis: input.axis,
+      bounds: input.selectionMirrorBounds,
+      point,
+    }),
+  );
+}