kingkont 0.7.86 → 0.7.88

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kingkont",
-  "version": "0.7.86",
+  "version": "0.7.88",
   "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);
     }
@@ -1781,7 +1791,18 @@ function showNodeContextMenu(node, clientX, clientY) {
     const ts = node.textStyle;
     const curFont = LABEL_FONTS.find(f => f.id === ts.fontFamily) || LABEL_FONTS[0];
     add(`🔤 Шрифт: ${curFont.label}`, async () => {
-      const choice = await askChoice('Шрифт label-ноды', LABEL_FONTS.map(f => f.label), curFont.label);
+      // Каждая опция в 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;
@@ -1790,7 +1811,19 @@ function showNodeContextMenu(node, clientX, clientY) {
       await refreshNodeDOM(node.id);
     });
     add(`📏 Размер: ${ts.fontSize || 32}px`, async () => {
-      const choice = await askChoice('Размер шрифта', LABEL_FONT_SIZES.map(s => s + 'px'), (ts.fontSize || 32) + 'px');
+      // Каждый размер в 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)) {

package/renderer/settings.js

@@ -85,6 +85,27 @@ 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 };
 
@@ -706,6 +727,12 @@ function attachDrag(el, node) {
     // Edit-режим label — не таскаем (контекст редактирования текста).
     if (e.currentTarget?.classList?.contains('label-text') && e.currentTarget.isContentEditable) return;
     if (e.target.closest('.delete')) return;
+    // Источник mousedown'а: header или label-text. Для label-text НЕ
+    // вызываем preventDefault и canvas.appendChild на mousedown — они
+    // ломают браузерный счётчик кликов и dblclick на label не срабатывает.
+    // Z-promote и preventDefault выполнятся ниже, в onMove, когда drag
+    // реально начнётся (перешёл порог 4px).
+    const sourceIsLabelText = e.currentTarget?.classList?.contains('label-text');
     // Multi-select c модификаторами — без drag
     if (e.metaKey || e.ctrlKey || e.shiftKey) {
       e.preventDefault();
@@ -720,16 +747,18 @@ function attachDrag(el, node) {
       state.selectedNodeIds.add(node.id);
       renderSelection();
     }
-    e.preventDefault();
+    if (!sourceIsLabelText) e.preventDefault();
     const startX = e.clientX, startY = e.clientY;
     const origX = node.x, origY = node.y;
     el.classList.add('selected');
-    canvas.appendChild(el);
     const arr = state.currentBoard.metadata.nodes;
-    const idx = arr.indexOf(node);
-    if (idx >= 0 && idx < arr.length - 1) {
-      arr.splice(idx, 1);
-      arr.push(node);
+    if (!sourceIsLabelText) {
+      canvas.appendChild(el);
+      const idx = arr.indexOf(node);
+      if (idx >= 0 && idx < arr.length - 1) {
+        arr.splice(idx, 1);
+        arr.push(node);
+      }
     }
 
     // Multi-drag: если выделено несколько нод и кликнули по одной из них —
@@ -759,6 +788,18 @@ function attachDrag(el, node) {
     const onMove = ev => {
       const dx = ev.clientX - startX, dy = ev.clientY - startY;
       if (!dragInitialized && Math.hypot(dx, dy) < 4) return;
+      // Первый раз перешли порог — для label-text z-promote отложен сюда,
+      // чтобы не ломать dblclick. Также гасим случайно стартовавший
+      // text-selection в read-режиме.
+      if (!dragInitialized && sourceIsLabelText) {
+        canvas.appendChild(el);
+        const idx = arr.indexOf(node);
+        if (idx >= 0 && idx < arr.length - 1) {
+          arr.splice(idx, 1);
+          arr.push(node);
+        }
+        try { window.getSelection()?.removeAllRanges(); } catch {}
+      }
       dragInitialized = true;
       // Проверяем — курсор над таймлайном?
       const tlTrackEl = document.elementsFromPoint(ev.clientX, ev.clientY)

package/renderer/styles.css

@@ -526,6 +526,17 @@
      природу» ноды, в read-mode сигнал что dblclick → редактировать. */
   .node.label-node .label-text { cursor: text; }
   .node.label-node:hover .label-text:not([contenteditable]) { cursor: pointer; }
+  /* В read-режиме блокируем text-selection — чтобы single-click не выделял
+     слово, и mousedown без preventDefault (для работы dblclick) не давал
+     браузеру стартовать selection-drag. В edit-режиме выделение разрешено. */
+  .node.label-node .label-text:not([contenteditable]) {
+    user-select: none;
+    -webkit-user-select: none;
+  }
+  .node.label-node .label-text[contenteditable] {
+    user-select: text;
+    -webkit-user-select: text;
+  }
   /* === Label-шрифты ===
      Все варианты — bundled woff2 (см. assets/fonts/), кириллица поддержана. */
   .node.label-node .label-text[data-font="pencil"] {