@yuzhouu/canvas-kit 0.1.2

package/_vendor/canvas-core/editor/managers/snapGeometry.ts

@@ -0,0 +1,202 @@
+import { Box } from "../../geometry/Box";
+import { Vec } from "../../geometry/Vec";
+import type { SnapAxis } from "./snapTypes";
+
+export const EPSILON = 1e-8;
+
+export function areVecsEqual(left: Vec, right: Vec): boolean {
+  return left.x === right.x && left.y === right.y;
+}
+
+export function getBoxSnapPoints(bounds: Box): Vec[] {
+  return [
+    new Vec(bounds.minX, bounds.minY),
+    new Vec(bounds.center.x, bounds.minY),
+    new Vec(bounds.maxX, bounds.minY),
+    new Vec(bounds.minX, bounds.center.y),
+    bounds.center,
+    new Vec(bounds.maxX, bounds.center.y),
+    new Vec(bounds.minX, bounds.maxY),
+    new Vec(bounds.center.x, bounds.maxY),
+    new Vec(bounds.maxX, bounds.maxY),
+  ];
+}
+
+export function getAxisValue(point: Vec, axis: SnapAxis): number {
+  return axis === "x" ? point.x : point.y;
+}
+
+export function getAxisMin(bounds: Box, axis: SnapAxis): number {
+  return axis === "x" ? bounds.minX : bounds.minY;
+}
+
+export function getAxisMax(bounds: Box, axis: SnapAxis): number {
+  return axis === "x" ? bounds.maxX : bounds.maxY;
+}
+
+export function getAxisSize(bounds: Box, axis: SnapAxis): number {
+  return axis === "x" ? bounds.w : bounds.h;
+}
+
+export function getBreadthRange(bounds: Box, axis: SnapAxis): [number, number] {
+  return axis === "x"
+    ? [bounds.minY, bounds.maxY]
+    : [bounds.minX, bounds.maxX];
+}
+
+export function getRangeIntersection(
+  first: [number, number],
+  second: [number, number],
+): [number, number] | null {
+  const min = Math.max(first[0], second[0]);
+  const max = Math.min(first[1], second[1]);
+  return min <= max ? [min, max] : null;
+}
+
+export function rangesOverlap(
+  first: [number, number],
+  second: [number, number],
+): boolean {
+  return getRangeIntersection(first, second) !== null;
+}
+
+export function translateBounds(bounds: Box, delta: Vec): Box {
+  return new Box(bounds.x + delta.x, bounds.y + delta.y, bounds.w, bounds.h);
+}
+
+export function getAxisDelta(axis: SnapAxis, value: number): Vec {
+  return axis === "x" ? new Vec(value, 0) : new Vec(0, value);
+}
+
+export function translateBoundsOnAxis(
+  bounds: Box,
+  axis: SnapAxis,
+  value: number,
+): Box {
+  return translateBounds(bounds, getAxisDelta(axis, value));
+}
+
+export function translatePoints(points: Vec[], delta: Vec): Vec[] {
+  return points.map((point) => point.add(delta));
+}
+
+export function getBoxPagePoints(bounds: Box): Vec[] {
+  return [
+    new Vec(bounds.minX, bounds.minY),
+    new Vec(bounds.maxX, bounds.minY),
+    new Vec(bounds.maxX, bounds.maxY),
+    new Vec(bounds.minX, bounds.maxY),
+  ];
+}
+
+export function getBoxLocalOutline(bounds: Box): Vec[] {
+  return [
+    new Vec(bounds.minX, bounds.minY),
+    new Vec(bounds.maxX, bounds.minY),
+    new Vec(bounds.maxX, bounds.maxY),
+    new Vec(bounds.minX, bounds.maxY),
+  ];
+}
+
+export function getDistanceToSegmentSquared(
+  point: Vec,
+  segmentStart: Vec,
+  segmentEnd: Vec,
+): number {
+  const segment = segmentEnd.sub(segmentStart);
+  const lengthSquared = segment.len2();
+  if (lengthSquared <= EPSILON) {
+    return point.dist2(segmentStart);
+  }
+  const t = Math.max(
+    0,
+    Math.min(
+      1,
+      ((point.x - segmentStart.x) * segment.x +
+        (point.y - segmentStart.y) * segment.y) /
+        lengthSquared,
+    ),
+  );
+  return point.dist2(
+    new Vec(
+      segmentStart.x + segment.x * t,
+      segmentStart.y + segment.y * t,
+    ),
+  );
+}
+
+export function getNearestPointOnSegment(
+  point: Vec,
+  segmentStart: Vec,
+  segmentEnd: Vec,
+): Vec {
+  const segment = segmentEnd.sub(segmentStart);
+  const lengthSquared = segment.len2();
+  if (lengthSquared <= EPSILON) {
+    return segmentStart.clone();
+  }
+  const t = Math.max(
+    0,
+    Math.min(
+      1,
+      ((point.x - segmentStart.x) * segment.x +
+        (point.y - segmentStart.y) * segment.y) /
+        lengthSquared,
+    ),
+  );
+  return new Vec(
+    segmentStart.x + segment.x * t,
+    segmentStart.y + segment.y * t,
+  );
+}
+
+export function getNearestPointOnOutline(
+  point: Vec,
+  outline: readonly Vec[],
+): { point: Vec; distanceSquared: number } | null {
+  if (outline.length === 0) {
+    return null;
+  }
+  if (outline.length === 1) {
+    const onlyPoint = outline[0]!.clone();
+    return {
+      point: onlyPoint,
+      distanceSquared: point.dist2(onlyPoint),
+    };
+  }
+
+  let nearestPoint: Vec | null = null;
+  let nearestDistanceSquared = Number.POSITIVE_INFINITY;
+  const segmentCount = outline.length === 2 ? 1 : outline.length;
+  for (let index = 0; index < segmentCount; index += 1) {
+    const start = outline[index];
+    const end = outline[(index + 1) % outline.length];
+    if (!start || !end) {
+      continue;
+    }
+    const distanceSquared = getDistanceToSegmentSquared(point, start, end);
+    if (distanceSquared >= nearestDistanceSquared) {
+      continue;
+    }
+    nearestDistanceSquared = distanceSquared;
+    nearestPoint = getNearestPointOnSegment(point, start, end);
+  }
+
+  return nearestPoint
+    ? { point: nearestPoint, distanceSquared: nearestDistanceSquared }
+    : null;
+}
+
+export function dedupePoints(points: Vec[]): Vec[] {
+  const result: Vec[] = [];
+  const seen = new Set<string>();
+  for (const point of points) {
+    const key = `${point.x.toFixed(8)}:${point.y.toFixed(8)}`;
+    if (seen.has(key)) {
+      continue;
+    }
+    seen.add(key);
+    result.push(point);
+  }
+  return result;
+}

package/_vendor/canvas-core/editor/managers/snapIndicators.ts

@@ -0,0 +1,403 @@
+import { Box } from "../../geometry/Box";
+import { Vec } from "../../geometry/Vec";
+import type {
+  GapSnapIndicatorGapState,
+  GapSnapIndicatorState,
+  PointSnapIndicatorState,
+  SnapIndicatorState,
+} from "../selection";
+import {
+  areVecsEqual,
+  dedupePoints,
+  getAxisValue,
+  translateBounds,
+} from "./snapGeometry";
+import type {
+  Gap,
+  GapAxisSnap,
+  PointAxisSnap,
+  PointSnapPair,
+} from "./snapCalculations";
+import type {
+  SnapAxis,
+  SnapCoordinateSpace,
+  SnapNode,
+} from "./snapTypes";
+
+export function arePointIndicatorsEqual(
+  left: PointSnapIndicatorState,
+  right: PointSnapIndicatorState,
+): boolean {
+  return (
+    left.id === right.id &&
+    left.axis === right.axis &&
+    left.rotation === right.rotation &&
+    areVecsEqual(left.rotationCenter, right.rotationCenter) &&
+    areVecsEqual(left.line[0], right.line[0]) &&
+    areVecsEqual(left.line[1], right.line[1]) &&
+    left.points.length === right.points.length &&
+    left.points.every((point, index) => {
+      const other = right.points[index];
+      return !!other && areVecsEqual(point, other);
+    })
+  );
+}
+
+export function areGapEdgesEqual(
+  left: GapSnapIndicatorGapState,
+  right: GapSnapIndicatorGapState,
+): boolean {
+  return (
+    areVecsEqual(left.startEdge[0], right.startEdge[0]) &&
+    areVecsEqual(left.startEdge[1], right.startEdge[1]) &&
+    areVecsEqual(left.endEdge[0], right.endEdge[0]) &&
+    areVecsEqual(left.endEdge[1], right.endEdge[1])
+  );
+}
+
+export function areGapIndicatorsEqual(
+  left: GapSnapIndicatorState,
+  right: GapSnapIndicatorState,
+): boolean {
+  return (
+    left.id === right.id &&
+    left.direction === right.direction &&
+    left.rotation === right.rotation &&
+    areVecsEqual(left.rotationCenter, right.rotationCenter) &&
+    left.gaps.length === right.gaps.length &&
+    left.gaps.every((gap, index) => {
+      const other = right.gaps[index];
+      return !!other && areGapEdgesEqual(gap, other);
+    })
+  );
+}
+
+export function areIndicatorsEqual(
+  left: SnapIndicatorState[],
+  right: SnapIndicatorState[],
+): boolean {
+  if (left === right) {
+    return true;
+  }
+  if (left.length !== right.length) {
+    return false;
+  }
+  return left.every((indicator, index) => {
+    const other = right[index];
+    if (!other || indicator.type !== other.type) {
+      return false;
+    }
+    return indicator.type === "points" && other.type === "points"
+      ? arePointIndicatorsEqual(indicator, other)
+      : indicator.type === "gaps" && other.type === "gaps"
+        ? areGapIndicatorsEqual(indicator, other)
+        : false;
+  });
+}
+
+export function getGapEdges(gap: Gap): GapSnapIndicatorGapState {
+  if (gap.direction === "horizontal") {
+    return {
+      startEdge: [
+        new Vec(gap.startNode.bounds.maxX, gap.startNode.bounds.minY),
+        new Vec(gap.startNode.bounds.maxX, gap.startNode.bounds.maxY),
+      ],
+      endEdge: [
+        new Vec(gap.endNode.bounds.minX, gap.endNode.bounds.minY),
+        new Vec(gap.endNode.bounds.minX, gap.endNode.bounds.maxY),
+      ],
+    };
+  }
+  return {
+    startEdge: [
+      new Vec(gap.startNode.bounds.minX, gap.startNode.bounds.maxY),
+      new Vec(gap.startNode.bounds.maxX, gap.startNode.bounds.maxY),
+    ],
+    endEdge: [
+      new Vec(gap.endNode.bounds.minX, gap.endNode.bounds.minY),
+      new Vec(gap.endNode.bounds.maxX, gap.endNode.bounds.minY),
+    ],
+  };
+}
+
+export function getPointIndicator(
+  axis: SnapAxis,
+  snap: PointAxisSnap,
+  finalNudge: Vec,
+  coordinateSpace: SnapCoordinateSpace,
+): PointSnapIndicatorState {
+  const movedSelectionPoints = snap.pairs.map(({ selectionPoint }) =>
+    selectionPoint.add(finalNudge),
+  );
+  const points = dedupePoints([
+    ...movedSelectionPoints,
+    ...snap.pairs.map(({ candidatePoint }) => candidatePoint.clone()),
+  ]);
+  const line = getPointIndicatorLine(axis, points);
+  return {
+    id: getPointIndicatorId(axis, line, points),
+    type: "points",
+    axis,
+    line,
+    points,
+    rotation: coordinateSpace.rotation,
+    rotationCenter: coordinateSpace.rotationCenter.clone(),
+  };
+}
+
+export function getPointIndicators(
+  axis: SnapAxis,
+  snap: PointAxisSnap,
+  finalNudge: Vec,
+  coordinateSpace: SnapCoordinateSpace,
+): PointSnapIndicatorState[] {
+  return getPointSnapGroups(axis, snap, finalNudge).map((group) =>
+    getPointIndicator(axis, group, finalNudge, coordinateSpace),
+  );
+}
+
+export function getPointSnapGroups(
+  axis: SnapAxis,
+  snap: PointAxisSnap,
+  finalNudge: Vec,
+): PointAxisSnap[] {
+  const groups = new Map<string, PointSnapPair[]>();
+  for (const pair of snap.pairs) {
+    const movedSelectionPoint = pair.selectionPoint.add(finalNudge);
+    const key = getAxisValue(movedSelectionPoint, axis).toFixed(8);
+    const group = groups.get(key);
+    if (group) {
+      group.push(pair);
+    } else {
+      groups.set(key, [pair]);
+    }
+  }
+
+  return Array.from(groups.values()).map((pairs) => ({
+    type: "points",
+    nudge: snap.nudge,
+    pairs,
+  }));
+}
+
+export function getAxisExtentPoints(
+  axis: SnapAxis,
+  axisValue: number,
+  bounds: Box,
+): Vec[] {
+  return axis === "x"
+    ? [
+        new Vec(axisValue, bounds.minY),
+        new Vec(axisValue, bounds.maxY),
+      ]
+    : [
+        new Vec(bounds.minX, axisValue),
+        new Vec(bounds.maxX, axisValue),
+      ];
+}
+
+export function getPointIndicatorLine(axis: SnapAxis, points: readonly Vec[]): [Vec, Vec] {
+  if (points.length === 0) {
+    return [Vec.Zero(), Vec.Zero()];
+  }
+
+  let minX = Number.POSITIVE_INFINITY;
+  let maxX = Number.NEGATIVE_INFINITY;
+  let minY = Number.POSITIVE_INFINITY;
+  let maxY = Number.NEGATIVE_INFINITY;
+  for (const point of points) {
+    minX = Math.min(minX, point.x);
+    maxX = Math.max(maxX, point.x);
+    minY = Math.min(minY, point.y);
+    maxY = Math.max(maxY, point.y);
+  }
+
+  return axis === "x"
+    ? [new Vec(minX, minY), new Vec(minX, maxY)]
+    : [new Vec(minX, minY), new Vec(maxX, minY)];
+}
+
+export function getPointIndicatorId(
+  axis: SnapAxis,
+  line: readonly [Vec, Vec],
+  points: readonly Vec[],
+): string {
+  return `points:${axis}:line:${line
+    .map((point) => `${point.x.toFixed(4)},${point.y.toFixed(4)}`)
+    .join("|")}:points:${points
+    .map((point) => `${point.x.toFixed(4)},${point.y.toFixed(4)}`)
+    .join("|")}`;
+}
+
+export function getPointIndicatorWithBoundsExtent(
+  axis: SnapAxis,
+  snap: PointAxisSnap,
+  finalNudge: Vec,
+  coordinateSpace: SnapCoordinateSpace,
+  bounds: Box,
+  candidateNodes: readonly SnapNode[],
+): PointSnapIndicatorState {
+  const indicator = getPointIndicator(
+    axis,
+    snap,
+    finalNudge,
+    coordinateSpace,
+  );
+  const firstPair = snap.pairs[0];
+  const snappedValue = getAxisValue(
+    firstPair?.selectionPoint.add(finalNudge) ?? bounds.center,
+    axis,
+  );
+  const candidateBoundsByNodeId = new Map(
+    candidateNodes.map((node) => [node.id, node.bounds] as const),
+  );
+  const candidateExtentPoints: Vec[] = [];
+  const seenCandidateNodeIds = new Set<string>();
+  for (const pair of snap.pairs) {
+    if (seenCandidateNodeIds.has(pair.candidateNodeId)) {
+      continue;
+    }
+    seenCandidateNodeIds.add(pair.candidateNodeId);
+
+    const candidateBounds = candidateBoundsByNodeId.get(pair.candidateNodeId);
+    if (!candidateBounds) {
+      continue;
+    }
+    candidateExtentPoints.push(
+      ...getAxisExtentPoints(axis, snappedValue, candidateBounds),
+    );
+  }
+
+  const points = dedupePoints([
+    ...indicator.points,
+    ...getAxisExtentPoints(axis, snappedValue, bounds),
+    ...candidateExtentPoints,
+  ]);
+  const linePoints = dedupePoints([
+    ...getAxisExtentPoints(axis, snappedValue, bounds),
+    ...candidateExtentPoints,
+  ]);
+  const line = getPointIndicatorLine(axis, linePoints);
+  return {
+    ...indicator,
+    id: getPointIndicatorId(axis, line, points),
+    line,
+    points,
+  };
+}
+
+export function getPointIndicatorsWithBoundsExtent(
+  axis: SnapAxis,
+  snap: PointAxisSnap,
+  finalNudge: Vec,
+  coordinateSpace: SnapCoordinateSpace,
+  bounds: Box,
+  candidateNodes: readonly SnapNode[],
+): PointSnapIndicatorState[] {
+  return getPointSnapGroups(axis, snap, finalNudge).map((group) =>
+    getPointIndicatorWithBoundsExtent(
+      axis,
+      group,
+      finalNudge,
+      coordinateSpace,
+      bounds,
+      candidateNodes,
+    ),
+  );
+}
+
+export function getHandlePointIndicator(snappedPagePoint: Vec): PointSnapIndicatorState {
+  return {
+    id: getPointIndicatorId("x", [snappedPagePoint, snappedPagePoint], [
+      snappedPagePoint,
+    ]),
+    type: "points",
+    axis: "x",
+    line: [snappedPagePoint.clone(), snappedPagePoint.clone()],
+    points: [snappedPagePoint.clone()],
+    rotation: 0,
+    rotationCenter: snappedPagePoint.clone(),
+  };
+}
+
+export function getHandleAlignIndicator(
+  axis: SnapAxis,
+  snappedPagePoint: Vec,
+  targetPoint: Vec,
+): PointSnapIndicatorState {
+  const indicatorPoint =
+    axis === "x"
+      ? new Vec(targetPoint.x, snappedPagePoint.y)
+      : new Vec(snappedPagePoint.x, targetPoint.y);
+  const points = dedupePoints([targetPoint.clone(), indicatorPoint]);
+  const line = getPointIndicatorLine(axis, points);
+  return {
+    id: getPointIndicatorId(axis, line, points),
+    type: "points",
+    axis,
+    line,
+    points,
+    rotation: 0,
+    rotationCenter: Vec.Zero(),
+  };
+}
+
+export function getGapIndicator(
+  snap: GapAxisSnap,
+  coordinateSpace: SnapCoordinateSpace,
+  finalNudge: Vec,
+): SnapIndicatorState {
+  const perpendicularDelta =
+    snap.gaps[0]?.direction === "horizontal"
+      ? new Vec(0, finalNudge.y)
+      : new Vec(finalNudge.x, 0);
+  const adjustedGaps = snap.gaps.map((gap) => ({
+    ...gap,
+    startNode:
+      gap.startNode.id === "selection"
+        ? {
+            ...gap.startNode,
+            bounds: translateBounds(gap.startNode.bounds, perpendicularDelta),
+          }
+        : gap.startNode,
+    endNode:
+      gap.endNode.id === "selection"
+        ? {
+            ...gap.endNode,
+            bounds: translateBounds(gap.endNode.bounds, perpendicularDelta),
+          }
+        : gap.endNode,
+  }));
+  return {
+    id: `gaps:${adjustedGaps
+      .map(
+        (gap) =>
+          `${gap.startNode.id}:${gap.endNode.id}:${gap.length.toFixed(4)}`,
+      )
+      .join("|")}`,
+    type: "gaps",
+    direction: adjustedGaps[0]?.direction ?? "horizontal",
+    gaps: adjustedGaps.map(getGapEdges),
+    rotation: coordinateSpace.rotation,
+    rotationCenter: coordinateSpace.rotationCenter.clone(),
+  };
+}
+
+export function cloneIndicator(indicator: SnapIndicatorState): SnapIndicatorState {
+  if (indicator.type === "points") {
+    return {
+      ...indicator,
+      line: [indicator.line[0].clone(), indicator.line[1].clone()],
+      points: indicator.points.map((point) => point.clone()),
+      rotationCenter: indicator.rotationCenter.clone(),
+    };
+  }
+  return {
+    ...indicator,
+    gaps: indicator.gaps.map((gap) => ({
+      startEdge: [gap.startEdge[0].clone(), gap.startEdge[1].clone()],
+      endEdge: [gap.endEdge[0].clone(), gap.endEdge[1].clone()],
+    })),
+    rotationCenter: indicator.rotationCenter.clone(),
+  };
+}

package/_vendor/canvas-core/editor/managers/snapTypes.ts

@@ -0,0 +1,122 @@
+import type { Box } from "../../geometry/Box";
+import type { Vec } from "../../geometry/Vec";
+import type {
+  ShapeId,
+  ShapeParentId,
+} from "../../schema/records";
+import type {
+  SelectionHandle,
+  SelectionResizeHandleId,
+  SnapIndicatorState,
+} from "../selection";
+
+export type SnapAxis = "x" | "y";
+export type HandleSnapMode = "none" | "point" | "align";
+
+export interface SnapCoordinateSpace {
+  rotation: number;
+  rotationCenter: Vec;
+}
+
+export interface SnapPoint {
+  id: string;
+  nodeId: ShapeId;
+  point: Vec;
+}
+
+export interface SnapNode {
+  id: string;
+  bounds: Box;
+}
+
+export interface HandleSnapContext {
+  shapeId: ShapeId;
+  handle: SelectionHandle;
+}
+
+export interface HandleSnapPoint {
+  id: string;
+  nodeId: ShapeId;
+  point: Vec;
+}
+
+export interface HandleSnapOutline {
+  id: ShapeId;
+  points: Vec[];
+}
+
+export interface HandleSnapSnapshot {
+  points: HandleSnapPoint[];
+  outlines: HandleSnapOutline[];
+  scopeParentId?: ShapeParentId | null;
+  candidateShapeIds?: ShapeId[];
+}
+
+export interface TranslateSnapSnapshot {
+  points: SnapPoint[];
+  nodes: SnapNode[];
+  coordinateSpace: SnapCoordinateSpace;
+  scopeParentId?: ShapeParentId | null;
+  candidateShapeIds?: ShapeId[];
+}
+
+export interface TranslateSnapInput {
+  lockedAxis: SnapAxis | null;
+  initialSelectionBounds: Box;
+  dragDelta: Vec;
+  snapshot: TranslateSnapSnapshot;
+  threshold: number;
+}
+
+export interface TranslateSnapResult {
+  nudge: Vec;
+  indicators: SnapIndicatorState[];
+}
+
+export interface ResizeSnapSnapshot {
+  points: SnapPoint[];
+  nodes: SnapNode[];
+  coordinateSpace: SnapCoordinateSpace;
+  scopeParentId?: ShapeParentId | null;
+  candidateShapeIds?: ShapeId[];
+}
+
+export interface ResizeSnapInput {
+  handleId: SelectionResizeHandleId;
+  initialSelectionBounds: Box;
+  resizedSelectionBounds: Box;
+  scaleX: number;
+  scaleY: number;
+  snapshot: ResizeSnapSnapshot;
+  threshold: number;
+  isAspectRatioLocked: boolean;
+  isResizingFromCenter: boolean;
+}
+
+export interface ResizeSnapResult {
+  nudge: Vec;
+  bounds: Box;
+  scaleX: number;
+  scaleY: number;
+  indicators: SnapIndicatorState[];
+}
+
+export interface HandleSnapSnapshotInput {
+  context: HandleSnapContext;
+  currentPagePoint: Vec;
+  allowSelfSnap?: boolean;
+  excludedShapeIds?: Iterable<ShapeId>;
+}
+
+export interface HandleSnapInput {
+  mode: HandleSnapMode;
+  pagePoint: Vec;
+  snapshot: HandleSnapSnapshot;
+  threshold: number;
+}
+
+export interface HandleSnapResult {
+  snappedPagePoint: Vec;
+  nudge: Vec;
+  indicators: SnapIndicatorState[];
+}