@revideo/2d 0.1.0

package/src/lib/components/Txt.ts

@@ -0,0 +1,201 @@
+import {
+  DEFAULT,
+  InterpolationFunction,
+  SignalValue,
+  SimpleSignal,
+  ThreadGenerator,
+  TimingFunction,
+  all,
+  capitalize,
+  threadable,
+} from '@revideo/core';
+import {computed, initial, nodeName, signal} from '../decorators';
+import {is} from '../utils';
+import {Node} from './Node';
+import {Shape, ShapeProps} from './Shape';
+import {TxtLeaf} from './TxtLeaf';
+import {ComponentChildren} from './types';
+
+type TxtChildren = string | Node | (string | Node)[];
+type AnyTxt = Txt | TxtLeaf;
+
+export interface TxtProps extends ShapeProps {
+  children?: TxtChildren;
+  text?: SignalValue<string>;
+}
+
+@nodeName('Txt')
+export class Txt extends Shape {
+  /**
+   * Create a bold text node.
+   *
+   * @remarks
+   * This is a shortcut for
+   * ```tsx
+   * <Txt fontWeight={700} />
+   * ```
+   *
+   * @param props - Additional text properties.
+   */
+  public static b(props: TxtProps) {
+    return new Txt({...props, fontWeight: 700});
+  }
+
+  /**
+   * Create an italic text node.
+   *
+   * @remarks
+   * This is a shortcut for
+   * ```tsx
+   * <Txt fontStyle={'italic'} />
+   * ```
+   *
+   * @param props - Additional text properties.
+   */
+  public static i(props: TxtProps) {
+    return new Txt({...props, fontStyle: 'italic'});
+  }
+
+  @initial('')
+  @signal()
+  public declare readonly text: SimpleSignal<string, this>;
+
+  protected getText(): string {
+    return this.innerText();
+  }
+
+  protected setText(value: SignalValue<string>) {
+    const children = this.children();
+    let leaf: TxtLeaf | null = null;
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      if (leaf === null && child instanceof TxtLeaf) {
+        leaf = child;
+      } else {
+        child.parent(null);
+      }
+    }
+
+    if (leaf === null) {
+      leaf = new TxtLeaf({text: value});
+      leaf.parent(this);
+    } else {
+      leaf.text(value);
+    }
+
+    this.setParsedChildren([leaf]);
+  }
+
+  protected override setChildren(value: SignalValue<ComponentChildren>) {
+    if (this.children.context.raw() === value) {
+      return;
+    }
+
+    if (typeof value === 'string') {
+      this.text(value);
+    } else {
+      super.setChildren(value);
+    }
+  }
+
+  @threadable()
+  protected *tweenText(
+    value: SignalValue<string>,
+    time: number,
+    timingFunction: TimingFunction,
+    interpolationFunction: InterpolationFunction<string>,
+  ): ThreadGenerator {
+    const children = this.children();
+    if (children.length !== 1 || !(children[0] instanceof TxtLeaf)) {
+      this.text.save();
+    }
+
+    const leaf = this.childAs<TxtLeaf>(0)!;
+    const oldText = leaf.text.context.raw();
+    const oldSize = this.size.context.raw();
+    leaf.text(value);
+    const newSize = this.size();
+    leaf.text(oldText ?? DEFAULT);
+
+    if (this.height() === 0) {
+      this.height(newSize.height);
+    }
+
+    yield* all(
+      this.size(newSize, time, timingFunction),
+      leaf.text(value, time, timingFunction, interpolationFunction),
+    );
+
+    this.children.context.setter(value);
+    this.size(oldSize);
+  }
+
+  protected getLayout(): boolean {
+    return true;
+  }
+
+  public constructor({children, text, ...props}: TxtProps) {
+    super(props);
+    this.children(text ?? children);
+  }
+
+  @computed()
+  protected innerText(): string {
+    const children = this.childrenAs<Txt | TxtLeaf>();
+    let text = '';
+    for (const child of children) {
+      text += child.text();
+    }
+
+    return text;
+  }
+
+  @computed()
+  protected parentTxt() {
+    const parent = this.parent();
+    return parent instanceof Txt ? parent : null;
+  }
+
+  protected override parseChildren(children: ComponentChildren): AnyTxt[] {
+    const result: AnyTxt[] = [];
+    const array = Array.isArray(children) ? children : [children];
+    for (const child of array) {
+      if (child instanceof Txt || child instanceof TxtLeaf) {
+        result.push(child);
+      } else if (typeof child === 'string') {
+        result.push(new TxtLeaf({text: child}));
+      }
+    }
+
+    return result;
+  }
+
+  protected override applyFlex() {
+    super.applyFlex();
+    this.element.style.display = this.findAncestor(is(Txt))
+      ? 'inline'
+      : 'block';
+  }
+
+  protected override draw(context: CanvasRenderingContext2D) {
+    this.drawChildren(context);
+  }
+}
+
+[
+  'fill',
+  'stroke',
+  'lineWidth',
+  'strokeFirst',
+  'lineCap',
+  'lineJoin',
+  'lineDash',
+  'lineDashOffset',
+].forEach(prop => {
+  (Txt.prototype as any)[`getDefault${capitalize(prop)}`] = function (
+    this: Txt,
+    initial: unknown,
+  ) {
+    return (this.parentTxt() as any)?.[prop]() ?? initial;
+  };
+});

package/src/lib/components/TxtLeaf.ts

@@ -0,0 +1,202 @@
+import {
+  BBox,
+  SignalValue,
+  SimpleSignal,
+  capitalize,
+  lazy,
+  textLerp,
+} from '@revideo/core';
+import {
+  computed,
+  initial,
+  interpolation,
+  nodeName,
+  signal,
+} from '../decorators';
+import {Shape, ShapeProps} from './Shape';
+import {Txt} from './Txt';
+import {View2D} from './View2D';
+
+export interface TxtLeafProps extends ShapeProps {
+  children?: string;
+  text?: SignalValue<string>;
+}
+
+@nodeName('TxtLeaf')
+export class TxtLeaf extends Shape {
+  @lazy(() => {
+    const formatter = document.createElement('span');
+    View2D.shadowRoot.append(formatter);
+    return formatter;
+  })
+  protected static formatter: HTMLDivElement;
+
+  @lazy(() => {
+    try {
+      return new (Intl as any).Segmenter(undefined, {
+        granularity: 'grapheme',
+      });
+    } catch (e) {
+      return null;
+    }
+  })
+  protected static readonly segmenter: any;
+
+  @initial('')
+  @interpolation(textLerp)
+  @signal()
+  public declare readonly text: SimpleSignal<string, this>;
+
+  public constructor({children, ...rest}: TxtLeafProps) {
+    super(rest);
+    if (children) {
+      this.text(children);
+    }
+  }
+
+  @computed()
+  protected parentTxt() {
+    const parent = this.parent();
+    return parent instanceof Txt ? parent : null;
+  }
+
+  protected override draw(context: CanvasRenderingContext2D) {
+    this.requestFontUpdate();
+    this.applyStyle(context);
+    this.applyText(context);
+    context.font = this.styles.font;
+    if ('letterSpacing' in context) {
+      context.letterSpacing = `${this.letterSpacing()}px`;
+    }
+
+    const parentRect = this.element.getBoundingClientRect();
+    const {width, height} = this.size();
+    const range = document.createRange();
+    let line = '';
+    const lineRect = new BBox();
+    for (const childNode of this.element.childNodes) {
+      if (!childNode.textContent) {
+        continue;
+      }
+
+      range.selectNodeContents(childNode);
+      const rangeRect = range.getBoundingClientRect();
+
+      const x = width / -2 + rangeRect.left - parentRect.left;
+      const y = height / -2 + rangeRect.top - parentRect.top;
+
+      if (lineRect.y === y) {
+        lineRect.width += rangeRect.width;
+        line += childNode.textContent;
+      } else {
+        this.drawText(context, line, lineRect);
+        lineRect.x = x;
+        lineRect.y = y;
+        lineRect.width = rangeRect.width;
+        lineRect.height = rangeRect.height;
+        line = childNode.textContent;
+      }
+    }
+
+    this.drawText(context, line, lineRect);
+  }
+
+  protected drawText(
+    context: CanvasRenderingContext2D,
+    text: string,
+    box: BBox,
+  ) {
+    const y = box.y + box.height / 2;
+    context.save();
+    context.textBaseline = 'middle';
+    text = text.replace(/\s+/g, ' ');
+
+    if (this.lineWidth() <= 0) {
+      context.fillText(text, box.x, y);
+    } else if (this.strokeFirst()) {
+      context.strokeText(text, box.x, y);
+      context.fillText(text, box.x, y);
+    } else {
+      context.fillText(text, box.x, y);
+      context.strokeText(text, box.x, y);
+    }
+
+    context.restore();
+  }
+
+  protected override getCacheBBox(): BBox {
+    const size = this.computedSize();
+    const range = document.createRange();
+    range.selectNodeContents(this.element);
+    const bbox = range.getBoundingClientRect();
+
+    const lineWidth = this.lineWidth();
+    // We take the default value of the miterLimit as 10.
+    const miterLimitCoefficient = this.lineJoin() === 'miter' ? 0.5 * 10 : 0.5;
+
+    return new BBox(-size.width / 2, -size.height / 2, bbox.width, bbox.height)
+      .expand([0, this.fontSize() * 0.5])
+      .expand(lineWidth * miterLimitCoefficient);
+  }
+
+  protected override applyFlex() {
+    super.applyFlex();
+    this.element.style.display = 'inline';
+  }
+
+  protected override updateLayout() {
+    this.applyFont();
+    this.applyFlex();
+
+    // Make sure the text is aligned correctly even if the text is smaller than
+    // the container.
+    if (this.justifyContent.isInitial()) {
+      this.element.style.justifyContent =
+        this.styles.getPropertyValue('text-align');
+    }
+
+    const wrap =
+      this.styles.whiteSpace !== 'nowrap' && this.styles.whiteSpace !== 'pre';
+
+    if (wrap) {
+      this.element.innerText = '';
+
+      if (TxtLeaf.segmenter) {
+        for (const word of TxtLeaf.segmenter.segment(this.text())) {
+          this.element.appendChild(document.createTextNode(word.segment));
+        }
+      } else {
+        for (const word of this.text().split('')) {
+          this.element.appendChild(document.createTextNode(word));
+        }
+      }
+    } else if (this.styles.whiteSpace === 'pre') {
+      this.element.innerText = '';
+      for (const line of this.text().split('\n')) {
+        this.element.appendChild(document.createTextNode(line + '\n'));
+      }
+    } else {
+      this.element.innerText = this.text();
+    }
+  }
+}
+
+[
+  'fill',
+  'stroke',
+  'lineWidth',
+  'strokeFirst',
+  'lineCap',
+  'lineJoin',
+  'lineDash',
+  'lineDashOffset',
+].forEach(prop => {
+  (TxtLeaf.prototype as any)[`get${capitalize(prop)}`] = function (
+    this: TxtLeaf,
+  ) {
+    return (
+      (this.parentTxt() as any)?.[prop]() ??
+      (this as any)[prop].context.getInitial()
+    );
+  };
+});

package/src/lib/components/Video.ts

@@ -0,0 +1,198 @@
+import {
+  BBox,
+  DependencyContext,
+  PlaybackState,
+  SerializedVector2,
+  SignalValue,
+  SimpleSignal,
+  viaProxy,
+} from '@revideo/core';
+import {computed, initial, nodeName, signal} from '../decorators';
+import {DesiredLength} from '../partials';
+import {drawImage} from '../utils';
+import {Media, MediaProps} from './Media';
+
+export interface VideoProps extends MediaProps {
+  /**
+   * {@inheritDoc Video.alpha}
+   */
+  alpha?: SignalValue<number>;
+  /**
+   * {@inheritDoc Video.smoothing}
+   */
+  smoothing?: SignalValue<boolean>;
+}
+
+@nodeName('Video')
+export class Video extends Media {
+  /**
+   * The alpha value of this video.
+   *
+   * @remarks
+   * Unlike opacity, the alpha value affects only the video itself, leaving the
+   * fill, stroke, and children intact.
+   */
+  @initial(1)
+  @signal()
+  public declare readonly alpha: SimpleSignal<number, this>;
+
+  /**
+   * Whether the video should be smoothed.
+   *
+   * @remarks
+   * When disabled, the video will be scaled using the nearest neighbor
+   * interpolation with no smoothing. The resulting video will appear pixelated.
+   *
+   * @defaultValue true
+   */
+  @initial(true)
+  @signal()
+  public declare readonly smoothing: SimpleSignal<boolean, this>;
+
+  private static readonly pool: Record<string, HTMLVideoElement> = {};
+
+  public constructor(props: VideoProps) {
+    super(props);
+  }
+
+  protected override desiredSize(): SerializedVector2<DesiredLength> {
+    const custom = super.desiredSize();
+    if (custom.x === null && custom.y === null) {
+      const image = this.video();
+      return {
+        x: image.videoWidth,
+        y: image.videoHeight,
+      };
+    }
+
+    return custom;
+  }
+
+  protected mediaElement(): HTMLVideoElement {
+    return this.video();
+  }
+
+  protected seekedMedia(): HTMLVideoElement {
+    return this.seekedVideo();
+  }
+
+  protected fastSeekedMedia(): HTMLVideoElement {
+    return this.fastSeekedVideo();
+  }
+
+  @computed()
+  private video(): HTMLVideoElement {
+    const src = viaProxy(this.src());
+    const key = `${this.key}/${src}`;
+    let video = Video.pool[key];
+    if (!video) {
+      video = document.createElement('video');
+      video.crossOrigin = 'anonymous';
+      video.src = src;
+      Video.pool[key] = video;
+    }
+
+    if (video.readyState < 2) {
+      DependencyContext.collectPromise(
+        new Promise<void>(resolve => {
+          const listener = () => {
+            resolve();
+            video.removeEventListener('canplay', listener);
+          };
+          video.addEventListener('canplay', listener);
+        }),
+      );
+    }
+
+    return video;
+  }
+
+  @computed()
+  protected seekedVideo(): HTMLVideoElement {
+    const video = this.video();
+    const time = this.clampTime(this.time());
+
+    video.playbackRate = this.playbackRate();
+
+    if (!video.paused) {
+      video.pause();
+    }
+
+    if (this.lastTime === time) {
+      return video;
+    }
+
+    this.setCurrentTime(time);
+
+    return video;
+  }
+
+  @computed()
+  protected fastSeekedVideo(): HTMLVideoElement {
+    const video = this.video();
+    const time = this.clampTime(this.time());
+
+    video.playbackRate = this.playbackRate();
+
+    if (this.lastTime === time) {
+      return video;
+    }
+
+    const playing =
+      this.playing() && time < video.duration && video.playbackRate > 0;
+    if (playing) {
+      if (video.paused) {
+        DependencyContext.collectPromise(video.play());
+      }
+    } else {
+      if (!video.paused) {
+        video.pause();
+      }
+    }
+
+    if (Math.abs(video.currentTime - time) > 0.3) {
+      this.setCurrentTime(time);
+    } else if (!playing) {
+      video.currentTime = time;
+    }
+
+    return video;
+  }
+
+  protected override draw(context: CanvasRenderingContext2D) {
+    this.drawShape(context);
+    const alpha = this.alpha();
+    if (alpha > 0) {
+      const playbackState = this.view().playbackState();
+      const video =
+        playbackState === PlaybackState.Playing ||
+        playbackState === PlaybackState.Presenting
+          ? this.fastSeekedVideo()
+          : this.seekedVideo();
+
+      const box = BBox.fromSizeCentered(this.computedSize());
+      context.save();
+      context.clip(this.getPath());
+      if (alpha < 1) {
+        context.globalAlpha *= alpha;
+      }
+      context.imageSmoothingEnabled = this.smoothing();
+      drawImage(context, video, box);
+      context.restore();
+    }
+
+    if (this.clip()) {
+      context.clip(this.getPath());
+    }
+
+    this.drawChildren(context);
+  }
+
+  protected override applyFlex() {
+    super.applyFlex();
+    const video = this.video();
+    this.element.style.aspectRatio = (
+      this.ratio() ?? video.videoWidth / video.videoHeight
+    ).toString();
+  }
+}

package/src/lib/components/View2D.ts

@@ -0,0 +1,90 @@
+import {PlaybackState, SimpleSignal, lazy} from '@revideo/core';
+import {initial, signal} from '../decorators';
+import {nodeName} from '../decorators/nodeName';
+import {useScene2D} from '../scenes/useScene2D';
+import type {Node} from './Node';
+import {Rect, RectProps} from './Rect';
+
+export interface View2DProps extends RectProps {
+  assetHash: string;
+}
+
+@nodeName('View2D')
+export class View2D extends Rect {
+  @lazy(() => {
+    const frameID = 'revideo-2d-frame';
+    let frame = document.querySelector<HTMLDivElement>(`#${frameID}`);
+    if (!frame) {
+      frame = document.createElement('div');
+      frame.id = frameID;
+      frame.style.position = 'absolute';
+      frame.style.pointerEvents = 'none';
+      frame.style.top = '0';
+      frame.style.left = '0';
+      frame.style.opacity = '0';
+      frame.style.overflow = 'hidden';
+      document.body.prepend(frame);
+    }
+    return frame.shadowRoot ?? frame.attachShadow({mode: 'open'});
+  })
+  public static shadowRoot: ShadowRoot;
+
+  @initial(PlaybackState.Paused)
+  @signal()
+  public declare readonly playbackState: SimpleSignal<PlaybackState, this>;
+
+  @initial(0)
+  @signal()
+  public declare readonly globalTime: SimpleSignal<number, this>;
+
+  @signal()
+  public declare readonly assetHash: SimpleSignal<string, this>;
+
+  public constructor(props: View2DProps) {
+    super({
+      composite: true,
+      fontFamily: 'Roboto',
+      fontSize: 48,
+      lineHeight: '120%',
+      textWrap: false,
+      fontStyle: 'normal',
+      ...props,
+    });
+    this.view2D = this;
+
+    View2D.shadowRoot.append(this.element);
+    this.applyFlex();
+  }
+
+  public override dispose() {
+    this.removeChildren();
+    super.dispose();
+  }
+
+  public override render(context: CanvasRenderingContext2D) {
+    this.computedSize();
+    this.computedPosition();
+    super.render(context);
+  }
+
+  /**
+   * Find a node by its key.
+   *
+   * @param key - The key of the node.
+   */
+  public findKey<T extends Node = Node>(key: string): T | null {
+    return (useScene2D().getNode(key) as T) ?? null;
+  }
+
+  protected override requestLayoutUpdate() {
+    this.updateLayout();
+  }
+
+  protected override requestFontUpdate() {
+    this.applyFont();
+  }
+
+  public override view(): View2D {
+    return this;
+  }
+}

package/src/lib/components/__logs__/image-without-source.md

@@ -0,0 +1,17 @@
+The image won't be visible unless you specify a source:
+
+```tsx
+import myImage from './example.png';
+// ...
+<Img src={myImage} />;
+```
+
+If you did this intentionally, and don't want to see this warning, set the `src`
+property to `null`:
+
+```tsx
+<Img src={null} />
+```
+
+[Learn more](https://motioncanvas.io/docs/media#images) about working with
+images.