feat(markdown): add MarkdownOverlay DOM overlay manager

2026-03-13 11:21:27 +05:30
parent de527954da
commit 0d40b2b973
1 changed files with 200 additions and 0 deletions
@@ -0,0 +1,200 @@
 /**
 * MarkdownOverlay — manages DOM div elements positioned over the PixiJS canvas
 * for each visible markdown card.
 *
 * Creates a container div for each markdown item, positioned via viewport.toScreen().
 * React components (MarkdownReadView / MarkdownEditView) render inside these containers.
 * Handles culling (off-screen cards removed), zoom scaling, and position sync for
 * drag/resize/remote transforms.
 */
 import type { Viewport } from 'pixi-viewport';
 import type { SceneManager, SceneItem } from './SceneManager';
 import type { MarkdownObject } from './scene-format';
 import { MarkdownSprite } from './sprites/MarkdownSprite';
 import { extractTitle, MD_MAX_CONTENT_LENGTH } from './markdownDefaults';
 interface CardEntry {
  /** The root DOM div for this card, positioned absolutely over the canvas. */
  el: HTMLDivElement;
  /** The content mount point inside el where React renders read/edit views. */
  contentMount: HTMLDivElement;
  /** Current item ID. */
  id: string;
 }
 export class MarkdownOverlay {
  private _viewport: Viewport;
  private _scene: SceneManager;
  private _container: HTMLElement;
  private _cards: Map<string, CardEntry> = new Map();
  private _editingId: string | null = null;
  /** Callback when a card's height changes (from DOM measurement). */
  onHeightChange: ((id: string, newHeight: number) => void) | null = null;
  /** Callback to enter edit mode for a card (wired by Editor.tsx). */
  onRequestEdit: ((id: string) => void) | null = null;
  /** Callback when checkbox is toggled in read mode. */
  onCheckboxToggle: ((id: string, newContent: string) => void) | null = null;
  /** Callback when visible card set changes (cards added/removed). Used by React to sync portals. */
  onChange: (() => void) | null = null;
  constructor(viewport: Viewport, scene: SceneManager, container: HTMLElement) {
    this._viewport = viewport;
    this._scene = scene;
    this._container = container;
    this._onViewportMoved = this._onViewportMoved.bind(this);
    viewport.on('moved', this._onViewportMoved);
    viewport.on('zoomed', this._onViewportMoved);
  }
  /** Get the DOM mount point for a card (used by React to portal into). */
  getMountPoint(id: string): HTMLDivElement | null {
    return this._cards.get(id)?.contentMount ?? null;
  }
  /** Set which card is in edit mode (null = none). */
  setEditing(id: string | null): void {
    this._editingId = id;
    // Update pointer-events: edit card gets auto, others get none
    for (const [cardId, entry] of this._cards) {
      entry.el.style.pointerEvents = cardId === id ? 'auto' : 'none';
    }
  }
  get editingId(): string | null {
    return this._editingId;
  }
  /** Full refresh — recreate all visible cards. Called on scene load, undo/redo. */
  refreshAll(): void {
    const items = this._scene.items;
    const visibleIds = new Set<string>();
    for (const [id, item] of items) {
      if (item.type !== 'markdown') continue;
      if (!item.data.visible) continue;
      // Culling: skip items outside viewport bounds
      if (!this._isVisible(item)) continue;
      visibleIds.add(id);
      if (!this._cards.has(id)) {
        this._createCard(item);
      }
      this._positionCard(id);
    }
    // Remove cards that are no longer visible
    for (const [id] of this._cards) {
      if (!visibleIds.has(id)) {
        this._removeCard(id);
      }
    }
  }
  /** Update a single card's position (for drag, resize, remote transform). */
  updateItem(id: string): void {
    const item = this._scene.getById(id);
    if (!item || item.type !== 'markdown') return;
    if (!this._isVisible(item)) {
      this._removeCard(id);
      return;
    }
    if (!this._cards.has(id)) {
      this._createCard(item);
    }
    this._positionCard(id);
  }
  /** Remove a card's overlay (item deleted). */
  removeItem(id: string): void {
    this._removeCard(id);
  }
  /** Measure a card's DOM height and update data.h + sprite. */
  measureHeight(id: string): void {
    const entry = this._cards.get(id);
    const item = this._scene.getById(id);
    if (!entry || !item || item.type !== 'markdown') return;
    requestAnimationFrame(() => {
      const h = entry.el.offsetHeight / this._viewport.scale.x;
      if (Math.abs(h - item.data.h) > 1) {
        item.data.h = h;
        // Redraw MarkdownSprite background
        if (item.displayObject instanceof MarkdownSprite) {
          item.displayObject.updateFromData(item.data as MarkdownObject);
        }
        this.onHeightChange?.(id, h);
      }
    });
  }
  destroy(): void {
    this._viewport.off('moved', this._onViewportMoved);
    this._viewport.off('zoomed', this._onViewportMoved);
    for (const [id] of this._cards) {
      this._removeCard(id);
    }
  }
  // -- Private --
  private _onViewportMoved(): void {
    this.refreshAll();
  }
  private _isVisible(item: SceneItem): boolean {
    // pixi-viewport exposes bounds via .left/.right/.top/.bottom
    const vp = this._viewport;
    const d = item.data;
    return !(d.x + d.w < vp.left || d.x > vp.right || d.y + d.h < vp.top || d.y > vp.bottom);
  }
  private _createCard(item: SceneItem): void {
    const el = document.createElement('div');
    el.style.position = 'absolute';
    el.style.pointerEvents = item.id === this._editingId ? 'auto' : 'none';
    el.style.transformOrigin = 'top left';
    el.style.overflow = 'hidden';
    el.dataset.markdownId = item.id;
    const contentMount = document.createElement('div');
    el.appendChild(contentMount);
    this._container.appendChild(el);
    this._cards.set(item.id, { el, contentMount, id: item.id });
    this.onChange?.();
  }
  private _positionCard(id: string): void {
    const entry = this._cards.get(id);
    const item = this._scene.getById(id);
    if (!entry || !item) return;
    const data = item.data as MarkdownObject;
    const zoom = this._viewport.scale.x;
    const screen = this._viewport.toScreen(data.x, data.y);
    entry.el.style.left = `${screen.x}px`;
    entry.el.style.top = `${screen.y}px`;
    entry.el.style.width = `${data.w}px`;
    entry.el.style.transform = `scale(${zoom})`;
  }
  private _removeCard(id: string): void {
    const entry = this._cards.get(id);
    if (!entry) return;
    entry.el.remove();
    this._cards.delete(id);
    this.onChange?.();
  }
 }