@yuzhouu/canvas-kit 0.1.2

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

@@ -0,0 +1,160 @@
+import type { ChangeSource } from "@land/store";
+import type {
+  PageId,
+  ShapeId,
+  ShapeParentId,
+  ShapeRecord,
+} from "../../schema/records";
+import type {
+  Editor,
+  ReparentShapePlacementInput,
+  ReparentShapePlacementResult,
+} from "../Editor";
+import type { ShapeUpdate } from "../commands";
+
+export function canUseShapeParent(
+  editor: Editor,
+  parentId: ShapeParentId,
+  childId?: ShapeId,
+): boolean {
+  if (parentId.startsWith("page:")) {
+    return !!editor.getPage(parentId as PageId);
+  }
+
+  const parent = editor.getShape(parentId as ShapeId);
+  if (!parent) {
+    return false;
+  }
+
+  if (childId) {
+    if (parent.id === childId) {
+      return false;
+    }
+    if (editor.getDescendantShapeIds(childId).includes(parent.id)) {
+      return false;
+    }
+  }
+
+  return editor.getShapeUtil(parent).canReceiveChildren(parent);
+}
+
+export function moveShapesToParentPlacement(
+  editor: Editor,
+  input: ReparentShapePlacementInput,
+  source: ChangeSource = "user",
+): boolean {
+  const ids = Array.from(new Set(input.ids));
+  if (ids.length === 0) {
+    return false;
+  }
+
+  const shapes = ids
+    .map((id) => editor.getShape(id))
+    .filter((shape): shape is ShapeRecord => !!shape);
+  if (shapes.length !== ids.length) {
+    return false;
+  }
+  if (
+    shapes.some((shape) => shape.isLocked || editor.isShapeHidden(shape.id))
+  ) {
+    return false;
+  }
+  if (ids.some((id) => !canUseShapeParent(editor, input.parentId, id))) {
+    return false;
+  }
+
+  return applyParentPlacement(editor, input, ids, shapes, source);
+}
+
+export function moveShapesToParentPlacementResult(
+  editor: Editor,
+  input: ReparentShapePlacementInput,
+  source: ChangeSource = "user",
+): ReparentShapePlacementResult {
+  const ids = Array.from(new Set(input.ids));
+  if (ids.length === 0) {
+    return { ok: false, reason: "notFound" };
+  }
+
+  const shapes = ids
+    .map((id) => editor.getShape(id))
+    .filter((shape): shape is ShapeRecord => !!shape);
+  if (shapes.length !== ids.length) {
+    return { ok: false, reason: "notFound" };
+  }
+
+  for (const shape of shapes) {
+    if (shape.isLocked) {
+      return { ok: false, reason: "locked" };
+    }
+    if (editor.isShapeHidden(shape.id)) {
+      return { ok: false, reason: "hidden" };
+    }
+  }
+
+  for (const id of ids) {
+    const parentId = input.parentId;
+    if (!parentId.startsWith("page:")) {
+      const parent = editor.getShape(parentId as ShapeId);
+      if (!parent) {
+        return { ok: false, reason: "invalidParent" };
+      }
+      if (
+        parent.id === id ||
+        editor.getDescendantShapeIds(id).includes(parent.id)
+      ) {
+        return { ok: false, reason: "cycle" };
+      }
+      if (!editor.getShapeUtil(parent).canReceiveChildren(parent)) {
+        return { ok: false, reason: "invalidParent" };
+      }
+    } else {
+      if (!editor.getPage(parentId as PageId)) {
+        return { ok: false, reason: "invalidParent" };
+      }
+    }
+  }
+
+  const didMove = applyParentPlacement(editor, input, ids, shapes, source);
+  return didMove
+    ? { ok: true, movedIds: ids }
+    : { ok: false, reason: "invalidBeforeId" };
+}
+
+function applyParentPlacement(
+  editor: Editor,
+  input: ReparentShapePlacementInput,
+  ids: readonly ShapeId[],
+  shapes: readonly ShapeRecord[],
+  source: ChangeSource,
+): boolean {
+  const movingIds = new Set(ids);
+  const nextSiblings = editor
+    .getChildShapes(input.parentId)
+    .filter((shape) => !movingIds.has(shape.id));
+
+  let insertIndex = nextSiblings.length;
+  if (input.beforeId) {
+    const beforeIndex = nextSiblings.findIndex(
+      (shape) => shape.id === input.beforeId,
+    );
+    if (beforeIndex === -1) {
+      return false;
+    }
+    insertIndex = beforeIndex;
+  }
+
+  const movingShapes = [...shapes].sort((left, right) =>
+    left.index.localeCompare(right.index),
+  );
+  nextSiblings.splice(insertIndex, 0, ...movingShapes);
+
+  editor.cancelInteractionForCommand();
+  const updates: ShapeUpdate[] = nextSiblings.map((shape, index) => ({
+    id: shape.id,
+    parentId: input.parentId,
+    index: editor.createShapeIndex(index + 1),
+  }));
+  editor.commands.updateShapes(updates, { source });
+  return true;
+}

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

@@ -0,0 +1,412 @@
+import { Box } from "../../geometry/Box";
+import { Vec } from "../../geometry/Vec";
+import type { ShapeId } from "../../schema/records";
+import {
+  getAspectRatioLockedSelectionResizeBoundsWithScale,
+  getSelectionResizeHandleForScale,
+  getSelectionResizeScalesFromBounds,
+  normalizeSelectionResizeBoundsFromEdges,
+  selectionResizeHandleMovesBottomEdge,
+  selectionResizeHandleMovesLeftEdge,
+  selectionResizeHandleMovesRightEdge,
+  selectionResizeHandleMovesTopEdge,
+} from "../resizeGeometry";
+import type { SelectionResizeHandleId } from "../selection";
+import {
+  EPSILON,
+  getAxisMax,
+  getAxisMin,
+  getAxisSize,
+  getAxisValue,
+  getBreadthRange,
+  getRangeIntersection,
+  rangesOverlap,
+  translateBoundsOnAxis,
+} from "./snapGeometry";
+import type {
+  ResizeSnapInput,
+  SnapAxis,
+  SnapNode,
+  SnapPoint,
+} from "./snapTypes";
+
+export interface PointSnapPair {
+  selectionPoint: Vec;
+  candidatePoint: Vec;
+  candidateNodeId: ShapeId;
+}
+
+export interface PointAxisSnap {
+  type: "points";
+  nudge: number;
+  pairs: PointSnapPair[];
+}
+
+export interface Gap {
+  direction: "horizontal" | "vertical";
+  startNode: SnapNode;
+  endNode: SnapNode;
+  length: number;
+  breadthIntersection: [number, number];
+}
+
+export interface GapAxisSnap {
+  type: "gaps";
+  nudge: number;
+  gaps: Gap[];
+}
+
+export type AxisSnap = PointAxisSnap | GapAxisSnap;
+
+export function getPointSnap(
+  axis: SnapAxis,
+  selectionPoints: Vec[],
+  candidatePoints: SnapPoint[],
+  threshold: number,
+): PointAxisSnap | null {
+  let nearestDistance = threshold + 1;
+  let nudge = 0;
+  const pairs: PointSnapPair[] = [];
+
+  for (const selectionPoint of selectionPoints) {
+    for (const candidate of candidatePoints) {
+      const offset =
+        getAxisValue(candidate.point, axis) -
+        getAxisValue(selectionPoint, axis);
+      const distance = Math.abs(offset);
+      if (distance > threshold || distance > nearestDistance + EPSILON) {
+        continue;
+      }
+      if (distance < nearestDistance - EPSILON) {
+        nearestDistance = distance;
+        nudge = offset;
+        pairs.length = 0;
+      } else if (Math.abs(offset - nudge) > EPSILON) {
+        continue;
+      }
+      pairs.push({
+        selectionPoint,
+        candidatePoint: candidate.point,
+        candidateNodeId: candidate.nodeId,
+      });
+    }
+  }
+
+  return pairs.length > 0 ? { type: "points", nudge, pairs } : null;
+}
+
+export function getResizeSnapPointsForHandle(
+  handleId: SelectionResizeHandleId | "any",
+  bounds: Box,
+): Vec[] {
+  const points: Vec[] = [];
+
+  switch (handleId) {
+    case "top":
+    case "left":
+    case "top_left":
+    case "any":
+      points.push(new Vec(bounds.minX, bounds.minY));
+      break;
+  }
+
+  switch (handleId) {
+    case "top":
+    case "right":
+    case "top_right":
+    case "any":
+      points.push(new Vec(bounds.maxX, bounds.minY));
+      break;
+  }
+
+  switch (handleId) {
+    case "bottom":
+    case "right":
+    case "bottom_right":
+    case "any":
+      points.push(new Vec(bounds.maxX, bounds.maxY));
+      break;
+  }
+
+  switch (handleId) {
+    case "bottom":
+    case "left":
+    case "bottom_left":
+    case "any":
+      points.push(new Vec(bounds.minX, bounds.maxY));
+      break;
+  }
+
+  return points;
+}
+
+export function getResizeResultAfterNudge(
+  input: ResizeSnapInput,
+  nudge: Vec,
+): { bounds: Box; scaleX: number; scaleY: number } {
+  const nudgeHandleId = getSelectionResizeHandleForScale({
+    handleId: input.handleId,
+    scaleX: input.scaleX,
+    scaleY: input.scaleY,
+  });
+  let minX = input.resizedSelectionBounds.minX;
+  let maxX = input.resizedSelectionBounds.maxX;
+  let minY = input.resizedSelectionBounds.minY;
+  let maxY = input.resizedSelectionBounds.maxY;
+
+  if (input.isResizingFromCenter) {
+    if (selectionResizeHandleMovesLeftEdge(nudgeHandleId)) {
+      minX += nudge.x;
+      maxX -= nudge.x;
+    } else if (selectionResizeHandleMovesRightEdge(nudgeHandleId)) {
+      minX -= nudge.x;
+      maxX += nudge.x;
+    }
+
+    if (selectionResizeHandleMovesTopEdge(nudgeHandleId)) {
+      minY += nudge.y;
+      maxY -= nudge.y;
+    } else if (selectionResizeHandleMovesBottomEdge(nudgeHandleId)) {
+      minY -= nudge.y;
+      maxY += nudge.y;
+    }
+  } else {
+    if (selectionResizeHandleMovesLeftEdge(nudgeHandleId)) {
+      minX += nudge.x;
+    } else if (selectionResizeHandleMovesRightEdge(nudgeHandleId)) {
+      maxX += nudge.x;
+    }
+
+    if (selectionResizeHandleMovesTopEdge(nudgeHandleId)) {
+      minY += nudge.y;
+    } else if (selectionResizeHandleMovesBottomEdge(nudgeHandleId)) {
+      maxY += nudge.y;
+    }
+  }
+
+  const nudgedBounds = normalizeSelectionResizeBoundsFromEdges({
+    minX,
+    minY,
+    maxX,
+    maxY,
+  });
+  if (!input.isAspectRatioLocked) {
+    const scales = getSelectionResizeScalesFromBounds({
+      startBounds: input.initialSelectionBounds,
+      bounds: nudgedBounds,
+      handleId: input.handleId,
+      scaleX: input.scaleX,
+      scaleY: input.scaleY,
+      isResizingFromCenter: input.isResizingFromCenter,
+    });
+
+    return {
+      bounds: nudgedBounds,
+      scaleX: scales.scaleX,
+      scaleY: scales.scaleY,
+    };
+  }
+
+  return getAspectRatioLockedSelectionResizeBoundsWithScale({
+    startBounds: input.initialSelectionBounds,
+    bounds: nudgedBounds,
+    handleId: input.handleId,
+    aspectRatio:
+      input.initialSelectionBounds.h === 0
+        ? 1
+        : input.initialSelectionBounds.w / input.initialSelectionBounds.h,
+    isResizingFromCenter: input.isResizingFromCenter,
+    scaleX: input.scaleX,
+    scaleY: input.scaleY,
+  });
+}
+
+export function getResizeBoundsAfterNudge(
+  input: ResizeSnapInput,
+  nudge: Vec,
+): Box {
+  return getResizeResultAfterNudge(input, nudge).bounds;
+}
+
+export function collectGaps(nodes: SnapNode[], axis: SnapAxis): Gap[] {
+  const direction = axis === "x" ? "horizontal" : "vertical";
+  const sorted = [...nodes].sort(
+    (left, right) => getAxisMin(left.bounds, axis) - getAxisMin(right.bounds, axis),
+  );
+  const gaps: Gap[] = [];
+
+  for (let startIndex = 0; startIndex < sorted.length; startIndex += 1) {
+    const startNode = sorted[startIndex];
+    if (!startNode) {
+      continue;
+    }
+    for (let endIndex = startIndex + 1; endIndex < sorted.length; endIndex += 1) {
+      const endNode = sorted[endIndex];
+      if (!endNode) {
+        continue;
+      }
+      const startMax = getAxisMax(startNode.bounds, axis);
+      const endMin = getAxisMin(endNode.bounds, axis);
+      if (startMax >= endMin) {
+        continue;
+      }
+      const breadthIntersection = getRangeIntersection(
+        getBreadthRange(startNode.bounds, axis),
+        getBreadthRange(endNode.bounds, axis),
+      );
+      if (!breadthIntersection) {
+        continue;
+      }
+      gaps.push({
+        direction,
+        startNode,
+        endNode,
+        length: endMin - startMax,
+        breadthIntersection,
+      });
+    }
+  }
+
+  return gaps;
+}
+
+export function createGap(
+  direction: Gap["direction"],
+  startNode: SnapNode,
+  endNode: SnapNode,
+  axis: SnapAxis,
+): Gap | null {
+  const breadthIntersection = getRangeIntersection(
+    getBreadthRange(startNode.bounds, axis),
+    getBreadthRange(endNode.bounds, axis),
+  );
+  if (!breadthIntersection) {
+    return null;
+  }
+  return {
+    direction,
+    startNode,
+    endNode,
+    length:
+      getAxisMin(endNode.bounds, axis) - getAxisMax(startNode.bounds, axis),
+    breadthIntersection,
+  };
+}
+
+export function getGapSnap(
+  axis: SnapAxis,
+  selectionBounds: Box,
+  visibleGaps: Gap[],
+  threshold: number,
+): GapAxisSnap | null {
+  const selectionBreadth = getBreadthRange(selectionBounds, axis);
+  const selectionSize = getAxisSize(selectionBounds, axis);
+  let nearestDistance = threshold + 1;
+  let nearest: GapAxisSnap | null = null;
+
+  const consider = (nudge: number, gaps: Gap[]): void => {
+    const distance = Math.abs(nudge);
+    if (
+      gaps.length === 0 ||
+      distance > threshold ||
+      distance >= nearestDistance - EPSILON
+    ) {
+      return;
+    }
+    nearestDistance = distance;
+    nearest = { type: "gaps", nudge, gaps };
+  };
+  const getSelectionNodeAfterNudge = (nudge: number): SnapNode => ({
+    id: "selection",
+    bounds: translateBoundsOnAxis(selectionBounds, axis, nudge),
+  });
+
+  for (const gap of visibleGaps) {
+    if (
+      selectionSize <= gap.length &&
+      rangesOverlap(selectionBreadth, gap.breadthIntersection)
+    ) {
+      const targetMin =
+        getAxisMax(gap.startNode.bounds, axis) +
+        (gap.length - selectionSize) / 2;
+      const nudge = targetMin - getAxisMin(selectionBounds, axis);
+      const snappedSelectionNode = getSelectionNodeAfterNudge(nudge);
+      const before = createGap(
+        gap.direction,
+        gap.startNode,
+        snappedSelectionNode,
+        axis,
+      );
+      const after = createGap(
+        gap.direction,
+        snappedSelectionNode,
+        gap.endNode,
+        axis,
+      );
+      consider(nudge, [before, after].filter((item): item is Gap => item !== null));
+    }
+
+    const selectionAfterNudge =
+      getAxisMax(gap.endNode.bounds, axis) +
+      gap.length -
+      getAxisMin(selectionBounds, axis);
+    const afterSelectionNode = getSelectionNodeAfterNudge(selectionAfterNudge);
+    if (
+      rangesOverlap(
+        getBreadthRange(afterSelectionNode.bounds, axis),
+        gap.breadthIntersection,
+      )
+    ) {
+      const duplicate = createGap(
+        gap.direction,
+        gap.endNode,
+        afterSelectionNode,
+        axis,
+      );
+      consider(
+        selectionAfterNudge,
+        duplicate ? [gap, duplicate] : [],
+      );
+    }
+
+    const selectionBeforeNudge =
+      getAxisMin(gap.startNode.bounds, axis) -
+      gap.length -
+      getAxisMax(selectionBounds, axis);
+    const beforeSelectionNode = getSelectionNodeAfterNudge(selectionBeforeNudge);
+    if (
+      rangesOverlap(
+        getBreadthRange(beforeSelectionNode.bounds, axis),
+        gap.breadthIntersection,
+      )
+    ) {
+      const duplicate = createGap(
+        gap.direction,
+        beforeSelectionNode,
+        gap.startNode,
+        axis,
+      );
+      consider(
+        selectionBeforeNudge,
+        duplicate ? [duplicate, gap] : [],
+      );
+    }
+  }
+
+  return nearest;
+}
+
+export function chooseAxisSnap(
+  pointSnap: PointAxisSnap | null,
+  gapSnap: GapAxisSnap | null,
+): AxisSnap | null {
+  if (!pointSnap) {
+    return gapSnap;
+  }
+  if (!gapSnap) {
+    return pointSnap;
+  }
+  return Math.abs(pointSnap.nudge) <= Math.abs(gapSnap.nudge)
+    ? pointSnap
+    : gapSnap;
+}