@twick/2d 0.14.21 → 0.15.0

package/src/lib/code/extractRange.ts

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

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

@@ -1,168 +0,0 @@
-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();
-    
-    // Use a temporary key for undefined src to avoid conflicts
-    const key = `${this.key}/${src || 'pending'}`;
-    
-    let audio = Audio.pool[key];
-    if (!audio) {
-      audio = document.createElement('audio');
-      audio.crossOrigin = 'anonymous';
-      
-      // Only set src if it's valid, otherwise leave it empty
-      if (src && src !== 'undefined') {
-        audio.src = src;
-      }
-      
-      Audio.pool[key] = audio;
-    } else if (src && src !== 'undefined' && audio.src !== src) {
-      // Update existing audio element if src has changed and is now valid
-      audio.src = src;
-      
-      // Move audio to correct pool key
-      delete Audio.pool[key];
-      const newKey = `${this.key}/${src}`;
-      Audio.pool[newKey] = audio;
-    }
-
-    // If src is still undefined, wait for it to become available
-    if (!src || src === 'undefined') {
-      DependencyContext.collectPromise(
-        new Promise<void>(resolve => {
-          // Check periodically for valid src
-          const checkSrc = () => {
-            const currentSrc = this.src();
-            if (currentSrc && currentSrc !== 'undefined') {
-              resolve();
-            } else {
-              setTimeout(checkSrc, 10);
-            }
-          };
-          checkSrc();
-        }),
-      );
-    }
-
-    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) {
-    // Auto-start playback if Twick is playing but media isn't
-    this.autoPlayBasedOnTwick();
-    
-    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

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

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