@yuzhouu/canvas-kit 0.1.2

package/_vendor/plugin-eraser/EraserTool.ts

@@ -0,0 +1,297 @@
+import {
+  Box,
+  StateNode,
+  Vec,
+  type Editor,
+  type PointerEditorEvent,
+  type ShapeId,
+  type ShapeRecord,
+} from "@land/canvas-core";
+
+const ERASER_HIT_MARGIN_SCREEN = 4;
+const DRAG_START_DISTANCE = 3;
+const DRAG_START_DISTANCE_SQUARED = DRAG_START_DISTANCE * DRAG_START_DISTANCE;
+
+interface EraserSessionInfo {
+  originPagePoint: Vec;
+  previousPagePoint: Vec;
+  protectedContainerIds: Set<ShapeId>;
+  erasingShapeIds: Set<ShapeId>;
+  trail: Vec[];
+}
+
+function hasExceededDragThreshold(origin: Vec, point: Vec): boolean {
+  return origin.dist2(point) >= DRAG_START_DISTANCE_SQUARED;
+}
+
+function getEraserHitMargin(editor: Editor): number {
+  return ERASER_HIT_MARGIN_SCREEN / editor.getCurrentCamera().z;
+}
+
+function isPointInsideBoxInterior(
+  point: Vec,
+  bounds: Box,
+  margin: number,
+): boolean {
+  const inset = Math.min(margin, bounds.w / 2, bounds.h / 2);
+  return (
+    point.x > bounds.minX + inset &&
+    point.x < bounds.maxX - inset &&
+    point.y > bounds.minY + inset &&
+    point.y < bounds.maxY - inset
+  );
+}
+
+function getProtectedContainerIdsAtPoint(
+  editor: Editor,
+  point: Vec,
+): Set<ShapeId> {
+  const protectedIds = new Set<ShapeId>();
+  const margin = getEraserHitMargin(editor);
+  for (const shape of editor.hitTestShapesAtPoint(point)) {
+    const util = editor.getShapeUtil(shape);
+    if (!util.canReceiveChildren(shape)) {
+      continue;
+    }
+
+    const childClipBounds = util.getChildClipLocalBounds(shape);
+    if (!childClipBounds) {
+      continue;
+    }
+
+    const localPoint = util
+      .getLocalToPageTransform(shape)
+      .invert()
+      .applyToPoint(point);
+    if (isPointInsideBoxInterior(localPoint, childClipBounds, margin)) {
+      protectedIds.add(shape.id);
+    }
+  }
+  return protectedIds;
+}
+
+function resolveEraserTarget(
+  editor: Editor,
+  shape: ShapeRecord,
+  info: EraserSessionInfo,
+): ShapeId | null {
+  if (info.protectedContainerIds.has(shape.id)) {
+    return null;
+  }
+  if (editor.isShapeOrAncestorLocked(shape.id)) {
+    return null;
+  }
+
+  const util = editor.getShapeUtil(shape);
+  if (util.canReceiveChildren(shape) && editor.hasLockedDescendant(shape.id)) {
+    return null;
+  }
+
+  return shape.id;
+}
+
+function addHitShapesToSession(
+  editor: Editor,
+  info: EraserSessionInfo,
+  shapes: readonly ShapeRecord[],
+  options: { topMostOnly: boolean },
+): void {
+  const candidates = options.topMostOnly ? shapes.slice(0, 1) : shapes;
+  for (const shape of candidates) {
+    const targetId = resolveEraserTarget(editor, shape, info);
+    if (targetId) {
+      info.erasingShapeIds.add(targetId);
+    }
+  }
+}
+
+function addPointHitsToSession(
+  editor: Editor,
+  info: EraserSessionInfo,
+  event: PointerEditorEvent,
+): void {
+  addHitShapesToSession(editor, info, editor.hitTestShapesAtPoint(event.pagePoint), {
+    topMostOnly: event.accelKey,
+  });
+}
+
+function addLineSegmentHitsToSession(
+  editor: Editor,
+  info: EraserSessionInfo,
+  event: PointerEditorEvent,
+): void {
+  addHitShapesToSession(
+    editor,
+    info,
+    editor.hitTestShapesByLineSegment(info.previousPagePoint, event.pagePoint, {
+      margin: getEraserHitMargin(editor),
+    }),
+    { topMostOnly: event.accelKey },
+  );
+}
+
+function appendTrailPoint(info: EraserSessionInfo, point: Vec): void {
+  const previous = info.trail[info.trail.length - 1];
+  if (previous && previous.dist2(point) <= 1e-6) {
+    return;
+  }
+  info.trail.push(point.clone());
+}
+
+function publishEraserPreview(editor: Editor, info: EraserSessionInfo): void {
+  editor.setErasingShapeIds(Array.from(info.erasingShapeIds));
+  editor.setEraserTrail(info.trail);
+}
+
+function clearEraserPreview(editor: Editor): void {
+  editor.clearErasingShapeIds();
+  editor.clearEraserTrail();
+}
+
+function createSessionInfo(
+  editor: Editor,
+  event: PointerEditorEvent,
+): EraserSessionInfo {
+  const info: EraserSessionInfo = {
+    originPagePoint: event.pagePoint.clone(),
+    previousPagePoint: event.pagePoint.clone(),
+    protectedContainerIds: getProtectedContainerIdsAtPoint(
+      editor,
+      event.pagePoint,
+    ),
+    erasingShapeIds: new Set(),
+    trail: [event.pagePoint.clone()],
+  };
+  addPointHitsToSession(editor, info, event);
+  publishEraserPreview(editor, info);
+  return info;
+}
+
+export class EraserTool extends StateNode {
+  constructor(editor: Editor) {
+    super(editor, "eraser");
+    this.initial = "idle";
+    this.addChild(new EraserIdleState(editor, this));
+    this.addChild(new EraserPointingState(editor, this));
+    this.addChild(new EraserErasingState(editor, this));
+  }
+
+  protected onExit(): void {
+    clearEraserPreview(this.editor);
+  }
+}
+
+class EraserIdleState extends StateNode {
+  constructor(editor: Editor, parent: StateNode) {
+    super(editor, "idle", parent);
+  }
+
+  protected onEnter(): void {
+    clearEraserPreview(this.editor);
+  }
+
+  protected onPointerDown(event: PointerEditorEvent): void {
+    if (event.button !== 0) {
+      return;
+    }
+    this.transition("pointing", createSessionInfo(this.editor, event));
+  }
+}
+
+class EraserPointingState extends StateNode {
+  private info: EraserSessionInfo | null = null;
+
+  constructor(editor: Editor, parent: StateNode) {
+    super(editor, "pointing", parent);
+  }
+
+  protected onEnter(info?: unknown): void {
+    this.info = info as EraserSessionInfo;
+  }
+
+  protected onPointerMove(event: PointerEditorEvent): void {
+    if (!this.info) {
+      return;
+    }
+    if (!hasExceededDragThreshold(this.info.originPagePoint, event.pagePoint)) {
+      return;
+    }
+
+    addLineSegmentHitsToSession(this.editor, this.info, event);
+    appendTrailPoint(this.info, event.pagePoint);
+    this.info.previousPagePoint = event.pagePoint.clone();
+    publishEraserPreview(this.editor, this.info);
+    this.transition("erasing", this.info);
+  }
+
+  protected onPointerUp(event: PointerEditorEvent): void {
+    if (this.info) {
+      addPointHitsToSession(this.editor, this.info, event);
+      publishEraserPreview(this.editor, this.info);
+      deleteEraserTargets(this.editor, this.info);
+    }
+    this.transition("idle");
+  }
+
+  protected onCancel(): void {
+    clearEraserPreview(this.editor);
+    this.transition("idle");
+  }
+
+  protected onExit(): void {
+    this.info = null;
+  }
+}
+
+class EraserErasingState extends StateNode {
+  private info: EraserSessionInfo | null = null;
+
+  constructor(editor: Editor, parent: StateNode) {
+    super(editor, "erasing", parent);
+  }
+
+  protected onEnter(info?: unknown): void {
+    this.info = info as EraserSessionInfo;
+  }
+
+  protected onPointerMove(event: PointerEditorEvent): void {
+    this.update(event);
+  }
+
+  protected onPointerUp(event: PointerEditorEvent): void {
+    this.update(event);
+    if (this.info) {
+      deleteEraserTargets(this.editor, this.info);
+    }
+    this.transition("idle");
+  }
+
+  protected onCancel(): void {
+    clearEraserPreview(this.editor);
+    this.transition("idle");
+  }
+
+  protected onExit(): void {
+    this.info = null;
+  }
+
+  private update(event: PointerEditorEvent): void {
+    if (!this.info) {
+      return;
+    }
+
+    addLineSegmentHitsToSession(this.editor, this.info, event);
+    appendTrailPoint(this.info, event.pagePoint);
+    this.info.previousPagePoint = event.pagePoint.clone();
+    publishEraserPreview(this.editor, this.info);
+  }
+}
+
+function deleteEraserTargets(editor: Editor, info: EraserSessionInfo): void {
+  const ids = Array.from(info.erasingShapeIds);
+  clearEraserPreview(editor);
+  if (ids.length === 0) {
+    return;
+  }
+  editor.commands.deleteShapes(ids, { source: "user" });
+}