@yuzhouu/canvas-kit 0.1.2

package/_vendor/plugin-draw/drawHitTest.ts

@@ -0,0 +1,271 @@
+import { Vec } from "@land/canvas-core";
+import { drawPointToVec } from "./drawPath";
+import type { DrawShapeGeometry } from "./drawShapeGeometry";
+import type { DrawShapePoint } from "./types";
+
+interface DrawShapeHitTestOptions {
+  fill?: string;
+  isClosed?: boolean;
+}
+
+const HIT_TEST_MARGIN = 4;
+
+function distanceToSegment(point: Vec, start: Vec, end: Vec): number {
+  const delta = end.sub(start);
+  const lengthSquared = delta.len2();
+  if (lengthSquared === 0) {
+    return point.dist(start);
+  }
+
+  const t = Math.max(
+    0,
+    Math.min(
+      1,
+      ((point.x - start.x) * delta.x + (point.y - start.y) * delta.y) /
+        lengthSquared,
+    ),
+  );
+  const projection = new Vec(start.x + delta.x * t, start.y + delta.y * t);
+  return point.dist(projection);
+}
+
+function distanceBetweenSegments(
+  firstStart: Vec,
+  firstEnd: Vec,
+  secondStart: Vec,
+  secondEnd: Vec,
+): number {
+  if (doSegmentsIntersect(firstStart, firstEnd, secondStart, secondEnd)) {
+    return 0;
+  }
+
+  return Math.min(
+    distanceToSegment(firstStart, secondStart, secondEnd),
+    distanceToSegment(firstEnd, secondStart, secondEnd),
+    distanceToSegment(secondStart, firstStart, firstEnd),
+    distanceToSegment(secondEnd, firstStart, firstEnd),
+  );
+}
+
+function doSegmentsIntersect(
+  firstStart: Vec,
+  firstEnd: Vec,
+  secondStart: Vec,
+  secondEnd: Vec,
+): boolean {
+  const first = firstEnd.sub(firstStart);
+  const second = secondEnd.sub(secondStart);
+  const denominator = first.x * second.y - first.y * second.x;
+  if (Math.abs(denominator) < 1e-8) {
+    return false;
+  }
+
+  const delta = secondStart.sub(firstStart);
+  const t = (delta.x * second.y - delta.y * second.x) / denominator;
+  const u = (delta.x * first.y - delta.y * first.x) / denominator;
+
+  return t >= 0 && t <= 1 && u >= 0 && u <= 1;
+}
+
+function isPointInPolygon(point: Vec, polygon: readonly Vec[]): boolean {
+  let inside = false;
+
+  for (
+    let index = 0, previousIndex = polygon.length - 1;
+    index < polygon.length;
+    previousIndex = index, index += 1
+  ) {
+    const current = polygon[index];
+    const previous = polygon[previousIndex];
+    if (!current || !previous) {
+      continue;
+    }
+
+    const intersects =
+      current.y > point.y !== previous.y > point.y &&
+      point.x <
+        ((previous.x - current.x) * (point.y - current.y)) /
+          (previous.y - current.y) +
+          current.x;
+
+    if (intersects) {
+      inside = !inside;
+    }
+  }
+
+  return inside;
+}
+
+function distanceToClosedPolygon(point: Vec, polygon: readonly Vec[]): number {
+  if (polygon.length === 0) {
+    return Number.POSITIVE_INFINITY;
+  }
+
+  let nearestDistance = Number.POSITIVE_INFINITY;
+  for (let index = 0; index < polygon.length; index += 1) {
+    const start = polygon[index];
+    const end = polygon[(index + 1) % polygon.length];
+    if (!start || !end) {
+      continue;
+    }
+    nearestDistance = Math.min(
+      nearestDistance,
+      distanceToSegment(point, start, end),
+    );
+  }
+
+  return nearestDistance;
+}
+
+function doesSegmentHitClosedPolygon(
+  start: Vec,
+  end: Vec,
+  polygon: readonly Vec[],
+  margin: number,
+): boolean {
+  if (polygon.length === 0) {
+    return false;
+  }
+  if (isPointInPolygon(start, polygon) || isPointInPolygon(end, polygon)) {
+    return true;
+  }
+
+  for (let index = 0; index < polygon.length; index += 1) {
+    const edgeStart = polygon[index];
+    const edgeEnd = polygon[(index + 1) % polygon.length];
+    if (!edgeStart || !edgeEnd) {
+      continue;
+    }
+    if (distanceBetweenSegments(start, end, edgeStart, edgeEnd) <= margin) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+function distanceToDrawCenterline(
+  point: Vec,
+  points: readonly DrawShapePoint[],
+  isClosed: boolean,
+): number {
+  if (points.length === 0) {
+    return Number.POSITIVE_INFINITY;
+  }
+
+  if (points.length === 1) {
+    return point.dist(drawPointToVec(points[0]!));
+  }
+
+  let nearestDistance = Number.POSITIVE_INFINITY;
+  for (let index = 1; index < points.length; index += 1) {
+    const start = points[index - 1];
+    const end = points[index];
+    if (!start || !end) {
+      continue;
+    }
+    nearestDistance = Math.min(
+      nearestDistance,
+      distanceToSegment(point, drawPointToVec(start), drawPointToVec(end)),
+    );
+  }
+
+  if (isClosed && points.length >= 3) {
+    nearestDistance = Math.min(
+      nearestDistance,
+      distanceToSegment(
+        point,
+        drawPointToVec(points[points.length - 1]!),
+        drawPointToVec(points[0]!),
+      ),
+    );
+  }
+
+  return nearestDistance;
+}
+
+export function hitTestDrawShapeGeometry(
+  geometry: Pick<
+    DrawShapeGeometry,
+    "outlinePolygons" | "outlineVertices" | "normalizedPoints"
+  >,
+  strokeWidth: number,
+  point: Vec,
+  options: DrawShapeHitTestOptions = {},
+): boolean {
+  if (
+    options.isClosed &&
+    options.fill !== undefined &&
+    options.fill !== "transparent" &&
+    geometry.normalizedPoints.length >= 3 &&
+    isPointInPolygon(
+      point,
+      geometry.normalizedPoints.map(drawPointToVec),
+    )
+  ) {
+    return true;
+  }
+
+  if (
+    options.isClosed &&
+    distanceToDrawCenterline(point, geometry.normalizedPoints, true) <=
+      Math.max(HIT_TEST_MARGIN, strokeWidth * 0.5)
+  ) {
+    return true;
+  }
+
+  if (geometry.outlineVertices.length === 0) {
+    return false;
+  }
+
+  for (const polygon of geometry.outlinePolygons) {
+    if (isPointInPolygon(point, polygon)) {
+      return true;
+    }
+
+    if (
+      distanceToClosedPolygon(point, polygon) <=
+      Math.max(HIT_TEST_MARGIN, strokeWidth * 0.5)
+    ) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+export function hitTestDrawShapeLineSegmentGeometry(
+  geometry: Pick<
+    DrawShapeGeometry,
+    "outlinePolygons" | "outlineVertices" | "normalizedPoints"
+  >,
+  strokeWidth: number,
+  start: Vec,
+  end: Vec,
+  options: DrawShapeHitTestOptions & { margin?: number } = {},
+): boolean {
+  const margin = Math.max(HIT_TEST_MARGIN, strokeWidth * 0.5, options.margin ?? 0);
+
+  if (
+    options.isClosed &&
+    options.fill !== undefined &&
+    options.fill !== "transparent" &&
+    geometry.normalizedPoints.length >= 3 &&
+    doesSegmentHitClosedPolygon(
+      start,
+      end,
+      geometry.normalizedPoints.map(drawPointToVec),
+      margin,
+    )
+  ) {
+    return true;
+  }
+
+  if (geometry.outlineVertices.length === 0) {
+    return false;
+  }
+
+  return geometry.outlinePolygons.some((polygon) =>
+    doesSegmentHitClosedPolygon(start, end, polygon, margin),
+  );
+}

package/_vendor/plugin-draw/drawInterpolation.ts

@@ -0,0 +1,250 @@
+import { Vec } from "@land/canvas-core";
+import { cloneDrawPoint, drawPointToVec } from "./drawPath";
+import { cloneDrawSegments } from "./drawSegments";
+import {
+  getDrawShapePagePoints,
+  normalizeDrawShapeFromPagePoints,
+} from "./drawGeometry";
+import type { DrawShapePoint, DrawShapeRecord } from "./types";
+
+export interface DrawShapeInterpolationOptions {
+  pointCount?: number;
+}
+
+interface DrawInterpolationSample {
+  point: DrawShapePoint;
+  segmentWeight: number;
+}
+
+interface DrawInterpolationSegment {
+  start: DrawShapePoint;
+  end: DrawShapePoint;
+  length: number;
+  segmentWeight: number;
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}
+
+function lerp(start: number, end: number, t: number): number {
+  return start + (end - start) * t;
+}
+
+function lerpOptionalNumber(
+  start: number | undefined,
+  end: number | undefined,
+  t: number,
+): number | undefined {
+  if (start === undefined && end === undefined) {
+    return undefined;
+  }
+
+  const startValue = start ?? end ?? 0;
+  const endValue = end ?? start ?? 0;
+  return lerp(startValue, endValue, t);
+}
+
+function getDrawInterpolationPointCount(
+  fromPointCount: number,
+  toPointCount: number,
+  requestedPointCount?: number,
+): number {
+  if (
+    typeof requestedPointCount === "number" &&
+    Number.isFinite(requestedPointCount)
+  ) {
+    return Math.max(2, Math.round(requestedPointCount));
+  }
+
+  return Math.max(2, fromPointCount, toPointCount, 12);
+}
+
+function getDrawInterpolationSegments(
+  points: readonly DrawShapePoint[],
+  isClosed: boolean,
+): DrawInterpolationSegment[] {
+  const segments: DrawInterpolationSegment[] = [];
+
+  for (let index = 1; index < points.length; index += 1) {
+    const start = points[index - 1];
+    const end = points[index];
+    if (!start || !end) {
+      continue;
+    }
+
+    segments.push({
+      start,
+      end,
+      length: drawPointToVec(start).dist(drawPointToVec(end)),
+      segmentWeight: end.segment === "straight" ? 1 : 0,
+    });
+  }
+
+  if (isClosed && points.length >= 3) {
+    const start = points[points.length - 1];
+    const end = points[0];
+    if (start && end) {
+      segments.push({
+        start,
+        end,
+        length: drawPointToVec(start).dist(drawPointToVec(end)),
+        segmentWeight: 1,
+      });
+    }
+  }
+
+  return segments;
+}
+
+function resampleDrawShapePoints(
+  points: readonly DrawShapePoint[],
+  sampleCount: number,
+  isClosed: boolean,
+): DrawInterpolationSample[] {
+  const clampedSampleCount = Math.max(2, Math.round(sampleCount));
+
+  if (points.length === 0) {
+    return [];
+  }
+
+  if (points.length === 1) {
+    return Array.from({ length: clampedSampleCount }, () => ({
+      point: cloneDrawPoint(points[0]!),
+      segmentWeight: 0,
+    }));
+  }
+
+  const segments = getDrawInterpolationSegments(points, isClosed);
+  const totalLength = segments.reduce((sum, segment) => sum + segment.length, 0);
+
+  if (segments.length === 0 || totalLength <= 1e-6) {
+    return Array.from({ length: clampedSampleCount }, () => ({
+      point: cloneDrawPoint(points[0]!),
+      segmentWeight: 0,
+    }));
+  }
+
+  return Array.from({ length: clampedSampleCount }, (_, sampleIndex) => {
+    const distance =
+      isClosed
+        ? (sampleIndex / clampedSampleCount) * totalLength
+        : (sampleIndex / Math.max(clampedSampleCount - 1, 1)) * totalLength;
+    let remainingDistance = distance;
+    let segment = segments[segments.length - 1]!;
+
+    for (const candidate of segments) {
+      if (remainingDistance <= candidate.length || candidate === segment) {
+        segment = candidate;
+        break;
+      }
+      remainingDistance -= candidate.length;
+    }
+
+    const segmentT =
+      segment.length <= 1e-6 ? 0 : clamp(remainingDistance / segment.length, 0, 1);
+    const start = drawPointToVec(segment.start);
+    const end = drawPointToVec(segment.end);
+    const point = Vec.Lrp(start, end, segmentT);
+    const pressure = lerpOptionalNumber(
+      segment.start.pressure,
+      segment.end.pressure,
+      segmentT,
+    );
+
+    return {
+      point: {
+        x: point.x,
+        y: point.y,
+        ...(pressure === undefined ? null : { pressure }),
+      },
+      segmentWeight: segment.segmentWeight,
+    };
+  });
+}
+
+export function interpolateDrawShapeRecords(
+  from: DrawShapeRecord,
+  to: DrawShapeRecord,
+  t: number,
+  options: DrawShapeInterpolationOptions = {},
+): DrawShapeRecord {
+  const clampedT = clamp(t, 0, 1);
+  const interpolateAsClosed = from.props.isClosed && to.props.isClosed;
+  const fromPagePoints = getDrawShapePagePoints(from);
+  const toPagePoints = getDrawShapePagePoints(to);
+  const sampleCount = getDrawInterpolationPointCount(
+    fromPagePoints.length,
+    toPagePoints.length,
+    options.pointCount,
+  );
+  const fromSamples = resampleDrawShapePoints(
+    fromPagePoints,
+    sampleCount,
+    interpolateAsClosed,
+  );
+  const toSamples = resampleDrawShapePoints(
+    toPagePoints,
+    sampleCount,
+    interpolateAsClosed,
+  );
+  const interpolatedPagePoints = fromSamples.map((sample, index) => {
+    const target = toSamples[index] ?? toSamples[toSamples.length - 1] ?? sample;
+    const point = Vec.Lrp(
+      drawPointToVec(sample.point),
+      drawPointToVec(target.point),
+      clampedT,
+    );
+    const pressure = lerpOptionalNumber(
+      sample.point.pressure,
+      target.point.pressure,
+      clampedT,
+    );
+    const segmentWeight = lerp(
+      sample.segmentWeight,
+      target.segmentWeight,
+      clampedT,
+    );
+
+    return {
+      x: point.x,
+      y: point.y,
+      ...(pressure === undefined ? null : { pressure }),
+      ...(index > 0 && segmentWeight >= 0.5
+        ? { segment: "straight" as const }
+        : null),
+    };
+  });
+  const nextIsClosed = clampedT < 0.5 ? from.props.isClosed : to.props.isClosed;
+  const nextIsPen =
+    clampedT < 0.5 ? (from.props.isPen ?? false) : (to.props.isPen ?? false);
+  const nextStrokeWidth = Math.max(
+    1,
+    lerp(from.props.strokeWidth, to.props.strokeWidth, clampedT),
+  );
+  const normalized = normalizeDrawShapeFromPagePoints(
+    interpolatedPagePoints,
+    nextStrokeWidth,
+    nextIsPen,
+    nextIsClosed,
+  );
+  const styleSource = clampedT < 0.5 ? from : to;
+
+  return {
+    ...styleSource,
+    id: from.id,
+    x: normalized.x,
+    y: normalized.y,
+    rotation: 0,
+    scaleX: 1,
+    scaleY: 1,
+    opacity: lerp(from.opacity, to.opacity, clampedT),
+    props: {
+      ...styleSource.props,
+      segments: cloneDrawSegments(normalized.segments),
+      strokeWidth: nextStrokeWidth,
+      isClosed: nextIsClosed,
+      isPen: nextIsPen,
+    },
+  };
+}