kingkont 0.8.7 → 0.9.0

package/renderer/templates.js

@@ -21,21 +21,60 @@
 //   5. Записать scene.json
 //   6. selectBoard(новый board)
 
+// Прогресс upload/download шаблонов. Дублирует значение в двух местах:
+// (а) штатный прогресс-бар внутри templates-модалки — виден когда юзер
+//     активно работает с библиотекой; (б) фиксированный toast в верху
+//     экрана — виден всегда, в т.ч. когда юзер открыл шаблон проекта
+//     с welcome-screen и templates-модалка не открыта.
 const TPL_PROGRESS = {
   el: () => document.getElementById('tplProgress'),
   label: () => document.getElementById('tplProgressLabel'),
   bar: () => document.getElementById('tplProgressBar'),
+  toast: () => {
+    let t = document.getElementById('tplToast');
+    if (t) return t;
+    // Лениво создаём toast — div поверх всего, fixed top-center.
+    t = document.createElement('div');
+    t.id = 'tplToast';
+    t.style.cssText =
+      'position:fixed; top:16px; left:50%; transform:translateX(-50%);' +
+      'background:#1a1a1a; border:1px solid #3a3a3a; border-radius:8px;' +
+      'padding:10px 14px; box-shadow:0 8px 28px rgba(0,0,0,0.6);' +
+      'z-index:99999; min-width:340px; max-width:600px; display:none;';
+    t.innerHTML =
+      '<div id="tplToastLabel" style="font-size:12px; color:#ddd; margin-bottom:6px;"></div>' +
+      '<div style="width:100%; height:6px; background:#333; border-radius:3px; overflow:hidden;">' +
+      '<div id="tplToastBar" style="width:0; height:100%; background:#3a5a8a; transition:width 0.2s;"></div>' +
+      '</div>';
+    document.body.appendChild(t);
+    return t;
+  },
   show(label) {
-    TPL_PROGRESS.el().classList.remove('hidden');
-    TPL_PROGRESS.label().textContent = label;
-    TPL_PROGRESS.bar().style.width = '0%';
+    if (TPL_PROGRESS.el()) {
+      TPL_PROGRESS.el().classList.remove('hidden');
+      TPL_PROGRESS.label().textContent = label;
+      TPL_PROGRESS.bar().style.width = '0%';
+    }
+    const t = TPL_PROGRESS.toast();
+    t.style.display = 'block';
+    document.getElementById('tplToastLabel').textContent = label;
+    document.getElementById('tplToastBar').style.width = '0%';
   },
   update(done, total, label) {
-    if (label) TPL_PROGRESS.label().textContent = label;
     const pct = total > 0 ? Math.round((done / total) * 100) : 0;
-    TPL_PROGRESS.bar().style.width = pct + '%';
+    if (TPL_PROGRESS.el()) {
+      if (label) TPL_PROGRESS.label().textContent = label;
+      TPL_PROGRESS.bar().style.width = pct + '%';
+    }
+    const t = TPL_PROGRESS.toast();
+    if (label) document.getElementById('tplToastLabel').textContent = label;
+    document.getElementById('tplToastBar').style.width = pct + '%';
+  },
+  hide() {
+    if (TPL_PROGRESS.el()) TPL_PROGRESS.el().classList.add('hidden');
+    const t = document.getElementById('tplToast');
+    if (t) t.style.display = 'none';
   },
-  hide() { TPL_PROGRESS.el().classList.add('hidden'); },
 };
 
 function tplStatus(msg, isError) {
@@ -77,7 +116,15 @@ async function refreshTemplatesList() {
       throw new Error(err.error || `HTTP ${r.status}`);
     }
     const data = await r.json();
-    const items = Array.isArray(data) ? data : (data.items || data.templates || []);
+    let items = Array.isArray(data) ? data : (data.items || data.templates || []);
+    // Скрываем scene/character/location-шаблоны — оставляем ТОЛЬКО проекты.
+    // (Раньше при открытом проекте можно было добавить scene-шаблон как
+    //  новую сцену. Сейчас концепция упрощается до cloud-projects, но код
+    //  scene-templates оставлен — может пригодиться позже.)
+    items = items.filter(t => t.kind === 'project');
+    // Когда проект открыт — open-project-template создаст НОВЫЙ проект,
+    // что в этот момент бессмысленно. Скрываем всё.
+    if (state.filmHandle) items = [];
     renderTemplatesList(items);
   } catch (e) {
     list.innerHTML = '';
@@ -135,18 +182,27 @@ function renderTemplatesList(items) {
       openBtn.title = 'Выбрать папку и развернуть в неё проект';
       openBtn.addEventListener('click', () => openProjectTemplate(t.id, t.name));
     } else {
-      openBtn.disabled = !state.filmHandle;
-      openBtn.title = state.filmHandle ? 'Скачать локально и открыть как новую сцену' : 'Сначала открой проект';
+      // Scene-templates: при открытом проекте — добавляются board'ом внутрь;
+      // без проекта (welcome-screen) — создаётся новый проект с одной этой
+      // сценой (см. openTemplate: ветка createdNewProject).
+      openBtn.disabled = false;
+      openBtn.title = state.filmHandle
+        ? 'Скачать локально и открыть как новую сцену'
+        : 'Создать новый проект с этой сценой';
       openBtn.addEventListener('click', () => openTemplate(t.id, t.name));
     }
 
-    const delBtn = document.createElement('button');
-    delBtn.className = 'danger';
-    delBtn.textContent = '🗑';
-    delBtn.title = 'Удалить шаблон';
-    delBtn.addEventListener('click', () => deleteTemplateConfirm(t.id, t.name));
-
-    card.append(info, openBtn, delBtn);
+    card.append(info, openBtn);
+    // Корзина — для своих шаблонов и для админов (canModify приходит с
+    // сервера, см. canModifyTemplate в spaces/server/api/templates.ts).
+    if (t.canModify || t.mine) {
+      const delBtn = document.createElement('button');
+      delBtn.className = 'danger';
+      delBtn.textContent = '🗑';
+      delBtn.title = t.mine ? 'Удалить свой шаблон' : 'Удалить шаблон (admin)';
+      delBtn.addEventListener('click', () => deleteTemplateConfirm(t.id, t.name));
+      card.appendChild(delBtn);
+    }
     list.appendChild(card);
   }
 }
@@ -272,9 +328,42 @@ async function saveCurrentProjectAsTemplate() {
     alert('Сначала открой проект');
     return;
   }
-  const defaultName = state.filmHandle.name || 'Проект';
-  const name = await askName('Имя шаблона проекта:', defaultName, defaultName, { okText: 'Сохранить' });
-  if (!name) return;
+
+  // Меta — может содержать templateId (если проект из шаблона) и fileHashes.
+  const meta = (await readProjectMeta(state.filmHandle)) || {};
+
+  // Если проект из шаблона + юзер автор (или админ) → предлагаем выбор.
+  // canModify приходит с сервера: ownerId === userId OR ctx.account.is('Admin').
+  let updateExisting = null; // template object или null
+  if (meta.templateId) {
+    try {
+      const r = await fetch(`/api/templates/${encodeURIComponent(meta.templateId)}`);
+      if (r.ok) {
+        const tpl = await r.json();
+        if (tpl.canModify) updateExisting = tpl;
+      }
+    } catch {}
+  }
+
+  let mode = 'create'; // 'create' | 'update'
+  let name;
+  if (updateExisting) {
+    const choice = await askChoice(
+      'Сохранить шаблон проекта',
+      [`Обновить «${updateExisting.name}»`, 'Создать новый шаблон'],
+      `Обновить «${updateExisting.name}»`,
+    );
+    if (!choice) return;
+    if (choice.startsWith('Обновить')) {
+      mode = 'update';
+      name = updateExisting.name;
+    }
+  }
+  if (mode === 'create') {
+    const defaultName = state.filmHandle.name || 'Проект';
+    name = await askName('Имя шаблона проекта:', defaultName, defaultName, { okText: 'Сохранить' });
+    if (!name) return;
+  }
 
   const modal = document.getElementById('templatesModal');
   if (modal) modal.classList.remove('hidden');
@@ -284,33 +373,43 @@ async function saveCurrentProjectAsTemplate() {
   tplStatus('');
 
   try {
-    // 1. Собираем все board'ы (characters / locations / episodes).
+    // 1. Собираем все board'ы.
     const allBoards = await collectProjectBoards(state.filmHandle);
     if (!allBoards.length) {
       throw new Error('В проекте нет ни одной сцены/персонажа/локации');
     }
 
-    // 2. Считаем общее число файлов для прогресса.
     const totalFiles = allBoards.reduce((sum, b) => sum + b.mediaFiles.length, 0);
     let uploadedTotal = 0;
+    let reusedTotal = 0; // dedup'нутые из meta.fileHashes
+    const oldHashes = meta.fileHashes || {};
+    const newHashes = {}; // обновлённый кэш для записи обратно в meta
 
-    // 3. Для каждого board'а — читаем manifest, загружаем файлы, копим
-    //    структуру { kind, name, manifest, files: {relPath: cdnUrl} }.
+    // 2. Для каждого board'а — собираем boardsPayload с files map.
     const boardsPayload = [];
     for (const b of allBoards) {
       let manifest = {};
       try {
         const sceneFh = await b.handle.getFileHandle('scene.json');
         manifest = JSON.parse(await (await sceneFh.getFile()).text());
-      } catch {
-        // Без scene.json пропускаем — это не board.
-        continue;
-      }
+      } catch { continue; }
       const filesMap = {};
       for (const f of b.mediaFiles) {
+        const blob = await f.fileHandle.getFile();
+        const metaKey = `${b.kind}/${b.name}/${f.relPath}`;
+        const cached = oldHashes[metaKey];
+        // Dedup: если файл не менялся (size + mtime совпадают) — переиспользуем CDN-URL.
+        if (cached && cached.size === blob.size && cached.mtime === blob.lastModified) {
+          filesMap[f.relPath] = cached.url;
+          newHashes[metaKey] = cached;
+          reusedTotal++;
+          uploadedTotal++;
+          TPL_PROGRESS.update(uploadedTotal, totalFiles,
+            `[${b.kind}/${b.name}] ${f.relPath} (cached, ${uploadedTotal}/${totalFiles})`);
+          continue;
+        }
         TPL_PROGRESS.update(uploadedTotal, totalFiles,
           `[${b.kind}/${b.name}] ${f.relPath} (${uploadedTotal + 1}/${totalFiles})`);
-        const blob = await f.fileHandle.getFile();
         const r = await fetch('/api/upload', {
           method: 'POST',
           headers: {
@@ -325,42 +424,68 @@ async function saveCurrentProjectAsTemplate() {
         }
         const { url } = await r.json();
         filesMap[f.relPath] = url;
+        newHashes[metaKey] = { url, size: blob.size, mtime: blob.lastModified };
         uploadedTotal++;
       }
-      boardsPayload.push({
-        kind: b.kind,
-        name: b.name,
-        manifest,
-        files: filesMap,
-      });
+      boardsPayload.push({ kind: b.kind, name: b.name, manifest, files: filesMap });
     }
 
     TPL_PROGRESS.update(uploadedTotal, totalFiles, 'Загрузка обложки…');
     const coverUrl = await uploadProjectCoverIfAny();
-    TPL_PROGRESS.update(uploadedTotal, totalFiles, 'Регистрация шаблона проекта…');
 
-    // 4. POST /api/templates с kind='project' и manifest.boards = [...].
-    const r = await fetch('/api/templates', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        name,
-        kind: 'project',
-        manifest: {
-          boards: boardsPayload,
-          projectName: state.filmHandle.name,
-          ...(coverUrl ? { coverUrl } : {}),
-        },
-        files: {},  // всё внутри manifest.boards[i].files
-      }),
-    });
-    if (!r.ok) {
-      const err = await r.json().catch(() => ({}));
-      throw new Error(err.error || `HTTP ${r.status}`);
+    const body = {
+      name,
+      kind: 'project',
+      manifest: {
+        boards: boardsPayload,
+        projectName: state.filmHandle.name,
+        ...(coverUrl ? { coverUrl } : {}),
+      },
+      files: {},
+    };
+
+    let resultId;
+    if (mode === 'update') {
+      TPL_PROGRESS.update(uploadedTotal, totalFiles, `Обновление «${updateExisting.name}»…`);
+      const r = await fetch(`/api/templates/${encodeURIComponent(updateExisting.id)}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+      if (!r.ok) {
+        const err = await r.json().catch(() => ({}));
+        throw new Error(err.error || `HTTP ${r.status}`);
+      }
+      resultId = updateExisting.id;
+    } else {
+      TPL_PROGRESS.update(uploadedTotal, totalFiles, 'Регистрация шаблона проекта…');
+      const r = await fetch('/api/templates', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+      if (!r.ok) {
+        const err = await r.json().catch(() => ({}));
+        throw new Error(err.error || `HTTP ${r.status}`);
+      }
+      const created = await r.json();
+      resultId = created.id;
     }
 
+    // Обновляем meta-файл — сохраняем новый templateId (или подтверждаем
+    // существующий) + актуальный fileHashes для следующего save.
+    await writeProjectMeta(state.filmHandle, {
+      version: 1,
+      templateId: resultId,
+      templateName: name,
+      savedAt: Date.now(),
+      fileHashes: newHashes,
+    });
+
     TPL_PROGRESS.hide();
-    tplStatus(`Шаблон проекта «${name}» сохранён (${allBoards.length} board'ов, ${totalFiles} файл${totalFiles === 1 ? '' : 'ов'})`);
+    const reusedNote = reusedTotal ? `, ${reusedTotal} переиспользовано из кэша` : '';
+    const action = mode === 'update' ? 'обновлён' : 'сохранён';
+    tplStatus(`Шаблон проекта «${name}» ${action} (${allBoards.length} board'ов, ${totalFiles} файл${totalFiles === 1 ? '' : 'ов'}${reusedNote})`);
     await refreshTemplatesList();
   } catch (e) {
     TPL_PROGRESS.hide();
@@ -411,20 +536,58 @@ async function collectProjectBoards(filmHandle) {
   return validBoards;
 }
 
+// Guard от повторного входа: showDirectoryPicker валится с
+// «File picker already active» если юзер быстро кликнул карточку
+// дважды или если предыдущий picker ещё не закрылся.
+let _openProjectTplInFlight = false;
+
+// =================== Meta-файл проекта ===================
+// `<project>/.kingkont-meta.json` хранит:
+//   { templateId, templateName, fileHashes: { relPath: { url, size, mtime } } }
+// Используется для:
+//   • проверки «можно ли обновить шаблон» (templateId известен)
+//   • dedup-а при повторной заливке (если файл не менялся — переиспользуем
+//     CDN-URL вместо загрузки)
+const META_FILE = '.kingkont-meta.json';
+
+async function readProjectMeta(filmHandle) {
+  if (!filmHandle) return null;
+  try {
+    const fh = await filmHandle.getFileHandle(META_FILE);
+    const txt = await (await fh.getFile()).text();
+    return JSON.parse(txt);
+  } catch { return null; }
+}
+
+async function writeProjectMeta(filmHandle, meta) {
+  if (!filmHandle) return;
+  try {
+    const fh = await filmHandle.getFileHandle(META_FILE, { create: true });
+    const w = await fh.createWritable();
+    await w.write(JSON.stringify(meta, null, 2));
+    await w.close();
+  } catch (e) {
+    console.warn('writeProjectMeta failed:', e?.message || e);
+  }
+}
+
 // =================== Open project template ===================
 // Просим юзера выбрать parent-папку. Создаём в ней новую папку с именем
 // проекта. Скачиваем все boards со всеми files. Открываем filmHandle.
 async function openProjectTemplate(templateId, suggestedName) {
+  if (_openProjectTplInFlight) return;
   if (typeof window.showDirectoryPicker !== 'function') {
     alert('Браузер не поддерживает выбор папки. Открой проект через File-System-Access.');
     return;
   }
 
+  _openProjectTplInFlight = true;
   // 1. Парент-папка от юзера.
   let parentHandle;
   try {
     parentHandle = await window.showDirectoryPicker({ mode: 'readwrite' });
   } catch (e) {
+    _openProjectTplInFlight = false;
     if (e.name === 'AbortError') return; // юзер закрыл диалог
     alert('Не удалось выбрать папку: ' + e.message);
     return;
@@ -437,7 +600,7 @@ async function openProjectTemplate(templateId, suggestedName) {
     suggestedName || '',
     { okText: 'Создать и открыть' },
   );
-  if (!projectName) return;
+  if (!projectName) { _openProjectTplInFlight = false; return; }
 
   TPL_PROGRESS.show('Получение шаблона…');
   tplStatus('');
@@ -461,6 +624,9 @@ async function openProjectTemplate(templateId, suggestedName) {
     let downloadedTotal = 0;
 
     // 5. Для каждого board'а — создаём папку, качаем файлы, пишем scene.json.
+    // По ходу собираем fileHashes для meta — `<kind>/<board>/<relPath>` → cdnUrl.
+    // (size/mtime читаем из созданного файла после write — нужно для dedup.)
+    const fileHashes = {};
     for (const b of boards) {
       let parent = filmHandle;
       if (b.kind === 'character') {
@@ -479,12 +645,31 @@ async function openProjectTemplate(templateId, suggestedName) {
         if (!fr.ok) throw new Error(`download ${b.name}/${relPath}: HTTP ${fr.status}`);
         const buf = await fr.arrayBuffer();
         await writeBoardFile(boardHandle, relPath, new Uint8Array(buf));
+        // Запомним size+mtime для dedup'а при следующем save.
+        try {
+          const parts = relPath.split('/');
+          let dh = boardHandle;
+          for (let i = 0; i < parts.length - 1; i++) dh = await dh.getDirectoryHandle(parts[i]);
+          const fh = await dh.getFileHandle(parts[parts.length - 1]);
+          const f = await fh.getFile();
+          const key = `${b.kind}/${b.name}/${relPath}`;
+          fileHashes[key] = { url: cdnUrl, size: f.size, mtime: f.lastModified };
+        } catch {}
         downloadedTotal++;
       }
       // scene.json — manifest board'а.
       await writeBoardFile(boardHandle, 'scene.json', JSON.stringify(b.manifest || {}, null, 2));
     }
 
+    // Meta: запоминаем шаблон-источник + размеры/мтайм всех файлов для dedup'а.
+    await writeProjectMeta(filmHandle, {
+      version: 1,
+      templateId: tpl.id,
+      templateName: tpl.name || '',
+      downloadedAt: Date.now(),
+      fileHashes,
+    });
+
     // 6. Открываем созданный проект.
     TPL_PROGRESS.update(totalFiles, totalFiles, 'Открытие проекта…');
     // Чистим stale lastBoard:<name> — иначе если у юзера раньше был
@@ -513,20 +698,59 @@ async function openProjectTemplate(templateId, suggestedName) {
     TPL_PROGRESS.hide();
     tplStatus('Ошибка открытия проекта: ' + e.message, true);
     console.error('open project template failed', e);
+  } finally {
+    _openProjectTplInFlight = false;
   }
 }
 
 // =================== Open template (download all files + create board) ===================
+// Если есть открытый проект — board создаётся внутри него.
+// Если проекта нет (welcome-screen) — просим выбрать parent-папку, создаём
+// новый проект с одной сценой/персонажем/локацией из шаблона, открываем.
 async function openTemplate(templateId, suggestedName) {
-  if (!state.filmHandle) { alert('Сначала открой проект'); return; }
+  // Welcome-flow: создаём новый проект под одну сцену.
+  let createdNewProject = false;
+  if (!state.filmHandle) {
+    if (typeof window.showDirectoryPicker !== 'function') {
+      alert('Браузер не поддерживает выбор папки.'); return;
+    }
+    let parentHandle;
+    try {
+      parentHandle = await window.showDirectoryPicker({ mode: 'readwrite' });
+    } catch (e) {
+      if (e.name === 'AbortError') return;
+      alert('Не удалось выбрать папку: ' + e.message);
+      return;
+    }
+    const projectName = await askName(
+      'Имя нового проекта:',
+      suggestedName || 'Из шаблона',
+      suggestedName || '',
+      { okText: 'Создать' },
+    );
+    if (!projectName) return;
+    try {
+      const filmHandle = await parentHandle.getDirectoryHandle(projectName, { create: true });
+      try { localStorage.removeItem(`lastBoard:${projectName}`); } catch {}
+      await openFilm(filmHandle);
+      createdNewProject = true;
+    } catch (e) {
+      alert('Не удалось создать папку проекта: ' + e.message);
+      return;
+    }
+  }
 
   // 1. Спросить имя нового board'а в текущем проекте.
-  const name = await askName(
-    'Имя для скачанной сцены:',
-    suggestedName || 'из шаблона',
-    suggestedName || '',
-    { okText: 'Скачать и открыть' },
-  );
+  // Если только что создали проект — имя сцены берём из шаблона без вопроса
+  // (юзер уже задал имя проекта, лишний диалог раздражает).
+  const name = createdNewProject
+    ? (suggestedName || 'Сцена 1')
+    : await askName(
+        'Имя для скачанной сцены:',
+        suggestedName || 'из шаблона',
+        suggestedName || '',
+        { okText: 'Скачать и открыть' },
+      );
   if (!name) return;
 
   TPL_PROGRESS.show('Получение шаблона…');