@sequent-org/moodboard 1.3.4 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sequent-org/moodboard",
-  "version": "1.3.4",
+  "version": "1.4.0",
   "type": "module",
   "description": "Interactive moodboard",
   "main": "./src/index.js",
@@ -29,7 +29,12 @@
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest --watch",
     "test:e2e": "playwright test",
+    "test:grid:stability": "vitest run tests/services/BoardService.grid-zoom.test.js tests/services/BoardService.grid-destroy.test.js tests/services/BoardService.lifecycle.screen-grid.test.js tests/services/BoardService.screen-grid.settings-reload.test.js tests/services/GridSnapResolver.screen-state.test.js tests/services/GridSnapResolver.screen-grid-types.test.js",
+    "test:grid:stress": "vitest run tests/services/BoardService.screen-grid.stress.test.js tests/services/GridSnapResolver.screen-grid.stress.test.js",
+    "test:grid:all": "npm run test:grid:stability && npm run test:grid:stress",
+    "test:screen:integer": "node scripts/check-screen-integer-contract.mjs",
     "grid:our-metrics": "node scripts/export-our-dot-grid-metrics.mjs",
+    "grid:diagnose:dot": "node scripts/diagnose-dot-grid-behavior.mjs",
     "grid:miro-metrics": "node scripts/analyze-miro-dot-screenshots.mjs",
     "deploy:build": "npm run build && npm run start",
     "deploy:prod": "NODE_ENV=production npm run build && NODE_ENV=production npm run start"

package/src/assets/icons/mindmap.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M19 2a3 3 0 1 1 0 6c-.463 0-.9-.109-1.291-.296l-1.19 1.19A3.992 3.992 0 0 1 18 12a3.991 3.991 0 0 1-1.48 3.105l1.189 1.19A2.984 2.984 0 0 1 19 16a3 3 0 1 1-3 3c0-.463.108-.9.295-1.291l-1.748-1.748A4.106 4.106 0 0 1 14 16h-4c-.186 0-.37-.014-.549-.04l-1.747 1.75c.187.392.296.828.296 1.291a3 3 0 1 1-3-3c.462 0 .899.108 1.29.295l1.19-1.19A3.992 3.992 0 0 1 6 12a3.99 3.99 0 0 1 1.48-3.106l-1.19-1.19A2.982 2.982 0 0 1 5 8a3 3 0 1 1 3-3c0 .463-.109.899-.296 1.29l1.748 1.748C9.632 8.014 9.814 8 10 8h4c.185 0 .368.013.547.037l1.748-1.747A2.983 2.983 0 0 1 16 5a3 3 0 0 1 3-3ZM5 18a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm14 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-9-8a2 2 0 1 0 0 4h4a2 2 0 1 0 0-4h-4ZM5 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm14 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z"/>
+</svg>

package/src/core/SaveManager.js

@@ -2,6 +2,7 @@
  * Менеджер автоматического сохранения данных
  */
 import { Events } from './events/Events.js';
+import { logMindmapCompoundDebug } from '../mindmap/MindmapCompoundContract.js';
 export class SaveManager {
     constructor(eventBus, options = {}) {
         this.eventBus = eventBus;
@@ -190,6 +191,23 @@ export class SaveManager {
                 this.updateSaveStatus('idle');
                 return;
             }
+            const objects = Array.isArray(saveData?.boardData?.objects)
+                ? saveData.boardData.objects
+                : Array.isArray(saveData?.objects) ? saveData.objects : [];
+            const mindmapNodes = objects
+                .filter((obj) => obj?.type === 'mindmap')
+                .map((obj) => ({
+                    id: obj.id || null,
+                    compoundId: obj.properties?.mindmap?.compoundId || null,
+                    role: obj.properties?.mindmap?.role || null,
+                    parentId: obj.properties?.mindmap?.parentId || null,
+                }));
+            if (mindmapNodes.length > 0) {
+                logMindmapCompoundDebug('save:roundtrip:before-send', {
+                    totalMindmapNodes: mindmapNodes.length,
+                    sample: mindmapNodes.slice(0, 5),
+                });
+            }
             
             // Проверяем, изменились ли данные с последнего сохранения
             if (this.lastSavedData && JSON.stringify(saveData) === JSON.stringify(this.lastSavedData)) {
@@ -206,6 +224,12 @@ export class SaveManager {
             const isSuccess = response.success === true || (response.data !== undefined);
             
             if (isSuccess) {
+                if (mindmapNodes.length > 0) {
+                    logMindmapCompoundDebug('save:roundtrip:success', {
+                        totalMindmapNodes: mindmapNodes.length,
+                        sample: mindmapNodes.slice(0, 5),
+                    });
+                }
                 this.lastSavedData = JSON.parse(JSON.stringify(saveData));
                 this.hasUnsavedChanges = false;
                 this.retryCount = 0;
@@ -260,7 +284,7 @@ export class SaveManager {
         }
 
         const requestBody = {
-            boardId: boardId,
+            boardId,
             boardData: data
         };
 
@@ -299,6 +323,19 @@ export class SaveManager {
         
         return await response.json();
     }
+
+    /**
+     * Строит единый payload сохранения для всех каналов отправки
+     * (обычный save, beacon, sync XHR fallback).
+     */
+    _buildSavePayload(boardId, data, csrfToken = undefined) {
+        return {
+            boardId,
+            boardData: data,
+            settings: data?.settings || undefined,
+            _token: csrfToken || undefined
+        };
+    }
     
     /**
      * Обработка ошибок сохранения
@@ -440,14 +477,11 @@ export class SaveManager {
         if (!data) return;
 
         const boardId = data.id || 'default';
-        const payload = {
-            boardId,
-            // отправляем «сырой» снимок; на серверной стороне допускается приём JSON
-            boardData: data,
-            settings: data.settings || undefined,
-            // CSRF токен добавим в тело (для серверов, которые принимают _token из JSON)
-            _token: (typeof document !== 'undefined') ? (document.querySelector('meta[name="csrf-token"]')?.value || document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')) : undefined
-        };
+        // CSRF токен добавим в тело (для серверов, которые принимают _token из JSON)
+        const csrfToken = (typeof document !== 'undefined')
+            ? (document.querySelector('meta[name="csrf-token"]')?.value || document.querySelector('meta[name="csrf-token"]')?.getAttribute('content'))
+            : undefined;
+        const payload = this._buildSavePayload(boardId, data, csrfToken);
 
         const body = JSON.stringify(payload);
 
@@ -485,12 +519,7 @@ export class SaveManager {
             xhr.setRequestHeader('Accept', 'application/json');
             if (csrfToken) xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken);
 
-            const payload = {
-                b: boardId,
-                boardData: data,
-                settings: data.settings || undefined,
-                _token: csrfToken || undefined
-            };
+            const payload = this._buildSavePayload(boardId, data, csrfToken || undefined);
             try { xhr.send(JSON.stringify(payload)); } catch (_) { /* игнорируем */ }
         } catch (_) { /* игнорируем */ }
     }

package/src/core/commands/MindmapStatePatchCommand.js

@@ -0,0 +1,85 @@
+import { BaseCommand } from './BaseCommand.js';
+import { Events } from '../events/Events.js';
+
+function deepClone(value) {
+    return JSON.parse(JSON.stringify(value));
+}
+
+function asEntryMap(entries) {
+    const map = new Map();
+    const src = entries && typeof entries === 'object' ? entries : {};
+    Object.keys(src).forEach((id) => {
+        const entry = src[id];
+        if (!entry || typeof entry !== 'object') return;
+        map.set(id, entry);
+    });
+    return map;
+}
+
+export class MindmapStatePatchCommand extends BaseCommand {
+    constructor(core, beforeEntries, afterEntries, description = 'Снимок состояния mindmap') {
+        super('mindmap-state-patch', description);
+        this.core = core;
+        this.beforeEntries = deepClone(beforeEntries || {});
+        this.afterEntries = deepClone(afterEntries || {});
+    }
+
+    execute() {
+        this._applyEntries(this.afterEntries);
+    }
+
+    undo() {
+        this._applyEntries(this.beforeEntries);
+    }
+
+    _applyEntries(entries) {
+        if (!this.core) return;
+        const objects = this.core?.state?.state?.objects || [];
+        const byId = new Map((Array.isArray(objects) ? objects : []).map((obj) => [obj?.id, obj]));
+        const entryMap = asEntryMap(entries);
+        entryMap.forEach((entry, id) => {
+            const node = byId.get(id);
+            if (!node || node.type !== 'mindmap') return;
+
+            const position = entry?.position || {};
+            const size = entry?.size || {};
+            const properties = entry?.properties || {};
+
+            const nextPos = {
+                x: Math.round(Number(position?.x || 0)),
+                y: Math.round(Number(position?.y || 0)),
+            };
+            const nextSize = {
+                width: Math.max(1, Math.round(Number(size?.width || node.width || node?.properties?.width || 1))),
+                height: Math.max(1, Math.round(Number(size?.height || node.height || node?.properties?.height || 1))),
+            };
+
+            this.core.updateObjectSizeAndPositionDirect(id, nextSize, nextPos, 'mindmap', { snap: false });
+
+            node.properties = deepClone(properties);
+            node.width = nextSize.width;
+            node.height = nextSize.height;
+
+            const pixiObject = this.core?.pixi?.objects?.get?.(id);
+            const instance = pixiObject?._mb?.instance;
+            if (pixiObject?._mb) pixiObject._mb.properties = node.properties;
+            if (instance) {
+                const props = node.properties || {};
+                if (Number.isFinite(props.strokeColor)) instance.strokeColor = Math.floor(Number(props.strokeColor));
+                if (Number.isFinite(props.fillColor)) instance.fillColor = Math.floor(Number(props.fillColor));
+                if (Number.isFinite(props.fillAlpha)) instance.fillAlpha = Number(props.fillAlpha);
+                if (Number.isFinite(props.strokeWidth)) instance.strokeWidth = Math.max(1, Math.round(Number(props.strokeWidth)));
+                if (typeof instance._redrawPreserveTransform === 'function') {
+                    instance._redrawPreserveTransform();
+                } else if (typeof instance._draw === 'function') {
+                    instance._draw();
+                }
+            }
+
+            this.emit(Events.Object.TransformUpdated, { objectId: id });
+            this.emit(Events.Object.Updated, { objectId: id });
+        });
+        this.core?.state?.markDirty?.();
+    }
+}
+

package/src/core/commands/UpdateContentCommand.js

@@ -5,20 +5,24 @@ import { BaseCommand } from './BaseCommand.js';
 import { Events } from '../events/Events.js';
 
 export class UpdateContentCommand extends BaseCommand {
-    constructor(coreMoodboard, objectId, oldContent, newContent) {
+    constructor(coreMoodboard, objectId, oldContent, newContent, options = {}) {
         super('update_content', `Изменить текст`);
         this.coreMoodboard = coreMoodboard;
         this.objectId = objectId;
         this.oldContent = oldContent;
         this.newContent = newContent;
+        this.oldSize = options?.oldSize ? { ...options.oldSize } : null;
+        this.newSize = options?.newSize ? { ...options.newSize } : null;
+        this.oldPosition = options?.oldPosition ? { ...options.oldPosition } : null;
+        this.newPosition = options?.newPosition ? { ...options.newPosition } : null;
     }
 
     execute() {
-        this._applyContent(this.newContent);
+        this._applyContent(this.newContent, this.newSize, this.newPosition);
     }
 
     undo() {
-        this._applyContent(this.oldContent);
+        this._applyContent(this.oldContent, this.oldSize, this.oldPosition);
     }
 
     canMergeWith(otherCommand) {
@@ -31,10 +35,12 @@ export class UpdateContentCommand extends BaseCommand {
             throw new Error('Cannot merge commands');
         }
         this.newContent = otherCommand.newContent;
+        this.newSize = otherCommand.newSize ? { ...otherCommand.newSize } : this.newSize;
+        this.newPosition = otherCommand.newPosition ? { ...otherCommand.newPosition } : this.newPosition;
         this.timestamp = otherCommand.timestamp;
     }
 
-    _applyContent(content) {
+    _applyContent(content, sizeSnapshot = null, positionSnapshot = null) {
         const objects = this.coreMoodboard.state.getObjects();
         const object = objects.find((obj) => obj.id === this.objectId);
         if (object) {
@@ -42,6 +48,43 @@ export class UpdateContentCommand extends BaseCommand {
                 object.properties = {};
             }
             object.properties.content = content;
+
+            const isMindmap = object.type === 'mindmap';
+            const hasSizeSnapshot = sizeSnapshot
+                && Number.isFinite(sizeSnapshot.width)
+                && Number.isFinite(sizeSnapshot.height);
+            if (isMindmap && hasSizeSnapshot) {
+                const nextSize = {
+                    width: Math.max(1, Math.round(sizeSnapshot.width)),
+                    height: Math.max(1, Math.round(sizeSnapshot.height)),
+                };
+                const nextPosition = (positionSnapshot
+                    && Number.isFinite(positionSnapshot.x)
+                    && Number.isFinite(positionSnapshot.y))
+                    ? { x: Math.round(positionSnapshot.x), y: Math.round(positionSnapshot.y) }
+                    : { x: Math.round(object.position?.x || 0), y: Math.round(object.position?.y || 0) };
+                this.coreMoodboard.updateObjectSizeAndPositionDirect(
+                    this.objectId,
+                    nextSize,
+                    nextPosition,
+                    'mindmap',
+                    { snap: false }
+                );
+                this.emit(Events.Tool.ResizeUpdate, {
+                    object: this.objectId,
+                    size: nextSize,
+                    position: nextPosition,
+                });
+                this.emit(Events.Tool.ResizeEnd, {
+                    object: this.objectId,
+                    oldSize: nextSize,
+                    newSize: nextSize,
+                    oldPosition: nextPosition,
+                    newPosition: nextPosition,
+                });
+                this.emit(Events.Object.TransformUpdated, { objectId: this.objectId });
+                this.emit(Events.Object.Updated, { objectId: this.objectId });
+            }
             this.coreMoodboard.state.markDirty();
         }
         this.emit(Events.Tool.UpdateObjectContent, {

package/src/core/flows/LayerAndViewportFlow.js

@@ -6,6 +6,35 @@ import {
     MoveObjectCommand
 } from '../commands/index.js';
 
+function collectMindmapChildrenByParent(objects) {
+    const childrenByParent = new Map();
+    (Array.isArray(objects) ? objects : []).forEach((obj) => {
+        if (!obj || obj.type !== 'mindmap') return;
+        const meta = obj?.properties?.mindmap || {};
+        if (meta?.role !== 'child' || !meta?.parentId) return;
+        if (!childrenByParent.has(meta.parentId)) childrenByParent.set(meta.parentId, []);
+        childrenByParent.get(meta.parentId).push(obj.id);
+    });
+    return childrenByParent;
+}
+
+function collectMindmapDescendants(childrenByParent, rootId) {
+    const result = [];
+    const queue = [...(childrenByParent.get(rootId) || [])];
+    const seen = new Set();
+    while (queue.length > 0) {
+        const nextId = queue.shift();
+        if (!nextId || seen.has(nextId)) continue;
+        seen.add(nextId);
+        result.push(nextId);
+        const nested = childrenByParent.get(nextId) || [];
+        nested.forEach((id) => {
+            if (!seen.has(id)) queue.push(id);
+        });
+    }
+    return result;
+}
+
 export function setupLayerAndViewportFlow(core) {
     const applyZOrderFromState = () => {
         const arr = core.state.state.objects || [];
@@ -95,6 +124,43 @@ export function setupLayerAndViewportFlow(core) {
     });
 
     core.eventBus.on(Events.Tool.DragStart, (data) => {
+        const objects = core?.state?.state?.objects || [];
+        const byId = new Map((Array.isArray(objects) ? objects : []).map((obj) => [obj?.id, obj]));
+        const dragged = byId.get(data.object);
+        const draggedMeta = dragged?.properties?.mindmap || {};
+        if (dragged?.type === 'mindmap') {
+            const compoundId = (typeof draggedMeta?.compoundId === 'string' && draggedMeta.compoundId.length > 0)
+                ? draggedMeta.compoundId
+                : dragged?.id;
+            const scopeIds = (() => {
+                if (draggedMeta?.role === 'root' || !draggedMeta?.parentId) {
+                    return (Array.isArray(objects) ? objects : [])
+                        .filter((obj) => obj?.type === 'mindmap')
+                        .filter((obj) => (obj?.properties?.mindmap?.compoundId || obj?.id) === compoundId)
+                        .map((obj) => obj.id);
+                }
+                const childrenByParent = collectMindmapChildrenByParent(objects);
+                return [dragged.id, ...collectMindmapDescendants(childrenByParent, dragged.id)];
+            })();
+            const startById = new Map();
+            scopeIds.forEach((id) => {
+                const obj = byId.get(id);
+                if (!obj) return;
+                startById.set(id, {
+                    x: Math.round(obj?.position?.x || 0),
+                    y: Math.round(obj?.position?.y || 0),
+                });
+            });
+            const rootStart = startById.get(dragged.id);
+            core._mindmapLiveDrag = {
+                draggedId: dragged.id,
+                scopeIds,
+                startById,
+                rootStart,
+            };
+        } else {
+            core._mindmapLiveDrag = null;
+        }
         const pixiObject = core.pixi.objects.get(data.object);
         if (pixiObject) {
             const halfW = (pixiObject.width || 0) / 2;
@@ -108,10 +174,6 @@ export function setupLayerAndViewportFlow(core) {
             core.pixi.worldLayer.x += delta.x;
             core.pixi.worldLayer.y += delta.y;
         }
-        if (core.pixi.gridLayer) {
-            core.pixi.gridLayer.x += delta.x;
-            core.pixi.gridLayer.y += delta.y;
-        }
         if (!core.pixi.worldLayer) {
             const stage = core.pixi.app.stage;
             stage.x += delta.x;
@@ -202,15 +264,12 @@ export function setupLayerAndViewportFlow(core) {
             if (!pixiObject) continue;
             const startCenter = core._groupDragStart.get(id) || { x: pixiObject.x, y: pixiObject.y };
             const newCenter = { x: startCenter.x + dx, y: startCenter.y + dy };
-            pixiObject.x = newCenter.x;
-            pixiObject.y = newCenter.y;
-            const obj = core.state.state.objects.find(o => o.id === id);
-            if (obj) {
-                const halfW = (pixiObject.width || 0) / 2;
-                const halfH = (pixiObject.height || 0) / 2;
-                obj.position.x = newCenter.x - halfW;
-                obj.position.y = newCenter.y - halfH;
-            }
+            const halfW = (pixiObject.width || 0) / 2;
+            const halfH = (pixiObject.height || 0) / 2;
+            core.updateObjectPositionDirect(id, {
+                x: newCenter.x - halfW,
+                y: newCenter.y - halfH,
+            }, { snap: false });
         }
         core.state.markDirty();
     });
@@ -235,7 +294,20 @@ export function setupLayerAndViewportFlow(core) {
     });
 
     core.eventBus.on(Events.Tool.DragUpdate, (data) => {
-        core.updateObjectPositionDirect(data.object, data.position);
+        core.updateObjectPositionDirect(data.object, data.position, { snap: false });
+        const ctx = core._mindmapLiveDrag;
+        if (ctx && ctx.draggedId === data.object && ctx.rootStart && ctx.startById instanceof Map) {
+            const dx = Math.round((data?.position?.x || 0) - ctx.rootStart.x);
+            const dy = Math.round((data?.position?.y || 0) - ctx.rootStart.y);
+            (Array.isArray(ctx.scopeIds) ? ctx.scopeIds : []).forEach((id) => {
+                if (id === data.object) return;
+                const start = ctx.startById.get(id);
+                if (!start) return;
+                const nextPos = { x: Math.round(start.x + dx), y: Math.round(start.y + dy) };
+                core.updateObjectPositionDirect(id, nextPos, { snap: false });
+                core.eventBus.emit(Events.Object.TransformUpdated, { objectId: id });
+            });
+        }
     });
 
     core.eventBus.on(Events.Tool.DragEnd, (data) => {
@@ -279,5 +351,6 @@ export function setupLayerAndViewportFlow(core) {
             }
             core.dragStartPosition = null;
         }
+        core._mindmapLiveDrag = null;
     });
 }

package/src/core/flows/ObjectLifecycleFlow.js

@@ -296,9 +296,14 @@ export function setupObjectLifecycleFlow(core) {
     });
 
     core.eventBus.on(Events.Object.ContentChange, (data) => {
-        const { objectId, oldContent, newContent } = data;
+        const { objectId, oldContent, newContent, oldSize, newSize, oldPosition, newPosition } = data;
         if (objectId && oldContent !== undefined && newContent !== undefined && oldContent !== newContent) {
-            const command = new UpdateContentCommand(core, objectId, oldContent, newContent);
+            const command = new UpdateContentCommand(core, objectId, oldContent, newContent, {
+                oldSize,
+                newSize,
+                oldPosition,
+                newPosition,
+            });
             command.setEventBus(core.eventBus);
             core.history.executeCommand(command);
         }

package/src/core/flows/SaveFlow.js

@@ -23,12 +23,15 @@ export function setupSaveFlow(core) {
     });
 
     core.eventBus.on(Events.Save.Success, async () => {
-        try {
-            const result = await core.cleanupUnusedImages();
-            if (result.deletedCount > 0) {
-            }
-        } catch (error) {
-            console.warn('⚠️ Не удалось выполнить автоматическую очистку изображений:', error.message);
-        }
+        // ВРЕМЕННО ОТКЛЮЧЕНО:
+        // cleanup-фича требует доработки контракта и серверной поддержки.
+        // Автоматический вызов удален, чтобы не запускать cleanup после сохранения.
+        // try {
+        //     const result = await core.cleanupUnusedImages();
+        //     if (result.deletedCount > 0) {
+        //     }
+        // } catch (error) {
+        //     console.warn('⚠️ Не удалось выполнить автоматическую очистку изображений:', error.message);
+        // }
     });
 }

package/src/core/flows/TransformFlow.js

@@ -95,7 +95,7 @@ export function setupTransformFlow(core) {
                 height: Math.max(10, snap.size.height * sy)
             };
             const newPos = { x: newCenter.x - newSize.width / 2, y: newCenter.y - newSize.height / 2 };
-            core.updateObjectSizeAndPositionDirect(id, newSize, newPos, snap.type || null);
+            core.updateObjectSizeAndPositionDirect(id, newSize, newPos, snap.type || null, { snap: false });
         }
     });
 
@@ -134,7 +134,7 @@ export function setupTransformFlow(core) {
             position = resolveResizePositionFallback(core, data.object, data.size);
         }
 
-        core.updateObjectSizeAndPositionDirect(data.object, data.size, position, objectType);
+        core.updateObjectSizeAndPositionDirect(data.object, data.size, position, objectType, { snap: false });
     });
 
     core.eventBus.on(Events.Tool.ResizeEnd, (data) => {