@yuzhouu/canvas-kit 0.1.2

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

@@ -0,0 +1,567 @@
+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,
+  );
+}