@sequent-org/moodboard 1.0.0

package/src/core/commands/ReorderZCommand.js

@@ -0,0 +1,45 @@
+import { BaseCommand } from './BaseCommand.js';
+import { Events } from '../events/Events.js';
+
+/**
+ * Команда изменения порядка (z-order) одного объекта
+ */
+export class ReorderZCommand extends BaseCommand {
+    constructor(core, objectId, fromIndex, toIndex) {
+        super('reorder-z', 'Изменить порядок слоя объекта');
+        this.core = core;
+        this.objectId = objectId;
+        this.fromIndex = fromIndex;
+        this.toIndex = toIndex;
+    }
+
+    execute() {
+        this.apply(this.fromIndex, this.toIndex);
+    }
+
+    undo() {
+        this.apply(this.toIndex, this.fromIndex);
+    }
+
+    apply(from, to) {
+        const arr = this.core.state.state.objects || [];
+        const idx = arr.findIndex(o => o.id === this.objectId);
+        if (idx === -1) return;
+        const [item] = arr.splice(idx, 1);
+        const insertAt = Math.max(0, Math.min(to, arr.length));
+        arr.splice(insertAt, 0, item);
+        // Обновляем zIndex в PIXI
+        const app = this.core.pixi?.app;
+        if (app) {
+            app.stage.sortableChildren = true;
+            (this.core.state.state.objects || []).forEach((o, i) => {
+                const pixi = this.core.pixi.objects.get(o.id);
+                if (pixi) pixi.zIndex = i;
+            });
+        }
+        this.core.state.markDirty();
+        this.emit(Events.Object.Reordered, { objectId: this.objectId, toIndex: to });
+    }
+}
+
+

package/src/core/commands/ResizeObjectCommand.js

@@ -0,0 +1,135 @@
+import { BaseCommand } from './BaseCommand.js';
+import { Events } from '../events/Events.js';
+
+/**
+ * Команда изменения размера объекта
+ */
+export class ResizeObjectCommand extends BaseCommand {
+    constructor(coreMoodboard, objectId, oldSize, newSize, oldPosition = null, newPosition = null) {
+        super('resize_object', `Изменить размер объекта`);
+        this.coreMoodboard = coreMoodboard;
+        this.objectId = objectId;
+        this.oldSize = { ...oldSize };
+        this.newSize = { ...newSize };
+        this.oldPosition = oldPosition ? { ...oldPosition } : null;
+        this.newPosition = newPosition ? { ...newPosition } : null;
+        
+        // Обновляем описание с размерами
+        this.description = `Изменить размер объекта ${Math.round(this.oldSize.width)}×${Math.round(this.oldSize.height)} → ${Math.round(this.newSize.width)}×${Math.round(this.newSize.height)}`;
+    }
+
+    execute() {
+        // Устанавливаем новый размер и позицию
+        this._setSizeAndPosition(this.newSize, this.newPosition);
+        this._updateResizeHandles();
+    }
+
+    undo() {
+        // Возвращаем старый размер и позицию
+        this._setSizeAndPosition(this.oldSize, this.oldPosition);
+        this._updateResizeHandles();
+    }
+
+    _setSizeAndPosition(size, position = null) {
+        // Получаем тип объекта из состояния
+        const objects = this.coreMoodboard.state.state.objects;
+        const object = objects.find(obj => obj.id === this.objectId);
+        const objectType = object ? object.type : null;
+        
+
+        
+        // Отладка ресайза
+        if (position && object) {
+            console.log(`🔧 Ресайз объекта ${this.objectId}: newSize(${size.width}, ${size.height}), newPosition(${position.x}, ${position.y})`);
+        }
+        
+        // Обновляем размер в PIXI с указанием типа
+        this.coreMoodboard.pixi.updateObjectSize(this.objectId, size, objectType);
+
+        // Обновляем позицию если передана (позиция в state — левый-верх; в PIXI — центр)
+        // ВАЖНО: используем НОВЫЙ размер для правильного вычисления центра!
+        if (position && object) {
+            const pixiObject = this.coreMoodboard.pixi.objects.get(this.objectId);
+            if (pixiObject) {
+                const halfW = size.width / 2;
+                const halfH = size.height / 2;
+                pixiObject.x = position.x + halfW;
+                pixiObject.y = position.y + halfH;
+                object.position.x = position.x;
+                object.position.y = position.y;
+                console.log(`🎯 После ресайза: center(${pixiObject.x}, ${pixiObject.y}), leftTop(${position.x}, ${position.y})`);
+                
+                // Проверим, где находятся границы объекта
+                const leftEdge = pixiObject.x - size.width / 2;
+                const rightEdge = pixiObject.x + size.width / 2;
+                const topEdge = pixiObject.y - size.height / 2;
+                const bottomEdge = pixiObject.y + size.height / 2;
+                console.log(`📏 Границы объекта: left=${leftEdge}, right=${rightEdge}, top=${topEdge}, bottom=${bottomEdge}`);
+
+            }
+        }
+        
+        // Обновляем размер в состоянии (без эмита события, чтобы не создавать новую команду)
+        if (object) {
+            object.width = size.width;
+            object.height = size.height;
+            this.coreMoodboard.state.markDirty();
+        }
+        
+        // Уведомляем о том, что объект был изменен (для обновления ручек)
+        if (this.eventBus) {
+            console.log(`📡 ResizeObjectCommand отправляет object:transform:updated для ${this.objectId}`);
+            this.eventBus.emit(Events.Object.TransformUpdated, {
+                objectId: this.objectId,
+                type: 'resize',
+                size: size,
+                position: position
+            });
+        } else {
+            console.warn(`❌ ResizeObjectCommand: eventBus не установлен для ${this.objectId}`);
+        }
+    }
+
+    /**
+     * Обновляет ручки изменения размера после операции
+     */
+    _updateResizeHandles() {
+        // Проверяем, есть ли активный SelectTool и выделен ли этот объект
+        const toolManager = this.coreMoodboard.toolManager;
+        if (!toolManager) return;
+        
+        const activeTool = toolManager.getActiveTool();
+        if (!activeTool || activeTool.name !== 'select') return;
+        
+        // Если этот объект выделен, обновляем ручки
+        if (activeTool.selectedObjects && activeTool.selectedObjects.has(this.objectId)) {
+            console.log(`🔄 Обновляем ручки для объекта ${this.objectId} после Undo/Redo`);
+            activeTool.updateResizeHandles();
+        }
+    }
+
+    /**
+     * Можно ли объединить с другой командой изменения размера того же объекта
+     */
+    canMergeWith(otherCommand) {
+        return otherCommand instanceof ResizeObjectCommand && 
+               otherCommand.objectId === this.objectId;
+    }
+
+    /**
+     * Объединить с другой командой изменения размера
+     */
+    mergeWith(otherCommand) {
+        if (!this.canMergeWith(otherCommand)) {
+            throw new Error('Cannot merge with this command');
+        }
+        
+        // Обновляем конечный размер и позицию
+        this.newSize = { ...otherCommand.newSize };
+        if (otherCommand.newPosition) {
+            this.newPosition = { ...otherCommand.newPosition };
+        }
+        this.description = `Изменить размер объекта ${Math.round(this.oldSize.width)}×${Math.round(this.oldSize.height)} → ${Math.round(this.newSize.width)}×${Math.round(this.newSize.height)}`;
+        this.timestamp = otherCommand.timestamp; // Обновляем время последнего изменения
+    }
+}

package/src/core/commands/RotateObjectCommand.js

@@ -0,0 +1,70 @@
+/**
+ * Команда поворота объекта для системы Undo/Redo
+ */
+import { BaseCommand } from './BaseCommand.js';
+import { Events } from '../events/Events.js';
+
+export class RotateObjectCommand extends BaseCommand {
+    constructor(coreMoodboard, objectId, oldAngle, newAngle) {
+        super();
+        this.coreMoodboard = coreMoodboard;
+        this.objectId = objectId;
+        this.oldAngle = oldAngle;
+        this.newAngle = newAngle;
+    }
+
+    execute() {
+        // Обновляем угол поворота в состоянии
+        this._setRotation(this.newAngle);
+        
+        // Применяем новый угол поворота
+        this.emit(Events.Object.Rotate, {
+            objectId: this.objectId,
+            angle: this.newAngle
+        });
+        console.log(`🔄 Поворачиваем объект ${this.objectId} на ${this.newAngle}°`);
+    }
+
+    undo() {
+        // Обновляем угол поворота в состоянии
+        this._setRotation(this.oldAngle);
+        
+        // Возвращаем старый угол поворота
+        this.emit(Events.Object.Rotate, {
+            objectId: this.objectId,
+            angle: this.oldAngle
+        });
+        console.log(`↩️ Отменяем поворот объекта ${this.objectId}, возвращаем ${this.oldAngle}°`);
+    }
+
+    /**
+     * Обновляет угол поворота объекта в состоянии
+     * @private
+     */
+    _setRotation(angle) {
+        // Обновляем угол поворота в состоянии объекта
+        const objects = this.coreMoodboard.state.state.objects;
+        const object = objects.find(obj => obj.id === this.objectId);
+        if (object) {
+            if (!object.transform) {
+                object.transform = {};
+            }
+            object.transform.rotation = angle;
+            this.coreMoodboard.state.markDirty();
+        }
+        
+        // Уведомляем о том, что объект был изменен (для обновления ручек)
+        if (this.eventBus) {
+            this.eventBus.emit(Events.Object.TransformUpdated, {
+                objectId: this.objectId,
+                type: 'rotation',
+                rotation: angle
+            });
+        }
+    }
+
+    getDescription() {
+        const delta = this.newAngle - this.oldAngle;
+        return `Поворот объекта на ${delta.toFixed(1)}°`;
+    }
+}

package/src/core/commands/index.js

@@ -0,0 +1,14 @@
+// Экспорт всех команд
+export { BaseCommand } from './BaseCommand.js';
+export { CreateObjectCommand } from './CreateObjectCommand.js';
+export { DeleteObjectCommand } from './DeleteObjectCommand.js';
+export { MoveObjectCommand } from './MoveObjectCommand.js';
+export { ResizeObjectCommand } from './ResizeObjectCommand.js';
+export { CopyObjectCommand } from './CopyObjectCommand.js';
+export { PasteObjectCommand } from './PasteObjectCommand.js';
+export { GroupMoveCommand } from './GroupMoveCommand.js';
+export { GroupRotateCommand } from './GroupRotateCommand.js';
+export { GroupResizeCommand } from './GroupResizeCommand.js';
+export { ReorderZCommand } from './ReorderZCommand.js';
+export { GroupReorderZCommand } from './GroupReorderZCommand.js';
+export { EditFileNameCommand } from './EditFileNameCommand.js';

package/src/core/events/Events.js

@@ -0,0 +1,147 @@
+// Единый реестр названий событий EventBus
+
+export const Events = {
+	Tool: {
+		Activated: 'tool:activated',
+		Deactivated: 'tool:deactivated',
+		ContextMenuShow: 'tool:context:menu:show',
+		SelectionAdd: 'tool:selection:add',
+		SelectionRemove: 'tool:selection:remove',
+		SelectionClear: 'tool:selection:clear',
+		SelectionAll: 'tool:selection:all',
+		HitTest: 'tool:hit:test',
+		GetSelection: 'tool:get:selection',
+		GetAllObjects: 'tool:get:all:objects',
+		GetObjectPosition: 'tool:get:object:position',
+		GetObjectSize: 'tool:get:object:size',
+		GetObjectRotation: 'tool:get:object:rotation',
+		GetObjectPixi: 'tool:get:object:pixi',
+		DragStart: 'tool:drag:start',
+		DragUpdate: 'tool:drag:update',
+		DragEnd: 'tool:drag:end',
+		GroupDragStart: 'tool:group:drag:start',
+		GroupDragUpdate: 'tool:group:drag:update',
+		GroupDragEnd: 'tool:group:drag:end',
+		ResizeStart: 'tool:resize:start',
+		ResizeUpdate: 'tool:resize:update',
+		ResizeEnd: 'tool:resize:end',
+		GroupResizeStart: 'tool:group:resize:start',
+		GroupResizeUpdate: 'tool:group:resize:update',
+		GroupResizeEnd: 'tool:group:resize:end',
+		RotateUpdate: 'tool:rotate:update',
+		RotateEnd: 'tool:rotate:end',
+		GroupRotateStart: 'tool:group:rotate:start',
+		GroupRotateUpdate: 'tool:group:rotate:update',
+		GroupRotateEnd: 'tool:group:rotate:end',
+		DuplicateRequest: 'tool:duplicate:request',
+		DuplicateReady: 'tool:duplicate:ready',
+		GroupDuplicateRequest: 'tool:group:duplicate:request',
+		GroupDuplicateReady: 'tool:group:duplicate:ready',
+		PanUpdate: 'tool:pan:update',
+		WheelZoom: 'tool:wheel:zoom',
+		ObjectsDelete: 'tool:objects:delete',
+		ObjectEdit: 'tool:object:edit',
+		UpdateObjectContent: 'tool:update:object:content',
+		HideObjectText: 'tool:hide:object:text',
+		ShowObjectText: 'tool:show:object:text',
+		FindObjectByPosition: 'tool:find:object:by:position',
+	},
+
+	UI: {
+		ToolbarAction: 'toolbar:action',
+		UpdateHistoryButtons: 'ui:update-history-buttons',
+		ContextMenuShow: 'ui:contextmenu:show',
+		GridChange: 'ui:grid:change',
+		GridCurrent: 'ui:grid:current',
+		CopyObject: 'ui:copy-object',
+		CopyGroup: 'ui:copy-group',
+		PasteAt: 'ui:paste-at',
+        PasteImage: 'ui:paste-image',
+        PasteImageAt: 'ui:paste-image-at',
+		ZoomIn: 'ui:zoom:in',
+		ZoomOut: 'ui:zoom:out',
+		ZoomReset: 'ui:zoom:reset',
+		ZoomFit: 'ui:zoom:fit',
+		ZoomSelection: 'ui:zoom:selection',
+		ZoomPercent: 'ui:zoom:percent',
+		MinimapGetData: 'ui:minimap:get-data',
+		MinimapCenterOn: 'ui:minimap:center-on',
+		TextEditStart: 'ui:text:edit:start',
+		TextEditEnd: 'ui:text:edit:end',
+		LayerBringToFront: 'ui:layer:bring-to-front',
+		LayerBringForward: 'ui:layer:bring-forward',
+		LayerSendBackward: 'ui:layer:send-backward',
+		LayerSendToBack: 'ui:layer:send-to-back',
+		LayerGroupBringToFront: 'ui:layer-group:bring-to-front',
+		LayerGroupBringForward: 'ui:layer-group:bring-forward',
+		LayerGroupSendBackward: 'ui:layer-group:send-backward',
+		LayerGroupSendToBack: 'ui:layer-group:send-to-back',
+		MapToggle: 'ui:map:toggle',
+		PaintPick: 'ui:paint:pick',
+		CursorMove: 'ui:cursor:move',
+	},
+
+	Keyboard: {
+		KeyUp: 'keyboard:keyup',
+		SelectAll: 'keyboard:select-all',
+		Delete: 'keyboard:delete',
+		Escape: 'keyboard:escape',
+		ToolSelect: 'keyboard:tool-select',
+		Move: 'keyboard:move',
+		Copy: 'keyboard:copy',
+		Paste: 'keyboard:paste',
+		Undo: 'keyboard:undo',
+		Redo: 'keyboard:redo',
+	},
+
+	Object: {
+		Created: 'object:created',
+		Updated: 'object:updated',
+		Deleted: 'object:deleted',
+		Rotate: 'object:rotate',
+		TransformUpdated: 'object:transform:updated',
+		Reordered: 'object:reordered',
+		Pasted: 'object:pasted',
+		StateChanged: 'state:changed',
+		FileNameChange: 'object:filename:change',
+	},
+
+	History: {
+		Changed: 'history:changed',
+		Debug: 'history:debug',
+	},
+
+	Save: {
+		GetBoardData: 'save:get-board-data',
+		StatusChanged: 'save:status-changed',
+		Success: 'save:success',
+		Error: 'save:error',
+		Loaded: 'save:loaded',
+		LoadError: 'save:load-error',
+	},
+
+	Grid: {
+		BoardDataChanged: 'board:data-changed',
+	},
+
+	Board: {
+		Loaded: 'board:loaded',
+	},
+
+	Place: {
+		Set: 'place:set',
+		FileSelected: 'place:file:selected',
+		FileCanceled: 'place:file:canceled',
+		ImageSelected: 'place:image:selected',
+		ImageCanceled: 'place:image:canceled',
+		GhostShow: 'place:ghost:show',
+		GhostHide: 'place:ghost:hide',
+		GhostUpdate: 'place:ghost:update',
+	},
+
+	Draw: {
+		BrushSet: 'draw:brush:set',
+	},
+};
+
+