@efxlab/motion-canvas-2d 4.0.0

package/src/lib/curves/getCircleProfile.ts

@@ -0,0 +1,86 @@
+import {Vector2} from '@efxlab/motion-canvas-core';
+import {ArcSegment} from './ArcSegment';
+import {CurveProfile} from './CurveProfile';
+import {LineSegment} from './LineSegment';
+import {Segment} from './Segment';
+
+export function getCircleProfile(
+  size: Vector2,
+  startAngle: number,
+  endAngle: number,
+  closed: boolean,
+  counterclockwise = false,
+): CurveProfile {
+  const profile: CurveProfile = {
+    arcLength: 0,
+    minSin: 1,
+    segments: [],
+  };
+
+  if (endAngle < startAngle) {
+    const loops = Math.floor((startAngle - endAngle) / (Math.PI * 2)) + 1;
+    endAngle += Math.PI * 2 * loops;
+  } else if (endAngle > startAngle + Math.PI * 2) {
+    const loops = Math.floor((endAngle - startAngle) / (Math.PI * 2));
+    endAngle -= Math.PI * 2 * loops;
+  }
+
+  const middleAngle = (startAngle + endAngle) / 2;
+  const from = size.mul(Vector2.fromRadians(startAngle));
+  const to = size.mul(Vector2.fromRadians(endAngle));
+  const middle = size
+    .mul(Vector2.fromRadians(middleAngle))
+    .scale(counterclockwise ? -1 : 1);
+
+  if (closed) {
+    addSegment(profile, new LineSegment(Vector2.zero, from));
+  }
+
+  addArcSegment(
+    profile,
+    size,
+    from,
+    middle,
+    startAngle,
+    middleAngle,
+    counterclockwise,
+  );
+  addArcSegment(
+    profile,
+    size,
+    middle,
+    to,
+    middleAngle,
+    endAngle,
+    counterclockwise,
+  );
+
+  if (closed) {
+    addSegment(profile, new LineSegment(to, Vector2.zero));
+  }
+
+  return profile;
+}
+
+function addSegment(profile: CurveProfile, segment: Segment) {
+  profile.segments.push(segment);
+  profile.arcLength += segment.arcLength;
+}
+
+function addArcSegment(
+  profile: CurveProfile,
+  size: Vector2,
+  from: Vector2,
+  to: Vector2,
+  fromAngle: number,
+  toAngle: number,
+  counterclockwise: boolean,
+) {
+  const small = Math.abs(fromAngle - toAngle) <= 180 ? 1 : 0;
+  const flip = fromAngle > toAngle ? 0 : 1;
+  const counter = counterclockwise ? 0 : 1;
+  addSegment(
+    profile,
+    new ArcSegment(from, size, 0, 0, small ^ counter ^ flip, to),
+  );
+}

package/src/lib/curves/getPathProfile.ts

@@ -0,0 +1,177 @@
+import {Vector2, clamp} from '@efxlab/motion-canvas-core';
+import parse, {PathCommand} from 'parse-svg-path';
+import {ArcSegment} from './ArcSegment';
+import {CubicBezierSegment} from './CubicBezierSegment';
+import {CurveProfile} from './CurveProfile';
+import {LineSegment} from './LineSegment';
+import {QuadBezierSegment} from './QuadBezierSegment';
+import {Segment} from './Segment';
+
+function addSegmentToProfile(profile: CurveProfile, segment: Segment) {
+  profile.segments.push(segment);
+  profile.arcLength += segment.arcLength;
+}
+
+function getArg(command: PathCommand, argumentIndex: number) {
+  return command[argumentIndex + 1] as number;
+}
+
+function getVector2(command: PathCommand, argumentIndex: number) {
+  return new Vector2(
+    command[argumentIndex + 1] as number,
+    command[argumentIndex + 2] as number,
+  );
+}
+
+function getPoint(
+  command: PathCommand,
+  argumentIndex: number,
+  isRelative: boolean,
+  currentPoint: Vector2,
+) {
+  const point = getVector2(command, argumentIndex);
+  return isRelative ? currentPoint.add(point) : point;
+}
+
+function reflectControlPoint(control: Vector2, currentPoint: Vector2) {
+  return currentPoint.add(currentPoint.sub(control));
+}
+
+function updateMinSin(profile: CurveProfile) {
+  for (let i = 0; i < profile.segments.length; i++) {
+    const segmentA = profile.segments[i];
+    const segmentB = profile.segments[(i + 1) % profile.segments.length];
+
+    // In cubic bezier this equal p2.sub(p3)
+    const startVector = segmentA.getPoint(1).tangent.scale(-1);
+    // In cubic bezier this equal p1.sub(p0)
+    const endVector = segmentB.getPoint(0).tangent;
+    const dot = startVector.dot(endVector);
+
+    const angleBetween = Math.acos(clamp(-1, 1, dot));
+    const angleSin = Math.sin(angleBetween / 2);
+
+    profile.minSin = Math.min(profile.minSin, Math.abs(angleSin));
+  }
+}
+
+export function getPathProfile(data: string): CurveProfile {
+  const profile: CurveProfile = {
+    segments: [],
+    arcLength: 0,
+    minSin: 1,
+  };
+
+  const segments = parse(data);
+  let currentPoint = new Vector2(0, 0);
+  let firstPoint: Vector2 | null = null;
+
+  for (const segment of segments) {
+    const command = segment[0].toLowerCase();
+    const isRelative = segment[0] === command;
+
+    if (command === 'm') {
+      currentPoint = getPoint(segment, 0, isRelative, currentPoint);
+      firstPoint = currentPoint;
+    } else if (command === 'l') {
+      const nextPoint = getPoint(segment, 0, isRelative, currentPoint);
+      addSegmentToProfile(profile, new LineSegment(currentPoint, nextPoint));
+      currentPoint = nextPoint;
+    } else if (command === 'h') {
+      const x = getArg(segment, 0);
+      const nextPoint = isRelative
+        ? currentPoint.addX(x)
+        : new Vector2(x, currentPoint.y);
+      addSegmentToProfile(profile, new LineSegment(currentPoint, nextPoint));
+      currentPoint = nextPoint;
+    } else if (command === 'v') {
+      const y = getArg(segment, 0);
+      const nextPoint = isRelative
+        ? currentPoint.addY(y)
+        : new Vector2(currentPoint.x, y);
+      addSegmentToProfile(profile, new LineSegment(currentPoint, nextPoint));
+      currentPoint = nextPoint;
+    } else if (command === 'q') {
+      const controlPoint = getPoint(segment, 0, isRelative, currentPoint);
+      const nextPoint = getPoint(segment, 2, isRelative, currentPoint);
+      addSegmentToProfile(
+        profile,
+        new QuadBezierSegment(currentPoint, controlPoint, nextPoint),
+      );
+      currentPoint = nextPoint;
+    } else if (command === 't') {
+      const lastSegment = profile.segments.at(-1);
+      const controlPoint =
+        lastSegment instanceof QuadBezierSegment
+          ? reflectControlPoint(lastSegment.p1, currentPoint)
+          : currentPoint;
+
+      const nextPoint = getPoint(segment, 0, isRelative, currentPoint);
+      addSegmentToProfile(
+        profile,
+        new QuadBezierSegment(currentPoint, controlPoint, nextPoint),
+      );
+      currentPoint = nextPoint;
+    } else if (command === 'c') {
+      const startControlPoint = getPoint(segment, 0, isRelative, currentPoint);
+      const endControlPoint = getPoint(segment, 2, isRelative, currentPoint);
+      const nextPoint = getPoint(segment, 4, isRelative, currentPoint);
+      addSegmentToProfile(
+        profile,
+        new CubicBezierSegment(
+          currentPoint,
+          startControlPoint,
+          endControlPoint,
+          nextPoint,
+        ),
+      );
+      currentPoint = nextPoint;
+    } else if (command === 's') {
+      const lastSegment = profile.segments.at(-1);
+      const startControlPoint =
+        lastSegment instanceof CubicBezierSegment
+          ? reflectControlPoint(lastSegment.p2, currentPoint)
+          : currentPoint;
+
+      const endControlPoint = getPoint(segment, 0, isRelative, currentPoint);
+      const nextPoint = getPoint(segment, 2, isRelative, currentPoint);
+      addSegmentToProfile(
+        profile,
+        new CubicBezierSegment(
+          currentPoint,
+          startControlPoint,
+          endControlPoint,
+          nextPoint,
+        ),
+      );
+      currentPoint = nextPoint;
+    } else if (command === 'a') {
+      const radius = getVector2(segment, 0);
+      const angle = getArg(segment, 2);
+      const largeArcFlag = getArg(segment, 3);
+      const sweepFlag = getArg(segment, 4);
+      const nextPoint = getPoint(segment, 5, isRelative, currentPoint);
+      addSegmentToProfile(
+        profile,
+        new ArcSegment(
+          currentPoint,
+          radius,
+          angle,
+          largeArcFlag,
+          sweepFlag,
+          nextPoint,
+        ),
+      );
+      currentPoint = nextPoint;
+    } else if (command === 'z') {
+      if (!firstPoint) continue;
+      if (currentPoint.equals(firstPoint)) continue;
+
+      addSegmentToProfile(profile, new LineSegment(currentPoint, firstPoint));
+      currentPoint = firstPoint;
+    }
+  }
+  updateMinSin(profile);
+
+  return profile;
+}

package/src/lib/curves/getPointAtDistance.ts

@@ -0,0 +1,21 @@
+import {Vector2, clamp} from '@efxlab/motion-canvas-core';
+import {CurvePoint} from './CurvePoint';
+import {CurveProfile} from './CurveProfile';
+
+export function getPointAtDistance(
+  profile: CurveProfile,
+  distance: number,
+): CurvePoint {
+  const clamped = clamp(0, profile.arcLength, distance);
+  let length = 0;
+  for (const segment of profile.segments) {
+    const previousLength = length;
+    length += segment.arcLength;
+    if (length >= clamped) {
+      const relative = (clamped - previousLength) / segment.arcLength;
+      return segment.getPoint(clamp(0, 1, relative));
+    }
+  }
+
+  return {position: Vector2.zero, tangent: Vector2.up, normal: Vector2.up};
+}

package/src/lib/curves/getPolylineProfile.test.ts

@@ -0,0 +1,21 @@
+import {Vector2} from '@efxlab/motion-canvas-core';
+import {describe, expect, test} from 'vitest';
+import {getPolylineProfile} from './getPolylineProfile';
+
+describe('getPolylineProfile', () => {
+  test('Correct arc length', () => {
+    const profile = getPolylineProfile(
+      [
+        Vector2.zero,
+        Vector2.zero,
+        new Vector2(100, 0),
+        new Vector2(100, 100),
+        new Vector2(0, 100),
+      ],
+      0,
+      true,
+    );
+
+    expect(profile.arcLength).toBe(400);
+  });
+});

package/src/lib/curves/getPolylineProfile.ts

@@ -0,0 +1,88 @@
+import {Vector2, clamp} from '@efxlab/motion-canvas-core';
+import {CircleSegment} from './CircleSegment';
+import {CurveProfile} from './CurveProfile';
+import {LineSegment} from './LineSegment';
+
+export function getPolylineProfile(
+  points: readonly Vector2[],
+  radius: number,
+  closed: boolean,
+): CurveProfile {
+  const profile: CurveProfile = {
+    arcLength: 0,
+    segments: [],
+    minSin: 1,
+  };
+
+  if (points.length === 0) {
+    return profile;
+  }
+
+  if (closed) {
+    const middle = points[0].add(points[points.length - 1]).scale(0.5);
+    points = [middle, ...points, middle];
+  }
+
+  let last = points[0];
+  for (let i = 2; i < points.length; i++) {
+    const start = points[i - 2];
+    const center = points[i - 1];
+    const end = points[i];
+
+    const centerToStart = start.sub(center);
+    const centerToEnd = end.sub(center);
+    const startVector = centerToStart.normalized.safe;
+    const endVector = centerToEnd.normalized.safe;
+    const angleBetween = Math.acos(clamp(-1, 1, startVector.dot(endVector)));
+    const angleTan = Math.tan(angleBetween / 2);
+    const angleSin = Math.sin(angleBetween / 2);
+
+    const safeRadius = Math.min(
+      radius,
+      angleTan * centerToStart.magnitude * (i === 2 ? 1 : 0.5),
+      angleTan * centerToEnd.magnitude * (i === points.length - 1 ? 1 : 0.5),
+    );
+
+    const circleOffsetDistance = angleSin === 0 ? 0 : safeRadius / angleSin;
+    const pointOffsetDistance = angleTan === 0 ? 0 : safeRadius / angleTan;
+    const circleDistance = startVector
+      .add(endVector)
+      .scale(1 / 2)
+      .normalized.safe.scale(circleOffsetDistance)
+      .add(center);
+
+    const counter = startVector.perpendicular.dot(endVector) < 0;
+    const line = new LineSegment(
+      last,
+      center.add(startVector.scale(pointOffsetDistance)),
+    );
+    const circle = new CircleSegment(
+      circleDistance,
+      safeRadius,
+      startVector.perpendicular.scale(counter ? 1 : -1),
+      endVector.perpendicular.scale(counter ? -1 : 1),
+      counter,
+    );
+
+    if (line.arcLength > 0) {
+      profile.segments.push(line);
+      profile.arcLength += line.arcLength;
+    }
+    if (circle.arcLength > 0) {
+      profile.segments.push(circle);
+      profile.arcLength += circle.arcLength;
+    }
+
+    profile.minSin = Math.min(profile.minSin, Math.abs(angleSin));
+
+    last = center.add(endVector.scale(pointOffsetDistance));
+  }
+
+  const line = new LineSegment(last, points[points.length - 1]);
+  if (line.arcLength > 0) {
+    profile.segments.push(line);
+    profile.arcLength += line.arcLength;
+  }
+
+  return profile;
+}

package/src/lib/curves/getRectProfile.ts

@@ -0,0 +1,138 @@
+import {BBox, Spacing, Vector2} from '@efxlab/motion-canvas-core';
+import {adjustRectRadius} from '../utils';
+import {CircleSegment} from './CircleSegment';
+import {CubicBezierSegment} from './CubicBezierSegment';
+import {CurveProfile} from './CurveProfile';
+import {LineSegment} from './LineSegment';
+import {Segment} from './Segment';
+
+export function getRectProfile(
+  rect: BBox,
+  radius: Spacing,
+  smoothCorners: boolean,
+  cornerSharpness: number,
+): CurveProfile {
+  const profile: CurveProfile = {
+    arcLength: 0,
+    segments: [],
+    minSin: 1,
+  };
+
+  const topLeft = adjustRectRadius(radius.top, radius.right, radius.left, rect);
+  const topRight = adjustRectRadius(
+    radius.right,
+    radius.top,
+    radius.bottom,
+    rect,
+  );
+  const bottomRight = adjustRectRadius(
+    radius.bottom,
+    radius.left,
+    radius.right,
+    rect,
+  );
+  const bottomLeft = adjustRectRadius(
+    radius.left,
+    radius.bottom,
+    radius.top,
+    rect,
+  );
+
+  let from = new Vector2(rect.left + topLeft, rect.top);
+  let to = new Vector2(rect.right - topRight, rect.top);
+  addSegment(profile, new LineSegment(from, to));
+
+  from = new Vector2(rect.right, rect.top + topRight);
+  to = new Vector2(rect.right, rect.bottom - bottomRight);
+  if (topRight > 0) {
+    addCornerSegment(
+      profile,
+      from.addX(-topRight),
+      topRight,
+      Vector2.down,
+      Vector2.right,
+      smoothCorners,
+      cornerSharpness,
+    );
+  }
+  addSegment(profile, new LineSegment(from, to));
+
+  from = new Vector2(rect.right - bottomRight, rect.bottom);
+  to = new Vector2(rect.left + bottomLeft, rect.bottom);
+  if (bottomRight > 0) {
+    addCornerSegment(
+      profile,
+      from.addY(-bottomRight),
+      bottomRight,
+      Vector2.right,
+      Vector2.up,
+      smoothCorners,
+      cornerSharpness,
+    );
+  }
+  addSegment(profile, new LineSegment(from, to));
+
+  from = new Vector2(rect.left, rect.bottom - bottomLeft);
+  to = new Vector2(rect.left, rect.top + topLeft);
+  if (bottomLeft > 0) {
+    addCornerSegment(
+      profile,
+      from.addX(bottomLeft),
+      bottomLeft,
+      Vector2.up,
+      Vector2.left,
+      smoothCorners,
+      cornerSharpness,
+    );
+  }
+  addSegment(profile, new LineSegment(from, to));
+
+  from = new Vector2(rect.left + topLeft, rect.top);
+  if (topLeft > 0) {
+    addCornerSegment(
+      profile,
+      from.addY(topLeft),
+      topLeft,
+      Vector2.left,
+      Vector2.down,
+      smoothCorners,
+      cornerSharpness,
+    );
+  }
+
+  return profile;
+}
+
+function addSegment(profile: CurveProfile, segment: Segment) {
+  profile.segments.push(segment);
+  profile.arcLength += segment.arcLength;
+}
+
+function addCornerSegment(
+  profile: CurveProfile,
+  center: Vector2,
+  radius: number,
+  fromNormal: Vector2,
+  toNormal: Vector2,
+  smooth: boolean,
+  sharpness: number,
+) {
+  const from = center.add(fromNormal.scale(radius));
+  const to = center.add(toNormal.scale(radius));
+  if (smooth) {
+    addSegment(
+      profile,
+      new CubicBezierSegment(
+        from,
+        from.add(toNormal.scale(sharpness * radius)),
+        to.add(fromNormal.scale(sharpness * radius)),
+        to,
+      ),
+    );
+  } else {
+    addSegment(
+      profile,
+      new CircleSegment(center, radius, fromNormal, toNormal, false),
+    );
+  }
+}

package/src/lib/curves/index.ts

@@ -0,0 +1,16 @@
+export * from './CircleSegment';
+export * from './CubicBezierSegment';
+export * from './CurveDrawingInfo';
+export * from './CurvePoint';
+export * from './CurveProfile';
+export * from './getBezierSplineProfile';
+export * from './getCircleProfile';
+export * from './getPointAtDistance';
+export * from './getPolylineProfile';
+export * from './getRectProfile';
+export * from './KnotInfo';
+export * from './LineSegment';
+export * from './Polynomial';
+export * from './Polynomial2D';
+export * from './QuadBezierSegment';
+export * from './Segment';

package/src/lib/decorators/canvasStyleSignal.ts

@@ -0,0 +1,15 @@
+import {Color, Signal} from '@efxlab/motion-canvas-core';
+import type {CanvasStyle, PossibleCanvasStyle} from '../partials';
+import {canvasStyleParser} from '../utils';
+import {initial, interpolation, parser, signal} from './signal';
+
+export type CanvasStyleSignal<T> = Signal<PossibleCanvasStyle, CanvasStyle, T>;
+
+export function canvasStyleSignal(): PropertyDecorator {
+  return (target, key) => {
+    signal()(target, key);
+    parser(canvasStyleParser)(target, key);
+    interpolation(Color.lerp)(target, key);
+    initial(null)(target, key);
+  };
+}

package/src/lib/decorators/colorSignal.ts

@@ -0,0 +1,9 @@
+import {Color} from '@efxlab/motion-canvas-core';
+import {signal, wrapper} from './signal';
+
+export function colorSignal(): PropertyDecorator {
+  return (target, key) => {
+    signal()(target, key);
+    wrapper(Color)(target, key);
+  };
+}

package/src/lib/decorators/compound.ts

@@ -0,0 +1,85 @@
+import {
+  CompoundSignalContext,
+  SignalContext,
+  deepLerp,
+  map,
+  modify,
+  useLogger,
+} from '@efxlab/motion-canvas-core';
+import {makeSignalExtensions} from '../utils/makeSignalExtensions';
+import {addInitializer} from './initializers';
+import {getPropertyMetaOrCreate} from './signal';
+
+/**
+ * Create a compound property decorator.
+ *
+ * @remarks
+ * This decorator turns a given property into a signal consisting of one or more
+ * nested signals.
+ *
+ * @example
+ * ```ts
+ * class Example {
+ *   \@compound({x: 'scaleX', y: 'scaleY'})
+ *   public declare readonly scale: Signal<Vector2, this>;
+ *
+ *   public setScale() {
+ *     this.scale({x: 7, y: 3});
+ *     // same as:
+ *     this.scale.x(7).scale.y(3);
+ *   }
+ * }
+ * ```
+ *
+ * @param entries - A record mapping the property in the compound object to the
+ *                  corresponding property on the owner node.
+ */
+export function compound<
+  TSetterValue,
+  TValue extends TSetterValue,
+  TKeys extends keyof TValue = keyof TValue,
+  TOwner = void,
+>(
+  entries: Record<string, string>,
+  klass: typeof CompoundSignalContext<
+    TSetterValue,
+    TValue,
+    TKeys,
+    TOwner
+  > = CompoundSignalContext,
+): PropertyDecorator {
+  return (target, key) => {
+    const meta = getPropertyMetaOrCreate<any>(target, key);
+    meta.compound = true;
+    meta.compoundEntries = Object.entries(entries);
+
+    addInitializer(target, (instance: any) => {
+      if (!meta.parser) {
+        useLogger().error(`Missing parser decorator for "${key.toString()}"`);
+        return;
+      }
+
+      const initial = meta.default;
+      const parser = meta.parser.bind(instance);
+      const signalContext = new klass(
+        meta.compoundEntries.map(([key, property]) => {
+          const signal = new SignalContext(
+            modify(initial, value => parser(value)[key]),
+            <any>map,
+            instance,
+            undefined,
+            makeSignalExtensions(undefined, instance, property),
+          ).toSignal();
+          return [key as TKeys, signal];
+        }),
+        parser,
+        initial,
+        meta.interpolationFunction ?? deepLerp,
+        instance,
+        makeSignalExtensions(meta, instance, <string>key),
+      );
+
+      instance[key] = signalContext.toSignal();
+    });
+  };
+}

package/src/lib/decorators/computed.ts

@@ -0,0 +1,18 @@
+import {createComputed} from '@efxlab/motion-canvas-core';
+import {addInitializer} from './initializers';
+
+/**
+ * Create a computed method decorator.
+ *
+ * @remarks
+ * This decorator turns the given method into a computed value.
+ * See {@link createComputed} for more information.
+ */
+export function computed(): MethodDecorator {
+  return (target: any, key) => {
+    addInitializer(target, (instance: any) => {
+      const method = Object.getPrototypeOf(instance)[key];
+      instance[key] = createComputed(method.bind(instance), instance);
+    });
+  };
+}

package/src/lib/decorators/defaultStyle.ts

@@ -0,0 +1,15 @@
+import {capitalize} from '@efxlab/motion-canvas-core';
+import {Layout} from '../components';
+
+export function defaultStyle<T>(initial?: T): PropertyDecorator {
+  return (target: any, key) => {
+    target[`getDefault${capitalize(<string>key)}`] = function (this: Layout) {
+      const parent = this.parentTransform();
+      if (parent && this.layout() !== false && parent.layoutEnabled()) {
+        return (parent as any)[key]();
+      }
+
+      return initial;
+    };
+  };
+}