@sequent-org/moodboard 1.0.0

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

@@ -0,0 +1,416 @@
+import { BaseTool } from '../BaseTool.js';
+
+/**
+ * Инструмент для создания и редактирования текстовых объектов
+ */
+export class TextTool extends BaseTool {
+    constructor(eventBus) {
+        super('text', eventBus);
+        this.cursor = 'text';
+        this.hotkey = 't';
+        this.container = null;
+        
+        // Состояние редактирования
+        this.isEditing = false;
+        this.editingObject = null;
+        this.textInput = null;
+        
+        // Настройки текста по умолчанию
+        this.defaultTextSettings = {
+            fontSize: 16,
+            fontFamily: 'Arial, sans-serif',
+            color: '#000000',
+            textAlign: 'left',
+            fontWeight: 'normal',
+            fontStyle: 'normal'
+        };
+    }
+    
+    /**
+     * Клик для создания нового текста или редактирования существующего
+     */
+    onMouseDown(event) {
+        super.onMouseDown(event);
+        
+        // Проверяем, кликнули ли на существующий текстовый объект
+        const hitObject = this.getTextObjectAt(event.x, event.y);
+        
+        if (hitObject) {
+            this.startEditing(hitObject, event);
+        } else {
+            this.createNewText(event.x, event.y);
+        }
+    }
+    
+    /**
+     * Двойной клик для быстрого входа в режим редактирования
+     */
+    onDoubleClick(event) {
+        const hitObject = this.getTextObjectAt(event.x, event.y);
+        
+        if (hitObject) {
+            this.startEditing(hitObject, event);
+        }
+    }
+    
+    /**
+     * Обработка клавиш во время редактирования
+     */
+    onKeyDown(event) {
+        if (this.isEditing) {
+            this.handleEditingKeys(event);
+        }
+    }
+    
+    /**
+     * Создание нового текстового объекта
+     */
+    createNewText(x, y) {
+        const textData = {
+            type: 'text',
+            position: { x, y },
+            content: '',
+            settings: { ...this.defaultTextSettings }
+        };
+        
+        // Создаем объект через событие
+        this.emit('object:create', textData);
+        
+        // Сразу переходим в режим редактирования
+        this.startEditingNew(textData, x, y);
+    }
+    
+    /**
+     * Начало редактирования нового текста
+     */
+    startEditingNew(textData, x, y) {
+        this.isEditing = true;
+        this.editingObject = textData;
+        
+        this.createTextInput(x, y, '');
+        this.emit('text:edit:start', { object: textData });
+    }
+    
+    /**
+     * Начало редактирования существующего текста
+     */
+    startEditing(textObject, event) {
+        if (this.isEditing) {
+            this.finishEditing();
+        }
+        
+        this.isEditing = true;
+        this.editingObject = textObject;
+        
+        // Создаем input с текущим содержимым
+        this.createTextInput(
+            textObject.position.x, 
+            textObject.position.y, 
+            textObject.content || ''
+        );
+        
+        this.emit('text:edit:start', { object: textObject });
+    }
+    
+    /**
+     * Создание HTML input для редактирования текста
+     */
+    createTextInput(x, y, initialText) {
+        // Удаляем предыдущий input если есть
+        this.removeTextInput();
+        
+        // Создаем новый input
+        this.textInput = document.createElement('textarea');
+        this.textInput.value = initialText;
+        this.textInput.className = 'moodboard-text-input';
+        
+        // Стили input
+        Object.assign(this.textInput.style, {
+            position: 'absolute',
+            left: `${x}px`,
+            top: `${y}px`,
+            border: '2px solid #007bff',
+            borderRadius: '4px',
+            padding: '4px 8px',
+            fontSize: `${this.defaultTextSettings.fontSize}px`,
+            fontFamily: this.defaultTextSettings.fontFamily,
+            color: this.defaultTextSettings.color,
+            background: 'white',
+            outline: 'none',
+            resize: 'none',
+            minWidth: '100px',
+            minHeight: '24px',
+            zIndex: '1000'
+        });
+        
+        // Обработчики событий input
+        this.textInput.addEventListener('blur', () => this.finishEditing());
+        this.textInput.addEventListener('keydown', (e) => this.handleInputKeys(e));
+        this.textInput.addEventListener('input', (e) => this.handleTextChange(e));
+        
+        // Добавляем в контейнер
+        this.getContainer().appendChild(this.textInput);
+        
+        // Фокусируемся и выделяем весь текст
+        this.textInput.focus();
+        if (initialText) {
+            this.textInput.select();
+        }
+        
+        // Автоматически подгоняем размер
+        this.adjustInputSize();
+    }
+    
+    /**
+     * Обработка клавиш в input
+     */
+    handleInputKeys(event) {
+        switch (event.key) {
+            case 'Enter':
+                if (!event.shiftKey) {
+                    // Enter без Shift - завершаем редактирование
+                    this.finishEditing();
+                    event.preventDefault();
+                } else {
+                    // Shift+Enter - новая строка
+                    setTimeout(() => this.adjustInputSize(), 0);
+                }
+                break;
+                
+            case 'Escape':
+                this.cancelEditing();
+                event.preventDefault();
+                break;
+                
+            case 'Tab':
+                this.finishEditing();
+                event.preventDefault();
+                break;
+        }
+    }
+    
+    /**
+     * Обработка изменения текста
+     */
+    handleTextChange(event) {
+        this.adjustInputSize();
+        
+        // Обновляем объект в реальном времени
+        if (this.editingObject) {
+            this.editingObject.content = this.textInput.value;
+            this.emit('text:content:change', {
+                object: this.editingObject,
+                content: this.textInput.value
+            });
+        }
+    }
+    
+    /**
+     * Автоматическая подгонка размера input
+     */
+    adjustInputSize() {
+        if (!this.textInput) return;
+        
+        // Временно делаем input очень маленьким
+        this.textInput.style.width = '1px';
+        this.textInput.style.height = '1px';
+        
+        // Получаем реальные размеры контента
+        const scrollWidth = Math.max(this.textInput.scrollWidth, 100);
+        const scrollHeight = Math.max(this.textInput.scrollHeight, 24);
+        
+        // Устанавливаем новые размеры
+        this.textInput.style.width = `${scrollWidth + 10}px`;
+        this.textInput.style.height = `${scrollHeight}px`;
+    }
+    
+    /**
+     * Завершение редактирования (сохранение)
+     */
+    finishEditing() {
+        if (!this.isEditing || !this.textInput) return;
+        
+        const finalText = this.textInput.value.trim();
+        
+        if (finalText) {
+            // Сохраняем текст
+            if (this.editingObject) {
+                this.editingObject.content = finalText;
+                this.emit('text:edit:finish', {
+                    object: this.editingObject,
+                    content: finalText
+                });
+            }
+        } else {
+            // Пустой текст - удаляем объект
+            if (this.editingObject) {
+                this.emit('object:delete', { object: this.editingObject });
+            }
+        }
+        
+        this.cleanupEditing();
+    }
+    
+    /**
+     * Отмена редактирования
+     */
+    cancelEditing() {
+        if (!this.isEditing) return;
+        
+        // Если это был новый объект с пустым текстом, удаляем его
+        if (this.editingObject && !this.editingObject.content) {
+            this.emit('object:delete', { object: this.editingObject });
+        }
+        
+        this.emit('text:edit:cancel', { object: this.editingObject });
+        this.cleanupEditing();
+    }
+    
+    /**
+     * Очистка после редактирования
+     */
+    cleanupEditing() {
+        this.removeTextInput();
+        this.isEditing = false;
+        this.editingObject = null;
+    }
+    
+    /**
+     * Удаление HTML input
+     */
+    removeTextInput() {
+        if (this.textInput) {
+            this.textInput.remove();
+            this.textInput = null;
+        }
+    }
+    
+    /**
+     * Получение контейнера для размещения input
+     */
+    getContainer() {
+        return this.container || document.body;
+    }
+
+    /**
+     * Установка контейнера (вызывается при активации инструмента)
+     */
+    setContainer(container) {
+        this.container = container;
+    }
+    
+    /**
+     * Поиск текстового объекта в указанной позиции
+     */
+    getTextObjectAt(x, y) {
+        // TODO: Реализовать поиск текстового объекта по координатам
+        return null; // Временная заглушка
+    }
+    
+    /**
+     * Обработка клавиш во время редактирования (глобальные)
+     */
+    handleEditingKeys(event) {
+        // Форматирование текста горячими клавишами
+        if (event.ctrlKey || event.metaKey) {
+            switch (event.key) {
+                case 'b':
+                    this.toggleBold();
+                    event.originalEvent.preventDefault();
+                    break;
+                case 'i':
+                    this.toggleItalic();
+                    event.originalEvent.preventDefault();
+                    break;
+            }
+        }
+    }
+    
+    /**
+     * Переключение жирного шрифта
+     */
+    toggleBold() {
+        if (this.editingObject) {
+            const currentWeight = this.editingObject.settings.fontWeight;
+            this.editingObject.settings.fontWeight = 
+                currentWeight === 'bold' ? 'normal' : 'bold';
+            
+            this.updateInputStyle();
+            this.emit('text:format:change', { 
+                object: this.editingObject,
+                property: 'fontWeight',
+                value: this.editingObject.settings.fontWeight
+            });
+        }
+    }
+    
+    /**
+     * Переключение курсива
+     */
+    toggleItalic() {
+        if (this.editingObject) {
+            const currentStyle = this.editingObject.settings.fontStyle;
+            this.editingObject.settings.fontStyle = 
+                currentStyle === 'italic' ? 'normal' : 'italic';
+            
+            this.updateInputStyle();
+            this.emit('text:format:change', { 
+                object: this.editingObject,
+                property: 'fontStyle',
+                value: this.editingObject.settings.fontStyle
+            });
+        }
+    }
+    
+    /**
+     * Обновление стилей input в соответствии с настройками объекта
+     */
+    updateInputStyle() {
+        if (!this.textInput || !this.editingObject) return;
+        
+        const settings = this.editingObject.settings;
+        Object.assign(this.textInput.style, {
+            fontSize: `${settings.fontSize}px`,
+            fontFamily: settings.fontFamily,
+            fontWeight: settings.fontWeight,
+            fontStyle: settings.fontStyle,
+            color: settings.color,
+            textAlign: settings.textAlign
+        });
+    }
+    
+    /**
+     * Активация инструмента
+     */
+    activate(pixiApp) {
+        super.activate();
+        
+        // Устанавливаем контейнер для размещения input
+        if (pixiApp && pixiApp.view && pixiApp.view.parentElement) {
+            this.setContainer(pixiApp.view.parentElement);
+        }
+    }
+
+    /**
+     * Деактивация инструмента
+     */
+    onDeactivate() {
+        if (this.isEditing) {
+            this.finishEditing();
+        }
+    }
+    
+    /**
+     * Установка настроек текста по умолчанию
+     */
+    setDefaultTextSettings(settings) {
+        this.defaultTextSettings = { ...this.defaultTextSettings, ...settings };
+    }
+    
+    /**
+     * Получение настроек текста по умолчанию
+     */
+    getDefaultTextSettings() {
+        return { ...this.defaultTextSettings };
+    }
+}

package/src/tools/object-tools/selection/BoxSelectController.js

@@ -0,0 +1,105 @@
+import * as PIXI from 'pixi.js';
+
+/**
+ * BoxSelectController — управление рамкой выделения и выбором по пересечению
+ */
+export class BoxSelectController {
+    constructor({ app, selection, emit, setSelection, clearSelection, rectIntersectsRect }) {
+        this.app = app;
+        this.selection = selection; // SelectionModel
+        this.emit = emit;
+        this.setSelection = setSelection;
+        this.clearSelection = clearSelection;
+        this.rectIntersectsRect = rectIntersectsRect;
+
+        this.isActive = false;
+        this.selectionBox = null;
+        this.selectionGraphics = null;
+        this.initialSelectionBeforeBox = null;
+        this.isMultiSelect = false;
+    }
+
+    start(mouse, isMultiSelect) {
+        this.isActive = true;
+        this.isMultiSelect = !!isMultiSelect;
+        this.selectionBox = { startX: mouse.x, startY: mouse.y, endX: mouse.x, endY: mouse.y };
+        this.initialSelectionBeforeBox = this.selection.toArray();
+        if (!this.isMultiSelect) this.clearSelection();
+        if (this.app && this.app.stage) {
+            this.app.stage.sortableChildren = true;
+            this.selectionGraphics = new PIXI.Graphics();
+            this.selectionGraphics.zIndex = 2000;
+            this.selectionGraphics.name = 'selection-box';
+            this.app.stage.addChild(this.selectionGraphics);
+        }
+    }
+
+    update(mouse) {
+        if (!this.selectionBox) return;
+        this.selectionBox.endX = mouse.x;
+        this.selectionBox.endY = mouse.y;
+        const x = Math.min(this.selectionBox.startX, this.selectionBox.endX);
+        const y = Math.min(this.selectionBox.startY, this.selectionBox.endY);
+        const w = Math.abs(this.selectionBox.endX - this.selectionBox.startX);
+        const h = Math.abs(this.selectionBox.endY - this.selectionBox.startY);
+        if (this.selectionGraphics) {
+            this.selectionGraphics.clear();
+            this.selectionGraphics.lineStyle(1, 0x3B82F6, 1);
+            this.selectionGraphics.beginFill(0x3B82F6, 0.08);
+            this.selectionGraphics.drawRect(x, y, w, h);
+            this.selectionGraphics.endFill();
+        }
+        if (w >= 2 && h >= 2) {
+            const box = { x, y, width: w, height: h };
+            const request = { objects: [] };
+            this.emit('get:all:objects', request);
+            const matched = [];
+            for (const item of request.objects) {
+                if (this.rectIntersectsRect(box, item.bounds)) matched.push(item.id);
+            }
+            let newSelection;
+            if (this.isMultiSelect && this.initialSelectionBeforeBox) {
+                const base = new Set(this.initialSelectionBeforeBox);
+                for (const id of matched) base.add(id);
+                newSelection = Array.from(base);
+            } else {
+                newSelection = matched;
+            }
+            this.setSelection(newSelection);
+        }
+    }
+
+    end() {
+        if (!this.selectionBox) {
+            this.isActive = false;
+            return;
+        }
+        const x = Math.min(this.selectionBox.startX, this.selectionBox.endX);
+        const y = Math.min(this.selectionBox.startY, this.selectionBox.endY);
+        const w = Math.abs(this.selectionBox.endX - this.selectionBox.startX);
+        const h = Math.abs(this.selectionBox.endY - this.selectionBox.startY);
+        if (w >= 2 && h >= 2) {
+            const box = { x, y, width: w, height: h };
+            const request = { objects: [] };
+            this.emit('get:all:objects', request);
+            const matched = [];
+            for (const item of request.objects) {
+                if (this.rectIntersectsRect(box, item.bounds)) matched.push(item.id);
+            }
+            if (matched.length > 0) {
+                if (this.isMultiSelect) {
+                    for (const id of matched) if (!this.selection.has(id)) this.setSelection([...this.selection.toArray(), id]);
+                } else {
+                    this.setSelection(matched);
+                }
+            }
+        }
+        this.isActive = false;
+        this.selectionBox = null;
+        if (this.selectionGraphics && this.selectionGraphics.parent) this.selectionGraphics.parent.removeChild(this.selectionGraphics);
+        this.selectionGraphics?.destroy();
+        this.selectionGraphics = null;
+    }
+}
+
+

package/src/tools/object-tools/selection/GeometryUtils.js

@@ -0,0 +1,101 @@
+/**
+ * Набор чистых функций геометрии для SelectTool и контроллеров
+ */
+export function transformHandleType(handleType, rotationDegrees) {
+    let angle = rotationDegrees % 360;
+    if (angle < 0) angle += 360;
+    const rotations = Math.round(angle / 90) % 4;
+    if (rotations === 0) return handleType;
+    const transformMap = {
+        'nw': ['ne', 'se', 'sw', 'nw'],
+        'n':  ['e',  's',  'w',  'n'],
+        'ne': ['se', 'sw', 'nw', 'ne'],
+        'e':  ['s',  'w',  'n',  'e'],
+        'se': ['sw', 'nw', 'ne', 'se'],
+        's':  ['w',  'n',  'e',  's'],
+        'sw': ['nw', 'ne', 'se', 'sw'],
+        'w':  ['n',  'e',  's',  'w']
+    };
+    return transformMap[handleType] ? transformMap[handleType][rotations - 1] : handleType;
+}
+
+export function calculateNewSize(handleType, startBounds, deltaX, deltaY, maintainAspectRatio, rotationDegrees = 0) {
+    let newWidth = startBounds.width;
+    let newHeight = startBounds.height;
+    const transformed = transformHandleType(handleType, rotationDegrees);
+    switch (transformed) {
+        case 'nw': newWidth = startBounds.width - deltaX; newHeight = startBounds.height - deltaY; break;
+        case 'n':  newHeight = startBounds.height - deltaY; break;
+        case 'ne': newWidth = startBounds.width + deltaX; newHeight = startBounds.height - deltaY; break;
+        case 'e':  newWidth = startBounds.width + deltaX; break;
+        case 'se': newWidth = startBounds.width + deltaX; newHeight = startBounds.height + deltaY; break;
+        case 's':  newHeight = startBounds.height + deltaY; break;
+        case 'sw': newWidth = startBounds.width - deltaX; newHeight = startBounds.height + deltaY; break;
+        case 'w':  newWidth = startBounds.width - deltaX; break;
+    }
+    if (maintainAspectRatio) {
+        const ar = startBounds.width / startBounds.height;
+        if (['nw', 'ne', 'sw', 'se'].includes(handleType)) {
+            const dw = Math.abs(newWidth - startBounds.width);
+            const dh = Math.abs(newHeight - startBounds.height);
+            if (dw > dh) newHeight = newWidth / ar; else newWidth = newHeight * ar;
+        } else if (['e', 'w'].includes(handleType)) {
+            newHeight = newWidth / ar;
+        } else if (['n', 's'].includes(handleType)) {
+            newWidth = newHeight * ar;
+        }
+    }
+    return { width: Math.round(newWidth), height: Math.round(newHeight) };
+}
+
+export function calculatePositionOffset(handleType, startBounds, newSize, objectRotation = 0) {
+    const deltaWidth = newSize.width - startBounds.width;
+    const deltaHeight = newSize.height - startBounds.height;
+    let localOffsetX = 0, localOffsetY = 0;
+    
+    // Позиция объекта в системе - это левый верхний угол
+    // При ресайзе за правые/нижние ручки - левый верхний угол остается на месте (offset = 0)
+    // При ресайзе за левые/верхние ручки - левый верхний угол смещается на полную величину изменения
+    switch (handleType) {
+        case 'nw': 
+            localOffsetX = -deltaWidth; // левый край смещается влево на полную величину
+            localOffsetY = -deltaHeight; // верхний край смещается вверх на полную величину
+            break;
+        case 'n':  
+            localOffsetX = 0;            // горизонтально не смещается
+            localOffsetY = -deltaHeight; // верхний край смещается вверх на полную величину
+            break;
+        case 'ne': 
+            localOffsetX = 0;            // правый край - левый верхний угол не смещается по X
+            localOffsetY = -deltaHeight; // верхний край смещается вверх на полную величину
+            break;
+        case 'e':  
+            localOffsetX = 0;            // правый край - левый верхний угол не смещается
+            localOffsetY = 0;            // вертикально не смещается
+            break;
+        case 'se': 
+            localOffsetX = 0;            // правый край - левый верхний угол не смещается по X
+            localOffsetY = 0;            // нижний край - левый верхний угол не смещается по Y
+            break;
+        case 's':  
+            localOffsetX = 0;            // горизонтально не смещается
+            localOffsetY = 0;            // нижний край - левый верхний угол не смещается по Y
+            break;
+        case 'sw': 
+            localOffsetX = -deltaWidth;  // левый край смещается влево на полную величину
+            localOffsetY = 0;            // нижний край - левый верхний угол не смещается по Y
+            break;
+        case 'w':  
+            localOffsetX = -deltaWidth;  // левый край смещается влево на полную величину
+            localOffsetY = 0;            // вертикально не смещается
+            break;
+    }
+    const angleRad = objectRotation * Math.PI / 180;
+    const cos = Math.cos(angleRad);
+    const sin = Math.sin(angleRad);
+    const worldOffsetX = localOffsetX * cos - localOffsetY * sin;
+    const worldOffsetY = localOffsetX * sin + localOffsetY * cos;
+    return { x: worldOffsetX, y: worldOffsetY };
+}
+
+

package/src/tools/object-tools/selection/GroupDragController.js

@@ -0,0 +1,61 @@
+/**
+ * GroupDragController — перетаскивание группы объектов + Alt-клонирование группы
+ */
+export class GroupDragController {
+    constructor({ emit, selection, updateGroupBoundsByTopLeft }) {
+        this.emit = emit;
+        this.selection = selection;
+        this.updateGroupBoundsByTopLeft = updateGroupBoundsByTopLeft; // (topLeft)=>void
+
+        this.isActive = false;
+        this.groupStartBounds = null;
+        this.groupDragOffset = null;
+        this.isAltGroupCloneMode = false;
+        this.groupClonePending = false;
+        this.groupCloneOriginalIds = [];
+    }
+
+    start(groupBounds, mouse) {
+        this.isActive = true;
+        this.groupStartBounds = groupBounds;
+        this.groupDragOffset = { x: mouse.x - groupBounds.x, y: mouse.y - groupBounds.y };
+    }
+
+    update(event) {
+        if (!this.isActive || !this.groupStartBounds || !this.groupDragOffset) return;
+
+        // Alt-клонирование группы на лету
+        if (event.originalEvent && event.originalEvent.altKey && !this.isAltGroupCloneMode && !this.groupClonePending) {
+            this.isAltGroupCloneMode = true;
+            this.groupClonePending = true;
+            this.groupCloneOriginalIds = this.selection.toArray();
+            this.emit('group:duplicate:request', { objects: this.groupCloneOriginalIds });
+            return;
+        }
+
+        const newTopLeft = { x: event.x - this.groupDragOffset.x, y: event.y - this.groupDragOffset.y };
+        const delta = { dx: newTopLeft.x - this.groupStartBounds.x, dy: newTopLeft.y - this.groupStartBounds.y };
+        this.emit('group:drag:update', { objects: this.selection.toArray(), delta });
+        if (this.updateGroupBoundsByTopLeft) this.updateGroupBoundsByTopLeft(newTopLeft);
+    }
+
+    end() {
+        if (!this.isActive) return;
+        this.emit('group:drag:end', { objects: this.selection.toArray() });
+        this.isActive = false;
+        this.groupStartBounds = null;
+        this.groupDragOffset = null;
+        this.isAltGroupCloneMode = false;
+        this.groupClonePending = false;
+        this.groupCloneOriginalIds = [];
+    }
+
+    onGroupDuplicateReady(map) {
+        if (!this.groupClonePending) return;
+        // Перенос ответственности за обработку idMap оставляем SelectTool
+        this.groupClonePending = false;
+        this.isAltGroupCloneMode = false;
+    }
+}
+
+