autumnnote 1.16.0 → 2.1.0

package/src/js/module/BaseMediaTooltip.js

@@ -0,0 +1,142 @@
+/**
+ * BaseMediaTooltip.js — Shared hover-tooltip behaviour for media embeds.
+ *
+ * ImageTooltip and VideoTooltip duplicated their button factory, show/hide
+ * timers and viewport-aware positioning (~22% of both files). Those pieces live
+ * here; each subclass keeps only what genuinely differs — which element counts
+ * as the target, which buttons the bar contains, and the actions behind them.
+ *
+ * Mirrors the existing BaseDialog / BaseResizer pattern.
+ */
+
+import { createElement, on } from '../core/dom.js';
+
+/** Delay before a hovered target shows its tooltip. */
+export const SHOW_DELAY = 100;
+/** Grace period before a tooltip hides after the pointer leaves. */
+export const HIDE_DELAY = 180;
+
+export class BaseMediaTooltip {
+  /** @param {import('../Context.js').Context} context */
+  constructor(context) {
+    this.context = context;
+    this.options = context.options;
+    /** @type {HTMLElement|null} The tooltip bar */
+    this._el = null;
+    /** @type {HTMLElement|null} Currently hovered target */
+    this._active = null;
+    this._showTimer = null;
+    this._hideTimer = null;
+    this._disposers = [];
+  }
+
+  // ---------------------------------------------------------------------------
+  // Subclass hooks
+  // ---------------------------------------------------------------------------
+
+  /**
+   * Whether `_scheduleHide` is allowed to start the hide countdown. Subclasses
+   * override to pin the tooltip open (e.g. while a video preview is playing).
+   * @returns {boolean}
+   */
+  _canHide() { return true; }
+
+  /** Runs just before the tooltip is hidden, for subclass-specific teardown. */
+  _beforeHide() {}
+
+  // ---------------------------------------------------------------------------
+  // Buttons
+  // ---------------------------------------------------------------------------
+
+  /**
+   * Builds a tooltip button and registers its click disposer.
+   * @param {string} icon - inline SVG markup
+   * @param {string} title
+   * @param {() => void} handler
+   * @param {boolean} [isDanger]
+   * @returns {HTMLElement}
+   */
+  _makeBtn(icon, title, handler, isDanger = false) {
+    const btn = createElement('button', {
+      type: 'button',
+      class: isDanger ? 'an-link-tooltip-btn an-link-tooltip-btn--danger' : 'an-link-tooltip-btn',
+      title,
+    });
+    btn.innerHTML = icon;
+    this._disposers.push(on(btn, 'click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      handler();
+    }));
+    return btn;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Show / Hide
+  // ---------------------------------------------------------------------------
+
+  _scheduleShow(target) {
+    if (this._active === target && this._el.style.display !== 'none') return;
+    clearTimeout(this._hideTimer);
+    this._hideTimer = null;
+    clearTimeout(this._showTimer);
+    this._showTimer = setTimeout(() => {
+      this._active = target;
+      this._show(target);
+    }, SHOW_DELAY);
+  }
+
+  _scheduleHide() {
+    if (!this._canHide()) return;
+    clearTimeout(this._showTimer);
+    this._showTimer = null;
+    // Always reset the hide timer so rapid mouseout→mouseover sequences
+    // don't leave a stale timer that hides the tooltip prematurely.
+    clearTimeout(this._hideTimer);
+    this._hideTimer = setTimeout(() => this._hide(), HIDE_DELAY);
+  }
+
+  _show(_target) {
+    this._el.style.display = 'flex';
+    // Defer positioning: offsetWidth on a newly-visible element forces layout
+    requestAnimationFrame(() => {
+      if (this._active) this._positionNear(this._active);
+    });
+  }
+
+  _hide() {
+    this._beforeHide();
+    this._el.style.display = 'none';
+    this._active = null;
+    this._clearTimers();
+  }
+
+  _clearTimers() {
+    clearTimeout(this._showTimer);
+    clearTimeout(this._hideTimer);
+    this._showTimer = null;
+    this._hideTimer = null;
+  }
+
+  /**
+   * Places the tooltip under the target, flipping above and clamping
+   * horizontally when it would leave the viewport.
+   * @param {HTMLElement} target
+   */
+  _positionNear(target) {
+    const rect   = target.getBoundingClientRect();
+    const tipW   = this._el.offsetWidth  || 220;
+    const tipH   = this._el.offsetHeight || 32;
+    const margin = 6;
+
+    let top  = rect.bottom + margin;
+    let left = rect.left + (rect.width - tipW) / 2;
+
+    if (top + tipH > globalThis.innerHeight - margin) top = rect.top - tipH - margin;
+    if (left + tipW > globalThis.innerWidth  - margin) left = globalThis.innerWidth - tipW - margin;
+    if (left < margin) left = margin;
+
+    this._el.style.top  = `${top}px`;
+    this._el.style.left = `${left}px`;
+  }
+}

package/src/js/module/BaseResizer.js

@@ -0,0 +1,322 @@
+/**
+ * BaseResizer.js — Shared drag-to-resize overlay for selectable embeds.
+ *
+ * ImageResizer and VideoResizer were ~28% duplicate: identical overlay
+ * construction, selection tracking, scroll/resize repositioning and drag maths,
+ * differing only in what counts as a target and how the new size is applied.
+ * Subclasses now supply just those differences via the hooks below.
+ *
+ * Mirrors the existing BaseDialog pattern used by the dialog modules.
+ */
+
+import { on } from '../core/dom.js';
+
+/**
+ * Eight handle positions. 'pos' is used as CSS class suffix and to determine
+ * which axis/direction is being dragged.
+ *
+ * Pos length 2 → corner handle → maintain aspect ratio.
+ * Pos length 1 → edge handle  → single-axis resize.
+ */
+const HANDLE_DEFS = [
+  { pos: 'nw', cursor: 'nw-resize' },
+  { pos: 'n',  cursor: 'n-resize'  },
+  { pos: 'ne', cursor: 'ne-resize' },
+  { pos: 'e',  cursor: 'e-resize'  },
+  { pos: 'se', cursor: 'se-resize' },
+  { pos: 's',  cursor: 's-resize'  },
+  { pos: 'sw', cursor: 'sw-resize' },
+  { pos: 'w',  cursor: 'w-resize'  },
+];
+
+export class BaseResizer {
+  /** @param {import('../Context.js').Context} context */
+  constructor(context) {
+    this.context = context;
+    /** @type {HTMLElement|null} Currently selected element */
+    this._active = null;
+    /** @type {HTMLElement|null} */
+    this._overlay = null;
+    this._disposers = [];
+    this._positionRaf = null;
+    /** @type {{l:number,t:number,w:number,h:number}|null} Last written overlay box */
+    this._lastOverlayPos = null;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Subclass hooks
+  // ---------------------------------------------------------------------------
+
+  /** CSS class for the overlay element. @returns {string} */
+  get _overlayClass() { return 'an-resizer'; }
+
+  /** CSS class applied to the selected element. @returns {string} */
+  get _selectedClass() { return 'an-selected'; }
+
+  /**
+   * Resolves an event target to a resizable element.
+   * @param {EventTarget|null} _el
+   * @returns {HTMLElement|null}
+   */
+  _findTarget(_el) { return null; }
+
+  /**
+   * Natural starting dimensions of the target, used as the drag baseline.
+   * @param {HTMLElement} _target
+   * @returns {{ w: number, h: number }}
+   */
+  _getStartSize(_target) { return { w: 0, h: 0 }; }
+
+  /** Smallest allowed dimensions. @returns {{ minW: number, minH: number }} */
+  _getMinSize() { return { minW: 20, minH: 20 }; }
+
+  /**
+   * Writes the new size to the target (and any inner embed).
+   * @param {HTMLElement} _target
+   * @param {number} _w
+   * @param {number} _h
+   */
+  _applySize(_target, _w, _h) {}
+
+  /**
+   * Additional listeners a subclass needs; the returned disposers are torn down
+   * with the rest in destroy().
+   * @returns {Array<() => void>}
+   */
+  _extraListeners() { return []; }
+
+  // ---------------------------------------------------------------------------
+  // Lifecycle
+  // ---------------------------------------------------------------------------
+
+  initialize() {
+    this._overlay = this._buildOverlay();
+    const container = this.context.layoutInfo.editable.closest('.an-container') || document.body;
+    container.appendChild(this._overlay);
+    this._container = container;
+
+    const editable = this.context.layoutInfo.editable;
+
+    // Debounce window resize — _updateOverlayPosition already has rAF gating but
+    // every call cancels + re-schedules it; a debounce reduces that churn.
+    let resizeDebounce = null;
+    const onWindowResize = () => {
+      clearTimeout(resizeDebounce);
+      resizeDebounce = setTimeout(() => this._updateOverlayPosition(), 100);
+    };
+
+    this._disposers.push(
+      on(editable, 'click', (e) => this._onEditorClick(e)),
+      // Also select on right-click so the highlight shows before the context menu
+      on(editable, 'contextmenu', (e) => {
+        if (this.context.layoutInfo.container.classList.contains('an-disabled')) return;
+        const target = this._findTarget(e.target);
+        if (target) this._select(target);
+      }),
+      on(document, 'click', (e) => this._onDocClick(e)),
+      on(globalThis, 'scroll', () => this._updateOverlayPosition(), { passive: true }),
+      on(globalThis, 'resize', onWindowResize, { passive: true }),
+      on(editable, 'scroll', () => this._updateOverlayPosition(), { passive: true }),
+      ...this._extraListeners(),
+    );
+
+    return this;
+  }
+
+  destroy() {
+    this._disposers.forEach((d) => d());
+    this._disposers = [];
+    if (this._dragDisposers) {
+      this._dragDisposers.forEach((d) => d());
+      this._dragDisposers = null;
+    }
+    if (this._positionRaf) {
+      cancelAnimationFrame(this._positionRaf);
+      this._positionRaf = null;
+    }
+    this._deselect();
+    this._overlay?.remove();
+    this._overlay = null;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Public API used by other modules
+  // ---------------------------------------------------------------------------
+
+  /** Re-sync overlay position (call after external size changes). */
+  updateOverlay() {
+    this._updateOverlayPosition();
+  }
+
+  /** Programmatically clear the current selection. */
+  deselect() {
+    this._deselect();
+  }
+
+  // ---------------------------------------------------------------------------
+  // Internal
+  // ---------------------------------------------------------------------------
+
+  _buildOverlay() {
+    const overlay = document.createElement('div');
+    overlay.className = this._overlayClass;
+    overlay.style.display = 'none';
+
+    HANDLE_DEFS.forEach(({ pos }) => {
+      const h = document.createElement('div');
+      h.className = `an-resize-handle an-resize-${pos}`;
+      h.dataset.handle = pos;
+      // Attach handle listeners here so they're torn down in destroy() via _disposers
+      this._disposers.push(
+        // Pointer events rather than mouse events, so the same code path serves
+        // mouse, touch and pen. The handles also set `touch-action: none` in
+        // CSS — without it a touch drag is claimed by the browser as a scroll
+        // gesture and the pointer stream is cancelled before it starts.
+        on(h, 'pointerdown', (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          this._startResize(e, pos);
+        }),
+      );
+      overlay.appendChild(h);
+    });
+
+    return overlay;
+  }
+
+  _onEditorClick(e) {
+    if (this.context.layoutInfo.container.classList.contains('an-disabled')) return;
+    const target = this._findTarget(e.target);
+    if (target) {
+      // Prevent the browser from dropping the text selection / showing its own
+      // native resize affordance.
+      e.preventDefault();
+      this._select(target);
+    }
+  }
+
+  _onDocClick(e) {
+    if (!this._active) return;
+    if (this._active.contains(e.target)) return;
+    if (this._overlay?.contains(e.target)) return;
+    // Don't deselect while interacting with the context menu
+    if (e.target.closest?.('.an-contextmenu')) return;
+    this._deselect();
+  }
+
+  _select(target) {
+    if (this._active && this._active !== target) {
+      this._active.classList.remove(this._selectedClass);
+    }
+    this._active = target;
+    this._lastOverlayPos = null; // invalidate position cache on new selection
+    target.classList.add(this._selectedClass);
+    this._updateOverlayPosition();
+    this._overlay.style.display = 'block';
+  }
+
+  _deselect() {
+    if (this._active) {
+      this._active.classList.remove(this._selectedClass);
+      this._active = null;
+    }
+    if (this._overlay) this._overlay.style.display = 'none';
+  }
+
+  _updateOverlayPosition() {
+    if (this._positionRaf) cancelAnimationFrame(this._positionRaf);
+    this._positionRaf = requestAnimationFrame(() => {
+      this._positionRaf = null;
+      this._updateOverlayPositionNow();
+    });
+  }
+
+  _updateOverlayPositionNow() {
+    if (!this._active || !this._overlay) return;
+    const offsetParent = this._overlay.offsetParent || this._container;
+    const containerRect = offsetParent.getBoundingClientRect();
+    const rect = this._active.getBoundingClientRect();
+
+    // Skip DOM writes when position hasn't changed (common during non-scroll rAF ticks)
+    const p = this._lastOverlayPos;
+    if (p?.l === rect.left && p.t === rect.top && p.w === rect.width && p.h === rect.height) return;
+    this._lastOverlayPos = { l: rect.left, t: rect.top, w: rect.width, h: rect.height };
+
+    const left = rect.left - containerRect.left + offsetParent.scrollLeft;
+    const top = rect.top - containerRect.top + offsetParent.scrollTop;
+    this._overlay.style.left   = `${left}px`;
+    this._overlay.style.top    = `${top}px`;
+    this._overlay.style.width  = `${rect.width}px`;
+    this._overlay.style.height = `${rect.height}px`;
+  }
+
+  _startResize(e, pos) {
+    const target = this._active;
+    if (!target) return;
+
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const { w: startW, h: startH } = this._getStartSize(target);
+    const { minW, minH } = this._getMinSize();
+    const aspectRatio = startW / (startH || 1);
+    const isCorner = pos.length === 2; // 'nw','ne','se','sw'
+
+    const editable = this.context.layoutInfo.editable;
+    let raf = null; // rAF handle — ensures at most one write per paint frame
+
+    const onMove = (me) => {
+      if (raf !== null) return; // frame already pending, discard this event
+      const clientX = me.clientX;
+      const clientY = me.clientY;
+      raf = requestAnimationFrame(() => {
+        raf = null;
+        const dx = clientX - startX;
+        const dy = clientY - startY;
+        const maxW = editable.clientWidth || Infinity;
+        let newW = startW;
+        let newH = startH;
+
+        if (pos.includes('e')) newW = Math.max(minW, startW + dx);
+        if (pos.includes('w')) newW = Math.max(minW, startW - dx);
+        if (pos.includes('s')) newH = Math.max(minH, startH + dy);
+        if (pos.includes('n')) newH = Math.max(minH, startH - dy);
+
+        newW = Math.min(newW, maxW);
+
+        if (isCorner) {
+          if (Math.abs(dx) >= Math.abs(dy)) {
+            newH = Math.max(minH, Math.round(newW / aspectRatio));
+          } else {
+            newW = Math.min(Math.max(minW, Math.round(newH * aspectRatio)), maxW);
+            newH = Math.max(minH, Math.round(newW / aspectRatio));
+          }
+        }
+
+        this._applySize(target, newW, newH);
+        this._updateOverlayPosition();
+      });
+    };
+
+    const stop = () => {
+      document.removeEventListener('pointermove', onMove);
+      document.removeEventListener('pointerup', onUp);
+      document.removeEventListener('pointercancel', onUp);
+    };
+
+    const onUp = () => {
+      if (raf !== null) { cancelAnimationFrame(raf); raf = null; }
+      stop();
+      this._dragDisposers = null;
+      this.context.invoke('editor.afterCommand');
+    };
+
+    document.addEventListener('pointermove', onMove);
+    document.addEventListener('pointerup', onUp);
+    // A touch drag interrupted by the system (incoming call, gesture takeover)
+    // ends with pointercancel and no pointerup, which would otherwise leave the
+    // move listener attached for the rest of the session.
+    document.addEventListener('pointercancel', onUp);
+    // Track these so destroy() can clean them up if called during an active drag
+    this._dragDisposers = [stop];
+  }
+}