kingkont 0.7.82 → 0.7.84

package/assets/fonts/NOTICE.md

@@ -0,0 +1,19 @@
+# Bundled fonts
+
+All fonts in this directory are licensed under the SIL Open Font License v1.1
+(<https://openfontlicense.org/>) and bundled here so KingKont can render
+beautiful Cyrillic-aware label nodes without needing a network connection.
+
+| Font          | Author / Foundry                      | Source                                           |
+|---------------|----------------------------------------|--------------------------------------------------|
+| Caveat        | Pablo Impallari                        | <https://fonts.google.com/specimen/Caveat>       |
+| Bad Script    | Roman Shchyukin (Gaslight)            | <https://fonts.google.com/specimen/Bad+Script>   |
+| Pacifico      | Vernon Adams                           | <https://fonts.google.com/specimen/Pacifico>     |
+| Lobster       | Pablo Impallari                        | <https://fonts.google.com/specimen/Lobster>      |
+| Yeseva One    | Jovanny Lemonad                        | <https://fonts.google.com/specimen/Yeseva+One>   |
+| Comfortaa     | Johan Aakerlund                        | <https://fonts.google.com/specimen/Comfortaa>    |
+| PT Serif      | ParaType                               | <https://fonts.google.com/specimen/PT+Serif>     |
+| PT Mono       | ParaType                               | <https://fonts.google.com/specimen/PT+Mono>      |
+
+Files were downloaded from the @fontsource jsDelivr mirror in the
+`cyrillic-400-normal` and `latin-400-normal` subsets.

package/package.json

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

package/renderer/board.js

@@ -1638,8 +1638,14 @@ async function createNodeEl(node) {
   el.dataset.id = node.id;
   el.style.left = node.x + 'px';
   el.style.top  = node.y + 'px';
-  if (node.width)  el.style.width  = node.width + 'px';
-  if (node.height) el.style.height = node.height + 'px';
+  // Label-ноды всегда auto-размер (по тексту) — фиксированный width/height
+  // создавал «невидимые боксы» вокруг текста, что ломало hit-testing когда
+  // несколько label оказывались рядом (клик попадал в перекрывающий, а не
+  // в видимый текст). Игнорируем сохранённые width/height для label-нод.
+  if (node.type !== 'label') {
+    if (node.width)  el.style.width  = node.width + 'px';
+    if (node.height) el.style.height = node.height + 'px';
+  }
 
   const header = document.createElement('div');
   header.className = 'node-header';

package/renderer/generate.js

@@ -213,7 +213,8 @@ async function addLabelAt(pos) {
     text: '',
     textStyle: { fontSize: 32, italic: false, fontFamily: 'handwritten' },
     x, y,
-    width: 260, height: 90,
+    // width/height не задаём — label всегда auto-размер по тексту
+    // (см. createNodeEl: для type='label' inline-style не применяется).
   };
   state.currentBoard.metadata.nodes.push(node);
   const el = await createNodeEl(node);

package/renderer/settings.js

@@ -61,12 +61,19 @@ $('settingsRegen').addEventListener('click', () => {
 // Шрифты — system-only, без Google Fonts CDN (приложение офлайновое).
 // На macOS все варианты выглядят естественно; на Win/Linux fallback'и
 // (cursive/fantasy/serif/monospace) сохраняют смысл.
+// id хранится в node.textStyle.fontFamily, поэтому переименовывать существующие
+// id (`handwritten` / `marker` / `serif` / `mono`) нельзя — это сломает
+// сохранённые сцены. Новые красивые шрифты добавляем под новыми id.
 const LABEL_FONTS = [
   { id: 'default',     label: 'Обычный'      },
-  { id: 'handwritten', label: 'Карандашом'   },
-  { id: 'marker',      label: 'Краской'      },
-  { id: 'serif',       label: 'С засечками'  },
-  { id: 'mono',        label: 'Моноширинный' },
+  { id: 'handwritten', label: 'Карандашом'   }, // Caveat
+  { id: 'brush',       label: 'Скорописью'   }, // Bad Script
+  { id: 'marker',      label: 'Кистью'       }, // Pacifico
+  { id: 'display',     label: 'Декор'        }, // Lobster
+  { id: 'elegant',     label: 'Элегант'      }, // Yeseva One
+  { id: 'rounded',     label: 'Округлый'     }, // Comfortaa
+  { id: 'serif',       label: 'С засечками'  }, // PT Serif
+  { id: 'mono',        label: 'Моноширинный' }, // PT Mono
 ];
 const LABEL_FONT_SIZES = [12, 14, 18, 24, 32, 48, 64, 96];
 const LABEL_DEFAULT_STYLE = { fontSize: 32, italic: false, fontFamily: 'handwritten' };

package/renderer/styles.css

@@ -1,3 +1,88 @@
+  /* === Bundled fonts (для label-нод, поддерживают кириллицу) ===
+     Все шрифты — OFL, лежат в assets/fonts/, см. NOTICE.md.
+     Для каждого семейства подключены два subset-файла (Latin + Cyrillic)
+     с unicode-range — браузер скачивает только тот блок, который нужен. */
+  @font-face {
+    font-family: 'KK Caveat'; font-style: normal; font-weight: 400; font-display: block;
+    src: url('../assets/fonts/caveat-cyrillic-400.woff2') format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  @font-face {
+    font-family: 'KK Caveat'; font-style: normal; font-weight: 400; font-display: block;
+    src: url('../assets/fonts/caveat-latin-400.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  @font-face {
+    font-family: 'KK BadScript'; font-style: normal; font-weight: 400; font-display: block;
+    src: url('../assets/fonts/bad-script-cyrillic-400.woff2') format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  @font-face {
+    font-family: 'KK BadScript'; font-style: normal; font-weight: 400; font-display: block;
+    src: url('../assets/fonts/bad-script-latin-400.woff2') format('woff2');
+    unicode-range: U+0000-00FF;
+  }
+  @font-face {
+    font-family: 'KK Pacifico'; font-style: normal; font-weight: 400; font-display: block;
+    src: url('../assets/fonts/pacifico-cyrillic-400.woff2') format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  @font-face {
+    font-family: 'KK Pacifico'; font-style: normal; font-weight: 400; font-display: block;
+    src: url('../assets/fonts/pacifico-latin-400.woff2') format('woff2');
+    unicode-range: U+0000-00FF;
+  }
+  @font-face {
+    font-family: 'KK Lobster'; font-style: normal; font-weight: 400; font-display: block;
+    src: url('../assets/fonts/lobster-cyrillic-400.woff2') format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  @font-face {
+    font-family: 'KK Lobster'; font-style: normal; font-weight: 400; font-display: block;
+    src: url('../assets/fonts/lobster-latin-400.woff2') format('woff2');
+    unicode-range: U+0000-00FF;
+  }
+  @font-face {
+    font-family: 'KK YesevaOne'; font-style: normal; font-weight: 400; font-display: block;
+    src: url('../assets/fonts/yeseva-one-cyrillic-400.woff2') format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  @font-face {
+    font-family: 'KK YesevaOne'; font-style: normal; font-weight: 400; font-display: block;
+    src: url('../assets/fonts/yeseva-one-latin-400.woff2') format('woff2');
+    unicode-range: U+0000-00FF;
+  }
+  @font-face {
+    font-family: 'KK Comfortaa'; font-style: normal; font-weight: 400; font-display: block;
+    src: url('../assets/fonts/comfortaa-cyrillic-400.woff2') format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  @font-face {
+    font-family: 'KK Comfortaa'; font-style: normal; font-weight: 400; font-display: block;
+    src: url('../assets/fonts/comfortaa-latin-400.woff2') format('woff2');
+    unicode-range: U+0000-00FF;
+  }
+  @font-face {
+    font-family: 'KK PTSerif'; font-style: normal; font-weight: 400; font-display: block;
+    src: url('../assets/fonts/pt-serif-cyrillic-400.woff2') format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  @font-face {
+    font-family: 'KK PTSerif'; font-style: normal; font-weight: 400; font-display: block;
+    src: url('../assets/fonts/pt-serif-latin-400.woff2') format('woff2');
+    unicode-range: U+0000-00FF;
+  }
+  @font-face {
+    font-family: 'KK PTMono'; font-style: normal; font-weight: 400; font-display: block;
+    src: url('../assets/fonts/pt-mono-cyrillic-400.woff2') format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  @font-face {
+    font-family: 'KK PTMono'; font-style: normal; font-weight: 400; font-display: block;
+    src: url('../assets/fonts/pt-mono-latin-400.woff2') format('woff2');
+    unicode-range: U+0000-00FF;
+  }
+
   * { box-sizing: border-box; margin: 0; padding: 0; }
   html, body { height: 100%; }
   body {
@@ -330,48 +415,72 @@
   }
 
   /* === Label-node — плавающая текст-аннотация поверх холста ===
-     Без фона / рамки / тени — выглядит как «написанный» прямо на сцене текст.
-     Header / footer / resize / anchor скрыты по умолчанию, появляются на
-     hover чтобы можно было перетаскивать, удалять, ресайзить. */
+     Auto-размер по тексту: .node автоматически сжимается до контента,
+     никаких «невидимых боксов» вокруг текста. Header / toolbar /
+     resize / anchor вынесены за пределы видимой области (absolute) и
+     показываются на hover. */
   .node.label-node {
     background: transparent;
     border: none; box-shadow: none;
     padding: 0;
+    overflow: visible;          /* absolute-дети могут выйти за рамки */
+    width: auto !important;     /* override любого inline-width из старых сцен */
+    height: auto !important;
+    min-width: 30px;
+    max-width: 800px;           /* лимит чтобы не получить однострочного монстра */
+    display: block;             /* отключаем flex-column — нам не нужно */
+    contain: none;              /* отменяем content-visibility-оптимизацию */
+    contain-intrinsic-size: auto;
   }
   .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; }
+
+  /* Header (drag-handle + имя + ×) — absolute над текстом, hover-only. */
   .node.label-node .node-header {
-    background: rgba(20,20,20,0.85);
-    border-radius: 6px 6px 0 0;
+    position: absolute;
+    bottom: 100%;                /* над label, без занятия layout */
+    left: 0; right: 0;
+    background: rgba(20,20,20,0.92);
+    border-radius: 4px 4px 0 0;
+    margin-bottom: 2px;
+    opacity: 0; transition: opacity 0.15s;
+    pointer-events: none;        /* hover-only включаем ниже */
   }
+  /* Footer для label не используется (нет сгенерированной информации) — скрываем. */
+  .node.label-node .node-footer { display: none; }
+  /* Resize и anchor для label не нужны — текст auto-размером, ссылок нет. */
+  .node.label-node .resize-handle,
+  .node.label-node .anchor { display: none; }
+
+  /* Body — wrapper без визуального вклада. */
   .node.label-node .node-body {
     padding: 0; background: transparent;
-    display: flex; flex-direction: column; min-height: 0;
+    display: block; min-height: 0;
+    position: relative;
   }
 
-  /* Тулбар форматирования label — поверх текста, на hover. */
+  /* Тулбар форматирования — 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; margin: 4px;
+    border-radius: 4px;
     font-size: 11px; flex-shrink: 0;
-    align-self: flex-start;
-    pointer-events: auto;
+    opacity: 0; transition: opacity 0.15s;
+    pointer-events: none;
+    white-space: nowrap;
+    z-index: 10;
+  }
+  .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 {
+    opacity: 1; pointer-events: auto;
   }
   .node.label-node .label-toolbar select,
   .node.label-node .label-toolbar button {
@@ -386,32 +495,57 @@
   }
   .node.label-node .label-toolbar .tt-italic { font-style: italic; min-width: 22px; }
 
-  /* Сам текст. flex:1 — занимает оставшееся тело, поэтому drag-area
-     совпадает с визуальной областью. */
+  /* Сам текст — auto-ширина по контенту, до max-width. */
   .node.label-node .label-text {
-    flex: 1; padding: 8px 12px;
+    display: inline-block;
+    padding: 4px 8px;
     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;
     text-shadow: 0 1px 2px rgba(0,0,0,0.6);
+    min-width: 30px;
+    max-width: 100%;
   }
   .node.label-node .label-text:empty::before {
     content: attr(data-placeholder);
     color: rgba(200,200,200,0.35);
   }
+  /* === Label-шрифты ===
+     Все варианты — bundled woff2 (см. assets/fonts/), кириллица поддержана. */
   .node.label-node .label-text[data-font="handwritten"] {
-    font-family: 'Caveat', 'Marker Felt', 'Bradley Hand', 'Snell Roundhand', cursive;
+    /* Карандашом — мягкий рукописный (Caveat). */
+    font-family: 'KK Caveat', 'Caveat', 'Marker Felt', cursive;
+    line-height: 1.1;
+  }
+  .node.label-node .label-text[data-font="brush"] {
+    /* Скорописью — каллиграфия в русском стиле (Bad Script). */
+    font-family: 'KK BadScript', 'Bad Script', 'Snell Roundhand', cursive;
   }
   .node.label-node .label-text[data-font="marker"] {
-    font-family: 'Permanent Marker', 'Chalkduster', 'Marker Felt', 'Comic Sans MS', fantasy;
-    letter-spacing: 0.02em;
+    /* Кистью — закруглённый плакатный шрифт (Pacifico). */
+    font-family: 'KK Pacifico', 'Pacifico', 'Marker Felt', cursive;
+    letter-spacing: 0.01em;
+  }
+  .node.label-node .label-text[data-font="display"] {
+    /* Декор — крупная декоративная подпись (Lobster). */
+    font-family: 'KK Lobster', 'Lobster', Georgia, serif;
+  }
+  .node.label-node .label-text[data-font="elegant"] {
+    /* Элегант — выразительный заголовочный serif (Yeseva One). */
+    font-family: 'KK YesevaOne', 'Yeseva One', Georgia, serif;
+  }
+  .node.label-node .label-text[data-font="rounded"] {
+    /* Округлый — мягкий sans (Comfortaa). */
+    font-family: 'KK Comfortaa', 'Comfortaa', -apple-system, sans-serif;
   }
   .node.label-node .label-text[data-font="serif"] {
-    font-family: Georgia, 'Times New Roman', serif;
+    /* С засечками — академический serif (PT Serif). */
+    font-family: 'KK PTSerif', 'PT Serif', Georgia, serif;
   }
   .node.label-node .label-text[data-font="mono"] {
-    font-family: ui-monospace, 'SF Mono', Menlo, 'Courier New', monospace;
+    /* Моноширинный (PT Mono). */
+    font-family: 'KK PTMono', 'PT Mono', ui-monospace, Menlo, monospace;
   }
   .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; }