kingkont 0.7.86 → 0.7.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kingkont",
-  "version": "0.7.86",
+  "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);
     }
@@ -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 };