@yuzhouu/canvas-kit 0.1.2

package/_vendor/canvas-core/editor/queries/shapeTransforms.ts

@@ -0,0 +1,171 @@
+import { Box } from "../../geometry/Box";
+import { Mat } from "../../geometry/Mat";
+import { Vec } from "../../geometry/Vec";
+import type { ShapeRecord } from "../../schema/records";
+import type { ShapeUtil } from "../../shapes/ShapeUtil";
+
+export interface ShapeGeometry {
+  bounds: Box;
+  center: Vec;
+  corners: Vec[];
+  outlineVertices: Vec[];
+}
+
+export function getShapeLocalBounds<S extends ShapeRecord>(
+  shape: S,
+  util: ShapeUtil<S>,
+): Box {
+  return util.getLocalBounds(shape);
+}
+
+export function getShapeRenderBounds<S extends ShapeRecord>(
+  shape: S,
+  util: ShapeUtil<S>,
+): Box {
+  return util.getRenderBounds(shape);
+}
+
+export function getShapeExportBounds<S extends ShapeRecord>(
+  shape: S,
+  util: ShapeUtil<S>,
+): Box {
+  return util.getExportBounds(shape);
+}
+
+export function getShapeLocalToPageTransform<S extends ShapeRecord>(
+  shape: S,
+  util: ShapeUtil<S>,
+): Mat {
+  return util.getLocalToPageTransform(shape);
+}
+
+export function getShapePositionedToPageTransform<S extends ShapeRecord>(
+  shape: S,
+  util: ShapeUtil<S>,
+): Mat {
+  const center = getShapePageCenter(shape, util);
+  return Mat.Translate(center.x, center.y)
+    .compose(Mat.Rotate(shape.rotation))
+    .compose(Mat.Scale(shape.scaleX, shape.scaleY))
+    .compose(Mat.Translate(-center.x, -center.y));
+}
+
+export function getShapeRenderToPageTransform<S extends ShapeRecord>(
+  shape: S,
+  util: ShapeUtil<S>,
+): Mat {
+  return getShapeLocalToPageTransform(shape, util);
+}
+
+export function getShapeExportToPageTransform<S extends ShapeRecord>(
+  shape: S,
+  util: ShapeUtil<S>,
+): Mat {
+  return getShapeLocalToPageTransform(shape, util);
+}
+
+export function getShapePageCenter<S extends ShapeRecord>(
+  shape: S,
+  util: ShapeUtil<S>,
+): Vec {
+  return util.getBounds(shape).center;
+}
+
+export function positionedShapePointToPagePoint<S extends ShapeRecord>(
+  shape: S,
+  point: Vec,
+  util: ShapeUtil<S>,
+): Vec {
+  return getShapePositionedToPageTransform(shape, util).applyToPoint(point);
+}
+
+export function pagePointToShapePositionedPoint<S extends ShapeRecord>(
+  shape: S,
+  point: Vec,
+  util: ShapeUtil<S>,
+): Vec {
+  if (shape.scaleX === 0 || shape.scaleY === 0) {
+    const center = getShapePageCenter(shape, util);
+    const rotatedOffset = point.sub(center).rot(-shape.rotation);
+    return center.add(
+      new Vec(
+        shape.scaleX === 0 ? 0 : rotatedOffset.x / shape.scaleX,
+        shape.scaleY === 0 ? 0 : rotatedOffset.y / shape.scaleY,
+      ),
+    );
+  }
+  return getShapePositionedToPageTransform(shape, util)
+    .invert()
+    .applyToPoint(point);
+}
+
+export function getShapePositionedOutlineVertices<S extends ShapeRecord>(
+  shape: S,
+  util: ShapeUtil<S>,
+): Vec[] {
+  return util.getPositionedOutlineVertices(shape);
+}
+
+export function getShapePageCorners<S extends ShapeRecord>(
+  shape: S,
+  util: ShapeUtil<S>,
+): Vec[] {
+  const bounds = util.getBounds(shape);
+  const corners = [
+    new Vec(bounds.minX, bounds.minY),
+    new Vec(bounds.maxX, bounds.minY),
+    new Vec(bounds.maxX, bounds.maxY),
+    new Vec(bounds.minX, bounds.maxY),
+  ];
+
+  return corners.map((corner) =>
+    positionedShapePointToPagePoint(shape, corner, util),
+  );
+}
+
+export function getShapePageOutlineVertices<S extends ShapeRecord>(
+  shape: S,
+  util: ShapeUtil<S>,
+): Vec[] {
+  return getShapePositionedOutlineVertices(shape, util).map((point) =>
+    positionedShapePointToPagePoint(shape, point, util),
+  );
+}
+
+export function getShapePageBounds<S extends ShapeRecord>(
+  shape: S,
+  util: ShapeUtil<S>,
+): Box {
+  return Box.FromPoints(getShapePageOutlineVertices(shape, util));
+}
+
+export function getShapeExportPageBounds<S extends ShapeRecord>(
+  shape: S,
+  util: ShapeUtil<S>,
+): Box {
+  const bounds = getShapeExportBounds(shape, util);
+  const transform = getShapeExportToPageTransform(shape, util);
+  return Box.FromPoints(
+    [
+      new Vec(bounds.minX, bounds.minY),
+      new Vec(bounds.maxX, bounds.minY),
+      new Vec(bounds.maxX, bounds.maxY),
+      new Vec(bounds.minX, bounds.maxY),
+    ].map((point) => transform.applyToPoint(point)),
+  );
+}
+
+export function getShapeGeometry<S extends ShapeRecord>(
+  shape: S,
+  util: ShapeUtil<S>,
+): ShapeGeometry {
+  const outlineVertices = getShapePageOutlineVertices(shape, util);
+  const corners = getShapePageCorners(shape, util);
+  const bounds = Box.FromPoints(outlineVertices);
+  return {
+    bounds,
+    center: getShapePageCenter(shape, util),
+    corners,
+    outlineVertices,
+  };
+}

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

@@ -0,0 +1,439 @@
+import { Box } from "../geometry/Box";
+import type { ShapeId } from "../schema/records";
+
+export const RENDER_CULLING_OVERSCAN_SCREEN = 160;
+
+const MAX_RETAINED_RENDER_WINDOW_BASE_EXTRA_SHAPES = 12;
+const MAX_RETAINED_RENDER_WINDOW_BASE_EXTRA_SHAPES_PER_RANGE = 4;
+const RETAINED_RENDER_WINDOW_BASE_PREVIOUS_RANGE_MERGE_GAP = 2;
+const MIN_RETAINED_RENDER_WINDOW_EXTRA_SHAPES = 12;
+const MAX_RETAINED_RENDER_WINDOW_EXTRA_SHAPES = 96;
+const RETAINED_RENDER_WINDOW_EXTRA_VISIBLE_RATIO = 0.5;
+const MIN_RETAINED_RENDER_WINDOW_CLUSTER_PADDING = 8;
+const MAX_RETAINED_RENDER_WINDOW_CLUSTER_PADDING = 32;
+const RETAINED_RENDER_WINDOW_CLUSTER_MERGE_GAP = 2;
+const RETAINED_RENDER_WINDOW_RANGE_MERGE_GAP = 2;
+const RETAINED_RENDER_WINDOW_PREVIOUS_RANGE_MERGE_GAP = 6;
+const RETAINED_RENDER_WINDOW_FORWARD_CLUSTER_PADDING = 4;
+
+export interface ShapeIndexRange {
+  start: number;
+  end: number;
+}
+
+export interface ShapeWindowSnapshot {
+  viewportReady: boolean;
+  ranges: ShapeIndexRange[];
+  shapeIds: ShapeId[];
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+export function doesBoxContainBox(outer: Box, inner: Box): boolean {
+  return (
+    inner.minX >= outer.minX &&
+    inner.maxX <= outer.maxX &&
+    inner.minY >= outer.minY &&
+    inner.maxY <= outer.maxY
+  );
+}
+
+export function formatShapeIndexRanges(ranges: ShapeIndexRange[]): string {
+  if (ranges.length === 0) {
+    return "none";
+  }
+
+  return ranges
+    .map((range) => `${range.start}-${range.end - 1}`)
+    .join(", ");
+}
+
+export function getRetainedRenderWindowExtraShapeBudget(
+  culledShapeCount: number,
+): number {
+  if (culledShapeCount <= 0) {
+    return 0;
+  }
+
+  return clamp(
+    Math.ceil(culledShapeCount * RETAINED_RENDER_WINDOW_EXTRA_VISIBLE_RATIO),
+    MIN_RETAINED_RENDER_WINDOW_EXTRA_SHAPES,
+    MAX_RETAINED_RENDER_WINDOW_EXTRA_SHAPES,
+  );
+}
+
+export function mergeShapeIndexRanges(
+  ranges: ShapeIndexRange[],
+  gapAllowance = 0,
+): ShapeIndexRange[] {
+  if (ranges.length === 0) {
+    return [];
+  }
+
+  const sortedRanges = [...ranges].sort((left, right) => left.start - right.start);
+  const mergedRanges: ShapeIndexRange[] = [];
+
+  for (const range of sortedRanges) {
+    const previous = mergedRanges[mergedRanges.length - 1];
+    if (!previous || range.start > previous.end + gapAllowance) {
+      mergedRanges.push({ ...range });
+      continue;
+    }
+
+    previous.end = Math.max(previous.end, range.end);
+  }
+
+  return mergedRanges;
+}
+
+function getGapConstrainedClusterPadding(
+  gap: number,
+  targetPadding: number,
+): number {
+  if (!Number.isFinite(gap)) {
+    return targetPadding;
+  }
+
+  const minRemainingGap = RETAINED_RENDER_WINDOW_RANGE_MERGE_GAP + 1;
+  const maxPaddingIntoGap = Math.max(
+    0,
+    Math.floor((gap - minRemainingGap) / 2),
+  );
+  return Math.min(targetPadding, maxPaddingIntoGap);
+}
+
+export function doRangesContainRanges(
+  outerRanges: ShapeIndexRange[],
+  innerRanges: ShapeIndexRange[],
+): boolean {
+  if (innerRanges.length === 0) {
+    return true;
+  }
+
+  if (outerRanges.length === 0) {
+    return false;
+  }
+
+  let outerIndex = 0;
+  for (const innerRange of innerRanges) {
+    while (outerIndex < outerRanges.length) {
+      const outerRange = outerRanges[outerIndex];
+      if (
+        outerRange &&
+        innerRange.start >= outerRange.start &&
+        innerRange.end <= outerRange.end
+      ) {
+        break;
+      }
+
+      if (outerRange && innerRange.end > outerRange.end) {
+        outerIndex += 1;
+        continue;
+      }
+
+      return false;
+    }
+
+    if (outerIndex >= outerRanges.length) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+export function getShapeIndexRangeSpan(ranges: ShapeIndexRange[]): number {
+  return ranges.reduce((sum, range) => sum + (range.end - range.start), 0);
+}
+
+export function getExpandedRetainedShapeRanges(
+  previousRanges: ShapeIndexRange[],
+  nextRanges: ShapeIndexRange[],
+  extraShapeBudget: number,
+): ShapeIndexRange[] | null {
+  const minRemainingGap = RETAINED_RENDER_WINDOW_RANGE_MERGE_GAP + 1;
+  const expandedRanges = nextRanges.map((nextRange, index) => {
+    const expandedRange = { ...nextRange };
+    for (const previousRange of previousRanges) {
+      if (
+        previousRange.end + RETAINED_RENDER_WINDOW_PREVIOUS_RANGE_MERGE_GAP <
+          nextRange.start ||
+        previousRange.start >
+          nextRange.end + RETAINED_RENDER_WINDOW_PREVIOUS_RANGE_MERGE_GAP
+      ) {
+        continue;
+      }
+
+      expandedRange.start = Math.min(expandedRange.start, previousRange.start);
+      expandedRange.end = Math.max(expandedRange.end, previousRange.end);
+    }
+
+    const previousNextRange = index > 0 ? nextRanges[index - 1] : null;
+    const nextNextRange =
+      index < nextRanges.length - 1 ? nextRanges[index + 1] : null;
+    const leftLimit = previousNextRange
+      ? previousNextRange.end + minRemainingGap
+      : -Infinity;
+    const rightLimit = nextNextRange
+      ? nextNextRange.start - minRemainingGap
+      : Infinity;
+
+    return {
+      start: Math.min(
+        nextRange.start,
+        Math.max(leftLimit, expandedRange.start),
+      ),
+      end: Math.max(nextRange.end, Math.min(rightLimit, expandedRange.end)),
+    };
+  });
+
+  if (mergeShapeIndexRanges(expandedRanges).length !== nextRanges.length) {
+    return null;
+  }
+
+  const nextSpan = getShapeIndexRangeSpan(nextRanges);
+  const expandedSpan = getShapeIndexRangeSpan(expandedRanges);
+  if (expandedSpan > nextSpan + extraShapeBudget) {
+    return null;
+  }
+
+  return expandedRanges;
+}
+
+export function getExpandedRetainedBaseShapeRanges(
+  previousRanges: ShapeIndexRange[],
+  nextRanges: ShapeIndexRange[],
+): ShapeIndexRange[] | null {
+  if (previousRanges.length !== nextRanges.length || nextRanges.length === 0) {
+    return null;
+  }
+
+  const minRemainingGap =
+    RETAINED_RENDER_WINDOW_BASE_PREVIOUS_RANGE_MERGE_GAP + 1;
+  const expandedRanges = nextRanges.map((nextRange, index) => {
+    const previousRange = previousRanges[index];
+    if (!previousRange) {
+      return null;
+    }
+
+    if (
+      previousRange.end + RETAINED_RENDER_WINDOW_BASE_PREVIOUS_RANGE_MERGE_GAP <
+        nextRange.start ||
+      previousRange.start >
+        nextRange.end + RETAINED_RENDER_WINDOW_BASE_PREVIOUS_RANGE_MERGE_GAP
+    ) {
+      return null;
+    }
+
+    const previousNextRange = index > 0 ? nextRanges[index - 1] : null;
+    const nextNextRange =
+      index < nextRanges.length - 1 ? nextRanges[index + 1] : null;
+    const leftLimit = previousNextRange
+      ? previousNextRange.end + minRemainingGap
+      : -Infinity;
+    const rightLimit = nextNextRange
+      ? nextNextRange.start - minRemainingGap
+      : Infinity;
+    const expandedRange = {
+      start: Math.min(nextRange.start, Math.max(leftLimit, previousRange.start)),
+      end: Math.max(nextRange.end, Math.min(rightLimit, previousRange.end)),
+    };
+
+    if (
+      expandedRange.end - expandedRange.start >
+      nextRange.end -
+        nextRange.start +
+        MAX_RETAINED_RENDER_WINDOW_BASE_EXTRA_SHAPES_PER_RANGE
+    ) {
+      return null;
+    }
+
+    return expandedRange;
+  });
+
+  if (
+    expandedRanges.some(
+      (range): range is null => range === null,
+    )
+  ) {
+    return null;
+  }
+
+  const ranges = expandedRanges as ShapeIndexRange[];
+  if (mergeShapeIndexRanges(ranges).length !== nextRanges.length) {
+    return null;
+  }
+
+  const nextSpan = getShapeIndexRangeSpan(nextRanges);
+  const expandedSpan = getShapeIndexRangeSpan(ranges);
+  if (expandedSpan > nextSpan + MAX_RETAINED_RENDER_WINDOW_BASE_EXTRA_SHAPES) {
+    return null;
+  }
+
+  return ranges;
+}
+
+export function getShapeIndexRangesForShapeIds(
+  shapeIds: ShapeId[],
+  pageIndexById: Map<ShapeId, number>,
+  gapAllowance = 0,
+): ShapeIndexRange[] {
+  const indices = shapeIds
+    .map((shapeId) => pageIndexById.get(shapeId))
+    .filter((index): index is number => index !== undefined);
+
+  return mergeShapeIndexRanges(
+    indices.map((index) => ({ start: index, end: index + 1 })),
+    gapAllowance,
+  );
+}
+
+function getShapeIdsForRanges(
+  pageShapeIds: ShapeId[],
+  ranges: ShapeIndexRange[],
+): ShapeId[] {
+  const retainedShapeIds: ShapeId[] = [];
+  for (const range of ranges) {
+    retainedShapeIds.push(...pageShapeIds.slice(range.start, range.end));
+  }
+  return retainedShapeIds;
+}
+
+export function getShapeWindowSnapshot(
+  pageShapeIds: ShapeId[],
+  ranges: ShapeIndexRange[],
+  options?: { viewportReady?: boolean },
+): ShapeWindowSnapshot {
+  return {
+    viewportReady: options?.viewportReady ?? true,
+    ranges: ranges.map((range) => ({ ...range })),
+    shapeIds: getShapeIdsForRanges(pageShapeIds, ranges),
+  };
+}
+
+export function getShapeIdArrayChangeCounts(
+  previous: ShapeId[],
+  next: ShapeId[],
+): {
+  changed: number;
+  added: number;
+  removed: number;
+} {
+  if (previous.length === 0) {
+    return {
+      changed: next.length,
+      added: next.length,
+      removed: 0,
+    };
+  }
+
+  if (next.length === 0) {
+    return {
+      changed: previous.length,
+      added: 0,
+      removed: previous.length,
+    };
+  }
+
+  const previousSet = new Set(previous);
+  const nextSet = new Set(next);
+  let added = 0;
+  let removed = 0;
+
+  for (const id of nextSet) {
+    if (!previousSet.has(id)) {
+      added += 1;
+    }
+  }
+
+  for (const id of previousSet) {
+    if (!nextSet.has(id)) {
+      removed += 1;
+    }
+  }
+
+  return {
+    changed: added + removed,
+    added,
+    removed,
+  };
+}
+
+export function collectRetainedShapeRanges(
+  pageShapeIds: ShapeId[],
+  culledShapeIds: ShapeId[],
+  selectedIds: Set<ShapeId>,
+  extraShapeBudget: number,
+): ShapeIndexRange[] {
+  if (pageShapeIds.length === 0) {
+    return [];
+  }
+
+  const pageIndexById = new Map<ShapeId, number>();
+  for (const [index, shapeId] of pageShapeIds.entries()) {
+    pageIndexById.set(shapeId, index);
+  }
+
+  const culledIndices = culledShapeIds
+    .map((shapeId) => pageIndexById.get(shapeId))
+    .filter((index): index is number => index !== undefined)
+    .sort((left, right) => left - right);
+
+  const culledRanges = mergeShapeIndexRanges(
+    culledIndices.map((index) => ({ start: index, end: index + 1 })),
+    RETAINED_RENDER_WINDOW_CLUSTER_MERGE_GAP,
+  );
+
+  const pendingRanges: ShapeIndexRange[] = [];
+  if (culledRanges.length > 0) {
+    const clusterPadding = clamp(
+      Math.ceil(extraShapeBudget / (culledRanges.length * 2)),
+      MIN_RETAINED_RENDER_WINDOW_CLUSTER_PADDING,
+      MAX_RETAINED_RENDER_WINDOW_CLUSTER_PADDING,
+    );
+
+    for (const [index, range] of culledRanges.entries()) {
+      const previousRange = index > 0 ? culledRanges[index - 1] : null;
+      const nextRange =
+        index < culledRanges.length - 1 ? culledRanges[index + 1] : null;
+      const leftGap = previousRange ? range.start - previousRange.end : Infinity;
+      const rightGap = nextRange ? nextRange.start - range.end : Infinity;
+      const leftPadding = getGapConstrainedClusterPadding(
+        leftGap,
+        clusterPadding,
+      );
+      const rightPadding = getGapConstrainedClusterPadding(
+        rightGap,
+        clusterPadding + RETAINED_RENDER_WINDOW_FORWARD_CLUSTER_PADDING,
+      );
+
+      pendingRanges.push({
+        start: Math.max(0, range.start - leftPadding),
+        end: Math.min(pageShapeIds.length, range.end + rightPadding),
+      });
+    }
+  }
+
+  for (const shapeId of selectedIds) {
+    const index = pageIndexById.get(shapeId);
+    if (index === undefined) {
+      continue;
+    }
+
+    pendingRanges.push({
+      start: index,
+      end: index + 1,
+    });
+  }
+
+  if (pendingRanges.length === 0) {
+    return [];
+  }
+
+  return mergeShapeIndexRanges(
+    pendingRanges,
+    RETAINED_RENDER_WINDOW_RANGE_MERGE_GAP,
+  );
+}