autumnnote 1.16.0 → 2.0.0

package/src/js/module/ImageResizer.js

@@ -1,84 +1,34 @@
 // ImageResizer.js - Interactive resize handles for selected images in the editor
-import { on } from '../core/dom.js';
+import { BaseResizer } from './BaseResizer.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 ImageResizer extends BaseResizer {
+  get _overlayClass() { return 'an-image-resizer'; }
+  get _selectedClass() { return 'an-image-selected'; }
 
-export class ImageResizer {
-  /** @param {import('../Context.js').Context} context */
-  constructor(context) {
-    this.context = context;
-    /** @type {HTMLImageElement|null} */
-    this._activeImg = null;
-    this._overlay = null;
-    this._disposers = [];
-    this._positionRaf = null;
+  /** @param {EventTarget|null} el @returns {HTMLImageElement|null} */
+  _findTarget(el) {
+    return /** @type {HTMLImageElement|null} */ (
+      el instanceof Element ? el.closest('img') : null
+    );
   }
 
-  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 globalThis 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);
+  /** @param {HTMLImageElement} img */
+  _getStartSize(img) {
+    return {
+      w: img.offsetWidth  || img.naturalWidth  || 100,
+      h: img.offsetHeight || img.naturalHeight || 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 img = /** @type {Element} */ (e.target)?.closest('img');
-        if (img) this._select(img);
-      }),
-      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 }),
-    );
-
-    return this;
+  _getMinSize() {
+    const min = this.context.options?.minImageSize ?? 20;
+    return { minW: min, minH: min };
   }
 
-  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();
-    if (this._overlay?.parentNode) {
-      this._overlay.remove();
-    }
-    this._overlay = null;
+  /** @param {HTMLImageElement} img @param {number} w @param {number} h */
+  _applySize(img, w, h) {
+    img.style.width  = `${w}px`;
+    img.style.height = `${h}px`;
   }
 
   // ---------------------------------------------------------------------------
@@ -87,174 +37,6 @@ export class ImageResizer {
 
   /** @returns {HTMLImageElement|null} */
   getActiveImage() {
-    return this._activeImg;
-  }
-
-  /** Re-sync overlay position (call after external size changes). */
-  updateOverlay() {
-    this._updateOverlayPosition();
-  }
-
-  /** Programmatically clear the current image selection. */
-  deselect() {
-    this._deselect();
-  }
-
-  // ---------------------------------------------------------------------------
-  // Internal
-  // ---------------------------------------------------------------------------
-
-  _buildOverlay() {
-    const overlay = document.createElement('div');
-    overlay.className = 'an-image-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;
-      // Attach handle listeners here so they're torn down in destroy() via _disposers
-      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 img = e.target.closest('img');
-    if (img) {
-      // Prevent browser from deselecting the current text selection / opening native resize
-      e.preventDefault();
-      this._select(img);
-    }
-  }
-
-  _onDocClick(e) {
-    if (!this._activeImg) return;
-    if (e.target === this._activeImg) 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(img) {
-    if (this._activeImg && this._activeImg !== img) {
-      this._activeImg.classList.remove('an-image-selected');
-    }
-    this._activeImg = img;
-    this._lastOverlayPos = null; // invalidate position cache on new selection
-    img.classList.add('an-image-selected');
-    this._updateOverlayPosition();
-    this._overlay.style.display = 'block';
-  }
-
-  _deselect() {
-    if (this._activeImg) {
-      this._activeImg.classList.remove('an-image-selected');
-      this._activeImg = 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._activeImg || !this._overlay) return;
-    const offsetParent = this._overlay.offsetParent || this._container;
-    const containerRect = offsetParent.getBoundingClientRect();
-    const rect = this._activeImg.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 img = this._activeImg;
-    if (!img) return;
-
-    const startX = e.clientX;
-    const startY = e.clientY;
-    const startW = img.offsetWidth  || img.naturalWidth  || 100;
-    const startH = img.offsetHeight || img.naturalHeight || 100;
-    const aspectRatio = startW / (startH || 1);
-    const isCorner = pos.length === 2; // 'nw','ne','se','sw'
-
-    const editable = this.context.layoutInfo.editable;
-    const minSz = this.context.options?.minImageSize ?? 20;
-    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(minSz, startW + dx);
-        if (pos.includes('w')) newW = Math.max(minSz, startW - dx);
-        if (pos.includes('s')) newH = Math.max(minSz, startH + dy);
-        if (pos.includes('n')) newH = Math.max(minSz, startH - dy);
-
-        newW = Math.min(newW, maxW);
-
-        if (isCorner) {
-          if (Math.abs(dx) >= Math.abs(dy)) {
-            newH = Math.max(minSz, Math.round(newW / aspectRatio));
-          } else {
-            newW = Math.min(Math.max(minSz, Math.round(newH * aspectRatio)), maxW);
-            newH = Math.max(minSz, Math.round(newW / aspectRatio));
-          }
-        }
-
-        img.style.width  = `${newW}px`;
-        img.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 /** @type {HTMLImageElement|null} */ (this._active);
   }
 }

package/src/js/module/ImageTooltip.js

@@ -2,6 +2,7 @@
 // Displays a horizontal action bar below (or above) the selected image,
 // 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>`,
@@ -16,20 +17,7 @@ const ICONS = {
   crop:        `<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"><polyline points="6 2 6 18 22 18"/><polyline points="2 6 18 6 18 22"/></svg>`,
 };
 
-const SHOW_DELAY = 100;
-const HIDE_DELAY = 180;
-
-export class ImageTooltip {
-  /** @param {import('../Context.js').Context} context */
-  constructor(context) {
-    this.context = context;
-    this._el = null;
-    this._activeImg = null;
-    this._showTimer = null;
-    this._hideTimer = null;
-    this._disposers = [];
-  }
-
+export class ImageTooltip extends BaseMediaTooltip {
   initialize() {
     this._el = this._buildTooltip();
     document.body.appendChild(this._el);
@@ -54,7 +42,7 @@ export class ImageTooltip {
       // Hide when image is deselected by clicking elsewhere
       on(document, 'click', (e) => {
         const et = /** @type {Node} */ (e.target);
-        if (this._activeImg && !this._activeImg.contains(et) && !this._el.contains(et)) {
+        if (this._active && !this._active.contains(et) && !this._el.contains(et)) {
           this._hide();
         }
       }),
@@ -140,97 +128,14 @@ export class ImageTooltip {
     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(img) {
-    if (this._activeImg === img && this._el.style.display !== 'none') return;
-    clearTimeout(this._hideTimer);
-    this._hideTimer = null;
-    clearTimeout(this._showTimer);
-    this._showTimer = setTimeout(() => {
-      this._activeImg = img;
-      this._show(img);
-    }, SHOW_DELAY);
-  }
-
-  _scheduleHide() {
-    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(_img) {
-    this._el.style.display = 'flex';
-    // Defer positioning: offsetWidth on a newly-visible element forces layout
-    requestAnimationFrame(() => {
-      if (this._activeImg) this._positionNear(this._activeImg);
-    });
-  }
-
-  _hide() {
-    this._el.style.display = 'none';
-    this._activeImg = null;
-    this._clearTimers();
-  }
-
-  _clearTimers() {
-    clearTimeout(this._showTimer);
-    clearTimeout(this._hideTimer);
-    this._showTimer = null;
-    this._hideTimer = null;
-  }
-
-  _positionNear(img) {
-    const rect   = img.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 img = this._activeImg;
+    const img = this._active;
     if (!img) return;
-    const target = img.closest('figure.an-figure') || img;
+    const target = /** @type {HTMLElement} */ (img.closest('figure.an-figure') || img);
     target.style.float = value;
     target.style.display = '';
     // Clear explicit width set for centering so the figure is free to float
@@ -239,13 +144,13 @@ export class ImageTooltip {
     target.style.marginRight = value === 'left'  ? '12px' : '';
     this.context.invoke('editor.afterCommand');
     this.context.invoke('imageResizer.updateOverlay');
-    requestAnimationFrame(() => { if (this._activeImg) this._positionNear(this._activeImg); });
+    requestAnimationFrame(() => { if (this._active) this._positionNear(this._active); });
   }
 
   _setCenter() {
-    const img = this._activeImg;
+    const img = this._active;
     if (!img) return;
-    const target = img.closest('figure.an-figure') || img;
+    const target = /** @type {HTMLElement} */ (img.closest('figure.an-figure') || img);
     target.style.float        = '';
     target.style.display      = 'block';
     // C1/C3: use fit-content so the block figure shrinks to the image width;
@@ -255,17 +160,17 @@ export class ImageTooltip {
     target.style.marginRight  = 'auto';
     this.context.invoke('editor.afterCommand');
     this.context.invoke('imageResizer.updateOverlay');
-    requestAnimationFrame(() => { if (this._activeImg) this._positionNear(this._activeImg); });
+    requestAnimationFrame(() => { if (this._active) this._positionNear(this._active); });
   }
 
   _resetSize() {
-    const img = this._activeImg;
+    const img = this._active;
     if (!img) return;
     img.style.width  = '';
     img.style.height = '';
     this.context.invoke('editor.afterCommand');
     this.context.invoke('imageResizer.updateOverlay');
-    requestAnimationFrame(() => { if (this._activeImg) this._positionNear(this._activeImg); });
+    requestAnimationFrame(() => { if (this._active) this._positionNear(this._active); });
   }
 
   /**
@@ -275,7 +180,7 @@ export class ImageTooltip {
    * @param {number} delta
    */
   _rotate(delta) {
-    const img = this._activeImg;
+    const img = this._active;
     if (!img) return;
     // Parse current rotation angle from inline transform
     const current = img.style.transform || '';
@@ -291,11 +196,11 @@ export class ImageTooltip {
     }
     this.context.invoke('editor.afterCommand');
     this.context.invoke('imageResizer.updateOverlay');
-    requestAnimationFrame(() => { if (this._activeImg) this._positionNear(this._activeImg); });
+    requestAnimationFrame(() => { if (this._active) this._positionNear(this._active); });
   }
 
   _delete() {
-    const img = this._activeImg;
+    const img = this._active;
     if (!img) return;
     this._hide();
     this.context.invoke('imageResizer.deselect');
@@ -309,7 +214,7 @@ export class ImageTooltip {
   }
 
   _crop() {
-    const img = this._activeImg;
+    const img = this._active;
     if (!img) return;
     // Hide the tooltip while the crop overlay is active
     this._hide();
@@ -318,7 +223,7 @@ export class ImageTooltip {
   }
 
   _toggleCaption() {
-    const img = this._activeImg;
+    const img = this._active;
     if (!img) return;
 
     // If already inside a figure, move focus to the figcaption