@sequent-org/moodboard 1.2.119 → 1.3.0

package/src/tools/object-tools/placement/PlacementInputRouter.js

@@ -0,0 +1,267 @@
+import * as PIXI from 'pixi.js';
+import { Events } from '../../../core/events/Events.js';
+
+export class PlacementInputRouter {
+    constructor(host) {
+        this.host = host;
+    }
+
+    startFrameDrawMode() {
+        this.host.cursor = 'crosshair';
+        if (this.host.app && this.host.app.view) this.host.app.view.style.cursor = this.host.cursor;
+    }
+
+    onMouseMove(event) {
+        const host = this.host;
+        if ((host.selectedFile || host.selectedImage || host.pending) && host.ghostContainer) {
+            if (host.app && host.app.view) {
+                host.app.view._lastMouseX = event.x;
+                host.app.view._lastMouseY = event.y;
+            }
+            const worldPoint = host._toWorld(event.offsetX, event.offsetY);
+            host.updateGhostPosition(worldPoint.x, worldPoint.y);
+        }
+    }
+
+    onFrameDrawMove(event) {
+        const host = this.host;
+        if (!host._frameDrawState || !host._frameDrawState.graphics) return;
+        const p = host._toWorld(event.offsetX, event.offsetY);
+        const x = Math.min(host._frameDrawState.startX, p.x);
+        const y = Math.min(host._frameDrawState.startY, p.y);
+        const w = Math.abs(p.x - host._frameDrawState.startX);
+        const h = Math.abs(p.y - host._frameDrawState.startY);
+        const g = host._frameDrawState.graphics;
+        g.clear();
+        const x0 = Math.floor(x) + 0.5;
+        const y0 = Math.floor(y) + 0.5;
+        const w0 = Math.max(1, Math.round(w));
+        const h0 = Math.max(1, Math.round(h));
+        g.lineStyle(1, 0x3B82F6, 1, 1);
+        g.beginFill(0xFFFFFF, 0.6);
+        g.drawRect(x0, y0, w0, h0);
+        g.endFill();
+    }
+
+    onFrameDrawUp(event) {
+        const host = this.host;
+        const g = host._frameDrawState?.graphics;
+        if (!host._frameDrawState || !g) return;
+        const p = host._toWorld(event.offsetX, event.offsetY);
+        const x = Math.min(host._frameDrawState.startX, p.x);
+        const y = Math.min(host._frameDrawState.startY, p.y);
+        const w = Math.abs(p.x - host._frameDrawState.startX);
+        const h = Math.abs(p.y - host._frameDrawState.startY);
+        if (g.parent) g.parent.removeChild(g);
+        g.destroy();
+        host._frameDrawState = null;
+        if (w >= 2 && h >= 2) {
+            host.payloadFactory.emitFrameDrawPlacement(x, y, w, h);
+        }
+        host.pending = null;
+        host.hideGhost();
+        if (host.app && host.app.view) {
+            host.app.view.removeEventListener('mousemove', host._onFrameDrawMoveBound);
+            host.app.view.style.cursor = '';
+        }
+        host.eventBus.emit(Events.Keyboard.ToolSelect, { tool: 'select' });
+    }
+
+    onMouseDown(event) {
+        const host = this.host;
+        host.__baseOnMouseDown(event);
+
+        if (host.selectedFile) {
+            host.placeSelectedFile(event);
+            return;
+        }
+
+        if (host.selectedImage) {
+            host.placeSelectedImage(event);
+            return;
+        }
+
+        if (!host.pending) return;
+        if (host.pending.placeOnMouseUp) {
+            const onUp = (ev) => {
+                host.app.view.removeEventListener('mouseup', onUp);
+                const worldPoint = host._toWorld(ev.x, ev.y);
+                const position = {
+                    x: Math.round(worldPoint.x - (host.pending.size?.width ?? 100) / 2),
+                    y: Math.round(worldPoint.y - (host.pending.size?.height ?? 100) / 2)
+                };
+                const props = { ...(host.pending.properties || {}) };
+                host.payloadFactory.emitGenericPlacement(host.pending.type, position, props);
+                host.pending = null;
+                host.hideGhost();
+                host.eventBus.emit(Events.Keyboard.ToolSelect, { tool: 'select' });
+            };
+            host.app.view.addEventListener('mouseup', onUp, { once: true });
+            return;
+        }
+        if (host.pending.type === 'frame-draw') {
+            const start = host._toWorld(event.x, event.y);
+            host._frameDrawState = { startX: start.x, startY: start.y, graphics: null };
+            if (host.world) {
+                const g = new PIXI.Graphics();
+                g.zIndex = 3000;
+                host.world.addChild(g);
+                host._frameDrawState.graphics = g;
+            }
+            host._onFrameDrawMoveBound = (ev) => host._onFrameDrawMove(ev);
+            host._onFrameDrawUpBound = (ev) => host._onFrameDrawUp(ev);
+            host.app.view.addEventListener('mousemove', host._onFrameDrawMoveBound);
+            host.app.view.addEventListener('mouseup', host._onFrameDrawUpBound, { once: true });
+            return;
+        }
+
+        const worldPoint = host._toWorld(event.x, event.y);
+        let position = {
+            x: Math.round(worldPoint.x - (host.pending.size?.width ?? 100) / 2),
+            y: Math.round(worldPoint.y - (host.pending.size?.height ?? 100) / 2)
+        };
+
+        let props = host.pending.properties || {};
+        const isTextWithEditing = host.pending.type === 'text' && props.editOnCreate;
+        const isImage = host.pending.type === 'image';
+        const isFile = host.pending.type === 'file';
+        const presetSize = {
+            width: (host.pending.size && host.pending.size.width) ? host.pending.size.width : (props.width || 200),
+            height: (host.pending.size && host.pending.size.height) ? host.pending.size.height : (props.height || 150),
+        };
+
+        if (isTextWithEditing) {
+            let worldForText = worldPoint;
+            try {
+                const app = host.app;
+                const view = app?.view;
+                const worldLayer = host.world || host._getWorldLayer();
+                if (view && view.parentElement && worldLayer && worldLayer.toLocal) {
+                    const containerRect = view.parentElement.getBoundingClientRect();
+                    const viewRect = view.getBoundingClientRect();
+                    const offsetLeft = viewRect.left - containerRect.left;
+                    const offsetTop = viewRect.top - containerRect.top;
+                    const screenX = event.x - offsetLeft;
+                    const screenY = event.y - offsetTop;
+                    const globalPoint = new PIXI.Point(screenX, screenY);
+                    const local = worldLayer.toLocal(globalPoint);
+                    worldForText = { x: local.x, y: local.y };
+                }
+                console.log('🧭 Text click', {
+                    cursor: { x: event.x, y: event.y },
+                    world: { x: Math.round(worldForText.x), y: Math.round(worldForText.y) }
+                });
+            } catch (_) {}
+            position = {
+                x: Math.round(worldForText.x),
+                y: Math.round(worldForText.y)
+            };
+            const handleObjectCreated = (objectData) => {
+                if (objectData.type === 'text') {
+                    host.eventBus.off('object:created', handleObjectCreated);
+                    host.eventBus.emit(Events.Keyboard.ToolSelect, { tool: 'select' });
+                    setTimeout(() => {
+                        host.eventBus.emit(Events.Tool.ObjectEdit, {
+                            object: {
+                                id: objectData.id,
+                                type: 'text',
+                                position: objectData.position,
+                                properties: { fontSize: props.fontSize || 18, content: '' }
+                            },
+                            create: true
+                        });
+                    }, 50);
+                }
+            };
+
+            host.eventBus.on('object:created', handleObjectCreated);
+            host.payloadFactory.emitTextPlacement(position, props);
+        } else if (host.pending.type === 'frame') {
+            const width = props.width || presetSize.width || 200;
+            const height = props.height || presetSize.height || 300;
+            position = {
+                x: Math.round(worldPoint.x - width / 2),
+                y: Math.round(worldPoint.y - height / 2)
+            };
+            host.payloadFactory.emitFramePlacement(position, props, width, height);
+        } else if (isImage && props.selectFileOnPlace) {
+            const input = document.createElement('input');
+            input.type = 'file';
+            input.accept = 'image/*';
+            input.style.display = 'none';
+            document.body.appendChild(input);
+            input.addEventListener('change', async () => {
+                try {
+                    const file = input.files && input.files[0];
+                    if (!file) return;
+                    try {
+                        const uploadResult = await host.core.imageUploadService.uploadImage(file, file.name);
+                        const natW = uploadResult.width || 1;
+                        const natH = uploadResult.height || 1;
+                        const targetW = 300;
+                        const targetH = Math.max(1, Math.round(natH * (targetW / natW)));
+                        host.payloadFactory.emitImageUploaded(position, uploadResult, targetW, targetH);
+                    } catch (error) {
+                        console.error('Ошибка загрузки изображения:', error);
+                        alert('Ошибка загрузки изображения: ' + error.message);
+                    }
+                } finally {
+                    input.remove();
+                }
+            }, { once: true });
+            input.click();
+        } else if (isFile && props.selectFileOnPlace) {
+            const input = document.createElement('input');
+            input.type = 'file';
+            input.accept = '*/*';
+            input.style.display = 'none';
+            document.body.appendChild(input);
+            input.addEventListener('change', async () => {
+                try {
+                    const file = input.files && input.files[0];
+                    if (!file) return;
+
+                    try {
+                        const uploadResult = await host.core.fileUploadService.uploadFile(file, file.name);
+                        host.payloadFactory.emitFileUploaded(position, uploadResult, props.width || 120, props.height || 140);
+                        host.eventBus.emit(Events.Keyboard.ToolSelect, { tool: 'select' });
+                    } catch (uploadError) {
+                        console.error('Ошибка загрузки файла на сервер:', uploadError);
+                        const fileName = file.name;
+                        const fileSize = file.size;
+                        const mimeType = file.type;
+
+                        host.payloadFactory.emitFileFallback(position, fileName, fileSize, mimeType, props.width || 120, props.height || 140);
+                        host.eventBus.emit(Events.Keyboard.ToolSelect, { tool: 'select' });
+                        alert('Ошибка загрузки файла на сервер. Файл добавлен локально.');
+                    }
+                } catch (error) {
+                    console.error('Ошибка при выборе файла:', error);
+                    alert('Ошибка при выборе файла: ' + error.message);
+                } finally {
+                    input.remove();
+                }
+            }, { once: true });
+            input.click();
+        } else {
+            if (host.pending.type === 'note') {
+                const base = 250;
+                const noteW = (typeof props.width === 'number') ? props.width : base;
+                const noteH = (typeof props.height === 'number') ? props.height : base;
+                const side = Math.max(noteW, noteH);
+                props = { ...props, width: side, height: side };
+                position = {
+                    x: Math.round(worldPoint.x - side / 2),
+                    y: Math.round(worldPoint.y - side / 2)
+                };
+            }
+            host.payloadFactory.emitGenericPlacement(host.pending.type, position, props);
+        }
+
+        host.pending = null;
+        host.hideGhost();
+        if (!isTextWithEditing && !(isFile && props.selectFileOnPlace)) {
+            host.eventBus.emit(Events.Keyboard.ToolSelect, { tool: 'select' });
+        }
+    }
+}

package/src/tools/object-tools/placement/PlacementPayloadFactory.js

@@ -0,0 +1,111 @@
+import { Events } from '../../../core/events/Events.js';
+
+export class PlacementPayloadFactory {
+    constructor(host) {
+        this.host = host;
+    }
+
+    emitGenericPlacement(type, position, properties) {
+        this.host.eventBus.emit(Events.UI.ToolbarAction, {
+            type,
+            id: type,
+            position,
+            properties
+        });
+    }
+
+    emitFramePlacement(position, properties, width, height) {
+        this.host.eventBus.emit(Events.UI.ToolbarAction, {
+            type: 'frame',
+            id: 'frame',
+            position,
+            properties: { ...properties, width, height }
+        });
+    }
+
+    emitTextPlacement(position, properties) {
+        this.host.eventBus.emit(Events.UI.ToolbarAction, {
+            type: 'text',
+            id: 'text',
+            position,
+            properties: {
+                fontSize: properties.fontSize || 18,
+                content: '',
+                fontFamily: 'Arial, sans-serif',
+                color: '#000000',
+                backgroundColor: 'transparent'
+            }
+        });
+    }
+
+    emitFrameDrawPlacement(x, y, w, h) {
+        this.host.eventBus.emit(Events.UI.ToolbarAction, {
+            type: 'frame',
+            id: 'frame',
+            position: { x, y },
+            properties: { width: Math.round(w), height: Math.round(h), title: 'Произвольный', lockedAspect: false, isArbitrary: true }
+        });
+    }
+
+    emitImageUploaded(position, uploadResult, width, height) {
+        this.host.eventBus.emit(Events.UI.ToolbarAction, {
+            type: 'image',
+            id: 'image',
+            position,
+            properties: {
+                src: uploadResult.url,
+                name: uploadResult.name,
+                width,
+                height
+            },
+            imageId: uploadResult.imageId || uploadResult.id
+        });
+    }
+
+    emitImageFallback(position, imageUrl, fileName, width, height) {
+        this.host.eventBus.emit(Events.UI.ToolbarAction, {
+            type: 'image',
+            id: 'image',
+            position,
+            properties: {
+                src: imageUrl,
+                name: fileName,
+                width,
+                height
+            }
+        });
+    }
+
+    emitFileUploaded(position, uploadResult, width, height) {
+        this.host.eventBus.emit(Events.UI.ToolbarAction, {
+            type: 'file',
+            id: 'file',
+            position,
+            properties: {
+                fileName: uploadResult.name,
+                fileSize: uploadResult.size,
+                mimeType: uploadResult.mimeType,
+                formattedSize: uploadResult.formattedSize,
+                url: uploadResult.url,
+                width,
+                height
+            },
+            fileId: uploadResult.fileId || uploadResult.id
+        });
+    }
+
+    emitFileFallback(position, fileName, fileSize, mimeType, width, height) {
+        this.host.eventBus.emit(Events.UI.ToolbarAction, {
+            type: 'file',
+            id: 'file',
+            position,
+            properties: {
+                fileName,
+                fileSize,
+                mimeType,
+                width,
+                height
+            }
+        });
+    }
+}

package/src/tools/object-tools/placement/PlacementSessionStore.js

@@ -0,0 +1,18 @@
+export class PlacementSessionStore {
+    constructor(host) {
+        this.host = host;
+    }
+
+    initialize() {
+        this.host.pending = null;
+        this.host.selectedFile = null;
+        this.host.selectedImage = null;
+        this.host.ghostContainer = null;
+    }
+
+    clearSelectionState() {
+        this.host.pending = null;
+        this.host.selectedFile = null;
+        this.host.selectedImage = null;
+    }
+}

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

@@ -55,9 +55,6 @@ export class BoxSelectController {
             this.emit('get:all:objects', request);
             const matched = [];
             for (const item of request.objects) {
-                const meta = item.pixi && item.pixi._mb;
-                // Исключаем фреймы из выделения рамкой — их можно выбрать только кликом по захватной рамке
-                if (meta && meta.type === 'frame') continue;
                 if (this.rectIntersectsRect(box, item.bounds)) matched.push(item.id);
             }
             let newSelection;
@@ -87,8 +84,6 @@ export class BoxSelectController {
             this.emit('get:all:objects', request);
             const matched = [];
             for (const item of request.objects) {
-                const meta = item.pixi && item.pixi._mb;
-                if (meta && meta.type === 'frame') continue;
                 if (this.rectIntersectsRect(box, item.bounds)) matched.push(item.id);
             }
             if (matched.length > 0) {

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

@@ -0,0 +1,71 @@
+import { Events } from '../../../core/events/Events.js';
+
+export function tryStartAltCloneDuringDrag(event) {
+    if (this.isDragging && !this.isAltCloneMode && event.originalEvent && event.originalEvent.altKey) {
+        this.isAltCloneMode = true;
+        this.cloneSourceId = this.dragTarget;
+        this.clonePending = true;
+        // Создаём дубликат так, чтобы курсор захватывал ту же точку объекта
+        const wpos = this._toWorld(event.x, event.y);
+        const targetTopLeft = this._dragGrabOffset
+            ? { x: wpos.x - this._dragGrabOffset.x, y: wpos.y - this._dragGrabOffset.y }
+            : { x: wpos.x, y: wpos.y };
+        this.emit(Events.Tool.DuplicateRequest, {
+            originalId: this.cloneSourceId,
+            position: targetTopLeft
+        });
+        // Не сбрасываем dragTarget, чтобы исходник продолжал двигаться до появления копии
+        // Визуально это ок: копия появится и захватит drag в onDuplicateReady
+    }
+}
+
+export function resetCloneStateAfterDragEnd() {
+    this.isAltGroupCloneMode = false;
+    this.groupClonePending = false;
+    this.groupCloneOriginalIds = [];
+    this.groupCloneMap = null;
+    this.isAltCloneMode = false;
+    this.clonePending = false;
+    this.cloneSourceId = null;
+}
+
+export function onGroupDuplicateReady(idMap) {
+    this.groupClonePending = false;
+    this.groupCloneMap = idMap;
+    if (this._groupDragCtrl) this._groupDragCtrl.onGroupDuplicateReady(idMap);
+    // Формируем новое выделение из клонов
+    const newIds = [];
+    for (const orig of this.groupCloneOriginalIds) {
+        const nid = idMap[orig];
+        if (nid) newIds.push(nid);
+    }
+    if (newIds.length > 0) {
+        this.setSelection(newIds);
+        // Пересчитываем стартовые параметры для продолжения drag
+        const gb = this.computeGroupBounds();
+        this.groupStartBounds = gb;
+        this.groupDragOffset = { x: this.currentX - gb.x, y: this.currentY - gb.y };
+        // Сообщаем ядру о старте drag для новых объектов, чтобы зафиксировать начальные позиции
+        this.emit('group:drag:start', { objects: newIds });
+    }
+}
+
+export function onDuplicateReady(newObjectId) {
+    this.clonePending = false;
+
+    // Переключаем выделение на новый объект
+    this.clearSelection();
+    this.addToSelection(newObjectId);
+
+    // Завершаем drag исходного объекта и переключаем контроллер на новый объект
+    if (this._dragCtrl) this._dragCtrl.end();
+    this.dragTarget = newObjectId;
+    this.isDragging = true;
+    // Стартуем drag нового объекта под текущим курсором (в мировых координатах)
+    const w = this._toWorld(this.currentX, this.currentY);
+    if (this._dragCtrl) this._dragCtrl.start(newObjectId, { x: w.x, y: w.y });
+    // Мгновенно обновляем позицию под курсор
+    this.updateDrag({ x: this.currentX, y: this.currentY });
+    // Обновляем ручки
+    this.updateResizeHandles();
+}

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

@@ -0,0 +1,10 @@
+import * as PIXI from 'pixi.js';
+
+export function toWorld(x, y) {
+    if (!this.app || !this.app.stage) return { x, y };
+    const world = this.app.stage.getChildByName && this.app.stage.getChildByName('worldLayer');
+    if (!world || !world.toLocal) return { x, y };
+    const p = new PIXI.Point(x, y);
+    const local = world.toLocal(p);
+    return { x: local.x, y: local.y };
+}

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

@@ -0,0 +1,78 @@
+import { Events } from '../../../core/events/Events.js';
+
+export function updateCursor(event, defaultCursor) {
+    // Проверяем, что инструмент не уничтожен
+    if (this.destroyed) {
+        return;
+    }
+
+    const hitResult = this.hitTest(event.x, event.y);
+
+    switch (hitResult.type) {
+        case 'resize-handle':
+            this.cursor = this.getResizeCursor(hitResult.handle);
+            break;
+        case 'rotate-handle':
+            this.cursor = 'grab';
+            break;
+        case 'object':
+            this.cursor = 'move';
+            break;
+        default:
+            this.cursor = defaultCursor;
+    }
+
+    this.setCursor();
+}
+
+export function createRotatedResizeCursor(handleType, rotationDegrees) {
+    // Базовые углы для каждого типа ручки (в градусах)
+    const baseAngles = {
+        'e': 0,     // Восток - горизонтальная стрелка →
+        'se': 45,   // Юго-восток - диагональная стрелка ↘
+        's': 90,    // Юг - вертикальная стрелка ↓
+        'sw': 135,  // Юго-запад - диагональная стрелка ↙
+        'w': 180,   // Запад - горизонтальная стрелка ←
+        'nw': 225,  // Северо-запад - диагональная стрелка ↖
+        'n': 270,   // Север - вертикальная стрелка ↑
+        'ne': 315   // Северо-восток - диагональная стрелка ↗
+    };
+
+    // Вычисляем итоговый угол: базовый угол ручки + поворот объекта
+    const totalAngle = (baseAngles[handleType] + rotationDegrees) % 360;
+
+    // Создаем SVG курсор изменения размера, повернутый на нужный угол (белый, крупнее)
+    const svg = `<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g transform="rotate(${totalAngle} 16 16)"><path d="M4 16 L9 11 L9 13 L23 13 L23 11 L28 16 L23 21 L23 19 L9 19 L9 21 Z" fill="white" stroke="black" stroke-width="1"/></g></svg>`;
+
+    // Используем encodeURIComponent вместо btoa для безопасного кодирования
+    const dataUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+
+    // Возвращаем CSS cursor с кастомным изображением (hotspot в центре 16x16)
+    return `url("${dataUrl}") 16 16, auto`;
+}
+
+export function getResizeCursor(handle, defaultCursor) {
+    // Получаем ID выбранного объекта для определения его поворота
+    const selectedObject = Array.from(this.selectedObjects)[0];
+    if (!selectedObject) {
+        return defaultCursor;
+    }
+
+    // Получаем угол поворота объекта
+    const rotationData = { objectId: selectedObject, rotation: 0 };
+    this.emit(Events.Tool.GetObjectRotation, rotationData);
+    const objectRotation = rotationData.rotation || 0;
+
+    // Создаем кастомный курсор, повернутый на точный угол объекта
+    return this.createRotatedResizeCursor(handle, objectRotation);
+}
+
+export function setCursor() {
+    if (this.resizeHandles && this.resizeHandles.app && this.resizeHandles.app.view) {
+        // Устанавливаем курсор на canvas, а не на body
+        this.resizeHandles.app.view.style.cursor = this.cursor;
+    } else {
+        // Fallback на базовую реализацию
+        this.__baseSetCursor();
+    }
+}