@sequent-org/moodboard 1.1.0 → 1.2.0

package/src/ui/HtmlHandlesLayer.js

@@ -1,4 +1,5 @@
 import { Events } from '../core/events/Events.js';
+import * as PIXI from 'pixi.js';
 import rotateIconSvg from '../assets/icons/rotate-icon.svg?raw';
 
 /**
@@ -27,9 +28,6 @@ export class HtmlHandlesLayer {
     attach() {
         this.layer = document.createElement('div');
         this.layer.className = 'moodboard-html-handles';
-        Object.assign(this.layer.style, {
-            position: 'absolute', inset: '0', pointerEvents: 'none', zIndex: 12,
-        });
         this.container.appendChild(this.layer);
 
         // Подписки: обновлять при изменениях выбора и трансформациях
@@ -56,6 +54,18 @@ export class HtmlHandlesLayer {
         this.eventBus.on(Events.Tool.GroupRotateEnd, () => { this._handlesSuppressed = false; this._setHandlesVisibility(true); });
         this.eventBus.on(Events.UI.ZoomPercent, () => this.update());
         this.eventBus.on(Events.Tool.PanUpdate, () => this.update());
+        
+        // Обновление рамки при undo/redo команд трансформации (перемещение, ресайз, поворот)
+        this.eventBus.on(Events.Object.TransformUpdated, (data) => {
+            // Проверяем, что обновленный объект выделен, и обновляем ручки
+            if (this.core?.selectTool && data.objectId) {
+                const isSelected = this.core.selectTool.selectedObjects.has(data.objectId);
+                if (isSelected) {
+                    console.log(`🔄 HtmlHandlesLayer: Объект ${data.objectId} изменен через команду, обновляем рамку`);
+                    this.update();
+                }
+            }
+        });
 
         this.update();
     }
@@ -93,24 +103,39 @@ export class HtmlHandlesLayer {
                     height: sizeData.size.height
                 }, id);
             } else {
-                // Fallback к getBounds() если события не сработали
+                // Fallback к getBounds() если события не сработали — конвертируем в мировые координаты (без зума)
+                const world = this.core.pixi.worldLayer || this.core.pixi.app.stage;
                 const b = pixi.getBounds();
-                this._showBounds({ x: b.x, y: b.y, width: b.width, height: b.height }, id);
+                const tl = world.toLocal(new PIXI.Point(b.x, b.y));
+                const br = world.toLocal(new PIXI.Point(b.x + b.width, b.y + b.height));
+                const wx = Math.min(tl.x, br.x);
+                const wy = Math.min(tl.y, br.y);
+                const ww = Math.max(1, Math.abs(br.x - tl.x));
+                const wh = Math.max(1, Math.abs(br.y - tl.y));
+                this._showBounds({ x: wx, y: wy, width: ww, height: wh }, id);
             }
         } else {
-            // Группа: вычислим общий bbox по PIXI
+            // Группа: считаем bbox в МИРОВЫХ координатах (независимо от текущего зума)
+            const world = this.core.pixi.worldLayer || this.core.pixi.app.stage;
             let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
             ids.forEach(id => {
                 const p = this.core.pixi.objects.get(id);
                 if (!p) return;
                 const b = p.getBounds();
-                minX = Math.min(minX, b.x);
-                minY = Math.min(minY, b.y);
-                maxX = Math.max(maxX, b.x + b.width);
-                maxY = Math.max(maxY, b.y + b.height);
+                // Конвертируем углы прямоугольника из экранных в мировые координаты
+                const tl = world.toLocal(new PIXI.Point(b.x, b.y));
+                const br = world.toLocal(new PIXI.Point(b.x + b.width, b.y + b.height));
+                const x0 = Math.min(tl.x, br.x);
+                const y0 = Math.min(tl.y, br.y);
+                const x1 = Math.max(tl.x, br.x);
+                const y1 = Math.max(tl.y, br.y);
+                minX = Math.min(minX, x0);
+                minY = Math.min(minY, y0);
+                maxX = Math.max(maxX, x1);
+                maxY = Math.max(maxY, y1);
             });
             if (!isFinite(minX)) { this.hide(); return; }
-            this._showBounds({ x: minX, y: minY, width: maxX - minX, height: maxY - minY }, '__group__');
+            this._showBounds({ x: minX, y: minY, width: Math.max(1, maxX - minX), height: Math.max(1, maxY - minY) }, '__group__');
         }
     }
 
@@ -182,7 +207,7 @@ export class HtmlHandlesLayer {
         this.layer.innerHTML = '';
         const box = document.createElement('div');
         box.className = 'mb-handles-box';
-        
+
         // Получаем угол поворота объекта для поворота рамки
         let rotation = 0;
         if (id !== '__group__') {
@@ -209,16 +234,9 @@ export class HtmlHandlesLayer {
         const mkCorner = (dir, x, y, cursor) => {
             const h = document.createElement('div');
             h.dataset.dir = dir; h.dataset.id = id;
-            Object.assign(h.style, {
-                position: 'absolute', width: '12px', height: '12px',
-                background: '#1DE9B6', 
-                border: '2px solid #1DE9B6', 
-                borderRadius: '50%', // Делаем круглыми
-                boxSizing: 'border-box',
-                pointerEvents: isFileTarget ? 'none' : 'auto', 
-                zIndex: 10, // Увеличиваем z-index
-                cursor: cursor
-            });
+            h.className = 'mb-handle';
+            h.style.pointerEvents = isFileTarget ? 'none' : 'auto';
+            h.style.cursor = cursor;
             h.style.left = `${x - 6}px`;
             h.style.top = `${y - 6}px`;
             // Для файла скрываем ручки, для остальных показываем
@@ -226,15 +244,7 @@ export class HtmlHandlesLayer {
             
             // Создаем внутренний белый круг
             const inner = document.createElement('div');
-            Object.assign(inner.style, {
-                position: 'absolute',
-                top: '1px', left: '1px',
-                width: '6px', height: '6px',
-                background: '#fff',
-                borderRadius: '50%',
-                pointerEvents: 'none', // Важно: не блокируем события
-                zIndex: 1
-            });
+            inner.className = 'mb-handle-inner';
             h.appendChild(inner);
             
             // Эффект при наведении
@@ -261,11 +271,7 @@ export class HtmlHandlesLayer {
         mkCorner('se', x1, y1, 'nwse-resize');
         mkCorner('sw', x0, y1, 'nesw-resize');
 
-        // Боковые ручки (видимые круглые ручки на серединах сторон)
-        mkCorner('n', cx, y0, 'ns-resize');  // верхняя
-        mkCorner('e', x1, cy, 'ew-resize');  // правая
-        mkCorner('s', cx, y1, 'ns-resize');  // нижняя
-        mkCorner('w', x0, cy, 'ew-resize');  // левая
+        // Видимые ручки на серединах сторон отключены (масштабирование по рёбрам работает через невидимые зоны)
 
         // Кликабельные грани для ресайза (невидимые области для лучшего UX)
         // Уменьшаем их, чтобы не перекрывать угловые ручки
@@ -273,12 +279,10 @@ export class HtmlHandlesLayer {
         const makeEdge = (name, style, cursor) => {
             const e = document.createElement('div');
             e.dataset.edge = name; e.dataset.id = id;
+            e.className = 'mb-edge';
             Object.assign(e.style, style, {
-                position: 'absolute', pointerEvents: isFileTarget ? 'none' : 'auto', cursor, 
-                zIndex: 5, // Меньше чем у ручек (10)
-                background: 'transparent', // невидимые области
+                pointerEvents: isFileTarget ? 'none' : 'auto', cursor, 
                 display: isFileTarget ? 'none' : 'block'
-                
             });
             if (!isFileTarget) {
                 e.addEventListener('mousedown', (evt) => this._onEdgeResizeDown(evt));
@@ -328,17 +332,7 @@ export class HtmlHandlesLayer {
         if (isFileTarget || isFrameTarget) {
             Object.assign(rotateHandle.style, { display: 'none', pointerEvents: 'none' });
         } else {
-            Object.assign(rotateHandle.style, {
-                position: 'absolute',
-                width: '20px', height: '20px',
-                background: 'transparent',
-                border: 'none',
-                borderRadius: '50%',
-                pointerEvents: 'auto',
-                cursor: 'grab',
-                zIndex: 15,
-                display: 'flex', alignItems: 'center', justifyContent: 'center'
-            });
+            rotateHandle.className = 'mb-rotate-handle';
             // Фиксированная дистанция 20px по диагонали (top-right → bottom-left) от угла (0, h)
             const d = 38;
             const L = Math.max(1, Math.hypot(width, height));
@@ -416,6 +410,17 @@ export class HtmlHandlesLayer {
         }
 
         const startMouse = { x: e.clientX, y: e.clientY };
+        // Определяем тип объекта (нужно, чтобы для текста автоподгонять высоту)
+        let isTextTarget = false;
+        let isNoteTarget = false;
+        {
+            const req = { objectId: id, pixiObject: null };
+            this.eventBus.emit(Events.Tool.GetObjectPixi, req);
+            const mbType = req.pixiObject && req.pixiObject._mb && req.pixiObject._mb.type;
+            isTextTarget = (mbType === 'text' || mbType === 'simple-text');
+            isNoteTarget = (mbType === 'note');
+        }
+
         const onMove = (ev) => {
             const dx = ev.clientX - startMouse.x;
             const dy = ev.clientY - startMouse.y;
@@ -438,6 +443,85 @@ export class HtmlHandlesLayer {
                 newTop = startCSS.top + dy; 
             }
 
+            // Для записки удерживаем квадрат и компенсируем позицию в зависимости от ручки
+            if (isNoteTarget) {
+                const s = Math.max(newW, newH);
+                // базовая фиксация размера
+                newW = s; newH = s;
+                // корректируем привязку противоположной стороны
+                if (dir.includes('w')) { newLeft = startCSS.left + (startCSS.width - s); }
+                if (dir.includes('n')) { newTop = startCSS.top + (startCSS.height - s); }
+            }
+
+            // Минимальная ширина = ширина трёх символов текущего шрифта
+            if (isTextTarget) {
+                try {
+                    const textLayer = (typeof window !== 'undefined') ? window.moodboardHtmlTextLayer : null;
+                    const el = textLayer && textLayer.idToEl ? textLayer.idToEl.get && textLayer.idToEl.get(id) : null;
+                    if (el && typeof window.getComputedStyle === 'function') {
+                        const cs = window.getComputedStyle(el);
+                        const meas = document.createElement('span');
+                        meas.style.position = 'absolute';
+                        meas.style.visibility = 'hidden';
+                        meas.style.whiteSpace = 'pre';
+                        meas.style.fontFamily = cs.fontFamily;
+                        meas.style.fontSize = cs.fontSize;
+                        meas.style.fontWeight = cs.fontWeight;
+                        meas.style.fontStyle = cs.fontStyle;
+                        meas.style.letterSpacing = cs.letterSpacing || 'normal';
+                        meas.textContent = 'WWW';
+                        document.body.appendChild(meas);
+                        const minWidthPx = Math.max(1, Math.ceil(meas.getBoundingClientRect().width));
+                        meas.remove();
+                        if (newW < minWidthPx) {
+                            if (dir.includes('w')) {
+                                newLeft = startCSS.left + (startCSS.width - minWidthPx);
+                            }
+                            newW = minWidthPx;
+                        }
+                    }
+                } catch (_) {}
+            }
+
+            // Для текстовых объектов подгоняем высоту под контент при изменении ширины
+            if (isTextTarget) {
+                try {
+                    const textLayer = (typeof window !== 'undefined') ? window.moodboardHtmlTextLayer : null;
+                    const el = textLayer && textLayer.idToEl ? textLayer.idToEl.get && textLayer.idToEl.get(id) : null;
+                    if (el) {
+                        // Минимальная ширина в 3 символа
+                        let minWidthPx = 0;
+                        try {
+                            const cs = window.getComputedStyle(el);
+                            const meas = document.createElement('span');
+                            meas.style.position = 'absolute';
+                            meas.style.visibility = 'hidden';
+                            meas.style.whiteSpace = 'pre';
+                            meas.style.fontFamily = cs.fontFamily;
+                            meas.style.fontSize = cs.fontSize;
+                            meas.style.fontWeight = cs.fontWeight;
+                            meas.style.fontStyle = cs.fontStyle;
+                            meas.style.letterSpacing = cs.letterSpacing || 'normal';
+                            meas.textContent = 'WWW';
+                            document.body.appendChild(meas);
+                            minWidthPx = Math.max(1, Math.ceil(meas.getBoundingClientRect().width));
+                            meas.remove();
+                        } catch (_) {}
+
+                        if (minWidthPx > 0 && newW < minWidthPx) {
+                            if (dir.includes('w')) {
+                                newLeft = startCSS.left + (startCSS.width - minWidthPx);
+                            }
+                            newW = minWidthPx;
+                        }
+                        el.style.width = `${Math.max(1, Math.round(newW))}px`;
+                        el.style.height = 'auto';
+                        const measured = Math.max(1, Math.round(el.scrollHeight));
+                        newH = measured;
+                    }
+                } catch (_) {}
+            }
+
             // Обновим визуально (округление до целых для избежания дрожания)
             box.style.left = `${Math.round(newLeft)}px`;
             box.style.top = `${Math.round(newTop)}px`;
@@ -527,6 +611,28 @@ export class HtmlHandlesLayer {
                 };
 
                 this.eventBus.emit(Events.Tool.ResizeEnd, resizeEndData);
+                // Для текстовых объектов также пробуем обновить размер по контенту ещё раз
+                try {
+                    const req2 = { objectId: id, pixiObject: null };
+                    this.eventBus.emit(Events.Tool.GetObjectPixi, req2);
+                    const mbType2 = req2.pixiObject && req2.pixiObject._mb && req2.pixiObject._mb.type;
+                    if (mbType2 === 'text' || mbType2 === 'simple-text') {
+                        const textLayer = (typeof window !== 'undefined') ? window.moodboardHtmlTextLayer : null;
+                        const el = textLayer && textLayer.idToEl ? textLayer.idToEl.get && textLayer.idToEl.get(id) : null;
+                        if (el) {
+                            el.style.width = `${Math.max(1, Math.round(endCSS.width))}px`;
+                            el.style.height = 'auto';
+                            const measured = Math.max(1, Math.round(el.scrollHeight));
+                            const worldH2 = (measured * res) / s;
+                            const fixData = {
+                                object: id,
+                                size: { width: worldW, height: worldH2 },
+                                position: isFrameTarget ? null : (isEdgeLeftOrTop ? { x: worldX, y: worldY } : { x: startWorld.x, y: startWorld.y })
+                            };
+                            this.eventBus.emit(Events.Tool.ResizeUpdate, fixData);
+                        }
+                    }
+                } catch (_) {}
             }
         };
         document.addEventListener('mousemove', onMove);
@@ -580,6 +686,16 @@ export class HtmlHandlesLayer {
         }
 
         const startMouse = { x: e.clientX, y: e.clientY };
+        // Определяем тип объекта: для текста будем автоподгонять высоту при изменении ширины
+        let isTextTarget = false;
+        let isNoteTarget = false;
+        {
+            const req = { objectId: id, pixiObject: null };
+            this.eventBus.emit(Events.Tool.GetObjectPixi, req);
+            const mbType = req.pixiObject && req.pixiObject._mb && req.pixiObject._mb.type;
+            isTextTarget = (mbType === 'text' || mbType === 'simple-text');
+            isNoteTarget = (mbType === 'note');
+        }
         const onMove = (ev) => {
             const dxCSS = ev.clientX - startMouse.x;
             const dyCSS = ev.clientY - startMouse.y;
@@ -599,6 +715,76 @@ export class HtmlHandlesLayer {
                 newTop = startCSS.top + dyCSS; 
             }
 
+            // Для записки удерживаем квадрат и компенсируем противоположные стороны
+            if (isNoteTarget) {
+                const s = Math.max(newW, newH);
+                switch (edge) {
+                    case 'right':
+                        newW = s; newH = s;
+                        newTop = startCSS.top + Math.round((startCSS.height - s) / 2);
+                        break;
+                    case 'left':
+                        newW = s; newH = s;
+                        newLeft = startCSS.left + (startCSS.width - s);
+                        newTop = startCSS.top + Math.round((startCSS.height - s) / 2);
+                        break;
+                    case 'bottom':
+                        newW = s; newH = s;
+                        newLeft = startCSS.left + Math.round((startCSS.width - s) / 2);
+                        break;
+                    case 'top':
+                        newW = s; newH = s;
+                        newTop = startCSS.top + (startCSS.height - s);
+                        newLeft = startCSS.left + Math.round((startCSS.width - s) / 2);
+                        break;
+                }
+            }
+
+            // Минимальная ширина = ширина трёх символов текущего шрифта
+            if (isTextTarget) {
+                try {
+                    const textLayer = (typeof window !== 'undefined') ? window.moodboardHtmlTextLayer : null;
+                    const el = textLayer && textLayer.idToEl ? textLayer.idToEl.get && textLayer.idToEl.get(id) : null;
+                    if (el && typeof window.getComputedStyle === 'function') {
+                        const cs = window.getComputedStyle(el);
+                        const meas = document.createElement('span');
+                        meas.style.position = 'absolute';
+                        meas.style.visibility = 'hidden';
+                        meas.style.whiteSpace = 'pre';
+                        meas.style.fontFamily = cs.fontFamily;
+                        meas.style.fontSize = cs.fontSize;
+                        meas.style.fontWeight = cs.fontWeight;
+                        meas.style.fontStyle = cs.fontStyle;
+                        meas.style.letterSpacing = cs.letterSpacing || 'normal';
+                        meas.textContent = 'WWW';
+                        document.body.appendChild(meas);
+                        const minWidthPx = Math.max(1, Math.ceil(meas.getBoundingClientRect().width));
+                        meas.remove();
+                        if (newW < minWidthPx) {
+                            if (edge === 'left') {
+                                newLeft = startCSS.left + (startCSS.width - minWidthPx);
+                            }
+                            newW = minWidthPx;
+                        }
+                    }
+                } catch (_) {}
+            }
+
+            // Для текстовых объектов при изменении ширины вычисляем высоту по контенту
+            const widthChanged = (edge === 'left' || edge === 'right');
+            if (isTextTarget && widthChanged) {
+                try {
+                    const textLayer = (typeof window !== 'undefined') ? window.moodboardHtmlTextLayer : null;
+                    const el = textLayer && textLayer.idToEl ? textLayer.idToEl.get && textLayer.idToEl.get(id) : null;
+                    if (el) {
+                        el.style.width = `${Math.max(1, Math.round(newW))}px`;
+                        el.style.height = 'auto';
+                        const measured = Math.max(1, Math.round(el.scrollHeight));
+                        newH = measured;
+                    }
+                } catch (_) {}
+            }
+
             // Обновим визуально
             box.style.left = `${newLeft}px`;
             box.style.top = `${newTop}px`;
@@ -660,10 +846,25 @@ export class HtmlHandlesLayer {
                 // Определяем, изменилась ли позиция для краевого ресайза
                 const edgeFinalPositionChanged = (endCSS.left !== startCSS.left) || (endCSS.top !== startCSS.top);
                 
+                // Финальная коррекция высоты для текстовых объектов
+                let finalWorldH = worldH;
+                if (isTextTarget && (edge === 'left' || edge === 'right')) {
+                    try {
+                        const textLayer = (typeof window !== 'undefined') ? window.moodboardHtmlTextLayer : null;
+                        const el = textLayer && textLayer.idToEl ? textLayer.idToEl.get && textLayer.idToEl.get(id) : null;
+                        if (el) {
+                            el.style.width = `${Math.max(1, Math.round(endCSS.width))}px`;
+                            el.style.height = 'auto';
+                            const measured = Math.max(1, Math.round(el.scrollHeight));
+                            finalWorldH = (measured * res) / s;
+                        }
+                    } catch (_) {}
+                }
+
                 const edgeResizeEndData = {
                     object: id,
                     oldSize: { width: startWorld.width, height: startWorld.height },
-                    newSize: { width: worldW, height: worldH },
+                    newSize: { width: worldW, height: finalWorldH },
                     oldPosition: { x: startWorld.x, y: startWorld.y },
                     newPosition: edgeFinalPositionChanged ? { x: worldX, y: worldY } : { x: startWorld.x, y: startWorld.y }
                 };

package/src/ui/HtmlTextLayer.js

@@ -42,7 +42,7 @@ export class HtmlTextLayer {
             this.updateOne(objectId);
         });
 
-        // Прятать HTML-текст во время редактирования (textarea)
+        // Прятать HTML-текст во время редактирования (textarea) — общий текст
         this.eventBus.on(Events.UI.TextEditStart, ({ objectId }) => {
             const el = this.idToEl.get(objectId);
             if (el) el.style.visibility = 'hidden';
@@ -52,6 +52,16 @@ export class HtmlTextLayer {
             if (el) el.style.visibility = '';
         });
 
+        // Независимое скрытие/показ для записок
+        this.eventBus.on(Events.UI.NoteEditStart, ({ objectId }) => {
+            const el = this.idToEl.get(objectId);
+            if (el) el.style.visibility = 'hidden';
+        });
+        this.eventBus.on(Events.UI.NoteEditEnd, ({ objectId }) => {
+            const el = this.idToEl.get(objectId);
+            if (el) el.style.visibility = '';
+        });
+
         // Обработка событий скрытия/показа текста от SelectTool
         this.eventBus.on(Events.Tool.HideObjectText, ({ objectId }) => {
             console.log(`🔍 HtmlTextLayer: скрываю текст для объекта ${objectId}`);
@@ -90,12 +100,26 @@ export class HtmlTextLayer {
         this.eventBus.on(Events.Object.StateChanged, ({ objectId, updates }) => {
             const el = this.idToEl.get(objectId);
             if (el && updates) {
-                if (updates.fontFamily) {
-                    el.style.fontFamily = updates.fontFamily;
-                    console.log(`🔍 HtmlTextLayer: обновлен шрифт для ${objectId}:`, updates.fontFamily);
+                // Поддерживаем верхний уровень и updates.properties.fontFamily
+                const nextFont = updates.fontFamily || (updates.properties && updates.properties.fontFamily);
+                if (nextFont) {
+                    el.style.fontFamily = nextFont;
+                    console.log(`🔍 HtmlTextLayer: обновлен шрифт для ${objectId}:`, nextFont);
                 }
                 if (updates.fontSize) {
                     el.style.fontSize = `${updates.fontSize}px`;
+                    // Также обновляем line-height согласно новой шкале
+                    const fs = updates.fontSize;
+                    const lh = (fs <= 12) ? Math.round(fs * 1.40)
+                        : (fs <= 18) ? Math.round(fs * 1.34)
+                        : (fs <= 36) ? Math.round(fs * 1.26)
+                        : (fs <= 48) ? Math.round(fs * 1.24)
+                        : (fs <= 72) ? Math.round(fs * 1.22)
+                        : (fs <= 96) ? Math.round(fs * 1.20)
+                        : Math.round(fs * 1.18);
+                    el.style.lineHeight = `${lh}px`;
+                    // Синхронизируем базовый размер шрифта для дальнейших пересчётов (zoom/resize)
+                    el.dataset.baseFontSize = String(fs);
                     console.log(`🔍 HtmlTextLayer: обновлен размер шрифта для ${objectId}:`, updates.fontSize);
                 }
                 if (updates.color) {
@@ -106,7 +130,9 @@ export class HtmlTextLayer {
                     el.style.backgroundColor = updates.backgroundColor === 'transparent' ? '' : updates.backgroundColor;
                     console.log(`🔍 HtmlTextLayer: обновлен фон для ${objectId}:`, updates.backgroundColor);
                 }
-                // Здесь можно добавить обработку других свойств текста
+                // После изменения свойств текста — автоподгон высоты рамки под контент и принудительное обновление
+                this._autoFitTextHeight(objectId);
+                this.updateOne(objectId);
             }
         });
 
@@ -171,26 +197,40 @@ export class HtmlTextLayer {
         el.className = 'mb-text';
         el.dataset.id = objectId;
         // Получаем свойства из properties объекта
-        const fontFamily = objectData.fontFamily || objectData.properties?.fontFamily || 'Arial, sans-serif';
+        const fontFamily = objectData.properties?.fontFamily || objectData.fontFamily || 'Caveat, Arial, cursive';
         const color = objectData.color || objectData.properties?.color || '#000000';
         const backgroundColor = objectData.backgroundColor || objectData.properties?.backgroundColor || 'transparent';
         
-        Object.assign(el.style, {
-            position: 'absolute',
-            transformOrigin: 'top left',
-            color: color,
-            whiteSpace: 'pre-wrap',
-            overflowWrap: 'anywhere',
-            wordBreak: 'break-word',
-            pointerEvents: 'none', // всё взаимодействие остаётся на PIXI
-            userSelect: 'none',
-            fontFamily: fontFamily,
-            backgroundColor: backgroundColor === 'transparent' ? '' : backgroundColor
-        });
+        // Базовый line-height исходя из стартового размера шрифта
+        const baseFs = objectData.fontSize || objectData.properties?.fontSize || 32;
+        const baseLineHeight = (() => {
+            const fs = baseFs;
+            if (fs <= 12) return Math.round(fs * 1.40);
+            if (fs <= 18) return Math.round(fs * 1.34);
+            if (fs <= 36) return Math.round(fs * 1.26);
+            if (fs <= 48) return Math.round(fs * 1.24);
+            if (fs <= 72) return Math.round(fs * 1.22);
+            if (fs <= 96) return Math.round(fs * 1.20);
+            return Math.round(fs * 1.18);
+        })();
+
+        el.classList.add('mb-text');
+        el.style.color = color;
+        el.style.fontFamily = fontFamily;
+        el.style.backgroundColor = backgroundColor === 'transparent' ? '' : backgroundColor;
+        el.style.lineHeight = `${baseLineHeight}px`;
+        // Выравнивание рендеринга с textarea
+        el.style.whiteSpace = 'pre-wrap';
+        el.style.wordBreak = 'break-word';
+        el.style.overflow = 'visible';
+        el.style.letterSpacing = '0px';
+        el.style.fontKerning = 'normal';
+        el.style.textRendering = 'optimizeLegibility';
+        el.style.padding = '0'; // без внутренних отступов
         const content = objectData.content || objectData.properties?.content || '';
         el.textContent = content;
         // Базовые размеры сохраняем в dataset
-        const fs = objectData.fontSize || objectData.properties?.fontSize || 16;
+        const fs = objectData.fontSize || objectData.properties?.fontSize || 32;
         const bw = Math.max(1, objectData.width || objectData.properties?.baseW || 160);
         const bh = Math.max(1, objectData.height || objectData.properties?.baseH || 36);
         el.dataset.baseFontSize = String(fs);
@@ -230,24 +270,40 @@ export class HtmlTextLayer {
         const y = obj.position?.y || 0;
         const w = obj.width || 0;
         const h = obj.height || 0;
-        const angle = obj.rotation || obj.transform?.rotation || 0;
+        // Угол: во время поворота state ещё не обновлён, поэтому берем актуальный из PIXI
+        const pixiObj = this.core?.pixi?.objects?.get ? this.core.pixi.objects.get(objectId) : null;
+        const angle = (pixiObj && typeof pixiObj.rotation === 'number')
+            ? (pixiObj.rotation * 180 / Math.PI)
+            : (obj.rotation || obj.transform?.rotation || 0);
 
         // Чёткая отрисовка: меняем реальный font-size, учитывая зум и изменение размеров
-        const baseFS = parseFloat(el.dataset.baseFontSize || '16') || 16;
+        const baseFS = parseFloat(el.dataset.baseFontSize || `${obj.properties?.fontSize || obj.fontSize || 32}`) || 32;
         const baseW = parseFloat(el.dataset.baseW || '160') || 160;
         const baseH = parseFloat(el.dataset.baseH || '36') || 36;
         const scaleX = w && baseW ? (w / baseW) : 1;
         const scaleY = h && baseH ? (h / baseH) : 1;
-        // Для текстовых объектов не масштабируем шрифт от изменения размеров блока,
-        // чтобы сохранять вид как при редактировании (как в Miro)
-        const sObj = (obj?.type === 'text' || obj?.type === 'simple-text')
+        // Для записок также не масштабируем шрифт от размера блока — редактор совпадает точно
+        const sObj = (obj?.type === 'text' || obj?.type === 'simple-text' || obj?.type === 'note')
             ? 1
             : Math.min(scaleX, scaleY);
         const sCss = s / res;
         const fontSizePx = Math.max(1, baseFS * sObj * sCss);
         el.style.fontSize = `${fontSizePx}px`;
-        // Синхронизируем межстрочный интервал с режимом редактирования
-        el.style.lineHeight = `${fontSizePx}px`;
+        // Адаптивный межстрочный интервал по размеру шрифта
+        const computeLineHeightPx = (fs) => {
+            if (fs <= 12) return Math.round(fs * 1.40);
+            if (fs <= 18) return Math.round(fs * 1.34);
+            if (fs <= 36) return Math.round(fs * 1.26);
+            if (fs <= 48) return Math.round(fs * 1.24);
+            if (fs <= 72) return Math.round(fs * 1.22);
+            if (fs <= 96) return Math.round(fs * 1.20);
+            return Math.round(fs * 1.18);
+        };
+        // Применяем новый line-height только если он отличается от текущего, чтобы избежать конфликтов CSS
+        const newLH = `${computeLineHeightPx(fontSizePx)}px`;
+        if (el.style.lineHeight !== newLH) {
+            el.style.lineHeight = newLH;
+        }
 
         // Позиция и габариты в экранных координатах
         const left = (tx + s * x) / res;
@@ -258,18 +314,23 @@ export class HtmlTextLayer {
             el.style.width = `${Math.max(1, (w * s) / res)}px`;
             el.style.height = `${Math.max(1, (h * s) / res)}px`;
         }
-        // Поворот вокруг top-left
-        if (angle) {
-            el.style.transform = `rotate(${angle}deg)`;
-        } else {
-            el.style.transform = '';
-        }
+        // Поворот вокруг центра (как у PIXI и HTML-ручек)
+        el.style.transformOrigin = 'center center';
+        el.style.transform = angle ? `rotate(${angle}deg)` : '';
         // Текст
         const content = obj.content || obj.properties?.content;
         if (typeof content === 'string') {
             el.textContent = content;
             console.log(`🔍 HtmlTextLayer: содержимое обновлено в updateOne для ${objectId}:`, content);
         }
+
+        // Гарантируем, что высота соответствует контенту (особенно после смены font-size)
+        try {
+            el.style.height = 'auto';
+            // Добавим небольшой нижний отступ для хвостов букв, чтобы не отсекались (например, у «з»)
+            const h = Math.max(1, Math.round(el.scrollHeight + 2));
+            el.style.height = `${h}px`;
+        } catch (_) {}
         
         console.log(`🔍 HtmlTextLayer: позиция обновлена для ${objectId}:`, {
             left: `${left}px`,
@@ -282,6 +343,33 @@ export class HtmlTextLayer {
             textContent: el.textContent
         });
     }
+
+    _autoFitTextHeight(objectId) {
+        const el = this.idToEl.get(objectId);
+        if (!el || !this.core) return;
+        try {
+            // Измеряем фактическую высоту HTML-текста
+            el.style.height = 'auto';
+            const measured = Math.max(1, Math.round(el.scrollHeight));
+            el.style.height = `${measured}px`;
+            // Пересчитываем мировую высоту и отправляем обновление размера через события ResizeUpdate
+            const world = this.core.pixi.worldLayer || this.core.pixi.app.stage;
+            const s = world?.scale?.x || 1;
+            const res = (this.core?.pixi?.app?.renderer?.resolution) || 1;
+            const worldH = (measured * res) / s;
+            // Узнаём текущую ширину в мире
+            const obj = (this.core.state.state.objects || []).find(o => o.id === objectId);
+            const worldW = obj?.width || 0;
+            const position = obj?.position || null;
+            if (worldW > 0 && position) {
+                this.core.eventBus.emit(Events.Tool.ResizeUpdate, {
+                    object: objectId,
+                    size: { width: worldW, height: worldH },
+                    position
+                });
+            }
+        } catch (_) {}
+    }
 }