@sequent-org/moodboard 1.4.70 → 1.4.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sequent-org/moodboard",
-  "version": "1.4.70",
+  "version": "1.4.71",
   "type": "module",
   "description": "Interactive moodboard",
   "main": "./src/index.js",

package/src/objects/shape/shapeTextArea.js

@@ -0,0 +1,92 @@
+/**
+ * Text-safe area (вписанный прямоугольник) внутри фигуры.
+ *
+ * Текст фигуры не должен выходить за её видимый контур. Bounding box фигуры
+ * прямоугольный, но сама фигура (треугольник, ромб, круг, стрелка, параллелограмм)
+ * занимает лишь часть бокса. Здесь считаем максимальный прямоугольник, который
+ * гарантированно лежит внутри контура — по нему позиционируется и статический
+ * HTML-оверлей текста, и inline-редактор.
+ *
+ * Геометрия форм — из ShapeDrawer._drawFillShape (тот же контур).
+ *
+ * @param {string} kind — square|rounded|circle|triangle|diamond|parallelogram|arrow
+ * @param {number} w — ширина bounds (world px)
+ * @param {number} h — высота bounds (world px)
+ * @returns {{left:number, top:number, width:number, height:number}} область в локальных координатах бокса (0,0 — левый верх)
+ */
+// Доля запаса внутрь контура для непрямоугольных фигур. Вписанный прямоугольник и
+// клип-контур касаются краёв фигуры углами/сторонами, поэтому глифы верхней строки
+// при переполнении «липнут» к наклонной стороне (для круга — углы вписанного квадрата
+// лежат ровно на окружности). Ужимаем безопасную зону на этот множитель, чтобы текст
+// не доходил до самого контура. 0.8 даёт видимый зазор (~20% радиуса) и служит буфером
+// против небольшого смещения бокса относительно центра фигуры.
+const SHAPE_INNER_MARGIN = 0.8;
+
+export function getShapeTextSafeArea(kind, w, h) {
+    const W = Math.max(0, w || 0);
+    const H = Math.max(0, h || 0);
+
+    switch (kind) {
+        case 'circle': {
+            // Вписанный прямоугольник в эллипс (полуоси W/2, H/2): множитель 1/√2.
+            // Углы такого прямоугольника лежат точно на окружности, поэтому дополнительно
+            // ужимаем на SHAPE_INNER_MARGIN — иначе крайние строки касаются контура.
+            const f = (1 / Math.SQRT2) * SHAPE_INNER_MARGIN;
+            const iw = W * f;
+            const ih = H * f;
+            return { left: (W - iw) / 2, top: (H - ih) / 2, width: iw, height: ih };
+        }
+        case 'triangle': {
+            // Вершина сверху (W/2,0), основание снизу. Ширину берём по вписанному в
+            // основание прямоугольнику (W/2), но по вертикали центрируем на середине
+            // фигуры, а не прижимаем к низу — текст должен стоять по центру и расти
+            // вверх при переполнении. Верхние углы box'а выходят за наклонные стороны,
+            // но их прячет клип-контур (getShapeTextClipPath) с внутренним отступом.
+            return { left: W * 0.25, top: H * 0.25, width: W * 0.5, height: H * 0.5 };
+        }
+        case 'diamond': {
+            // Ромб с вершинами по серединам сторон: вписанный центрированный
+            // прямоугольник — половина ширины и высоты. Его углы лежат на сторонах
+            // ромба, поэтому ужимаем на SHAPE_INNER_MARGIN, чтобы текст не касался края.
+            const dw = W * 0.5 * SHAPE_INNER_MARGIN;
+            const dh = H * 0.5 * SHAPE_INNER_MARGIN;
+            return { left: (W - dw) / 2, top: (H - dh) / 2, width: dw, height: dh };
+        }
+        case 'parallelogram': {
+            // skew совпадает с ShapeDrawer. Безопасна средняя вертикальная полоса.
+            const skew = Math.min(W * 0.25, 20);
+            return { left: skew, top: 0, width: Math.max(0, W - 2 * skew), height: H };
+        }
+        case 'arrow': {
+            // Прямоугольное «древко» стрелки — единственная зона с полной высотой полосы.
+            const shaftH = Math.max(6, H * 0.3);
+            const shaftY = (H - shaftH) / 2;
+            return { left: 0, top: shaftY, width: W * 0.6, height: shaftH };
+        }
+        case 'square':
+        case 'rounded':
+        default:
+            return { left: 0, top: 0, width: W, height: H };
+    }
+}
+
+/**
+ * CSS clip-path для текстового слоя фигуры — чтобы текст, вышедший за наклонные
+ * стороны, обрезался контуром («прятался внутри фигуры»), а не торчал наружу.
+ *
+ * Координаты заданы в системе САМОГО слоя (он позиционируется по safe-area из
+ * getShapeTextSafeArea). Для большинства фигур safe-area целиком лежит внутри
+ * контура, поэтому клип не нужен (null). Исключение — треугольник: верх safe-area
+ * (центральный прямоугольник W/2×H/2) шире контура, поэтому клипуем трапецией.
+ * Трапеция задана с внутренним отступом от наклонных сторон (не 25%/0, а 29%/5%),
+ * чтобы верхняя строка при переполнении не касалась контура, а обрезалась чуть внутри.
+ *
+ * @param {string} kind
+ * @returns {string|null}
+ */
+export function getShapeTextClipPath(kind) {
+    if (kind === 'triangle') {
+        return 'polygon(29% 5%, 71% 5%, 93% 95%, 7% 95%)';
+    }
+    return null;
+}

package/src/tools/object-tools/placement/PlacementInputRouter.js

@@ -262,7 +262,9 @@ export class PlacementInputRouter {
                                     id: objectData.id,
                                     type: 'shape',
                                     position: objectData.position,
-                                    properties: { content: '' }
+                                    // kind обязателен: без него редактор берёт safe-area как для квадрата
+                                    // (полные границы), и текст в круге/треугольнике вылезает за контур.
+                                    properties: { content: '', kind: objectData.properties?.kind || 'square' }
                                 },
                                 create: true
                             });

package/src/tools/object-tools/selection/FileNameInlineEditorController.js

@@ -105,7 +105,7 @@ export function openFileNameEditor(object, create = false) {
     };
 
     // Фокусируем и выделяем весь текст
-    input.focus();
+    input.focus({ preventScroll: true });
     input.select();
 
     // Функция завершения редактирования

package/src/tools/object-tools/selection/FrameTitleInlineEditorController.js

@@ -89,7 +89,7 @@ export function openFrameTitleEditor(object, _create = false) {
         _frameInstance: frameInstance,
     };
 
-    input.focus();
+    input.focus({ preventScroll: true });
     input.select();
 
     const finalize = (commit) => this._closeFrameTitleEditor(commit);

package/src/tools/object-tools/selection/MindmapInlineEditorController.js

@@ -837,7 +837,7 @@ export function openMindmapEditor(object, create = false) {
         _removeDomListeners: removeDomListeners,
     };
 
-    textarea.focus();
+    textarea.focus({ preventScroll: true });
     applyMindmapCaretFromClick({
         create,
         objectId,

package/src/tools/object-tools/selection/SelectInputRouter.js

@@ -322,7 +322,7 @@ export function onDoubleClick(event) {
                 id: hitResult.object,
                 type: 'shape',
                 position: posData.position,
-                properties: { content: shapeContent },
+                properties: { content: shapeContent, kind: pix._mb?.properties?.kind || 'square' },
                 caretClick: {
                     clientX: event?.originalEvent?.clientX,
                     clientY: event?.originalEvent?.clientY,

package/src/tools/object-tools/selection/TextEditorInteractionController.js

@@ -232,7 +232,7 @@ export function bindTextEditorInteractions(controller, {
             // который тут же снимает фокус с только что созданного пустого поля.
             // В течение короткого окна после создания не финализируем, а возвращаем фокус.
             if (isNewCreation && (Date.now() - editorCreatedAt) < 400) {
-                try { textarea.focus(); } catch (_) {}
+                try { textarea.focus({ preventScroll: true }); } catch (_) {}
                 return;
             }
 
@@ -291,7 +291,7 @@ export function bindTextEditorInteractions(controller, {
         // Страховочный возврат фокуса на случай, если браузер всё-таки убрал фокус.
         setTimeout(() => {
             if (controller?.textEditor?.active && textarea) {
-                try { textarea.focus(); } catch (_) {}
+                try { textarea.focus({ preventScroll: true }); } catch (_) {}
             }
         }, 0);
     };

package/src/tools/object-tools/selection/TextInlineEditorController.js

@@ -32,6 +32,7 @@ import {
 import { updateCustomCaret } from './TextEditorCaretService.js';
 import { TEXT_BOX_BOTTOM_PAD_PX } from '../../../services/text/TextBoxMetrics.js';
 import { buildHtmlWithRanges } from '../../../ui/HtmlTextLayer.js';
+import { getShapeTextSafeArea, getShapeTextClipPath } from '../../../objects/shape/shapeTextArea.js';
 
 export function openTextEditor(object, create = false) {
 
@@ -77,7 +78,7 @@ export function openTextEditor(object, create = false) {
             this.textEditor.objectType === objectType
         );
         if (sameEditorObject && this.textEditor.textarea) {
-            try { this.textEditor.textarea.focus(); } catch (_) {}
+            try { this.textEditor.textarea.focus({ preventScroll: true }); } catch (_) {}
             return;
         }
         this._closeTextEditor(true);
@@ -99,6 +100,9 @@ export function openTextEditor(object, create = false) {
         const meta = pixiReq.pixiObject && pixiReq.pixiObject._mb ? pixiReq.pixiObject._mb.properties || {} : {};
         if (meta.content) properties.content = meta.content;
         if (meta.fontSize) properties.fontSize = meta.fontSize;
+        // kind берём из самого объекта, если его не передали в payload — иначе safe-area
+        // фигуры считается как для квадрата и текст вылезает за контур круга/треугольника.
+        if (meta.kind && !properties.kind) properties.kind = meta.kind;
     }
 
     // Уведомляем о начале редактирования (для разных типов отдельно)
@@ -355,27 +359,67 @@ export function openTextEditor(object, create = false) {
             if (sizeData.size) { shapeW = sizeData.size.width; shapeH = sizeData.size.height; }
         }
 
-        const shapeCssW = Math.max(1, Math.round(shapeW * sCssShape));
-        const shapeCssH = Math.max(1, Math.round(shapeH * sCssShape));
-        // Центрируем каретку по вертикали: padding-top = (высота фигуры - высота одной строки) / 2
-        const oneLinePx = Math.max(1, Math.round(effectiveFontPx * 1.4));
-        const paddingTopShape = Math.max(0, Math.round((shapeCssH - oneLinePx) / 2));
+        // Text-safe area: редактор занимает не весь bounds, а вписанный в контур
+        // фигуры прямоугольник — иначе строки при вводе вылезают за наклонные стороны.
+        const kindShape = properties?.kind || 'square';
+        const safeShape = getShapeTextSafeArea(kindShape, shapeW, shapeH);
+        const safeLeftCss = Math.round(safeShape.left * sCssShape);
+        const safeTopCss = Math.round(safeShape.top * sCssShape);
+        const shapeCssW = Math.max(1, Math.round(safeShape.width * sCssShape));
+        const shapeCssH = Math.max(1, Math.round(safeShape.height * sCssShape));
+
+        // Фактическая line-height textarea в px: читаем computed style, т.к. textarea
+        // уже вставлена в DOM (view.parentElement.appendChild выше). Это надёжнее, чем
+        // hardcode * 1.4 — реальный коэффициент зависит от baseFontSizePx через resolveLineHeightRatio.
+        let shapeLineHeightPx = Math.max(1, Math.round(effectiveFontPx * 1.4));
+        try {
+            if (typeof window !== 'undefined' && window.getComputedStyle) {
+                const lhComputed = parseFloat(window.getComputedStyle(textarea).lineHeight);
+                if (isFinite(lhComputed) && lhComputed > 0) shapeLineHeightPx = Math.round(lhComputed);
+            }
+        } catch (_) {}
+
+        // backdrop: text center = shape center → paddingTop = (H - lineH) / 2
+        const backdropPadTop = Math.max(0, Math.round((shapeCssH - shapeLineHeightPx) / 2));
+        // textarea: компенсируем -2px смещение в updateCustomCaret (caretEl.style.top = top - 2),
+        // чтобы визуальная каретка тоже встала строго по центру фигуры
+        const textareaPadTop = backdropPadTop + 2;
 
-        wrapper.style.left = `${Math.round(screenPos.x)}px`;
-        wrapper.style.top = `${Math.round(screenPos.y)}px`;
+        wrapper.style.left = `${Math.round(screenPos.x) + safeLeftCss}px`;
+        wrapper.style.top = `${Math.round(screenPos.y) + safeTopCss}px`;
         wrapper.style.width = `${shapeCssW}px`;
         wrapper.style.height = `${shapeCssH}px`;
+        // Клип по контуру: при вводе текст, вышедший за наклонные стороны, прячется.
+        wrapper.style.clipPath = getShapeTextClipPath(kindShape) || 'none';
 
         textarea.style.width = `${shapeCssW}px`;
         textarea.style.height = `${shapeCssH}px`;
         textarea.style.boxSizing = 'border-box';
+        // Перенос строк внутри фигуры (applyEditorSizing ставит white-space:pre — без
+        // переноса текст рос бы вбок и вылезал за границы). Совпадает со статическим
+        // слоем (mb-shape-text), поэтому строки в редакторе и после совпадают.
+        textarea.style.whiteSpace = 'pre-wrap';
+        textarea.style.wordBreak = 'break-word';
+        textarea.style.overflowWrap = 'break-word';
+        if (backdrop) {
+            backdrop.style.whiteSpace = 'pre-wrap';
+            backdrop.style.wordBreak = 'break-word';
+            backdrop.style.overflowWrap = 'break-word';
+        }
+        // CSS .moodboard-text-input задаёт transition: all 0.2s — он анимирует padding-top
+        // от старого значения к вычисленному. Начальный расчёт каретки (setTimeout 0 в
+        // bindTextEditorInteractions) читает промежуточный padding и ставит каретку у верха
+        // фигуры; центр появляется только после ввода. Отключаем анимацию, чтобы padding
+        // применился мгновенно и каретка сразу встала по центру.
+        textarea.style.transition = 'none';
         
         if (backdrop) {
             backdrop.style.width = `${shapeCssW}px`;
             backdrop.style.height = `${shapeCssH}px`;
             backdrop.style.boxSizing = 'border-box';
             backdrop.style.display = 'block';
-            backdrop.style.paddingTop = `${paddingTopShape}px`;
+            backdrop.style.transition = 'none';
+            backdrop.style.paddingTop = `${backdropPadTop}px`;
             backdrop.style.paddingBottom = '0px';
         }
         
@@ -385,9 +429,48 @@ export function openTextEditor(object, create = false) {
         // padding-bottom:0 перебивает CSS .moodboard-text-input (5px), чтобы не раздувать
         // высоту поля относительно крошечной фигуры.
         textarea.style.display = 'block';
-        textarea.style.paddingTop = `${paddingTopShape}px`;
+        textarea.style.paddingTop = `${textareaPadTop}px`;
         textarea.style.paddingBottom = '0px';
 
+        // Вертикаль: пока текст помещается — центр по середине фигуры; при
+        // переполнении — рост вверх (низ/каретка видны, старые строки уходят выше).
+        // Пересчитываем paddingTop по фактической высоте контента, т.к. фиксированный
+        // padding центрирует только одну строку. Замер — по backdrop (видимый слой).
+        const applyShapeVerticalAlign = () => {
+            let contentH = shapeLineHeightPx;
+            if (backdrop) {
+                // Замер реальной высоты контента: у backdrop фиксированная height,
+                // поэтому scrollHeight не опускается ниже неё — временно снимаем height
+                // и padding, иначе одна строка «измеряется» как полный box и padding=0.
+                const prevPad = backdrop.style.paddingTop;
+                const prevH = backdrop.style.height;
+                backdrop.style.paddingTop = '0px';
+                backdrop.style.height = 'auto';
+                contentH = backdrop.scrollHeight;
+                backdrop.style.height = prevH;
+                backdrop.style.paddingTop = prevPad;
+            }
+            const overflow = contentH > shapeCssH + 1;
+            const bdPad = overflow ? 0 : Math.max(0, Math.round((shapeCssH - contentH) / 2));
+            if (backdrop) {
+                backdrop.style.paddingTop = `${bdPad}px`;
+                backdrop.scrollTop = overflow ? backdrop.scrollHeight : 0;
+            }
+            textarea.style.paddingTop = `${bdPad + 2}px`;
+            textarea.scrollTop = overflow ? textarea.scrollHeight : 0;
+        };
+        const scheduleShapeVerticalAlign = () => {
+            // rAF: даём syncBackdrop (input-листенер) обновить содержимое до замера.
+            requestAnimationFrame(() => {
+                applyShapeVerticalAlign();
+                if (this.textEditor && this.textEditor.caret) {
+                    updateCustomCaret(textarea, this.textEditor.caret);
+                }
+            });
+        };
+        textarea.addEventListener('input', scheduleShapeVerticalAlign);
+        scheduleShapeVerticalAlign();
+
         this.textEditor._cssLeftPx = Math.round(screenPos.x);
         this.textEditor._cssTopPx = Math.round(screenPos.y);
     } else {
@@ -540,7 +623,11 @@ export function openTextEditor(object, create = false) {
     if (!isNote && !isShape && create) {
         autoSize();
     }
-    textarea.focus();
+    // preventScroll: на планшете экранная клавиатура иначе триггерит нативный
+    // scroll-into-view, который прокручивает контейнер холста — фигура и поле
+    // ввода уезжают вниз от точки тапа. Позиция редактора уже привязана к
+    // координатам канваса, нативная прокрутка здесь только мешает.
+    textarea.focus({ preventScroll: true });
     // Записка: после фокуса повторно подгоняем блок (focus может изменить layout),
     // чтобы стартовая каретка считалась от уже подобранного размера шрифта, а не от 32px.
     if (isNote && updateNoteEditor) {

package/src/ui/HtmlTextLayer.js

@@ -4,6 +4,7 @@ import { Events } from '../core/events/Events.js';
 import * as PIXI from 'pixi.js';
 import { renderRichText, hasMath } from '../utils/richText.js';
 import { renderTextList } from './text-properties/TextListRenderer.js';
+import { getShapeTextSafeArea, getShapeTextClipPath } from '../objects/shape/shapeTextArea.js';
 import {
     applyTextStyles,
     resolveLineHeightRatio,
@@ -714,12 +715,46 @@ export class HtmlTextLayer {
             if (el.dataset.baseFontSize !== String(newShapeFS)) {
                 el.dataset.baseFontSize = String(newShapeFS);
             }
+            // Реальный размер применяется здесь: при смене шрифта в панели фигуры updateOne
+            // раньше обновлял только dataset, а style.fontSize оставался с момента создания.
+            el.style.fontSize = `${newShapeFS}px`;
             el.style.fontFamily = textProps.fontFamily || 'Inter, sans-serif';
             el.style.color = textProps.color || '#111111';
             el.style.fontWeight = textProps.bold ? 'bold' : '';
             el.style.fontStyle = textProps.italic ? 'italic' : '';
             const shapeContent = obj.properties?.content || '';
             if (el.textContent !== shapeContent) el.textContent = shapeContent;
+            // Text-safe area: оверлей занимает не весь bounds, а вписанный в контур
+            // фигуры прямоугольник (overflow: hidden клипует по нему). Иначе текст
+            // выходит за наклонные стороны треугольника/ромба/круга/стрелки.
+            if (w > 0 && h > 0) {
+                const kind = obj.properties?.kind || 'square';
+                const safe = getShapeTextSafeArea(kind, w, h);
+                const sx = logWidth / w;
+                const sy = logHeight / h;
+                const safeLeft = Math.round(logLeft + safe.left * sx);
+                const safeTop = Math.round(logTop + safe.top * sy);
+                const safeW = Math.max(1, Math.round(safe.width * sx));
+                const safeH = Math.max(1, Math.round(safe.height * sy));
+                el.style.left = `${safeLeft}px`;
+                el.style.top = `${safeTop}px`;
+                el.style.width = `${safeW}px`;
+                el.style.height = `${safeH}px`;
+                // Поворот должен идти вокруг центра фигуры, а не центра safe-area.
+                const originX = (logLeft + logWidth / 2) - safeLeft;
+                const originY = (logTop + logHeight / 2) - safeTop;
+                el.style.transformOrigin = `${originX}px ${originY}px`;
+                // Клип по контуру: текст, вышедший за наклонные стороны, прячется внутри.
+                el.style.clipPath = getShapeTextClipPath(kind) || 'none';
+            }
+            // Вертикальное выравнивание: пока текст помещается — центр по середине
+            // фигуры; при переполнении — прижимаем к низу safe-area, чтобы текст рос
+            // вверх (низ зафиксирован, верхние строки уходят выше и обрезаются
+            // overflow: hidden). Замер overflow делаем при flex-start — при
+            // align-items:center контент вылезает вверх/вниз и scrollHeight врёт.
+            el.style.alignItems = 'flex-start';
+            const overflowsBox = el.scrollHeight > el.clientHeight + 1;
+            el.style.alignItems = overflowsBox ? 'flex-end' : 'center';
             return;
         }