@sequent-org/moodboard 1.2.118 → 1.3.0

package/src/core/PixiEngine.js

@@ -211,12 +211,14 @@ export class PixiEngine {
             if (pixiObject instanceof PIXI.Sprite) {
                 console.log('🗑️ PixiEngine: очищаем ресурсы изображения/эмоджи');
                 
-                // Очищаем текстуру (особенно важно для data URL)
+                // Очищаем текстуру (data URL, blob URL — освобождаем память)
                 if (pixiObject.texture && pixiObject.texture !== PIXI.Texture.WHITE) {
-                    // Не уничтожаем базовые текстуры PIXI
                     const textureSource = pixiObject.texture.baseTexture?.resource?.src;
-                    if (textureSource && (textureSource.startsWith('data:') || textureSource.includes('emodji'))) {
-                        pixiObject.texture.destroy(false); // Уничтожаем только созданную текстуру
+                    if (textureSource && (textureSource.startsWith('data:') || textureSource.startsWith('blob:') || textureSource.includes('emodji'))) {
+                        if (textureSource.startsWith('blob:')) {
+                            try { URL.revokeObjectURL(textureSource); } catch (_) {}
+                        }
+                        pixiObject.texture.destroy(false);
                     }
                 }
                 
@@ -381,12 +383,10 @@ export class PixiEngine {
      */
     setFrameFill(objectId, width, height, fillColor = 0xFFFFFF) {
         const pixiObject = this.objects.get(objectId);
-        if (!pixiObject || !(pixiObject instanceof PIXI.Graphics)) return;
+        if (!pixiObject) return;
         const meta = pixiObject._mb || {};
-        if (meta.type !== 'frame') return;
-        if (meta.instance) {
-            meta.instance.setFill(fillColor);
-        }
+        if (meta.type !== 'frame' || !meta.instance) return;
+        meta.instance.setFill(fillColor);
     }
 
     /**

package/src/core/SaveManager.js

@@ -30,6 +30,10 @@ export class SaveManager {
         this.retryCount = 0;
         this.lastSavedData = null;
         this.hasUnsavedChanges = false;
+        this.periodicSaveTimer = null;
+        this._listenersAttached = false;
+        this._handlers = {};
+        this._domHandlers = {};
         
         // Состояния сохранения
         this.saveStatus = 'idle'; // idle, saving, saved, error
@@ -48,40 +52,45 @@ export class SaveManager {
      * Настройка обработчиков событий
      */
     setupEventListeners() {
-        if (!this.options.autoSave) return;
+        if (!this.options.autoSave || this._listenersAttached) return;
+        this._listenersAttached = true;
+
+        this._handlers.onGridBoardDataChanged = () => {
+            this.markAsChanged();
+        };
+        this._handlers.onObjectCreated = () => {
+            this.markAsChanged();
+        };
+        this._handlers.onObjectUpdated = () => {
+            this.markAsChanged();
+        };
+        this._handlers.onObjectDeleted = () => {
+            this.markAsChanged();
+        };
+        this._handlers.onObjectStateChanged = () => {
+            this.markAsChanged();
+        };
         
         // Отслеживаем изменения сетки: не передаём частичные данные в сохранение,
         // чтобы собрать полный snapshot через getBoardData()
-        this.eventBus.on(Events.Grid.BoardDataChanged, () => {
-            this.markAsChanged();
-        });
+        this.eventBus.on(Events.Grid.BoardDataChanged, this._handlers.onGridBoardDataChanged);
         
         // Отслеживаем создание объектов
-        this.eventBus.on(Events.Object.Created, () => {
-            this.markAsChanged();
-        });
+        this.eventBus.on(Events.Object.Created, this._handlers.onObjectCreated);
         
         // Отслеживаем изменения объектов
-        this.eventBus.on(Events.Object.Updated, (data) => {
-
-            this.markAsChanged();
-        });
+        this.eventBus.on(Events.Object.Updated, this._handlers.onObjectUpdated);
         
         // Отслеживаем удаление объектов
-        this.eventBus.on(Events.Object.Deleted, () => {
-            this.markAsChanged();
-        });
+        this.eventBus.on(Events.Object.Deleted, this._handlers.onObjectDeleted);
         
         // Отслеживаем прямые изменения состояния (для Undo/Redo)
-        this.eventBus.on(Events.Object.StateChanged, (data) => {
-
-            this.markAsChanged();
-        });
+        this.eventBus.on(Events.Object.StateChanged, this._handlers.onObjectStateChanged);
         
         // Отслеживание перемещений теперь происходит через команды и state:changed
         
         // Сохранение при закрытии страницы (в том числе при резком закрытии окна)
-        window.addEventListener('beforeunload', (e) => {
+        this._domHandlers.beforeUnload = (e) => {
             if (!this.hasUnsavedChanges) return;
             try {
                 if (this.options.useBeaconOnUnload) {
@@ -97,10 +106,11 @@ export class SaveManager {
             e.returnedValue = '';
             e.returnValue = '';
             return '';
-        }, { capture: true });
+        };
+        window.addEventListener('beforeunload', this._domHandlers.beforeUnload, { capture: true });
 
         // Дополнительно: обработка быстрого ухода со страницы (pagehide надёжнее в части браузеров)
-        window.addEventListener('pagehide', () => {
+        this._domHandlers.pageHide = () => {
             if (!this.hasUnsavedChanges) return;
             try {
                 if (!this.options || this.options.useBeaconOnUnload) {
@@ -109,10 +119,11 @@ export class SaveManager {
                     this._flushSyncFallback();
                 }
             } catch (_) { /* игнорируем */ }
-        }, { capture: true });
+        };
+        window.addEventListener('pagehide', this._domHandlers.pageHide, { capture: true });
 
         // Подстраховка на случай, когда вкладка просто уходит в фон без beforeunload/pagehide
-        document.addEventListener('visibilitychange', () => {
+        this._domHandlers.visibilityChange = () => {
             if (document.visibilityState !== 'hidden') return;
             if (!this.hasUnsavedChanges) return;
             try {
@@ -122,11 +133,12 @@ export class SaveManager {
                     this._flushSyncFallback();
                 }
             } catch (_) { /* игнорируем */ }
-        });
+        };
+        document.addEventListener('visibilitychange', this._domHandlers.visibilityChange);
         
         // Периодическое автосохранение
         if (this.options.autoSave) {
-            setInterval(() => {
+            this.periodicSaveTimer = setInterval(() => {
                 if (this.hasUnsavedChanges && !this.isRequestInProgress) {
                     this.saveImmediately();
                 }
@@ -489,6 +501,11 @@ export class SaveManager {
     destroy() {
         if (this.saveTimer) {
             clearTimeout(this.saveTimer);
+            this.saveTimer = null;
+        }
+        if (this.periodicSaveTimer) {
+            clearInterval(this.periodicSaveTimer);
+            this.periodicSaveTimer = null;
         }
         
         // Финальное сохранение перед уничтожением
@@ -496,11 +513,19 @@ export class SaveManager {
             this.saveImmediately();
         }
         
-        // Удаляем обработчики событий (константы)
-        this.eventBus.off(Events.Grid.BoardDataChanged);
-        this.eventBus.off(Events.Object.Created);
-        this.eventBus.off(Events.Object.Updated);
-        this.eventBus.off(Events.Object.Deleted);
-        this.eventBus.off(Events.Tool.DragEnd);
+        // Удаляем обработчики событий, передавая исходные callback-ссылки.
+        if (this._handlers.onGridBoardDataChanged) this.eventBus.off(Events.Grid.BoardDataChanged, this._handlers.onGridBoardDataChanged);
+        if (this._handlers.onObjectCreated) this.eventBus.off(Events.Object.Created, this._handlers.onObjectCreated);
+        if (this._handlers.onObjectUpdated) this.eventBus.off(Events.Object.Updated, this._handlers.onObjectUpdated);
+        if (this._handlers.onObjectDeleted) this.eventBus.off(Events.Object.Deleted, this._handlers.onObjectDeleted);
+        if (this._handlers.onObjectStateChanged) this.eventBus.off(Events.Object.StateChanged, this._handlers.onObjectStateChanged);
+
+        if (this._domHandlers.beforeUnload) window.removeEventListener('beforeunload', this._domHandlers.beforeUnload, { capture: true });
+        if (this._domHandlers.pageHide) window.removeEventListener('pagehide', this._domHandlers.pageHide, { capture: true });
+        if (this._domHandlers.visibilityChange) document.removeEventListener('visibilitychange', this._domHandlers.visibilityChange);
+
+        this._listenersAttached = false;
+        this._handlers = {};
+        this._domHandlers = {};
     }
 }

package/src/core/bootstrap/CoreInitializer.js

@@ -0,0 +1,65 @@
+import { ToolManager } from '../../tools/ToolManager.js';
+import { SelectTool } from '../../tools/object-tools/SelectTool.js';
+import { BoardService } from '../../services/BoardService.js';
+import { ZoomPanController } from '../../services/ZoomPanController.js';
+import { ZOrderManager } from '../../services/ZOrderManager.js';
+import { FrameService } from '../../services/FrameService.js';
+
+export async function initializeCore(core) {
+    try {
+        await core.pixi.init();
+        core.keyboard.startListening();
+        await initializeCoreTools(core);
+
+        core.boardService = new BoardService(core.eventBus, core.pixi);
+        await core.boardService.init(() => (core.workspaceSize?.() || { width: core.options.width, height: core.options.height }));
+        core.zoomPan = new ZoomPanController(core.eventBus, core.pixi);
+        core.zoomPan.attach();
+        core.zOrder = new ZOrderManager(core.eventBus, core.pixi, core.state);
+        core.zOrder.attach();
+        core.frameService = new FrameService(core.eventBus, core.pixi, core.state);
+        core.frameService.attach();
+
+        core.state.loadBoard({
+            id: core.options.boardId || 'demo',
+            name: 'Demo Board',
+            objects: [],
+            viewport: { x: 0, y: 0, zoom: 1 }
+        });
+    } catch (error) {
+        console.error('MoodBoard init failed:', error);
+    }
+}
+
+export async function initializeCoreTools(core) {
+    const canvasElement = core.pixi.app.view;
+    core.workspaceSize = () => ({ width: canvasElement.clientWidth, height: canvasElement.clientHeight });
+    core.toolManager = new ToolManager(core.eventBus, canvasElement, core.pixi.app, core);
+
+    const selectTool = new SelectTool(core.eventBus);
+    core.toolManager.registerTool(selectTool);
+
+    const panToolModule = await import('../../tools/board-tools/PanTool.js');
+    const panTool = new panToolModule.PanTool(core.eventBus);
+    core.toolManager.registerTool(panTool);
+
+    const drawingToolModule = await import('../../tools/object-tools/DrawingTool.js');
+    const drawingTool = new drawingToolModule.DrawingTool(core.eventBus);
+    core.toolManager.registerTool(drawingTool);
+
+    const placementToolModule = await import('../../tools/object-tools/PlacementTool.js');
+    const placementTool = new placementToolModule.PlacementTool(core.eventBus, core);
+    core.toolManager.registerTool(placementTool);
+
+    const textToolModule = await import('../../tools/object-tools/TextTool.js');
+    const textTool = new textToolModule.TextTool(core.eventBus);
+    core.toolManager.registerTool(textTool);
+
+    core.selectTool = selectTool;
+    core.toolManager.activateTool('select');
+
+    core.setupToolEvents();
+    core.setupKeyboardEvents();
+    core.setupSaveEvents();
+    core.setupHistoryEvents();
+}

package/src/core/commands/DeleteObjectCommand.js

@@ -61,6 +61,14 @@ export class DeleteObjectCommand extends BaseCommand {
         this.coreMoodboard.pixi.removeObject(this.objectId);
         
         console.log('🗑️ DeleteObjectCommand: объект удален из state и PIXI');
+
+        // Освобождаем blob URL у изображений (утечка памяти при fallback без upload)
+        const blobSrc = this.objectData?.properties?.src || this.objectData?.src;
+        if (typeof blobSrc === 'string' && blobSrc.startsWith('blob:')) {
+            try {
+                URL.revokeObjectURL(blobSrc);
+            } catch (_) {}
+        }
         
         // Если это файловый объект с fileId, удаляем файл с сервера
         if (this.fileIdToDelete && this.coreMoodboard.fileUploadService) {

package/src/core/commands/GroupDeleteCommand.js

@@ -0,0 +1,75 @@
+import { BaseCommand } from './BaseCommand.js';
+import { Events } from '../events/Events.js';
+
+/**
+ * Команда группового удаления объектов.
+ * Один Undo восстанавливает всю группу.
+ */
+export class GroupDeleteCommand extends BaseCommand {
+    constructor(coreMoodboard, objectIds) {
+        super('group_delete', `Удалить группу (${objectIds.length} объектов)`);
+        this.coreMoodboard = coreMoodboard;
+        this.objectIds = Array.isArray(objectIds) ? [...objectIds] : [];
+
+        const objects = this.coreMoodboard.state.getObjects();
+        this.objectsData = [];
+        for (const id of this.objectIds) {
+            const obj = objects.find((o) => o.id === id);
+            if (obj) {
+                const data = JSON.parse(JSON.stringify(obj));
+                if (data.type === 'image') {
+                    if (data.imageId) {
+                        const imageUrl = `/api/images/${data.imageId}/file`;
+                        data.src = imageUrl;
+                        if (!data.properties) data.properties = {};
+                        data.properties.src = imageUrl;
+                    }
+                }
+                this.objectsData.push({ id, data });
+            }
+        }
+    }
+
+    async execute() {
+        for (const { id, data } of this.objectsData) {
+            this.coreMoodboard.state.removeObject(id);
+            this.coreMoodboard.pixi.removeObject(id);
+
+            const blobSrc = data?.properties?.src || data?.src;
+            if (typeof blobSrc === 'string' && blobSrc.startsWith('blob:')) {
+                try {
+                    URL.revokeObjectURL(blobSrc);
+                } catch (_) {}
+            }
+
+            if (data.type === 'file' && data.fileId && this.coreMoodboard.fileUploadService) {
+                try {
+                    await this.coreMoodboard.fileUploadService.deleteFile(data.fileId);
+                } catch (_) {}
+            }
+
+            this.coreMoodboard.eventBus.emit(Events.Object.Deleted, { objectId: id });
+        }
+    }
+
+    undo() {
+        for (const { id, data } of this.objectsData) {
+            if (data.type === 'file' && data.fileId) {
+                const restored = { ...data };
+                if (restored.properties) {
+                    restored.properties = {
+                        ...restored.properties,
+                        fileName: `[УДАЛЕН] ${restored.properties.fileName || 'файл'}`,
+                        isDeleted: true,
+                    };
+                }
+                this.coreMoodboard.state.addObject(restored);
+                this.coreMoodboard.pixi.createObject(restored);
+            } else {
+                this.coreMoodboard.state.addObject(data);
+                this.coreMoodboard.pixi.createObject(data);
+            }
+            this.coreMoodboard.eventBus.emit(Events.Object.Created, { objectId: id, objectData: data });
+        }
+    }
+}

package/src/core/commands/GroupRotateCommand.js

@@ -17,6 +17,9 @@ export class GroupRotateCommand extends BaseCommand {
 
     execute() {
         for (const c of this.changes) {
+            if (this.core.pixi?.updateObjectRotation) {
+                this.core.pixi.updateObjectRotation(c.id, c.toAngle);
+            }
             this.core.updateObjectRotationDirect(c.id, c.toAngle);
             this.core.updateObjectPositionDirect(c.id, c.toPos);
             this.emit(Events.Object.TransformUpdated, { objectId: c.id, type: 'rotation', angle: c.toAngle });
@@ -26,6 +29,9 @@ export class GroupRotateCommand extends BaseCommand {
 
     undo() {
         for (const c of this.changes) {
+            if (this.core.pixi?.updateObjectRotation) {
+                this.core.pixi.updateObjectRotation(c.id, c.fromAngle);
+            }
             this.core.updateObjectRotationDirect(c.id, c.fromAngle);
             this.core.updateObjectPositionDirect(c.id, c.fromPos);
             this.emit(Events.Object.TransformUpdated, { objectId: c.id, type: 'rotation', angle: c.fromAngle });

package/src/core/commands/UpdateContentCommand.js

@@ -0,0 +1,52 @@
+/**
+ * Команда изменения содержимого текста/записки для системы Undo/Redo
+ */
+import { BaseCommand } from './BaseCommand.js';
+import { Events } from '../events/Events.js';
+
+export class UpdateContentCommand extends BaseCommand {
+    constructor(coreMoodboard, objectId, oldContent, newContent) {
+        super('update_content', `Изменить текст`);
+        this.coreMoodboard = coreMoodboard;
+        this.objectId = objectId;
+        this.oldContent = oldContent;
+        this.newContent = newContent;
+    }
+
+    execute() {
+        this._applyContent(this.newContent);
+    }
+
+    undo() {
+        this._applyContent(this.oldContent);
+    }
+
+    canMergeWith(otherCommand) {
+        return otherCommand instanceof UpdateContentCommand &&
+               otherCommand.objectId === this.objectId;
+    }
+
+    mergeWith(otherCommand) {
+        if (!this.canMergeWith(otherCommand)) {
+            throw new Error('Cannot merge commands');
+        }
+        this.newContent = otherCommand.newContent;
+        this.timestamp = otherCommand.timestamp;
+    }
+
+    _applyContent(content) {
+        const objects = this.coreMoodboard.state.getObjects();
+        const object = objects.find((obj) => obj.id === this.objectId);
+        if (object) {
+            if (!object.properties) {
+                object.properties = {};
+            }
+            object.properties.content = content;
+            this.coreMoodboard.state.markDirty();
+        }
+        this.emit(Events.Tool.UpdateObjectContent, {
+            objectId: this.objectId,
+            content,
+        });
+    }
+}

package/src/core/commands/UpdateFramePropertiesCommand.js

@@ -0,0 +1,98 @@
+/**
+ * Команда изменения свойств фрейма (название, фон, тип, lockedAspect) для системы Undo/Redo.
+ * Поддерживает: title, backgroundColor, type, lockedAspect.
+ */
+import { BaseCommand } from './BaseCommand.js';
+import { Events } from '../events/Events.js';
+
+const FRAME_PROP_LABELS = {
+    title: 'название',
+    backgroundColor: 'фон',
+    type: 'тип',
+    lockedAspect: 'фиксация пропорций',
+};
+
+export class UpdateFramePropertiesCommand extends BaseCommand {
+    /**
+     * @param {Object} coreMoodboard — ядро доски
+     * @param {string} objectId — id объекта фрейма
+     * @param {string} property — имя свойства (title | backgroundColor | type | lockedAspect)
+     * @param {*} oldValue — прежнее значение
+     * @param {*} newValue — новое значение
+     */
+    constructor(coreMoodboard, objectId, property, oldValue, newValue) {
+        super('update_frame_properties', `Изменить ${FRAME_PROP_LABELS[property] || property}`);
+        this.coreMoodboard = coreMoodboard;
+        this.objectId = objectId;
+        this.property = property;
+        this.oldValue = oldValue;
+        this.newValue = newValue;
+    }
+
+    execute() {
+        this._apply(this.newValue);
+    }
+
+    undo() {
+        this._apply(this.oldValue);
+    }
+
+    canMergeWith(otherCommand) {
+        return otherCommand instanceof UpdateFramePropertiesCommand &&
+               otherCommand.objectId === this.objectId &&
+               otherCommand.property === this.property;
+    }
+
+    mergeWith(otherCommand) {
+        if (!this.canMergeWith(otherCommand)) {
+            throw new Error('Cannot merge commands');
+        }
+        this.newValue = otherCommand.newValue;
+        this.timestamp = otherCommand.timestamp;
+    }
+
+    _apply(value) {
+        const { coreMoodboard, objectId, property } = this;
+        const objects = coreMoodboard.state.getObjects();
+        const object = objects.find((obj) => obj.id === objectId);
+        if (!object) return;
+
+        if (property === 'backgroundColor') {
+            object.backgroundColor = value;
+        } else {
+            if (!object.properties) object.properties = {};
+            object.properties[property] = value;
+            if (property === 'type') {
+                object.properties.lockedAspect = (value !== 'custom');
+            }
+        }
+
+        coreMoodboard.state.markDirty();
+
+        const pixiObject = coreMoodboard.pixi?.objects?.get(objectId);
+        if (pixiObject?._mb?.instance) {
+            const instance = pixiObject._mb.instance;
+            if (property === 'title' && instance.setTitle) {
+                instance.setTitle(value);
+            }
+            if (property === 'backgroundColor' && instance.setBackgroundColor) {
+                instance.setBackgroundColor(value);
+            }
+        }
+
+        let updates;
+        if (property === 'backgroundColor') {
+            updates = { backgroundColor: value };
+        } else {
+            updates = { properties: { [property]: value } };
+            if (property === 'type') {
+                updates.properties.lockedAspect = (value !== 'custom');
+            }
+        }
+
+        coreMoodboard.eventBus.emit(Events.Object.StateChanged, {
+            objectId,
+            updates,
+        });
+    }
+}

package/src/core/commands/UpdateFrameTypeCommand.js

@@ -0,0 +1,85 @@
+/**
+ * Команда смены типа фрейма (type + lockedAspect + размер + позиция) — одно действие в истории.
+ */
+import { BaseCommand } from './BaseCommand.js';
+import { Events } from '../events/Events.js';
+
+export class UpdateFrameTypeCommand extends BaseCommand {
+    /**
+     * @param {Object} coreMoodboard
+     * @param {string} objectId
+     * @param {string} oldType
+     * @param {string} newType
+     * @param {{ width: number, height: number }} oldSize
+     * @param {{ width: number, height: number }} newSize
+     * @param {{ x: number, y: number }} oldPosition
+     * @param {{ x: number, y: number }} newPosition
+     */
+    constructor(coreMoodboard, objectId, oldType, newType, oldSize, newSize, oldPosition, newPosition) {
+        super('update_frame_type', `Изменить тип фрейма: ${oldType} → ${newType}`);
+        this.coreMoodboard = coreMoodboard;
+        this.objectId = objectId;
+        this.oldType = oldType;
+        this.newType = newType;
+        this.oldSize = oldSize ? { ...oldSize } : null;
+        this.newSize = newSize ? { ...newSize } : null;
+        this.oldPosition = oldPosition ? { ...oldPosition } : null;
+        this.newPosition = newPosition ? { ...newPosition } : null;
+    }
+
+    execute() {
+        this._apply(this.newType, this.newSize, this.newPosition);
+    }
+
+    undo() {
+        this._apply(this.oldType, this.oldSize, this.oldPosition);
+    }
+
+    _apply(typeValue, size, position) {
+        const { coreMoodboard, objectId } = this;
+        const objects = coreMoodboard.state.getObjects();
+        const object = objects.find((obj) => obj.id === objectId);
+        if (!object) return;
+
+        if (!object.properties) object.properties = {};
+        object.properties.type = typeValue;
+        object.properties.lockedAspect = (typeValue !== 'custom');
+
+        if (size) {
+            object.width = size.width;
+            object.height = size.height;
+            coreMoodboard.pixi.updateObjectSize(objectId, size, 'frame');
+        }
+
+        if (position) {
+            const pixiObject = coreMoodboard.pixi?.objects?.get(objectId);
+            if (pixiObject) {
+                const halfW = (object.width || 0) / 2;
+                const halfH = (object.height || 0) / 2;
+                pixiObject.x = position.x + halfW;
+                pixiObject.y = position.y + halfH;
+            }
+            object.position = object.position || { x: 0, y: 0 };
+            object.position.x = position.x;
+            object.position.y = position.y;
+        }
+
+        coreMoodboard.state.markDirty();
+
+        coreMoodboard.eventBus.emit(Events.Object.StateChanged, {
+            objectId,
+            updates: {
+                properties: { type: typeValue, lockedAspect: (typeValue !== 'custom') },
+            },
+        });
+
+        if (coreMoodboard.eventBus) {
+            coreMoodboard.eventBus.emit(Events.Object.TransformUpdated, {
+                objectId,
+                type: 'resize',
+                size: object.width && object.height ? { width: object.width, height: object.height } : null,
+                position: object.position,
+            });
+        }
+    }
+}