@yuzhouu/canvas-kit 0.1.2

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

@@ -0,0 +1,287 @@
+import { computed, type Signal } from "@land/signals";
+import { Box } from "../../geometry/Box";
+import { Vec } from "../../geometry/Vec";
+import type { ShapeId, ShapeRecord } from "../../schema/records";
+import type { Editor } from "../Editor";
+import type { ShapeGeometry } from "../queries/shapeTransforms";
+import { areBoxesEqual, areVecsEqual } from "../editorComputedHelpers";
+
+export interface SelectionGeometrySnapshot {
+  outlineVertices: Vec[];
+  pageBounds: Box | null;
+  frameBounds: Box | null;
+  rotation: number;
+  rotationCenter: Vec | null;
+  toolbarAnchorPagePoint: Vec | null;
+  hasRotation: boolean;
+  hasCompatibleRotation: boolean;
+}
+
+export interface SelectionGeometrySignals {
+  geometry: Signal<SelectionGeometrySnapshot>;
+  pageOutlineVertices: Signal<Vec[]>;
+  pageBounds: Signal<Box | null>;
+  frameBounds: Signal<Box | null>;
+  hasRotation: Signal<boolean>;
+  rotation: Signal<number>;
+  rotationCenter: Signal<Vec | null>;
+  hasCompatibleRotation: Signal<boolean>;
+  toolbarAnchorPagePoint: Signal<Vec | null>;
+}
+
+const SELECTION_ROTATION_EPSILON = 1e-3;
+
+function areVecArraysEqual(a: Vec[], b: Vec[]): 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 || !areVecsEqual(left, right)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function areSelectionGeometrySnapshotsEqual(
+  a: SelectionGeometrySnapshot,
+  b: SelectionGeometrySnapshot,
+): boolean {
+  return (
+    areVecArraysEqual(a.outlineVertices, b.outlineVertices) &&
+    areBoxesEqual(a.pageBounds, b.pageBounds) &&
+    areBoxesEqual(a.frameBounds, b.frameBounds) &&
+    a.rotation === b.rotation &&
+    areVecsEqual(a.rotationCenter, b.rotationCenter) &&
+    areVecsEqual(a.toolbarAnchorPagePoint, b.toolbarAnchorPagePoint) &&
+    a.hasRotation === b.hasRotation &&
+    a.hasCompatibleRotation === b.hasCompatibleRotation
+  );
+}
+
+function normalizeSelectionAngle(angle: number): number {
+  let next = angle;
+  while (next <= -Math.PI) next += Math.PI * 2;
+  while (next > Math.PI) next -= Math.PI * 2;
+  return next;
+}
+
+function normalizeSelectionFrameAngle(angle: number): number {
+  let next = normalizeSelectionAngle(angle);
+  while (next <= -Math.PI / 2) next += Math.PI;
+  while (next > Math.PI / 2) next -= Math.PI;
+  return Math.abs(next) < SELECTION_ROTATION_EPSILON ? 0 : next;
+}
+
+function areAnglesCompatible(a: number, b: number): boolean {
+  return (
+    Math.abs(
+      normalizeSelectionFrameAngle(a) - normalizeSelectionFrameAngle(b),
+    ) < SELECTION_ROTATION_EPSILON
+  );
+}
+
+function hasCompatibleSelectionRotation(shapes: ShapeRecord[]): boolean {
+  if (shapes.length === 0) {
+    return true;
+  }
+
+  const base = normalizeSelectionFrameAngle(shapes[0]?.rotation ?? 0);
+  return shapes.every((shape) => areAnglesCompatible(shape.rotation, base));
+}
+
+function getSelectionRotation(
+  shapes: ShapeRecord[],
+  hasCompatibleRotation: boolean,
+): number {
+  if (shapes.length === 0 || !hasCompatibleRotation) {
+    return 0;
+  }
+
+  return normalizeSelectionFrameAngle(shapes[0]?.rotation ?? 0);
+}
+
+function hasSelectionRotation(shapes: ShapeRecord[]): boolean {
+  return shapes.some(
+    (shape) =>
+      Math.abs(normalizeSelectionFrameAngle(shape.rotation)) >
+      SELECTION_ROTATION_EPSILON,
+  );
+}
+
+function getEmptySelectionGeometrySnapshot(): SelectionGeometrySnapshot {
+  return {
+    outlineVertices: [],
+    pageBounds: null,
+    frameBounds: null,
+    rotation: 0,
+    rotationCenter: null,
+    toolbarAnchorPagePoint: null,
+    hasRotation: false,
+    hasCompatibleRotation: true,
+  };
+}
+
+function getSelectionGeometrySnapshot(
+  editor: Editor,
+  getShapeGeometrySnapshot: (shapeId: ShapeId) => ShapeGeometry | undefined,
+): SelectionGeometrySnapshot {
+  const selectedShapeIds = editor.selectedShapeIdsSignal.get();
+  if (selectedShapeIds.length === 0) {
+    return getEmptySelectionGeometrySnapshot();
+  }
+
+  const outlineVertices: Vec[] = [];
+  const selectionPagePoints: Vec[] = [];
+  const selectionFrameShapes: ShapeRecord[] = [];
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const shapeId of selectedShapeIds) {
+    const shape = editor.getShapeSignal(shapeId).get();
+    if (!shape) {
+      continue;
+    }
+
+    const shapeUtil = editor.getShapeUtil(shape);
+    const pointSelection = shapeUtil.getSelectionPagePoints(shape);
+    if (pointSelection) {
+      selectionPagePoints.push(...pointSelection);
+    }
+
+    if (
+      !shapeUtil.contributesToSelectionFrame(shape, {
+        editor,
+      })
+    ) {
+      continue;
+    }
+    selectionFrameShapes.push(shape);
+
+    const geometry = getShapeGeometrySnapshot(shapeId);
+    if (!geometry) {
+      continue;
+    }
+
+    outlineVertices.push(...geometry.outlineVertices);
+    minX = Math.min(minX, geometry.bounds.minX);
+    minY = Math.min(minY, geometry.bounds.minY);
+    maxX = Math.max(maxX, geometry.bounds.maxX);
+    maxY = Math.max(maxY, geometry.bounds.maxY);
+  }
+
+  const pageBounds =
+    Number.isFinite(minX) &&
+    Number.isFinite(minY) &&
+    Number.isFinite(maxX) &&
+    Number.isFinite(maxY)
+      ? new Box(minX, minY, maxX - minX, maxY - minY)
+      : null;
+  const hasCompatibleRotation =
+    selectionFrameShapes.length > 0
+      ? hasCompatibleSelectionRotation(selectionFrameShapes)
+      : true;
+  const rotation = getSelectionRotation(
+    selectionFrameShapes,
+    hasCompatibleRotation,
+  );
+  const hasRotation = hasSelectionRotation(selectionFrameShapes);
+  const rotationCenter = pageBounds?.center ?? null;
+  const frameBounds =
+    outlineVertices.length === 0
+      ? null
+      : Math.abs(rotation) < SELECTION_ROTATION_EPSILON || !rotationCenter
+        ? Box.FromPoints(outlineVertices)
+        : Box.FromPoints(
+            outlineVertices.map((point) =>
+              Vec.RotWith(point, rotationCenter, -rotation),
+            ),
+          );
+  const pointToolbarBounds =
+    selectionPagePoints.length > 0 ? Box.FromPoints(selectionPagePoints) : null;
+  const toolbarAnchorPagePoint =
+    frameBounds && rotationCenter
+      ? Math.abs(rotation) < SELECTION_ROTATION_EPSILON
+        ? new Vec(frameBounds.center.x, frameBounds.minY)
+        : Vec.RotWith(
+            new Vec(frameBounds.center.x, frameBounds.minY),
+            rotationCenter,
+            rotation,
+          )
+      : pointToolbarBounds
+        ? new Vec(pointToolbarBounds.center.x, pointToolbarBounds.minY)
+        : null;
+
+  return {
+    outlineVertices,
+    pageBounds,
+    frameBounds,
+    rotation,
+    rotationCenter,
+    toolbarAnchorPagePoint,
+    hasRotation,
+    hasCompatibleRotation,
+  };
+}
+
+export function createSelectionGeometrySignals(
+  editor: Editor,
+  getShapeGeometrySnapshot: (shapeId: ShapeId) => ShapeGeometry | undefined,
+): SelectionGeometrySignals {
+  const geometry = computed<SelectionGeometrySnapshot>(
+    "editor.query.selectionGeometry",
+    () => getSelectionGeometrySnapshot(editor, getShapeGeometrySnapshot),
+    { isEqual: areSelectionGeometrySnapshotsEqual },
+  );
+  const pageOutlineVertices = computed<Vec[]>(
+    "editor.query.selectionPageOutlineVertices",
+    () => geometry.get().outlineVertices,
+    { isEqual: areVecArraysEqual },
+  );
+  const pageBounds = computed<Box | null>(
+    "editor.query.selectionPageBounds",
+    () => geometry.get().pageBounds,
+    { isEqual: areBoxesEqual },
+  );
+  const frameBounds = computed<Box | null>(
+    "editor.query.selectionFrameBounds",
+    () => geometry.get().frameBounds,
+    { isEqual: areBoxesEqual },
+  );
+  const rotation = computed<number>(
+    "editor.query.selectionRotation",
+    () => geometry.get().rotation,
+  );
+  const hasRotation = computed<boolean>(
+    "editor.query.selectionHasRotation",
+    () => geometry.get().hasRotation,
+  );
+  const rotationCenter = computed<Vec | null>(
+    "editor.query.selectionRotationCenter",
+    () => geometry.get().rotationCenter,
+    { isEqual: areVecsEqual },
+  );
+  const hasCompatibleRotation = computed<boolean>(
+    "editor.query.selectionHasCompatibleRotation",
+    () => geometry.get().hasCompatibleRotation,
+  );
+  const toolbarAnchorPagePoint = computed<Vec | null>(
+    "editor.query.selectionToolbarAnchorPagePoint",
+    () => geometry.get().toolbarAnchorPagePoint,
+    { isEqual: areVecsEqual },
+  );
+
+  return {
+    geometry,
+    pageOutlineVertices,
+    pageBounds,
+    frameBounds,
+    hasRotation,
+    rotation,
+    rotationCenter,
+    hasCompatibleRotation,
+    toolbarAnchorPagePoint,
+  };
+}

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

@@ -0,0 +1,350 @@
+import type { ChangeSource } from "@land/store";
+import type { ShapeId, ShapeRecord } from "../../schema/records";
+import type {
+  Editor,
+  LayerOrderDirection,
+  LayerOrderEdge,
+  ShapeSelectionSiblingOrderState,
+  ShapeSiblingOrderDirection,
+  ShapeSiblingOrderEdge,
+  ShapeSiblingOrderState,
+} from "../Editor";
+
+export function getSelectionParentOrderState(
+  editor: Editor,
+): ShapeSelectionSiblingOrderState | null {
+  const selectedShapes = editor.getSelectedShapes();
+  if (selectedShapes.length === 0) {
+    return null;
+  }
+  if (selectedShapes.some((shape) => shape.isLocked)) {
+    return null;
+  }
+
+  const parentId = selectedShapes[0]?.parentId;
+  if (!parentId) {
+    return null;
+  }
+  if (selectedShapes.some((shape) => shape.parentId !== parentId)) {
+    return null;
+  }
+
+  const siblings = editor.getChildShapes(parentId);
+  const selectedIds = new Set(selectedShapes.map((shape) => shape.id));
+  const selectedIndexes = siblings
+    .map((shape, index) => (selectedIds.has(shape.id) ? index : -1))
+    .filter((index) => index >= 0);
+  if (selectedIndexes.length !== selectedShapes.length) {
+    return null;
+  }
+
+  return {
+    parentId,
+    selectedCount: selectedShapes.length,
+    count: siblings.length,
+    canMoveBackward: selectedIndexes.some(
+      (index) => index > 0 && !selectedIds.has(siblings[index - 1]!.id),
+    ),
+    canMoveForward: selectedIndexes.some(
+      (index) =>
+        index < siblings.length - 1 &&
+        !selectedIds.has(siblings[index + 1]!.id),
+    ),
+  };
+}
+
+export function getSelectionSiblingOrderState(
+  editor: Editor,
+): ShapeSiblingOrderState | null {
+  const selectedShapes = editor.getSelectedShapes();
+  if (selectedShapes.length !== 1) {
+    return null;
+  }
+
+  const [shape] = selectedShapes;
+  if (!shape || shape.isLocked) {
+    return null;
+  }
+
+  const siblings = editor.getChildShapes(shape.parentId);
+  const index = siblings.findIndex((sibling) => sibling.id === shape.id);
+  if (index < 0) {
+    return null;
+  }
+
+  return {
+    parentId: shape.parentId,
+    index,
+    count: siblings.length,
+    canMoveBackward: index > 0,
+    canMoveForward: index < siblings.length - 1,
+  };
+}
+
+export function canMoveSelectionWithinParent(
+  editor: Editor,
+  direction: ShapeSiblingOrderDirection,
+): boolean {
+  const state = getSelectionSiblingOrderState(editor);
+  return direction === "backward"
+    ? (state?.canMoveBackward ?? false)
+    : (state?.canMoveForward ?? false);
+}
+
+export function canMoveSelectionInParentOrder(
+  editor: Editor,
+  direction: ShapeSiblingOrderDirection,
+): boolean {
+  const state = getSelectionParentOrderState(editor);
+  return direction === "backward"
+    ? (state?.canMoveBackward ?? false)
+    : (state?.canMoveForward ?? false);
+}
+
+export function getShapeParentOrderState(
+  editor: Editor,
+  ids: readonly ShapeId[],
+): ShapeSelectionSiblingOrderState | null {
+  const selectedShapes = ids
+    .map((id) => editor.getShape(id))
+    .filter((shape): shape is ShapeRecord => !!shape);
+  if (selectedShapes.length === 0) {
+    return null;
+  }
+  if (
+    selectedShapes.some(
+      (shape) => shape.isLocked || editor.isShapeHidden(shape.id),
+    )
+  ) {
+    return null;
+  }
+
+  const parentId = selectedShapes[0]?.parentId;
+  if (!parentId) {
+    return null;
+  }
+  if (selectedShapes.some((shape) => shape.parentId !== parentId)) {
+    return null;
+  }
+
+  const siblings = editor.getChildShapes(parentId);
+  const selectedIds = new Set(selectedShapes.map((shape) => shape.id));
+  const selectedIndexes = siblings
+    .map((shape, index) => (selectedIds.has(shape.id) ? index : -1))
+    .filter((index) => index >= 0);
+  if (selectedIndexes.length !== selectedShapes.length) {
+    return null;
+  }
+
+  return {
+    parentId,
+    selectedCount: selectedShapes.length,
+    count: siblings.length,
+    canMoveBackward: selectedIndexes.some(
+      (index) => index > 0 && !selectedIds.has(siblings[index - 1]!.id),
+    ),
+    canMoveForward: selectedIndexes.some(
+      (index) =>
+        index < siblings.length - 1 &&
+        !selectedIds.has(siblings[index + 1]!.id),
+    ),
+  };
+}
+
+export function canMoveShapesInParentOrder(
+  editor: Editor,
+  ids: readonly ShapeId[],
+  direction: LayerOrderDirection,
+): boolean {
+  const state = getShapeParentOrderState(editor, ids);
+  return direction === "backward"
+    ? (state?.canMoveBackward ?? false)
+    : (state?.canMoveForward ?? false);
+}
+
+export function moveShapesInParentOrder(
+  editor: Editor,
+  ids: readonly ShapeId[],
+  direction: LayerOrderDirection,
+  source: ChangeSource = "user",
+): boolean {
+  const state = getShapeParentOrderState(editor, ids);
+  if (!state) {
+    return false;
+  }
+
+  const siblings = editor.getChildShapes(state.parentId);
+  const selectedIds = new Set(ids);
+  const nextSiblings = [...siblings];
+  let didMove = false;
+
+  if (direction === "backward") {
+    for (let index = 1; index < nextSiblings.length; index += 1) {
+      const current = nextSiblings[index];
+      const before = nextSiblings[index - 1];
+      if (
+        current &&
+        before &&
+        selectedIds.has(current.id) &&
+        !selectedIds.has(before.id)
+      ) {
+        nextSiblings[index - 1] = current;
+        nextSiblings[index] = before;
+        didMove = true;
+      }
+    }
+  } else {
+    for (let index = nextSiblings.length - 2; index >= 0; index -= 1) {
+      const current = nextSiblings[index];
+      const after = nextSiblings[index + 1];
+      if (
+        current &&
+        after &&
+        selectedIds.has(current.id) &&
+        !selectedIds.has(after.id)
+      ) {
+        nextSiblings[index] = after;
+        nextSiblings[index + 1] = current;
+        didMove = true;
+      }
+    }
+  }
+
+  if (!didMove) {
+    return false;
+  }
+
+  editor.cancelInteractionForCommand();
+  editor.commands.updateShapes(
+    nextSiblings.map((sibling, index) => ({
+      id: sibling.id,
+      index: editor.createShapeIndex(index + 1),
+    })),
+    { source },
+  );
+  return true;
+}
+
+export function moveShapesToParentOrderEdge(
+  editor: Editor,
+  ids: readonly ShapeId[],
+  edge: LayerOrderEdge,
+  source: ChangeSource = "user",
+): boolean {
+  const state = getShapeParentOrderState(editor, ids);
+  if (!state) {
+    return false;
+  }
+
+  const siblings = editor.getChildShapes(state.parentId);
+  const selectedIds = new Set(ids);
+  const selectedSiblings: ShapeRecord[] = [];
+  const unselectedSiblings: ShapeRecord[] = [];
+
+  for (const sibling of siblings) {
+    if (selectedIds.has(sibling.id)) {
+      selectedSiblings.push(sibling);
+    } else {
+      unselectedSiblings.push(sibling);
+    }
+  }
+
+  if (selectedSiblings.length !== selectedIds.size) {
+    return false;
+  }
+
+  const canMove =
+    edge === "back" ? state.canMoveBackward : state.canMoveForward;
+  if (!canMove) {
+    return false;
+  }
+
+  const nextSiblings =
+    edge === "back"
+      ? [...selectedSiblings, ...unselectedSiblings]
+      : [...unselectedSiblings, ...selectedSiblings];
+
+  editor.cancelInteractionForCommand();
+  editor.commands.updateShapes(
+    nextSiblings.map((sibling, index) => ({
+      id: sibling.id,
+      index: editor.createShapeIndex(index + 1),
+    })),
+    { source },
+  );
+  return true;
+}
+
+export function moveSelectionWithinParent(
+  editor: Editor,
+  direction: ShapeSiblingOrderDirection,
+  source: ChangeSource = "user",
+): boolean {
+  const selectedShapes = editor.getSelectedShapes();
+  if (selectedShapes.length !== 1) {
+    return false;
+  }
+
+  const [shape] = selectedShapes;
+  if (!shape || shape.isLocked) {
+    return false;
+  }
+
+  const state = getSelectionSiblingOrderState(editor);
+  if (!state) {
+    return false;
+  }
+
+  const siblings = editor.getChildShapes(state.parentId);
+  const fromIndex = state.index;
+  if (siblings[fromIndex]?.id !== shape.id) {
+    return false;
+  }
+  const toIndex = direction === "backward" ? fromIndex - 1 : fromIndex + 1;
+  if (toIndex < 0 || toIndex >= siblings.length) {
+    return false;
+  }
+
+  const nextSiblings = [...siblings];
+  const [movedShape] = nextSiblings.splice(fromIndex, 1);
+  if (!movedShape) {
+    return false;
+  }
+  nextSiblings.splice(toIndex, 0, movedShape);
+
+  editor.cancelInteractionForCommand();
+  editor.commands.updateShapes(
+    nextSiblings.map((sibling, index) => ({
+      id: sibling.id,
+      index: editor.createShapeIndex(index + 1),
+    })),
+    { source },
+  );
+  return true;
+}
+
+export function moveSelectionInParentOrder(
+  editor: Editor,
+  direction: ShapeSiblingOrderDirection,
+  source: ChangeSource = "user",
+): boolean {
+  return moveShapesInParentOrder(
+    editor,
+    editor.getSelectedShapeIds(),
+    direction,
+    source,
+  );
+}
+
+export function moveSelectionToParentOrderEdge(
+  editor: Editor,
+  edge: ShapeSiblingOrderEdge,
+  source: ChangeSource = "user",
+): boolean {
+  return moveShapesToParentOrderEdge(
+    editor,
+    editor.getSelectedShapeIds(),
+    edge,
+    source,
+  );
+}