@sequent-org/moodboard 1.4.0 → 1.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sequent-org/moodboard",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "type": "module",
   "description": "Interactive moodboard",
   "main": "./src/index.js",

package/src/moodboard/integration/MoodBoardEventBindings.js

@@ -1,6 +1,21 @@
 import { Events } from '../../core/events/Events.js';
 import { logMindmapCompoundDebug } from '../../mindmap/MindmapCompoundContract.js';
 
+function getSelectTool(board) {
+    const toolManager = board?.coreMoodboard?.toolManager;
+    if (!toolManager) return null;
+    return toolManager?.tools?.get?.('select')
+        || toolManager?.registry?.get?.('select')
+        || null;
+}
+
+function hasOpenTextEditorInDom(board) {
+    const doc = board?.workspaceElement?.ownerDocument
+        || (typeof document !== 'undefined' ? document : null);
+    if (!doc || typeof doc.querySelector !== 'function') return false;
+    return Boolean(doc.querySelector('.moodboard-text-input'));
+}
+
 export function bindToolbarEvents(board) {
     board.coreMoodboard.eventBus.on(Events.UI.ToolbarAction, (action) => {
         if (action?.type === 'mindmap') {
@@ -13,8 +28,49 @@ export function bindToolbarEvents(board) {
         const createdObject = board.actionHandler.handleToolbarAction(action);
         if (action?.type === 'mindmap' && createdObject?.id) {
             const content = String(createdObject?.properties?.content || '');
-            if (content.trim().length === 0) {
+            const createdMeta = createdObject?.properties?.mindmap || {};
+            const isRootMindmap = createdMeta?.role === 'root';
+            const mindmapObjects = (board?.coreMoodboard?.state?.state?.objects || [])
+                .filter((obj) => obj?.type === 'mindmap');
+            const rootCount = mindmapObjects.filter((obj) => (obj?.properties?.mindmap?.role || null) === 'root').length;
+            const shouldAutoOpenForRoot = !isRootMindmap || rootCount <= 1;
+            const selectTool = getSelectTool(board);
+            const hasActiveEditor = Boolean(selectTool?.textEditor?.active);
+            const hasEditorDom = hasOpenTextEditorInDom(board);
+            const shouldBlockAutoOpen = hasActiveEditor && hasEditorDom;
+            if (content.trim().length === 0 && !shouldBlockAutoOpen && shouldAutoOpenForRoot) {
+                const doc = board?.workspaceElement?.ownerDocument
+                    || (typeof document !== 'undefined' ? document : null);
+                const closeSeqAtSchedule = Number(selectTool?._mindmapEditorCloseSeq || 0);
+                let cancelledByPointer = false;
+                const cancelOnPointerDown = () => {
+                    cancelledByPointer = true;
+                };
+                const cancelOnEscape = (event) => {
+                    if (event?.key === 'Escape') {
+                        cancelledByPointer = true;
+                    }
+                };
+                if (doc && typeof doc.addEventListener === 'function') {
+                    doc.addEventListener('pointerdown', cancelOnPointerDown, true);
+                    doc.addEventListener('keydown', cancelOnEscape, true);
+                }
                 setTimeout(() => {
+                    if (doc && typeof doc.removeEventListener === 'function') {
+                        doc.removeEventListener('pointerdown', cancelOnPointerDown, true);
+                        doc.removeEventListener('keydown', cancelOnEscape, true);
+                    }
+                    if (cancelledByPointer) return;
+                    const latestSelectTool = getSelectTool(board);
+                    const latestCloseSeq = Number(latestSelectTool?._mindmapEditorCloseSeq || 0);
+                    if (latestCloseSeq !== closeSeqAtSchedule) return;
+
+                    const nextSelectTool = getSelectTool(board);
+                    const nextHasActiveEditor = Boolean(nextSelectTool?.textEditor?.active);
+                    const nextHasEditorDom = hasOpenTextEditorInDom(board);
+                    if (nextHasActiveEditor || nextHasEditorDom) {
+                        return;
+                    }
                     board.coreMoodboard.eventBus.emit(Events.Keyboard.ToolSelect, { tool: 'select' });
                     board.coreMoodboard.eventBus.emit(Events.Tool.ObjectEdit, {
                         object: {
@@ -25,7 +81,7 @@ export function bindToolbarEvents(board) {
                         },
                         create: true,
                     });
-                }, 20);
+                }, 0);
             }
         }
     });

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

@@ -175,7 +175,12 @@ export function openMindmapEditor(object, create = false) {
 
     this.eventBus.emit(Events.UI.TextEditStart, { objectId: objectId || null });
     if (objectId && typeof this.setSelection === 'function') {
-        this.setSelection([objectId]);
+        this._selectionSyncFromEditor = true;
+        try {
+            this.setSelection([objectId]);
+        } finally {
+            this._selectionSyncFromEditor = false;
+        }
     }
     updateGlobalTextEditorHandlesLayer();
 
@@ -496,6 +501,36 @@ export function openMindmapEditor(object, create = false) {
 
     hideStaticTextDuringEditing(this, objectId);
 
+    const ownerDoc = view?.ownerDocument || (typeof document !== 'undefined' ? document : null);
+    const onOutsideDocumentPointerDown = (event) => {
+        if (!this.textEditor?.active || this.textEditor.objectType !== 'mindmap') return;
+        const target = event?.target;
+        if (!target) return;
+        if (wrapper.contains(target)) return;
+        const sideButton = (typeof target.closest === 'function')
+            ? target.closest('.mb-mindmap-side-btn')
+            : null;
+        if (sideButton?.dataset?.side === 'bottom') return;
+        finalize(true);
+        if (typeof this.clearSelection === 'function') {
+            this.clearSelection();
+        }
+    };
+    const onEscapeDocumentKeyDown = (event) => {
+        if (!this.textEditor?.active || this.textEditor.objectType !== 'mindmap') return;
+        if (event?.key !== 'Escape') return;
+        if (typeof event.preventDefault === 'function') event.preventDefault();
+        if (typeof event.stopPropagation === 'function') event.stopPropagation();
+        finalize(false);
+        if (typeof this.clearSelection === 'function') {
+            this.clearSelection();
+        }
+    };
+    if (ownerDoc && typeof ownerDoc.addEventListener === 'function') {
+        ownerDoc.addEventListener('pointerdown', onOutsideDocumentPointerDown, true);
+        ownerDoc.addEventListener('keydown', onEscapeDocumentKeyDown, true);
+    }
+
     const syncEditorBoundsToObject = () => {
         if (!objectId || !wrapper || !view || !view.parentElement || !world) return;
         const staticEl = (typeof window !== 'undefined')
@@ -561,8 +596,14 @@ export function openMindmapEditor(object, create = false) {
     const finalize = (commit) => {
         if (finalized) return;
         finalized = true;
+        this._mindmapEditorLastClosedAt = Date.now();
+        this._mindmapEditorCloseSeq = Number(this._mindmapEditorCloseSeq || 0) + 1;
 
         unregisterEditorListeners(this.eventBus, editorListeners);
+        if (ownerDoc && typeof ownerDoc.removeEventListener === 'function') {
+            ownerDoc.removeEventListener('pointerdown', onOutsideDocumentPointerDown, true);
+            ownerDoc.removeEventListener('keydown', onEscapeDocumentKeyDown, true);
+        }
 
         textarea.removeEventListener('blur', onBlur);
         textarea.removeEventListener('keydown', onKeyDown);

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

@@ -250,7 +250,20 @@ export function onContextMenu(event) {
 export function onKeyDown(event) {
     // Проверяем, не активен ли текстовый редактор (редактирование названия файла или текста)
     if (this.textEditor && this.textEditor.active) {
-        return; // Не обрабатываем клавиши во время редактирования
+        if (event.key === 'Escape') {
+            if (this.textEditor.objectType === 'file') {
+                this._closeFileNameEditor(false);
+            } else {
+                this._closeTextEditor(false);
+            }
+            if (this.textEditor.objectType === 'mindmap') {
+                this.clearSelection();
+            }
+            if (event?.originalEvent?.preventDefault) {
+                event.originalEvent.preventDefault();
+            }
+        }
+        return; // Не обрабатываем остальные клавиши во время редактирования
     }
 
     switch (event.key) {

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

@@ -48,6 +48,13 @@ export function hasSelection() {
 }
 
 export function setSelection(objectIds) {
+    if (this.textEditor?.active && !this._selectionSyncFromEditor) {
+        if (this.textEditor.objectType === 'file' && typeof this._closeFileNameEditor === 'function') {
+            this._closeFileNameEditor(true);
+        } else if (typeof this._closeTextEditor === 'function') {
+            this._closeTextEditor(true);
+        }
+    }
     const prev = this.selection.toArray();
     this.selection.clear();
     this.selection.addMany(objectIds);

package/src/ui/mindmap/MindmapConnectionLayer.js

@@ -109,17 +109,14 @@ export class MindmapConnectionLayer {
         this.graphics = null;
         this.subscriptions = [];
         this._lastSegments = [];
+        this._eventsAttached = false;
     }
 
     attach() {
         if (!this.core?.pixi) return;
-        if (this.graphics) return;
-        this.graphics = new PIXI.Graphics();
-        this.graphics.name = 'mindmap-connection-layer';
-        this.graphics.zIndex = 2;
-        const world = this.core.pixi.worldLayer || this.core.pixi.app?.stage;
-        world?.addChild?.(this.graphics);
-        this._attachEvents();
+        if (!this._eventsAttached) {
+            this._attachEvents();
+        }
         this.updateAll();
     }
 
@@ -135,6 +132,7 @@ export class MindmapConnectionLayer {
     }
 
     _attachEvents() {
+        if (this._eventsAttached) return;
         const bindings = [
             [Events.Object.Created, () => this.updateAll()],
             [Events.Object.Deleted, () => this.updateAll()],
@@ -156,6 +154,7 @@ export class MindmapConnectionLayer {
             this.eventBus.on(event, handler);
             this.subscriptions.push([event, handler]);
         });
+        this._eventsAttached = true;
     }
 
     _detachEvents() {
@@ -165,10 +164,10 @@ export class MindmapConnectionLayer {
         }
         this.subscriptions.forEach(([event, handler]) => this.eventBus.off(event, handler));
         this.subscriptions = [];
+        this._eventsAttached = false;
     }
 
     updateAll() {
-        if (!this.graphics) return;
         const objects = asArray(this.core?.state?.state?.objects);
         const mindmaps = objects.filter(isMindmap);
         const byId = new Map(mindmaps.map((obj) => [obj.id, obj]));
@@ -184,6 +183,22 @@ export class MindmapConnectionLayer {
             return meta.role === 'child' && typeof meta.parentId === 'string' && meta.parentId.length > 0;
         });
 
+        if (children.length === 0) {
+            if (this.graphics) {
+                this.graphics.clear();
+            }
+            this._lastSegments = [];
+            return;
+        }
+
+        if (!this.graphics) {
+            this.graphics = new PIXI.Graphics();
+            this.graphics.name = 'mindmap-connection-layer';
+            this.graphics.zIndex = 2;
+            const world = this.core?.pixi?.worldLayer || this.core?.pixi?.app?.stage;
+            world?.addChild?.(this.graphics);
+        }
+
         const g = this.graphics;
         g.clear();
         this._lastSegments = [];