@effindomv2/runtime 0.1.0

package/src/bridge/runtime/asset-manager.ts

@@ -0,0 +1,202 @@
+import type { AssetLoadResult, CoreModule } from '../../core-types';
+import { writeBytesToHeap } from '../utils/heap';
+import { IncrementalFontManager } from './font-manager';
+
+interface BitmapLike {
+  readonly width: number;
+  readonly height: number;
+  close?(): void;
+}
+
+const svgTextDecoder = new TextDecoder();
+
+function createDecodeCanvas(width: number, height: number): HTMLCanvasElement {
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+  return canvas;
+}
+
+async function decodeBlobToBitmap(blob: Blob): Promise<ImageBitmap> {
+  if (createImageBitmap === undefined) {
+    throw new Error('createImageBitmap is unavailable for texture decoding.');
+  }
+  return await createImageBitmap(blob);
+}
+
+function extractBitmapRgba(bitmap: CanvasImageSource & BitmapLike): Uint8Array {
+  const canvas = createDecodeCanvas(bitmap.width, bitmap.height);
+  const context = canvas.getContext('2d', { willReadFrequently: true });
+  if (context === null) {
+    throw new Error('Failed to allocate a 2D canvas for texture decoding.');
+  }
+  context.clearRect(0, 0, bitmap.width, bitmap.height);
+  context.drawImage(bitmap, 0, 0);
+  const imageData = context.getImageData(0, 0, bitmap.width, bitmap.height);
+  return new Uint8Array(
+    imageData.data.buffer.slice(
+      imageData.data.byteOffset,
+      imageData.data.byteOffset + imageData.data.byteLength,
+    ),
+  );
+}
+
+function parseSvgLength(value: string | null): number | null {
+  if (value === null) {
+    return null;
+  }
+  const trimmed = value.trim();
+  if (trimmed.length === 0) {
+    return null;
+  }
+  const match = /^([+-]?(?:\d+\.?\d*|\.\d+))/.exec(trimmed);
+  const numericPrefix = match?.[1];
+  if (numericPrefix === undefined) {
+    return null;
+  }
+  const parsed = Number.parseFloat(numericPrefix);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+}
+
+function parseSvgViewBox(value: string | null): AssetLoadResult | null {
+  if (value === null) {
+    return null;
+  }
+  const parts = value
+    .trim()
+    .split(/[\s,]+/)
+    .map((entry) => Number.parseFloat(entry))
+    .filter((entry) => Number.isFinite(entry));
+  if (parts.length !== 4) {
+    return null;
+  }
+  const width = parts[2];
+  const height = parts[3];
+  if (width === undefined || height === undefined) {
+    return null;
+  }
+  if (width <= 0 || height <= 0) {
+    return null;
+  }
+  return { width, height };
+}
+
+function parseSvgIntrinsicSize(bytes: Uint8Array): AssetLoadResult {
+  const markup = svgTextDecoder.decode(bytes);
+  const documentRoot = new DOMParser().parseFromString(markup, 'image/svg+xml').documentElement;
+  const width = parseSvgLength(documentRoot.getAttribute('width'));
+  const height = parseSvgLength(documentRoot.getAttribute('height'));
+  if (width !== null && height !== null) {
+    return { width, height };
+  }
+  const viewBox = parseSvgViewBox(documentRoot.getAttribute('viewBox'));
+  if (viewBox !== null) {
+    return viewBox;
+  }
+  return { width: 1, height: 1 };
+}
+
+export class AssetManager {
+  private readonly loadedSvgs = new Map<number, string>();
+  private readonly loadedTextures = new Map<number, string>();
+
+  public constructor(
+    private readonly core: CoreModule,
+    private readonly fontManager: IncrementalFontManager,
+    private readonly onCommitFrame: () => void,
+  ) {}
+
+  public async loadSvg(svgId: number, url: string): Promise<AssetLoadResult> {
+    this.loadedSvgs.set(svgId, url);
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch SVG ${url}: ${String(response.status)}`);
+    }
+    const bytes = new Uint8Array(await response.arrayBuffer());
+    const size = parseSvgIntrinsicSize(bytes);
+    const svgBytes = writeBytesToHeap(this.core, bytes);
+    try {
+      this.core._ed_register_svg(svgId, svgBytes.ptr, svgBytes.len);
+    } finally {
+      svgBytes.dispose();
+    }
+    this.onCommitFrame();
+    return size;
+  }
+
+  public async loadTexture(textureId: number, url: string): Promise<AssetLoadResult> {
+    this.loadedTextures.set(textureId, url);
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch texture ${url}: ${String(response.status)}`);
+    }
+    const blob = await response.blob();
+    const bitmap = await decodeBlobToBitmap(blob);
+    const width = bitmap.width;
+    const height = bitmap.height;
+    try {
+      const rgba = extractBitmapRgba(bitmap);
+      const textureBytes = writeBytesToHeap(this.core, rgba);
+      try {
+        this.core._ed_register_texture_rgba(textureId, textureBytes.ptr, width, height, textureBytes.len);
+      } finally {
+        textureBytes.dispose();
+      }
+    } finally {
+      bitmap.close?.();
+    }
+    this.onCommitFrame();
+    return {
+      width,
+      height,
+    };
+  }
+
+  public releaseSvg(svgId: number): void {
+    this.loadedSvgs.delete(svgId);
+  }
+
+  public releaseTexture(textureId: number): void {
+    this.loadedTextures.delete(textureId);
+    this.core._ed_unregister_texture(textureId);
+    this.onCommitFrame();
+  }
+
+  public async replayLoadedAssets(): Promise<void> {
+    await Promise.all([
+      this.fontManager.replayLoadedFonts(),
+      ...Array.from(this.loadedSvgs.entries(), async ([svgId, url]) => {
+        const response = await fetch(url);
+        if (!response.ok) {
+          throw new Error(`Failed to refetch SVG ${url}: ${String(response.status)}`);
+        }
+        const bytes = new Uint8Array(await response.arrayBuffer());
+        const svgBytes = writeBytesToHeap(this.core, bytes);
+        try {
+          this.core._ed_register_svg(svgId, svgBytes.ptr, svgBytes.len);
+        } finally {
+          svgBytes.dispose();
+        }
+      }),
+      ...Array.from(this.loadedTextures.entries(), async ([textureId, url]) => {
+        const response = await fetch(url);
+        if (!response.ok) {
+          throw new Error(`Failed to refetch texture ${url}: ${String(response.status)}`);
+        }
+        const blob = await response.blob();
+        const bitmap = await decodeBlobToBitmap(blob);
+        try {
+          const rgba = extractBitmapRgba(bitmap);
+          const textureBytes = writeBytesToHeap(this.core, rgba);
+          try {
+            this.core._ed_register_texture_rgba(textureId, textureBytes.ptr, bitmap.width, bitmap.height, textureBytes.len);
+          } finally {
+            textureBytes.dispose();
+          }
+        } finally {
+          bitmap.close?.();
+        }
+      }),
+    ]);
+  }
+}

package/src/bridge/runtime/find-controller.ts

@@ -0,0 +1,269 @@
+import { FindOnPageProjector, type ResolvedFindSelection } from '../../find-on-page';
+import type { OpenCanvasFindMatch, OpenCanvasFindState, OpenCanvasTextDocument, UiModule } from '../../core-types';
+import { DEFAULT_OPEN_CANVAS_FIND_OPTIONS, normalizeOpenCanvasFindOptions } from '../find-session';
+import { TextDocumentController } from './text-documents';
+
+const OPEN_CANVAS_FIND_BACKGROUND_COLOR = 0xFFEB3B38;
+
+interface FindControllerOptions {
+  readonly canvas: HTMLCanvasElement;
+  readonly ui: UiModule;
+  readonly textDocuments: TextDocumentController;
+  readonly commitFrame: () => void;
+  readonly flushPendingCommit: () => Uint32Array | null;
+}
+
+export class FindController {
+  private readonly findProjector: FindOnPageProjector;
+  private activeFindMatch: OpenCanvasFindMatch | null = null;
+  private activeFindState: OpenCanvasFindState | null = null;
+  private selectionPollTimer: ReturnType<typeof setInterval> | null = null;
+  private selectionClearTimer: number | null = null;
+
+  public constructor(private readonly options: FindControllerOptions) {
+    const runtimeCanvasId = `ed-canvas-${Math.random().toString(36).slice(2, 10)}`;
+    this.findProjector = new FindOnPageProjector(options.canvas, runtimeCanvasId);
+    window.__bridgeFindMatch = null;
+    window.__bridgeFindState = null;
+
+    const handleDocumentSelectionChange = () => {
+      this.handleSelectionChange();
+    };
+    document.addEventListener('selectionchange', handleDocumentSelectionChange);
+    this.selectionPollTimer = setInterval(() => {
+      if (document.hidden) {
+        return;
+      }
+      this.handleSelectionChange();
+    }, 100);
+
+    this.destroy = (() => {
+      if (this.selectionPollTimer !== null) {
+        clearInterval(this.selectionPollTimer);
+        this.selectionPollTimer = null;
+      }
+      this.cancelPendingFindClear();
+      document.removeEventListener('selectionchange', handleDocumentSelectionChange);
+      this.storeFindState(null);
+      this.storeFindMatch(null);
+      this.findProjector.destroy();
+    }).bind(this);
+  }
+
+  public syncSize(logicalWidth: number, logicalHeight: number): void {
+    this.findProjector.syncSize(logicalWidth, logicalHeight);
+  }
+
+  public syncDocuments(): void {
+    this.findProjector.update(this.options.textDocuments.readFindDocuments());
+  }
+
+  public getFindDocuments(): readonly OpenCanvasTextDocument[] {
+    return this.options.textDocuments.readFindDocuments().map((document) => ({ ...document }));
+  }
+
+  public getFindState(): OpenCanvasFindState | null {
+    return this.activeFindState === null
+      ? null
+      : {
+          query: this.activeFindState.query,
+          options: { ...this.activeFindState.options },
+          matches: this.activeFindState.matches.map((match) => ({ ...match })),
+          activeMatchIndex: this.activeFindState.activeMatchIndex,
+        };
+  }
+
+  public activateFindMatch(match: OpenCanvasFindMatch | null, reveal = true): boolean {
+    return this.applyRetainedFindMatch(match, reveal);
+  }
+
+  public setFindState(state: OpenCanvasFindState | null, revealActive = false): boolean {
+    return this.applyRetainedFindState(state, revealActive);
+  }
+
+  public syncFindSelection(clearOnMissing = false): boolean {
+    return this.handleSelectionChange(clearOnMissing);
+  }
+
+  public clearFindMatch(): boolean {
+    this.findProjector.selectMatch(null);
+    return this.applyRetainedFindMatch(null, false);
+  }
+
+  public destroy(): void {}
+
+  private isBridgeFindDialogOpen(): boolean {
+    return document.querySelector('[data-ed-find-dialog="1"][data-ed-open="1"]') !== null;
+  }
+
+  private cancelPendingFindClear(): void {
+    if (this.selectionClearTimer !== null) {
+      clearTimeout(this.selectionClearTimer);
+      this.selectionClearTimer = null;
+    }
+  }
+
+  private schedulePendingFindClear(): void {
+    this.cancelPendingFindClear();
+    this.selectionClearTimer = window.setTimeout(() => {
+      this.selectionClearTimer = null;
+      if (this.isBridgeFindDialogOpen()) {
+        return;
+      }
+      if (this.findProjector.resolveSelection(document.getSelection()) !== null) {
+        return;
+      }
+      if (this.activeFindMatch !== null) {
+        this.applyRetainedFindState(null, false);
+      }
+    }, 150);
+  }
+
+  private storeFindMatch(match: ResolvedFindSelection | null): void {
+    this.activeFindMatch = match === null ? null : { ...match };
+    window.__bridgeFindMatch = this.activeFindMatch;
+  }
+
+  private storeFindState(state: OpenCanvasFindState | null): void {
+    this.activeFindState = state === null
+      ? null
+      : {
+          query: state.query,
+          options: { ...state.options },
+          matches: state.matches.map((match) => ({ ...match })),
+          activeMatchIndex: state.activeMatchIndex,
+        };
+    window.__bridgeFindState = this.activeFindState;
+  }
+
+  private applyRetainedFindState(
+    state: OpenCanvasFindState | null,
+    revealActive: boolean,
+  ): boolean {
+    if (state === null) {
+      this.options.ui._ui_clear_text_find_highlights();
+      this.options.ui._ui_clear_text_find_match();
+      this.options.commitFrame();
+      this.options.flushPendingCommit();
+      this.storeFindState(null);
+      this.storeFindMatch(null);
+      return true;
+    }
+
+    const normalizedOptions = normalizeOpenCanvasFindOptions(state.options);
+    if (
+      state.activeMatchIndex < -1 ||
+      state.activeMatchIndex >= state.matches.length ||
+      (state.matches.length === 0 && state.activeMatchIndex !== -1)
+    ) {
+      return false;
+    }
+
+    const normalizedMatches: Array<{ readonly handleArg: number | bigint; readonly match: ResolvedFindSelection }> = [];
+    for (const match of state.matches) {
+      const range = this.options.textDocuments.resolveTextRange(match.handle, match.start, match.end);
+      if (range === null) {
+        return false;
+      }
+      normalizedMatches.push({
+        handleArg: range.handleArg,
+        match: {
+          handle: match.handle,
+          start: range.start,
+          end: range.end,
+        },
+      });
+    }
+
+    this.options.ui._ui_clear_text_find_highlights();
+    if (normalizedOptions.highlightAll) {
+      for (let index = 0; index < normalizedMatches.length; index += 1) {
+        if (index === state.activeMatchIndex) {
+          continue;
+        }
+        const entry = normalizedMatches[index];
+        if (entry === undefined) {
+          continue;
+        }
+        if (
+          this.options.ui._ui_push_text_find_highlight(
+            entry.handleArg,
+            entry.match.start,
+            entry.match.end,
+            OPEN_CANVAS_FIND_BACKGROUND_COLOR,
+          ) === 0
+        ) {
+          this.options.ui._ui_clear_text_find_highlights();
+          return false;
+        }
+      }
+    }
+
+    const activeEntry = state.activeMatchIndex >= 0
+      ? normalizedMatches[state.activeMatchIndex] ?? null
+      : null;
+    if (activeEntry === null) {
+      this.options.ui._ui_clear_text_find_match();
+    } else {
+      if (this.options.ui._ui_set_text_find_match(activeEntry.handleArg, activeEntry.match.start, activeEntry.match.end) === 0) {
+        this.options.ui._ui_clear_text_find_highlights();
+        return false;
+      }
+      if (
+        revealActive &&
+        this.options.ui._ui_reveal_text_range(activeEntry.handleArg, activeEntry.match.start, activeEntry.match.end) === 0
+      ) {
+        this.options.ui._ui_clear_text_find_highlights();
+        return false;
+      }
+    }
+
+    this.options.commitFrame();
+    this.options.flushPendingCommit();
+    this.storeFindState({
+      query: state.query,
+      options: normalizedOptions,
+      matches: normalizedMatches.map((entry) => ({ ...entry.match })),
+      activeMatchIndex: activeEntry === null ? -1 : state.activeMatchIndex,
+    });
+    this.storeFindMatch(activeEntry?.match ?? null);
+    return true;
+  }
+
+  private applyRetainedFindMatch(
+    match: ResolvedFindSelection | null,
+    reveal: boolean,
+  ): boolean {
+    return this.applyRetainedFindState(
+      match === null
+        ? null
+        : {
+            query: '',
+            options: { ...DEFAULT_OPEN_CANVAS_FIND_OPTIONS },
+            matches: [{ ...match }],
+            activeMatchIndex: 0,
+          },
+      reveal,
+    );
+  }
+
+  private handleSelectionChange(clearOnMissing = false): boolean {
+    const match = this.findProjector.resolveSelection(document.getSelection());
+    if (match === null) {
+      if (clearOnMissing && !this.isBridgeFindDialogOpen() && this.activeFindMatch !== null) {
+        this.schedulePendingFindClear();
+      }
+      return false;
+    }
+    this.cancelPendingFindClear();
+    if (
+      this.activeFindMatch !== null &&
+      this.activeFindMatch.handle === match.handle &&
+      this.activeFindMatch.start === match.start &&
+      this.activeFindMatch.end === match.end
+    ) {
+      return true;
+    }
+    return this.applyRetainedFindMatch(match, true);
+  }
+}