@sequent-org/moodboard 1.4.32 → 1.4.33

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

@@ -1,8 +1,24 @@
 import * as PIXI from 'pixi.js';
 
+import { Events } from '../../../core/events/Events.js';
+
 /**
- * BoxSelectController — управление рамкой выделения и выбором по пересечению
+ * BoxSelectController — управление рамкой выделения и выбором по пересечению.
+ *
+ * Помимо обычного `setSelection` по intersection, на завершение жеста (`end`)
+ * эмитит `Tool.BoxSelectCommit` с дополнительным набором `objects` — id объектов,
+ * чьи bbox целиком содержатся в финальном rect (strict contains). Этот канал
+ * нужен подписчикам, которым важно отличать «попали целиком» от «зацепили краем»
+ * (например, добавление reference-картинок в чат-композер).
  */
+function isRectContainedInRect(outer, inner) {
+    if (!outer || !inner) return false;
+    return inner.x >= outer.x
+        && inner.y >= outer.y
+        && inner.x + inner.width <= outer.x + outer.width
+        && inner.y + inner.height <= outer.y + outer.height;
+}
+
 export class BoxSelectController {
     constructor({ app, selection, emit, setSelection, clearSelection, rectIntersectsRect }) {
         this.app = app;
@@ -32,6 +48,7 @@ export class BoxSelectController {
             this.selectionGraphics.name = 'selection-box';
             this.app.stage.addChild(this.selectionGraphics);
         }
+        this.emit(Events.Tool.BoxSelectStart, {});
     }
 
     update(mouse) {
@@ -78,13 +95,17 @@ export class BoxSelectController {
         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);
+        let commitBox = null;
+        let containedIds = [];
+        let matched = [];
         if (w >= 2 && h >= 2) {
             const box = { x, y, width: w, height: h };
+            commitBox = box;
             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 (isRectContainedInRect(box, item.bounds)) containedIds.push(item.id);
             }
             if (matched.length > 0) {
                 if (this.isMultiSelect) {
@@ -94,6 +115,7 @@ export class BoxSelectController {
                 }
             }
         }
+        this.emit(Events.Tool.BoxSelectCommit, { box: commitBox, objects: containedIds, selected: matched });
         this.isActive = false;
         this.selectionBox = null;
         if (this.selectionGraphics && this.selectionGraphics.parent) this.selectionGraphics.parent.removeChild(this.selectionGraphics);

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

@@ -0,0 +1,139 @@
+import * as PIXI from 'pixi.js';
+import { Events } from '../../../core/events/Events.js';
+import {
+    createFrameTitleEditorWrapper,
+    createFrameTitleEditorInput,
+} from './InlineEditorDomFactory.js';
+import { toScreenWithContainerOffset } from './InlineEditorPositioningService.js';
+
+export function openFrameTitleEditor(object, _create = false) {
+    let objectId, properties;
+
+    const objData = object.object || object;
+    objectId = objData.id || object.id || null;
+    properties = objData.properties || object.properties || {};
+
+    const currentTitle = properties.title || 'Фрейм';
+
+    if (this.textEditor.active) {
+        if (this.textEditor.objectType === 'frame') {
+            this._closeFrameTitleEditor(true);
+        } else if (this.textEditor.objectType === 'file') {
+            this._closeFileNameEditor(true);
+        } else {
+            this._closeTextEditor(true);
+        }
+    }
+
+    if (!objectId) return;
+
+    const pixiReq = { objectId, pixiObject: null };
+    this.eventBus.emit(Events.Tool.GetObjectPixi, pixiReq);
+
+    let frameInstance = null;
+    if (pixiReq.pixiObject && pixiReq.pixiObject._mb && pixiReq.pixiObject._mb.instance) {
+        frameInstance = pixiReq.pixiObject._mb.instance;
+    }
+
+    if (!frameInstance || typeof frameInstance.hideTitle !== 'function') return;
+
+    frameInstance.hideTitle();
+
+    const view = this.app?.view || document.querySelector('canvas');
+    if (!view || !view.parentElement) {
+        frameInstance.showTitle();
+        return;
+    }
+
+    const titleLayer = frameInstance.titleLayer;
+    const screenPos = titleLayer
+        ? toScreenWithContainerOffset(titleLayer, view, 0, 0)
+        : { x: 0, y: 0 };
+
+    // Ширина редактора = ширина titleBg в экранных пикселях (с учётом зум-компенсации)
+    let inputWidth = 150;
+    if (titleLayer && frameInstance.titleBg) {
+        const bgRight = toScreenWithContainerOffset(titleLayer, view, frameInstance.titleBg.width || 150, 0);
+        inputWidth = Math.max(100, Math.round(bgRight.x - screenPos.x));
+    }
+
+    const wrapper = createFrameTitleEditorWrapper();
+    const input = createFrameTitleEditorInput(currentTitle);
+    wrapper.style.width = `${inputWidth}px`;
+
+    wrapper.appendChild(input);
+    view.parentElement.appendChild(wrapper);
+
+    wrapper.style.left = `${Math.round(screenPos.x)}px`;
+    wrapper.style.top = `${Math.round(screenPos.y)}px`;
+
+    this.textEditor = {
+        active: true,
+        objectId,
+        textarea: input,
+        wrapper,
+        position: null,
+        properties,
+        objectType: 'frame',
+        isResizing: false,
+        closing: false,
+        _frameInstance: frameInstance,
+    };
+
+    input.focus();
+    input.select();
+
+    const finalize = (commit) => this._closeFrameTitleEditor(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 closeFrameTitleEditor(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;
+    const oldTitle = (this.textEditor.properties?.title) || 'Фрейм';
+    const frameInstance = this.textEditor._frameInstance;
+
+    if (this.textEditor.wrapper && this.textEditor.wrapper.parentNode) {
+        this.textEditor.wrapper.remove();
+    }
+
+    if (frameInstance && typeof frameInstance.showTitle === 'function') {
+        frameInstance.showTitle();
+    }
+
+    if (commitValue && objectId && value !== oldTitle) {
+        this.eventBus.emit(Events.Object.StateChanged, {
+            objectId,
+            updates: { properties: { title: value } },
+        });
+    }
+
+    this.textEditor = {
+        active: false,
+        objectId: null,
+        textarea: null,
+        wrapper: null,
+        world: null,
+        position: null,
+        properties: null,
+        objectType: 'text',
+        isResizing: false,
+        closing: false,
+    };
+}

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

@@ -10,6 +10,10 @@ import {
     closeMindmapEditor as closeMindmapEditorViaController,
     openMindmapEditor as openMindmapEditorViaController,
 } from './MindmapInlineEditorController.js';
+import {
+    closeFrameTitleEditor as closeFrameTitleEditorViaController,
+    openFrameTitleEditor as openFrameTitleEditorViaController,
+} from './FrameTitleInlineEditorController.js';
 
 export function openTextEditor(object, create = false) {
     return openTextEditorViaController.call(this, object, create);
@@ -37,3 +41,11 @@ export function closeTextEditor(commit) {
 export function closeMindmapEditor(commit) {
     return closeMindmapEditorViaController.call(this, commit);
 }
+
+export function openFrameTitleEditor(object, create = false) {
+    return openFrameTitleEditorViaController.call(this, object, create);
+}
+
+export function closeFrameTitleEditor(commit) {
+    return closeFrameTitleEditorViaController.call(this, commit);
+}

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

@@ -30,6 +30,42 @@ export function createFileNameEditorWrapper() {
     return wrapper;
 }
 
+export function createFrameTitleEditorWrapper() {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'moodboard-frame-title-editor';
+    wrapper.style.cssText = `
+            position: absolute;
+            z-index: 1000;
+            background: white;
+            border: 2px solid #2563eb;
+            border-radius: 6px;
+            padding: 3px 6px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+            min-width: 100px;
+            max-width: 320px;
+            font-family: Inter, system-ui, -apple-system, Arial, sans-serif;
+        `;
+    return wrapper;
+}
+
+export function createFrameTitleEditorInput(title) {
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.value = title;
+    input.style.cssText = `
+            border: none;
+            outline: none;
+            background: transparent;
+            font-family: Inter, system-ui, -apple-system, Arial, sans-serif;
+            font-size: 14px;
+            font-weight: 500;
+            width: 100%;
+            padding: 1px 2px;
+            color: #1f2937;
+        `;
+    return input;
+}
+
 export function createFileNameEditorInput(fileName) {
     const input = document.createElement('input');
     input.type = 'text';

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

@@ -0,0 +1,125 @@
+import * as PIXI from 'pixi.js';
+
+/**
+ * Проверяет, находится ли точка внутри полигона (алгоритм ray casting).
+ */
+function pointInPolygon(point, polygon) {
+    let inside = false;
+    const n = polygon.length;
+    for (let i = 0, j = n - 1; i < n; j = i++) {
+        const xi = polygon[i].x, yi = polygon[i].y;
+        const xj = polygon[j].x, yj = polygon[j].y;
+        if ((yi > point.y) !== (yj > point.y) &&
+            point.x < ((xj - xi) * (point.y - yi)) / (yj - yi) + xi) {
+            inside = !inside;
+        }
+    }
+    return inside;
+}
+
+/**
+ * Проверяет, пересекается ли полигон лассо с прямоугольником объекта (bounds).
+ * Достаточно, что хотя бы один угол прямоугольника — внутри полигона.
+ */
+function lassoIntersectsRect(polygon, rect) {
+    if (polygon.length < 3) return false;
+    const corners = [
+        { x: rect.x, y: rect.y },
+        { x: rect.x + rect.width, y: rect.y },
+        { x: rect.x + rect.width, y: rect.y + rect.height },
+        { x: rect.x, y: rect.y + rect.height },
+        { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 }
+    ];
+    return corners.some((c) => pointInPolygon(c, polygon));
+}
+
+/**
+ * LassoSelectController — выделение объектов произвольным контуром.
+ * Аналог BoxSelectController, но с polygon hit-test вместо AABB.
+ */
+export class LassoSelectController {
+    constructor({ app, selection, emit, setSelection, clearSelection }) {
+        this.app = app;
+        this.selection = selection;
+        this.emit = emit;
+        this.setSelection = setSelection;
+        this.clearSelection = clearSelection;
+
+        this.isActive = false;
+        this.points = [];
+        this.lassoGraphics = null;
+        this.initialSelection = null;
+        this.isMultiSelect = false;
+    }
+
+    start(mouse, isMultiSelect) {
+        this.isActive = true;
+        this.isMultiSelect = !!isMultiSelect;
+        this.points = [{ x: mouse.x, y: mouse.y }];
+        this.initialSelection = this.selection.toArray();
+        if (!this.isMultiSelect) this.clearSelection();
+
+        if (this.app && this.app.stage) {
+            this.app.stage.sortableChildren = true;
+            this.lassoGraphics = new PIXI.Graphics();
+            this.lassoGraphics.zIndex = 2000;
+            this.lassoGraphics.name = 'lasso-select';
+            this.app.stage.addChild(this.lassoGraphics);
+        }
+    }
+
+    update(mouse) {
+        if (!this.isActive) return;
+        this.points.push({ x: mouse.x, y: mouse.y });
+        this._redraw();
+        this._updateSelection();
+    }
+
+    end() {
+        if (!this.isActive) return;
+        this._updateSelection();
+        this.isActive = false;
+        this.points = [];
+        this._destroyGraphics();
+    }
+
+    _updateSelection() {
+        if (this.points.length < 3) return;
+        const request = { objects: [] };
+        this.emit('get:all:objects', request);
+        const matched = [];
+        for (const item of request.objects) {
+            if (lassoIntersectsRect(this.points, item.bounds)) matched.push(item.id);
+        }
+        let newSelection;
+        if (this.isMultiSelect && this.initialSelection) {
+            const base = new Set(this.initialSelection);
+            for (const id of matched) base.add(id);
+            newSelection = Array.from(base);
+        } else {
+            newSelection = matched;
+        }
+        this.setSelection(newSelection);
+    }
+
+    _redraw() {
+        if (!this.lassoGraphics || this.points.length < 2) return;
+        this.lassoGraphics.clear();
+        this.lassoGraphics.lineStyle(2, 0x3b82f6, 0.9);
+        this.lassoGraphics.beginFill(0x3b82f6, 0.08);
+        this.lassoGraphics.moveTo(this.points[0].x, this.points[0].y);
+        for (let i = 1; i < this.points.length; i++) {
+            this.lassoGraphics.lineTo(this.points[i].x, this.points[i].y);
+        }
+        this.lassoGraphics.closePath();
+        this.lassoGraphics.endFill();
+    }
+
+    _destroyGraphics() {
+        if (this.lassoGraphics) {
+            if (this.lassoGraphics.parent) this.lassoGraphics.parent.removeChild(this.lassoGraphics);
+            this.lassoGraphics.destroy();
+            this.lassoGraphics = null;
+        }
+    }
+}

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

@@ -600,6 +600,7 @@ export function openMindmapEditor(object, create = false) {
         [Events.Tool.GroupRotateUpdate, onGroupSync],
         [Events.UI.ZoomPercent, () => syncEditorBoundsToObject()],
         [Events.Tool.PanUpdate, () => syncEditorBoundsToObject()],
+        [Events.Viewport.Changed, () => syncEditorBoundsToObject()],
     ]);
 
     const initialContent = String(properties.content || '');

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

@@ -1,6 +1,17 @@
 import { Events } from '../../../core/events/Events.js';
 
 const DRAG_START_THRESHOLD_PX = 4;
+const TEXT_EDITOR_STYLE_KEYS = ['fontFamily', 'fontSize', 'color', 'backgroundColor', 'markdown', 'bold', 'italic', 'underline', 'strikethrough', 'textAlign', 'lineHeight', 'listType', 'listChecked'];
+
+function pickTextEditorProperties(properties = {}) {
+    const picked = {};
+    TEXT_EDITOR_STYLE_KEYS.forEach((key) => {
+        if (properties[key] !== undefined) {
+            picked[key] = properties[key];
+        }
+    });
+    return picked;
+}
 
 export function onMouseDown(event) {
     // Если активен текстовый редактор, закрываем его при клике вне
@@ -124,8 +135,12 @@ export function onMouseDown(event) {
                 return;
             }
         }
-        // Иначе — начинаем рамку выделения
-        this.startBoxSelect(event);
+        // Иначе — начинаем рамку выделения (или лассо в режиме лассо)
+        if (this.lassoMode) {
+            this.startLassoSelect(event);
+        } else {
+            this.startBoxSelect(event);
+        }
     }
 }
 
@@ -158,6 +173,8 @@ export function onMouseMove(event) {
         }
     } else if (this.isDragging || this.isGroupDragging) {
         this.updateDrag(event);
+    } else if (this.isLassoSelect) {
+        this.updateLassoSelect(event);
     } else if (this.isBoxSelect) {
         this.updateBoxSelect(event);
     } else {
@@ -186,6 +203,8 @@ export function onMouseUp(event) {
         this.endRotate();
     } else if (this.isDragging || this.isGroupDragging) {
         this.endDrag();
+    } else if (this.isLassoSelect) {
+        this.endLassoSelect();
     } else if (this.isBoxSelect) {
         this.endBoxSelect();
     }
@@ -203,20 +222,28 @@ export function onDoubleClick(event) {
         const isText = !!(pix && pix._mb && pix._mb.type === 'text');
         const isNote = !!(pix && pix._mb && pix._mb.type === 'note');
         const isFile = !!(pix && pix._mb && pix._mb.type === 'file');
+        const isShape = !!(pix && pix._mb && pix._mb.type === 'shape');
+        const isFrame = !!(pix && pix._mb && pix._mb.type === 'frame');
 
         if (isText) {
             // Получаем позицию объекта для редактирования
             const posData = { objectId: hitResult.object, position: null };
             this.emit(Events.Tool.GetObjectPosition, posData);
 
-            // Получаем содержимое из properties объекта
-            const textContent = pix._mb?.properties?.content || '';
+            // Передаём в inline-editor не только контент, но и текущие текстовые стили:
+            // иначе теряются listType/textAlign/lineHeight и Enter/визуальное совпадение
+            // в режиме редактирования расходятся со статичным рендером.
+            const textProperties = pix._mb?.properties || {};
+            const textContent = textProperties.content || '';
 
             this.emit(Events.Tool.ObjectEdit, {
                 id: hitResult.object,
                 type: 'text',
                 position: posData.position,
-                properties: { content: textContent },
+                properties: {
+                    ...pickTextEditorProperties(textProperties),
+                    content: textContent,
+                },
                 caretClick: {
                     clientX: event?.originalEvent?.clientX,
                     clientY: event?.originalEvent?.clientY
@@ -256,6 +283,36 @@ export function onDoubleClick(event) {
             });
             return;
         }
+
+        if (isShape) {
+            const posData = { objectId: hitResult.object, position: null };
+            this.emit(Events.Tool.GetObjectPosition, posData);
+            const shapeContent = pix._mb?.properties?.content || '';
+            this.emit(Events.Tool.ObjectEdit, {
+                id: hitResult.object,
+                type: 'shape',
+                position: posData.position,
+                properties: { content: shapeContent },
+                caretClick: {
+                    clientX: event?.originalEvent?.clientX,
+                    clientY: event?.originalEvent?.clientY,
+                },
+                create: false,
+            });
+            return;
+        }
+
+        if (isFrame) {
+            const frameProps = pix._mb?.properties || {};
+            this.emit(Events.Tool.ObjectEdit, {
+                id: hitResult.object,
+                type: 'frame',
+                properties: { title: frameProps.title || 'Фрейм' },
+                create: false,
+            });
+            return;
+        }
+
         this.editObject(hitResult.object);
     }
 }
@@ -285,6 +342,8 @@ export function onKeyDown(event) {
         if (event.key === 'Escape') {
             if (this.textEditor.objectType === 'file') {
                 this._closeFileNameEditor(false);
+            } else if (this.textEditor.objectType === 'frame') {
+                this._closeFrameTitleEditor(false);
             } else {
                 this._closeTextEditor(false);
             }

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

@@ -8,6 +8,7 @@ import { GroupResizeController } from './GroupResizeController.js';
 import { GroupRotateController } from './GroupRotateController.js';
 import { GroupDragController } from './GroupDragController.js';
 import { BoxSelectController } from './BoxSelectController.js';
+import { LassoSelectController } from './LassoSelectController.js';
 
 export function activateSelectTool(app, defaultCursor, superActivate) {
     superActivate();
@@ -67,6 +68,13 @@ export function activateSelectTool(app, defaultCursor, superActivate) {
             clearSelection: () => this.clearSelection(),
             rectIntersectsRect: (a, b) => this.rectIntersectsRect(a, b)
         });
+        this._lassoSelect = new LassoSelectController({
+            app,
+            selection: this.selection,
+            emit: (event, payload) => this.emit(event, payload),
+            setSelection: (ids) => this.setSelection(ids),
+            clearSelection: () => this.clearSelection()
+        });
     } else if (!app) {
         console.log('❌ PIXI app не передан в activate');
     } else {
@@ -76,10 +84,12 @@ export function activateSelectTool(app, defaultCursor, superActivate) {
 export function deactivateSelectTool(superDeactivate) {
     superDeactivate();
 
-    // Закрываем текстовый/файловый редактор если открыт
+    // Закрываем текстовый/файловый/frame редактор если открыт
     if (this.textEditor.active) {
         if (this.textEditor.objectType === 'file') {
             this._closeFileNameEditor(true);
+        } else if (this.textEditor.objectType === 'frame') {
+            this._closeFrameTitleEditor(true);
         } else {
             this._closeTextEditor(true);
         }

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

@@ -64,6 +64,10 @@ export function initializeSelectToolState(instance) {
     instance.selectionGraphics = null; // PIXI.Graphics для визуализации рамки
     instance.initialSelectionBeforeBox = null; // снимок выделения перед началом box-select
 
+    // Режим лассо-выделения (произвольный контур вместо прямоугольника)
+    instance.lassoMode = false;
+    instance.isLassoSelect = false;
+
     instance.textEditor = {
         active: false,
         objectId: null,
@@ -96,6 +100,8 @@ export function registerSelectToolCoreSubscriptions(instance) {
         const objectType = object.type || (object.object && object.object.type) || 'text';
         if (objectType === 'file') {
             instance._openFileNameEditor(object, object.create || false);
+        } else if (objectType === 'frame') {
+            instance._openFrameTitleEditor(object, object.create || false);
         } else if (objectType === 'mindmap') {
             instance._openMindmapEditor(object, object.create || false);
         } else {
@@ -121,11 +127,16 @@ export function registerSelectToolCoreSubscriptions(instance) {
         }
     };
 
-    instance._coreHandlers = { onDuplicateReady, onGroupDuplicateReady, onObjectEdit, onObjectDeleted };
+    const onLassoModeSet = (data) => {
+        instance.lassoMode = !!(data && data.active);
+    };
+
+    instance._coreHandlers = { onDuplicateReady, onGroupDuplicateReady, onObjectEdit, onObjectDeleted, onLassoModeSet };
     instance.eventBus.on(Events.Tool.DuplicateReady, onDuplicateReady);
     instance.eventBus.on(Events.Tool.GroupDuplicateReady, onGroupDuplicateReady);
     instance.eventBus.on(Events.Tool.ObjectEdit, onObjectEdit);
     instance.eventBus.on(Events.Object.Deleted, onObjectDeleted);
+    instance.eventBus.on(Events.Lasso.ModeSet, onLassoModeSet);
 }
 
 export function unregisterSelectToolCoreSubscriptions(instance) {
@@ -135,5 +146,6 @@ export function unregisterSelectToolCoreSubscriptions(instance) {
     instance.eventBus.off(Events.Tool.GroupDuplicateReady, onGroupDuplicateReady);
     instance.eventBus.off(Events.Tool.ObjectEdit, onObjectEdit);
     instance.eventBus.off(Events.Object.Deleted, onObjectDeleted);
+    instance.eventBus.off(Events.Lasso.ModeSet, onLassoModeSet);
     instance._coreHandlers = null;
 }