kingkont 0.20.61 → 0.20.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kingkont",
-  "version": "0.20.61",
+  "version": "0.20.62",
   "description": "KingKont \u00b7 Chatium \u2014 \u043d\u043e\u0434-\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u0441\u0446\u0435\u043d \u0441 AI-\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0435\u0439 (\u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438/\u0432\u0438\u0434\u0435\u043e/\u0433\u043e\u043b\u043e\u0441/SFX/\u043c\u0443\u0437\u044b\u043a\u0430/\u0442\u0435\u043a\u0441\u0442)",
   "main": "main.js",
   "bin": {

package/renderer/board.js

@@ -2603,10 +2603,13 @@ async function editNodeDescription(node) {
     if (next == null) return;
     node.description = next;
     scheduleSave();
-    if (typeof ensureNodeDescriptionEl === 'function') ensureNodeDescriptionEl(node);
-    // Перерасчёт node.height — описание участвует в bbox'е (см.
-    // fitNodeHeightToMedia в settings.js → расширяет node.height на descH).
+    // Обновляем inline-description внутри ноды.
     const el = canvas.querySelector(`.node[data-id="${node.id}"]`);
+    const desc = el?.querySelector('.node-description-inline');
+    if (desc) refreshInlineDescription(desc, node);
+    // Подчищаем legacy outside-sidecar (если остался от старых версий).
+    if (typeof removeNodeDescriptionEl === 'function') removeNodeDescriptionEl(node.id);
+    // Перерасчёт node.height — inline-description участвует в chrome'е.
     const media = el?.querySelector('img, video');
     if (typeof fitNodeHeightToMedia === 'function' && el && media) {
         fitNodeHeightToMedia(node, el, media);
@@ -2614,6 +2617,36 @@ async function editNodeDescription(node) {
 }
 window.editNodeDescription = editNodeDescription;
 
+// Inline-description: HTMLElement-helper. Видим только когда у юзера canModify
+// — placeholder «Добавить описание» имеет смысл только если он может его
+// заполнить (в view-only-template-режиме скрываем через CSS body.view-only-
+// mode .node-description-inline.empty).
+function refreshInlineDescription(el, node) {
+    const text = (node.description || '').trim();
+    if (text) {
+        el.classList.remove('empty');
+        if (el.textContent !== text) el.textContent = text;
+    } else {
+        el.classList.add('empty');
+        if (el.textContent !== 'Добавить описание') el.textContent = 'Добавить описание';
+    }
+}
+function attachInlineDescription(el, node) {
+    refreshInlineDescription(el, node);
+    el.addEventListener('mousedown', e => e.stopPropagation());
+    el.addEventListener('click', e => {
+        if (!el.classList.contains('empty')) return;
+        e.stopPropagation();
+        e.preventDefault();
+        editNodeDescription(node);
+    });
+    el.addEventListener('dblclick', e => {
+        e.stopPropagation();
+        e.preventDefault();
+        editNodeDescription(node);
+    });
+}
+
 // Скопировать / вставить настройки сцены (aspectRatio + defaultPrompts).
 // Хранение — in-memory state.clipboardSceneSettings (живёт до closeProject).
 // Юзер: «сделай возможность скопировать настройки из одной сцены в другую».
@@ -4020,6 +4053,19 @@ async function createNodeEl(node) {
         e.stopPropagation();
         deleteNode(node, el);
     });
+    // Описание для image/video — теперь ВНУТРИ .node, как отдельная строка
+    // между body и footer'ом. Раньше был outside-sidecar (.node-description-
+    // outside) на canvas'е, который позиционировался у нижней грани bbox'а —
+    // но при overlap'е соседних нод он визуально naehzhal на соседку (юзер:
+    // «блок описания все еще наезжает на ноду которая лежит выше»). Inline-
+    // вариант подчиняется flex-layout'у .node так же как image-body и
+    // footer-row → не может вылезти за bbox.
+    if (node.type === 'image' || node.type === 'video') {
+        const desc = document.createElement('div');
+        desc.className = 'node-description-inline';
+        attachInlineDescription(desc, node);
+        el.appendChild(desc);
+    }
     if (['image', 'video', 'audio'].includes(node.type) && node.generated) {
         const footer = document.createElement('div');
         footer.className = 'node-footer';
@@ -4115,14 +4161,10 @@ async function createNodeEl(node) {
         e.stopPropagation();
         showNodeContextMenu(node, e.clientX, e.clientY);
     });
-    // Sidecar-описание для image/video — отдельный элемент на canvas'е
-    // (ensureNodeDescriptionEl идемпотентно создаёт/обновляет/удаляет).
-    // Вызывается ЗДЕСЬ, чтобы покрыть все вызовы createNodeEl: renderCanvas
-    // / generate.js (новые ноды) / timeline.js / drawings.js / chat.js.
-    // Передаём el-hint — .node ещё не в canvas DOM (caller сделает appendChild
-    // после return), и без hint'а measure'а .node-footer не сработает →
-    // placeholder перекрыл бы regen-кнопки.
-    if (typeof ensureNodeDescriptionEl === 'function') ensureNodeDescriptionEl(node, el);
+    // Подчищаем legacy outside-sidecar (мог остаться от старой версии этой
+    // же сцены). Текущий рендер описания — inline-блок внутри .node (см.
+    // attachInlineDescription выше; добавляется между body и footer).
+    if (typeof removeNodeDescriptionEl === 'function') removeNodeDescriptionEl(node.id);
     return el;
 }
 // =================== Контекстное меню ноды (ПКМ) ===================

package/renderer/settings.js

@@ -587,105 +587,19 @@ async function renderNodeBody(node, body) {
 // «попробуем показать описание ВНЕ этой ноды, но так чтобы оно с ней
 // перемещалось… совпадало с ней по ширине, а высота — сколько займет текст».
 // Идемпотентно: пересоздаёт DOM, если описание изменилось/добавилось/удалилось.
-function ensureNodeDescriptionEl(node, nodeElHint) {
+// Legacy: outside-sidecar (`.node-description-outside`). Заменён на inline-
+// description ВНУТРИ .node (см. board.js: attachInlineDescription). Сохраняем
+// функцию как no-op (cleanup существующих) для обратной совместимости —
+// другие модули могут вызывать. Inline-блок подчиняется flex-layout'у .node,
+// не выходит за bbox и не наезжает на соседние ноды (юзер: «блок описания все
+// еще наезжает на ноду которая лежит выше»).
+function ensureNodeDescriptionEl(node /* , nodeElHint */) {
   if (!node) return null;
-  const canvasEl = document.getElementById('canvas');
-  if (!canvasEl) return null;
-  if (node.type !== 'image' && node.type !== 'video') {
-    const existing = canvasEl.querySelector(`.node-description-outside[data-desc-for="${node.id}"]`);
-    if (existing) existing.remove();
-    return null;
-  }
-  const text = (node.description || '').trim();
-  // В view-only-режиме (share-link template) placeholder «Добавить описание»
-  // не показываем — он имеет смысл только если юзер может редактировать.
-  const canModify = (typeof state !== 'undefined' && state)
-    ? (state.cloudCanModify !== false)
-    : true;
-  const isPlaceholder = !text;
-  if (isPlaceholder && !canModify) {
-    const existing = canvasEl.querySelector(`.node-description-outside[data-desc-for="${node.id}"]`);
-    if (existing) existing.remove();
-    return null;
-  }
-  // Если description (placeholder ИЛИ filled) спатиально перекрылся бы с
-  // bbox'ом другой ноды — не показываем его. Юзер: «блок описания наезжает
-  // на ноду которая лежит выше». Текст остаётся в node.description, виден
-  // через ПКМ-меню / edit-модалку.
-  if (Array.isArray(state?.currentBoard?.metadata?.nodes)) {
-    const footerHGuess = 28;
-    const descHGuess = isPlaceholder ? 29 : 50;   // filled может быть выше
-    const descTop = node.y + node.height - footerHGuess - descHGuess - 2;
-    const descBot = node.y + node.height;
-    const descLeft = node.x;
-    const descRight = node.x + (node.width || 280);
-    const overlapsOther = state.currentBoard.metadata.nodes.some(m => {
-      if (m.id === node.id) return false;
-      const mW = m.width || 280, mH = m.height || 200;
-      return descLeft < m.x + mW && descRight > m.x
-          && descTop  < m.y + mH && descBot   > m.y;
-    });
-    if (overlapsOther) {
-      const existing = canvasEl.querySelector(`.node-description-outside[data-desc-for="${node.id}"]`);
-      if (existing) existing.remove();
-      return null;
-    }
-  }
-  const sel = `.node-description-outside[data-desc-for="${node.id}"]`;
-  let el = canvasEl.querySelector(sel);
-  if (!el) {
-    el = document.createElement('div');
-    el.className = 'node-description-outside';
-    el.dataset.descFor = node.id;
-    canvasEl.appendChild(el);
-    el.addEventListener('dblclick', e => {
-      e.stopPropagation();
-      e.preventDefault();
-      if (typeof window.editNodeDescription === 'function') {
-        window.editNodeDescription(node);
-      }
-    });
-    el.addEventListener('click', e => {
-      if (!el.classList.contains('empty')) return;
-      e.stopPropagation();
-      e.preventDefault();
-      if (typeof window.editNodeDescription === 'function') {
-        window.editNodeDescription(node);
-      }
-    });
-  }
-  if (isPlaceholder) {
-    el.classList.add('empty');
-    if (el.textContent !== 'Добавить описание') el.textContent = 'Добавить описание';
-  } else {
-    el.classList.remove('empty');
-    if (el.textContent !== text) el.textContent = text;
-  }
-  positionNodeDescriptionEl(node, el, nodeElHint);
-  // Если в этот момент .node ещё не вставлен в canvas — querySelector
-  // вернёт null → footerH=0 → placeholder сел поверх footer'а. Через rAF
-  // делаем повторный pass: к этому моменту caller сделал appendChild,
-  // footer измерим, sidecar сдвинется чуть выше.
-  requestAnimationFrame(() => positionNodeDescriptionEl(node, el));
-  return el;
-}
-function positionNodeDescriptionEl(node, el, nodeElHint) {
-  if (!el) el = document.querySelector(`.node-description-outside[data-desc-for="${node.id}"]`);
-  if (!el) return;
-  const w = node.width || 280;
-  const h = node.height || 200;
-  // У image/video с node.generated есть .node-footer (regen-btn, история ←/→)
-  // — она у нижней грани. Поднимаем sidecar НАД footer'ом на footerH+2
-  // выше — иначе placeholder «Добавить описание» перекрывал бы regen-кнопки
-  // (юзер: «после появления кнопки добавить описание из ноды пропал ряд
-  // кнопок который делал перегенерацию»).
-  const nodeEl = nodeElHint || document.querySelector(`.node[data-id="${node.id}"]`);
-  const footerH = nodeEl?.querySelector('.node-footer')?.offsetHeight || 0;
-  const descH = el.offsetHeight || 0;
-  el.style.left  = node.x + 'px';
-  el.style.top   = (node.y + h - footerH - descH - 2) + 'px';
-  el.style.width = w + 'px';
+  removeNodeDescriptionEl(node.id);
+  return null;
 }
+// Legacy: no-op (inline-блок позиционируется flex-layout'ом).
+function positionNodeDescriptionEl(/* node, el, nodeElHint */) { }
 function removeNodeDescriptionEl(nodeId) {
   const el = document.querySelector(`.node-description-outside[data-desc-for="${nodeId}"]`);
   if (el) el.remove();
@@ -700,36 +614,21 @@ function fitNodeHeightToMedia(node, nodeEl, mediaEl) {
   const natW = mediaEl.naturalWidth || mediaEl.videoWidth || 0;
   const natH = mediaEl.naturalHeight || mediaEl.videoHeight || 0;
   if (!natW || !natH) return;
-  // Chrome — header + footer (если есть). image-node padding=0, ничего не отъедает.
+  // Chrome — header + inline-description + footer (всё что НЕ image-body).
+  // image-node padding=0, ничего не отъедает.
   const headerH = nodeEl.querySelector('.node-header')?.offsetHeight || 0;
   const footerH = nodeEl.querySelector('.node-footer')?.offsetHeight || 0;
-  const chromeH = headerH + footerH;
+  const descInlineH = nodeEl.querySelector('.node-description-inline')?.offsetHeight || 0;
+  const chromeH = headerH + descInlineH + footerH;
   // Берём актуальную width — node.width если задано, иначе текущий offsetWidth.
   const w = node.width || nodeEl.offsetWidth;
   if (!w) return;
-  // Высота описания учитывается ТОЛЬКО когда у ноды есть реальный текст-
-  // описание. Для placeholder'а «Добавить описание» bbox не расширяем —
-  // иначе нижняя грань ноды лезла бы в соседнюю ноду снизу (юзер: «блок
-  // описания все еще наезжает на ноду которая лежит выше»). Placeholder
-  // сидит у нижней грани в любом случае, но без расширения — слегка
-  // перекрывает картинку, что OK для подсказки.
-  const hasRealDesc = !!(node.description && node.description.trim());
-  const descEl = hasRealDesc
-    ? document.querySelector(`.node-description-outside[data-desc-for="${node.id}"]`)
-    : null;
-  const descH = descEl ? descEl.offsetHeight + 4 : 0;   // +4 чтобы зрительно отделять
-  const newH = Math.round(w * (natH / natW) + chromeH + descH);
+  const newH = Math.round(w * (natH / natW) + chromeH);
   // 2px tolerance — не шумим в save/connections при суб-пиксельных колебаниях.
-  if (Math.abs(newH - (node.height || 0)) <= 2) {
-    // Высоту не меняем, но позицию sidecar'а всё равно обновим — а вдруг
-    // описание появилось/изменилось до того как media догрузилось.
-    positionNodeDescriptionEl(node, null, nodeEl);
-    return;
-  }
+  if (Math.abs(newH - (node.height || 0)) <= 2) return;
   node.height = newH;
   nodeEl.style.height = newH + 'px';
   if (typeof renderConnections === 'function') renderConnections();
-  positionNodeDescriptionEl(node, null, nodeEl);
   scheduleSave();
 }
 

package/renderer/styles.css

@@ -110,45 +110,50 @@
     width: 36px; height: 36px; flex-shrink: 0; object-fit: contain;
     background: #1a1a1a; border-radius: 8px; padding: 4px;
   }
-  /* Описание под image/video нодой. Раньше пробовали рендерить ВНУТРИ .node,
-     но image/video задают фиксированный aspect-ratio высоту, а .node клипит
-     overflow (content-visibility:auto + paint-containment) — текст ниже не
-     был виден. Теперь описание — отдельный sibling-элемент на canvas'е
-     (`.node-description-outside`), позиционируется в (node.x, node.y+h+gap),
-     ширина = node.width, высота = auto по контенту. См. ensureNodeDescriptionEl
-     в settings.js (вызывается из renderCanvas / drag / resize / ПКМ-меню). */
-  .node-description-outside {
-    position: absolute;
-    padding: 6px 8px;
+  /* Описание image/video-ноды — отдельная строка ВНУТРИ .node между
+     image-body и footer'ом. Раньше был outside-sidecar на canvas'е, но при
+     overlap'е соседних нод он визуально naehzhal на соседку (юзер: «блок
+     описания все еще наезжает на ноду которая лежит выше»). Inline-блок
+     подчиняется flex-layout'у .node так же как image-body и footer-row →
+     никогда не выходит за bbox.
+     fitNodeHeightToMedia учитывает .node-description-inline в chromeH
+     (header + descInline + footer), так что node.height = aspect-image-H +
+     chromeH. Положение в DOM: header → body → description-inline → footer. */
+  .node-description-inline {
+    padding: 5px 8px;
     background: #1e1e1e; color: #ccc;
-    border-left: 2px solid #4a6a9a; border-radius: 2px;
-    font-size: 12px; line-height: 1.4;
+    border-top: 1px solid #383838;
+    font-size: 12px; line-height: 1.3;
     white-space: pre-wrap; word-wrap: break-word;
     box-sizing: border-box;
     user-select: text; -webkit-user-select: text; cursor: text;
-    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
-    z-index: 2;
-    pointer-events: auto;
+    flex-shrink: 0;
+    /* Если real-описание длиннее, чем разумно для inline-блока — обрезаем
+       и показываем ellipsis. Полный текст — через ПКМ → «Изменить описание»
+       или edit-модалку. */
+    max-height: 4.2em;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
-  /* Placeholder: описание отсутствует, подсказка «Добавить описание».
-     Юзер: «если описания в ноде нет — показывай блок с описанием с текстом
-     'добавить описание'». Стиль приглушённый, чтобы не отвлекать; клик/
-     дабл-клик открывает редактор. В view-only-режиме placeholder не
-     показываем (см. ensureNodeDescriptionEl). */
-  .node-description-outside.empty {
+  /* Placeholder «Добавить описание» — приглушённый italic. В view-only-
+     template-режиме скрываем (placeholder имеет смысл только когда юзер
+     может его заполнить). */
+  .node-description-inline.empty {
     color: #6a6a6a;
     font-style: italic;
-    border-left-color: #3a3a3a;
-    background: #1a1a1a;
-    box-shadow: none;
+    background: transparent;
     cursor: pointer;
-    transition: color 0.12s, border-left-color 0.12s, background 0.12s;
+    transition: color 0.12s, background 0.12s;
   }
-  .node-description-outside.empty:hover {
+  .node-description-inline.empty:hover {
     color: #aac8e6;
-    border-left-color: #4a6a9a;
     background: #1e1e1e;
   }
+  body.view-only-mode .node-description-inline.empty { display: none; }
+  /* Legacy: outside-sidecar теперь не создаётся, но если остался от старой
+     сессии в DOM — прячем. settings.js removeNodeDescriptionEl его удаляет;
+     это дополнительная страховка на случай race condition'ов. */
+  .node-description-outside { display: none !important; }
   /* Legacy: оставляем класс для совместимости (вдруг где-то ещё ссылается). */
   .node .node-description { display: none; }