@twick/2d 0.11.0

package/src/lib/code/extractRange.ts

@@ -0,0 +1,126 @@
+import type {CodeRange} from './CodeRange';
+import type {CodeTag} from './CodeScope';
+import {resolveCodeTag} from './CodeScope';
+
+/**
+ * Transform the fragments to isolate the given range into its own fragment.
+ *
+ * @remarks
+ * This function will try to preserve the original fragments, resolving them
+ * only if they overlap with the range.
+ *
+ * @param range - The range to extract.
+ * @param fragments - The fragments to transform.
+ *
+ * @returns A tuple containing the transformed fragments and the index of the
+ *          isolated fragment within.
+ */
+export function extractRange(
+  range: CodeRange,
+  fragments: CodeTag[],
+): [CodeTag[], number] {
+  const [from, to] = range;
+  let [fromRow, fromColumn] = from;
+  let [toRow, toColumn] = to;
+  if (fromRow > toRow || (fromRow === toRow && fromColumn > toColumn)) {
+    [fromRow, fromColumn] = to;
+    [toRow, toColumn] = from;
+  }
+
+  let currentRow = 0;
+  let currentColumn = 0;
+  const newFragments: CodeTag[] = [];
+  let index = -1;
+  let found = false;
+  let extracted = '';
+
+  for (const fragment of fragments) {
+    if (found) {
+      newFragments.push(fragment);
+      continue;
+    }
+
+    const resolved = resolveCodeTag(fragment, false);
+    const lines = resolved.split('\n');
+    const newRows = lines.length - 1;
+    const lastColumn = lines[newRows].length;
+    const nextColumn = newRows > 0 ? lastColumn : currentColumn + lastColumn;
+
+    if (
+      fromRow > currentRow + newRows ||
+      (fromRow === currentRow + newRows && fromColumn > nextColumn)
+    ) {
+      currentRow += newRows;
+      currentColumn = nextColumn;
+      newFragments.push(fragment);
+      continue;
+    }
+
+    for (let i = 0; i < resolved.length; i++) {
+      const char = resolved.charAt(i);
+      if (fromRow === currentRow && fromColumn >= currentColumn) {
+        if (fromColumn === currentColumn) {
+          index = newFragments.length + 1;
+          newFragments.push(resolved.slice(0, i), '');
+        } else if (char === '\n') {
+          index = newFragments.length + 1;
+          newFragments.push(
+            resolved.slice(0, i) + ' '.repeat(fromColumn - currentColumn),
+            '',
+          );
+        }
+      }
+
+      if (index !== -1 && toRow === currentRow && toColumn >= currentColumn) {
+        if (toColumn === currentColumn) {
+          newFragments.push(resolved.slice(i));
+          found = true;
+          break;
+        }
+
+        if (char === '\n') {
+          if (currentColumn < toColumn) {
+            extracted += '\n';
+            if (i + 1 < resolved.length) {
+              newFragments.push(resolved.slice(i + 1));
+            }
+          } else {
+            newFragments.push(resolved.slice(i));
+          }
+          found = true;
+          break;
+        }
+      }
+
+      if (index !== -1) {
+        extracted += char;
+      }
+
+      if (char === '\n') {
+        currentRow++;
+        currentColumn = 0;
+      } else {
+        currentColumn++;
+      }
+    }
+
+    if (index === -1) {
+      newFragments.push(fragment);
+    }
+  }
+
+  if (index === -1) {
+    index = newFragments.length + 1;
+    const missingRows = fromRow - currentRow;
+    const missingColumns =
+      missingRows > 0 ? fromColumn : fromColumn - currentColumn;
+    newFragments.push(
+      '\n'.repeat(missingRows) + ' '.repeat(missingColumns),
+      '',
+    );
+  }
+
+  newFragments[index] = extracted;
+
+  return [newFragments, index];
+}

package/src/lib/code/index.ts

@@ -0,0 +1,13 @@
+export * from './CodeCursor';
+export * from './CodeDiffer';
+export * from './CodeFragment';
+export * from './CodeHighlighter';
+export * from './CodeRange';
+export * from './CodeScope';
+export * from './CodeSelection';
+export * from './CodeSignal';
+export * from './CodeTokenizer';
+export * from './DefaultHighlightStyle';
+export * from './diff';
+export * from './extractRange';
+export * from './LezerHighlighter';

package/src/lib/components/Audio.ts

@@ -0,0 +1,131 @@
+import {DependencyContext, PlaybackState} from '@twick/core';
+import {computed, nodeName} from '../decorators';
+import type {MediaProps} from './Media';
+import {Media} from './Media';
+
+@nodeName('Audio')
+export class Audio extends Media {
+  private static readonly pool: Record<string, HTMLAudioElement> = {};
+
+  public constructor(props: MediaProps) {
+    super(props);
+  }
+
+  protected mediaElement(): HTMLAudioElement {
+    return this.audio();
+  }
+
+  protected seekedMedia(): HTMLAudioElement {
+    return this.seekedAudio();
+  }
+
+  protected fastSeekedMedia(): HTMLAudioElement {
+    return this.fastSeekedAudio();
+  }
+
+  @computed()
+  protected audio(): HTMLAudioElement {
+    const src = this.src();
+    const key = `${this.key}/${src}`;
+    let audio = Audio.pool[key];
+    if (!audio) {
+      audio = document.createElement('audio');
+      audio.crossOrigin = 'anonymous';
+      audio.src = src;
+      Audio.pool[key] = audio;
+    }
+
+    const weNeedToWait = this.waitForCanPlayNecessary(audio);
+    if (!weNeedToWait) {
+      return audio;
+    }
+
+    DependencyContext.collectPromise(
+      new Promise<void>(resolve => {
+        this.waitForCanPlay(audio, resolve);
+      }),
+    );
+
+    return audio;
+  }
+
+  @computed()
+  protected seekedAudio(): HTMLAudioElement {
+    const audio = this.audio();
+
+    audio.addEventListener('ended', () => {
+      this.pause();
+    });
+
+    if (!(this.time() < audio.duration)) {
+      this.pause();
+      return audio;
+    }
+
+    const time = this.clampTime(this.time());
+    audio.playbackRate = this.playbackRate();
+
+    if (!audio.paused) {
+      audio.pause();
+    }
+
+    if (this.lastTime === time) {
+      return audio;
+    }
+
+    this.setCurrentTime(time);
+
+    return audio;
+  }
+
+  @computed()
+  protected fastSeekedAudio(): HTMLAudioElement {
+    const audio = this.audio();
+
+    if (!(this.time() < audio.duration)) {
+      this.pause();
+      return audio;
+    }
+
+    const time = this.clampTime(this.time());
+
+    audio.playbackRate = this.playbackRate();
+
+    if (this.lastTime === time) {
+      return audio;
+    }
+
+    const playing =
+      this.playing() && time < audio.duration && audio.playbackRate > 0;
+    if (playing) {
+      if (audio.paused) {
+        DependencyContext.collectPromise(audio.play());
+      }
+    } else {
+      if (!audio.paused) {
+        audio.pause();
+      }
+    }
+    if (Math.abs(audio.currentTime - time) > 0.3) {
+      this.setCurrentTime(time);
+    } else if (!playing) {
+      audio.currentTime = time;
+    }
+
+    return audio;
+  }
+
+  protected override async draw(context: CanvasRenderingContext2D) {
+    const playbackState = this.view().playbackState();
+
+    playbackState === PlaybackState.Playing ||
+    playbackState === PlaybackState.Presenting
+      ? this.fastSeekedAudio()
+      : this.seekedAudio();
+
+    context.save();
+    context.restore();
+
+    await this.drawChildren(context);
+  }
+}

package/src/lib/components/Bezier.ts

@@ -0,0 +1,105 @@
+import type {SerializedVector2, Vector2} from '@twick/core';
+import {BBox, transformVectorAsPoint} from '@twick/core';
+import type {CurveProfile} from '../curves';
+import type {PolynomialSegment} from '../curves/PolynomialSegment';
+import {computed} from '../decorators';
+import type {DesiredLength} from '../partials';
+import {arc, drawLine, drawPivot, moveTo} from '../utils';
+import {Curve} from './Curve';
+
+export interface BezierOverlayInfo {
+  curve: Path2D;
+  handleLines: Path2D;
+  controlPoints: Vector2[];
+  startPoint: Vector2;
+  endPoint: Vector2;
+}
+
+export abstract class Bezier extends Curve {
+  public override profile(): CurveProfile {
+    const segment = this.segment();
+    return {
+      segments: [segment],
+      arcLength: segment.arcLength,
+      minSin: 0,
+    };
+  }
+
+  protected abstract segment(): PolynomialSegment;
+
+  protected abstract overlayInfo(matrix: DOMMatrix): BezierOverlayInfo;
+
+  @computed()
+  protected childrenBBox(): BBox {
+    return BBox.fromPoints(...this.segment().points);
+  }
+
+  protected override desiredSize(): SerializedVector2<DesiredLength> {
+    return this.segment().getBBox().size;
+  }
+
+  protected override offsetComputedLayout(box: BBox): BBox {
+    box.position = box.position.sub(this.segment().getBBox().center);
+    return box;
+  }
+
+  public override drawOverlay(
+    context: CanvasRenderingContext2D,
+    matrix: DOMMatrix,
+  ) {
+    const size = this.computedSize();
+    const box = this.childrenBBox().transformCorners(matrix);
+    const offsetBeforeTransform = size.mul(this.offset()).scale(0.5);
+    const offset = transformVectorAsPoint(offsetBeforeTransform, matrix);
+    const overlayInfo = this.overlayInfo(matrix);
+
+    context.lineWidth = 1;
+    context.strokeStyle = 'white';
+    context.fillStyle = 'white';
+
+    // Draw the curve itself first so everything else gets drawn on top of it
+    context.stroke(overlayInfo.curve);
+
+    context.fillStyle = 'white';
+    context.globalAlpha = 0.5;
+
+    context.beginPath();
+    context.stroke(overlayInfo.handleLines);
+
+    context.globalAlpha = 1;
+    context.lineWidth = 2;
+
+    // Draw start and end points
+    for (const point of [overlayInfo.startPoint, overlayInfo.endPoint]) {
+      moveTo(context, point);
+      context.beginPath();
+      arc(context, point, 4);
+      context.closePath();
+      context.stroke();
+      context.fill();
+    }
+
+    // Draw the control points
+    context.fillStyle = 'black';
+    for (const point of overlayInfo.controlPoints) {
+      moveTo(context, point);
+      context.beginPath();
+      arc(context, point, 4);
+      context.closePath();
+      context.fill();
+      context.stroke();
+    }
+
+    // Draw the offset marker
+    context.lineWidth = 1;
+    context.beginPath();
+    drawPivot(context, offset);
+    context.stroke();
+
+    // Draw the bounding box
+    context.beginPath();
+    drawLine(context, box);
+    context.closePath();
+    context.stroke();
+  }
+}

package/src/lib/components/Circle.ts

@@ -0,0 +1,266 @@
+import type {SerializedVector2, SignalValue, SimpleSignal} from '@twick/core';
+import {BBox, DEG2RAD} from '@twick/core';
+import type {CurveProfile} from '../curves';
+import {getCircleProfile} from '../curves';
+import {computed, initial, nodeName, signal} from '../decorators';
+import type {DesiredLength} from '../partials';
+import type {CurveProps} from './Curve';
+import {Curve} from './Curve';
+
+export interface CircleProps extends CurveProps {
+  /**
+   * {@inheritDoc Circle.startAngle}
+   */
+  startAngle?: SignalValue<number>;
+  /**
+   * {@inheritDoc Circle.endAngle}
+   */
+  endAngle?: SignalValue<number>;
+  /**
+   * {@inheritDoc Circle.counterclockwise}
+   */
+  counterclockwise?: SignalValue<boolean>;
+  /**
+   * {@inheritDoc Circle.closed}
+   */
+  closed?: SignalValue<boolean>;
+}
+
+/**
+ * A node for drawing circular shapes.
+ *
+ * @remarks
+ * This node can be used to render shapes such as: circle, ellipse, arc, and
+ * sector (pie chart).
+ *
+ * @preview
+ * ```tsx editor
+ * // snippet Simple circle
+ * import {makeScene2D, Circle} from '@twick/2d';
+ *
+ * export default makeScene2D(function* (view) {
+ *   view.add(
+ *     <Circle
+ *       size={160}
+ *       fill={'lightseagreen'}
+ *     />
+ *    );
+ * });
+ *
+ * // snippet Ellipse
+ * import {makeScene2D, Circle} from '@twick/2d';
+ *
+ * export default makeScene2D(function* (view) {
+ *   view.add(
+ *     <Circle
+ *       width={160}
+ *       height={80}
+ *       fill={'lightseagreen'}
+ *     />
+ *   );
+ * });
+ *
+ * // snippet Sector (pie chart):
+ * import {makeScene2D, Circle} from '@twick/2d';
+ * import {createRef} from '@twick/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const ref = createRef<Circle>();
+ *   view.add(
+ *     <Circle
+ *       ref={ref}
+ *       size={160}
+ *       fill={'lightseagreen'}
+ *       startAngle={30}
+ *       endAngle={270}
+ *       closed={true}
+ *     />
+ *   );
+ *
+ *   yield* ref().startAngle(270, 2).to(30, 2);
+ * });
+ *
+ * // snippet Arc:
+ * import {makeScene2D, Circle} from '@twick/2d';
+ * import {createRef} from '@twick/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const ref = createRef<Circle>();
+ *   view.add(
+ *     <Circle
+ *       ref={ref}
+ *       size={160}
+ *       stroke={'lightseagreen'}
+ *       lineWidth={8}
+ *       startAngle={-90}
+ *       endAngle={90}
+ *     />
+ *   );
+ *
+ *   yield* ref().startAngle(-270, 2).to(-90, 2);
+ * });
+ *
+ * // snippet Curve properties:
+ * import {makeScene2D, Circle} from '@twick/2d';
+ * import {all, createRef, easeInCubic, easeOutCubic} from '@twick/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const ref = createRef<Circle>();
+ *   view.add(
+ *     <Circle
+ *       ref={ref}
+ *       size={160}
+ *       stroke={'lightseagreen'}
+ *       lineWidth={8}
+ *       endAngle={270}
+ *       endArrow
+ *     />,
+ *   );
+ *
+ *   yield* all(ref().start(1, 1), ref().rotation(180, 1, easeInCubic));
+ *   ref().start(0).end(0);
+ *   yield* all(ref().end(1, 1), ref().rotation(360, 1, easeOutCubic));
+ * });
+ * ```
+ */
+@nodeName('Circle')
+export class Circle extends Curve {
+  /**
+   * The starting angle in degrees for the circle sector.
+   *
+   * @remarks
+   * This property can be used together with {@link startAngle} to turn this
+   * circle into a sector (when using fill) or an arc (when using stroke).
+   *
+   * @defaultValue 0
+   */
+  @initial(0)
+  @signal()
+  public declare readonly startAngle: SimpleSignal<number, this>;
+
+  /**
+   * The ending angle in degrees for the circle sector.
+   *
+   * @remarks
+   * This property can be used together with {@link endAngle} to turn this
+   * circle into a sector (when using fill) or an arc (when using stroke).
+   *
+   * @defaultValue 360
+   */
+  @initial(360)
+  @signal()
+  public declare readonly endAngle: SimpleSignal<number, this>;
+
+  /**
+   * Whether the circle sector should be drawn counterclockwise.
+   *
+   * @remarks
+   * By default, the circle begins at {@link startAngle} and is drawn clockwise
+   * until reaching {@link endAngle}. Setting this property to true will reverse
+   * this direction.
+   */
+  @initial(false)
+  @signal()
+  public declare readonly counterclockwise: SimpleSignal<boolean, this>;
+
+  /**
+   * Whether the path of this circle should be closed.
+   *
+   * @remarks
+   * When set to true, the path of this circle will start and end at the center.
+   * This can be used to fine-tune how sectors are rendered.
+   *
+   * @example
+   * A closed circle will look like a pie chart:
+   * ```tsx
+   * <Circle
+   *   size={300}
+   *   fill={'lightseagreen'}
+   *   endAngle={230}
+   *   closed={true}
+   * />
+   * ```
+   * An open one will look like an arc:
+   * ```tsx
+   * <Circle
+   *   size={300}
+   *   stroke={'lightseagreen'}
+   *   lineWidth={8}
+   *   endAngle={230}
+   *   closed={false}
+   * />
+   * ```
+   *
+   * @defaultValue false
+   */
+  public declare readonly closed: SimpleSignal<boolean, this>;
+
+  public constructor(props: CircleProps) {
+    super(props);
+  }
+
+  @computed()
+  public profile(): CurveProfile {
+    return getCircleProfile(
+      this.size().scale(0.5),
+      this.startAngle() * DEG2RAD,
+      this.endAngle() * DEG2RAD,
+      this.closed(),
+      this.counterclockwise(),
+    );
+  }
+
+  protected override desiredSize(): SerializedVector2<DesiredLength> {
+    return {
+      x: this.width.context.getter(),
+      y: this.height.context.getter(),
+    };
+  }
+
+  protected override offsetComputedLayout(box: BBox): BBox {
+    return box;
+  }
+
+  protected override childrenBBox(): BBox {
+    return BBox.fromSizeCentered(this.computedSize());
+  }
+
+  protected override getPath(): Path2D {
+    if (this.requiresProfile()) {
+      return this.curveDrawingInfo().path;
+    }
+
+    return this.createPath();
+  }
+
+  protected override getRipplePath(): Path2D {
+    return this.createPath(this.rippleSize());
+  }
+
+  protected override getCacheBBox(): BBox {
+    return super.getCacheBBox().expand(this.rippleSize());
+  }
+
+  protected createPath(expand = 0) {
+    const path = new Path2D();
+    const start = this.startAngle() * DEG2RAD;
+    let end = this.endAngle() * DEG2RAD;
+    const size = this.size().scale(0.5).add(expand);
+    const closed = this.closed();
+
+    if (end > start + Math.PI * 2) {
+      const loops = Math.floor((end - start) / (Math.PI * 2));
+      end -= Math.PI * 2 * loops;
+    }
+
+    if (closed) {
+      path.moveTo(0, 0);
+    }
+    path.ellipse(0, 0, size.x, size.y, 0, start, end, this.counterclockwise());
+    if (closed) {
+      path.closePath();
+    }
+
+    return path;
+  }
+}