@twick/2d 0.11.0

package/src/lib/scenes/Scene2D.ts

@@ -0,0 +1,242 @@
+import type {
+  AssetInfo,
+  FullSceneDescription,
+  Inspectable,
+  InspectedAttributes,
+  InspectedElement,
+  Scene,
+  ThreadGeneratorFactory,
+} from '@twick/core';
+import {
+  GeneratorScene,
+  SceneRenderEvent,
+  Vector2,
+  transformVectorAsPoint,
+  useLogger,
+} from '@twick/core';
+import type {Node} from '../components';
+import {Audio, Media, Video, View2D} from '../components';
+
+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('twick: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 async 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)
+      .fps(this.playback.fps);
+    await 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 {
+    const node = this.getNodeByPosition(x, y);
+    return node?.key;
+  }
+
+  public getNodeByPosition(x: number, y: number): Node | null {
+    return this.execute(() => this.getView().hit(new Vector2(x, y)) ?? 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(() => {
+        node.drawOverlay(context, matrix.multiply(node.localToWorld()));
+      });
+    }
+  }
+
+  public transformMousePosition(x: number, y: number): Vector2 | null {
+    return transformVectorAsPoint(
+      new Vector2(x, y),
+      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;
+    }
+  }
+
+  public override getMediaAssets(): Array<AssetInfo> {
+    const playingVideos = Array.from(this.registeredNodes.values())
+      .filter((node): node is Video => node instanceof Video)
+      .filter(video => (video as Video).isPlaying());
+
+    const playingAudios = Array.from(this.registeredNodes.values())
+      .filter((node): node is Audio => node instanceof Audio)
+      .filter(audio => (audio as Audio).isPlaying());
+
+    const returnObjects: AssetInfo[] = [];
+
+    returnObjects.push(
+      ...playingVideos.map(vid => ({
+        key: vid.key,
+        type: 'video' as const,
+        src: vid.src(),
+        decoder: vid.decoder(),
+        playbackRate:
+          typeof vid.playbackRate === 'function'
+            ? vid.playbackRate()
+            : vid.playbackRate,
+        volume: vid.getVolume(),
+        currentTime: vid.getCurrentTime(),
+        duration: vid.getDuration(),
+      })),
+    );
+
+    returnObjects.push(
+      ...playingAudios.map(audio => ({
+        key: audio.key,
+        type: 'audio' as const,
+        src: audio.src(),
+        playbackRate:
+          typeof audio.playbackRate === 'function'
+            ? audio.playbackRate()
+            : audio.playbackRate,
+        volume: audio.getVolume(),
+        currentTime: audio.getCurrentTime(),
+        duration: audio.getDuration(),
+      })),
+    );
+
+    return returnObjects;
+  }
+
+  public override stopAllMedia() {
+    const playingMedia = Array.from(this.registeredNodes.values())
+      .filter((node): node is Media => node instanceof Media)
+      .filter(video => (video as Media).isPlaying());
+
+    for (const media of playingMedia) {
+      media.dispose();
+    }
+  }
+
+  public override adjustVolume(volumeScale: number) {
+    const mediaNodes = Array.from(this.registeredNodes.values()).filter(
+      (node): node is Media => node instanceof Media,
+    );
+
+    for (const media of mediaNodes) {
+      media.setVolume(media.getVolume() * volumeScale);
+    }
+  }
+
+  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,16 @@
+import type {DescriptionOf, ThreadGeneratorFactory} from '@twick/core';
+import type {View2D} from '../components';
+import {Scene2D} from './Scene2D';
+
+export function makeScene2D(
+  name: string,
+  runner: ThreadGeneratorFactory<View2D>,
+): DescriptionOf<Scene2D> {
+  return {
+    klass: Scene2D,
+    name,
+    config: runner,
+    stack: new Error().stack,
+    plugins: ['@twick/2d/editor'],
+  };
+}

package/src/lib/scenes/useScene2D.ts

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

package/src/lib/tsconfig.build.json

@@ -0,0 +1,5 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["**/*"],
+  "exclude": ["**/*.test.*", "**/__tests__/**/*"]
+}

package/src/lib/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "types": ["node"],
+    "jsx": "react-jsx",
+    "jsxImportSource": "@twick/2d/src/lib"
+  },
+  "include": ["**/*"],
+  "exclude": []
+}

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 type {BBox, Spacing} from '@twick/core';
+import {Color, Vector2} from '@twick/core';
+import type {CanvasStyle, PossibleCanvasStyle} from '../partials';
+import {Gradient, Pattern} from '../partials';
+
+export function canvasStyleParser(style: PossibleCanvasStyle) {
+  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);
+}