@efxlab/motion-canvas-2d 4.0.0

package/src/lib/scenes/Scene2D.ts

@@ -0,0 +1,195 @@
+import {
+  FullSceneDescription,
+  GeneratorScene,
+  Inspectable,
+  InspectedAttributes,
+  InspectedElement,
+  Scene,
+  SceneRenderEvent,
+  ThreadGeneratorFactory,
+  Vector2,
+  useLogger,
+} from '@efxlab/motion-canvas-core';
+import {Camera, Node, View2D} from '../components';
+import {is} from '../utils';
+
+export class Scene2D extends GeneratorScene<View2D> implements Inspectable {
+  private view: View2D | null = null;
+  private registeredNodes = new Map<string, Node>();
+  private readonly nodeCounters = new Map<string, number>();
+  private assetHash = Date.now().toString();
+
+  public constructor(
+    description: FullSceneDescription<ThreadGeneratorFactory<View2D>>,
+  ) {
+    super(description);
+    this.recreateView();
+    if (import.meta.hot) {
+      import.meta.hot.on('motion-canvas:assets', () => {
+        this.assetHash = Date.now().toString();
+        this.getView().assetHash(this.assetHash);
+      });
+    }
+  }
+
+  public getView(): View2D {
+    return this.view!;
+  }
+
+  public override next(): Promise<void> {
+    this.getView()
+      ?.playbackState(this.playback.state)
+      .globalTime(this.playback.time);
+    return super.next();
+  }
+
+  public draw(context: CanvasRenderingContext2D) {
+    context.save();
+    this.renderLifecycle.dispatch([SceneRenderEvent.BeforeRender, context]);
+    context.save();
+    this.renderLifecycle.dispatch([SceneRenderEvent.BeginRender, context]);
+    this.getView()
+      .playbackState(this.playback.state)
+      .globalTime(this.playback.time);
+    this.getView().render(context);
+    this.renderLifecycle.dispatch([SceneRenderEvent.FinishRender, context]);
+    context.restore();
+    this.renderLifecycle.dispatch([SceneRenderEvent.AfterRender, context]);
+    context.restore();
+  }
+
+  public override reset(previousScene?: Scene): Promise<void> {
+    for (const key of this.registeredNodes.keys()) {
+      try {
+        this.registeredNodes.get(key)!.dispose();
+      } catch (e: any) {
+        this.logger.error(e);
+      }
+    }
+    this.registeredNodes.clear();
+    this.registeredNodes = new Map<string, Node>();
+    this.nodeCounters.clear();
+    this.recreateView();
+
+    return super.reset(previousScene);
+  }
+
+  public inspectPosition(x: number, y: number): InspectedElement | null {
+    return this.execute(
+      () => this.getView().hit(new Vector2(x, y))?.key ?? null,
+    );
+  }
+
+  public validateInspection(
+    element: InspectedElement | null,
+  ): InspectedElement | null {
+    return this.getNode(element)?.key ?? null;
+  }
+
+  public inspectAttributes(
+    element: InspectedElement,
+  ): InspectedAttributes | null {
+    const node = this.getNode(element);
+    if (!node) return null;
+
+    const attributes: Record<string, any> = {
+      stack: node.creationStack,
+      key: node.key,
+    };
+    for (const {key, meta, signal} of node) {
+      if (!meta.inspectable) continue;
+      attributes[key] = signal();
+    }
+
+    return attributes;
+  }
+
+  public drawOverlay(
+    element: InspectedElement,
+    matrix: DOMMatrix,
+    context: CanvasRenderingContext2D,
+  ): void {
+    const node = this.getNode(element);
+    if (node) {
+      this.execute(() => {
+        const cameras = this.getView().findAll(is(Camera));
+        const parentCameras = [];
+        for (const camera of cameras) {
+          const scene = camera.scene();
+          if (!scene) continue;
+
+          if (scene === node || scene.findFirst(n => n === node)) {
+            parentCameras.push(camera);
+          }
+        }
+
+        if (parentCameras.length > 0) {
+          for (const camera of parentCameras) {
+            const cameraParentToWorld = camera.parentToWorld();
+            const cameraLocalToParent = camera.localToParent().inverse();
+            const nodeLocalToWorld = node.localToWorld();
+
+            node.drawOverlay(
+              context,
+              matrix
+                .multiply(cameraParentToWorld)
+                .multiply(cameraLocalToParent)
+                .multiply(nodeLocalToWorld),
+            );
+          }
+        } else {
+          node.drawOverlay(context, matrix.multiply(node.localToWorld()));
+        }
+      });
+    }
+  }
+
+  public transformMousePosition(x: number, y: number): Vector2 | null {
+    return new Vector2(x, y).transformAsPoint(
+      this.getView().localToParent().inverse(),
+    );
+  }
+
+  public registerNode(node: Node, key?: string): [string, () => void] {
+    const className = node.constructor?.name ?? 'unknown';
+    const counter = (this.nodeCounters.get(className) ?? 0) + 1;
+    this.nodeCounters.set(className, counter);
+
+    if (key && this.registeredNodes.has(key)) {
+      useLogger().error({
+        message: `Duplicated node key: "${key}".`,
+        inspect: key,
+        stack: new Error().stack,
+      });
+      key = undefined;
+    }
+
+    key ??= `${this.name}/${className}[${counter}]`;
+    this.registeredNodes.set(key, node);
+    const currentNodeMap = this.registeredNodes;
+    return [key, () => currentNodeMap.delete(key!)];
+  }
+
+  public getNode(key: any): Node | null {
+    if (typeof key !== 'string') return null;
+    return this.registeredNodes.get(key) ?? null;
+  }
+
+  public *getDetachedNodes() {
+    for (const node of this.registeredNodes.values()) {
+      if (!node.parent() && node !== this.view) yield node;
+    }
+  }
+
+  protected recreateView() {
+    this.execute(() => {
+      const size = this.getSize();
+      this.view = new View2D({
+        position: size.scale(this.resolutionScale / 2),
+        scale: this.resolutionScale,
+        assetHash: this.assetHash,
+        size,
+      });
+    });
+  }
+}

package/src/lib/scenes/index.ts

@@ -0,0 +1,3 @@
+export * from './makeScene2D';
+export * from './Scene2D';
+export * from './useScene2D';

package/src/lib/scenes/makeScene2D.ts

@@ -0,0 +1,19 @@
+import {
+  createSceneMetadata,
+  DescriptionOf,
+  ThreadGeneratorFactory,
+} from '@efxlab/motion-canvas-core';
+import type {View2D} from '../components';
+import {Scene2D} from './Scene2D';
+
+export function makeScene2D(
+  runner: ThreadGeneratorFactory<View2D>,
+): DescriptionOf<Scene2D> {
+  return {
+    klass: Scene2D,
+    config: runner,
+    stack: new Error().stack,
+    meta: createSceneMetadata(),
+    plugins: ['@efxlab/motion-canvas-2d/editor'],
+  };
+}

package/src/lib/scenes/useScene2D.ts

@@ -0,0 +1,6 @@
+import {useScene} from '@efxlab/motion-canvas-core';
+import type {Scene2D} from './Scene2D';
+
+export function useScene2D(): Scene2D {
+  return <Scene2D>useScene();
+}

package/src/lib/tsconfig.build.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["**/*"],
+  "exclude": ["**/*.test.*", "**/__tests__/**/*"],
+  "compilerOptions": {
+    "jsxImportSource": "@efxlab/motion-canvas-2d/lib",
+    "paths": {
+      "@efxlab/motion-canvas-2d/lib/jsx-runtime": ["./jsx-runtime"],
+      "@efxlab/motion-canvas-2d/lib/jsx-dev-runtime": ["./jsx-dev-runtime"]
+    }
+  }
+}

package/src/lib/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "types": ["node"],
+    "jsx": "react-jsx",
+    "jsxImportSource": "@efxlab/motion-canvas-2d/src/lib",
+    "plugins": [
+      {
+        "transform": "@efxlab/motion-canvas-internal/transformers/markdown-literals.js"
+      }
+    ]
+  },
+  "include": ["**/*"]
+}

package/src/lib/tsdoc.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/tsdoc/v0/tsdoc.schema.json",
+  "extends": ["../../../../tsdoc.json"]
+}

package/src/lib/utils/CanvasUtils.ts

@@ -0,0 +1,306 @@
+import {BBox, Color, Spacing, Vector2} from '@efxlab/motion-canvas-core';
+import {CanvasStyle, Gradient, Pattern, PossibleCanvasStyle} from '../partials';
+
+export function canvasStyleParser(
+  style: PossibleCanvasStyle,
+): Gradient | Pattern | Color | null {
+  if (style === null) {
+    return null;
+  }
+  if (style instanceof Gradient) {
+    return style;
+  }
+  if (style instanceof Pattern) {
+    return style;
+  }
+
+  return new Color(style);
+}
+
+export function resolveCanvasStyle(
+  style: CanvasStyle,
+  context: CanvasRenderingContext2D,
+): string | CanvasGradient | CanvasPattern {
+  if (style === null) {
+    return '';
+  }
+  if (style instanceof Color) {
+    return (<Color>style).serialize();
+  }
+  if (style instanceof Gradient) {
+    return style.canvasGradient(context);
+  }
+  if (style instanceof Pattern) {
+    return style.canvasPattern(context) ?? '';
+  }
+
+  return '';
+}
+
+export function drawRoundRect(
+  context: CanvasRenderingContext2D | Path2D,
+  rect: BBox,
+  radius: Spacing,
+  smoothCorners: boolean,
+  cornerSharpness: number,
+) {
+  if (
+    radius.top === 0 &&
+    radius.right === 0 &&
+    radius.bottom === 0 &&
+    radius.left === 0
+  ) {
+    drawRect(context, rect);
+    return;
+  }
+
+  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,
+  );
+
+  if (smoothCorners) {
+    const sharpness = (radius: number): number => {
+      const val = radius * cornerSharpness;
+      return radius - val;
+    };
+
+    context.moveTo(rect.left + topLeft, rect.top);
+    context.lineTo(rect.right - topRight, rect.top);
+
+    context.bezierCurveTo(
+      rect.right - sharpness(topRight),
+      rect.top,
+      rect.right,
+      rect.top + sharpness(topRight),
+      rect.right,
+      rect.top + topRight,
+    );
+    context.lineTo(rect.right, rect.bottom - bottomRight);
+
+    context.bezierCurveTo(
+      rect.right,
+      rect.bottom - sharpness(bottomRight),
+      rect.right - sharpness(bottomRight),
+      rect.bottom,
+      rect.right - bottomRight,
+      rect.bottom,
+    );
+    context.lineTo(rect.left + bottomLeft, rect.bottom);
+
+    context.bezierCurveTo(
+      rect.left + sharpness(bottomLeft),
+      rect.bottom,
+      rect.left,
+      rect.bottom - sharpness(bottomLeft),
+      rect.left,
+      rect.bottom - bottomLeft,
+    );
+    context.lineTo(rect.left, rect.top + topLeft);
+
+    context.bezierCurveTo(
+      rect.left,
+      rect.top + sharpness(topLeft),
+      rect.left + sharpness(topLeft),
+      rect.top,
+      rect.left + topLeft,
+      rect.top,
+    );
+    return;
+  }
+
+  context.moveTo(rect.left + topLeft, rect.top);
+  context.arcTo(rect.right, rect.top, rect.right, rect.bottom, topRight);
+  context.arcTo(rect.right, rect.bottom, rect.left, rect.bottom, bottomRight);
+  context.arcTo(rect.left, rect.bottom, rect.left, rect.top, bottomLeft);
+  context.arcTo(rect.left, rect.top, rect.right, rect.top, topLeft);
+}
+
+export function adjustRectRadius(
+  radius: number,
+  horizontal: number,
+  vertical: number,
+  rect: BBox,
+): number {
+  const width =
+    radius + horizontal > rect.width
+      ? rect.width * (radius / (radius + horizontal))
+      : radius;
+  const height =
+    radius + vertical > rect.height
+      ? rect.height * (radius / (radius + vertical))
+      : radius;
+
+  return Math.min(width, height);
+}
+
+export function drawRect(
+  context: CanvasRenderingContext2D | Path2D,
+  rect: BBox,
+) {
+  context.rect(rect.x, rect.y, rect.width, rect.height);
+}
+
+export function fillRect(context: CanvasRenderingContext2D, rect: BBox) {
+  context.fillRect(rect.x, rect.y, rect.width, rect.height);
+}
+
+export function strokeRect(context: CanvasRenderingContext2D, rect: BBox) {
+  context.strokeRect(rect.x, rect.y, rect.width, rect.height);
+}
+
+export function drawPolygon(
+  path: CanvasRenderingContext2D | Path2D,
+  rect: BBox,
+  sides: number,
+) {
+  const size = rect.size.scale(0.5);
+  for (let i = 0; i <= sides; i++) {
+    const theta = (i * 2 * Math.PI) / sides;
+    const direction = Vector2.fromRadians(theta).perpendicular;
+    const vertex = direction.mul(size);
+    if (i === 0) {
+      moveTo(path, vertex);
+    } else {
+      lineTo(path, vertex);
+    }
+  }
+  path.closePath();
+}
+
+export function drawImage(
+  context: CanvasRenderingContext2D,
+  image: CanvasImageSource,
+  destination: BBox,
+): void;
+export function drawImage(
+  context: CanvasRenderingContext2D,
+  image: CanvasImageSource,
+  source: BBox,
+  destination: BBox,
+): void;
+export function drawImage(
+  context: CanvasRenderingContext2D,
+  image: CanvasImageSource,
+  first: BBox,
+  second?: BBox,
+): void {
+  if (second) {
+    context.drawImage(
+      image,
+      first.x,
+      first.y,
+      first.width,
+      first.height,
+      second.x,
+      second.y,
+      second.width,
+      second.height,
+    );
+  } else {
+    context.drawImage(image, first.x, first.y, first.width, first.height);
+  }
+}
+
+export function moveTo(
+  context: CanvasRenderingContext2D | Path2D,
+  position: Vector2,
+) {
+  context.moveTo(position.x, position.y);
+}
+
+export function lineTo(
+  context: CanvasRenderingContext2D | Path2D,
+  position: Vector2,
+) {
+  context.lineTo(position.x, position.y);
+}
+
+export function arcTo(
+  context: CanvasRenderingContext2D | Path2D,
+  through: Vector2,
+  position: Vector2,
+  radius: number,
+) {
+  context.arcTo(through.x, through.y, position.x, position.y, radius);
+}
+
+export function drawLine(
+  context: CanvasRenderingContext2D | Path2D,
+  points: Vector2[],
+) {
+  if (points.length < 2) return;
+  moveTo(context, points[0]);
+  for (const point of points.slice(1)) {
+    lineTo(context, point);
+  }
+}
+
+export function drawPivot(
+  context: CanvasRenderingContext2D | Path2D,
+  offset: Vector2,
+  radius = 8,
+) {
+  lineTo(context, offset.addY(-radius));
+  lineTo(context, offset.addY(radius));
+  lineTo(context, offset);
+  lineTo(context, offset.addX(-radius));
+  arc(context, offset, radius);
+}
+
+export function arc(
+  context: CanvasRenderingContext2D | Path2D,
+  center: Vector2,
+  radius: number,
+  startAngle = 0,
+  endAngle = Math.PI * 2,
+  counterclockwise = false,
+) {
+  context.arc(
+    center.x,
+    center.y,
+    radius,
+    startAngle,
+    endAngle,
+    counterclockwise,
+  );
+}
+
+export function bezierCurveTo(
+  context: CanvasRenderingContext2D | Path2D,
+  controlPoint1: Vector2,
+  controlPoint2: Vector2,
+  to: Vector2,
+) {
+  context.bezierCurveTo(
+    controlPoint1.x,
+    controlPoint1.y,
+    controlPoint2.x,
+    controlPoint2.y,
+    to.x,
+    to.y,
+  );
+}
+
+export function quadraticCurveTo(
+  context: CanvasRenderingContext2D | Path2D,
+  controlPoint: Vector2,
+  to: Vector2,
+) {
+  context.quadraticCurveTo(controlPoint.x, controlPoint.y, to.x, to.y);
+}