@yuzhouu/canvas-kit 0.1.2 → 0.1.4

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

@@ -1,567 +0,0 @@
-import { Box } from "../geometry/Box";
-import { Vec } from "../geometry/Vec";
-import type { ShapeId, ShapeRecord } from "../schema/records";
-import type { ShapeSelectionHandleAnchors } from "../shapes/ShapeUtil";
-import type {
-  SelectionArrowMiddleHandle,
-  SelectionArrowMiddleHandleAnchor,
-  SelectionArrowTerminalHandle,
-  SelectionArrowTerminalHandleAnchor,
-  SelectionCustomHandle,
-  SelectionCustomHandleAnchor,
-  SelectionFrame,
-  SelectionOverlayFrameGeometryState,
-  SelectionOverlayFrameState,
-  SelectionOverlayFrameStyleState,
-  SelectionOverlayHandleAnchorsState,
-  SelectionOverlayHandleCountsState,
-  SelectionOverlayHandlesState,
-  SelectionResizeHandle,
-  SelectionResizeHandleAnchor,
-  SelectionRotateHandle,
-  SelectionRotateHandleAnchor,
-} from "./selection";
-
-const SELECTION_ROTATE_OFFSET_SCREEN = 14;
-
-export interface SelectedShapeOverlayItem {
-  id: ShapeId;
-  usesSelectionPathOverlay: boolean;
-  startPagePoint: Vec | null;
-  endPagePoint: Vec | null;
-  middlePagePoint: Vec | null;
-  path: string | null;
-}
-
-export interface SelectionHandleState {
-  resizeHandles: SelectionResizeHandle[];
-  rotateHandles: SelectionRotateHandle[];
-  terminalHandles: SelectionArrowTerminalHandle[];
-  middleHandles: SelectionArrowMiddleHandle[];
-  customHandles: SelectionCustomHandle[];
-}
-
-function areVecsEqual(a: Vec | null, b: Vec | null): boolean {
-  if (a === b) return true;
-  if (!a || !b) return a === b;
-  return a.x === b.x && a.y === b.y;
-}
-
-function areBoxesEqual(a: Box | null, b: Box | null): boolean {
-  if (a === b) return true;
-  if (!a || !b) return a === b;
-  return a.x === b.x && a.y === b.y && a.w === b.w && a.h === b.h;
-}
-
-export function areSelectedShapeOverlayItemsEqual(
-  a: SelectedShapeOverlayItem[],
-  b: SelectedShapeOverlayItem[],
-): boolean {
-  if (a === b) return true;
-  if (a.length !== b.length) return false;
-  for (let i = 0; i < a.length; i += 1) {
-    const left = a[i];
-    const right = b[i];
-    if (!left || !right) {
-      return false;
-    }
-    if (
-      left.id !== right.id ||
-      left.usesSelectionPathOverlay !== right.usesSelectionPathOverlay ||
-      !areVecsEqual(left.startPagePoint, right.startPagePoint) ||
-      !areVecsEqual(left.endPagePoint, right.endPagePoint) ||
-      !areVecsEqual(left.middlePagePoint, right.middlePagePoint) ||
-      left.path !== right.path
-    ) {
-      return false;
-    }
-  }
-  return true;
-}
-
-export function areSelectionOverlayFrameStatesEqual(
-  a: SelectionOverlayFrameState | null,
-  b: SelectionOverlayFrameState | null,
-): boolean {
-  if (a === b) return true;
-  if (!a || !b) return a === b;
-  return (
-    areBoxesEqual(a.bounds, b.bounds) &&
-    a.rotation === b.rotation &&
-    areVecsEqual(a.rotationCenter, b.rotationCenter) &&
-    a.strokeWidth === b.strokeWidth &&
-    a.cornerRadius === b.cornerRadius
-  );
-}
-
-export function areSelectionOverlayFrameGeometryStatesEqual(
-  a: SelectionOverlayFrameGeometryState | null,
-  b: SelectionOverlayFrameGeometryState | null,
-): boolean {
-  if (a === b) return true;
-  if (!a || !b) return a === b;
-  return (
-    areBoxesEqual(a.bounds, b.bounds) &&
-    a.rotation === b.rotation &&
-    areVecsEqual(a.rotationCenter, b.rotationCenter)
-  );
-}
-
-export function areSelectionOverlayFrameGeometryArraysEqual(
-  a: SelectionOverlayFrameGeometryState[],
-  b: SelectionOverlayFrameGeometryState[],
-): boolean {
-  if (a === b) return true;
-  if (a.length !== b.length) return false;
-  for (let index = 0; index < a.length; index += 1) {
-    if (
-      !areSelectionOverlayFrameGeometryStatesEqual(
-        a[index] ?? null,
-        b[index] ?? null,
-      )
-    ) {
-      return false;
-    }
-  }
-  return true;
-}
-
-export function areSelectionOverlayFrameStyleStatesEqual(
-  a: SelectionOverlayFrameStyleState,
-  b: SelectionOverlayFrameStyleState,
-): boolean {
-  return a.strokeWidth === b.strokeWidth && a.cornerRadius === b.cornerRadius;
-}
-
-function areResizeHandlesEqual(
-  a: SelectionResizeHandle,
-  b: SelectionResizeHandle,
-): boolean {
-  return (
-    a.id === b.id &&
-    areVecsEqual(a.point, b.point) &&
-    areBoxesEqual(a.bounds, b.bounds)
-  );
-}
-
-function areRotateHandlesEqual(
-  a: SelectionRotateHandle,
-  b: SelectionRotateHandle,
-): boolean {
-  return (
-    a.id === b.id &&
-    areVecsEqual(a.point, b.point) &&
-    areBoxesEqual(a.bounds, b.bounds)
-  );
-}
-
-function areTerminalHandlesEqual(
-  a: SelectionArrowTerminalHandle,
-  b: SelectionArrowTerminalHandle,
-): boolean {
-  return (
-    a.terminal === b.terminal &&
-    areVecsEqual(a.point, b.point) &&
-    areBoxesEqual(a.bounds, b.bounds)
-  );
-}
-
-function areMiddleHandlesEqual(
-  a: SelectionArrowMiddleHandle,
-  b: SelectionArrowMiddleHandle,
-): boolean {
-  return areVecsEqual(a.point, b.point) && areBoxesEqual(a.bounds, b.bounds);
-}
-
-function areCustomHandlesEqual(
-  a: SelectionCustomHandle,
-  b: SelectionCustomHandle,
-): boolean {
-  return (
-    a.type === b.type &&
-    a.id === b.id &&
-    a.cursor === b.cursor &&
-    areVecsEqual(a.point, b.point) &&
-    areBoxesEqual(a.bounds, b.bounds)
-  );
-}
-
-function areResizeHandleAnchorsEqual(
-  a: SelectionResizeHandleAnchor,
-  b: SelectionResizeHandleAnchor,
-): boolean {
-  return a.id === b.id && areVecsEqual(a.point, b.point);
-}
-
-function areRotateHandleAnchorsEqual(
-  a: SelectionRotateHandleAnchor,
-  b: SelectionRotateHandleAnchor,
-): boolean {
-  return a.id === b.id && areVecsEqual(a.point, b.point);
-}
-
-function areTerminalHandleAnchorsEqual(
-  a: SelectionArrowTerminalHandleAnchor,
-  b: SelectionArrowTerminalHandleAnchor,
-): boolean {
-  return a.terminal === b.terminal && areVecsEqual(a.point, b.point);
-}
-
-function areMiddleHandleAnchorsEqual(
-  a: SelectionArrowMiddleHandleAnchor,
-  b: SelectionArrowMiddleHandleAnchor,
-): boolean {
-  return areVecsEqual(a.point, b.point);
-}
-
-function areCustomHandleAnchorsEqual(
-  a: SelectionCustomHandleAnchor,
-  b: SelectionCustomHandleAnchor,
-): boolean {
-  return (
-    a.type === b.type &&
-    a.id === b.id &&
-    a.cursor === b.cursor &&
-    areVecsEqual(a.point, b.point)
-  );
-}
-
-function areArraysEqual<T>(
-  a: T[],
-  b: T[],
-  areItemsEqual: (a: T, b: T) => boolean,
-): boolean {
-  if (a === b) return true;
-  if (a.length !== b.length) return false;
-  for (let i = 0; i < a.length; i += 1) {
-    const left = a[i];
-    const right = b[i];
-    if (!left || !right || !areItemsEqual(left, right)) {
-      return false;
-    }
-  }
-  return true;
-}
-
-function isHalfTurnFlipped(referenceRotation: number, frameRotation: number) {
-  const halfTurns = Math.round((referenceRotation - frameRotation) / Math.PI);
-  return Math.abs(halfTurns % 2) === 1;
-}
-
-function getBoundBottomLeftRotateHandlePoint({
-  bounds,
-  rotateOffset,
-  referenceRotation,
-  frameRotation,
-}: {
-  bounds: Box;
-  rotateOffset: number;
-  referenceRotation: number;
-  frameRotation: number;
-}) {
-  return isHalfTurnFlipped(referenceRotation, frameRotation)
-    ? new Vec(bounds.maxX + rotateOffset, bounds.minY - rotateOffset)
-    : new Vec(bounds.minX - rotateOffset, bounds.maxY + rotateOffset);
-}
-
-export function areSelectionOverlayHandlesStatesEqual(
-  a: SelectionOverlayHandlesState | null,
-  b: SelectionOverlayHandlesState | null,
-): boolean {
-  if (a === b) return true;
-  if (!a || !b) return a === b;
-  return (
-    a.strokeWidth === b.strokeWidth &&
-    areArraysEqual(a.resizeHandles, b.resizeHandles, areResizeHandlesEqual) &&
-    areArraysEqual(a.rotateHandles, b.rotateHandles, areRotateHandlesEqual) &&
-    areArraysEqual(
-      a.terminalHandles,
-      b.terminalHandles,
-      areTerminalHandlesEqual,
-    ) &&
-    areArraysEqual(
-      a.middleHandles,
-      b.middleHandles,
-      areMiddleHandlesEqual,
-    ) &&
-    areArraysEqual(
-      a.customHandles,
-      b.customHandles,
-      areCustomHandlesEqual,
-    )
-  );
-}
-
-export function areSelectionOverlayHandleAnchorsStatesEqual(
-  a: SelectionOverlayHandleAnchorsState | null,
-  b: SelectionOverlayHandleAnchorsState | null,
-): boolean {
-  if (a === b) return true;
-  if (!a || !b) return a === b;
-  return (
-    areArraysEqual(
-      a.resizeHandleAnchors,
-      b.resizeHandleAnchors,
-      areResizeHandleAnchorsEqual,
-    ) &&
-    areArraysEqual(
-      a.rotateHandleAnchors,
-      b.rotateHandleAnchors,
-      areRotateHandleAnchorsEqual,
-    ) &&
-    areArraysEqual(
-      a.terminalHandleAnchors,
-      b.terminalHandleAnchors,
-      areTerminalHandleAnchorsEqual,
-    ) &&
-    areArraysEqual(
-      a.middleHandleAnchors,
-      b.middleHandleAnchors,
-      areMiddleHandleAnchorsEqual,
-    ) &&
-    areArraysEqual(
-      a.customHandleAnchors,
-      b.customHandleAnchors,
-      areCustomHandleAnchorsEqual,
-    )
-  );
-}
-
-export function areSelectionOverlayHandleCountsStatesEqual(
-  a: SelectionOverlayHandleCountsState | null,
-  b: SelectionOverlayHandleCountsState | null,
-): boolean {
-  if (a === b) return true;
-  if (!a || !b) return a === b;
-  return (
-    a.resizeHandleCount === b.resizeHandleCount &&
-    a.rotateHandleCount === b.rotateHandleCount &&
-    a.terminalHandleCount === b.terminalHandleCount &&
-    a.middleHandleCount === b.middleHandleCount &&
-    a.customHandleCount === b.customHandleCount
-  );
-}
-
-export function isSingleSelectionPathOverlay(
-  selectedShapeItems: SelectedShapeOverlayItem[],
-): boolean {
-  return (
-    selectedShapeItems.length === 1 &&
-    !!selectedShapeItems[0]?.usesSelectionPathOverlay
-  );
-}
-
-export function getSelectionHandleAnchorsState(
-  selectedShapes: ShapeRecord[],
-  selectionFrame: SelectionFrame | null,
-  zoom: number,
-  getShapeSelectionHandleAnchors: (
-    shape: ShapeRecord,
-  ) => ShapeSelectionHandleAnchors,
-  canUseSelectionFrameHandles: (shape: ShapeRecord) => boolean,
-): SelectionOverlayHandleAnchorsState {
-  const shapeSpecificAnchors = selectedShapes.map((shape) =>
-    getShapeSelectionHandleAnchors(shape),
-  );
-  const canUseFrameHandles = selectedShapes.every((shape) =>
-    canUseSelectionFrameHandles(shape),
-  );
-  const terminalHandleAnchors: SelectionArrowTerminalHandleAnchor[] =
-    shapeSpecificAnchors.flatMap((anchors) => anchors.terminalHandleAnchors);
-  const middleHandleAnchors: SelectionArrowMiddleHandleAnchor[] =
-    shapeSpecificAnchors.flatMap((anchors) => anchors.middleHandleAnchors);
-  const customHandleAnchors: SelectionCustomHandleAnchor[] =
-    shapeSpecificAnchors.flatMap((anchors) => anchors.customHandleAnchors ?? []);
-  const hasShapeSpecificHandles =
-    terminalHandleAnchors.length > 0 ||
-    middleHandleAnchors.length > 0 ||
-    customHandleAnchors.length > 0;
-  if (!selectionFrame) {
-    return {
-      resizeHandleAnchors: [],
-      rotateHandleAnchors: [],
-      terminalHandleAnchors,
-      middleHandleAnchors,
-      customHandleAnchors,
-    };
-  }
-
-  const { bounds, rotation, rotationCenter, hasCompatibleRotation } =
-    selectionFrame;
-  const referenceRotation = selectedShapes[0]?.rotation ?? rotation;
-  const handleSize = 8 / zoom;
-  const rotateOffset = SELECTION_ROTATE_OFFSET_SCREEN / zoom;
-  const isTinyX = bounds.w < handleSize * 2;
-  const isTinyY = bounds.h < handleSize * 2;
-  const toPagePoint = (point: Vec) =>
-    rotation === 0 ? point : Vec.RotWith(point, rotationCenter, rotation);
-  const topLeft = new Vec(bounds.minX, bounds.minY);
-  const top = new Vec(bounds.center.x, bounds.minY);
-  const topRight = new Vec(bounds.maxX, bounds.minY);
-  const right = new Vec(bounds.maxX, bounds.center.y);
-  const bottomRight = new Vec(bounds.maxX, bounds.maxY);
-  const bottom = new Vec(bounds.center.x, bounds.maxY);
-  const bottomLeft = new Vec(bounds.minX, bounds.maxY);
-  const left = new Vec(bounds.minX, bounds.center.y);
-  const resizeHandleAnchors: SelectionResizeHandleAnchor[] =
-    !canUseFrameHandles || hasShapeSpecificHandles || !hasCompatibleRotation
-      ? []
-      : [
-          {
-            kind: "resize" as const,
-            id: "top_left" as const,
-            point: toPagePoint(topLeft),
-          },
-          ...(!isTinyX
-            ? [
-                {
-                  kind: "resize" as const,
-                  id: "top" as const,
-                  point: toPagePoint(top),
-                },
-              ]
-            : []),
-          ...(!isTinyX || !isTinyY
-            ? [
-                {
-                  kind: "resize" as const,
-                  id: "top_right" as const,
-                  point: toPagePoint(topRight),
-                },
-              ]
-            : []),
-          ...(!isTinyY
-            ? [
-                {
-                  kind: "resize" as const,
-                  id: "right" as const,
-                  point: toPagePoint(right),
-                },
-              ]
-            : []),
-          ...(!isTinyX && !isTinyY
-            ? [
-                {
-                  kind: "resize" as const,
-                  id: "bottom_right" as const,
-                  point: toPagePoint(bottomRight),
-                },
-              ]
-            : []),
-          ...(!isTinyX
-            ? [
-                {
-                  kind: "resize" as const,
-                  id: "bottom" as const,
-                  point: toPagePoint(bottom),
-                },
-              ]
-            : []),
-          ...(!isTinyX && !isTinyY
-            ? [
-                {
-                  kind: "resize" as const,
-                  id: "bottom_left" as const,
-                  point: toPagePoint(bottomLeft),
-                },
-              ]
-            : []),
-          ...(!isTinyY
-            ? [
-                {
-                  kind: "resize" as const,
-                  id: "left" as const,
-                  point: toPagePoint(left),
-                },
-              ]
-            : []),
-        ];
-  const rotateHandleAnchors: SelectionRotateHandleAnchor[] =
-    !canUseFrameHandles ||
-    hasShapeSpecificHandles ||
-    !hasCompatibleRotation ||
-    isTinyX ||
-    isTinyY
-      ? []
-      : [
-          {
-            kind: "rotate" as const,
-            id: "bottom_left_rotate" as const,
-            point: toPagePoint(
-              getBoundBottomLeftRotateHandlePoint({
-                bounds,
-                rotateOffset,
-                referenceRotation,
-                frameRotation: rotation,
-              }),
-            ),
-          },
-        ];
-
-  return {
-    resizeHandleAnchors,
-    rotateHandleAnchors,
-    terminalHandleAnchors,
-    middleHandleAnchors,
-    customHandleAnchors,
-  };
-}
-
-export function materializeSelectionHandleState(
-  anchors: SelectionOverlayHandleAnchorsState,
-  zoom: number,
-): SelectionHandleState {
-  const handleSize = 8 / zoom;
-  const halfHandleSize = handleSize / 2;
-  const createHandleBounds = (point: Vec) =>
-    new Box(
-      point.x - halfHandleSize,
-      point.y - halfHandleSize,
-      handleSize,
-      handleSize,
-    );
-
-  return {
-    resizeHandles: anchors.resizeHandleAnchors.map((anchor) => ({
-      ...anchor,
-      bounds: createHandleBounds(anchor.point),
-    })),
-    rotateHandles: anchors.rotateHandleAnchors.map((anchor) => ({
-      ...anchor,
-      bounds: createHandleBounds(anchor.point),
-    })),
-    terminalHandles: anchors.terminalHandleAnchors.map((anchor) => ({
-      ...anchor,
-      bounds: createHandleBounds(anchor.point),
-    })),
-    middleHandles: anchors.middleHandleAnchors.map((anchor) => ({
-      ...anchor,
-      bounds: createHandleBounds(anchor.point),
-    })),
-    customHandles: anchors.customHandleAnchors.map((anchor) => ({
-      ...anchor,
-      bounds: createHandleBounds(anchor.point),
-    })),
-  };
-}
-
-export function getSelectionHandleState(
-  selectedShapes: ShapeRecord[],
-  selectionFrame: SelectionFrame | null,
-  zoom: number,
-  getShapeSelectionHandleAnchors: (
-    shape: ShapeRecord,
-  ) => ShapeSelectionHandleAnchors,
-  canUseSelectionFrameHandles: (shape: ShapeRecord) => boolean,
-): SelectionHandleState {
-  return materializeSelectionHandleState(
-    getSelectionHandleAnchorsState(
-      selectedShapes,
-      selectionFrame,
-      zoom,
-      getShapeSelectionHandleAnchors,
-      canUseSelectionFrameHandles,
-    ),
-    zoom,
-  );
-}