@sequent-org/moodboard 1.2.15 → 1.2.17

package/package.json

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

package/src/core/PixiEngine.js

@@ -1,6 +1,7 @@
 import * as PIXI from 'pixi.js';
 import { ObjectFactory } from '../objects/ObjectFactory.js';
 import { ObjectRenderer } from './rendering/ObjectRenderer.js';
+import { Events } from './events/Events.js';
 
 export class PixiEngine {
     constructor(container, eventBus, options) {
@@ -38,13 +39,33 @@ export class PixiEngine {
         this.app.stage.addChild(this.worldLayer);
 
         // Инициализируем ObjectRenderer
-        this.renderer = new ObjectRenderer(this.objects);
+        this.renderer = new ObjectRenderer(this.objects, this.eventBus);
+
+        // Поддержка чёткости текстов записок при зуме: подписка на событие зума
+        if (this.eventBus) {
+            const onZoom = ({ percentage }) => {
+                try {
+                    const world = this.worldLayer || this.app.stage;
+                    const s = world?.scale?.x || (percentage ? percentage / 100 : 1);
+                    const res = this.app?.renderer?.resolution || 1;
+                    for (const [, pixiObject] of this.objects) {
+                        const mb = pixiObject && pixiObject._mb;
+                        if (mb && mb.type === 'note' && mb.instance && typeof mb.instance.updateCrispnessForZoom === 'function') {
+                            mb.instance.updateCrispnessForZoom(s, res);
+                        }
+                    }
+                } catch (e) {
+                    console.warn('PixiEngine: zoom crispness update failed', e);
+                }
+            };
+            this.eventBus.on(Events.UI.ZoomPercent, onZoom);
+        }
     }
 
     createObject(objectData) {
         let pixiObject;
 
-        const instance = ObjectFactory.create(objectData.type, objectData);
+        const instance = ObjectFactory.create(objectData.type, objectData, this.eventBus);
         if (instance) {
             pixiObject = instance.getPixi();
             const prevMb = pixiObject._mb || {};
@@ -56,6 +77,15 @@ export class PixiEngine {
             };
             this.objects.set(objectData.id, pixiObject);
             this.worldLayer.addChild(pixiObject);
+            // Первичная установка чёткости для записок по текущему масштабу/резолюции
+            try {
+                if (pixiObject && pixiObject._mb && pixiObject._mb.type === 'note' && pixiObject._mb.instance && typeof pixiObject._mb.instance.updateCrispnessForZoom === 'function') {
+                    const world = this.worldLayer || this.app.stage;
+                    const s = world?.scale?.x || 1;
+                    const res = this.app?.renderer?.resolution || 1;
+                    pixiObject._mb.instance.updateCrispnessForZoom(s, res);
+                }
+            } catch (_) {}
         } else {
             console.warn(`Unknown object type: ${objectData.type}`);
             pixiObject = this.createDefaultObject(objectData);

package/src/core/rendering/ObjectRenderer.js

@@ -7,8 +7,9 @@ import { GeometryUtils } from './GeometryUtils.js';
  * Отвечает за создание, обновление и удаление PIXI объектов
  */
 export class ObjectRenderer {
-    constructor(objectsMap) {
+    constructor(objectsMap, eventBus = null) {
         this.objects = objectsMap; // Map<id, pixiObject> из PixiEngine
+        this.eventBus = eventBus;
     }
 
     /**
@@ -20,7 +21,7 @@ export class ObjectRenderer {
         let pixiObject;
 
         // Создаем объект через фабрику
-        const instance = ObjectFactory.create(objectData.type, objectData);
+        const instance = ObjectFactory.create(objectData.type, objectData, this.eventBus);
         if (instance) {
             pixiObject = instance.getPixi();
             this._setupObjectMetadata(pixiObject, objectData, instance);

package/src/objects/FrameObject.js

@@ -1,4 +1,5 @@
 import * as PIXI from 'pixi.js';
+import { Events } from '../core/events/Events.js';
 
 /**
  * Класс объекта «Фрейм» (контейнерная прямоугольная область)
@@ -7,9 +8,11 @@ import * as PIXI from 'pixi.js';
 export class FrameObject {
     /**
      * @param {Object} objectData Полные данные объекта из состояния
+     * @param {Object} eventBus EventBus для подписки на события зума
      */
-    constructor(objectData) {
+    constructor(objectData, eventBus = null) {
         this.objectData = objectData || {};
+        this.eventBus = eventBus;
         this.width = this.objectData.width || 100;
         this.height = this.objectData.height || 100;
         // Берем стили рамки из CSS-переменных, с дефолтом
@@ -37,19 +40,30 @@ export class FrameObject {
         this.container.addChild(this.graphics);
         
         // Текст заголовка
+        this.baseFontSize = 14; // Сохраняем оригинальный размер шрифта
+        this.currentWorldScale = 1.0; // Текущий масштаб мира
+        this.originalTitle = this.title; // Сохраняем оригинальный заголовок
         this.titleText = new PIXI.Text(this.title, {
             fontFamily: 'Arial, sans-serif',
-            fontSize: 14,
+            fontSize: this.baseFontSize,
             fill: 0x333333,
             fontWeight: 'bold'
         });
         // Размещаем заголовок внутри верхней части фрейма, чтобы не влиять на внешние границы
         this.titleText.anchor.set(0, 0);
+        this.titleText.scale.set(1); // Инициализируем базовый масштаб
         this.titleText.x = 8;
         this.titleText.y = 4;
         this.container.addChild(this.titleText);
         
+        // Подписываемся на события зума для компенсации масштабирования заголовка
+        if (this.eventBus) {
+            this.eventBus.on(Events.UI.ZoomPercent, this._onZoomChange.bind(this));
+        }
+        
         this._draw(this.width, this.height, this.fillColor);
+        // Применяем начальный масштаб и обрезку заголовка
+        this._updateTitleScale();
         // Центрируем pivot контейнера, чтобы совпадали рамка и ручки
         // pivot по центру, чтобы позиция (x,y) контейнера соответствовала центру видимой области фрейма
         this.container.pivot.set(this.width / 2, this.height / 2);
@@ -79,9 +93,8 @@ export class FrameObject {
      */
     setTitle(title) {
         this.title = title || 'Новый';
-        if (this.titleText) {
-            this.titleText.text = this.title;
-        }
+        this.originalTitle = this.title;
+        this._updateTitleText();
     }
 
     /**
@@ -125,6 +138,9 @@ export class FrameObject {
         container.x = x;
         container.y = y;
         container.rotation = rot;
+        
+        // Обновляем заголовок после перерисовки
+        this._updateTitleText();
     }
 
     /**
@@ -152,5 +168,125 @@ export class FrameObject {
                    point.y <= bounds.y + bounds.height;
         };
     }
+
+    /**
+     * Обработчик изменения зума
+     * @param {Object} data Данные события с процентом зума
+     */
+    _onZoomChange(data) {
+        if (!data || typeof data.percentage !== 'number') return;
+        
+        const worldScale = data.percentage / 100;
+        this.currentWorldScale = worldScale;
+        this._updateTitleScale();
+    }
+
+    /**
+     * Обновить масштаб заголовка для компенсации зума
+     */
+    _updateTitleScale() {
+        if (!this.titleText) return;
+        
+        // Компенсируем зум мира обратным масштабированием заголовка
+        const compensationScale = 1 / this.currentWorldScale;
+        
+        // Используем scale вместо fontSize для избежания размытия
+        this.titleText.scale.set(compensationScale);
+        
+        // Корректируем позицию заголовка с учетом изменения масштаба
+        this.titleText.x = 8 * compensationScale;
+        this.titleText.y = 4 * compensationScale;
+        
+        // Обновляем текст с учетом нового масштаба
+        this._updateTitleText();
+    }
+
+    /**
+     * Обновить текст заголовка с учетом доступной ширины
+     */
+    _updateTitleText() {
+        if (!this.titleText) return;
+
+        const truncatedText = this._truncateTextToFit(this.originalTitle);
+        this.titleText.text = truncatedText;
+    }
+
+    /**
+     * Обрезать текст до доступной ширины с добавлением многоточия
+     * @param {string} text Исходный текст
+     * @returns {string} Обрезанный текст с многоточием или оригинальный текст
+     */
+    _truncateTextToFit(text) {
+        if (!text || !this.titleText) return text;
+
+        // Компенсация масштаба для правильного расчета размеров
+        const compensationScale = 1 / this.currentWorldScale;
+        
+        // Доступная ширина = ширина фрейма - отступы слева и справа (с учетом масштаба)
+        const leftPadding = 8 * compensationScale;
+        const rightPadding = 8 * compensationScale;
+        const availableWidth = this.width - leftPadding - rightPadding;
+
+        // Создаем временный стиль для измерения текста
+        // Используем базовый размер шрифта, а масштаб учтем отдельно
+        const style = new PIXI.TextStyle({
+            fontFamily: this.titleText.style.fontFamily,
+            fontSize: this.baseFontSize,
+            fontWeight: this.titleText.style.fontWeight
+        });
+
+        // Измеряем ширину оригинального текста с учетом масштаба
+        const textMetrics = PIXI.TextMetrics.measureText(text, style);
+        const scaledTextWidth = textMetrics.width * compensationScale;
+        
+        // Если текст помещается, возвращаем его как есть
+        if (scaledTextWidth <= availableWidth) {
+            return text;
+        }
+
+        // Измеряем ширину многоточия с учетом масштаба
+        const ellipsisMetrics = PIXI.TextMetrics.measureText('...', style);
+        const ellipsisWidth = ellipsisMetrics.width * compensationScale;
+        
+        // Доступная ширина для текста без многоточия
+        const textAvailableWidth = availableWidth - ellipsisWidth;
+        
+        if (textAvailableWidth <= 0) {
+            return '...';
+        }
+
+        // Бинарный поиск оптимальной длины текста
+        let left = 0;
+        let right = text.length;
+        let result = '';
+
+        while (left <= right) {
+            const mid = Math.floor((left + right) / 2);
+            const subText = text.substring(0, mid);
+            const subTextMetrics = PIXI.TextMetrics.measureText(subText, style);
+            const scaledSubTextWidth = subTextMetrics.width * compensationScale;
+
+            if (scaledSubTextWidth <= textAvailableWidth) {
+                result = subText;
+                left = mid + 1;
+            } else {
+                right = mid - 1;
+            }
+        }
+
+        return result + '...';
+    }
+
+    /**
+     * Метод для отписки от событий при уничтожении объекта
+     */
+    destroy() {
+        if (this.eventBus) {
+            this.eventBus.off(Events.UI.ZoomPercent, this._onZoomChange.bind(this));
+        }
+        if (this.container) {
+            this.container.destroy({ children: true });
+        }
+    }
 }
 

package/src/objects/NoteObject.js

@@ -412,4 +412,27 @@ export class NoteObject {
         this.textField.x = centerX;
         this.textField.y = centerY;
     }
+
+    /**
+     * Корректирует чёткость текста при изменении масштаба мира.
+     * Увеличиваем resolution текстовой текстуры пропорционально зуму,
+     * затем перерисовываем текст без изменения визуального размера.
+     * @param {number} worldScale текущий масштаб worldLayer (например, 1.2)
+     * @param {number} deviceResolution текущее renderer.resolution (обычно devicePixelRatio)
+     */
+    updateCrispnessForZoom(worldScale, deviceResolution) {
+        try {
+            if (!this.textField) return;
+            const dpr = Math.max(1, Number(deviceResolution) || 1);
+            const s = Math.max(0.1, Number(worldScale) || 1);
+            const targetRes = Math.max(1, dpr * s);
+            if (this.textField.resolution !== targetRes) {
+                this.textField.resolution = targetRes;
+                // Для стабильной отрисовки
+                this.textField.roundPixels = true;
+                // Принудительно пересчитать текстуру под новую resolution
+                this.textField.updateText();
+            }
+        } catch (_) {}
+    }
 }

package/src/objects/ObjectFactory.js

@@ -40,12 +40,17 @@ export class ObjectFactory {
      * Создать инстанс объекта по типу
      * @param {string} type
      * @param {Object} objectData
+     * @param {Object} eventBus EventBus для объектов, которым он нужен
      * @returns {any|null}
      */
-    static create(type, objectData = {}) {
+    static create(type, objectData = {}, eventBus = null) {
         const Ctor = this.registry.get(type);
         if (!Ctor) return null;
         try {
+            // Если тип объекта - фрейм, передаем eventBus
+            if (type === 'frame' && eventBus) {
+                return new Ctor(objectData, eventBus);
+            }
             return new Ctor(objectData);
         } catch (e) {
             console.error(`ObjectFactory: failed to create instance for type "${type}"`, e);

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

@@ -135,9 +135,15 @@ export class SelectTool extends BaseTool {
             // Обработка удаления объектов (undo создания, delete команды и т.д.)
             this.eventBus.on(Events.Object.Deleted, (data) => {
                 const objectId = data?.objectId || data;
-                console.log('🗑️ SelectTool: получено событие удаления объекта:', objectId);
+                console.log('🗑️ SelectTool: получено событие удаления объекта:', objectId, 'данные:', data);
                 
-                if (objectId && this.selection.has(objectId)) {
+                // ЗАЩИТА: Проверяем что данные валидны
+                if (!objectId) {
+                    console.warn('⚠️ SelectTool: получено событие удаления с невалидным objectId');
+                    return;
+                }
+                
+                if (this.selection.has(objectId)) {
                     console.log('🗑️ SelectTool: удаляем объект из selection:', objectId);
                     this.removeFromSelection(objectId);
                     
@@ -147,10 +153,9 @@ export class SelectTool extends BaseTool {
                         this.emit(Events.Tool.SelectionClear);
                         this.updateResizeHandles();
                     }
-                } else if (objectId) {
-                    console.log('🗑️ SelectTool: объект не был в selection, но проверяем ручки');
-                    // Дополнительная проверка - возможно объект был удален не через selection
-                    // Принудительно обновляем ручки
+                } else {
+                    console.log('🗑️ SelectTool: объект не был в selection, обновляем ручки на всякий случай');
+                    // Принудительно обновляем ручки без излишних действий
                     this.updateResizeHandles();
                 }
             });
@@ -1865,28 +1870,31 @@ export class SelectTool extends BaseTool {
             
             // Текст у записки центрирован по обеим осям; textarea тоже центрируем
             const horizontalPadding = 16; // немного больше, чем раньше
-            const editorWidth = Math.min(360, noteWidth - (horizontalPadding * 2));
-            const editorHeight = Math.min(180, noteHeight - (horizontalPadding * 2));
-            
-            const textCenterX = noteWidth / 2;
-            const textCenterY = noteHeight / 2;
-            
-            const editorLeft = textCenterX - (editorWidth / 2);
-            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`;
+            // Преобразуем мировые размеры/отступы в CSS-пиксели с учётом текущего зума
+            const viewResLocal = (this.app?.renderer?.resolution) || (view.width && view.clientWidth ? (view.width / view.clientWidth) : 1);
+            const worldLayerRefForCss = this.textEditor.world || (this.app?.stage);
+            const sForCss = worldLayerRefForCss?.scale?.x || 1;
+            const sCssLocal = sForCss / viewResLocal;
+            const editorWidthWorld = Math.min(360, Math.max(1, noteWidth - (horizontalPadding * 2)));
+            const editorHeightWorld = Math.min(180, Math.max(1, noteHeight - (horizontalPadding * 2)));
+            const editorWidthPx = Math.max(1, Math.round(editorWidthWorld * sCssLocal));
+            const editorHeightPx = Math.max(1, Math.round(editorHeightWorld * sCssLocal));
+            const textCenterXWorld = noteWidth / 2;
+            const textCenterYWorld = noteHeight / 2;
+            const editorLeftWorld = textCenterXWorld - (editorWidthWorld / 2);
+            const editorTopWorld = textCenterYWorld - (editorHeightWorld / 2);
+            wrapper.style.left = `${Math.round(screenPos.x + editorLeftWorld * sCssLocal)}px`;
+            wrapper.style.top = `${Math.round(screenPos.y + editorTopWorld * sCssLocal)}px`;
+            // Устанавливаем размеры редактора (центрируем по контенту) в CSS-пикселях
+            textarea.style.width = `${editorWidthPx}px`;
+            textarea.style.height = `${editorHeightPx}px`;
+            wrapper.style.width = `${editorWidthPx}px`;
+            wrapper.style.height = `${editorHeightPx}px`;
 
             // Для записок: авто-ресайз редактора под содержимое с сохранением центрирования
             textarea.style.textAlign = 'center';
-            const maxEditorWidth = Math.max(1, noteWidth - (horizontalPadding * 2));
-            const maxEditorHeight = Math.max(1, noteHeight - (horizontalPadding * 2));
+            const maxEditorWidthPx = Math.max(1, Math.round((noteWidth - (horizontalPadding * 2)) * sCssLocal));
+            const maxEditorHeightPx = Math.max(1, Math.round((noteHeight - (horizontalPadding * 2)) * sCssLocal));
             const MIN_NOTE_EDITOR_W = 20;
             const MIN_NOTE_EDITOR_H = Math.max(1, computeLineHeightPx(effectiveFontPx));
 
@@ -1897,9 +1905,9 @@ export class SelectTool extends BaseTool {
                 textarea.style.width = 'auto';
                 textarea.style.height = 'auto';
 
-                // Ширина по содержимому, но не шире границ записки
+                // Ширина по содержимому, но не шире границ записки (в CSS-пикселях)
                 const naturalW = Math.ceil(textarea.scrollWidth + 1);
-                const targetW = Math.min(maxEditorWidth, Math.max(MIN_NOTE_EDITOR_W, naturalW));
+                const targetW = Math.min(maxEditorWidthPx, Math.max(MIN_NOTE_EDITOR_W, naturalW));
                 textarea.style.width = `${targetW}px`;
                 wrapper.style.width = `${targetW}px`;
 
@@ -1907,18 +1915,79 @@ export class SelectTool extends BaseTool {
                 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));
+                const targetH = Math.min(maxEditorHeightPx, 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 внутри записки после смены размеров (в CSS-пикселях)
+                const left = Math.round(screenPos.x + (noteWidth * sCssLocal) / 2 - (targetW / 2));
+                const top = Math.round(screenPos.y + (noteHeight * sCssLocal) / 2 - (targetH / 2));
                 wrapper.style.left = `${left}px`;
                 wrapper.style.top = `${top}px`;
             };
             // Первый вызов — синхронизировать с текущим содержимым
             autoSizeNote();
+
+            // Динамическое обновление позиции/размера редактора при зуме/панорамировании/трансформациях
+            const updateNoteEditor = () => {
+                try {
+                    // Актуальная позиция и размер объекта в мире
+                    const posDataNow = { objectId, position: null };
+                    const sizeDataNow = { objectId, size: null };
+                    this.eventBus.emit(Events.Tool.GetObjectPosition, posDataNow);
+                    this.eventBus.emit(Events.Tool.GetObjectSize, sizeDataNow);
+                    const posNow = posDataNow.position || position;
+                    const sizeNow = sizeDataNow.size || { width: noteWidth, height: noteHeight };
+                    const screenNow = toScreen(posNow.x, posNow.y);
+                    // Пересчитываем масштаб в CSS пикселях
+                    const vr = (this.app?.renderer?.resolution) || (view.width && view.clientWidth ? (view.width / view.clientWidth) : 1);
+                    const wl = this.textEditor.world || (this.app?.stage);
+                    const sc = wl?.scale?.x || 1;
+                    const sCss = sc / vr;
+                    const maxWpx = Math.max(1, Math.round((sizeNow.width - (horizontalPadding * 2)) * sCss));
+                    const maxHpx = Math.max(1, Math.round((sizeNow.height - (horizontalPadding * 2)) * sCss));
+                    // Измеряем естественный размер по контенту
+                    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 naturalH = Math.ceil(textarea.scrollHeight);
+                    const wPx = Math.min(maxWpx, Math.max(MIN_NOTE_EDITOR_W, naturalW));
+                    const hPx = Math.min(maxHpx, Math.max(MIN_NOTE_EDITOR_H, naturalH));
+                    // Применяем размеры редактора
+                    textarea.style.width = `${wPx}px`;
+                    wrapper.style.width = `${wPx}px`;
+                    textarea.style.height = `${hPx}px`;
+                    wrapper.style.height = `${hPx}px`;
+                    // Центрируем в пределах записки
+                    const left = Math.round(screenNow.x + (sizeNow.width * sCss) / 2 - (wPx / 2));
+                    const top = Math.round(screenNow.y + (sizeNow.height * sCss) / 2 - (hPx / 2));
+                    wrapper.style.left = `${left}px`;
+                    wrapper.style.top = `${top}px`;
+                    // Восстанавливаем прошлые значения, чтобы избежать мигания в стилях при следующем измерении
+                    textarea.style.width = `${wPx}px`;
+                    textarea.style.height = `${hPx}px`;
+                } catch (_) {}
+            };
+            const onZoom = () => updateNoteEditor();
+            const onPan = () => updateNoteEditor();
+            const onDrag = (e) => { if (e && e.object === objectId) updateNoteEditor(); };
+            const onResize = (e) => { if (e && e.object === objectId) updateNoteEditor(); };
+            const onRotate = (e) => { if (e && e.object === objectId) updateNoteEditor(); };
+            this.eventBus.on(Events.UI.ZoomPercent, onZoom);
+            this.eventBus.on(Events.Tool.PanUpdate, onPan);
+            this.eventBus.on(Events.Tool.DragUpdate, onDrag);
+            this.eventBus.on(Events.Tool.ResizeUpdate, onResize);
+            this.eventBus.on(Events.Tool.RotateUpdate, onRotate);
+            // Сохраняем слушателей для снятия при закрытии редактора
+            this.textEditor._listeners = [
+                [Events.UI.ZoomPercent, onZoom],
+                [Events.Tool.PanUpdate, onPan],
+                [Events.Tool.DragUpdate, onDrag],
+                [Events.Tool.ResizeUpdate, onResize],
+                [Events.Tool.RotateUpdate, onRotate],
+            ];
         } else {
             // Для обычного текста используем стандартное позиционирование
             wrapper.style.left = `${screenPos.x}px`;
@@ -2114,6 +2183,14 @@ export class SelectTool extends BaseTool {
             }
 
             // Убираем редактор
+            // Снимем навешанные на время редактирования слушатели
+            try {
+                if (this.textEditor && Array.isArray(this.textEditor._listeners)) {
+                    this.textEditor._listeners.forEach(([evt, fn]) => {
+                        try { this.eventBus.off(evt, fn); } catch (_) {}
+                    });
+                }
+            } catch (_) {}
             wrapper.remove();
             this.textEditor = { active: false, objectId: null, textarea: null, wrapper: null, world: null, position: null, properties: null, objectType: 'text' };
             if (currentObjectType === 'note') {
@@ -2214,51 +2291,8 @@ export class SelectTool extends BaseTool {
         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 (_) {}
-            });
+            // Для заметок растягиваем редактор по содержимому и центрируем с учётом зума
+            textarea.addEventListener('input', () => { try { updateNoteEditor(); } catch (_) {} });
         }
     }
 

package/src/ui/CommentPopover.js

@@ -132,7 +132,8 @@ export class CommentPopover {
 
     _onDocMouseDown(e) {
         if (!this.popover || this.popover.style.display === 'none') return;
-        if (this.popover.contains(e.target)) return; // клик внутри окна — не закрываем
+        // ИСПРАВЛЕНИЕ: Защита от null элементов
+        if (this.popover && e.target && this.popover.contains(e.target)) return; // клик внутри окна — не закрываем
         this.hide();
     }
 

package/src/ui/ContextMenu.js

@@ -51,7 +51,8 @@ export class ContextMenu {
         // Скрывать при клике вне меню или по Esc
         document.addEventListener('mousedown', (e) => {
             if (!this.isVisible) return;
-            if (!this.element.contains(e.target)) {
+            // ИСПРАВЛЕНИЕ: Защита от null элементов
+            if (this.element && e.target && !this.element.contains(e.target)) {
                 this.hide();
             }
         });

package/src/ui/FilePropertiesPanel.js

@@ -268,28 +268,52 @@ export class FilePropertiesPanel {
     reposition() {
         if (!this.currentId || !this.panel || this.panel.style.display === 'none') return;
 
-        const pixiObject = this.core?.pixi?.objects?.get(this.currentId);
-        if (!pixiObject) return;
+        // Проверяем, что наш объект все еще выделен
+        const ids = this.core?.selectTool ? Array.from(this.core.selectTool.selectedObjects || []) : [];
+        if (!ids.includes(this.currentId)) {
+            this.hide();
+            return;
+        }
 
-        try {
-            // Получаем границы объекта в world координатах
-            const bounds = pixiObject.getBounds();
-            
-            // Преобразуем в screen координаты
-            const worldToScreen = this.core.pixi.app.stage.worldTransform;
-            const screenX = bounds.x * worldToScreen.a + worldToScreen.tx;
-            const screenY = bounds.y * worldToScreen.d + worldToScreen.ty;
-            
-            // Позиционируем панель сверху по центру объекта
-            const panelWidth = this.panel.offsetWidth || 120;
-            const centerX = screenX + (bounds.width * worldToScreen.a) / 2;
-            
-            this.panel.style.left = `${centerX - panelWidth / 2}px`;
-            this.panel.style.top = `${screenY - 65}px`; // 65px выше объекта (было 45px)
-            
-        } catch (error) {
-            console.warn('FilePropertiesPanel: ошибка позиционирования:', error);
+        // Получаем позицию и размеры объекта
+        const posData = { objectId: this.currentId, position: null };
+        const sizeData = { objectId: this.currentId, size: null };
+        this.eventBus.emit(Events.Tool.GetObjectPosition, posData);
+        this.eventBus.emit(Events.Tool.GetObjectSize, sizeData);
+
+        if (!posData.position || !sizeData.size) {
+            return;
         }
+
+        // Получаем зум и позицию мира
+        const worldLayer = this.core?.pixi?.worldLayer;
+        const scale = worldLayer?.scale?.x || 1;
+        const worldX = worldLayer?.x || 0;
+        const worldY = worldLayer?.y || 0;
+
+        // Преобразуем координаты объекта в экранные координаты
+        const screenX = posData.position.x * scale + worldX;
+        const screenY = posData.position.y * scale + worldY;
+        const objectWidth = sizeData.size.width * scale;
+
+        // Позиционируем панель над объектом по центру
+        const panelWidth = this.panel.offsetWidth || 120;
+        const panelHeight = this.panel.offsetHeight || 40;
+        const panelX = screenX + (objectWidth / 2) - (panelWidth / 2);
+        let panelY = screenY - panelHeight - 40; // отступ 40px над файлом
+
+        // Если панель уходит за верх, переносим ниже объекта
+        if (panelY < 0) {
+            panelY = screenY + (sizeData.size.height * scale) + 40;
+        }
+
+        // Проверяем границы контейнера
+        const containerRect = this.container.getBoundingClientRect();
+        const finalX = Math.max(10, Math.min(panelX, containerRect.width - panelWidth - 10));
+        const finalY = Math.max(10, panelY);
+
+        this.panel.style.left = `${Math.round(finalX)}px`;
+        this.panel.style.top = `${Math.round(finalY)}px`;
     }
 
     destroy() {

package/src/ui/FramePropertiesPanel.js

@@ -147,25 +147,36 @@ export class FramePropertiesPanel {
             return;
         }
 
-        const { x, y } = posData.position;
-        const { width, height } = sizeData.size;
+        // Получаем зум и позицию мира
+        const worldLayer = this.core?.pixi?.worldLayer;
+        const scale = worldLayer?.scale?.x || 1;
+        const worldX = worldLayer?.x || 0;
+        const worldY = worldLayer?.y || 0;
+
+        // Преобразуем координаты объекта в экранные координаты
+        const screenX = posData.position.x * scale + worldX;
+        const screenY = posData.position.y * scale + worldY;
+        const objectWidth = sizeData.size.width * scale;
+        const objectHeight = sizeData.size.height * scale;
 
         // Позиционируем панель над фреймом, по центру
-        const panelRect = this.panel.getBoundingClientRect();
-        const panelW = Math.max(1, panelRect.width || 280);
-        const panelH = Math.max(1, panelRect.height || 60);
-        let panelX = x + (width / 2) - (panelW / 2);
-        let panelY = y - panelH - 40; // отступ 40px над фреймом
+        const panelW = this.panel.offsetWidth || 280;
+        const panelH = this.panel.offsetHeight || 60;
+        let panelX = screenX + (objectWidth / 2) - (panelW / 2);
+        let panelY = screenY - panelH - 40; // отступ 40px над фреймом
 
         // Если панель уходит за верх, переносим ниже фрейма
         if (panelY < 0) {
-            panelY = y + height + 40;
+            panelY = screenY + objectHeight + 40;
         }
 
+        // Проверяем границы контейнера
+        const containerRect = this.container.getBoundingClientRect();
+        const finalX = Math.max(10, Math.min(panelX, containerRect.width - panelW - 10));
+        const finalY = Math.max(10, panelY);
 
-        this.panel.style.left = `${Math.round(panelX)}px`;
-        this.panel.style.top = `${Math.round(panelY)}px`;
-        
+        this.panel.style.left = `${Math.round(finalX)}px`;
+        this.panel.style.top = `${Math.round(finalY)}px`;
     }
 
     _createFrameControls(panel) {
@@ -435,7 +446,8 @@ export class FramePropertiesPanel {
     }
 
     _documentClickHandler(e) {
-        if (this.colorPalette && !this.colorPalette.contains(e.target) && 
+        // ИСПРАВЛЕНИЕ: Защита от null элементов
+        if (this.colorPalette && e.target && !this.colorPalette.contains(e.target) && 
             this.colorButton && !this.colorButton.contains(e.target)) {
             this._hideColorPalette();
         }

package/src/ui/HtmlHandlesLayer.js

@@ -37,8 +37,9 @@ export class HtmlHandlesLayer {
         this.eventBus.on(Events.Tool.DragUpdate, () => this.update());
         
         // ИСПРАВЛЕНИЕ: Обработка удаления объектов
-        this.eventBus.on(Events.Object.Deleted, ({ objectId }) => {
-            console.log('🗑️ HtmlHandlesLayer: объект удален, принудительно очищаем ручки:', objectId);
+        this.eventBus.on(Events.Object.Deleted, (data) => {
+            const objectId = data?.objectId || data;
+            console.log('🗑️ HtmlHandlesLayer: получено событие удаления:', data, 'objectId:', objectId);
             
             // Принудительно скрываем и очищаем все ручки
             this.hide();

package/src/ui/MapPanel.js

@@ -38,6 +38,8 @@ export class MapPanel {
         // Закрытие по клику вне панели
         document.addEventListener('mousedown', (e) => {
             if (!this.popupEl) return;
+            // ИСПРАВЛЕНИЕ: Защита от null элементов
+            if (!this.element || !e.target) return;
             if (this.element.contains(e.target)) return;
             this.hidePopup();
         });
@@ -45,7 +47,8 @@ export class MapPanel {
         // Колесо для зума внутри миникарты
         this.element.addEventListener('wheel', (e) => {
             if (!this.popupEl) return;
-            if (!this.popupEl.contains(e.target)) return;
+            // ИСПРАВЛЕНИЕ: Защита от null элементов
+            if (!this.popupEl || !e.target || !this.popupEl.contains(e.target)) return;
             e.preventDefault();
             // Масштабируем вокруг точки под курсором в миникарте
             const rect = this.canvas.getBoundingClientRect();

package/src/ui/NotePropertiesPanel.js

@@ -157,23 +157,36 @@ export class NotePropertiesPanel {
             return;
         }
 
-        const { x, y } = posData.position;
-        const { width, height } = sizeData.size;
+        // Получаем зум и позицию мира
+        const worldLayer = this.core?.pixi?.worldLayer;
+        const scale = worldLayer?.scale?.x || 1;
+        const worldX = worldLayer?.x || 0;
+        const worldY = worldLayer?.y || 0;
+
+        // Преобразуем координаты объекта в экранные координаты
+        const screenX = posData.position.x * scale + worldX;
+        const screenY = posData.position.y * scale + worldY;
+        const objectWidth = sizeData.size.width * scale;
+        const objectHeight = sizeData.size.height * scale;
 
         // Позиционируем панель над запиской, по центру
-        const panelRect = this.panel.getBoundingClientRect();
-        const panelW = Math.max(1, panelRect.width || 320);
-        const panelH = Math.max(1, panelRect.height || 40);
-        const panelX = x + (width / 2) - (panelW / 2);
-        const panelY = Math.max(0, y - panelH - 40); // отступ 40px над запиской
-        
-        console.log('📝 NotePropertiesPanel: Positioning next to note:', { 
-            noteX: x, noteY: y, noteWidth: width, noteHeight: height,
-            panelX, panelY
-        });
+        const panelW = this.panel.offsetWidth || 320;
+        const panelH = this.panel.offsetHeight || 40;
+        let panelX = screenX + (objectWidth / 2) - (panelW / 2);
+        let panelY = screenY - panelH - 40; // отступ 40px над запиской
+
+        // Если панель уходит за верх, переносим ниже записки
+        if (panelY < 0) {
+            panelY = screenY + objectHeight + 40;
+        }
+
+        // Проверяем границы контейнера
+        const containerRect = this.container.getBoundingClientRect();
+        const finalX = Math.max(10, Math.min(panelX, containerRect.width - panelW - 10));
+        const finalY = Math.max(10, panelY);
 
-        this.panel.style.left = `${Math.round(panelX)}px`;
-        this.panel.style.top = `${Math.round(panelY)}px`;
+        this.panel.style.left = `${Math.round(finalX)}px`;
+        this.panel.style.top = `${Math.round(finalY)}px`;
     }
 
     _createNoteControls(panel) {
@@ -448,14 +461,16 @@ export class NotePropertiesPanel {
         let shouldClose = true;
         
         for (let palette of palettes) {
-            if (palette && palette.contains(e.target)) {
+            // ИСПРАВЛЕНИЕ: Защита от null элементов
+            if (palette && e.target && palette.contains(e.target)) {
                 shouldClose = false;
                 break;
             }
         }
         
         for (let button of buttons) {
-            if (button && button.contains(e.target)) {
+            // ИСПРАВЛЕНИЕ: Защита от null элементов
+            if (button && e.target && button.contains(e.target)) {
                 shouldClose = false;
                 break;
             }

package/src/ui/TextPropertiesPanel.js

@@ -259,7 +259,8 @@ export class TextPropertiesPanel {
 
         // Закрываем панель при клике вне её
         document.addEventListener('click', (e) => {
-            if (!colorSelectorContainer.contains(e.target)) {
+            // ИСПРАВЛЕНИЕ: Защита от null элементов
+            if (!colorSelectorContainer || !e.target || !colorSelectorContainer.contains(e.target)) {
                 this._hideColorDropdown();
             }
         });
@@ -460,7 +461,8 @@ export class TextPropertiesPanel {
 
         // Закрываем панель при клике вне её
         document.addEventListener('click', (e) => {
-            if (!bgSelectorContainer.contains(e.target)) {
+            // ИСПРАВЛЕНИЕ: Защита от null элементов
+            if (!bgSelectorContainer || !e.target || !bgSelectorContainer.contains(e.target)) {
                 this._hideBgColorDropdown();
             }
         });
@@ -871,7 +873,7 @@ export class TextPropertiesPanel {
     }
 
     _onDocMouseDown(e) {
-        // Скрываем панель при клике вне неё и вне текстового объекта
+        // ИСПРАВЛЕНИЕ: Защита от null элементов + скрываем панель при клике вне неё
         if (!this.panel || !e.target) return;
         
         // Если клик внутри панели - не скрываем

package/src/ui/Toolbar.js

@@ -555,7 +555,10 @@ export class Toolbar {
 
         // Клик вне попапов — закрыть
         document.addEventListener('click', (e) => {
-            const isInsideToolbar = this.element.contains(e.target);
+            // ИСПРАВЛЕНИЕ: Защита от null элементов
+            if (!e.target) return;
+            
+            const isInsideToolbar = this.element && this.element.contains(e.target);
             const isInsideShapesPopup = this.shapesPopupEl && this.shapesPopupEl.contains(e.target);
             const isInsideDrawPopup = this.drawPopupEl && this.drawPopupEl.contains(e.target);
             const isInsideEmojiPopup = this.emojiPopupEl && this.emojiPopupEl.contains(e.target);

package/src/ui/ZoomPanel.js

@@ -74,6 +74,8 @@ export class ZoomPanel {
 
         document.addEventListener('mousedown', (e) => {
             if (!this.menuEl) return;
+            // ИСПРАВЛЕНИЕ: Защита от null элементов
+            if (!this.element || !e.target) return;
             if (this.element.contains(e.target)) return;
             this.hideMenu();
         });

package/src/ui/styles/toolbar.css

@@ -43,7 +43,7 @@
 }
 .moodboard-toolbar__button:hover { background: #BBDEFB; border-radius: 50%; }
 .moodboard-toolbar__button:active { transform: translateY(0); }
-.moodboard-toolbar__button--active { background: #00B0FF !important; color: inherit !important; border-radius: 50%; }
+.moodboard-toolbar__button--active { background: #80D8FF !important; color: inherit !important; border-radius: 50%; }
 .moodboard-toolbar__button--disabled { opacity: 0.4; cursor: not-allowed; }
 .moodboard-toolbar__button svg { width: 20px; height: 20px; transition: transform 0.2s ease; color: #212121; }
 .moodboard-toolbar__button--text-add svg { height: 16px; width: auto; }

package/src/ui/styles/topbar.css

@@ -47,7 +47,7 @@
 }
 
 .moodboard-topbar__button--active {
-    background: #dbeafe;
+    background: #80D8FF;
     color: #1d4ed8;
 }