@sequent-org/moodboard 1.2.119 → 1.3.0

package/src/moodboard/bootstrap/MoodBoardManagersFactory.js

@@ -0,0 +1,38 @@
+import { WorkspaceManager } from '../WorkspaceManager.js';
+import { DataManager } from '../DataManager.js';
+import { ActionHandler } from '../ActionHandler.js';
+import { AlignmentGuides } from '../../tools/AlignmentGuides.js';
+import { ImageUploadService } from '../../services/ImageUploadService.js';
+import { SettingsApplier } from '../../services/SettingsApplier.js';
+
+export function createWorkspaceManager(board) {
+    board.workspaceManager = new WorkspaceManager(board.container, board.options);
+}
+
+export function createMoodBoardManagers(board) {
+    board.settingsApplier = new SettingsApplier(
+        board.coreMoodboard.eventBus,
+        board.coreMoodboard.pixi,
+        board.coreMoodboard.boardService || null
+    );
+
+    board.coreMoodboard.settingsApplier = board.settingsApplier;
+
+    board.dataManager = new DataManager(board.coreMoodboard);
+    board.actionHandler = new ActionHandler(board.dataManager, board.workspaceManager);
+}
+
+export function wireMoodBoardServices(board) {
+    board.alignmentGuides = new AlignmentGuides(
+        board.coreMoodboard.eventBus,
+        board.coreMoodboard.pixi.app,
+        () => board.coreMoodboard.state.getObjects()
+    );
+
+    board.imageUploadService = new ImageUploadService(board.coreMoodboard.apiClient);
+    board.coreMoodboard.imageUploadService = board.imageUploadService;
+
+    if (board.settingsApplier && board.topbar) {
+        board.settingsApplier.setUI({ topbar: board.topbar });
+    }
+}

package/src/moodboard/bootstrap/MoodBoardUiFactory.js

@@ -0,0 +1,109 @@
+import { Toolbar } from '../../ui/Toolbar.js';
+import { SaveStatus } from '../../ui/SaveStatus.js';
+import { Topbar } from '../../ui/Topbar.js';
+import { ZoomPanel } from '../../ui/ZoomPanel.js';
+import { MapPanel } from '../../ui/MapPanel.js';
+import { ContextMenu } from '../../ui/ContextMenu.js';
+import { HtmlTextLayer } from '../../ui/HtmlTextLayer.js';
+import { HtmlHandlesLayer } from '../../ui/HtmlHandlesLayer.js';
+import { CommentPopover } from '../../ui/CommentPopover.js';
+import { TextPropertiesPanel } from '../../ui/TextPropertiesPanel.js';
+import { FramePropertiesPanel } from '../../ui/FramePropertiesPanel.js';
+import { NotePropertiesPanel } from '../../ui/NotePropertiesPanel.js';
+import { FilePropertiesPanel } from '../../ui/FilePropertiesPanel.js';
+import { bindToolbarEvents, bindTopbarEvents } from '../integration/MoodBoardEventBindings.js';
+
+function initToolbar(board) {
+    board.toolbar = new Toolbar(
+        board.toolbarContainer,
+        board.coreMoodboard.eventBus,
+        board.options.theme,
+        {
+            emojiBasePath: board.options.emojiBasePath || null,
+        }
+    );
+
+    if (typeof window !== 'undefined') {
+        window.reloadIcon = (iconName) => board.toolbar.reloadToolbarIcon(iconName);
+    }
+
+    board.saveStatus = new SaveStatus(
+        board.workspaceElement,
+        board.coreMoodboard.eventBus
+    );
+
+    bindToolbarEvents(board);
+}
+
+function initTopbar(board) {
+    board.topbar = new Topbar(
+        board.topbarContainer,
+        board.coreMoodboard.eventBus,
+        board.options.theme
+    );
+
+    try {
+        const app = board.coreMoodboard?.pixi?.app;
+        const colorInt = (app?.renderer?.background && app.renderer.background.color) || app?.renderer?.backgroundColor;
+        if (typeof colorInt === 'number') {
+            const boardHex = `#${colorInt.toString(16).padStart(6, '0')}`;
+            const btnHex = board.topbar.mapBoardToBtnHex(boardHex);
+            board.topbar.setPaintButtonHex(btnHex || '#B3E5FC');
+        }
+    } catch (_) {}
+
+    bindTopbarEvents(board);
+}
+
+function initZoombar(board) {
+    board.zoombar = new ZoomPanel(
+        board.workspaceElement,
+        board.coreMoodboard.eventBus
+    );
+}
+
+function initMapbar(board) {
+    board.mapbar = new MapPanel(
+        board.workspaceElement,
+        board.coreMoodboard.eventBus
+    );
+}
+
+function initContextMenu(board) {
+    board.contextMenu = new ContextMenu(
+        board.canvasContainer,
+        board.coreMoodboard.eventBus
+    );
+}
+
+function initHtmlLayersAndPanels(board) {
+    board.htmlTextLayer = new HtmlTextLayer(board.canvasContainer, board.coreMoodboard.eventBus, board.coreMoodboard);
+    board.htmlTextLayer.attach();
+
+    board.htmlHandlesLayer = new HtmlHandlesLayer(board.canvasContainer, board.coreMoodboard.eventBus, board.coreMoodboard);
+    board.htmlHandlesLayer.attach();
+
+    if (typeof window !== 'undefined') {
+        window.moodboardHtmlTextLayer = board.htmlTextLayer;
+        window.moodboardHtmlHandlesLayer = board.htmlHandlesLayer;
+    }
+
+    board.commentPopover = new CommentPopover(board.canvasContainer, board.coreMoodboard.eventBus, board.coreMoodboard);
+    board.commentPopover.attach();
+
+    board.textPropertiesPanel = new TextPropertiesPanel(board.canvasContainer, board.coreMoodboard.eventBus, board.coreMoodboard);
+    board.textPropertiesPanel.attach();
+
+    board.framePropertiesPanel = new FramePropertiesPanel(board.coreMoodboard.eventBus, board.canvasContainer, board.coreMoodboard);
+    board.notePropertiesPanel = new NotePropertiesPanel(board.coreMoodboard.eventBus, board.canvasContainer, board.coreMoodboard);
+    board.filePropertiesPanel = new FilePropertiesPanel(board.coreMoodboard.eventBus, board.canvasContainer, board.coreMoodboard);
+}
+
+export function createMoodBoardUi(board) {
+    initToolbar(board);
+    initTopbar(board);
+    initZoombar(board);
+    initMapbar(board);
+    initContextMenu(board);
+    initHtmlLayersAndPanels(board);
+}

package/src/moodboard/integration/MoodBoardEventBindings.js

@@ -0,0 +1,65 @@
+import { Events } from '../../core/events/Events.js';
+
+export function bindToolbarEvents(board) {
+    board.coreMoodboard.eventBus.on(Events.UI.ToolbarAction, (action) => {
+        board.actionHandler.handleToolbarAction(action);
+    });
+}
+
+export function bindTopbarEvents(board) {
+    board.coreMoodboard.eventBus.on(Events.UI.PaintPick, ({ color }) => {
+        if (!color) {
+            return;
+        }
+
+        if (board.settingsApplier && typeof board.settingsApplier.set === 'function') {
+            board.settingsApplier.set({ backgroundColor: color });
+        } else {
+            const hex = (typeof color === 'string' && color.startsWith('#'))
+                ? parseInt(color.slice(1), 16)
+                : color;
+            if (board.coreMoodboard?.pixi?.app?.renderer) {
+                board.coreMoodboard.pixi.app.renderer.backgroundColor = hex;
+            }
+            board.coreMoodboard.eventBus.emit(Events.Grid.BoardDataChanged, { settings: { backgroundColor: color } });
+        }
+    });
+}
+
+export function bindSaveCallbacks(board) {
+    if (!board.coreMoodboard || !board.coreMoodboard.eventBus) {
+        return;
+    }
+
+    if (typeof board.options.onSave === 'function') {
+        board.coreMoodboard.eventBus.on('save:success', (data) => {
+            try {
+                let screenshot = null;
+                if (board.coreMoodboard.pixi && board.coreMoodboard.pixi.app && board.coreMoodboard.pixi.app.view) {
+                    screenshot = board.createCombinedScreenshot('image/jpeg', 0.6);
+                }
+
+                board.options.onSave({
+                    success: true,
+                    data: data,
+                    screenshot: screenshot,
+                    boardId: board.options.boardId,
+                });
+            } catch (error) {
+                console.warn('⚠️ Ошибка в коллбеке onSave:', error);
+            }
+        });
+
+        board.coreMoodboard.eventBus.on('save:error', (data) => {
+            try {
+                board.options.onSave({
+                    success: false,
+                    error: data.error,
+                    boardId: board.options.boardId,
+                });
+            } catch (error) {
+                console.warn('⚠️ Ошибка в коллбеке onSave:', error);
+            }
+        });
+    }
+}

package/src/moodboard/integration/MoodBoardLoadApi.js

@@ -0,0 +1,82 @@
+function getSeedData(board) {
+    return board.data || { objects: [] };
+}
+
+function invokeOnLoad(board, payload) {
+    if (typeof board.options.onLoad === 'function') {
+        board.options.onLoad(payload);
+    }
+}
+
+export function getCsrfToken(board) {
+    return document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
+        || window.csrfToken
+        || board.options.csrfToken
+        || '';
+}
+
+export async function loadExistingBoard(board) {
+    try {
+        const boardId = board.options.boardId;
+
+        if (!boardId || !board.options.apiUrl) {
+            console.log('📦 MoodBoard: нет boardId или apiUrl, загружаем пустую доску');
+            const seedData = getSeedData(board);
+            board.dataManager.loadData(seedData);
+            invokeOnLoad(board, { success: true, data: seedData });
+            return;
+        }
+
+        console.log(`📦 MoodBoard: загружаем доску ${boardId} с ${board.options.apiUrl}`);
+
+        const loadUrl = board.options.apiUrl.endsWith('/')
+            ? `${board.options.apiUrl}load/${boardId}`
+            : `${board.options.apiUrl}/load/${boardId}`;
+
+        const response = await fetch(loadUrl, {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRF-TOKEN': getCsrfToken(board),
+            },
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+
+        const boardData = await response.json();
+
+        if (boardData && boardData.data) {
+            console.log('✅ MoodBoard: данные загружены с сервера', boardData.data);
+            board.dataManager.loadData(boardData.data);
+            invokeOnLoad(board, { success: true, data: boardData.data });
+        } else {
+            console.log('📦 MoodBoard: нет данных с сервера, загружаем пустую доску');
+            const seedData = getSeedData(board);
+            board.dataManager.loadData(seedData);
+            invokeOnLoad(board, { success: true, data: seedData });
+        }
+    } catch (error) {
+        console.warn('⚠️ MoodBoard: ошибка загрузки доски, создаем новую:', error.message);
+        const seedData = getSeedData(board);
+        board.dataManager.loadData(seedData);
+        invokeOnLoad(board, { success: false, error: error.message, data: seedData });
+    }
+}
+
+export async function loadFromApi(board, boardId = null) {
+    const targetBoardId = boardId || board.options.boardId;
+    if (!targetBoardId) {
+        throw new Error('boardId не указан');
+    }
+
+    const originalBoardId = board.options.boardId;
+    board.options.boardId = targetBoardId;
+
+    try {
+        await loadExistingBoard(board);
+    } finally {
+        board.options.boardId = originalBoardId;
+    }
+}

package/src/moodboard/integration/MoodBoardScreenshotApi.js

@@ -0,0 +1,33 @@
+import {
+    createCompositionCanvas,
+    drawHtmlTextOverlay,
+    drawPixiCanvas,
+    getPixiCanvas,
+    wrapText,
+} from './MoodBoardScreenshotCanvas.js';
+
+export { wrapText };
+
+export function createCombinedScreenshot(board, format = 'image/jpeg', quality = 0.6) {
+    if (!board.coreMoodboard || !board.coreMoodboard.pixi || !board.coreMoodboard.pixi.app || !board.coreMoodboard.pixi.app.view) {
+        throw new Error('Canvas не найден');
+    }
+
+    try {
+        const pixiCanvas = getPixiCanvas(board);
+        const { canvas, ctx } = createCompositionCanvas(pixiCanvas);
+
+        drawPixiCanvas(ctx, pixiCanvas);
+        drawHtmlTextOverlay(ctx);
+
+        return canvas.toDataURL(format, quality);
+    } catch (error) {
+        console.warn('⚠️ Ошибка при создании объединенного скриншота, используем только PIXI canvas:', error);
+        const canvas = getPixiCanvas(board);
+        return canvas.toDataURL(format, quality);
+    }
+}
+
+export function exportScreenshot(board, format = 'image/jpeg', quality = 0.6) {
+    return board.createCombinedScreenshot(format, quality);
+}

package/src/moodboard/integration/MoodBoardScreenshotCanvas.js

@@ -0,0 +1,98 @@
+export function getPixiCanvas(board) {
+    return board.coreMoodboard.pixi.app.view;
+}
+
+export function createCompositionCanvas(sourceCanvas) {
+    const combinedCanvas = document.createElement('canvas');
+    combinedCanvas.width = sourceCanvas.width;
+    combinedCanvas.height = sourceCanvas.height;
+
+    return {
+        canvas: combinedCanvas,
+        ctx: combinedCanvas.getContext('2d'),
+    };
+}
+
+export function drawPixiCanvas(ctx, pixiCanvas) {
+    ctx.drawImage(pixiCanvas, 0, 0);
+}
+
+export function wrapText(ctx, text, maxWidth) {
+    const lines = [];
+
+    if (!text || maxWidth <= 0) {
+        return [text];
+    }
+
+    let currentLine = '';
+
+    for (let i = 0; i < text.length; i += 1) {
+        const char = text[i];
+        const testLine = currentLine + char;
+        const metrics = ctx.measureText(testLine);
+
+        if (metrics.width > maxWidth && currentLine !== '') {
+            lines.push(currentLine);
+            currentLine = char;
+        } else {
+            currentLine = testLine;
+        }
+    }
+
+    if (currentLine) {
+        lines.push(currentLine);
+    }
+
+    return lines.length > 0 ? lines : [text];
+}
+
+function isDrawableTextElement(textEl, computedStyle) {
+    const text = textEl.textContent || '';
+
+    if (computedStyle.visibility === 'hidden' || computedStyle.opacity === '0' || !text.trim()) {
+        return false;
+    }
+
+    return true;
+}
+
+function drawTextElement(ctx, textEl, index) {
+    try {
+        const computedStyle = window.getComputedStyle(textEl);
+
+        if (!isDrawableTextElement(textEl, computedStyle)) {
+            return;
+        }
+
+        const text = textEl.textContent || '';
+        const left = parseInt(textEl.style.left) || 0;
+        const top = parseInt(textEl.style.top) || 0;
+
+        const fontSize = parseInt(computedStyle.fontSize) || 18;
+        const fontFamily = computedStyle.fontFamily || 'Arial, sans-serif';
+        const color = computedStyle.color || '#000000';
+
+        ctx.font = `${fontSize}px ${fontFamily}`;
+        ctx.fillStyle = color;
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'top';
+
+        const elementWidth = parseInt(textEl.style.width) || 182;
+        const lines = wrapText(ctx, text, elementWidth);
+        const lineHeight = fontSize * 1.3;
+
+        lines.forEach((line, lineIndex) => {
+            const yPos = top + (lineIndex * lineHeight) + 2;
+            ctx.fillText(line, left, yPos);
+        });
+    } catch (error) {
+        console.warn(`⚠️ Ошибка при рисовании текста ${index + 1}:`, error);
+    }
+}
+
+export function drawHtmlTextOverlay(ctx) {
+    const textElements = document.querySelectorAll('.mb-text');
+    textElements.forEach((textEl, index) => {
+        drawTextElement(ctx, textEl, index);
+    });
+}

package/src/moodboard/lifecycle/MoodBoardDestroyer.js

@@ -0,0 +1,97 @@
+export function safeDestroy(obj, name) {
+    if (obj) {
+        try {
+            if (typeof obj.destroy === 'function') {
+                obj.destroy();
+            } else {
+                console.warn(`Объект ${name} не имеет метода destroy()`);
+            }
+        } catch (error) {
+            console.error(`Ошибка при уничтожении ${name}:`, error);
+        }
+    }
+}
+
+export function destroyMoodBoard(board) {
+    if (board.destroyed) {
+        console.warn('MoodBoard уже был уничтожен');
+        return;
+    }
+
+    board.destroyed = true;
+
+    safeDestroy(board.toolbar, 'toolbar');
+    board.toolbar = null;
+
+    safeDestroy(board.topbar, 'topbar');
+    board.topbar = null;
+
+    safeDestroy(board.saveStatus, 'saveStatus');
+    board.saveStatus = null;
+
+    safeDestroy(board.textPropertiesPanel, 'textPropertiesPanel');
+    board.textPropertiesPanel = null;
+
+    safeDestroy(board.framePropertiesPanel, 'framePropertiesPanel');
+    board.framePropertiesPanel = null;
+
+    safeDestroy(board.notePropertiesPanel, 'notePropertiesPanel');
+    board.notePropertiesPanel = null;
+
+    safeDestroy(board.filePropertiesPanel, 'filePropertiesPanel');
+    board.filePropertiesPanel = null;
+
+    safeDestroy(board.alignmentGuides, 'alignmentGuides');
+    board.alignmentGuides = null;
+
+    // HTML-слои (текст и ручки) также нужно корректно уничтожать,
+    // чтобы удалить DOM и отписаться от глобальных слушателей resize/DPR
+    safeDestroy(board.htmlTextLayer, 'htmlTextLayer');
+    board.htmlTextLayer = null;
+
+    safeDestroy(board.htmlHandlesLayer, 'htmlHandlesLayer');
+    board.htmlHandlesLayer = null;
+
+    safeDestroy(board.commentPopover, 'commentPopover');
+    board.commentPopover = null;
+
+    safeDestroy(board.contextMenu, 'contextMenu');
+    board.contextMenu = null;
+
+    safeDestroy(board.zoombar, 'zoombar');
+    board.zoombar = null;
+
+    safeDestroy(board.mapbar, 'mapbar');
+    board.mapbar = null;
+
+    safeDestroy(board.coreMoodboard, 'coreMoodboard');
+    board.coreMoodboard = null;
+
+    safeDestroy(board.workspaceManager, 'workspaceManager');
+    board.workspaceManager = null;
+
+    board.dataManager = null;
+    board.actionHandler = null;
+
+    if (board.container) {
+        board.container.classList.remove('moodboard-root');
+    }
+    board.container = null;
+
+    if (typeof window !== 'undefined') {
+        if (window.moodboardHtmlTextLayer === board.htmlTextLayer) {
+            window.moodboardHtmlTextLayer = null;
+        }
+        if (window.moodboardHtmlHandlesLayer === board.htmlHandlesLayer) {
+            window.moodboardHtmlHandlesLayer = null;
+        }
+    }
+
+    if (typeof board.options.onDestroy === 'function') {
+        try {
+            board.options.onDestroy();
+        } catch (error) {
+            console.warn('⚠️ Ошибка в коллбеке onDestroy:', error);
+        }
+    }
+}

package/src/objects/FileObject.js

@@ -221,19 +221,30 @@ export class FileObject {
         g.lineTo(x + size * 0.8 - cornerSize, y);
         g.endFill();
         
-        // Текст расширения на иконке
+        // Текст расширения на иконке — удаляем старый перед созданием нового (предотвращает утечку при _redraw)
+        if (this._extensionText) {
+            try {
+                this.container.removeChild(this._extensionText);
+            } catch (_) {}
+            try {
+                this._extensionText.destroy();
+            } catch (_) {}
+            this._extensionText = null;
+        }
         if (extension && extension.length <= 4) {
-            const extensionText = new PIXI.Text(extension.toUpperCase(), {
+            this._extensionText = new PIXI.Text(extension.toUpperCase(), {
                 fontFamily: 'system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif',
                 fontSize: Math.max(8, size * 0.2),
                 fill: 0xFFFFFF,
                 align: 'center',
                 fontWeight: 'bold'
             });
-            extensionText.anchor.set(0.5, 0.5);
-            extensionText.x = x + size * 0.4;
-            extensionText.y = y + size * 0.7;
-            this.container.addChild(extensionText);
+            this._extensionText.anchor.set(0.5, 0.5);
+            this._extensionText.x = x + size * 0.4;
+            this._extensionText.y = y + size * 0.7;
+            this.container.addChild(this._extensionText);
+        } else {
+            this._extensionText = null;
         }
     }
 

package/src/objects/FrameObject.js

@@ -31,6 +31,7 @@ export class FrameObject {
         }
         this.cornerRadius = Number.isFinite(cssCornerRadius) ? cssCornerRadius : 6;
         this.title = this.objectData.title || this.objectData.properties?.title || 'Новый';
+        this._borderVisible = true;
 
         // Создаем контейнер для фрейма и заголовка
         this.container = new PIXI.Container();
@@ -58,9 +59,16 @@ export class FrameObject {
         
         // Подписываемся на события зума для компенсации масштабирования заголовка
         if (this.eventBus) {
-            this.eventBus.on(Events.UI.ZoomPercent, this._onZoomChange.bind(this));
+            this._boundOnZoomChange = this._onZoomChange.bind(this);
+            this.eventBus.on(Events.UI.ZoomPercent, this._boundOnZoomChange);
+            this._boundOnSelectionAdd = this._onSelectionAdd.bind(this);
+            this._boundOnSelectionRemove = this._onSelectionRemove.bind(this);
+            this._boundOnSelectionClear = this._onSelectionClear.bind(this);
+            this.eventBus.on(Events.Tool.SelectionAdd, this._boundOnSelectionAdd);
+            this.eventBus.on(Events.Tool.SelectionRemove, this._boundOnSelectionRemove);
+            this.eventBus.on(Events.Tool.SelectionClear, this._boundOnSelectionClear);
         }
-        
+
         this._draw(this.width, this.height, this.fillColor);
         // Применяем начальный масштаб и обрезку заголовка
         this._updateTitleScale();
@@ -87,6 +95,27 @@ export class FrameObject {
         this._redrawPreserveTransform(this.width, this.height, this.fillColor);
     }
 
+    /** Скрыть/показать серую рамку (при выделении скрываем, чтобы не накладывалась на синюю) */
+    setBorderVisible(visible) {
+        if (this._borderVisible === visible) return;
+        this._borderVisible = visible;
+        this._redrawPreserveTransform(this.width, this.height, this.fillColor);
+    }
+
+    _onSelectionAdd(data) {
+        const myId = this.objectData?.id ?? this.container?._mb?.objectId;
+        if (data?.object === myId) this.setBorderVisible(false);
+    }
+
+    _onSelectionRemove(data) {
+        if (data?.object === (this.objectData?.id ?? this.container?._mb?.objectId)) this.setBorderVisible(true);
+    }
+
+    _onSelectionClear(data) {
+        const myId = this.objectData?.id ?? this.container?._mb?.objectId;
+        if (data?.objects?.includes(myId)) this.setBorderVisible(true);
+    }
+
     /**
      * Установить заголовок фрейма
      * @param {string} title Новый заголовок
@@ -132,7 +161,7 @@ export class FrameObject {
         const pivotX = width / 2;
         const pivotY = height / 2;
 
-        this._draw(width, height, color);
+        this._draw(width, height, color, this._borderVisible);
 
         container.pivot.set(pivotX, pivotY);
         container.x = x;
@@ -145,15 +174,17 @@ export class FrameObject {
 
     /**
      * Базовая отрисовка
+     * @param {boolean} showStroke — рисовать ли серую рамку (скрываем при выделении)
      */
-    _draw(width, height, color) {
+    _draw(width, height, color, showStroke = true) {
         const g = this.graphics;
         g.clear();
-        // Рисуем с выравниванием обводки внутрь, чтобы внешний контур был ровно width x height
-        try {
-            g.lineStyle({ width: this.borderWidth, color: this.strokeColor, alpha: 1, alignment: 1 });
-        } catch (e) {
-            g.lineStyle(this.borderWidth, this.strokeColor, 1);
+        if (showStroke) {
+            try {
+                g.lineStyle({ width: this.borderWidth, color: this.strokeColor, alpha: 1, alignment: 1 });
+            } catch (e) {
+                g.lineStyle(this.borderWidth, this.strokeColor, 1);
+            }
         }
         g.beginFill(typeof color === 'number' ? color : 0xFFFFFF, 1);
         g.drawRoundedRect(0, 0, Math.max(0, width), Math.max(0, height), this.cornerRadius);
@@ -282,7 +313,16 @@ export class FrameObject {
      */
     destroy() {
         if (this.eventBus) {
-            this.eventBus.off(Events.UI.ZoomPercent, this._onZoomChange.bind(this));
+            if (this._boundOnZoomChange) {
+                this.eventBus.off(Events.UI.ZoomPercent, this._boundOnZoomChange);
+                this._boundOnZoomChange = null;
+            }
+            if (this._boundOnSelectionAdd) {
+                this.eventBus.off(Events.Tool.SelectionAdd, this._boundOnSelectionAdd);
+                this.eventBus.off(Events.Tool.SelectionRemove, this._boundOnSelectionRemove);
+                this.eventBus.off(Events.Tool.SelectionClear, this._boundOnSelectionClear);
+                this._boundOnSelectionAdd = this._boundOnSelectionRemove = this._boundOnSelectionClear = null;
+            }
         }
         if (this.container) {
             this.container.destroy({ children: true });

package/src/objects/NoteObject.js

@@ -186,10 +186,11 @@ export class NoteObject {
         if (!size) return;
         let w = Math.max(80, size.width || this.width);
         let h = Math.max(60, size.height || this.height);
-        // Держим квадрат
-        const side = Math.max(w, h);
-        this.width = side;
-        this.height = side;
+        // Политика квадратного resize применяется на уровне gesture/flow.
+        // Здесь важно уважать уже нормализованный размер, иначе group-resize
+        // начинает расходиться с рассчитанной рамкой группы.
+        this.width = w;
+        this.height = h;
         
         this._redraw();
         this._updateTextPosition();