kingkont 0.7.79 → 0.7.81

package/package.json

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

package/renderer/settings.js

@@ -52,6 +52,101 @@ $('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: 'Моноширинный'   },
+];
+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 || {}) };
+}
+
+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 renderTextNodeBody(node, body) {
+  // Гарантируем что у ноды есть textStyle (без spread — реальный объект).
+  if (!node.textStyle) node.textStyle = { ...TEXT_NODE_DEFAULT_STYLE };
+
+  // Тулбар форматирования: шрифт, размер, italic.
+  const tb = document.createElement('div');
+  tb.className = 'text-toolbar';
+  // Не блокируем drag-mousedown по тулбару — но клики по контролам
+  // не должны таскать ноду. stopPropagation на mousedown решает это.
+  tb.addEventListener('mousedown', e => e.stopPropagation());
+
+  // Селект шрифта.
+  const fontSel = document.createElement('select');
+  fontSel.title = 'Шрифт';
+  for (const f of TEXT_NODE_FONTS) {
+    const o = document.createElement('option');
+    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);
+    scheduleSave();
+  });
+  tb.appendChild(fontSel);
+
+  // Селект размера.
+  const sizeSel = document.createElement('select');
+  sizeSel.title = 'Размер шрифта';
+  for (const s of TEXT_NODE_FONT_SIZES) {
+    const o = document.createElement('option');
+    o.value = String(s);
+    o.textContent = s + 'px';
+    sizeSel.appendChild(o);
+  }
+  sizeSel.value = String(node.textStyle.fontSize || 14);
+  sizeSel.addEventListener('change', () => {
+    node.textStyle.fontSize = parseInt(sizeSel.value, 10) || 14;
+    applyTextNodeStyle(ta, node.textStyle);
+    scheduleSave();
+  });
+  tb.appendChild(sizeSel);
+
+  // Italic toggle.
+  const italicBtn = document.createElement('button');
+  italicBtn.className = 'tt-italic';
+  italicBtn.textContent = 'I';
+  italicBtn.title = 'Курсив';
+  if (node.textStyle.italic) italicBtn.classList.add('active');
+  italicBtn.addEventListener('click', e => {
+    e.stopPropagation();
+    node.textStyle.italic = !node.textStyle.italic;
+    italicBtn.classList.toggle('active', node.textStyle.italic);
+    applyTextNodeStyle(ta, 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);
+}
+
 async function renderNodeBody(node, body) {
   body.innerHTML = '';
   if (node.status === 'generating') {
@@ -186,12 +281,7 @@ async function renderNodeBody(node, body) {
   }
 
   if (node.type === 'text') {
-    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);
+    renderTextNodeBody(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/styles.css

@@ -323,11 +323,56 @@
     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; }
+  .node.text-node .node-body { padding: 0; display: flex; flex-direction: column; }
   .node.text-node .node-body textarea {
-    width: 100%; height: 100%; resize: none; min-height: 80px;
+    width: 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;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    line-height: 1.4;
+  }
+  /* Декоративные шрифты для текстовых нод. */
+  .node.text-node .node-body textarea[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-стиль. */
+    font-family: 'Permanent Marker', 'Chalkduster', 'Marker Felt', 'Comic Sans MS', fantasy;
+    letter-spacing: 0.02em;
+  }
+  .node.text-node .node-body textarea[data-font="serif"] {
+    font-family: Georgia, 'Times New Roman', serif;
+  }
+  .node.text-node .node-body textarea[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; }
@@ -390,7 +435,6 @@
   .node-footer {
     display: flex; align-items: center; justify-content: center;
     gap: 2px; padding: 4px;
-    border-top: 1px solid #383838;
     font-size: 11px; color: #888;
   }
   .node-footer button {
@@ -897,7 +941,7 @@
   .node.selected { border-color: #6a8aaa; box-shadow: 0 0 0 2px rgba(106,138,170,0.4), 0 4px 12px rgba(0,0,0,0.4); }
   .node.picked { border-color: #f0a040; box-shadow: 0 0 0 2px rgba(240,160,64,0.55), 0 4px 12px rgba(0,0,0,0.4); }
   .node-header {
-    padding: 4px 8px; border-bottom: 1px solid #383838;
+    padding: 4px 8px;
     display: flex; justify-content: space-between; align-items: center; gap: 6px;
     min-height: 22px; cursor: move;
   }