autumnnote 1.16.0 → 2.0.0

package/src/js/module/VideoResizer.js

@@ -1,54 +1,48 @@
 // VideoResizer.js - Interactive resize handles for selected videos in the editor
 // Targets .an-video-wrapper divs (containing <iframe> or <video>)
 import { on } from '../core/dom.js';
+import { BaseResizer } from './BaseResizer.js';
 
-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 VideoResizer extends BaseResizer {
+  get _overlayClass() { return 'an-video-resizer'; }
+  get _selectedClass() { return 'an-video-selected'; }
 
-export class VideoResizer {
-  /** @param {import('../Context.js').Context} context */
-  constructor(context) {
-    this.context = context;
-    /** @type {HTMLElement|null} — the .an-video-wrapper div */
-    this._activeWrapper = null;
-    this._overlay = null;
-    this._disposers = [];
-    this._positionRaf = null;
+  /**
+   * Walk up the DOM from `el` to find the nearest .an-video-wrapper,
+   * or an iframe/video whose parent is .an-video-wrapper.
+   * @param {EventTarget|null} el
+   * @returns {HTMLElement|null}
+   */
+  _findTarget(el) {
+    if (!el || !(el instanceof Element)) return null;
+    if (el.classList?.contains('an-video-wrapper')) return /** @type {HTMLElement} */ (el);
+    return /** @type {HTMLElement|null} */ (el.closest('.an-video-wrapper'));
   }
 
-  initialize() {
-    this._overlay = this._buildOverlay();
-    const container = this.context.layoutInfo.editable.closest('.an-container') || document.body;
-    container.appendChild(this._overlay);
-    this._container = container;
+  /** @param {HTMLElement} wrapper */
+  _getStartSize(wrapper) {
+    return { w: wrapper.offsetWidth || 560, h: wrapper.offsetHeight || 315 };
+  }
 
-    const editable = this.context.layoutInfo.editable;
+  _getMinSize() {
+    return { minW: 80, minH: 45 };
+  }
 
-    let _resizeDebounce = null;
-    const onWindowResize = () => {
-      clearTimeout(_resizeDebounce);
-      _resizeDebounce = setTimeout(() => this._updateOverlayPosition(), 100);
-    };
+  /** @param {HTMLElement} wrapper @param {number} w @param {number} h */
+  _applySize(wrapper, w, h) {
+    // Resize wrapper and inner embed via CSS only — attribute writes are redundant
+    wrapper.style.width  = `${w}px`;
+    wrapper.style.height = `${h}px`;
+    const embed = /** @type {HTMLElement|null} */ (wrapper.querySelector('iframe, video'));
+    if (embed) {
+      embed.style.width  = `${w}px`;
+      embed.style.height = `${h}px`;
+    }
+  }
 
-    this._disposers.push(
-      on(editable, 'click', (e) => this._onEditorClick(e)),
-      on(editable, 'contextmenu', (e) => {
-        if (this.context.layoutInfo.container.classList.contains('an-disabled')) return;
-        const wrapper = this._findWrapper(e.target);
-        if (wrapper) this._select(wrapper);
-      }),
-      on(document, 'click', (e) => this._onDocClick(e)),
-      on(globalThis, 'scroll', () => this._updateOverlayPosition(), { passive: true }),
-      on(globalThis, 'resize', onWindowResize),
-      on(editable, 'scroll', () => this._updateOverlayPosition(), { passive: true }),
+  _extraListeners() {
+    const editable = this.context.layoutInfo.editable;
+    return [
       // D1: Prevent native browser drag of video wrappers. Without this, a user
       // can hold-and-drag to produce a "copy" that lands outside .an-editable,
       // where the .an-video-shield CSS loses its containing context so the
@@ -58,210 +52,15 @@ export class VideoResizer {
           e.preventDefault();
         }
       }),
-    );
-
-    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
+  // Public API used by other modules
   // ---------------------------------------------------------------------------
 
   /** @returns {HTMLElement|null} */
   getActiveWrapper() {
-    return this._activeWrapper;
-  }
-
-  updateOverlay() {
-    this._updateOverlayPosition();
-  }
-
-  deselect() {
-    this._deselect();
-  }
-
-  // ---------------------------------------------------------------------------
-  // Internal
-  // ---------------------------------------------------------------------------
-
-  /**
-   * Walk up the DOM from `el` to find the nearest .an-video-wrapper,
-   * or an iframe/video whose parent is .an-video-wrapper.
-   * @param {EventTarget} el
-   * @returns {HTMLElement|null}
-   */
-  _findWrapper(el) {
-    if (!el || !(el instanceof Element)) return null;
-    // Direct hit on wrapper
-    if (el.classList?.contains('an-video-wrapper')) return /** @type {HTMLElement} */ (el);
-    // Child element (iframe, video, or nested)
-    const w = el.closest('.an-video-wrapper');
-    if (w) return /** @type {HTMLElement} */ (w);
-    return null;
-  }
-
-  _buildOverlay() {
-    const overlay = document.createElement('div');
-    overlay.className = 'an-video-resizer';
-    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;
-      this._disposers.push(
-        on(h, 'mousedown', (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 wrapper = this._findWrapper(e.target);
-    if (wrapper) {
-      e.preventDefault();
-      this._select(wrapper);
-    }
-  }
-
-  _onDocClick(e) {
-    if (!this._activeWrapper) return;
-    if (this._activeWrapper.contains(e.target)) return;
-    if (this._overlay?.contains(e.target)) return;
-    if (e.target.closest('.an-contextmenu')) return;
-    this._deselect();
-  }
-
-  _select(wrapper) {
-    if (this._activeWrapper && this._activeWrapper !== wrapper) {
-      this._activeWrapper.classList.remove('an-video-selected');
-    }
-    this._activeWrapper = wrapper;
-    wrapper.classList.add('an-video-selected');
-    this._updateOverlayPosition();
-    this._overlay.style.display = 'block';
-  }
-
-  _deselect() {
-    if (this._activeWrapper) {
-      this._activeWrapper.classList.remove('an-video-selected');
-      this._activeWrapper = 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._activeWrapper || !this._overlay) return;
-    const offsetParent = this._overlay.offsetParent || this._container;
-    const containerRect = offsetParent.getBoundingClientRect();
-    const rect = this._activeWrapper.getBoundingClientRect();
-    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 wrapper = this._activeWrapper;
-    if (!wrapper) return;
-
-    const embed = /** @type {HTMLElement|null} */ (wrapper.querySelector('iframe, video'));
-    const startX = e.clientX;
-    const startY = e.clientY;
-    const startW = wrapper.offsetWidth  || 560;
-    const startH = wrapper.offsetHeight || 315;
-    const aspectRatio = startW / (startH || 1);
-    const isCorner = pos.length === 2;
-
-    const editable = this.context.layoutInfo.editable;
-    let _raf = null; // rAF handle — at most one write per paint frame
-
-    const onMove = (me) => {
-      if (_raf !== null) return;
-      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(80, startW + dx);
-        if (pos.includes('w')) newW = Math.max(80, startW - dx);
-        if (pos.includes('s')) newH = Math.max(45, startH + dy);
-        if (pos.includes('n')) newH = Math.max(45, startH - dy);
-
-        newW = Math.min(newW, maxW);
-
-        if (isCorner) {
-          if (Math.abs(dx) >= Math.abs(dy)) {
-            newH = Math.max(45, Math.round(newW / aspectRatio));
-          } else {
-            newW = Math.min(Math.max(80, Math.round(newH * aspectRatio)), maxW);
-            newH = Math.max(45, Math.round(newW / aspectRatio));
-          }
-        }
-
-        // Resize wrapper and inner embed via CSS only — attribute writes are redundant
-        wrapper.style.width  = `${newW}px`;
-        wrapper.style.height = `${newH}px`;
-        if (embed) {
-          embed.style.width  = `${newW}px`;
-          embed.style.height = `${newH}px`;
-        }
-        this._updateOverlayPosition();
-      });
-    };
-
-    const onUp = () => {
-      if (_raf !== null) { cancelAnimationFrame(_raf); _raf = null; }
-      document.removeEventListener('mousemove', onMove);
-      document.removeEventListener('mouseup', onUp);
-      this._dragDisposers = null;
-      this.context.invoke('editor.afterCommand');
-    };
-
-    document.addEventListener('mousemove', onMove);
-    document.addEventListener('mouseup', onUp);
-    // Track these so destroy() can clean them up if called during an active drag
-    this._dragDisposers = [
-      () => document.removeEventListener('mousemove', onMove),
-      () => document.removeEventListener('mouseup', onUp),
-    ];
+    return this._active;
   }
 }

package/src/js/module/VideoTooltip.js

@@ -2,6 +2,7 @@
 // Displays a horizontal action bar below (or above) the selected video,
 // similar in appearance and interaction to LinkTooltip.
 import { createElement, on } from '../core/dom.js';
+import { BaseMediaTooltip } from './BaseMediaTooltip.js';
 
 const ICONS = {
   floatLeft:   `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="8" height="8" rx="1"/><line x1="12" y1="6" x2="22" y2="6"/><line x1="12" y1="9" x2="22" y2="9"/><line x1="12" y1="12" x2="22" y2="12"/><line x1="2" y1="16" x2="22" y2="16"/><line x1="2" y1="20" x2="18" y2="20"/></svg>`,
@@ -13,22 +14,7 @@ const ICONS = {
   preview:     `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>`,
 };
 
-const SHOW_DELAY = 100;
-const HIDE_DELAY = 180;
-
-export class VideoTooltip {
-  /** @param {import('../Context.js').Context} context */
-  constructor(context) {
-    this.context = context;
-    this._el = null;
-    this._activeWrapper = null;
-    this._showTimer = null;
-    this._hideTimer = null;
-    this._disposers = [];
-    this._previewMode = false;
-    this._previewClickOff = null;
-  }
-
+export class VideoTooltip extends BaseMediaTooltip {
   initialize() {
     this._el = this._buildTooltip();
     document.body.appendChild(this._el);
@@ -54,8 +40,8 @@ export class VideoTooltip {
       on(document, 'click', (e) => {
         const target = /** @type {Node} */ (e.target);
         if (
-          this._activeWrapper &&
-          !this._activeWrapper.contains(target) &&
+          this._active &&
+          !this._active.contains(target) &&
           !this._el.contains(target)
         ) {
           this._hide();
@@ -78,6 +64,17 @@ export class VideoTooltip {
     this._el = null;
   }
 
+  // ---------------------------------------------------------------------------
+  // Base hooks — keep the bar pinned while a preview is playing
+  // ---------------------------------------------------------------------------
+
+  /** @returns {boolean} */
+  _canHide() { return !this._previewMode; }
+
+  _beforeHide() {
+    if (this._previewMode) this._exitPreview();
+  }
+
   // ---------------------------------------------------------------------------
   // Build
   // ---------------------------------------------------------------------------
@@ -134,96 +131,12 @@ export class VideoTooltip {
     return el;
   }
 
-  /**
-   * @param {string} icon
-   * @param {string} title
-   * @param {Function} handler
-   * @param {boolean} [isDanger]
-   */
-  _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(wrapper) {
-    if (this._activeWrapper === wrapper && this._el.style.display !== 'none') return;
-    clearTimeout(this._hideTimer);
-    this._hideTimer = null;
-    clearTimeout(this._showTimer);
-    this._showTimer = setTimeout(() => {
-      this._activeWrapper = wrapper;
-      this._show(wrapper);
-    }, SHOW_DELAY);
-  }
-
-  _scheduleHide() {
-    // Keep tooltip alive while preview mode is active
-    if (this._previewMode) return;
-    clearTimeout(this._showTimer);
-    this._showTimer = null;
-    if (this._hideTimer) return;
-    this._hideTimer = setTimeout(() => this._hide(), HIDE_DELAY);
-  }
-
-  _show(_wrapper) {
-    this._el.style.display = 'flex';
-    // Defer: offsetWidth on a newly-visible element forces synchronous layout
-    requestAnimationFrame(() => {
-      if (this._activeWrapper) this._positionNear(this._activeWrapper);
-    });
-  }
-
-  _hide() {
-    if (this._previewMode) this._exitPreview();
-    this._el.style.display = 'none';
-    this._activeWrapper = null;
-    this._clearTimers();
-  }
-
-  _clearTimers() {
-    clearTimeout(this._showTimer);
-    clearTimeout(this._hideTimer);
-    this._showTimer = null;
-    this._hideTimer = null;
-  }
-
-  _positionNear(wrapper) {
-    const rect   = wrapper.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`;
-  }
-
   // ---------------------------------------------------------------------------
   // Actions
   // ---------------------------------------------------------------------------
 
   _setFloat(value) {
-    const wrapper = this._activeWrapper;
+    const wrapper = this._active;
     if (!wrapper) return;
     wrapper.style.float        = value;
     wrapper.style.display      = value ? 'inline-block' : '';
@@ -231,11 +144,11 @@ export class VideoTooltip {
     wrapper.style.marginRight  = value === 'left'  ? '12px' : '';
     this.context.invoke('editor.afterCommand');
     this.context.invoke('videoResizer.updateOverlay');
-    requestAnimationFrame(() => { if (this._activeWrapper) this._positionNear(this._activeWrapper); });
+    requestAnimationFrame(() => { if (this._active) this._positionNear(this._active); });
   }
 
   _setCenter() {
-    const wrapper = this._activeWrapper;
+    const wrapper = this._active;
     if (!wrapper) return;
     wrapper.style.float       = '';
     wrapper.style.display     = 'block';
@@ -243,13 +156,13 @@ export class VideoTooltip {
     wrapper.style.marginRight = 'auto';
     this.context.invoke('editor.afterCommand');
     this.context.invoke('videoResizer.updateOverlay');
-    requestAnimationFrame(() => { if (this._activeWrapper) this._positionNear(this._activeWrapper); });
+    requestAnimationFrame(() => { if (this._active) this._positionNear(this._active); });
   }
 
   _resetSize() {
-    const wrapper = this._activeWrapper;
+    const wrapper = this._active;
     if (!wrapper) return;
-    const embed = wrapper.querySelector('iframe, video');
+    const embed = /** @type {HTMLElement|null} */ (wrapper.querySelector('iframe, video'));
     wrapper.style.width  = '';
     wrapper.style.height = '';
     if (embed) {
@@ -260,11 +173,11 @@ export class VideoTooltip {
     }
     this.context.invoke('editor.afterCommand');
     this.context.invoke('videoResizer.updateOverlay');
-    requestAnimationFrame(() => { if (this._activeWrapper) this._positionNear(this._activeWrapper); });
+    requestAnimationFrame(() => { if (this._active) this._positionNear(this._active); });
   }
 
   _delete() {
-    const wrapper = this._activeWrapper;
+    const wrapper = this._active;
     if (!wrapper) return;
     this._hide();
     this.context.invoke('videoResizer.deselect');
@@ -285,12 +198,12 @@ export class VideoTooltip {
   }
 
   _enterPreview() {
-    const wrapper = this._activeWrapper;
+    const wrapper = this._active;
     if (!wrapper) return;
     this._previewMode = true;
 
     // Hide the shield so the iframe / video receives pointer events directly
-    const shield = wrapper.querySelector('.an-video-shield');
+    const shield = /** @type {HTMLElement|null} */ (wrapper.querySelector('.an-video-shield'));
     if (shield) shield.style.display = 'none';
 
     // Hide the resize overlay — it would block interaction with the embed
@@ -316,10 +229,10 @@ export class VideoTooltip {
   _exitPreview() {
     this._previewMode = false;
 
-    const wrapper = this._activeWrapper;
+    const wrapper = this._active;
     if (wrapper) {
       // Restore the shield
-      const shield = wrapper.querySelector('.an-video-shield');
+      const shield = /** @type {HTMLElement|null} */ (wrapper.querySelector('.an-video-shield'));
       if (shield) shield.style.display = '';
     }