kingkont 0.7.81 → 0.7.82

package/index.html

@@ -227,6 +227,7 @@
 <!-- ===== Меню «что добавить» (двойной клик на пустом месте холста) ===== -->
 <div class="add-menu hidden" id="addMenu">
   <button data-act="text">✏️ Написать</button>
+  <button data-act="label">🅰 Подпись</button>
   <button data-act="gen-text">📝 Сгенерировать текст</button>
   <button data-act="audio">🎙 Сгенерировать голос</button>
   <button data-act="image">🖼 Сгенерировать картинку</button>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kingkont",
-  "version": "0.7.81",
+  "version": "0.7.82",
   "description": "KingKont · Chatium — нод-редактор сцен с AI-генерацией (картинки/видео/голос/SFX/музыка/текст)",
   "main": "main.js",
   "bin": {

package/renderer/board.js

@@ -1634,6 +1634,7 @@ async function createNodeEl(node) {
   const el = document.createElement('div');
   el.className = 'node';
   if (node.type === 'text') el.classList.add('text-node');
+  if (node.type === 'label') el.classList.add('label-node');
   el.dataset.id = node.id;
   el.style.left = node.x + 'px';
   el.style.top  = node.y + 'px';
@@ -1693,7 +1694,7 @@ async function createNodeEl(node) {
   attachDrag(el, node);
 
   el.addEventListener('dblclick', e => {
-    if (e.target.closest('textarea, input, video, button, .delete, .anchor, .resize-handle')) return;
+    if (e.target.closest('textarea, input, video, button, .delete, .anchor, .resize-handle, [contenteditable]')) return;
     if (node.type === 'audio' && node.file) {
       regenerateNode(node);
       return;
@@ -1705,7 +1706,7 @@ async function createNodeEl(node) {
     if (node.generated) showNodeSettings(node);
   });
   el.addEventListener('contextmenu', e => {
-    if (e.target.closest('textarea, input, .anchor, .resize-handle')) return;
+    if (e.target.closest('textarea, input, .anchor, .resize-handle, [contenteditable]')) return;
     e.preventDefault();
     e.stopPropagation();
     showNodeContextMenu(node, e.clientX, e.clientY);

package/renderer/generate.js

@@ -153,6 +153,11 @@ document.querySelectorAll('#addMenu button').forEach(btn => {
       state.addMenuPos = null;
       return;
     }
+    if (act === 'label') {
+      await addLabelAt(state.addMenuPos);
+      state.addMenuPos = null;
+      return;
+    }
     if (act === 'gen-text') {
       // открываем text-gen modal; если есть fromNode — подставляем @ref в промпт
       if (!await ensureApiKey('text')) return;
@@ -194,6 +199,42 @@ async function addTextAt(pos) {
   scheduleSave();
 }
 
+// Label-нода: лёгкая надпись поверх холста, без файла. Текст хранится
+// прямо в scene.json (см. saveBoardMetadata: для type='label' n.text НЕ
+// удаляется при сериализации).
+async function addLabelAt(pos) {
+  if (!state.currentBoard) return;
+  const rect = canvas.getBoundingClientRect();
+  const x = pos ? (pos.clientX - rect.left) / state.zoom : canvasWrap.scrollLeft / state.zoom + 80;
+  const y = pos ? (pos.clientY - rect.top)  / state.zoom : canvasWrap.scrollTop  / state.zoom + 80;
+  const node = {
+    id: crypto.randomUUID(),
+    type: 'label',
+    text: '',
+    textStyle: { fontSize: 32, italic: false, fontFamily: 'handwritten' },
+    x, y,
+    width: 260, height: 90,
+  };
+  state.currentBoard.metadata.nodes.push(node);
+  const el = await createNodeEl(node);
+  canvas.appendChild(el);
+  scheduleSave();
+  // Авто-фокус в редактируемый текст, чтобы юзер сразу начал печатать.
+  setTimeout(() => {
+    const ed = el.querySelector('.label-text');
+    if (ed) {
+      ed.focus();
+      // Курсор в конец (если контент пустой — это всё равно начало).
+      const sel = window.getSelection();
+      const r = document.createRange();
+      r.selectNodeContents(ed);
+      r.collapse(false);
+      sel?.removeAllRanges();
+      sel?.addRange(r);
+    }
+  }, 30);
+}
+
 // =================== Generate (фоновая, не блокирующая) ===================
 // === Preferences modal (API-ключи) ===
 async function openSettings(initialFocus) {

package/renderer/settings.js

@@ -52,76 +52,69 @@ $('settingsRegen').addEventListener('click', () => {
   regenerateNode(node);  // там редактируются ВСЕ поля (промпт, модель, голос)
 });
 
-// =================== Text-node body (с форматированием) ===================
-// Шрифты — system-only, чтобы не тащить Google Fonts CDN (приложение
-// должно работать офлайн). На macOS все четыре варианта выглядят отлично;
-// на Windows/Linux fallback'и держат смысл (cursive/fantasy/serif/mono).
-const TEXT_NODE_FONTS = [
-  { id: 'default',     label: 'Обычный'        },
-  { id: 'handwritten', label: 'Карандашом'     },
-  { id: 'marker',      label: 'Краской'        },
-  { id: 'serif',       label: 'С засечками'    },
-  { id: 'mono',        label: 'Моноширинный'   },
+// =================== Label-node body (свободный текст-аннотация) ===================
+// Label-нода — это просто текст «поверх» холста: без фона, без рамки,
+// без header/footer. Используется для подписей, заголовков, заметок
+// «карандашом/краской» — в отличие от text-ноды, которая хранит длинный
+// .md-документ с обычным textarea.
+//
+// Шрифты — system-only, без Google Fonts CDN (приложение офлайновое).
+// На macOS все варианты выглядят естественно; на Win/Linux fallback'и
+// (cursive/fantasy/serif/monospace) сохраняют смысл.
+const LABEL_FONTS = [
+  { id: 'default',     label: 'Обычный'      },
+  { id: 'handwritten', label: 'Карандашом'   },
+  { id: 'marker',      label: 'Краской'      },
+  { id: 'serif',       label: 'С засечками'  },
+  { id: 'mono',        label: 'Моноширинный' },
 ];
-const TEXT_NODE_FONT_SIZES = [12, 14, 18, 24, 32, 48, 64];
-const TEXT_NODE_DEFAULT_STYLE = { fontSize: 14, italic: false, fontFamily: 'default' };
-
-function getTextNodeStyle(node) {
-  return { ...TEXT_NODE_DEFAULT_STYLE, ...(node.textStyle || {}) };
-}
+const LABEL_FONT_SIZES = [12, 14, 18, 24, 32, 48, 64, 96];
+const LABEL_DEFAULT_STYLE = { fontSize: 32, italic: false, fontFamily: 'handwritten' };
 
-function applyTextNodeStyle(ta, style) {
-  ta.style.fontSize = (style.fontSize || 14) + 'px';
-  ta.style.fontStyle = style.italic ? 'italic' : 'normal';
-  ta.dataset.font = style.fontFamily || 'default';
+function applyLabelStyle(ed, style) {
+  ed.style.fontSize = (style.fontSize || 32) + 'px';
+  ed.style.fontStyle = style.italic ? 'italic' : 'normal';
+  ed.dataset.font = style.fontFamily || 'default';
 }
 
-function renderTextNodeBody(node, body) {
-  // Гарантируем что у ноды есть textStyle (без spread — реальный объект).
-  if (!node.textStyle) node.textStyle = { ...TEXT_NODE_DEFAULT_STYLE };
+function renderLabelNodeBody(node, body) {
+  if (!node.textStyle) node.textStyle = { ...LABEL_DEFAULT_STYLE };
 
-  // Тулбар форматирования: шрифт, размер, italic.
+  // Тулбар форматирования (на hover, чтобы не отвлекать от чистого текста).
   const tb = document.createElement('div');
-  tb.className = 'text-toolbar';
-  // Не блокируем drag-mousedown по тулбару — но клики по контролам
-  // не должны таскать ноду. stopPropagation на mousedown решает это.
+  tb.className = 'label-toolbar';
   tb.addEventListener('mousedown', e => e.stopPropagation());
 
-  // Селект шрифта.
   const fontSel = document.createElement('select');
   fontSel.title = 'Шрифт';
-  for (const f of TEXT_NODE_FONTS) {
+  for (const f of LABEL_FONTS) {
     const o = document.createElement('option');
-    o.value = f.id;
-    o.textContent = f.label;
+    o.value = f.id; o.textContent = f.label;
     fontSel.appendChild(o);
   }
   fontSel.value = node.textStyle.fontFamily || 'default';
   fontSel.addEventListener('change', () => {
     node.textStyle.fontFamily = fontSel.value;
-    applyTextNodeStyle(ta, node.textStyle);
+    applyLabelStyle(ed, node.textStyle);
     scheduleSave();
   });
   tb.appendChild(fontSel);
 
-  // Селект размера.
   const sizeSel = document.createElement('select');
   sizeSel.title = 'Размер шрифта';
-  for (const s of TEXT_NODE_FONT_SIZES) {
+  for (const s of LABEL_FONT_SIZES) {
     const o = document.createElement('option');
-    o.value = String(s);
-    o.textContent = s + 'px';
+    o.value = String(s); o.textContent = s + 'px';
     sizeSel.appendChild(o);
   }
-  sizeSel.value = String(node.textStyle.fontSize || 14);
+  sizeSel.value = String(node.textStyle.fontSize || 32);
   sizeSel.addEventListener('change', () => {
-    node.textStyle.fontSize = parseInt(sizeSel.value, 10) || 14;
-    applyTextNodeStyle(ta, node.textStyle);
+    node.textStyle.fontSize = parseInt(sizeSel.value, 10) || 32;
+    applyLabelStyle(ed, node.textStyle);
     scheduleSave();
   });
   tb.appendChild(sizeSel);
 
-  // Italic toggle.
   const italicBtn = document.createElement('button');
   italicBtn.className = 'tt-italic';
   italicBtn.textContent = 'I';
@@ -131,20 +124,30 @@ function renderTextNodeBody(node, body) {
     e.stopPropagation();
     node.textStyle.italic = !node.textStyle.italic;
     italicBtn.classList.toggle('active', node.textStyle.italic);
-    applyTextNodeStyle(ta, node.textStyle);
+    applyLabelStyle(ed, node.textStyle);
     scheduleSave();
   });
   tb.appendChild(italicBtn);
 
   body.appendChild(tb);
 
-  const ta = document.createElement('textarea');
-  ta.value = node.text || '';
-  ta.placeholder = 'Текст ноды...';
-  applyTextNodeStyle(ta, node.textStyle);
-  ta.addEventListener('input', () => { node.text = ta.value; scheduleSave(); });
-  ta.addEventListener('mousedown', e => e.stopPropagation());
-  body.appendChild(ta);
+  // Сам текст — contenteditable (без рамок, без скроллбаров, ровно как
+  // плавающая надпись на холсте). plaintext-only — режем форматирование
+  // из буфера обмена (текст копируется только как текст).
+  const ed = document.createElement('div');
+  ed.className = 'label-text';
+  ed.contentEditable = 'plaintext-only';
+  ed.spellcheck = false;
+  ed.dataset.placeholder = 'Текст…';
+  ed.textContent = node.text || '';
+  applyLabelStyle(ed, node.textStyle);
+  ed.addEventListener('input', () => { node.text = ed.textContent; scheduleSave(); });
+  ed.addEventListener('mousedown', e => e.stopPropagation());
+  // Enter — перенос строки. Esc — снять фокус.
+  ed.addEventListener('keydown', e => {
+    if (e.key === 'Escape') { e.preventDefault(); ed.blur(); }
+  });
+  body.appendChild(ed);
 }
 
 async function renderNodeBody(node, body) {
@@ -281,7 +284,14 @@ async function renderNodeBody(node, body) {
   }
 
   if (node.type === 'text') {
-    renderTextNodeBody(node, body);
+    const ta = document.createElement('textarea');
+    ta.value = node.text || '';
+    ta.placeholder = 'Текст ноды...';
+    ta.addEventListener('input', () => { node.text = ta.value; scheduleSave(); });
+    ta.addEventListener('mousedown', e => e.stopPropagation());
+    body.appendChild(ta);
+  } else if (node.type === 'label') {
+    renderLabelNodeBody(node, body);
   } else if (['video','audio','image'].includes(node.type) && node.file) {
     const nodeEl = body.closest('.node');
     nodeEl?.classList.toggle('image-node', node.type === 'image');

package/renderer/state.js

@@ -354,7 +354,9 @@ async function saveBoardMetadata(boardHandle, meta) {
   }
   const nodesForJson = meta.nodes.map(n => {
     const out = { ...n };
-    delete out.text;
+    // Для text-нод текст в отдельном .md, в JSON его не пишем.
+    // Для label-нод — текст inline в JSON (короткие подписи, без файла).
+    if (n.type === 'text') delete out.text;
     return out;
   });
   const payload = {

package/renderer/styles.css

@@ -323,56 +323,96 @@
     box-shadow: 0 0 0 2px #5aa8ff, 0 8px 24px rgba(90,168,255,0.4);
   }
   .node-body { flex: 1; min-height: 0; }
-  .node.text-node .node-body { padding: 0; display: flex; flex-direction: column; }
+  .node.text-node .node-body { padding: 0; display: flex; }
   .node.text-node .node-body textarea {
-    width: 100%; resize: none; min-height: 80px;
+    width: 100%; height: 100%; resize: none; min-height: 80px;
     border: none; border-radius: 0; padding: 12px; flex: 1;
-    background: transparent; color: #eaeaea;
-    font-size: 14px; font-style: normal;
+  }
+
+  /* === Label-node — плавающая текст-аннотация поверх холста ===
+     Без фона / рамки / тени — выглядит как «написанный» прямо на сцене текст.
+     Header / footer / resize / anchor скрыты по умолчанию, появляются на
+     hover чтобы можно было перетаскивать, удалять, ресайзить. */
+  .node.label-node {
+    background: transparent;
+    border: none; box-shadow: none;
+    padding: 0;
+  }
+  .node.label-node.selected {
+    outline: 1px dashed rgba(90,168,255,0.8);
+    outline-offset: 2px;
+  }
+  .node.label-node .node-header,
+  .node.label-node .node-footer,
+  .node.label-node .resize-handle,
+  .node.label-node .anchor,
+  .node.label-node .label-toolbar {
+    opacity: 0; transition: opacity 0.15s;
+  }
+  .node.label-node:hover .node-header,
+  .node.label-node:hover .node-footer,
+  .node.label-node:hover .resize-handle,
+  .node.label-node:hover .anchor,
+  .node.label-node:hover .label-toolbar,
+  .node.label-node:focus-within .label-toolbar { opacity: 1; }
+  .node.label-node .node-header {
+    background: rgba(20,20,20,0.85);
+    border-radius: 6px 6px 0 0;
+  }
+  .node.label-node .node-body {
+    padding: 0; background: transparent;
+    display: flex; flex-direction: column; min-height: 0;
+  }
+
+  /* Тулбар форматирования label — поверх текста, на hover. */
+  .node.label-node .label-toolbar {
+    display: flex; align-items: center; gap: 4px;
+    padding: 3px 6px; background: rgba(20,20,20,0.92);
+    border-radius: 4px; margin: 4px;
+    font-size: 11px; flex-shrink: 0;
+    align-self: flex-start;
+    pointer-events: auto;
+  }
+  .node.label-node .label-toolbar select,
+  .node.label-node .label-toolbar button {
+    background: #1e1e1e; border: 1px solid #383838; color: #ccc;
+    border-radius: 3px; padding: 2px 6px; font-size: 11px;
+    cursor: pointer; line-height: 1.2;
+  }
+  .node.label-node .label-toolbar select:hover,
+  .node.label-node .label-toolbar button:hover { background: #2c2c2c; color: #fff; }
+  .node.label-node .label-toolbar button.active {
+    background: #3a5a8a; color: #fff; border-color: #4a6a9a;
+  }
+  .node.label-node .label-toolbar .tt-italic { font-style: italic; min-width: 22px; }
+
+  /* Сам текст. flex:1 — занимает оставшееся тело, поэтому drag-area
+     совпадает с визуальной областью. */
+  .node.label-node .label-text {
+    flex: 1; padding: 8px 12px;
+    color: #eaeaea; line-height: 1.2;
+    word-break: break-word; white-space: pre-wrap;
+    outline: none; cursor: text;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    line-height: 1.4;
+    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
+  }
+  .node.label-node .label-text:empty::before {
+    content: attr(data-placeholder);
+    color: rgba(200,200,200,0.35);
   }
-  /* Декоративные шрифты для текстовых нод. */
-  .node.text-node .node-body textarea[data-font="handwritten"] {
-    /* «Карандашом» — рукописные шрифты, мягкие, наклонные. */
+  .node.label-node .label-text[data-font="handwritten"] {
     font-family: 'Caveat', 'Marker Felt', 'Bradley Hand', 'Snell Roundhand', cursive;
-    line-height: 1.2;
   }
-  .node.text-node .node-body textarea[data-font="marker"] {
-    /* «Краской/маркером» — крупные мазки, plakat-стиль. */
+  .node.label-node .label-text[data-font="marker"] {
     font-family: 'Permanent Marker', 'Chalkduster', 'Marker Felt', 'Comic Sans MS', fantasy;
     letter-spacing: 0.02em;
   }
-  .node.text-node .node-body textarea[data-font="serif"] {
+  .node.label-node .label-text[data-font="serif"] {
     font-family: Georgia, 'Times New Roman', serif;
   }
-  .node.text-node .node-body textarea[data-font="mono"] {
+  .node.label-node .label-text[data-font="mono"] {
     font-family: ui-monospace, 'SF Mono', Menlo, 'Courier New', monospace;
   }
-
-  /* Тулбар форматирования — компактный, появляется на hover, чтобы не
-     отвлекать когда юзер просто читает. */
-  .node.text-node .text-toolbar {
-    display: flex; align-items: center; gap: 4px;
-    padding: 4px 6px; background: #181818; border-bottom: 1px solid #2a2a2a;
-    font-size: 11px; opacity: 0.35; transition: opacity 0.15s;
-    flex-shrink: 0;
-  }
-  .node.text-node:hover .text-toolbar,
-  .node.text-node .text-toolbar:focus-within { opacity: 1; }
-  .node.text-node .text-toolbar select,
-  .node.text-node .text-toolbar button {
-    background: #1e1e1e; border: 1px solid #383838; color: #ccc;
-    border-radius: 3px; padding: 2px 6px; font-size: 11px;
-    cursor: pointer; line-height: 1.2;
-  }
-  .node.text-node .text-toolbar select:hover,
-  .node.text-node .text-toolbar button:hover { background: #2c2c2c; color: #fff; }
-  .node.text-node .text-toolbar button.active {
-    background: #3a5a8a; color: #fff; border-color: #4a6a9a;
-  }
-  .node.text-node .text-toolbar .tt-spacer { flex: 1; }
-  .node.text-node .text-toolbar .tt-italic { font-style: italic; min-width: 22px; }
   .node.video-node .node-body { padding: 0; overflow: hidden; border-radius: 0 0 8px 8px; }
   .node.video-node .node-body video { width: 100%; height: auto; max-height: none; background: transparent; border-radius: 0; display: block; }
   .audio-speed { display: flex; gap: 2px; margin-top: 6px; }