kingkont 0.7.85 → 0.7.87

package/package.json

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

package/renderer/board.js

@@ -1111,25 +1111,35 @@ function askName(title, placeholder = '', initialValue = '', opts = {}) {
 // Возвращает выбранную строку или null если юзер закрыл.
 // window.prompt() в Electron renderer молча возвращает null — поэтому
 // нельзя использовать его для select-подобных диалогов.
-function askChoice(title, options, currentValue) {
+// askChoice(title, options, currentValue, opts?)
+// opts:
+//   vertical: bool       — стэкаем кнопки вертикально (по умолчанию — flex-wrap)
+//   optionStyles: { [opt]: 'css-string' } — кастомный CSS на кнопку (для preview-эффектов,
+//                          напр. рендер опции «Карандашом» в самом шрифте Karandashom)
+function askChoice(title, options, currentValue, opts = {}) {
   return new Promise(resolve => {
     const overlay = document.createElement('div');
     overlay.className = 'modal';
     overlay.style.cssText = 'position:fixed; inset:0; background:rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center; z-index:9999;';
     const box = document.createElement('div');
-    box.style.cssText = 'background:#222; border:1px solid #444; border-radius:8px; padding:18px 20px; min-width:360px; box-shadow:0 8px 32px rgba(0,0,0,0.6);';
+    box.style.cssText = 'background:#222; border:1px solid #444; border-radius:8px; padding:18px 20px; min-width:360px; max-height:80vh; overflow-y:auto; box-shadow:0 8px 32px rgba(0,0,0,0.6);';
     const h = document.createElement('h3');
     h.textContent = title;
     h.style.cssText = 'margin:0 0 12px; font-size:14px; color:#e0e0e0;';
     box.append(h);
     const grid = document.createElement('div');
-    grid.style.cssText = 'display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px;';
+    grid.style.cssText = opts.vertical
+      ? 'display:flex; flex-direction:column; gap:6px; margin-bottom:14px;'
+      : 'display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px;';
     const close = (val) => { overlay.remove(); resolve(val); };
     for (const opt of options) {
       const b = document.createElement('button');
       b.textContent = opt;
-      b.style.cssText = 'padding:6px 12px; background:#1a1a1a; color:#e0e0e0; border:1px solid #444; border-radius:4px; font-size:13px; cursor:pointer;' +
-        (opt === currentValue ? 'border-color:#7c3aed; background:#2a1a3a;' : '');
+      let css = 'padding:6px 12px; background:#1a1a1a; color:#e0e0e0; border:1px solid #444; border-radius:4px; font-size:13px; cursor:pointer;';
+      if (opts.vertical) css += 'text-align:left;';
+      if (opt === currentValue) css += 'border-color:#7c3aed; background:#2a1a3a;';
+      if (opts.optionStyles?.[opt]) css += opts.optionStyles[opt];
+      b.style.cssText = css;
       b.addEventListener('click', () => close(opt));
       grid.append(b);
     }
@@ -1773,6 +1783,61 @@ function showNodeContextMenu(node, clientX, clientY) {
     menu.appendChild(b);
   };
   add(node.name ? `✏ Переименовать (${node.name})` : '✏ Переименовать', () => renameNode(node));
+  // Label: пункты для смены стиля (шрифт / размер / курсив).
+  // Сделано через ПКМ а не постоянный hover-тулбар, чтобы UI label-ноды
+  // оставался «чистым текстом» без фурнитуры.
+  if (node.type === 'label') {
+    if (!node.textStyle) node.textStyle = { fontSize: 32, italic: false, fontFamily: 'pencil' };
+    const ts = node.textStyle;
+    const curFont = LABEL_FONTS.find(f => f.id === ts.fontFamily) || LABEL_FONTS[0];
+    add(`🔤 Шрифт: ${curFont.label}`, async () => {
+      // Каждая опция в picker'е рендерится в собственно её шрифте — юзер
+      // сразу видит как «Карандашом» / «Прописью» / «Кистью» выглядят.
+      const fontStyles = {};
+      for (const f of LABEL_FONTS) {
+        fontStyles[f.label] = `font-family: ${getLabelFontFamily(f.id)}; font-size: 22px; padding: 8px 14px; line-height: 1.3;`;
+      }
+      const choice = await askChoice(
+        'Шрифт label-ноды',
+        LABEL_FONTS.map(f => f.label),
+        curFont.label,
+        { vertical: true, optionStyles: fontStyles },
+      );
+      if (!choice) return;
+      const picked = LABEL_FONTS.find(f => f.label === choice);
+      if (!picked) return;
+      ts.fontFamily = picked.id;
+      scheduleSave();
+      await refreshNodeDOM(node.id);
+    });
+    add(`📏 Размер: ${ts.fontSize || 32}px`, async () => {
+      // Каждый размер в picker'е рендерится в реальном размере (с лимитом),
+      // чтобы юзер чувствовал «насколько крупно». Также вертикально.
+      const sizeStyles = {};
+      for (const s of LABEL_FONT_SIZES) {
+        const previewSize = Math.min(s, 36);   // не растим окно — лимит превью
+        sizeStyles[s + 'px'] = `font-size: ${previewSize}px; line-height: 1.2; padding: 6px 14px;`;
+      }
+      const choice = await askChoice(
+        'Размер шрифта',
+        LABEL_FONT_SIZES.map(s => s + 'px'),
+        (ts.fontSize || 32) + 'px',
+        { vertical: true, optionStyles: sizeStyles },
+      );
+      if (!choice) return;
+      const n = parseInt(choice, 10);
+      if (Number.isFinite(n)) {
+        ts.fontSize = n;
+        scheduleSave();
+        await refreshNodeDOM(node.id);
+      }
+    });
+    add(ts.italic ? '𝐼 Курсив: вкл' : '𝐼 Курсив: выкл', async () => {
+      ts.italic = !ts.italic;
+      scheduleSave();
+      await refreshNodeDOM(node.id);
+    });
+  }
   add('📋 Логи', () => showNodeLogs(node));
   if (node.generated) add('⚙ Параметры', () => showNodeSettings(node));
   if (node.status === 'generating') {

package/renderer/settings.js

@@ -85,76 +85,80 @@ function applyLabelStyle(ed, style) {
   ed.dataset.font = style.fontFamily || 'default';
 }
 
+// Соответствие label-font-id → CSS font-family stack. Используется для
+// preview-кнопок в picker'e шрифта (askChoice показывает каждую опцию
+// в собственно её шрифте, чтобы юзер видел как выглядит). Семейства
+// должны совпадать с теми, что заданы в .label-text[data-font="..."]
+// в renderer/styles.css.
+function getLabelFontFamily(id) {
+  const map = {
+    default:     '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    pencil:      "'KK Neucha', 'Marker Felt', 'Comic Sans MS', cursive",
+    handwritten: "'KK Caveat', 'Caveat', 'Marker Felt', cursive",
+    brush:       "'KK BadScript', 'Bad Script', 'Snell Roundhand', cursive",
+    marker:      "'KK Pacifico', 'Pacifico', 'Marker Felt', cursive",
+    display:     "'KK Lobster', 'Lobster', Georgia, serif",
+    elegant:     "'KK YesevaOne', 'Yeseva One', Georgia, serif",
+    rounded:     "'KK Comfortaa', 'Comfortaa', -apple-system, sans-serif",
+    serif:       "'KK PTSerif', 'PT Serif', Georgia, serif",
+    mono:        "'KK PTMono', 'PT Mono', ui-monospace, Menlo, monospace",
+  };
+  return map[id] || map.default;
+}
+
 function renderLabelNodeBody(node, body) {
   if (!node.textStyle) node.textStyle = { ...LABEL_DEFAULT_STYLE };
 
-  // Тулбар форматирования (на hover, чтобы не отвлекать от чистого текста).
-  const tb = document.createElement('div');
-  tb.className = 'label-toolbar';
-  tb.addEventListener('mousedown', e => e.stopPropagation());
-
-  const fontSel = document.createElement('select');
-  fontSel.title = 'Шрифт';
-  for (const f of LABEL_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;
-    applyLabelStyle(ed, node.textStyle);
-    scheduleSave();
-  });
-  tb.appendChild(fontSel);
-
-  const sizeSel = document.createElement('select');
-  sizeSel.title = 'Размер шрифта';
-  for (const s of LABEL_FONT_SIZES) {
-    const o = document.createElement('option');
-    o.value = String(s); o.textContent = s + 'px';
-    sizeSel.appendChild(o);
-  }
-  sizeSel.value = String(node.textStyle.fontSize || 32);
-  sizeSel.addEventListener('change', () => {
-    node.textStyle.fontSize = parseInt(sizeSel.value, 10) || 32;
-    applyLabelStyle(ed, node.textStyle);
-    scheduleSave();
-  });
-  tb.appendChild(sizeSel);
-
-  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);
-    applyLabelStyle(ed, node.textStyle);
-    scheduleSave();
-  });
-  tb.appendChild(italicBtn);
-
-  body.appendChild(tb);
-
-  // Сам текст — contenteditable (без рамок, без скроллбаров, ровно как
-  // плавающая надпись на холсте). plaintext-only — режем форматирование
-  // из буфера обмена (текст копируется только как текст).
+  // Сам текст. По умолчанию НЕ contenteditable — обычный <div>. Это значит:
+  //   • single-click = выделение ноды (drag handler из attachDrag)
+  //   • ПКМ        = node-context-menu (ниже добавлены пункты «Шрифт/Размер/Курсив»)
+  //   • dblclick   = вход в режим редактирования
+  //   • blur       = выход из редактирования
+  // Шрифт/размер/курсив меняются через ПКМ (а не через постоянный hover-тулбар),
+  // чтобы UI label-ноды был «чистый текст без фурнитуры».
   const ed = document.createElement('div');
   ed.className = 'label-text';
-  ed.contentEditable = 'plaintext-only';
   ed.spellcheck = false;
-  ed.dataset.placeholder = 'Текст…';
+  ed.dataset.placeholder = 'Двойной клик — редактировать';
   ed.textContent = node.text || '';
   applyLabelStyle(ed, node.textStyle);
+
+  const enterEditMode = () => {
+    if (ed.isContentEditable) return;
+    ed.contentEditable = 'plaintext-only';
+    ed.focus();
+    // Курсор в конец (если контент пустой — это и есть начало).
+    const sel = window.getSelection();
+    const r = document.createRange();
+    r.selectNodeContents(ed);
+    r.collapse(false);
+    sel?.removeAllRanges();
+    sel?.addRange(r);
+  };
+  const exitEditMode = () => {
+    if (!ed.isContentEditable) return;
+    // removeAttribute полностью убирает contenteditable, чтобы
+    // closest('[contenteditable]') в обработчиках вне (dblclick/contextmenu)
+    // не матчился — и ПКМ снова открывал наш node-menu.
+    ed.removeAttribute('contenteditable');
+  };
+
+  ed.addEventListener('dblclick', e => {
+    e.stopPropagation();
+    enterEditMode();
+  });
+  ed.addEventListener('blur', exitEditMode);
   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(); }
   });
+  ed.addEventListener('mousedown', e => {
+    // В edit-режиме: не пускаем drag-обработчик (нужно поставить курсор/выделить текст).
+    if (ed.isContentEditable) e.stopPropagation();
+    // В read-режиме: пузырится — attachDrag-handler (повешен и на label-text)
+    // обработает single-click как «выбрать ноду» и подхватит drag.
+  });
+
   body.appendChild(ed);
 }
 
@@ -711,7 +715,17 @@ function attachResize(el, node, handle) {
 
 function attachDrag(el, node) {
   const header = el.querySelector('.node-header');
-  header.addEventListener('mousedown', e => {
+  // Для label-нод вешаем drag и на сам текст: header скрыт до hover, а
+  // юзер хочет цеплять ноду с любого места видимого текста. В handler'е
+  // пропускаем срабатывание, если label в edit-режиме (см. условие ниже).
+  const sources = [header];
+  if (node.type === 'label') {
+    const lt = el.querySelector('.label-text');
+    if (lt) sources.push(lt);
+  }
+  const handler = e => {
+    // Edit-режим label — не таскаем (контекст редактирования текста).
+    if (e.currentTarget?.classList?.contains('label-text') && e.currentTarget.isContentEditable) return;
     if (e.target.closest('.delete')) return;
     // Multi-select c модификаторами — без drag
     if (e.metaKey || e.ctrlKey || e.shiftKey) {
@@ -848,7 +862,8 @@ function attachDrag(el, node) {
     };
     document.addEventListener('mousemove', onMove);
     document.addEventListener('mouseup', onUp);
-  });
+  };
+  for (const src of sources) if (src) src.addEventListener('mousedown', handler);
 }
 
 // Добавить ноду как клип в указанную дорожку с ripple-вставкой по времени

package/renderer/styles.css

@@ -485,39 +485,12 @@
     position: relative;
   }
 
-  /* Тулбар форматирования — absolute под текстом, hover-only. */
-  .node.label-node .label-toolbar {
-    position: absolute;
-    top: 100%;                   /* под label */
-    left: 0;
-    margin-top: 4px;
-    display: flex; align-items: center; gap: 4px;
-    padding: 3px 6px; background: rgba(20,20,20,0.92);
-    border-radius: 4px;
-    font-size: 11px; flex-shrink: 0;
-    opacity: 0; transition: opacity 0.15s;
-    pointer-events: none;
-    white-space: nowrap;
-    z-index: 10;
-  }
+  /* Тулбар (.label-toolbar) больше не используется — стиль/шрифт меняются
+     через ПКМ. Видимый header показываем только на hover. */
   .node.label-node:hover .node-header,
-  .node.label-node:hover .label-toolbar,
-  .node.label-node:focus-within .node-header,
-  .node.label-node:focus-within .label-toolbar {
+  .node.label-node:focus-within .node-header {
     opacity: 1; 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; }
 
   /* Сам текст — auto-ширина по контенту, до max-width.
      line-height: 1.5 — чтобы descender'ы рукописных шрифтов (Caveat g/p/y,
@@ -539,8 +512,20 @@
   }
   .node.label-node .label-text:empty::before {
     content: attr(data-placeholder);
-    color: rgba(200,200,200,0.35);
+    color: rgba(200,200,200,0.55);
+  }
+  /* Когда label пустая — рисуем подсказывающий dashed-контур, чтобы юзер
+     видел что нода существует (текст-плейсхолдер мог быть не замечен).
+     При наличии текста — никакой рамки, чисто подпись на холсте. */
+  .node.label-node:has(.label-text:empty) {
+    outline: 1px dashed rgba(200,200,200,0.25);
+    outline-offset: 1px;
+    border-radius: 3px;
   }
+  /* Курсор «I-beam» над текстом — на hover показываем «текстуальную
+     природу» ноды, в read-mode сигнал что dblclick → редактировать. */
+  .node.label-node .label-text { cursor: text; }
+  .node.label-node:hover .label-text:not([contenteditable]) { cursor: pointer; }
   /* === Label-шрифты ===
      Все варианты — bundled woff2 (см. assets/fonts/), кириллица поддержана. */
   .node.label-node .label-text[data-font="pencil"] {