@yuzhouu/canvas-kit 0.1.2

package/_vendor/plugin-laser/canvas.tsx

@@ -0,0 +1,645 @@
+import { memo, useEffect, useRef, useState } from "react";
+import { type LandCanvasPlugin } from "@land/canvas-plugin-api";
+import { type LaserTrailState } from "@land/canvas-core";
+import { PageSpace, useEditor, useValue } from "@land/canvas-react";
+
+export function createLaserCanvasPlugin(): LandCanvasPlugin {
+  return {
+    id: "land.laser.react",
+    canvasComponents: [
+      {
+        id: "land.laser.trail-overlay",
+        component: LaserTrailOverlay,
+      },
+    ],
+    setup() {
+      // Laser does not render shape records.
+    },
+  };
+}
+
+const LaserTrailOverlay = memo(function LaserTrailOverlay() {
+  const editor = useEditor();
+  const isTrailActive = useValue(editor.laserTrailActiveSignal);
+
+  if (!isTrailActive) {
+    return null;
+  }
+
+  return (
+    <PageSpace
+      dataUi="laser-trail-page-space"
+      className="pointer-events-none absolute inset-0"
+    >
+      <svg
+        width="100%"
+        height="100%"
+        style={{
+          display: "block",
+          width: "100%",
+          height: "100%",
+          overflow: "visible",
+        }}
+      >
+        <LaserTrailContent />
+      </svg>
+    </PageSpace>
+  );
+});
+
+const LaserTrailContent = memo(function LaserTrailContent() {
+  const editor = useEditor();
+  const trail = useValue(editor.laserTrailSignal);
+  const zoom = useValue(editor.cameraZoomSignal);
+  const safeZoom = Math.max(zoom, 0.0001);
+  const clockTime = useAnimationClock();
+  const sampleState = useRef<LaserTrailSampleState>({
+    sessionId: 0,
+    samples: [],
+    sourceLength: 0,
+  });
+  const renderTime = Math.max(clockTime, getNowMs());
+
+  let trailPoints: TrailRenderPoint[] = [];
+  let headTime: number | undefined;
+  if (trail) {
+    syncLaserTrailSampleState(sampleState.current, trail, safeZoom, renderTime);
+    trailPoints = getRenderableLaserTrailPoints(
+      sampleState.current.samples,
+      renderTime,
+    );
+    headTime =
+      sampleState.current.samples[sampleState.current.samples.length - 1]?.time;
+  }
+
+  const isEnding = trail?.phase === "ending";
+  const exhausted = trailPoints.length === 0;
+  const endingSessionId = isEnding && exhausted ? trail.sessionId : null;
+
+  useEffect(() => {
+    if (endingSessionId !== null) {
+      editor.clearLaserTrail(endingSessionId);
+    }
+  }, [editor, endingSessionId]);
+
+  if (!trail || exhausted) {
+    return null;
+  }
+
+  const fadeOpacity =
+    isEnding && headTime !== undefined
+      ? clamp(1 - (renderTime - headTime) / LASER_FADE_OUT_DURATION, 0, 1)
+      : 1;
+
+  const path = getLaserScribblePath(
+    trailPoints,
+    LASER_SCRIBBLE_SIZE / safeZoom,
+  );
+
+  if (!path) {
+    return null;
+  }
+
+  return (
+    <g data-ui="laser-trail-overlay" style={{ opacity: fadeOpacity }}>
+      <path
+        data-ui="laser-trail-glow"
+        d={path}
+        fill={LASER_GLOW_FILL}
+        style={{ filter: `blur(${LASER_GLOW_BLUR / safeZoom}px)` }}
+      />
+      <path data-ui="laser-trail-beam" d={path} fill={LASER_BEAM_FILL} />
+    </g>
+  );
+});
+
+interface TrailRenderPoint {
+  x: number;
+  y: number;
+}
+
+interface LaserTrailTimedPoint extends TrailRenderPoint {
+  time: number;
+  velocity: number;
+}
+
+interface LaserTrailSampleState {
+  sessionId: number;
+  samples: LaserTrailTimedPoint[];
+  sourceLength: number;
+}
+
+interface LaserScribbleSample {
+  point: TrailRenderPoint;
+  direction: TrailRenderPoint;
+  radius: number;
+  runningLength: number;
+}
+
+const LASER_BEAM_FILL = "rgb(255, 38, 38)";
+const LASER_GLOW_FILL = "rgba(255, 48, 48, 0.55)";
+const LASER_GLOW_BLUR = 4;
+const LASER_SCRIBBLE_MAX_POINTS = 64;
+const LASER_SCRIBBLE_MIN_POINT_DISTANCE = 1;
+const LASER_SCRIBBLE_SIZE = 12;
+const LASER_SCRIBBLE_STREAMLINE = 0.32;
+const LASER_SCRIBBLE_CAP_STEPS = 8;
+const LASER_SCRIBBLE_DOT_STEPS = 13;
+const LASER_SCRIBBLE_INITIAL_SAMPLE_INTERVAL = 16;
+const LASER_SCRIBBLE_MIN_SAMPLE_INTERVAL = 8;
+const LASER_SCRIBBLE_BASE_LIFETIME = 600;
+const LASER_SCRIBBLE_SPEED_LIFETIME = 300;
+const LASER_SCRIBBLE_MAX_LIFETIME = 1400;
+const LASER_FADE_OUT_DURATION = 400;
+
+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 syncLaserTrailSampleState(
+  state: LaserTrailSampleState,
+  trail: LaserTrailState,
+  zoom: number,
+  now: number,
+): void {
+  if (trail.sessionId !== state.sessionId) {
+    state.sessionId = trail.sessionId;
+    state.samples = [];
+    state.sourceLength = 0;
+  }
+
+  const points = trail.points;
+  pruneLaserTrailSamples(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 - LASER_SCRIBBLE_INITIAL_SAMPLE_INTERVAL * newPointCount;
+  for (let i = firstNewIndex; i < points.length; i++) {
+    const point = points[i];
+    const progress = (i - firstNewIndex + 1) / newPointCount;
+    appendLaserTrailSample(
+      state,
+      { x: point.x, y: point.y },
+      zoom,
+      lerpNumber(previousTime, now, progress),
+    );
+  }
+
+  state.sourceLength = points.length;
+  pruneLaserTrailSamples(state, now);
+}
+
+function appendLaserTrailSample(
+  state: LaserTrailSampleState,
+  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 = LASER_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(
+    LASER_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 pruneLaserTrailSamples(
+  state: LaserTrailSampleState,
+  now: number,
+): void {
+  state.samples = getActiveLaserTrailSamples(state.samples, now);
+}
+
+function getRenderableLaserTrailPoints(
+  samples: readonly LaserTrailTimedPoint[],
+  now: number,
+): TrailRenderPoint[] {
+  const activeSamples = getActiveLaserTrailSamples(samples, now);
+  const activePoints =
+    activeSamples.length > LASER_SCRIBBLE_MAX_POINTS
+      ? activeSamples.slice(-LASER_SCRIBBLE_MAX_POINTS)
+      : activeSamples;
+  return getStreamlinedTrailPoints(activePoints, LASER_SCRIBBLE_STREAMLINE);
+}
+
+function getActiveLaserTrailSamples(
+  samples: readonly LaserTrailTimedPoint[],
+  now: number,
+): LaserTrailTimedPoint[] {
+  const head = samples[samples.length - 1];
+  if (!head) {
+    return [];
+  }
+
+  const cutoffTime = now - getLaserTrailSampleLifetime(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 [lerpLaserTrailSample(previous, first, t), ...activeSamples];
+  }
+
+  return activeSamples;
+}
+
+function lerpLaserTrailSample(
+  a: LaserTrailTimedPoint,
+  b: LaserTrailTimedPoint,
+  t: number,
+): LaserTrailTimedPoint {
+  return {
+    ...lerpTrailPoint(a, b, t),
+    time: lerpNumber(a.time, b.time, t),
+    velocity: lerpNumber(a.velocity, b.velocity, t),
+  };
+}
+
+function getLaserTrailSampleLifetime(sample: LaserTrailTimedPoint): number {
+  return clamp(
+    LASER_SCRIBBLE_BASE_LIFETIME +
+      sample.velocity * LASER_SCRIBBLE_SPEED_LIFETIME,
+    LASER_SCRIBBLE_BASE_LIFETIME,
+    LASER_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 getLaserScribblePath(
+  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 = getLaserScribbleSamples(points, size);
+  const outline = getLaserScribbleOutline(samples);
+  return getSmoothClosedTrailPathFromPoints(outline);
+}
+
+function getLaserScribbleSamples(
+  points: readonly TrailRenderPoint[],
+  size: number,
+): LaserScribbleSample[] {
+  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 getLaserScribbleOutline(
+  samples: readonly LaserScribbleSample[],
+): TrailRenderPoint[] {
+  if (samples.length === 0) {
+    return [];
+  }
+
+  if (samples.length === 1) {
+    return getCircleTrailPoints(
+      samples[0].point,
+      Math.max(samples[0].radius, 0.01),
+      LASER_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 < LASER_SCRIBBLE_CAP_STEPS; step++) {
+    const t = step / LASER_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, LASER_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-laser/core.ts

@@ -0,0 +1,49 @@
+import {
+  SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID,
+  type LandCorePlugin,
+  type ToolbarContribution,
+} from "@land/canvas-core";
+import { LaserTool } from "./LaserTool";
+
+export function createLaserCorePlugin(): LandCorePlugin {
+  return {
+    id: "land.laser",
+    toolbarContributions: [createLaserToolToolbarContribution()],
+    setup(editor) {
+      editor.tools.register(
+        "laser",
+        (currentEditor) => new LaserTool(currentEditor),
+        { shortcut: "l" },
+      );
+    },
+  };
+}
+
+function createLaserToolToolbarContribution(): ToolbarContribution {
+  return {
+    id: "laser.tool-toolbar",
+    surface: "tool",
+    placement: "chrome",
+    order: 55,
+    actionIds: [SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID],
+    getGroups() {
+      return [
+        {
+          id: "laser.tools",
+          items: [
+            {
+              kind: "button",
+              id: "laser.tool.laser",
+              actionId: SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID,
+              value: "laser",
+              label: "Laser",
+              shortcut: "L",
+              icon: "wand",
+              dataUi: "laser-tool-button",
+            },
+          ],
+        },
+      ];
+    },
+  };
+}

package/_vendor/plugin-laser/feature.ts

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

package/_vendor/plugin-laser/index.ts

@@ -0,0 +1,4 @@
+export { LaserTool } from "./LaserTool";
+export { createLaserCanvasPlugin } from "./canvas";
+export { createLaserCorePlugin } from "./core";
+export { Laser, createLaserFeatureBundle } from "./feature";