@twick/2d 0.14.21 → 0.15.0

package/src/lib/scenes/Scene2D.ts

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

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

package/src/lib/scenes/makeScene2D.ts

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

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

package/src/lib/tsconfig.build.json

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

package/src/lib/tsconfig.json

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

package/src/lib/tsdoc.json

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

package/src/lib/utils/CanvasUtils.ts

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