@twick/2d 0.14.0 → 1.14.3

package/src/lib/code/extractRange.ts

@@ -1,126 +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];
-}
+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 +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';
+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,131 +1,168 @@
-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);
-  }
-}
+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);
+  }
+}