@efxlab/motion-canvas-2d 4.0.0

package/src/lib/code/extractRange.ts

@@ -0,0 +1,125 @@
+import {CodeRange} from './CodeRange';
+import {CodeTag, resolveCodeTag} from './CodeScope';
+
+/**
+ * Transform the fragments to isolate the given range into its own fragment.
+ *
+ * @remarks
+ * This function will try to preserve the original fragments, resolving them
+ * only if they overlap with the range.
+ *
+ * @param range - The range to extract.
+ * @param fragments - The fragments to transform.
+ *
+ * @returns A tuple containing the transformed fragments and the index of the
+ *          isolated fragment within.
+ */
+export function extractRange(
+  range: CodeRange,
+  fragments: CodeTag[],
+): [CodeTag[], number] {
+  const [from, to] = range;
+  let [fromRow, fromColumn] = from;
+  let [toRow, toColumn] = to;
+  if (fromRow > toRow || (fromRow === toRow && fromColumn > toColumn)) {
+    [fromRow, fromColumn] = to;
+    [toRow, toColumn] = from;
+  }
+
+  let currentRow = 0;
+  let currentColumn = 0;
+  const newFragments: CodeTag[] = [];
+  let index = -1;
+  let found = false;
+  let extracted = '';
+
+  for (const fragment of fragments) {
+    if (found) {
+      newFragments.push(fragment);
+      continue;
+    }
+
+    const resolved = resolveCodeTag(fragment, false);
+    const lines = resolved.split('\n');
+    const newRows = lines.length - 1;
+    const lastColumn = lines[newRows].length;
+    const nextColumn = newRows > 0 ? lastColumn : currentColumn + lastColumn;
+
+    if (
+      fromRow > currentRow + newRows ||
+      (fromRow === currentRow + newRows && fromColumn > nextColumn)
+    ) {
+      currentRow += newRows;
+      currentColumn = nextColumn;
+      newFragments.push(fragment);
+      continue;
+    }
+
+    for (let i = 0; i < resolved.length; i++) {
+      const char = resolved.charAt(i);
+      if (fromRow === currentRow && fromColumn >= currentColumn) {
+        if (fromColumn === currentColumn) {
+          index = newFragments.length + 1;
+          newFragments.push(resolved.slice(0, i), '');
+        } else if (char === '\n') {
+          index = newFragments.length + 1;
+          newFragments.push(
+            resolved.slice(0, i) + ' '.repeat(fromColumn - currentColumn),
+            '',
+          );
+        }
+      }
+
+      if (index !== -1 && toRow === currentRow && toColumn >= currentColumn) {
+        if (toColumn === currentColumn) {
+          newFragments.push(resolved.slice(i));
+          found = true;
+          break;
+        }
+
+        if (char === '\n') {
+          if (currentColumn < toColumn) {
+            extracted += '\n';
+            if (i + 1 < resolved.length) {
+              newFragments.push(resolved.slice(i + 1));
+            }
+          } else {
+            newFragments.push(resolved.slice(i));
+          }
+          found = true;
+          break;
+        }
+      }
+
+      if (index !== -1) {
+        extracted += char;
+      }
+
+      if (char === '\n') {
+        currentRow++;
+        currentColumn = 0;
+      } else {
+        currentColumn++;
+      }
+    }
+
+    if (index === -1) {
+      newFragments.push(fragment);
+    }
+  }
+
+  if (index === -1) {
+    index = newFragments.length + 1;
+    const missingRows = fromRow - currentRow;
+    const missingColumns =
+      missingRows > 0 ? fromColumn : fromColumn - currentColumn;
+    newFragments.push(
+      '\n'.repeat(missingRows) + ' '.repeat(missingColumns),
+      '',
+    );
+  }
+
+  newFragments[index] = extracted;
+
+  return [newFragments, index];
+}

package/src/lib/code/index.ts

@@ -0,0 +1,13 @@
+export * from './CodeCursor';
+export * from './CodeDiffer';
+export * from './CodeFragment';
+export * from './CodeHighlighter';
+export * from './CodeRange';
+export * from './CodeScope';
+export * from './CodeSelection';
+export * from './CodeSignal';
+export * from './CodeTokenizer';
+export * from './DefaultHighlightStyle';
+export * from './diff';
+export * from './extractRange';
+export * from './LezerHighlighter';

package/src/lib/components/Bezier.ts

@@ -0,0 +1,103 @@
+import {BBox, SerializedVector2, Vector2} from '@efxlab/motion-canvas-core';
+import {CurveProfile} from '../curves';
+import {PolynomialSegment} from '../curves/PolynomialSegment';
+import {computed} from '../decorators';
+import {DesiredLength} from '../partials';
+import {arc, drawLine, drawPivot, moveTo} from '../utils';
+import {Curve} from './Curve';
+
+export interface BezierOverlayInfo {
+  curve: Path2D;
+  handleLines: Path2D;
+  controlPoints: Vector2[];
+  startPoint: Vector2;
+  endPoint: Vector2;
+}
+
+export abstract class Bezier extends Curve {
+  public override profile(): CurveProfile {
+    const segment = this.segment();
+    return {
+      segments: [segment],
+      arcLength: segment.arcLength,
+      minSin: 0,
+    };
+  }
+
+  protected abstract segment(): PolynomialSegment;
+
+  protected abstract overlayInfo(matrix: DOMMatrix): BezierOverlayInfo;
+
+  @computed()
+  protected childrenBBox(): BBox {
+    return BBox.fromPoints(...this.segment().points);
+  }
+
+  protected override desiredSize(): SerializedVector2<DesiredLength> {
+    return this.segment().getBBox().size;
+  }
+
+  protected override offsetComputedLayout(box: BBox): BBox {
+    box.position = box.position.sub(this.segment().getBBox().center);
+    return box;
+  }
+
+  public override drawOverlay(
+    context: CanvasRenderingContext2D,
+    matrix: DOMMatrix,
+  ) {
+    const size = this.computedSize();
+    const box = this.childrenBBox().transformCorners(matrix);
+    const offset = size.mul(this.offset()).scale(0.5).transformAsPoint(matrix);
+    const overlayInfo = this.overlayInfo(matrix);
+
+    context.lineWidth = 1;
+    context.strokeStyle = 'white';
+    context.fillStyle = 'white';
+
+    // Draw the curve itself first so everything else gets drawn on top of it
+    context.stroke(overlayInfo.curve);
+
+    context.fillStyle = 'white';
+    context.globalAlpha = 0.5;
+
+    context.beginPath();
+    context.stroke(overlayInfo.handleLines);
+
+    context.globalAlpha = 1;
+    context.lineWidth = 2;
+
+    // Draw start and end points
+    for (const point of [overlayInfo.startPoint, overlayInfo.endPoint]) {
+      moveTo(context, point);
+      context.beginPath();
+      arc(context, point, 4);
+      context.closePath();
+      context.stroke();
+      context.fill();
+    }
+
+    // Draw the control points
+    context.fillStyle = 'black';
+    for (const point of overlayInfo.controlPoints) {
+      moveTo(context, point);
+      context.beginPath();
+      arc(context, point, 4);
+      context.closePath();
+      context.fill();
+      context.stroke();
+    }
+
+    // Draw the offset marker
+    context.lineWidth = 1;
+    context.beginPath();
+    drawPivot(context, offset);
+    context.stroke();
+
+    // Draw the bounding box
+    context.beginPath();
+    drawLine(context, box);
+    context.closePath();
+    context.stroke();
+  }
+}

package/src/lib/components/Camera.ts

@@ -0,0 +1,359 @@
+import {
+  all,
+  DEFAULT,
+  easeInOutCubic,
+  InterpolationFunction,
+  modify,
+  PossibleVector2,
+  Reference,
+  SignalValue,
+  SimpleSignal,
+  threadable,
+  ThreadGenerator,
+  TimingFunction,
+  tween,
+  unwrap,
+  Vector2,
+} from '@efxlab/motion-canvas-core';
+import {cloneable, signal} from '../decorators';
+import {Curve} from './Curve';
+import {Node, NodeProps} from './Node';
+import {Rect, RectProps} from './Rect';
+
+export interface CameraProps extends NodeProps {
+  /**
+   * {@inheritDoc Camera.scene}
+   */
+  scene?: Node;
+
+  /**
+   * {@inheritDoc Camera.zoom}
+   */
+  zoom?: SignalValue<number>;
+}
+
+/**
+ * A node representing an orthographic camera.
+ *
+ * @preview
+ * ```tsx editor
+ * import {Camera, Circle, makeScene2D, Rect} from '@efxlab/motion-canvas-2d';
+ * import {all, createRef} from '@efxlab/motion-canvas-core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const camera = createRef<Camera>();
+ *   const rect = createRef<Rect>();
+ *   const circle = createRef<Circle>();
+ *
+ *   view.add(
+ *     <>
+ *       <Camera ref={camera}>
+ *         <Rect
+ *           ref={rect}
+ *           fill={'lightseagreen'}
+ *           size={100}
+ *           position={[100, -50]}
+ *         />
+ *         <Circle
+ *           ref={circle}
+ *           fill={'hotpink'}
+ *           size={120}
+ *           position={[-100, 50]}
+ *         />
+ *       </Camera>
+ *     </>,
+ *   );
+ *
+ *   yield* all(
+ *     camera().centerOn(rect(), 3),
+ *     camera().rotation(180, 3),
+ *     camera().zoom(1.8, 3),
+ *   );
+ *   yield* camera().centerOn(circle(), 2);
+ *   yield* camera().reset(1);
+ * });
+ * ```
+ */
+export class Camera extends Node {
+  /**
+   * The scene node that the camera is rendering.
+   */
+  @signal()
+  declare public readonly scene: SimpleSignal<Node, this>;
+
+  public constructor({children, ...props}: CameraProps) {
+    super(props);
+
+    if (!this.scene()) {
+      this.scene(new Node({}));
+    }
+
+    if (children) {
+      this.scene().add(children);
+    }
+  }
+
+  /**
+   * The zoom level of the camera.
+   *
+   * @defaultValue 1
+   */
+  @cloneable(false)
+  @signal()
+  declare public readonly zoom: SimpleSignal<number, this>;
+
+  protected getZoom(): number {
+    return 1 / this.scale.x();
+  }
+
+  protected setZoom(value: SignalValue<number>) {
+    this.scale(modify(value, unwrapped => 1 / unwrapped));
+  }
+
+  protected getDefaultZoom() {
+    return this.scale.x.context.getInitial();
+  }
+
+  protected *tweenZoom(
+    value: SignalValue<number>,
+    duration: number,
+    timingFunction: TimingFunction,
+    interpolationFunction: InterpolationFunction<number>,
+  ): ThreadGenerator {
+    const from = this.scale.x();
+    yield* tween(duration, v => {
+      this.zoom(
+        1 / interpolationFunction(from, 1 / unwrap(value), timingFunction(v)),
+      );
+    });
+  }
+
+  /**
+   * Resets the camera's position, rotation and zoom level to their original
+   * values.
+   *
+   * @param duration - The duration of the tween.
+   * @param timingFunction - The timing function to use for the tween.
+   */
+  @threadable()
+  public *reset(
+    duration: number,
+    timingFunction: TimingFunction = easeInOutCubic,
+  ): ThreadGenerator {
+    yield* all(
+      this.position(DEFAULT, duration, timingFunction),
+      this.zoom(DEFAULT, duration, timingFunction),
+      this.rotation(DEFAULT, duration, timingFunction),
+    );
+  }
+
+  /**
+   * Centers the camera on the specified position without changing the zoom
+   * level.
+   *
+   * @param position - The position to center the camera on.
+   * @param duration - The duration of the tween.
+   * @param timingFunction - The timing function to use for the tween.
+   * @param interpolationFunction - The interpolation function to use for the
+   * tween.
+   */
+  public centerOn(
+    position: PossibleVector2,
+    duration: number,
+    timingFunction?: TimingFunction,
+    interpolationFunction?: InterpolationFunction<Vector2>,
+  ): ThreadGenerator;
+  /**
+   * Centers the camera on the specified node without changing the zoom level.
+   *
+   * @param node - The node to center the camera on.
+   * @param duration - The duration of the tween.
+   * @param timingFunction - The timing function to use for the tween.
+   * @param interpolationFunction - The interpolation function to use for the
+   * tween.
+   */
+  public centerOn(
+    node: Node,
+    duration: number,
+    timingFunction?: TimingFunction,
+    interpolationFunction?: InterpolationFunction<Vector2>,
+  ): ThreadGenerator;
+  @threadable()
+  public *centerOn(
+    positionOrNode: Node | PossibleVector2,
+    duration: number,
+    timing: TimingFunction = easeInOutCubic,
+    interpolationFunction: InterpolationFunction<Vector2> = Vector2.lerp,
+  ): ThreadGenerator {
+    const position =
+      positionOrNode instanceof Node
+        ? positionOrNode
+            .absolutePosition()
+            .transformAsPoint(this.scene().worldToLocal())
+        : positionOrNode;
+    yield* this.position(position, duration, timing, interpolationFunction);
+  }
+
+  /**
+   * Makes the camera follow a path specified by the provided curve.
+   *
+   * @remarks
+   * This will not change the orientation of the camera. To make the camera
+   * orient itself along the curve, use {@link followCurveWithRotation} or
+   * {@link followCurveWithRotationReverse}.
+   *
+   * If you want to follow the curve in reverse, use {@link followCurveReverse}.
+   *
+   * @param curve - The curve to follow.
+   * @param duration - The duration of the tween.
+   * @param timing - The timing function to use for the tween.
+   */
+  @threadable()
+  public *followCurve(
+    curve: Curve,
+    duration: number,
+    timing: TimingFunction = easeInOutCubic,
+  ): ThreadGenerator {
+    yield* tween(duration, value => {
+      const t = timing(value);
+      const point = curve
+        .getPointAtPercentage(t)
+        .position.transformAsPoint(curve.localToWorld());
+
+      this.position(point);
+    });
+  }
+
+  /**
+   * Makes the camera follow a path specified by the provided curve in reverse.
+   *
+   * @remarks
+   * This will not change the orientation of the camera. To make the camera
+   * orient itself along the curve, use {@link followCurveWithRotation} or
+   * {@link followCurveWithRotationReverse}.
+   *
+   * If you want to follow the curve forward, use {@link followCurve}.
+   *
+   * @param curve - The curve to follow.
+   * @param duration - The duration of the tween.
+   * @param timing - The timing function to use for the tween.
+   */
+  @threadable()
+  public *followCurveReverse(
+    curve: Curve,
+    duration: number,
+    timing: TimingFunction = easeInOutCubic,
+  ) {
+    yield* tween(duration, value => {
+      const t = 1 - timing(value);
+      const point = curve
+        .getPointAtPercentage(t)
+        .position.transformAsPoint(curve.localToWorld());
+
+      this.position(point);
+    });
+  }
+
+  /**
+   * Makes the camera follow a path specified by the provided curve while
+   * pointing the camera the direction of the tangent.
+   *
+   * @remarks
+   * To make the camera follow the curve without changing its orientation, use
+   * {@link followCurve} or {@link followCurveReverse}.
+   *
+   * If you want to follow the curve in reverse, use
+   * {@link followCurveWithRotationReverse}.
+   *
+   * @param curve - The curve to follow.
+   * @param duration - The duration of the tween.
+   * @param timing - The timing function to use for the tween.
+   */
+  @threadable()
+  public *followCurveWithRotation(
+    curve: Curve,
+    duration: number,
+    timing: TimingFunction = easeInOutCubic,
+  ) {
+    yield* tween(duration, value => {
+      const t = timing(value);
+      const {position, normal} = curve.getPointAtPercentage(t);
+      const point = position.transformAsPoint(curve.localToWorld());
+      const angle = normal.flipped.perpendicular.degrees;
+
+      this.position(point);
+      this.rotation(angle);
+    });
+  }
+
+  /**
+   * Makes the camera follow a path specified by the provided curve in reverse
+   * while pointing the camera the direction of the tangent.
+   *
+   * @remarks
+   * To make the camera follow the curve without changing its orientation, use
+   * {@link followCurve} or {@link followCurveReverse}.
+   *
+   * If you want to follow the curve forward, use
+   * {@link followCurveWithRotation}.
+   *
+   * @param curve - The curve to follow.
+   * @param duration - The duration of the tween.
+   * @param timing - The timing function to use for the tween.
+   */
+  @threadable()
+  public *followCurveWithRotationReverse(
+    curve: Curve,
+    duration: number,
+    timing: TimingFunction = easeInOutCubic,
+  ) {
+    yield* tween(duration, value => {
+      const t = 1 - timing(value);
+      const {position, normal} = curve.getPointAtPercentage(t);
+      const point = position.transformAsPoint(curve.localToWorld());
+      const angle = normal.flipped.perpendicular.degrees;
+
+      this.position(point);
+      this.rotation(angle);
+    });
+  }
+
+  protected override transformContext(context: CanvasRenderingContext2D) {
+    const matrix = this.localToParent().inverse();
+    context.transform(
+      matrix.a,
+      matrix.b,
+      matrix.c,
+      matrix.d,
+      matrix.e,
+      matrix.f,
+    );
+  }
+
+  public override hit(position: Vector2): Node | null {
+    const local = position.transformAsPoint(this.localToParent());
+    return this.scene().hit(local);
+  }
+
+  protected override drawChildren(context: CanvasRenderingContext2D) {
+    (this.scene() as Camera).drawChildren(context);
+  }
+
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  public static Stage({
+    children,
+    cameraRef,
+    scene,
+    ...props
+  }: RectProps & {cameraRef?: Reference<Camera>; scene?: Node}) {
+    const camera = new Camera({scene: scene, children});
+
+    cameraRef?.(camera);
+
+    return new Rect({
+      clip: true,
+      ...props,
+      children: [camera],
+    });
+  }
+}