@yuzhouu/canvas-kit 0.1.2 → 0.1.4

package/_vendor/plugin-laser/canvas.tsx

@@ -1,645 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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,
-});