@yuzhouu/canvas-kit 0.1.2

package/_vendor/plugin-eraser/canvas.tsx

@@ -0,0 +1,616 @@
+import { memo, useEffect, useRef, useState } from "react";
+import { type LandCanvasPlugin } from "@land/canvas-plugin-api";
+import { type Vec } from "@land/canvas-core";
+import { PageSpace, useEditor, useValue } from "@land/canvas-react";
+
+export function createEraserCanvasPlugin(): LandCanvasPlugin {
+  return {
+    id: "land.eraser.react",
+    canvasComponents: [
+      {
+        id: "land.eraser.trail-overlay",
+        component: EraserTrailOverlay,
+      },
+    ],
+    setup() {
+      // Eraser does not render shape records.
+    },
+  };
+}
+
+const EraserTrailOverlay = memo(function EraserTrailOverlay() {
+  const editor = useEditor();
+  const isTrailActive = useValue(editor.eraserTrailActiveSignal);
+
+  if (!isTrailActive) {
+    return null;
+  }
+
+  return (
+    <PageSpace
+      dataUi="eraser-trail-page-space"
+      className="pointer-events-none absolute inset-0"
+    >
+      <svg
+        width="100%"
+        height="100%"
+        style={{
+          display: "block",
+          width: "100%",
+          height: "100%",
+          overflow: "visible",
+        }}
+      >
+        <EraserTrailContent />
+      </svg>
+    </PageSpace>
+  );
+});
+
+const EraserTrailContent = memo(function EraserTrailContent() {
+  const editor = useEditor();
+  const trail = useValue(editor.eraserTrailSignal);
+  const zoom = useValue(editor.cameraZoomSignal);
+  const safeZoom = Math.max(zoom, 0.0001);
+  const clockTime = useAnimationClock();
+  const sampleState = useRef<EraserTrailSampleState>({
+    samples: [],
+    sourceLength: 0,
+  });
+  const renderTime = Math.max(clockTime, getNowMs());
+  syncEraserTrailSampleState(
+    sampleState.current,
+    trail,
+    safeZoom,
+    renderTime,
+  );
+  const trailPoints = getRenderableEraserTrailPoints(
+    sampleState.current.samples,
+    renderTime,
+  );
+
+  if (trailPoints.length === 0) {
+    return null;
+  }
+
+  const path = getEraserScribblePath(
+    trailPoints,
+    ERASER_SCRIBBLE_SIZE / safeZoom,
+  );
+
+  if (!path) {
+    return null;
+  }
+
+  return (
+    <g data-ui="eraser-trail-overlay">
+      <path
+        data-ui="eraser-trail-scribble"
+        d={path}
+        fill={ERASER_SCRIBBLE_FILL}
+      />
+    </g>
+  );
+});
+
+interface TrailRenderPoint {
+  x: number;
+  y: number;
+}
+
+interface EraserTrailTimedPoint extends TrailRenderPoint {
+  time: number;
+  velocity: number;
+}
+
+interface EraserTrailSampleState {
+  samples: EraserTrailTimedPoint[];
+  sourceLength: number;
+}
+
+interface EraserScribbleSample {
+  point: TrailRenderPoint;
+  direction: TrailRenderPoint;
+  radius: number;
+  runningLength: number;
+}
+
+const ERASER_SCRIBBLE_FILL = "rgba(142, 142, 142, 0.16)";
+const ERASER_SCRIBBLE_MAX_POINTS = 48;
+const ERASER_SCRIBBLE_MIN_POINT_DISTANCE = 1;
+const ERASER_SCRIBBLE_SIZE = 12;
+const ERASER_SCRIBBLE_STREAMLINE = 0.32;
+const ERASER_SCRIBBLE_CAP_STEPS = 8;
+const ERASER_SCRIBBLE_DOT_STEPS = 13;
+const ERASER_SCRIBBLE_INITIAL_SAMPLE_INTERVAL = 16;
+const ERASER_SCRIBBLE_MIN_SAMPLE_INTERVAL = 8;
+const ERASER_SCRIBBLE_BASE_LIFETIME = 180;
+const ERASER_SCRIBBLE_SPEED_LIFETIME = 180;
+const ERASER_SCRIBBLE_MAX_LIFETIME = 680;
+
+function useAnimationClock(): number {
+  const [time, setTime] = useState(() => getNowMs());
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    let frame = 0;
+    const tick = (nextTime: number) => {
+      setTime(nextTime);
+      frame = window.requestAnimationFrame(tick);
+    };
+
+    frame = window.requestAnimationFrame(tick);
+    return () => {
+      window.cancelAnimationFrame(frame);
+    };
+  }, []);
+
+  return time;
+}
+
+function getNowMs(): number {
+  return typeof performance === "undefined" ? Date.now() : performance.now();
+}
+
+function syncEraserTrailSampleState(
+  state: EraserTrailSampleState,
+  points: readonly Vec[],
+  zoom: number,
+  now: number,
+): void {
+  pruneEraserTrailSamples(state, now);
+  if (points.length < state.sourceLength) {
+    state.samples = [];
+    state.sourceLength = 0;
+  }
+
+  if (points.length === state.sourceLength) {
+    return;
+  }
+
+  const firstNewIndex = state.sourceLength;
+  const newPointCount = points.length - firstNewIndex;
+  const previousTime =
+    state.samples[state.samples.length - 1]?.time ??
+    now - ERASER_SCRIBBLE_INITIAL_SAMPLE_INTERVAL * newPointCount;
+  for (let i = firstNewIndex; i < points.length; i++) {
+    const point = points[i];
+    const progress = (i - firstNewIndex + 1) / newPointCount;
+    appendEraserTrailSample(
+      state,
+      { x: point.x, y: point.y },
+      zoom,
+      lerpNumber(previousTime, now, progress),
+    );
+  }
+
+  state.sourceLength = points.length;
+  pruneEraserTrailSamples(state, now);
+}
+
+function appendEraserTrailSample(
+  state: EraserTrailSampleState,
+  point: TrailRenderPoint,
+  zoom: number,
+  time: number,
+): void {
+  const previous = state.samples[state.samples.length - 1];
+  if (!previous) {
+    state.samples.push({ ...point, time, velocity: 0 });
+    return;
+  }
+
+  const minDistance = ERASER_SCRIBBLE_MIN_POINT_DISTANCE / zoom;
+  const distance = getTrailPointDistance(previous, point);
+  if (distance < minDistance) {
+    state.samples[state.samples.length - 1] = {
+      ...previous,
+      ...point,
+      time,
+    };
+    return;
+  }
+
+  const elapsed = Math.max(
+    ERASER_SCRIBBLE_MIN_SAMPLE_INTERVAL,
+    time - previous.time,
+  );
+  const screenVelocity = (distance * zoom) / elapsed;
+  state.samples.push({
+    ...point,
+    time,
+    velocity: lerpNumber(previous.velocity, screenVelocity, 0.68),
+  });
+}
+
+function pruneEraserTrailSamples(
+  state: EraserTrailSampleState,
+  now: number,
+): void {
+  state.samples = getActiveEraserTrailSamples(state.samples, now);
+}
+
+function getRenderableEraserTrailPoints(
+  samples: readonly EraserTrailTimedPoint[],
+  now: number,
+): TrailRenderPoint[] {
+  const activeSamples = getActiveEraserTrailSamples(samples, now);
+  const activePoints =
+    activeSamples.length > ERASER_SCRIBBLE_MAX_POINTS
+      ? activeSamples.slice(-ERASER_SCRIBBLE_MAX_POINTS)
+      : activeSamples;
+  return getStreamlinedTrailPoints(activePoints, ERASER_SCRIBBLE_STREAMLINE);
+}
+
+function getActiveEraserTrailSamples(
+  samples: readonly EraserTrailTimedPoint[],
+  now: number,
+): EraserTrailTimedPoint[] {
+  const head = samples[samples.length - 1];
+  if (!head) {
+    return [];
+  }
+
+  const cutoffTime = now - getEraserTrailSampleLifetime(head);
+  if (head.time < cutoffTime) {
+    return [];
+  }
+
+  const firstActiveIndex = samples.findIndex(
+    (sample) => sample.time >= cutoffTime,
+  );
+  if (firstActiveIndex === -1) {
+    return [];
+  }
+
+  const activeSamples = samples.slice(firstActiveIndex);
+  const previous = samples[firstActiveIndex - 1];
+  const first = activeSamples[0];
+  if (previous && first.time > cutoffTime) {
+    const t = clamp(
+      (cutoffTime - previous.time) / (first.time - previous.time),
+      0,
+      1,
+    );
+    return [lerpEraserTrailSample(previous, first, t), ...activeSamples];
+  }
+
+  return activeSamples;
+}
+
+function lerpEraserTrailSample(
+  a: EraserTrailTimedPoint,
+  b: EraserTrailTimedPoint,
+  t: number,
+): EraserTrailTimedPoint {
+  return {
+    ...lerpTrailPoint(a, b, t),
+    time: lerpNumber(a.time, b.time, t),
+    velocity: lerpNumber(a.velocity, b.velocity, t),
+  };
+}
+
+function getEraserTrailSampleLifetime(sample: EraserTrailTimedPoint): number {
+  return clamp(
+    ERASER_SCRIBBLE_BASE_LIFETIME +
+      sample.velocity * ERASER_SCRIBBLE_SPEED_LIFETIME,
+    ERASER_SCRIBBLE_BASE_LIFETIME,
+    ERASER_SCRIBBLE_MAX_LIFETIME,
+  );
+}
+
+function getStreamlinedTrailPoints(
+  points: readonly TrailRenderPoint[],
+  streamline: number,
+): TrailRenderPoint[] {
+  if (points.length <= 1) {
+    return [...points];
+  }
+
+  const t = 0.15 + (1 - streamline) * 0.85;
+  const result: TrailRenderPoint[] = [points[0]];
+  for (let i = 1; i < points.length; i++) {
+    result.push(lerpTrailPoint(result[result.length - 1], points[i], t));
+  }
+  return result;
+}
+
+function getEraserScribblePath(
+  points: readonly TrailRenderPoint[],
+  size: number,
+): string | null {
+  if (points.length === 0 || size <= 0) {
+    return null;
+  }
+
+  if (points.length === 1) {
+    return getCircleTrailPath(points[0], size / 2);
+  }
+
+  const samples = getEraserScribbleSamples(points, size);
+  const outline = getEraserScribbleOutline(samples);
+  return getSmoothClosedTrailPathFromPoints(outline);
+}
+
+function getEraserScribbleSamples(
+  points: readonly TrailRenderPoint[],
+  size: number,
+): EraserScribbleSample[] {
+  const runningLengths = getTrailRunningLengths(points);
+  const totalLength = runningLengths[runningLengths.length - 1] ?? 0;
+  const taperLength = Math.max(size, totalLength);
+
+  return points.map((point, index) => {
+    const runningLength = runningLengths[index] ?? 0;
+    const taper = clamp(runningLength / taperLength, 0, 1);
+    return {
+      point,
+      direction: getTrailPointDirection(points, index),
+      radius: (size / 2) * taper,
+      runningLength,
+    };
+  });
+}
+
+function getEraserScribbleOutline(
+  samples: readonly EraserScribbleSample[],
+): TrailRenderPoint[] {
+  if (samples.length === 0) {
+    return [];
+  }
+
+  if (samples.length === 1) {
+    return getCircleTrailPoints(
+      samples[0].point,
+      Math.max(samples[0].radius, 0.01),
+      ERASER_SCRIBBLE_DOT_STEPS,
+    );
+  }
+
+  const leftPoints: TrailRenderPoint[] = [];
+  const rightPoints: TrailRenderPoint[] = [];
+
+  for (const sample of samples) {
+    const normal = getTrailPointPerpendicular(sample.direction);
+    appendDistinctTrailPoint(
+      leftPoints,
+      subtractTrailPoints(sample.point, multiplyTrailPoint(normal, sample.radius)),
+    );
+    appendDistinctTrailPoint(
+      rightPoints,
+      addTrailPoints(sample.point, multiplyTrailPoint(normal, sample.radius)),
+    );
+  }
+
+  const outline: TrailRenderPoint[] = [];
+  for (const point of leftPoints) {
+    appendDistinctTrailPoint(outline, point);
+  }
+
+  const lastSample = samples[samples.length - 1];
+  const lastNormal = getTrailPointPerpendicular(lastSample.direction);
+  const endCap = getRoundEndCapTrailPoints({
+    center: lastSample.point,
+    direction: lastSample.direction,
+    normal: lastNormal,
+    radius: lastSample.radius,
+  });
+  for (const point of endCap) {
+    appendDistinctTrailPoint(outline, point);
+  }
+
+  for (let i = rightPoints.length - 1; i >= 0; i--) {
+    appendDistinctTrailPoint(outline, rightPoints[i]);
+  }
+
+  return outline;
+}
+
+function getTrailRunningLengths(
+  points: readonly TrailRenderPoint[],
+): number[] {
+  const runningLengths = [0];
+  for (let i = 1; i < points.length; i++) {
+    runningLengths.push(
+      runningLengths[i - 1] + getTrailPointDistance(points[i - 1], points[i]),
+    );
+  }
+  return runningLengths;
+}
+
+function getTrailPointDirection(
+  points: readonly TrailRenderPoint[],
+  index: number,
+): TrailRenderPoint {
+  if (points.length <= 1) {
+    return { x: 1, y: 0 };
+  }
+
+  const previous = points[index - 1] ?? points[index];
+  const next = points[index + 1] ?? points[index];
+  const direction =
+    index === 0
+      ? subtractTrailPoints(next, points[index])
+      : index === points.length - 1
+        ? subtractTrailPoints(points[index], previous)
+        : subtractTrailPoints(next, previous);
+
+  return normalizeTrailPoint(direction);
+}
+
+function getRoundEndCapTrailPoints({
+  center,
+  direction,
+  normal,
+  radius,
+}: {
+  center: TrailRenderPoint;
+  direction: TrailRenderPoint;
+  normal: TrailRenderPoint;
+  radius: number;
+}): TrailRenderPoint[] {
+  if (radius <= 0) {
+    return [];
+  }
+
+  const points: TrailRenderPoint[] = [];
+  for (let step = 1; step < ERASER_SCRIBBLE_CAP_STEPS; step++) {
+    const t = step / ERASER_SCRIBBLE_CAP_STEPS;
+    points.push(
+      addTrailPoints(
+        center,
+        addTrailPoints(
+          multiplyTrailPoint(direction, Math.sin(Math.PI * t) * radius),
+          multiplyTrailPoint(normal, -Math.cos(Math.PI * t) * radius),
+        ),
+      ),
+    );
+  }
+  return points;
+}
+
+function getCircleTrailPath(center: TrailRenderPoint, radius: number): string {
+  const points = getCircleTrailPoints(
+    center,
+    radius,
+    ERASER_SCRIBBLE_DOT_STEPS,
+  );
+  return getSmoothClosedTrailPathFromPoints(points) ?? "";
+}
+
+function getCircleTrailPoints(
+  center: TrailRenderPoint,
+  radius: number,
+  steps: number,
+): TrailRenderPoint[] {
+  const points: TrailRenderPoint[] = [];
+  for (let step = 0; step < steps; step++) {
+    const angle = (Math.PI * 2 * step) / steps;
+    points.push({
+      x: center.x + Math.cos(angle) * radius,
+      y: center.y + Math.sin(angle) * radius,
+    });
+  }
+  return points;
+}
+
+function getTrailPointDistance(a: TrailRenderPoint, b: TrailRenderPoint): number {
+  return Math.sqrt(getTrailPointDistanceSquared(a, b));
+}
+
+function getTrailPointDistanceSquared(
+  a: TrailRenderPoint,
+  b: TrailRenderPoint,
+): number {
+  const dx = a.x - b.x;
+  const dy = a.y - b.y;
+  return dx * dx + dy * dy;
+}
+
+function getTrailPointPerpendicular(point: TrailRenderPoint): TrailRenderPoint {
+  return { x: -point.y, y: point.x };
+}
+
+function normalizeTrailPoint(point: TrailRenderPoint): TrailRenderPoint {
+  const length = Math.sqrt(point.x * point.x + point.y * point.y);
+  if (length <= 0) {
+    return { x: 1, y: 0 };
+  }
+  return { x: point.x / length, y: point.y / length };
+}
+
+function addTrailPoints(
+  a: TrailRenderPoint,
+  b: TrailRenderPoint,
+): TrailRenderPoint {
+  return { x: a.x + b.x, y: a.y + b.y };
+}
+
+function subtractTrailPoints(
+  a: TrailRenderPoint,
+  b: TrailRenderPoint,
+): TrailRenderPoint {
+  return { x: a.x - b.x, y: a.y - b.y };
+}
+
+function multiplyTrailPoint(
+  point: TrailRenderPoint,
+  scale: number,
+): TrailRenderPoint {
+  return { x: point.x * scale, y: point.y * scale };
+}
+
+function lerpTrailPoint(
+  a: TrailRenderPoint,
+  b: TrailRenderPoint,
+  t: number,
+): TrailRenderPoint {
+  return {
+    x: lerpNumber(a.x, b.x, t),
+    y: lerpNumber(a.y, b.y, t),
+  };
+}
+
+function lerpNumber(a: number, b: number, t: number): number {
+  return a + (b - a) * t;
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}
+
+function appendDistinctTrailPoint(
+  points: TrailRenderPoint[],
+  point: TrailRenderPoint,
+): void {
+  const previous = points[points.length - 1];
+  if (!previous || getTrailPointDistanceSquared(previous, point) > 0.04) {
+    points.push(point);
+  } else {
+    points[points.length - 1] = point;
+  }
+}
+
+function getSmoothClosedTrailPathFromPoints(
+  points: readonly TrailRenderPoint[],
+): string | null {
+  if (points.length < 2) {
+    return null;
+  }
+
+  if (points.length === 2) {
+    return `M ${formatTrailSvgPoint(points[0])} L ${formatTrailSvgPoint(points[1])} Z`;
+  }
+
+  const commands = [
+    `M ${formatTrailSvgPoint(getTrailMidpoint(points[0], points[1]))}`,
+  ];
+  for (let i = 1; i < points.length; i++) {
+    const current = points[i];
+    const next = points[(i + 1) % points.length];
+    commands.push(
+      `Q ${formatTrailSvgPoint(current)} ${formatTrailSvgPoint(getTrailMidpoint(current, next))}`,
+    );
+  }
+  commands.push("Z");
+
+  return commands.join(" ");
+}
+
+function getTrailMidpoint(
+  a: TrailRenderPoint,
+  b: TrailRenderPoint,
+): TrailRenderPoint {
+  return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+}
+
+function formatTrailSvgPoint(point: TrailRenderPoint): string {
+  return `${formatTrailSvgNumber(point.x)},${formatTrailSvgNumber(point.y)}`;
+}
+
+function formatTrailSvgNumber(value: number): string {
+  return Number.isInteger(value) ? `${value}` : value.toFixed(3);
+}

package/_vendor/plugin-eraser/core.ts

@@ -0,0 +1,49 @@
+import {
+  SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID,
+  type LandCorePlugin,
+  type ToolbarContribution,
+} from "@land/canvas-core";
+import { EraserTool } from "./EraserTool";
+
+export function createEraserCorePlugin(): LandCorePlugin {
+  return {
+    id: "land.eraser",
+    toolbarContributions: [createEraserToolToolbarContribution()],
+    setup(editor) {
+      editor.tools.register(
+        "eraser",
+        (currentEditor) => new EraserTool(currentEditor),
+        { shortcut: "e" },
+      );
+    },
+  };
+}
+
+function createEraserToolToolbarContribution(): ToolbarContribution {
+  return {
+    id: "eraser.tool-toolbar",
+    surface: "tool",
+    placement: "chrome",
+    order: 50,
+    actionIds: [SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID],
+    getGroups() {
+      return [
+        {
+          id: "eraser.tools",
+          items: [
+            {
+              kind: "button",
+              id: "eraser.tool.eraser",
+              actionId: SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID,
+              value: "eraser",
+              label: "Eraser",
+              shortcut: "E",
+              icon: "eraser",
+              dataUi: "eraser-tool-button",
+            },
+          ],
+        },
+      ];
+    },
+  };
+}

package/_vendor/plugin-eraser/feature.ts

@@ -0,0 +1,20 @@
+import {
+  defineLandExtension,
+  type LandFeatureBundle,
+} from "@land/canvas-plugin-api";
+import { createEraserCanvasPlugin } from "./canvas";
+import { createEraserCorePlugin } from "./core";
+
+export function createEraserFeatureBundle(): LandFeatureBundle {
+  return {
+    id: "land.eraser.bundle",
+    corePlugins: [createEraserCorePlugin()],
+    canvasPlugins: [createEraserCanvasPlugin()],
+    shapeTypes: [],
+  };
+}
+
+export const Eraser = defineLandExtension({
+  name: "eraser",
+  createFeature: createEraserFeatureBundle,
+});

package/_vendor/plugin-eraser/index.ts

@@ -0,0 +1,4 @@
+export { EraserTool } from "./EraserTool";
+export { createEraserCanvasPlugin } from "./canvas";
+export { createEraserCorePlugin } from "./core";
+export { Eraser, createEraserFeatureBundle } from "./feature";