fix: hover overlay ADD uses reliable image beacon and best image URL extraction

src-tauri/resources/scripts/hover_overlay.js

@@ -1,144 +1,154 @@
-/* Refstudio hover overlay: + ADD button. Prevents click-through to underlying links. */
-(function () {
-  if (window.__muse_hover_v7) return;
-  window.__muse_hover_v7 = true;
-
-  var MIN = 90;
-  var activeImg = null;
-  var badge = null;
-  var showTimer = 0;
-  var hideTimer = 0;
-
-  function injectCSS() {
-    if (document.getElementById('__muse_badge_css')) return;
-    var s = document.createElement('style'); s.id = '__muse_badge_css';
-    s.textContent = '#__muse_add_badge{all:initial;position:fixed;z-index:2147483647;display:flex;align-items:center;gap:4px;padding:7px 14px;background:rgba(255,255,255,0.97);color:#111;border-radius:999px;box-shadow:0 4px 20px rgba(0,0,0,0.3),0 0 0 1px rgba(0,0,0,0.05);font:700 11px/1 -apple-system,BlinkMacSystemFont,"Inter",sans-serif;cursor:pointer;opacity:0;transform:translateY(4px) scale(0.92);transition:opacity .15s,transform .15s;pointer-events:none;letter-spacing:0.02em;user-select:none}#__muse_add_badge.v{opacity:1;transform:none;pointer-events:auto}#__muse_add_badge:hover{background:#fff;box-shadow:0 6px 28px rgba(0,0,0,0.35),0 0 0 1px rgba(0,0,0,0.08);transform:scale(1.05)}#__muse_add_badge:active{transform:scale(0.94)}#__muse_add_badge svg{width:14px;height:14px;stroke-width:2.5}#__mt7{all:initial;position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(8px);z-index:2147483647;padding:9px 16px;border-radius:999px;background:rgba(20,20,20,.97);border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 36px rgba(0,0,0,.5);font:600 12px/1 -apple-system,sans-serif;color:#fff;opacity:0;transition:opacity .16s,transform .16s;pointer-events:none}#__mt7.s{opacity:1;transform:translateX(-50%) translateY(0)}';
-    (document.head || document.documentElement).appendChild(s);
-  }
-
-  function enc(v) { return encodeURIComponent(v == null ? '' : String(v)); }
-  function absUrl(s) { try { return new URL(s || '', location.href).href; } catch (_) { return s || ''; } }
-
-  function toast(m) {
-    var t = document.getElementById('__mt7');
-    if (!t) { t = document.createElement('div'); t.id = '__mt7'; document.documentElement.appendChild(t); }
-    t.textContent = m; t.classList.add('s');
-    clearTimeout(t._t); t._t = setTimeout(function () { t.classList.remove('s'); }, 1500);
-  }
-
-  function addToBoard(url, title, w, h) {
-    var u = 'muse-action://board?url=' + enc(url) + '&source=' + enc(location.href) + '&title=' + enc(title) + '&w=' + enc(w) + '&h=' + enc(h);
-    // Use an iframe to trigger navigation without changing current page
-    var frame = document.createElement('iframe');
-    frame.style.cssText = 'display:none;width:0;height:0;border:none;position:absolute;';
-    document.documentElement.appendChild(frame);
-    try { frame.contentWindow.location.href = u; } catch (_) {
-      // Fallback: direct navigation (Rust will block it via on_navigation returning false)
-      try { window.location.href = u; } catch (_2) {}
-    }
-    setTimeout(function () { if (frame.parentNode) frame.parentNode.removeChild(frame); }, 200);
-  }
-
-  function pos(el, img) {
-    var r = img.getBoundingClientRect();
-    // Position at top-right corner of the image (where user expects action buttons)
-    var x = r.right - 70;
-    var y = r.top + 8;
-    if (x < r.left + 8) x = r.left + 8;
-    if (x > innerWidth - 80) x = innerWidth - 80;
-    if (y < 4) y = 4;
-    if (y > innerHeight - 40) y = innerHeight - 40;
-    el.style.left = x + 'px';
-    el.style.top = y + 'px';
-  }
-
-  function hide() {
-    if (!badge) return;
-    badge.classList.remove('v');
-    activeImg = null;
-    setTimeout(function () { if (badge && !badge.classList.contains('v')) badge.style.pointerEvents = 'none'; }, 160);
-  }
-
-  function show(img) {
-    if (img === activeImg && badge && badge.classList.contains('v')) return;
-    injectCSS();
-    activeImg = img;
-
-    if (!badge) {
-      badge = document.createElement('div');
-      badge.id = '__muse_add_badge';
-      badge.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> ADD';
-
-      // Use mousedown + prevent everything to ensure no link/image click passes through
-      badge.addEventListener('mousedown', function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        e.stopImmediatePropagation();
-      }, true);
-
-      badge.addEventListener('click', function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        e.stopImmediatePropagation();
-        if (!activeImg) return;
-        var url = absUrl(activeImg.currentSrc || activeImg.src);
-        var title = activeImg.alt || activeImg.title || document.title || 'Reference';
-        var w = activeImg.naturalWidth || Math.round(activeImg.getBoundingClientRect().width);
-        var h = activeImg.naturalHeight || Math.round(activeImg.getBoundingClientRect().height);
-        addToBoard(url, title, w, h);
-        toast('✓ Added to Board');
-      }, true);
-
-      // Prevent any pointer event from bubbling to parent links
-      badge.addEventListener('pointerdown', function (e) {
-        e.stopPropagation();
-        e.stopImmediatePropagation();
-      }, true);
-
-      badge.addEventListener('pointerup', function (e) {
-        e.stopPropagation();
-        e.stopImmediatePropagation();
-      }, true);
-
-      badge.onmouseenter = function () { clearTimeout(hideTimer); };
-      badge.onmouseleave = function () { hideTimer = setTimeout(hide, 300); };
-
-      document.documentElement.appendChild(badge);
-    }
-
-    pos(badge, activeImg);
-    badge.offsetHeight;
-    badge.classList.add('v');
-  }
-
-  // Only show on IMG elements, not on elements inside links that happen to be images
-  function isValidTarget(el) {
-    if (!el || el.tagName !== 'IMG') return false;
-    var r = el.getBoundingClientRect();
-    return r.width >= MIN && r.height >= MIN;
-  }
-
-  document.addEventListener('mouseover', function (e) {
-    var t = e.target;
-    if (!isValidTarget(t)) return;
-    if (t === activeImg) { clearTimeout(hideTimer); return; }
-    clearTimeout(hideTimer); clearTimeout(showTimer);
-    showTimer = setTimeout(function () { show(t); }, 250);
-  }, true);
-
-  document.addEventListener('mouseout', function (e) {
-    var t = e.target;
-    if (!t || t.tagName !== 'IMG' || t !== activeImg) return;
-    var rel = e.relatedTarget;
-    if (badge && (badge === rel || badge.contains && badge.contains(rel))) return;
-    clearTimeout(showTimer);
-    hideTimer = setTimeout(hide, 350);
-  }, true);
-
-  window.addEventListener('scroll', function () {
-    if (!badge || !activeImg) return;
-    var r = activeImg.getBoundingClientRect();
-    if (r.bottom < -20 || r.top > innerHeight + 20) hide();
-    else pos(badge, activeImg);
-  }, { passive: true });
-})();
+/* Refstudio hover overlay: + ADD button on web images. */
+(function () {
+  if (window.__muse_hover_v8) return;
+  window.__muse_hover_v8 = true;
+
+  var MIN = 90;
+  var activeImg = null;
+  var badge = null;
+  var showTimer = 0;
+  var hideTimer = 0;
+  var beaconKeepalive = [];
+
+  function injectCSS() {
+    if (document.getElementById('__muse_badge_css')) return;
+    var s = document.createElement('style'); s.id = '__muse_badge_css';
+    s.textContent = '#__muse_add_badge{all:initial;position:fixed;z-index:2147483647;display:flex;align-items:center;gap:4px;padding:7px 14px;background:rgba(255,255,255,0.97);color:#111;border-radius:999px;box-shadow:0 4px 20px rgba(0,0,0,0.3),0 0 0 1px rgba(0,0,0,0.05);font:700 11px/1 -apple-system,BlinkMacSystemFont,"Inter",sans-serif;cursor:pointer;opacity:0;transform:translateY(4px) scale(0.92);transition:opacity .15s,transform .15s;pointer-events:none;letter-spacing:0.02em;user-select:none}#__muse_add_badge.v{opacity:1;transform:none;pointer-events:auto}#__muse_add_badge:hover{background:#fff;box-shadow:0 6px 28px rgba(0,0,0,0.35),0 0 0 1px rgba(0,0,0,0.08);transform:scale(1.05)}#__muse_add_badge:active{transform:scale(0.94)}#__muse_add_badge svg{width:14px;height:14px;stroke-width:2.5}#__mt7{all:initial;position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(8px);z-index:2147483647;padding:9px 16px;border-radius:999px;background:rgba(20,20,20,.97);border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 36px rgba(0,0,0,.5);font:600 12px/1 -apple-system,sans-serif;color:#fff;opacity:0;transition:opacity .16s,transform .16s;pointer-events:none}#__mt7.s{opacity:1;transform:translateX(-50%) translateY(0)}';
+    (document.head || document.documentElement).appendChild(s);
+  }
+
+  function enc(v) { return encodeURIComponent(v == null ? '' : String(v)); }
+  function absUrl(s) { try { return new URL(s || '', location.href).href; } catch (_) { return s || ''; } }
+
+  function bestFromSrcset(srcset) {
+    if (!srcset) return '';
+    try {
+      var best = '', bestScore = 0;
+      srcset.split(',').forEach(function(part) {
+        var bits = part.trim().split(/\s+/);
+        var u = bits[0];
+        var score = 1;
+        if (bits[1]) {
+          if (bits[1].endsWith('w')) score = parseInt(bits[1], 10) || 1;
+          else if (bits[1].endsWith('x')) score = (parseFloat(bits[1]) || 1) * 1000;
+        }
+        if (score > bestScore) { bestScore = score; best = u; }
+      });
+      return best ? absUrl(best) : '';
+    } catch (_) { return ''; }
+  }
+
+  function bestImageUrl(img) {
+    // Prefer the highest available URL. This catches srcset/lazy-loaded images.
+    var u = bestFromSrcset(img.getAttribute('srcset') || img.srcset);
+    if (u) return u;
+    u = img.getAttribute('data-full') || img.getAttribute('data-fullsrc') || img.getAttribute('data-original') || img.getAttribute('data-src') || img.getAttribute('data-lazy-src') || img.currentSrc || img.src;
+    u = absUrl(u);
+    // Site adapter tweaks for common thumb URL patterns.
+    try {
+      if (u.includes('pinimg.com') && u.match(/\/\d+x\//)) u = u.replace(/\/\d+x\//, '/originals/');
+      if (u.includes('artstation.com') && u.includes('/medium/')) u = u.replace('/medium/', '/large/');
+      if (u.includes('behance.net') && u.includes('/max_1200/')) u = u.replace('/max_1200/', '/max_3840/');
+    } catch (_) {}
+    return u;
+  }
+
+  function toast(m) {
+    var t = document.getElementById('__mt7');
+    if (!t) { t = document.createElement('div'); t.id = '__mt7'; document.documentElement.appendChild(t); }
+    t.textContent = m; t.classList.add('s');
+    clearTimeout(t._t); t._t = setTimeout(function () { t.classList.remove('s'); }, 1500);
+  }
+
+  function addToBoard(url, title, w, h) {
+    var u = 'muse-action://board?url=' + enc(url) + '&source=' + enc(location.href) + '&title=' + enc(title) + '&w=' + enc(w) + '&h=' + enc(h);
+    // Most reliable cross-origin child-webview bridge: image beacon to registered URI scheme.
+    var b = new Image();
+    b.onload = b.onerror = function () {
+      setTimeout(function () {
+        var i = beaconKeepalive.indexOf(b);
+        if (i >= 0) beaconKeepalive.splice(i, 1);
+      }, 500);
+    };
+    beaconKeepalive.push(b);
+    b.src = u;
+  }
+
+  function pos(el, img) {
+    var r = img.getBoundingClientRect();
+    var x = r.right - 78;
+    var y = r.top + 8;
+    if (x < r.left + 8) x = r.left + 8;
+    if (x > innerWidth - 90) x = innerWidth - 90;
+    if (y < 4) y = 4;
+    if (y > innerHeight - 42) y = innerHeight - 42;
+    el.style.left = x + 'px';
+    el.style.top = y + 'px';
+  }
+
+  function hide() {
+    if (!badge) return;
+    badge.classList.remove('v');
+    activeImg = null;
+    setTimeout(function () { if (badge && !badge.classList.contains('v')) badge.style.pointerEvents = 'none'; }, 160);
+  }
+
+  function show(img) {
+    if (img === activeImg && badge && badge.classList.contains('v')) return;
+    injectCSS();
+    activeImg = img;
+    if (!badge) {
+      badge = document.createElement('div');
+      badge.id = '__muse_add_badge';
+      badge.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> ADD';
+      ['mousedown','pointerdown','pointerup'].forEach(function(ev){ badge.addEventListener(ev, function(e){ e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation(); }, true); });
+      badge.addEventListener('click', function (e) {
+        e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation();
+        if (!activeImg) return;
+        var url = bestImageUrl(activeImg);
+        var title = activeImg.alt || activeImg.title || document.title || 'Reference';
+        var w = activeImg.naturalWidth || Math.round(activeImg.getBoundingClientRect().width);
+        var h = activeImg.naturalHeight || Math.round(activeImg.getBoundingClientRect().height);
+        if (!url || url.startsWith('data:') || url.startsWith('blob:')) { toast('Cannot capture this image'); return; }
+        addToBoard(url, title, w, h);
+        toast('✓ Added to Board');
+      }, true);
+      badge.onmouseenter = function () { clearTimeout(hideTimer); };
+      badge.onmouseleave = function () { hideTimer = setTimeout(hide, 300); };
+      document.documentElement.appendChild(badge);
+    }
+    pos(badge, activeImg);
+    badge.offsetHeight;
+    badge.classList.add('v');
+  }
+
+  function isValidTarget(el) {
+    if (!el || el.tagName !== 'IMG') return false;
+    var r = el.getBoundingClientRect();
+    return r.width >= MIN && r.height >= MIN;
+  }
+
+  document.addEventListener('mouseover', function (e) {
+    var t = e.target;
+    if (!isValidTarget(t)) return;
+    if (t === activeImg) { clearTimeout(hideTimer); return; }
+    clearTimeout(hideTimer); clearTimeout(showTimer);
+    showTimer = setTimeout(function () { show(t); }, 180);
+  }, true);
+
+  document.addEventListener('mouseout', function (e) {
+    var t = e.target;
+    if (!t || t.tagName !== 'IMG' || t !== activeImg) return;
+    var rel = e.relatedTarget;
+    if (badge && (badge === rel || badge.contains && badge.contains(rel))) return;
+    clearTimeout(showTimer);
+    hideTimer = setTimeout(hide, 300);
+  }, true);
+
+  window.addEventListener('scroll', function () {
+    if (!badge || !activeImg) return;
+    var r = activeImg.getBoundingClientRect();
+    if (r.bottom < -20 || r.top > innerHeight + 20) hide();
+    else pos(badge, activeImg);
+  }, { passive: true, capture: true });
+})();