@sequent-org/moodboard 1.1.0 → 1.2.0

package/src/tools/object-tools/SelectTool.js

@@ -12,6 +12,19 @@ import { GroupResizeController } from './selection/GroupResizeController.js';
 import { GroupRotateController } from './selection/GroupRotateController.js';
 import { GroupDragController } from './selection/GroupDragController.js';
 import { BoxSelectController } from './selection/BoxSelectController.js';
+import cursorDefaultSvg from '../../assets/icons/cursor-default.svg?raw';
+
+// Построение data URL для курсора по умолчанию (стрелка) — масштабируем в 2 раза меньше
+const _scaledCursorSvg = (() => {
+    try {
+        return cursorDefaultSvg
+            .replace(/width="[^"]+"/i, 'width="25px"')
+            .replace(/height="[^"]+"/i, 'height="25px"');
+    } catch (_) {
+        return cursorDefaultSvg;
+    }
+})();
+const DEFAULT_CURSOR = '';
 
 /**
  * Инструмент выделения и работы с объектами
@@ -20,7 +33,7 @@ import { BoxSelectController } from './selection/BoxSelectController.js';
 export class SelectTool extends BaseTool {
     constructor(eventBus) {
         super('select', eventBus);
-        this.cursor = 'default';
+        this.cursor = DEFAULT_CURSOR;
         this.hotkey = 'v';
         
         // Флаг состояния объекта
@@ -118,6 +131,20 @@ export class SelectTool extends BaseTool {
                     }
                 }
             });
+
+            // Обработка удаления объектов (undo создания, delete команды и т.д.)
+            this.eventBus.on(Events.Object.Deleted, (data) => {
+                const objectId = data?.objectId || data;
+                if (objectId && this.selection.has(objectId)) {
+                    console.log(`🗑️ SelectTool: Объект ${objectId} удален, убираем из выделения`);
+                    this.removeFromSelection(objectId);
+                    
+                    // Если выделение стало пустым, скрываем ручки
+                    if (this.selection.size() === 0) {
+                        this.updateResizeHandles();
+                    }
+                }
+            });
 		}
         this.textEditor = {
             active: false,
@@ -143,7 +170,7 @@ export class SelectTool extends BaseTool {
         
         // Устанавливаем стандартный курсор для select инструмента
         if (this.app && this.app.view) {
-            this.app.view.style.cursor = 'default';
+            this.app.view.style.cursor = DEFAULT_CURSOR; // пусто → наследует глобальный CSS
         }
         
         // Инициализируем систему ручек изменения размера
@@ -229,9 +256,7 @@ export class SelectTool extends BaseTool {
         
         // Очищаем выделение и ручки
         this.clearSelection();
-        if (this.resizeHandles) {
-            this.resizeHandles.hideHandles();
-        }
+        // Скрываем любые старые PIXI-ручки: используем только HTML-ручки
         
         // Сбрасываем курсор на стандартный
         if (this.app && this.app.view) {
@@ -727,13 +752,8 @@ export class SelectTool extends BaseTool {
             const w = this._toWorld(event.x, event.y);
             this._dragCtrl.update({ ...event, x: w.x, y: w.y });
         }
-        // Сообщаем о процессе перетаскивания (с текущей позицией объекта)
-        if (this.isDragging && this.dragTarget) {
-            // Передаём текущий центр PIXI для точного расчёта dx/dy службами
-            const pix = this.getPixiObject(this.dragTarget);
-            const center = pix ? { x: pix.x, y: pix.y } : null;
-            this.emit(Events.Tool.DragUpdate, { object: this.dragTarget, pixiCenter: center });
-        }
+        // Обновление позиции в ядро уже выполняется через SimpleDragController (drag:update)
+        // Дополнительный эмит здесь не нужен и приводил к некорректным данным
         
         // Обновляем ручки во время перетаскивания
         if (this.resizeHandles && this.selection.has(this.dragTarget)) {
@@ -817,9 +837,7 @@ export class SelectTool extends BaseTool {
         }
         
         // Обновляем ручки в реальном времени во время resize
-        if (this.resizeHandles) {
-            this.resizeHandles.updateHandles();
-        }
+        // HTML-ручки обновляются слоем HtmlHandlesLayer
     }
     
     /**
@@ -850,9 +868,7 @@ export class SelectTool extends BaseTool {
         if (this._resizeCtrl) this._resizeCtrl.end();
         
         // Обновляем позицию ручек после resize
-        if (this.resizeHandles) {
-            this.resizeHandles.updateHandles(); // Обновляем позицию ручек
-        }
+        // HTML-ручки обновляются слоем HtmlHandlesLayer
         
         this.isResizing = false;
         this.resizeHandle = null;
@@ -928,9 +944,7 @@ export class SelectTool extends BaseTool {
         }
         
         // Обновляем ручки в реальном времени во время поворота
-        if (this.resizeHandles) {
-            this.resizeHandles.updateHandles();
-        }
+        // HTML-ручки обновляются слоем HtmlHandlesLayer
     }
     
     /**
@@ -1091,9 +1105,7 @@ export class SelectTool extends BaseTool {
         // Размещаем графику в левом-верхнем углу группы
         this.groupBoundsGraphics.position.set(bounds.x, bounds.y);
         // Обновляем ручки, если показаны
-        if (this.resizeHandles) {
-            this.resizeHandles.updateHandles();
-        }
+        // HTML-ручки обновляются слоем HtmlHandlesLayer
     }
 
     updateGroupBoundsGraphicsByTopLeft(topLeft) {
@@ -1179,7 +1191,7 @@ export class SelectTool extends BaseTool {
                 this.cursor = 'move';
                 break;
             default:
-                this.cursor = 'default';
+                this.cursor = DEFAULT_CURSOR;
         }
         
         this.setCursor();
@@ -1221,7 +1233,7 @@ export class SelectTool extends BaseTool {
         // Получаем ID выбранного объекта для определения его поворота
         const selectedObject = Array.from(this.selectedObjects)[0];
         if (!selectedObject) {
-            return 'default';
+            return DEFAULT_CURSOR;
         }
         
         // Получаем угол поворота объекта
@@ -1573,7 +1585,7 @@ export class SelectTool extends BaseTool {
         }
 
         
-        let { fontSize = 18, content = '', initialSize } = properties;
+        let { fontSize = 32, content = '', initialSize } = properties;
         
         // Определяем тип объекта
         const isNote = objectType === 'note';
@@ -1605,67 +1617,143 @@ export class SelectTool extends BaseTool {
             if (meta.fontSize) properties.fontSize = meta.fontSize;
         }
         
-        // Уведомляем о начале редактирования
-        this.eventBus.emit(Events.UI.TextEditStart, { objectId: objectId || null });
+        // Уведомляем о начале редактирования (для разных типов отдельно)
+        if (objectType === 'note') {
+            this.eventBus.emit(Events.UI.NoteEditStart, { objectId: objectId || null });
+        } else {
+            this.eventBus.emit(Events.UI.TextEditStart, { objectId: objectId || null });
+        }
+        // Прячем глобальные HTML-ручки на время редактирования, чтобы не было второй рамки
+        try {
+            if (typeof window !== 'undefined' && window.moodboardHtmlHandlesLayer) {
+                window.moodboardHtmlHandlesLayer.hide();
+            }
+        } catch (_) {}
         
         const app = this.app;
         const world = app?.stage?.getChildByName && app.stage.getChildByName('worldLayer');
         this.textEditor.world = world || null;
         const view = app?.view;
         if (!view) return;
-        if (this.resizeHandles && typeof this.resizeHandles.hideHandles === 'function') {
-            this.resizeHandles.hideHandles();
+        // Рассчитываем эффективный размер шрифта ДО вставки textarea в DOM, чтобы избежать скачка размера
+        const worldLayerEarly = world || (this.app?.stage);
+        const sEarly = worldLayerEarly?.scale?.x || 1;
+        const viewResEarly = (this.app?.renderer?.resolution) || (view.width && view.clientWidth ? (view.width / view.clientWidth) : 1);
+        const sCssEarly = sEarly / viewResEarly;
+        let effectiveFontPx = Math.max(1, Math.round((fontSize || 14) * sCssEarly));
+        // Точное выравнивание размеров:
+        if (objectId) {
+            if (objectType === 'note') {
+                try {
+                    const pixiReq = { objectId, pixiObject: null };
+                    this.eventBus.emit(Events.Tool.GetObjectPixi, pixiReq);
+                    const inst = pixiReq.pixiObject && pixiReq.pixiObject._mb && pixiReq.pixiObject._mb.instance;
+                    if (inst && inst.textField) {
+                        const wt = inst.textField.worldTransform;
+                        const scaleY = Math.max(0.0001, Math.hypot(wt.c || 0, wt.d || 0));
+                        const baseFS = parseFloat(inst.textField.style?.fontSize || fontSize || 14) || (fontSize || 14);
+                        effectiveFontPx = Math.max(1, Math.round(baseFS * (scaleY / viewResEarly)));
+                    }
+                } catch (_) {}
+            } else if (typeof window !== 'undefined' && window.moodboardHtmlTextLayer) {
+                const el = window.moodboardHtmlTextLayer.idToEl.get(objectId);
+                if (el && typeof window.getComputedStyle === 'function') {
+                    const cs = window.getComputedStyle(el);
+                    const f = parseFloat(cs.fontSize);
+                    if (isFinite(f) && f > 0) effectiveFontPx = Math.round(f);
+                }
+            }
         }
+        // Используем только HTML-ручки во время редактирования текста
         // Обертка для рамки + textarea + ручек
         const wrapper = document.createElement('div');
         wrapper.className = 'moodboard-text-editor';
         
-        // Убираем рамки и ручки для всех типов объектов в режиме редактирования
-        Object.assign(wrapper.style, {
-            position: 'absolute',
-            left: '0px',
-            top: '0px',
-            transformOrigin: '0 0',
-            boxSizing: 'border-box',
-            border: 'none', // Убираем рамку для всех типов
-            background: 'transparent',
-            zIndex: 10000,
-        });
+        // Базовые стили вынесены в CSS (.moodboard-text-editor)
         
         const textarea = document.createElement('textarea');
         textarea.className = 'moodboard-text-input';
         textarea.value = content || '';
-        textarea.placeholder = 'напишите что-нибудь';
-        
-        Object.assign(textarea.style, {
-            position: 'relative',
-            left: '0px',
-            top: '0px',
-            border: 'none',
-            padding: '0',
-            fontSize: `${fontSize}px`,
-            fontFamily: 'Arial, sans-serif',
-            lineHeight: `${fontSize}px`,
-            color: '#111', // Для записок делаем текст черным для лучшей видимости
-            background: 'white',
-            outline: 'none',
-            resize: 'none',
-            minWidth: '240px', // Для заметок уменьшаем минимальную ширину
-            minHeight: `${fontSize}px`,
-            width: '280px', // Для заметок уменьшаем начальную ширину
-            height: `${fontSize}px`,
-            boxSizing: 'content-box',
-            overflow: 'hidden',
-            // Повыше чёткость текста в CSS
-            WebkitFontSmoothing: 'antialiased',
-            MozOsxFontSmoothing: 'grayscale',
-            // Улучшенное перенесение слов, как в Miro
-            overflowWrap: 'anywhere',
-            wordBreak: 'break-word',
-            margin: '0',
-        });
+        textarea.placeholder = 'Напишите что-нибудь';
+        
+        // Адаптивный межстрочный интервал для ввода, синхронно с HtmlTextLayer
+        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);
+        };
+        // Вычисляем межстрочный интервал; подгоняем к реальным значениям HTML-отображения
+        let lhInitial = computeLineHeightPx(effectiveFontPx);
+        try {
+            if (objectId) {
+                if (objectType === 'note') {
+                    const pixiReq = { objectId, pixiObject: null };
+                    this.eventBus.emit(Events.Tool.GetObjectPixi, pixiReq);
+                    const inst = pixiReq.pixiObject && pixiReq.pixiObject._mb && pixiReq.pixiObject._mb.instance;
+                    if (inst && inst.textField) {
+                        const wt = inst.textField.worldTransform;
+                        const scaleY = Math.max(0.0001, Math.hypot(wt.c || 0, wt.d || 0));
+                        const baseLH = parseFloat(inst.textField.style?.lineHeight || (fontSize * 1.2)) || (fontSize * 1.2);
+                        lhInitial = Math.max(1, Math.round(baseLH * (scaleY / viewResEarly)));
+                    }
+                } else if (typeof window !== 'undefined' && window.moodboardHtmlTextLayer) {
+                    const el = window.moodboardHtmlTextLayer.idToEl.get(objectId);
+                    if (el) {
+                        const cs = window.getComputedStyle(el);
+                        const lh = parseFloat(cs.lineHeight);
+                        if (isFinite(lh) && lh > 0) lhInitial = Math.round(lh);
+                    }
+                }
+            }
+        } catch (_) {}
+        
+        // Базовые стили вынесены в CSS (.moodboard-text-input); здесь — только динамика
+        // Подбираем актуальный font-family из объекта
+        try {
+            if (objectId) {
+                if (objectType === 'note') {
+                    // Для записки читаем из PIXI-инстанса NoteObject
+                    const pixiReq = { objectId, pixiObject: null };
+                    this.eventBus.emit(Events.Tool.GetObjectPixi, pixiReq);
+                    const inst = pixiReq.pixiObject && pixiReq.pixiObject._mb && pixiReq.pixiObject._mb.instance;
+                    const ff = (inst && inst.textField && inst.textField.style && inst.textField.style.fontFamily)
+                        || (pixiReq.pixiObject && pixiReq.pixiObject._mb && pixiReq.pixiObject._mb.properties && pixiReq.pixiObject._mb.properties.fontFamily)
+                        || null;
+                    if (ff) textarea.style.fontFamily = ff;
+                } else if (typeof window !== 'undefined' && window.moodboardHtmlTextLayer) {
+                    // Для обычного текста читаем из HTML-элемента
+                    const el = window.moodboardHtmlTextLayer.idToEl.get(objectId);
+                    if (el) {
+                        const cs = window.getComputedStyle(el);
+                        const ff = cs && cs.fontFamily ? cs.fontFamily : null;
+                        if (ff) textarea.style.fontFamily = ff;
+                    }
+                }
+            }
+        } catch (_) {}
+        textarea.style.fontSize = `${effectiveFontPx}px`;
+        textarea.style.lineHeight = `${lhInitial}px`;
+        const BASELINE_FIX_INIT = 0; // без внутренних отступов — высота = line-height
+        const initialH = Math.max(1, lhInitial);
+        textarea.style.minHeight = `${initialH}px`;
+        textarea.style.height = `${initialH}px`;
+        textarea.setAttribute('rows', '1');
+        textarea.style.overflowY = 'hidden';
+        textarea.style.whiteSpace = 'pre-wrap';
+        textarea.style.wordBreak = 'break-word';
+        textarea.style.letterSpacing = '0px';
+        textarea.style.fontKerning = 'normal';
         
         wrapper.appendChild(textarea);
+        // Убрана зелёная рамка вокруг поля ввода по требованию
+        
+        // В режиме input не показываем локальные ручки
+        
+        // Не создаём локальные синие ручки: используем HtmlHandlesLayer (зелёные)
         
         // Убираем ручки ресайза для всех типов объектов
         // let handles = [];
@@ -1743,9 +1831,6 @@ export class SelectTool extends BaseTool {
         wrapper.appendChild(textarea);
         view.parentElement.appendChild(wrapper);
         
-        // Автоматически устанавливаем фокус на textarea
-        textarea.focus();
-        
         // Позиция обертки по миру → экран
         const toScreen = (wx, wy) => {
             const worldLayer = this.textEditor.world || (this.app?.stage);
@@ -1775,30 +1860,62 @@ export class SelectTool extends BaseTool {
                 }
             }
             
-            // Позиционируем редактор точно там, где находится текст на заметке
-            // В NoteObject текст позиционируется с topMargin = 20 и центрируется по горизонтали
-            const topMargin = 20; // Отступ от верха (ниже полоски)
-            const horizontalPadding = 8; // Отступы по горизонтали
-            const editorWidth = Math.min(280, noteWidth - (horizontalPadding * 2));
-            const editorHeight = Math.min(36, noteHeight - topMargin - horizontalPadding);
+            // Текст у записки центрирован по обеим осям; textarea тоже центрируем
+            const horizontalPadding = 16; // немного больше, чем раньше
+            const editorWidth = Math.min(360, noteWidth - (horizontalPadding * 2));
+            const editorHeight = Math.min(180, noteHeight - (horizontalPadding * 2));
             
-            // Позиционируем редактор точно там, где находится текст
-            // Текст центрирован по горизонтали и имеет отступ topMargin от верха
-            const textCenterX = noteWidth / 2; // центр текста по горизонтали
-            const textTopY = topMargin; // позиция текста по вертикали
+            const textCenterX = noteWidth / 2;
+            const textCenterY = noteHeight / 2;
             
-            // Позиционируем редактор так, чтобы его центр совпадал с центром текста
             const editorLeft = textCenterX - (editorWidth / 2);
-            const editorTop = textTopY;
+            const editorTop = textCenterY - (editorHeight / 2);
             
             wrapper.style.left = `${screenPos.x + editorLeft}px`;
             wrapper.style.top = `${screenPos.y + editorTop}px`;
             
-            // Устанавливаем размеры редактора
+            // Устанавливаем размеры редактора (центрируем по контенту)
             textarea.style.width = `${editorWidth}px`;
             textarea.style.height = `${editorHeight}px`;
             wrapper.style.width = `${editorWidth}px`;
             wrapper.style.height = `${editorHeight}px`;
+
+            // Для записок: авто-ресайз редактора под содержимое с сохранением центрирования
+            textarea.style.textAlign = 'center';
+            const maxEditorWidth = Math.max(1, noteWidth - (horizontalPadding * 2));
+            const maxEditorHeight = Math.max(1, noteHeight - (horizontalPadding * 2));
+            const MIN_NOTE_EDITOR_W = 20;
+            const MIN_NOTE_EDITOR_H = Math.max(1, computeLineHeightPx(effectiveFontPx));
+
+            const autoSizeNote = () => {
+                // Сначала сбрасываем размеры, чтобы измерить естественные
+                const prevW = textarea.style.width;
+                const prevH = textarea.style.height;
+                textarea.style.width = 'auto';
+                textarea.style.height = 'auto';
+
+                // Ширина по содержимому, но не шире границ записки
+                const naturalW = Math.ceil(textarea.scrollWidth + 1);
+                const targetW = Math.min(maxEditorWidth, Math.max(MIN_NOTE_EDITOR_W, naturalW));
+                textarea.style.width = `${targetW}px`;
+                wrapper.style.width = `${targetW}px`;
+
+                // Высота по содержимому, c нижним пределом = одна строка
+                const computed = (typeof window !== 'undefined') ? window.getComputedStyle(textarea) : null;
+                const lineH = (computed ? parseFloat(computed.lineHeight) : computeLineHeightPx(effectiveFontPx));
+                const naturalH = Math.ceil(textarea.scrollHeight);
+                const targetH = Math.min(maxEditorHeight, Math.max(MIN_NOTE_EDITOR_H, naturalH));
+                textarea.style.height = `${targetH}px`;
+                wrapper.style.height = `${targetH}px`;
+
+                // Центрируем wrapper внутри записки после смены размеров
+                const left = screenPos.x + (noteWidth / 2) - (targetW / 2);
+                const top = screenPos.y + (noteHeight / 2) - (targetH / 2);
+                wrapper.style.left = `${left}px`;
+                wrapper.style.top = `${top}px`;
+            };
+            // Первый вызов — синхронизировать с текущим содержимым
+            autoSizeNote();
         } else {
             // Для обычного текста используем стандартное позиционирование
             wrapper.style.left = `${screenPos.x}px`;
@@ -1808,18 +1925,39 @@ export class SelectTool extends BaseTool {
         const worldLayerRef = this.textEditor.world || (this.app?.stage);
         const s = worldLayerRef?.scale?.x || 1;
         const viewRes = (this.app?.renderer?.resolution) || (view.width && view.clientWidth ? (view.width / view.clientWidth) : 1);
+        const sCss = s / viewRes;
+        // Синхронизируем стартовый размер шрифта textarea с текущим зумом (как HtmlTextLayer)
+        // Используем ранее вычисленный effectiveFontPx (до вставки в DOM), если он есть в замыкании
+        textarea.style.fontSize = `${effectiveFontPx}px`;
         const initialWpx = initialSize ? Math.max(1, (initialSize.width || 0) * s / viewRes) : null;
         const initialHpx = initialSize ? Math.max(1, (initialSize.height || 0) * s / viewRes) : null;
         
         // Определяем минимальные границы для всех типов объектов
         let minWBound = initialWpx || 120; // базово близко к призраку
-        let minHBound = fontSize; // высота по шрифту, чтобы не было пустого пространства
+        let minHBound = effectiveFontPx; // базовая высота
+        // Уменьшаем визуальный нижний запас, который браузеры добавляют к textarea
+        const BASELINE_FIX = 2; // px
+        if (!isNote) {
+            minHBound = Math.max(1, effectiveFontPx - BASELINE_FIX);
+        }
 
-        // Если создаём новый текст — выставляем стартовый размер, как у призрака, но чуть шире
+        // Если создаём новый текст — длина поля ровно как placeholder
         if (create && !isNote) {
-            const ghostWidth = 120;
-            const startWidth = Math.round(ghostWidth * 1.33); // чуть длиннее призрака (~160px)
-            const startHeight = fontSize; // высота равна высоте шрифта
+            const measureTextWidth = (text) => {
+                const sEl = document.createElement('span');
+                sEl.style.position = 'absolute';
+                sEl.style.visibility = 'hidden';
+                sEl.style.whiteSpace = 'pre';
+                sEl.style.fontFamily = textarea.style.fontFamily;
+                sEl.style.fontSize = textarea.style.fontSize;
+                sEl.textContent = 'Напишите что-нибудь';
+                document.body.appendChild(sEl);
+                const w = Math.ceil(sEl.getBoundingClientRect().width);
+                sEl.remove();
+                return w;
+            };
+            const startWidth = Math.max(1, measureTextWidth('Напишите что-нибудь'));
+            const startHeight = Math.max(1, lhInitial - BASELINE_FIX + 10); // +5px сверху и +5px снизу
             textarea.style.width = `${startWidth}px`;
             textarea.style.height = `${startHeight}px`;
             wrapper.style.width = `${startWidth}px`;
@@ -1863,16 +2001,17 @@ export class SelectTool extends BaseTool {
             textarea.style.height = 'auto';
             // Коррекция высоты: для одной строки принудительно равна line-height,
             // для нескольких строк используем scrollHeight с небольшим вычетом браузерного запаса
-            const adjust = 2;
+            const adjust = BASELINE_FIX;
             const computed = (typeof window !== 'undefined') ? window.getComputedStyle(textarea) : null;
-            const lineH = computed ? parseFloat(computed.lineHeight) : (fontSize || 18);
+            const lineH = (computed ? parseFloat(computed.lineHeight) : computeLineHeightPx(effectiveFontPx)) + 10; // +5px сверху и +5px снизу
             const rawH = textarea.scrollHeight;
             const lines = lineH > 0 ? Math.max(1, Math.round(rawH / lineH)) : 1;
             const targetH = lines <= 1
-                ? lineH
+                ? Math.max(minHBound, Math.max(1, lineH - BASELINE_FIX))
                 : Math.max(minHBound, Math.max(1, rawH - adjust));
             textarea.style.height = `${targetH}px`;
             wrapper.style.height = `${targetH}px`;
+            // Ручки скрыты в режиме input
         };
         
         // Вызываем autoSize только для обычного текста
@@ -1880,16 +2019,29 @@ export class SelectTool extends BaseTool {
             autoSize();
         }
         textarea.focus();
+        // Ручки скрыты в режиме input
         // Локальная CSS-настройка placeholder (меньше базового шрифта)
         const uid = 'mbti-' + Math.random().toString(36).slice(2);
         textarea.classList.add(uid);
         const styleEl = document.createElement('style');
-        const phSize = Math.max(12, Math.round(fontSize * 0.8));
+        const phSize = effectiveFontPx;
         const placeholderOpacity = isNote ? '0.4' : '0.6'; // Для записок делаем placeholder менее заметным
-        styleEl.textContent = `.${uid}::placeholder{font-size:${phSize}px;opacity:${placeholderOpacity};}`;
+        styleEl.textContent = `.${uid}::placeholder{font-size:${phSize}px;opacity:${placeholderOpacity};line-height:${computeLineHeightPx(phSize)}px;white-space:nowrap;}`;
         document.head.appendChild(styleEl);
         this.textEditor = { active: true, objectId, textarea, wrapper, world: this.textEditor.world, position, properties: { fontSize }, objectType, _phStyle: styleEl };
 
+        // Если редактируем записку — скрываем PIXI-текст записки (чтобы не было дублирования)
+        if (objectType === 'note' && objectId) {
+            try {
+                const pixiReq = { objectId, pixiObject: null };
+                this.eventBus.emit(Events.Tool.GetObjectPixi, pixiReq);
+                const inst = pixiReq.pixiObject && pixiReq.pixiObject._mb && pixiReq.pixiObject._mb.instance;
+                if (inst && typeof inst.hideText === 'function') {
+                    inst.hideText();
+                }
+            } catch (_) {}
+        }
+
         // Скрываем статичный текст во время редактирования для всех типов объектов
         if (objectId) {
             // Проверяем, что HTML-элемент существует перед попыткой скрыть текст
@@ -1905,41 +2057,7 @@ export class SelectTool extends BaseTool {
             }
         }
         // Ресайз мышью только для обычного текста
-        if (!isNote) {
-            const onHandleDown = (e) => {
-                e.preventDefault(); e.stopPropagation();
-                const dir = e.target.dataset.dir;
-                if (!dir) return;
-                const start = {
-                    x: e.clientX, y: e.clientY,
-                    w: wrapper.offsetWidth, h: wrapper.offsetHeight,
-                    left: parseFloat(wrapper.style.left), top: parseFloat(wrapper.style.top), dir
-                };
-                const onMove = (ev) => {
-                    const dx = ev.clientX - start.x;
-                    const dy = ev.clientY - start.y;
-                    let newW = start.w, newH = start.h, newLeft = start.left, newTop = start.top;
-                    if (dir.includes('e')) newW = Math.max(80, start.w + dx);
-                    if (dir.includes('s')) newH = Math.max(24, start.h + dy);
-                    if (dir.includes('w')) { newW = Math.max(80, start.w - dx); newLeft = start.left + dx; }
-                    if (dir.includes('n')) { newH = Math.max(24, start.h - dy); newTop = start.top + dy; }
-                    wrapper.style.width = `${newW}px`;
-                    wrapper.style.height = `${newH}px`;
-                    wrapper.style.left = `${newLeft}px`;
-                    wrapper.style.top = `${newTop}px`;
-                    textarea.style.width = `${Math.max(minWBound, newW)}px`;
-                    textarea.style.height = `${Math.max(minHBound, newH)}px`;
-                    // placeHandles();
-                };
-                const onUp = () => {
-                    document.removeEventListener('mousemove', onMove);
-                    document.removeEventListener('mouseup', onUp);
-                };
-                document.addEventListener('mousemove', onMove);
-                document.addEventListener('mouseup', onUp);
-            };
-            // handles.forEach(h => h.addEventListener('mousedown', onHandleDown));
-        }
+        // Не используем локальные ручки: ресайз обрабатывает HtmlHandlesLayer
         // Завершение
         const isNewCreation = !!create;
         const finalize = (commit) => {
@@ -1994,9 +2112,29 @@ export class SelectTool extends BaseTool {
                 }
             }
 
+            // Убираем редактор
             wrapper.remove();
             this.textEditor = { active: false, objectId: null, textarea: null, wrapper: null, world: null, position: null, properties: null, objectType: 'text' };
-            this.eventBus.emit(Events.UI.TextEditEnd, { objectId: objectId || null });
+            if (currentObjectType === 'note') {
+                this.eventBus.emit(Events.UI.NoteEditEnd, { objectId: objectId || null });
+                // Вернём PIXI-текст записки
+                try {
+                    const pixiReq = { objectId, pixiObject: null };
+                    this.eventBus.emit(Events.Tool.GetObjectPixi, pixiReq);
+                    const inst = pixiReq.pixiObject && pixiReq.pixiObject._mb && pixiReq.pixiObject._mb.instance;
+                    if (inst && typeof inst.showText === 'function') {
+                        inst.showText();
+                    }
+                } catch (_) {}
+            } else {
+                this.eventBus.emit(Events.UI.TextEditEnd, { objectId: objectId || null });
+            }
+            // Возвращаем глобальные HTML-ручки (обновляем слой)
+            try {
+                if (typeof window !== 'undefined' && window.moodboardHtmlHandlesLayer) {
+                    window.moodboardHtmlHandlesLayer.update();
+                }
+            } catch (_) {}
             if (!commitValue) {
                 // Если это было создание нового текста и оно отменено — удаляем пустой объект
                 if (isNewCreation && objectId) {
@@ -2075,9 +2213,55 @@ export class SelectTool extends BaseTool {
                 finalize(false);
             }
         });
-        // Автоподгон при вводе только для обычного текста
+        // Автоподгон при вводе
         if (!isNote) {
             textarea.addEventListener('input', autoSize);
+        } else {
+            // Для заметок растягиваем редактор по содержимому и центрируем
+            textarea.addEventListener('input', () => {
+                try {
+                    // Найдём локальную функцию, если она объявлена выше (в замыкании)
+                    // В некоторых движках можно хранить ссылку на функцию в data-атрибуте
+                    // но здесь просто повторим алгоритм: сброс -> измерение -> ограничение -> центрирование
+                    const view = this.app?.view || document.querySelector('canvas');
+                    // Безопасно получим текущие размеры записки
+                    let noteWidth = 300, noteHeight = 300;
+                    if (objectId) {
+                        const sizeData = { objectId, size: null };
+                        this.eventBus.emit(Events.Tool.GetObjectSize, sizeData);
+                        if (sizeData.size) { noteWidth = sizeData.size.width; noteHeight = sizeData.size.height; }
+                    }
+                    const horizontalPadding = 16;
+                    const maxEditorWidth = Math.max(1, noteWidth - (horizontalPadding * 2));
+                    const maxEditorHeight = Math.max(1, noteHeight - (horizontalPadding * 2));
+                    const MIN_NOTE_EDITOR_W = 20;
+                    const MIN_NOTE_EDITOR_H = Math.max(1, computeLineHeightPx(effectiveFontPx));
+
+                    textarea.style.width = 'auto';
+                    textarea.style.height = 'auto';
+                    const naturalW = Math.ceil(textarea.scrollWidth + 1);
+                    const targetW = Math.min(maxEditorWidth, Math.max(MIN_NOTE_EDITOR_W, naturalW));
+                    textarea.style.width = `${targetW}px`;
+                    const computed = (typeof window !== 'undefined') ? window.getComputedStyle(textarea) : null;
+                    const lineH = (computed ? parseFloat(computed.lineHeight) : computeLineHeightPx(effectiveFontPx));
+                    const naturalH = Math.ceil(textarea.scrollHeight);
+                    const targetH = Math.min(maxEditorHeight, Math.max(MIN_NOTE_EDITOR_H, naturalH));
+                    textarea.style.height = `${targetH}px`;
+                    wrapper.style.width = `${targetW}px`;
+                    wrapper.style.height = `${targetH}px`;
+
+                    const toScreen = (wx, wy) => {
+                        const worldLayer = this.textEditor.world || (this.app?.stage);
+                        if (!worldLayer) return { x: wx, y: wy };
+                        const global = worldLayer.toGlobal(new PIXI.Point(wx, wy));
+                        const viewRes = (this.app?.renderer?.resolution) || (view && view.width && view.clientWidth ? (view.width / view.clientWidth) : 1);
+                        return { x: global.x / viewRes, y: global.y / viewRes };
+                    };
+                    const screenPos = toScreen(position.x, position.y);
+                    wrapper.style.left = `${screenPos.x + (noteWidth / 2) - (targetW / 2)}px`;
+                    wrapper.style.top = `${screenPos.y + (noteHeight / 2) - (targetH / 2)}px`;
+                } catch (_) {}
+            });
         }
     }