@yuzhouu/canvas-kit 0.1.2

package/_vendor/canvas-core/editor/selection.ts

@@ -0,0 +1,489 @@
+import { Box } from "../geometry/Box";
+import { Vec } from "../geometry/Vec";
+import type { ConnectionTerminal } from "../bindings/arrow/arrowBindingHelpers";
+import type { ShapeId, ShapeRecord } from "../schema/records";
+
+export type SelectionResizeHandleId =
+  | "top_left"
+  | "top"
+  | "top_right"
+  | "right"
+  | "bottom_right"
+  | "bottom"
+  | "bottom_left"
+  | "left";
+
+export type SelectionRotateHandleId =
+  | "top_left_rotate"
+  | "top_right_rotate"
+  | "bottom_right_rotate"
+  | "bottom_left_rotate";
+
+export interface SelectionResizeHandle {
+  kind: "resize";
+  id: SelectionResizeHandleId;
+  point: Vec;
+  bounds: Box;
+}
+
+export interface SelectionRotateHandle {
+  kind: "rotate";
+  id: SelectionRotateHandleId;
+  point: Vec;
+  bounds: Box;
+}
+
+export interface SelectionArrowTerminalHandle {
+  kind: "arrow_terminal";
+  terminal: ConnectionTerminal;
+  point: Vec;
+  bounds: Box;
+}
+
+export interface SelectionArrowMiddleHandle {
+  kind: "arrow_middle";
+  point: Vec;
+  bounds: Box;
+}
+
+export interface SelectionCustomHandle {
+  kind: "custom";
+  type: string;
+  id: string;
+  point: Vec;
+  bounds: Box;
+  cursor?: string;
+}
+
+export interface SelectionResizeHandleAnchor {
+  kind: "resize";
+  id: SelectionResizeHandleId;
+  point: Vec;
+}
+
+export interface SelectionRotateHandleAnchor {
+  kind: "rotate";
+  id: SelectionRotateHandleId;
+  point: Vec;
+}
+
+export interface SelectionArrowTerminalHandleAnchor {
+  kind: "arrow_terminal";
+  terminal: ConnectionTerminal;
+  point: Vec;
+}
+
+export interface SelectionArrowMiddleHandleAnchor {
+  kind: "arrow_middle";
+  point: Vec;
+}
+
+export interface SelectionCustomHandleAnchor {
+  kind: "custom";
+  type: string;
+  id: string;
+  point: Vec;
+  cursor?: string;
+}
+
+export interface SelectionRotationTransform {
+  rotation: number;
+  rotationCenter: Vec;
+}
+
+export interface SelectionFrame extends SelectionRotationTransform {
+  bounds: Box;
+  hasCompatibleRotation: boolean;
+}
+
+export interface SelectionResizeShapeSnapshot {
+  shape: ShapeRecord;
+  localBounds: Box;
+  rotation: number;
+}
+
+export interface SelectionResizePointShapeSnapshot {
+  shape: ShapeRecord;
+  startLocalPagePoint: Vec;
+  endLocalPagePoint: Vec;
+}
+
+export interface SelectionRotateShapeSnapshot {
+  id: ShapeId;
+  x: number;
+  y: number;
+  localBounds: Box;
+  rotation: number;
+}
+
+export interface SelectionRotatePointShapeSnapshot {
+  shape: ShapeRecord;
+  startPagePoint: Vec;
+  endPagePoint: Vec;
+}
+
+export interface SelectionResizeSnapshot extends SelectionRotationTransform {
+  startBounds: Box;
+  aspectRatio: number;
+  shapes: SelectionResizeShapeSnapshot[];
+  pointShapes: SelectionResizePointShapeSnapshot[];
+}
+
+export interface SelectionRotateSnapshot {
+  center: Vec;
+  initialSelectionRotation: number;
+  shapes: SelectionRotateShapeSnapshot[];
+  pointShapes: SelectionRotatePointShapeSnapshot[];
+}
+
+export type SelectionMirrorAxis = "horizontal" | "vertical";
+
+export type SelectionHandle =
+  | SelectionResizeHandle
+  | SelectionRotateHandle
+  | SelectionArrowTerminalHandle
+  | SelectionArrowMiddleHandle
+  | SelectionCustomHandle;
+
+export interface ArrowBindingPreviewState {
+  terminal: ConnectionTerminal;
+  targetShapeId: ShapeId;
+  resolvedPagePoint: Vec;
+  rawPagePoint: Vec;
+}
+
+export interface PointSnapIndicatorState {
+  id: string;
+  type: "points";
+  axis: "x" | "y";
+  line: [Vec, Vec];
+  points: Vec[];
+  rotation: number;
+  rotationCenter: Vec;
+}
+
+export interface GapSnapIndicatorGapState {
+  startEdge: [Vec, Vec];
+  endEdge: [Vec, Vec];
+}
+
+export interface GapSnapIndicatorState {
+  id: string;
+  type: "gaps";
+  direction: "horizontal" | "vertical";
+  gaps: GapSnapIndicatorGapState[];
+  rotation: number;
+  rotationCenter: Vec;
+}
+
+export type SnapIndicatorState =
+  | PointSnapIndicatorState
+  | GapSnapIndicatorState;
+
+export interface SelectionOverlayState {
+  bounds: Box;
+  rotation: number;
+  rotationCenter: Vec;
+  resizeHandles: SelectionResizeHandle[];
+  rotateHandles: SelectionRotateHandle[];
+  terminalHandles: SelectionArrowTerminalHandle[];
+  middleHandles: SelectionArrowMiddleHandle[];
+  customHandles: SelectionCustomHandle[];
+  strokeWidth: number;
+  cornerRadius: number;
+}
+
+export interface SelectionOverlayFrameState {
+  bounds: Box;
+  rotation: number;
+  rotationCenter: Vec;
+  strokeWidth: number;
+  cornerRadius: number;
+}
+
+export interface SelectionOverlayFrameGeometryState {
+  bounds: Box;
+  rotation: number;
+  rotationCenter: Vec;
+}
+
+export interface SelectionOverlayFrameStyleState {
+  strokeWidth: number;
+  cornerRadius: number;
+}
+
+export interface SelectionOverlayHandlesState {
+  resizeHandles: SelectionResizeHandle[];
+  rotateHandles: SelectionRotateHandle[];
+  terminalHandles: SelectionArrowTerminalHandle[];
+  middleHandles: SelectionArrowMiddleHandle[];
+  customHandles: SelectionCustomHandle[];
+  strokeWidth: number;
+}
+
+export interface SelectionOverlayHandleAnchorsState {
+  resizeHandleAnchors: SelectionResizeHandleAnchor[];
+  rotateHandleAnchors: SelectionRotateHandleAnchor[];
+  terminalHandleAnchors: SelectionArrowTerminalHandleAnchor[];
+  middleHandleAnchors: SelectionArrowMiddleHandleAnchor[];
+  customHandleAnchors: SelectionCustomHandleAnchor[];
+}
+
+export interface SelectionOverlayHandleCountsState {
+  resizeHandleCount: number;
+  rotateHandleCount: number;
+  terminalHandleCount: number;
+  middleHandleCount: number;
+  customHandleCount: number;
+}
+
+export function selectionPagePointToLocalPoint(
+  point: Vec,
+  transform: SelectionRotationTransform,
+): Vec {
+  return transform.rotation === 0
+    ? point.clone()
+    : Vec.RotWith(point, transform.rotationCenter, -transform.rotation);
+}
+
+export function selectionLocalPointToPagePoint(
+  point: Vec,
+  transform: SelectionRotationTransform,
+): Vec {
+  return transform.rotation === 0
+    ? point.clone()
+    : Vec.RotWith(point, transform.rotationCenter, transform.rotation);
+}
+
+export function rotateSelectionPagePoint(
+  point: Vec,
+  transform: SelectionRotationTransform,
+): Vec {
+  return selectionLocalPointToPagePoint(point, transform);
+}
+
+function mapRange(
+  value: number,
+  startMin: number,
+  startSize: number,
+  nextMin: number,
+  nextSize: number,
+): number {
+  if (startSize === 0) {
+    return nextMin;
+  }
+  return nextMin + ((value - startMin) / startSize) * nextSize;
+}
+
+export function mapSelectionLocalPointBetweenBounds({
+  point,
+  fromBounds,
+  toBounds,
+}: {
+  point: Vec;
+  fromBounds: Box;
+  toBounds: Box;
+}): Vec {
+  return new Vec(
+    mapRange(
+      point.x,
+      fromBounds.minX,
+      fromBounds.w,
+      toBounds.minX,
+      toBounds.w,
+    ),
+    mapRange(
+      point.y,
+      fromBounds.minY,
+      fromBounds.h,
+      toBounds.minY,
+      toBounds.h,
+    ),
+  );
+}
+
+export function mapSelectionLocalBoundsBetweenBounds({
+  bounds,
+  fromBounds,
+  toBounds,
+}: {
+  bounds: Box;
+  fromBounds: Box;
+  toBounds: Box;
+}): Box {
+  const nextMin = mapSelectionLocalPointBetweenBounds({
+    point: new Vec(bounds.minX, bounds.minY),
+    fromBounds,
+    toBounds,
+  });
+  const nextMax = mapSelectionLocalPointBetweenBounds({
+    point: new Vec(bounds.maxX, bounds.maxY),
+    fromBounds,
+    toBounds,
+  });
+
+  return new Box(
+    Math.min(nextMin.x, nextMax.x),
+    Math.min(nextMin.y, nextMax.y),
+    Math.abs(nextMax.x - nextMin.x),
+    Math.abs(nextMax.y - nextMin.y),
+  );
+}
+
+export function mirrorSelectionLocalPoint({
+  axis,
+  bounds,
+  point,
+}: {
+  axis: SelectionMirrorAxis;
+  bounds: Box;
+  point: Vec;
+}): Vec {
+  return axis === "horizontal"
+    ? new Vec(bounds.minX + bounds.maxX - point.x, point.y)
+    : new Vec(point.x, bounds.minY + bounds.maxY - point.y);
+}
+
+export function flipSelectionLocalBounds({
+  axis,
+  bounds,
+  selectionBounds,
+}: {
+  axis: SelectionMirrorAxis;
+  bounds: Box;
+  selectionBounds: Box;
+}): Box {
+  return axis === "horizontal"
+    ? new Box(
+        selectionBounds.minX + selectionBounds.maxX - bounds.maxX,
+        bounds.minY,
+        bounds.w,
+        bounds.h,
+      )
+    : new Box(
+        bounds.minX,
+        selectionBounds.minY + selectionBounds.maxY - bounds.maxY,
+        bounds.w,
+        bounds.h,
+      );
+}
+
+export function getSelectionLocalBoundsFromPagePoints({
+  points,
+  transform,
+}: {
+  points: readonly Vec[];
+  transform: SelectionRotationTransform;
+}): Box | null {
+  if (points.length === 0) {
+    return null;
+  }
+  return Box.FromPoints(
+    points.map((point) => selectionPagePointToLocalPoint(point, transform)),
+  );
+}
+
+export function getSelectionResizeSnapshot({
+  shapes,
+  selectionFrame,
+  getShapeSelectionResizePageOutlineVertices,
+  getShapeSelectionPagePoints,
+}: {
+  shapes: ShapeRecord[];
+  selectionFrame: SelectionFrame;
+  getShapeSelectionResizePageOutlineVertices: (shape: ShapeRecord) => Vec[];
+  getShapeSelectionPagePoints: (
+    shape: ShapeRecord,
+  ) => readonly [Vec, Vec] | null;
+}): SelectionResizeSnapshot {
+  const transform: SelectionRotationTransform = {
+    rotation: selectionFrame.rotation,
+    rotationCenter: selectionFrame.rotationCenter,
+  };
+  const boundsShapes: SelectionResizeShapeSnapshot[] = [];
+  const pointShapes: SelectionResizePointShapeSnapshot[] = [];
+
+  for (const shape of shapes) {
+    const pagePoints = getShapeSelectionPagePoints(shape);
+    if (pagePoints) {
+      pointShapes.push({
+        shape,
+        startLocalPagePoint: selectionPagePointToLocalPoint(
+          pagePoints[0],
+          transform,
+        ),
+        endLocalPagePoint: selectionPagePointToLocalPoint(
+          pagePoints[1],
+          transform,
+        ),
+      });
+      continue;
+    }
+
+    boundsShapes.push({
+      shape,
+      localBounds: Box.FromPoints(
+        getShapeSelectionResizePageOutlineVertices(shape).map((point) =>
+          selectionPagePointToLocalPoint(point, transform),
+        ),
+      ),
+      rotation: shape.rotation,
+    });
+  }
+
+  return {
+    startBounds: selectionFrame.bounds.clone(),
+    rotation: selectionFrame.rotation,
+    rotationCenter: selectionFrame.rotationCenter.clone(),
+    aspectRatio:
+      selectionFrame.bounds.h === 0
+        ? 1
+        : selectionFrame.bounds.w / selectionFrame.bounds.h,
+    shapes: boundsShapes,
+    pointShapes,
+  };
+}
+
+export function getSelectionRotateSnapshot({
+  shapes,
+  selectionFrame,
+  getShapeLocalBounds,
+  getShapeSelectionPagePoints,
+}: {
+  shapes: ShapeRecord[];
+  selectionFrame: SelectionFrame;
+  getShapeLocalBounds: (shape: ShapeRecord) => Box;
+  getShapeSelectionPagePoints: (
+    shape: ShapeRecord,
+  ) => readonly [Vec, Vec] | null;
+}): SelectionRotateSnapshot {
+  const boundsShapes: SelectionRotateShapeSnapshot[] = [];
+  const pointShapes: SelectionRotatePointShapeSnapshot[] = [];
+
+  for (const shape of shapes) {
+    const pagePoints = getShapeSelectionPagePoints(shape);
+    if (pagePoints) {
+      pointShapes.push({
+        shape,
+        startPagePoint: pagePoints[0],
+        endPagePoint: pagePoints[1],
+      });
+      continue;
+    }
+
+    boundsShapes.push({
+      id: shape.id,
+      x: shape.x,
+      y: shape.y,
+      localBounds: getShapeLocalBounds(shape),
+      rotation: shape.rotation,
+    });
+  }
+
+  return {
+    center: selectionFrame.rotationCenter.clone(),
+    initialSelectionRotation: selectionFrame.rotation,
+    shapes: boundsShapes,
+    pointShapes,
+  };
+}

package/_vendor/canvas-core/editor/selectionHandleInteractions.ts

@@ -0,0 +1,43 @@
+import type { Editor } from "./Editor";
+import type { InteractionHandlerRegistry } from "./interactions";
+import type {
+  SelectionHandleInteractionHandler,
+  SelectionHandleInteractionInput,
+  SelectionHandleInteractionSession,
+} from "./interactions";
+
+export type {
+  SelectionHandleInteractionHandler,
+  SelectionHandleInteractionInput,
+  SelectionHandleInteractionSession,
+} from "./interactions";
+
+export class SelectionHandleInteractionRegistry {
+  private readonly handlers: SelectionHandleInteractionHandler[] = [];
+
+  constructor(private readonly interactions?: InteractionHandlerRegistry) {}
+
+  register(handler: SelectionHandleInteractionHandler): void {
+    this.handlers.push(handler);
+  }
+
+  createSession(
+    editor: Editor,
+    input: SelectionHandleInteractionInput,
+  ): SelectionHandleInteractionSession | null {
+    const interactionSession =
+      this.interactions?.createSelectionHandleSession(editor, input) ?? null;
+    if (interactionSession) {
+      return interactionSession;
+    }
+
+    for (const handler of this.handlers) {
+      const session = handler.createSession(editor, input);
+      if (session) {
+        return session;
+      }
+    }
+
+    return null;
+  }
+}