@sequent-org/moodboard 1.0.0

package/src/tools/AlignmentGuides.js

@@ -0,0 +1,326 @@
+import * as PIXI from 'pixi.js';
+import { Events } from '../core/events/Events.js';
+
+/**
+ * AlignmentGuides - система направляющих линий для выравнивания объектов
+ * Показывает пунктирные линии когда объекты выравниваются друг с другом при перетаскивании
+ */
+export class AlignmentGuides {
+    constructor(eventBus, pixiApp, getObjectsFunction) {
+        this.eventBus = eventBus;
+        this.pixiApp = pixiApp;
+        this.getObjects = getObjectsFunction; // Функция для получения всех объектов
+        
+        // Контейнер для направляющих линий
+        this.guidesContainer = new PIXI.Container();
+        this.guidesContainer.name = 'alignmentGuides';
+        this.guidesContainer.zIndex = 1000; // Выше остальных объектов
+        
+        // Добавляем в слой мира
+        if (this.pixiApp.stage.getChildByName('worldLayer')) {
+            this.pixiApp.stage.getChildByName('worldLayer').addChild(this.guidesContainer);
+        } else {
+            this.pixiApp.stage.addChild(this.guidesContainer);
+        }
+        
+        // Текущие направляющие
+        this.activeGuides = [];
+        
+        // Порог срабатывания (пиксели)
+        this.snapThreshold = 3;
+        
+        // Состояние перетаскивания
+        this.isDragging = false;
+        this.currentDragObject = null;
+        this.currentDragObjects = [];
+        
+        this._attachEvents();
+        
+        console.log('AlignmentGuides: Инициализированы направляющие линии выравнивания');
+    }
+
+    _attachEvents() {
+        // Одиночное перетаскивание
+        this.eventBus.on(Events.Tool.DragStart, (data) => {
+            console.log('AlignmentGuides: Начало перетаскивания объекта:', data.object);
+            this.isDragging = true;
+            this.currentDragObject = data.object;
+            this.currentDragObjects = [];
+        });
+
+        this.eventBus.on(Events.Tool.DragUpdate, (data) => {
+            if (this.isDragging && this.currentDragObject) {
+                this._updateGuides(data.object, data.position);
+            }
+        });
+
+        this.eventBus.on(Events.Tool.DragEnd, () => {
+            this.isDragging = false;
+            this.currentDragObject = null;
+            this.currentDragObjects = [];
+            this._clearGuides();
+        });
+
+        // Групповое перетаскивание
+        this.eventBus.on(Events.Tool.GroupDragStart, (data) => {
+            this.isDragging = true;
+            this.currentDragObject = null;
+            this.currentDragObjects = data.objects || [];
+        });
+
+        this.eventBus.on(Events.Tool.GroupDragUpdate, (data) => {
+            if (this.isDragging && this.currentDragObjects.length > 0) {
+                this._updateGroupGuides(data.objects, data.delta);
+            }
+        });
+
+        this.eventBus.on(Events.Tool.GroupDragEnd, () => {
+            this.isDragging = false;
+            this.currentDragObject = null;
+            this.currentDragObjects = [];
+            this._clearGuides();
+        });
+    }
+
+    _updateGuides(dragObjectId, newPosition) {
+        // Очищаем старые направляющие
+        this._clearGuides();
+        
+        if (!this.getObjects) return;
+        
+        const allObjects = this.getObjects();
+        const dragObject = allObjects.find(obj => obj.id === dragObjectId);
+        if (!dragObject) {
+            console.warn('AlignmentGuides: Перетаскиваемый объект не найден:', dragObjectId);
+            return;
+        }
+
+        // Вычисляем границы перетаскиваемого объекта
+        const dragBounds = this._getObjectBounds(dragObject, newPosition);
+        if (!dragBounds) {
+            console.warn('AlignmentGuides: Не удалось получить границы перетаскиваемого объекта');
+            return;
+        }
+        
+        // Ищем совпадения с другими объектами
+        const guides = [];
+        
+        for (const obj of allObjects) {
+            if (obj.id === dragObjectId) continue; // Пропускаем сам перетаскиваемый объект
+            
+            const objBounds = this._getObjectBounds(obj);
+            if (!objBounds) continue;
+            
+            // Проверяем совпадения по горизонтали
+            const horizontalGuides = this._checkHorizontalAlignment(dragBounds, objBounds);
+            guides.push(...horizontalGuides);
+            
+            // Проверяем совпадения по вертикали  
+            const verticalGuides = this._checkVerticalAlignment(dragBounds, objBounds);
+            guides.push(...verticalGuides);
+        }
+        
+        // Отображаем найденные направляющие
+        if (guides.length > 0) {
+            console.log('AlignmentGuides: Найдено направляющих:', guides.length);
+            this._showGuides(guides);
+        }
+    }
+
+    _updateGroupGuides(dragObjectIds, delta) {
+        // Для группового перетаскивания пока упрощенная логика
+        // TODO: Реализовать более сложную логику для групп
+        this._clearGuides();
+    }
+
+    _getObjectBounds(objectData, customPosition = null) {
+        try {
+            const position = customPosition || objectData.position || { x: 0, y: 0 };
+            
+            // Размеры могут быть на верхнем уровне объекта или в properties
+            const width = objectData.width || 
+                         (objectData.properties && objectData.properties.width) || 
+                         100;
+            const height = objectData.height || 
+                          (objectData.properties && objectData.properties.height) || 
+                          100;
+            
+            return {
+                left: position.x,
+                right: position.x + width,
+                top: position.y,
+                bottom: position.y + height,
+                centerX: position.x + width / 2,
+                centerY: position.y + height / 2,
+                width: width,
+                height: height
+            };
+        } catch (error) {
+            console.warn('AlignmentGuides: Не удалось получить границы объекта:', objectData);
+            return null;
+        }
+    }
+
+    _checkHorizontalAlignment(dragBounds, objBounds) {
+        const guides = [];
+        
+        // Проверяем выравнивание по левому краю
+        if (Math.abs(dragBounds.left - objBounds.left) <= this.snapThreshold) {
+            guides.push({
+                type: 'vertical',
+                x: objBounds.left,
+                y1: Math.min(dragBounds.top, objBounds.top) - 20,
+                y2: Math.max(dragBounds.bottom, objBounds.bottom) + 20
+            });
+        }
+        
+        // Проверяем выравнивание по правому краю
+        if (Math.abs(dragBounds.right - objBounds.right) <= this.snapThreshold) {
+            guides.push({
+                type: 'vertical',
+                x: objBounds.right,
+                y1: Math.min(dragBounds.top, objBounds.top) - 20,
+                y2: Math.max(dragBounds.bottom, objBounds.bottom) + 20
+            });
+        }
+        
+        // Проверяем выравнивание по центру по горизонтали
+        if (Math.abs(dragBounds.centerX - objBounds.centerX) <= this.snapThreshold) {
+            guides.push({
+                type: 'vertical',
+                x: objBounds.centerX,
+                y1: Math.min(dragBounds.top, objBounds.top) - 20,
+                y2: Math.max(dragBounds.bottom, objBounds.bottom) + 20
+            });
+        }
+        
+        return guides;
+    }
+
+    _checkVerticalAlignment(dragBounds, objBounds) {
+        const guides = [];
+        
+        // Проверяем выравнивание по верхнему краю
+        if (Math.abs(dragBounds.top - objBounds.top) <= this.snapThreshold) {
+            guides.push({
+                type: 'horizontal',
+                y: objBounds.top,
+                x1: Math.min(dragBounds.left, objBounds.left) - 20,
+                x2: Math.max(dragBounds.right, objBounds.right) + 20
+            });
+        }
+        
+        // Проверяем выравнивание по нижнему краю
+        if (Math.abs(dragBounds.bottom - objBounds.bottom) <= this.snapThreshold) {
+            guides.push({
+                type: 'horizontal',
+                y: objBounds.bottom,
+                x1: Math.min(dragBounds.left, objBounds.left) - 20,
+                x2: Math.max(dragBounds.right, objBounds.right) + 20
+            });
+        }
+        
+        // Проверяем выравнивание по центру по вертикали
+        if (Math.abs(dragBounds.centerY - objBounds.centerY) <= this.snapThreshold) {
+            guides.push({
+                type: 'horizontal',
+                y: objBounds.centerY,
+                x1: Math.min(dragBounds.left, objBounds.left) - 20,
+                x2: Math.max(dragBounds.right, objBounds.right) + 20
+            });
+        }
+        
+        return guides;
+    }
+
+    _showGuides(guides) {
+        // Ограничиваем количество направляющих для производительности
+        const maxGuides = 10;
+        const guidesToShow = guides.slice(0, maxGuides);
+        
+        for (const guide of guidesToShow) {
+            const line = this._createGuideLine(guide);
+            if (line) {
+                this.guidesContainer.addChild(line);
+                this.activeGuides.push(line);
+            }
+        }
+    }
+
+    _createGuideLine(guide) {
+        const graphics = new PIXI.Graphics();
+        
+        // Стиль пунктирной линии
+        const color = 0xFF6B6B; // Красноватый цвет как в Figma
+        const alpha = 0.8;
+        const lineWidth = 1;
+        
+        graphics.lineStyle(lineWidth, color, alpha);
+        
+        if (guide.type === 'vertical') {
+            // Вертикальная линия
+            this._drawDashedLine(graphics, guide.x, guide.y1, guide.x, guide.y2);
+        } else if (guide.type === 'horizontal') {
+            // Горизонтальная линия
+            this._drawDashedLine(graphics, guide.x1, guide.y, guide.x2, guide.y);
+        }
+        
+        return graphics;
+    }
+
+    _drawDashedLine(graphics, x1, y1, x2, y2) {
+        const dashLength = 5;
+        const gapLength = 3;
+        
+        const totalLength = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
+        const angle = Math.atan2(y2 - y1, x2 - x1);
+        
+        let currentLength = 0;
+        let isDash = true;
+        
+        while (currentLength < totalLength) {
+            const segmentLength = isDash ? dashLength : gapLength;
+            const endLength = Math.min(currentLength + segmentLength, totalLength);
+            
+            const startX = x1 + currentLength * Math.cos(angle);
+            const startY = y1 + currentLength * Math.sin(angle);
+            const endX = x1 + endLength * Math.cos(angle);
+            const endY = y1 + endLength * Math.sin(angle);
+            
+            if (isDash) {
+                graphics.moveTo(startX, startY);
+                graphics.lineTo(endX, endY);
+            }
+            
+            currentLength = endLength;
+            isDash = !isDash;
+        }
+    }
+
+    _clearGuides() {
+        // Удаляем все активные направляющие
+        for (const guide of this.activeGuides) {
+            if (guide.parent) {
+                guide.parent.removeChild(guide);
+            }
+            guide.destroy();
+        }
+        this.activeGuides = [];
+    }
+
+    destroy() {
+        this._clearGuides();
+        
+        if (this.guidesContainer && this.guidesContainer.parent) {
+            this.guidesContainer.parent.removeChild(this.guidesContainer);
+        }
+        
+        // Отписываемся от событий
+        this.eventBus.off(Events.Tool.DragStart);
+        this.eventBus.off(Events.Tool.DragUpdate);
+        this.eventBus.off(Events.Tool.DragEnd);
+        this.eventBus.off(Events.Tool.GroupDragStart);
+        this.eventBus.off(Events.Tool.GroupDragUpdate);
+        this.eventBus.off(Events.Tool.GroupDragEnd);
+    }
+}

package/src/tools/BaseTool.js

@@ -0,0 +1,257 @@
+/**
+ * Базовый класс для всех инструментов MoodBoard
+ */
+import { Events } from '../core/events/Events.js';
+
+export class BaseTool {
+    constructor(name, eventBus) {
+        this.name = name;
+        this.eventBus = eventBus;
+        this.isActive = false;
+        this.cursor = 'default';
+        this.hotkey = null;
+        
+        // Состояние инструмента
+        this.isPressed = false;
+        this.startPoint = null;
+        this.currentPoint = null;
+    }
+    
+    /**
+     * Активация инструмента
+     */
+    activate() {
+        this.isActive = true;
+        this.onActivate();
+        this.setCursor();
+        this.eventBus.emit(Events.Tool.Activated, { tool: this.name });
+    }
+    
+    /**
+     * Деактивация инструмента
+     */
+    deactivate() {
+        this.isActive = false;
+        this.onDeactivate();
+        this.eventBus.emit(Events.Tool.Deactivated, { tool: this.name });
+    }
+    
+    /**
+     * Устанавливает курсор для инструмента
+     */
+    setCursor() {
+        if (typeof document !== 'undefined' && document.body) {
+            document.body.style.cursor = this.cursor;
+        }
+    }
+    
+    /**
+     * Обработчики событий мыши - переопределяются в дочерних классах
+     */
+    
+    /**
+     * Нажатие кнопки мыши
+     * @param {Object} event - событие мыши {x, y, button, target}
+     */
+    onMouseDown(event) {
+        this.isPressed = true;
+        this.startPoint = { x: event.x, y: event.y };
+        this.currentPoint = { x: event.x, y: event.y };
+    }
+    
+    /**
+     * Перемещение мыши
+     * @param {Object} event - событие мыши {x, y, target}
+     */
+    onMouseMove(event) {
+        this.currentPoint = { x: event.x, y: event.y };
+    }
+    
+    /**
+     * Отпускание кнопки мыши
+     * @param {Object} event - событие мыши {x, y, button, target}
+     */
+    onMouseUp(event) {
+        this.isPressed = false;
+        this.startPoint = null;
+        this.currentPoint = null;
+    }
+    
+    /**
+     * Двойной клик
+     * @param {Object} event - событие мыши {x, y, target}
+     */
+    onDoubleClick(event) {
+        // Переопределяется в дочерних классах
+    }
+
+    /**
+     * Контекстное меню (правая кнопка)
+     * @param {Object} event - событие мыши {x, y}
+     */
+    onContextMenu(event) {
+        // Переопределяется в дочерних классах
+    }
+    
+    /**
+     * Колесико мыши
+     * @param {Object} event - событие {x, y, delta, ctrlKey}
+     */
+    onMouseWheel(event) {
+        // Переопределяется в дочерних классах
+    }
+    
+    /**
+     * Обработчики клавиатуры
+     */
+    
+    /**
+     * Нажатие клавиши
+     * @param {Object} event - событие клавиатуры {key, ctrlKey, shiftKey, altKey}
+     */
+    onKeyDown(event) {
+        // Переопределяется в дочерних классах
+    }
+    
+    /**
+     * Отпускание клавиши
+     * @param {Object} event - событие клавиатуры {key}
+     */
+    onKeyUp(event) {
+        // Переопределяется в дочерних классах
+    }
+    
+    /**
+     * Методы жизненного цикла инструмента
+     */
+    
+    /**
+     * Вызывается при активации инструмента
+     */
+    onActivate() {
+        // Переопределяется в дочерних классах
+    }
+    
+    /**
+     * Вызывается при деактивации инструмента
+     */
+    onDeactivate() {
+        // Переопределяется в дочерних классах
+    }
+    
+    /**
+     * Вспомогательные методы
+     */
+    
+    /**
+     * Вычисляет расстояние между двумя точками
+     */
+    getDistance(point1, point2) {
+        const dx = point2.x - point1.x;
+        const dy = point2.y - point1.y;
+        return Math.sqrt(dx * dx + dy * dy);
+    }
+    
+    /**
+     * Проверяет, находится ли точка в пределах области
+     */
+    isPointInBounds(point, bounds) {
+        return point.x >= bounds.x && 
+               point.x <= bounds.x + bounds.width &&
+               point.y >= bounds.y && 
+               point.y <= bounds.y + bounds.height;
+    }
+    
+    /**
+     * Эмитит событие инструмента
+     */
+    emit(eventName, data) {
+        // Поддержка как коротких имён ('hit:test'), так и полных ('tool:hit:test')
+        const isQualified = eventName.startsWith('tool:');
+        const name = isQualified ? eventName.slice(5) : eventName;
+
+        // События, ожидающие мутацию объекта (передаем data напрямую)
+        const passThrough = new Set([
+            'hit:test',
+            'get:object:position',
+            'get:object:pixi',
+            'get:object:size',
+            'get:object:rotation',
+            'get:all:objects',
+            'find:object:by:position'
+        ]);
+
+        if (passThrough.has(name)) {
+            const map = new Map([
+                ['hit:test', Events.Tool.HitTest],
+                ['get:object:position', Events.Tool.GetObjectPosition],
+                ['get:object:pixi', Events.Tool.GetObjectPixi],
+                ['get:object:size', Events.Tool.GetObjectSize],
+                ['get:object:rotation', Events.Tool.GetObjectRotation],
+                ['get:all:objects', Events.Tool.GetAllObjects],
+                ['find:object:by:position', Events.Tool.FindObjectByPosition],
+            ]);
+            const evt = map.get(name) || `tool:${name}`;
+            this.eventBus.emit(evt, data);
+            return;
+        }
+
+        // Для остальных событий добавляем контекст инструмента
+        const eventData = { tool: this.name, ...data };
+        if (name.includes('rotate')) {
+            console.log(`📡 BaseTool отправляет событие tool:${name}:`, eventData);
+        }
+        const map2 = new Map([
+            ['drag:start', Events.Tool.DragStart],
+            ['drag:update', Events.Tool.DragUpdate],
+            ['drag:end', Events.Tool.DragEnd],
+            ['group:drag:start', Events.Tool.GroupDragStart],
+            ['group:drag:update', Events.Tool.GroupDragUpdate],
+            ['group:drag:end', Events.Tool.GroupDragEnd],
+            ['resize:start', Events.Tool.ResizeStart],
+            ['resize:update', Events.Tool.ResizeUpdate],
+            ['resize:end', Events.Tool.ResizeEnd],
+            ['group:resize:start', Events.Tool.GroupResizeStart],
+            ['group:resize:update', Events.Tool.GroupResizeUpdate],
+            ['group:resize:end', Events.Tool.GroupResizeEnd],
+            ['rotate:update', Events.Tool.RotateUpdate],
+            ['rotate:end', Events.Tool.RotateEnd],
+            ['group:rotate:start', Events.Tool.GroupRotateStart],
+            ['group:rotate:update', Events.Tool.GroupRotateUpdate],
+            ['group:rotate:end', Events.Tool.GroupRotateEnd],
+            ['duplicate:request', Events.Tool.DuplicateRequest],
+            ['context:menu:show', Events.Tool.ContextMenuShow],
+            ['objects:delete', Events.Tool.ObjectsDelete],
+            		['object:edit', Events.Tool.ObjectEdit],
+		['update:object:content', Events.Tool.UpdateObjectContent],
+		['hide:object:text', Events.Tool.HideObjectText],
+		['show:object:text', Events.Tool.ShowObjectText],
+            ['selection:add', Events.Tool.SelectionAdd],
+            ['selection:remove', Events.Tool.SelectionRemove],
+            ['selection:clear', Events.Tool.SelectionClear],
+            ['selection:all', Events.Tool.SelectionAll],
+        ]);
+        const evt2 = map2.get(name) || `tool:${name}`;
+        this.eventBus.emit(evt2, eventData);
+    }
+    
+    /**
+     * Получает настройки инструмента
+     */
+    getSettings() {
+        return {
+            name: this.name,
+            cursor: this.cursor,
+            hotkey: this.hotkey,
+            isActive: this.isActive
+        };
+    }
+    
+    /**
+     * Очистка ресурсов инструмента
+     */
+    destroy() {
+        this.deactivate();
+        this.eventBus = null;
+    }
+}