From be1facdec3cc78caaedc5abd389894be2f6974b4 Mon Sep 17 00:00:00 2001
From: dlawler489 <104159223@student.swin.edu.au>
Date: Tue, 15 Sep 2026 10:26:48 +1000
Subject: [PATCH] Drag out from file tabs, plate chips and a Drag out handle;
 only offer dragging in Chromium browsers

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 public/app.js     | 33 ++++++++++++++++++++++++---------
 public/index.html |  1 +
 public/styles.css |  3 ++-
 3 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/public/app.js b/public/app.js
index 18dd519..576f0d4 100644
--- a/public/app.js
+++ b/public/app.js
@@ -401,7 +401,7 @@ function cardHtml(m) {
   const trashed = Boolean(m.deleted_at);
   const when = trashed ? `trashed ${formatDate(m.deleted_at)}` : formatDate(m.date_added);
   return `
-    <div class="file-card" data-model-id="${m.id}"${!trashed && m.files.length ? ' draggable="true" title="Drag out to save the file"' : ''}>
+    <div class="file-card" data-model-id="${m.id}"${CAN_DRAG_OUT && !trashed && m.files.length ? ' draggable="true" title="Drag out to save the file"' : ''}>
       <div class="file-thumbnail">${thumbHtml(m)}</div>
       <div class="file-info">
         <div class="file-name">${escapeHtml(m.name)}</div>
@@ -758,10 +758,11 @@ function setupEventListeners() {
     const target = card && modelDragTarget(findModel(card.dataset.modelId));
     if (target) setDragOut(e.dataTransfer, target);
   });
-  document.getElementById('detailFileInfo').addEventListener('dragstart', (e) => {
-    const row = e.target.closest('[data-drag-url]');
-    if (row) setDragOut(e.dataTransfer, { url: row.dataset.dragUrl, name: row.dataset.dragName });
+  fileDetailModal.addEventListener('dragstart', (e) => {
+    const el = e.target.closest && e.target.closest('[data-drag-url]');
+    if (el) setDragOut(e.dataTransfer, { url: el.dataset.dragUrl, name: el.dataset.dragName });
   });
+  document.getElementById('dragOutBtn').addEventListener('click', (e) => followLink(e.currentTarget.dataset.dragUrl));
   document.getElementById('detailFileInfo').addEventListener('click', (e) => {
     const slice = e.target.closest('[data-slice-kind]');
     if (slice) {
@@ -1000,7 +1001,7 @@ function openModelDetail(modelId) {
       ? `<a class="btn btn-secondary btn-sm download-all" href="/api/models/${model.id}/download">Download all ${model.files.length} files (.zip)</a>`
       : '';
     fileInfoEl.innerHTML = downloadAll + model.files.map((f) => `
-      <div class="file-row" draggable="true" data-drag-url="/api/files/${f.id}/raw" data-drag-name="${escapeHtml(f.originalName)}">
+      <div class="file-row"${dragAttrs(`/api/files/${f.id}/raw`, f.originalName)}>
         <span>${escapeHtml(f.originalName)} <em>(${formatFileSize(f.size)}${f.volume ? `, ${Number(f.volume).toFixed(2)} cm³` : ''})</em></span>
         <span class="row-actions">
           ${sliceButtonHtml('file', f.id, f.format)}
@@ -1050,7 +1051,7 @@ function renderViewerTabs(activeKey) {
   activeItemKey = activeKey;
   renderSlicerBar();
   document.getElementById('detailFileTabs').innerHTML = detailItems.map((item) => `
-    <button class="file-tab${itemKey(item) === activeKey ? ' active' : ''}" data-key="${itemKey(item)}">${escapeHtml(item.name)}</button>`).join('');
+    <button class="file-tab${itemKey(item) === activeKey ? ' active' : ''}" data-key="${itemKey(item)}"${dragAttrs(rawUrlFor(item), item.name)}>${escapeHtml(item.name)}</button>`).join('');
 }
 
 function openViewerItem(item) {
@@ -1116,7 +1117,7 @@ async function loadArchiveEntries(modelId, fileId) {
         const name = e.path.split('/').pop();
         const folder = e.path.replace(/^\.\//, '').slice(0, -name.length);
         return `
-      <div class="entry-row" draggable="true" data-drag-url="/api/entries/${e.id}/raw" data-drag-name="${escapeHtml(name)}">
+      <div class="entry-row"${dragAttrs(`/api/entries/${e.id}/raw`, name)}>
         <span title="${escapeHtml(e.path)}">${escapeHtml(name)}${folder ? `<span class="entry-folder">${escapeHtml(folder)}</span>` : ''} <em>${formatFileSize(e.size)}</em></span>
         <span class="row-actions">
           ${PREVIEWABLE.includes(e.format) && e.format !== 'mtl' ? `<button type="button" class="link-btn" data-view-entry="${e.id}" data-archive="${fileId}">view</button>` : ''}
@@ -1207,6 +1208,13 @@ function handoffItem(kind, id, archiveId) {
 
 function renderSlicerBar() {
   const item = detailItems.find((i) => itemKey(i) === activeItemKey);
+  const handle = document.getElementById('dragOutBtn');
+  handle.hidden = !(item && CAN_DRAG_OUT);
+  if (item) {
+    handle.dataset.dragUrl = rawUrlFor(item);
+    handle.dataset.dragName = item.name;
+    handle.title = `Drag ${item.name} onto your desktop or a folder to save it`;
+  }
   const bar = document.getElementById('slicerBar');
   bar.hidden = !(item && SLICEABLE.includes(item.format));
   const slicer = SLICERS[prefs.slicer];
@@ -1355,6 +1363,13 @@ function handleSaveSlicer(e) {
 // ---------------------------------------------------------------- drag-out
 // Chromium browsers save a dragged element as a file when it carries DownloadURL
 // ("type:name:url"); the download goes through the browser, session included.
+// Safari and Firefox have no equivalent. Only Chromium has navigator.userAgentData.
+const CAN_DRAG_OUT = 'userAgentData' in navigator;
+
+// draggable + data for anything that drags out as a file.
+function dragAttrs(url, name) {
+  return CAN_DRAG_OUT ? ` draggable="true" data-drag-url="${escapeHtml(url)}" data-drag-name="${escapeHtml(name)}"` : '';
+}
 function setDragOut(dataTransfer, { url, name }) {
   dataTransfer.effectAllowed = 'copy';
   dataTransfer.setData('DownloadURL', `application/octet-stream:${String(name).replace(/[:\\/]/g, '-')}:${new URL(url, window.location.origin).href}`);
@@ -1519,12 +1534,12 @@ function renderProjectPanels(item) {
   } else {
     platesEl.hidden = false;
     platesEl.innerHTML = project.plates.map((p) => `
-      <button type="button" class="plate-chip${item.plate === p.index ? ' active' : ''}" data-plate="${p.index}"
+      <button type="button" class="plate-chip${item.plate === p.index ? ' active' : ''}" data-plate="${p.index}"${dragAttrs(rawUrlFor(item), item.name)}
               title="${escapeHtml(p.name || `Plate ${p.index}`)} · ${p.objectCount} object${p.objectCount === 1 ? '' : 's'}">
         ${p.thumbnailUrl ? `<img src="${escapeHtml(p.thumbnailUrl)}" alt="">` : ''}
         <span>${p.index}${p.name ? ` · ${escapeHtml(p.name)}` : ''}</span>
       </button>`).join('')
-      + `<button type="button" class="plate-chip${item.plate ? '' : ' active'}" data-plate="all"><span>All plates</span></button>`;
+      + `<button type="button" class="plate-chip${item.plate ? '' : ' active'}" data-plate="all"${dragAttrs(rawUrlFor(item), item.name)}><span>All plates</span></button>`;
   }
 
   const filaments = ((project && project.filaments) || [])
diff --git a/public/index.html b/public/index.html
index b2f7d25..3ec8380 100644
--- a/public/index.html
+++ b/public/index.html
@@ -425,6 +425,7 @@
                 <button type="button" class="btn btn-primary btn-sm" id="openInSlicerBtn">Open in slicer</button>
                 <button type="button" class="link-btn slicer-change" id="changeSlicerBtn">change slicer</button>
               </span>
+              <button type="button" class="btn btn-secondary btn-sm drag-out-btn" id="dragOutBtn" draggable="true" hidden>⠿ Drag out</button>
               <button type="button" class="btn btn-secondary btn-sm" id="regenThumbBtn">Regenerate thumbnail</button>
             </div>
             <div id="slicerNotice" class="slicer-notice" role="status" hidden></div>
diff --git a/public/styles.css b/public/styles.css
index 8cc7cef..6f62190 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -256,7 +256,8 @@ label { display: block; font-size: 13px; font-weight: 500; color: var(--text-mut
 .file-row:last-child { border-bottom: none; }
 .file-row em { color: var(--text-dim); font-style: normal; font-family: var(--mono); font-size: 12px; }
 .file-row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
-.file-row[draggable="true"], .entry-row[draggable="true"] { cursor: grab; }
+.file-row[draggable="true"], .entry-row[draggable="true"], .drag-out-btn { cursor: grab; }
+.drag-out-btn:active { cursor: grabbing; }
 
 /* ---- slicer hand-off ---- */
 .preview-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }