@sequent-org/moodboard 1.2.118 → 1.3.0

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

@@ -0,0 +1,184 @@
+import { Events } from '../../../core/events/Events.js';
+import {
+    createFileNameEditorInput,
+    createFileNameEditorWrapper,
+} from './InlineEditorDomFactory.js';
+import { toScreenWithResolution } from './InlineEditorPositioningService.js';
+
+export function openFileNameEditor(object, create = false) {
+    // Проверяем структуру объекта и извлекаем данные
+    let objectId, position, properties;
+
+    if (create) {
+        // Для создания нового объекта - данные в object.object
+        const objData = object.object || object;
+        objectId = objData.id || null;
+        position = objData.position;
+        properties = objData.properties || {};
+    } else {
+        // Для редактирования существующего объекта - данные в корне
+        objectId = object.id;
+        position = object.position;
+        properties = object.properties || {};
+    }
+
+    const fileName = properties.fileName || 'Untitled';
+
+    // Проверяем, что position существует
+    if (!position) {
+        console.error('❌ SelectTool: position is undefined in _openFileNameEditor', { object, create });
+        return;
+    }
+
+    // Закрываем предыдущий редактор, если он открыт
+    if (this.textEditor.active) {
+        if (this.textEditor.objectType === 'file') {
+            this._closeFileNameEditor(true);
+        } else {
+            this._closeTextEditor(true);
+        }
+    }
+
+    // Если это редактирование существующего объекта, получаем его данные
+    if (!create && objectId) {
+        const posData = { objectId, position: null };
+        const pixiReq = { objectId, pixiObject: null };
+        this.eventBus.emit(Events.Tool.GetObjectPosition, posData);
+        this.eventBus.emit(Events.Tool.GetObjectPixi, pixiReq);
+
+        // Обновляем данные из полученной информации
+        if (posData.position) position = posData.position;
+
+        // Скрываем текст файла на время редактирования
+        if (pixiReq.pixiObject && pixiReq.pixiObject._mb && pixiReq.pixiObject._mb.instance) {
+            const fileInstance = pixiReq.pixiObject._mb.instance;
+            if (typeof fileInstance.hideText === 'function') {
+                fileInstance.hideText();
+            }
+        }
+    }
+
+    // Создаем wrapper для input
+    const wrapper = createFileNameEditorWrapper();
+
+    // Создаем input для редактирования названия
+    const input = createFileNameEditorInput(fileName);
+
+    wrapper.appendChild(input);
+    document.body.appendChild(wrapper);
+
+    // Позиционируем редактор (аналогично _openTextEditor)
+    const toScreen = (wx, wy) => toScreenWithResolution(this.textEditor.world || (this.app?.stage), this.app, wx, wy);
+    const screenPos = toScreen(position.x, position.y);
+
+    // Получаем размеры файлового объекта для точного позиционирования
+    let fileWidth = 120;
+    let fileHeight = 140;
+
+    if (objectId) {
+        const sizeData = { objectId, size: null };
+        this.eventBus.emit(Events.Tool.GetObjectSize, sizeData);
+        if (sizeData.size) {
+            fileWidth = sizeData.size.width;
+            fileHeight = sizeData.size.height;
+        }
+    }
+
+    // Позиционируем редактор в нижней части файла (где название)
+    // В FileObject название находится в позиции y = height - 40
+    const nameY = fileHeight - 40;
+    const centerX = fileWidth / 2;
+
+    wrapper.style.left = `${screenPos.x + centerX - 60}px`;  // Центрируем относительно файла
+    wrapper.style.top = `${screenPos.y + nameY}px`;  // Позиционируем на уровне названия
+
+    // Сохраняем состояние редактора
+    this.textEditor = {
+        active: true,
+        objectId: objectId,
+        textarea: input,
+        wrapper: wrapper,
+        position: position,
+        properties: properties,
+        objectType: 'file',
+        isResizing: false
+    };
+
+    // Фокусируем и выделяем весь текст
+    input.focus();
+    input.select();
+
+    // Функция завершения редактирования
+    const finalize = (commit) => {
+        this._closeFileNameEditor(commit);
+    };
+
+    // Обработчики событий
+    input.addEventListener('blur', () => finalize(true));
+    input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            finalize(true);
+        } else if (e.key === 'Escape') {
+            e.preventDefault();
+            finalize(false);
+        }
+    });
+}
+
+export function closeFileNameEditor(commit) {
+    // Проверяем, что редактор существует и не закрыт
+    if (!this.textEditor || !this.textEditor.textarea || this.textEditor.closing) {
+        return;
+    }
+
+    // Устанавливаем флаг закрытия, чтобы избежать повторных вызовов
+    this.textEditor.closing = true;
+
+    const input = this.textEditor.textarea;
+    const value = input.value.trim();
+    const commitValue = commit && value.length > 0;
+    const objectId = this.textEditor.objectId;
+
+    // Убираем wrapper из DOM
+    if (this.textEditor.wrapper && this.textEditor.wrapper.parentNode) {
+        this.textEditor.wrapper.remove();
+    }
+
+    // Показываем обратно текст файла
+    if (objectId) {
+        const pixiReq = { objectId, pixiObject: null };
+        this.eventBus.emit(Events.Tool.GetObjectPixi, pixiReq);
+
+        if (pixiReq.pixiObject && pixiReq.pixiObject._mb && pixiReq.pixiObject._mb.instance) {
+            const fileInstance = pixiReq.pixiObject._mb.instance;
+            if (typeof fileInstance.showText === 'function') {
+                fileInstance.showText();
+            }
+
+            // Применяем изменения если нужно
+            if (commitValue && value !== this.textEditor.properties.fileName) {
+                // Создаем команду изменения названия файла
+                const oldName = this.textEditor.properties.fileName || 'Untitled';
+                this.eventBus.emit(Events.Object.FileNameChange, {
+                    objectId: objectId,
+                    oldName: oldName,
+                    newName: value
+                });
+            }
+        }
+    }
+
+    // Сбрасываем состояние редактора
+    this.textEditor = {
+        active: false,
+        objectId: null,
+        textarea: null,
+        wrapper: null,
+        world: null,
+        position: null,
+        properties: null,
+        objectType: 'text',
+        isResizing: false
+    };
+}

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

@@ -0,0 +1,102 @@
+import * as PIXI from 'pixi.js';
+import { Events } from '../../../core/events/Events.js';
+
+export function hitTest(x, y) {
+    // Проверяем, что инструмент не уничтожен
+    if (this.destroyed) {
+        return { type: 'empty' };
+    }
+
+    // Сначала проверяем ручки изменения размера (они имеют приоритет)
+    if (this.resizeHandles) {
+        const pixiObjectAtPoint = this.getPixiObjectAt(x, y);
+        const handleInfo = this.resizeHandles.getHandleInfo(pixiObjectAtPoint);
+        if (handleInfo) {
+            // Определяем тип ручки
+            const hitType = handleInfo.type === 'rotate' ? 'rotate-handle' : 'resize-handle';
+
+            return {
+                type: hitType,
+                handle: handleInfo.type,
+                object: handleInfo.targetObjectId,
+                pixiObject: handleInfo.handle
+            };
+        }
+    }
+
+    // Получаем объекты из системы через событие
+    const hitTestData = { x, y, result: null };
+    this.emit(Events.Tool.HitTest, hitTestData);
+
+    if (hitTestData.result && hitTestData.result.object) {
+        return hitTestData.result;
+    }
+
+    return { type: 'empty' };
+}
+
+export function getPixiObjectAt(x, y) {
+    // Проверяем, что инструмент не уничтожен
+    if (this.destroyed) {
+        return null;
+    }
+
+    if (!this.resizeHandles || !this.resizeHandles.app || !this.resizeHandles.container) return null;
+
+    const point = new PIXI.Point(x, y);
+
+    // Сначала ищем в контейнере ручек (приоритет)
+    if (this.resizeHandles.container && this.resizeHandles.container.visible) {
+        const container = this.resizeHandles.container;
+        if (!container || !container.children) return null;
+
+        for (let i = container.children.length - 1; i >= 0; i--) {
+            const child = container.children[i];
+
+            // Проверяем обычные объекты
+            if (child && child.containsPoint && typeof child.containsPoint === 'function') {
+                try {
+                    if (child.containsPoint(point)) {
+                        return child;
+                    }
+                } catch (_) {
+                    // Игнорируем ошибки containsPoint
+                }
+            }
+
+            // Специальная проверка для контейнеров (ручка вращения)
+            if (child instanceof PIXI.Container && child.children && child.children.length > 0) {
+                // Проверяем границы контейнера
+                try {
+                    const bounds = child.getBounds();
+                    if (bounds && point.x >= bounds.x && point.x <= bounds.x + bounds.width &&
+                        point.y >= bounds.y && point.y <= bounds.y + bounds.height) {
+                        return child;
+                    }
+                } catch (_) {
+                    // Игнорируем ошибки getBounds
+                }
+            }
+        }
+    }
+
+    // Затем ищем в основной сцене
+    const stage = this.resizeHandles.app.stage;
+    if (!stage || !stage.children) return null;
+
+    for (let i = stage.children.length - 1; i >= 0; i--) {
+        const child = stage.children[i];
+        if (this.resizeHandles.container && child && child !== this.resizeHandles.container &&
+            child.containsPoint && typeof child.containsPoint === 'function') {
+            try {
+                if (child.containsPoint(point)) {
+                    return child;
+                }
+            } catch (_) {
+                // Игнорируем ошибки containsPoint
+            }
+        }
+    }
+
+    return null;
+}

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

@@ -0,0 +1,24 @@
+import {
+    closeTextEditor as closeTextEditorViaController,
+    openTextEditor as openTextEditorViaController,
+} from './TextInlineEditorController.js';
+import {
+    closeFileNameEditor as closeFileNameEditorViaController,
+    openFileNameEditor as openFileNameEditorViaController,
+} from './FileNameInlineEditorController.js';
+
+export function openTextEditor(object, create = false) {
+    return openTextEditorViaController.call(this, object, create);
+}
+
+export function openFileNameEditor(object, create = false) {
+    return openFileNameEditorViaController.call(this, object, create);
+}
+
+export function closeFileNameEditor(commit) {
+    return closeFileNameEditorViaController.call(this, commit);
+}
+
+export function closeTextEditor(commit) {
+    return closeTextEditorViaController.call(this, commit);
+}

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

@@ -0,0 +1,50 @@
+export function createTextEditorWrapper() {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'moodboard-text-editor';
+    return wrapper;
+}
+
+export function createTextEditorTextarea(content) {
+    const textarea = document.createElement('textarea');
+    textarea.className = 'moodboard-text-input';
+    textarea.value = content || '';
+    textarea.placeholder = 'Напишите что-нибудь';
+    return textarea;
+}
+
+export function createFileNameEditorWrapper() {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'moodboard-file-name-editor';
+    wrapper.style.cssText = `
+            position: absolute;
+            z-index: 1000;
+            background: white;
+            border: 2px solid #2563eb;
+            border-radius: 6px;
+            padding: 6px 8px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+            min-width: 140px;
+            max-width: 200px;
+            font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+        `;
+    return wrapper;
+}
+
+export function createFileNameEditorInput(fileName) {
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.value = fileName;
+    input.style.cssText = `
+            border: none;
+            outline: none;
+            background: transparent;
+            font-family: inherit;
+            font-size: 12px;
+            text-align: center;
+            width: 100%;
+            padding: 2px 4px;
+            color: #1f2937;
+            font-weight: 500;
+        `;
+    return input;
+}

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

@@ -0,0 +1,14 @@
+export function registerEditorListeners(eventBus, listeners) {
+    listeners.forEach(([eventName, handler]) => {
+        eventBus.on(eventName, handler);
+    });
+    return listeners;
+}
+
+export function unregisterEditorListeners(eventBus, listeners) {
+    listeners.forEach(([eventName, handler]) => {
+        try {
+            eventBus.off(eventName, handler);
+        } catch (_) {}
+    });
+}

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

@@ -0,0 +1,25 @@
+import * as PIXI from 'pixi.js';
+
+export function toScreenWithContainerOffset(worldLayer, view, wx, wy) {
+    if (!worldLayer || !view || !view.parentElement) return { x: wx, y: wy };
+
+    const containerRect = view.parentElement.getBoundingClientRect();
+    const viewRect = view.getBoundingClientRect();
+    const offsetLeft = viewRect.left - containerRect.left;
+    const offsetTop = viewRect.top - containerRect.top;
+    const global = worldLayer.toGlobal(new PIXI.Point(wx, wy));
+
+    return {
+        x: offsetLeft + global.x,
+        y: offsetTop + global.y,
+    };
+}
+
+export function toScreenWithResolution(worldLayer, app, wx, wy) {
+    if (!worldLayer) return { x: wx, y: wy };
+
+    const global = worldLayer.toGlobal(new PIXI.Point(wx, wy));
+    const view = app?.view || document.querySelector('canvas');
+    const viewRes = (app?.renderer?.resolution) || (view && view.width && view.clientWidth ? (view.width / view.clientWidth) : 1);
+    return { x: global.x / viewRes, y: global.y / viewRes };
+}

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

@@ -0,0 +1,113 @@
+import { Events } from '../../../core/events/Events.js';
+import {
+    createNoteEditorUpdater,
+    registerNoteEditorSync,
+} from './TextEditorSyncService.js';
+
+export function setupNoteInlineEditor(controller, params) {
+    const {
+        objectId,
+        position,
+        initialSize,
+        view,
+        screenPos,
+        textarea,
+        wrapper,
+        computeLineHeightPx,
+        effectiveFontPx,
+        toScreen,
+    } = params;
+
+    // Получаем актуальные размеры записки
+    let noteWidth = 160;
+    let noteHeight = 100;
+
+    if (initialSize) {
+        noteWidth = initialSize.width;
+        noteHeight = initialSize.height;
+    } else if (objectId) {
+        // Если размер не передан, пытаемся получить его из объекта
+        const sizeData = { objectId, size: null };
+        controller.eventBus.emit(Events.Tool.GetObjectSize, sizeData);
+        if (sizeData.size) {
+            noteWidth = sizeData.size.width;
+            noteHeight = sizeData.size.height;
+        }
+    }
+
+    // Текст у записки центрирован по обеим осям; textarea тоже центрируем
+    const horizontalPadding = 16; // немного больше, чем раньше
+    // Преобразуем мировые размеры/отступы в CSS-пиксели с учётом текущего зума
+    const viewResLocal = (controller.app?.renderer?.resolution) || (view.width && view.clientWidth ? (view.width / view.clientWidth) : 1);
+    const worldLayerRefForCss = controller.textEditor.world || (controller.app?.stage);
+    const sForCss = worldLayerRefForCss?.scale?.x || 1;
+    const sCssLocal = sForCss / viewResLocal;
+    const editorWidthWorld = Math.min(360, Math.max(1, noteWidth - (horizontalPadding * 2)));
+    const editorHeightWorld = Math.min(180, Math.max(1, noteHeight - (horizontalPadding * 2)));
+    const editorWidthPx = Math.max(1, Math.round(editorWidthWorld * sCssLocal));
+    const editorHeightPx = Math.max(1, Math.round(editorHeightWorld * sCssLocal));
+    const textCenterXWorld = noteWidth / 2;
+    const textCenterYWorld = noteHeight / 2;
+    const editorLeftWorld = textCenterXWorld - (editorWidthWorld / 2);
+    const editorTopWorld = textCenterYWorld - (editorHeightWorld / 2);
+    wrapper.style.left = `${Math.round(screenPos.x + editorLeftWorld * sCssLocal)}px`;
+    wrapper.style.top = `${Math.round(screenPos.y + editorTopWorld * sCssLocal)}px`;
+    // Устанавливаем размеры редактора (центрируем по контенту) в CSS-пикселях
+    textarea.style.width = `${editorWidthPx}px`;
+    textarea.style.height = `${editorHeightPx}px`;
+    wrapper.style.width = `${editorWidthPx}px`;
+    wrapper.style.height = `${editorHeightPx}px`;
+
+    // Для записок: авто-ресайз редактора под содержимое с сохранением центрирования
+    textarea.style.textAlign = 'center';
+    const maxEditorWidthPx = Math.max(1, Math.round((noteWidth - (horizontalPadding * 2)) * sCssLocal));
+    const maxEditorHeightPx = Math.max(1, Math.round((noteHeight - (horizontalPadding * 2)) * sCssLocal));
+    const MIN_NOTE_EDITOR_W = 20;
+    const MIN_NOTE_EDITOR_H = Math.max(1, computeLineHeightPx(effectiveFontPx));
+
+    const autoSizeNote = () => {
+        // Сначала сбрасываем размеры, чтобы измерить естественные
+        textarea.style.width = 'auto';
+        textarea.style.height = 'auto';
+
+        // Ширина по содержимому, но не шире границ записки (в CSS-пикселях)
+        const naturalW = Math.ceil(textarea.scrollWidth + 1);
+        const targetW = Math.min(maxEditorWidthPx, Math.max(MIN_NOTE_EDITOR_W, naturalW));
+        textarea.style.width = `${targetW}px`;
+        wrapper.style.width = `${targetW}px`;
+
+        // Высота по содержимому, c нижним пределом = одна строка
+        const computed = (typeof window !== 'undefined') ? window.getComputedStyle(textarea) : null;
+        const lineH = (computed ? parseFloat(computed.lineHeight) : computeLineHeightPx(effectiveFontPx));
+        const naturalH = Math.ceil(textarea.scrollHeight);
+        const targetH = Math.min(maxEditorHeightPx, Math.max(MIN_NOTE_EDITOR_H, naturalH));
+        textarea.style.height = `${targetH}px`;
+        wrapper.style.height = `${targetH}px`;
+
+        // Центрируем wrapper внутри записки после смены размеров (в CSS-пикселях)
+        const left = Math.round(screenPos.x + (noteWidth * sCssLocal) / 2 - (targetW / 2));
+        const top = Math.round(screenPos.y + (noteHeight * sCssLocal) / 2 - (targetH / 2));
+        wrapper.style.left = `${left}px`;
+        wrapper.style.top = `${top}px`;
+    };
+    // Первый вызов — синхронизировать с текущим содержимым
+    autoSizeNote();
+
+    // Динамическое обновление позиции/размера редактора при зуме/панорамировании/трансформациях
+    const updateNoteEditor = createNoteEditorUpdater(controller, {
+        objectId,
+        position,
+        noteWidth,
+        noteHeight,
+        view,
+        textarea,
+        wrapper,
+        horizontalPadding,
+        computeLineHeightPx,
+        effectiveFontPx,
+        toScreen,
+    });
+    registerNoteEditorSync(controller, { objectId, updateNoteEditor });
+
+    return { updateNoteEditor };
+}