@sequent-org/moodboard 1.3.0 → 1.3.3

package/package.json

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

package/src/tools/manager/ToolEventRouter.js

@@ -17,6 +17,85 @@ function rememberCursorPosition(manager, event) {
     manager.eventBus.emit(Events.UI.CursorMove, { x: event.x, y: event.y });
 }
 
+function nowMs() {
+    if (typeof performance !== 'undefined' && typeof performance.now === 'function') {
+        return performance.now();
+    }
+    return Date.now();
+}
+
+function isDropDebugEnabled() {
+    try {
+        if (typeof window === 'undefined') return false;
+        if (window.__MB_DND_DEBUG__ === true) return true;
+        if (window.localStorage && typeof window.localStorage.getItem === 'function') {
+            return window.localStorage.getItem('mb:dnd:debug') === '1';
+        }
+    } catch (_) {}
+    return false;
+}
+
+function createDropDiagnostics() {
+    return {
+        enabled: isDropDebugEnabled(),
+        dropId: `drop-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`,
+        startedAt: nowMs()
+    };
+}
+
+function logDropDebug(diagnostics, stage, payload = {}) {
+    if (!diagnostics?.enabled) return;
+    try {
+        const elapsedMs = Math.round(nowMs() - diagnostics.startedAt);
+        console.debug('[moodboard:dnd]', {
+            dropId: diagnostics.dropId,
+            stage,
+            elapsedMs,
+            ...payload
+        });
+    } catch (_) {}
+}
+
+const DROP_LIMITS = {
+    maxFilesPerDrop: 50,
+    maxFileSizeBytes: 50 * 1024 * 1024
+};
+
+function showDropWarning(manager, message, diagnostics, extra = {}) {
+    logDropDebug(diagnostics, 'drop_warning', { message, ...extra });
+    try {
+        const ws = (typeof window !== 'undefined' && window.moodboard && window.moodboard.workspaceManager)
+            ? window.moodboard.workspaceManager
+            : null;
+        if (ws && typeof ws.showNotification === 'function') {
+            ws.showNotification(message);
+        }
+    } catch (_) {}
+}
+
+async function mapWithConcurrency(items, limit, iterator) {
+    const safeLimit = Math.max(1, Number.isFinite(limit) ? Math.floor(limit) : 1);
+    const results = new Array(items.length);
+    let nextIndex = 0;
+
+    const worker = async () => {
+        while (true) {
+            const currentIndex = nextIndex;
+            nextIndex += 1;
+            if (currentIndex >= items.length) return;
+            results[currentIndex] = await iterator(items[currentIndex], currentIndex);
+        }
+    };
+
+    const workers = [];
+    const workersCount = Math.min(safeLimit, items.length);
+    for (let i = 0; i < workersCount; i += 1) {
+        workers.push(worker());
+    }
+    await Promise.all(workers);
+    return results;
+}
+
 export class ToolEventRouter {
     static handleMouseDown(manager, event) {
         if (!manager.activeTool) return;
@@ -142,6 +221,10 @@ export class ToolEventRouter {
 
     static async handleDrop(manager, event) {
         event.preventDefault();
+        const diagnostics = createDropDiagnostics();
+        manager._dropSessionSeq = (manager._dropSessionSeq || 0) + 1;
+        const dropSession = manager._dropSessionSeq;
+        const isCurrentDrop = () => manager._dropSessionSeq === dropSession;
 
         const rect = manager.container.getBoundingClientRect();
         const x = event.clientX - rect.left;
@@ -150,9 +233,51 @@ export class ToolEventRouter {
         manager.eventBus.emit(Events.UI.CursorMove, { x, y });
 
         const dt = event.dataTransfer;
-        if (!dt) return;
+        if (!dt) {
+            logDropDebug(diagnostics, 'drop_no_data_transfer');
+            return;
+        }
+        logDropDebug(diagnostics, 'drop_received', {
+            localX: Math.round(x),
+            localY: Math.round(y),
+            filesCount: dt.files ? dt.files.length : 0
+        });
+
+        const toWorldPosition = (screenX, screenY) => {
+            const world = manager.core?.pixi?.worldLayer || manager.core?.pixi?.app?.stage;
+            const scale = world?.scale?.x || 1;
+            if (!world) {
+                return { x: Math.round(screenX), y: Math.round(screenY) };
+            }
+            return {
+                x: Math.round((screenX - (world.x || 0)) / scale),
+                y: Math.round((screenY - (world.y || 0)) / scale)
+            };
+        };
+        const getFanOffset = (offsetIndex) => {
+            if (offsetIndex <= 0) return { dx: 0, dy: 0 };
+            const step = 25;
+            const directions = [
+                { x: 1, y: 0 },
+                { x: 1, y: 1 },
+                { x: 0, y: 1 },
+                { x: -1, y: 1 },
+                { x: -1, y: 0 },
+                { x: -1, y: -1 },
+                { x: 0, y: -1 },
+                { x: 1, y: -1 }
+            ];
+            const index = offsetIndex - 1;
+            const direction = directions[index % directions.length];
+            const ring = Math.floor(index / directions.length) + 1;
+            return { dx: direction.x * step * ring, dy: direction.y * step * ring };
+        };
 
         const emitAt = (src, name, imageId = null, offsetIndex = 0) => {
+            if (!isCurrentDrop()) {
+                logDropDebug(diagnostics, 'emit_skipped_stale_drop', { route: 'image', offsetIndex });
+                return;
+            }
             const offset = 25 * offsetIndex;
             manager.eventBus.emit(Events.UI.PasteImageAt, {
                 x: x + offset,
@@ -164,45 +289,123 @@ export class ToolEventRouter {
         };
 
         const files = dt.files ? Array.from(dt.files) : [];
-        const imageFiles = files.filter((file) => file.type && file.type.startsWith('image/'));
+        let limitedFiles = files;
+        if (limitedFiles.length > DROP_LIMITS.maxFilesPerDrop) {
+            showDropWarning(
+                manager,
+                `Обработаны первые ${DROP_LIMITS.maxFilesPerDrop} файлов из ${limitedFiles.length}`,
+                diagnostics,
+                { filesCount: limitedFiles.length, maxFilesPerDrop: DROP_LIMITS.maxFilesPerDrop }
+            );
+            limitedFiles = limitedFiles.slice(0, DROP_LIMITS.maxFilesPerDrop);
+        }
+        const oversized = limitedFiles.filter((file) => (file?.size || 0) > DROP_LIMITS.maxFileSizeBytes);
+        if (oversized.length > 0) {
+            showDropWarning(
+                manager,
+                `Пропущено ${oversized.length} файлов: размер каждого должен быть не более 50 МБ`,
+                diagnostics,
+                { oversizedCount: oversized.length, maxFileSizeBytes: DROP_LIMITS.maxFileSizeBytes }
+            );
+            limitedFiles = limitedFiles.filter((file) => (file?.size || 0) <= DROP_LIMITS.maxFileSizeBytes);
+        }
+
+        const imageFiles = limitedFiles.filter((file) => file.type && file.type.startsWith('image/'));
         if (imageFiles.length > 0) {
-            let index = 0;
-            for (const file of imageFiles) {
+            logDropDebug(diagnostics, 'route_image_files', { count: imageFiles.length });
+            const imagePlacements = await mapWithConcurrency(imageFiles, 2, async (file, index) => {
+                logDropDebug(diagnostics, 'image_upload_start', {
+                    fileName: file.name || 'image',
+                    fileSize: file.size || 0,
+                    mimeType: file.type || null
+                });
                 try {
                     if (manager.core && manager.core.imageUploadService) {
                         const uploadResult = await manager.core.imageUploadService.uploadImage(file, file.name || 'image');
-                        emitAt(uploadResult.url, uploadResult.name, uploadResult.imageId || uploadResult.id, index++);
+                        if (!isCurrentDrop()) {
+                            logDropDebug(diagnostics, 'image_upload_stale_drop_ignored', {
+                                fileName: uploadResult?.name || file.name || 'image'
+                            });
+                            return null;
+                        }
+                        logDropDebug(diagnostics, 'image_upload_success', {
+                            fileName: uploadResult?.name || file.name || 'image',
+                            imageId: uploadResult?.imageId || uploadResult?.id || null
+                        });
+                        return {
+                            src: uploadResult.url,
+                            name: uploadResult.name,
+                            imageId: uploadResult.imageId || uploadResult.id || null,
+                            index
+                        };
                     } else {
-                        await new Promise((resolve) => {
+                        const localSrc = await new Promise((resolve) => {
                             const reader = new FileReader();
                             reader.onload = () => {
-                                emitAt(reader.result, file.name || 'image', null, index++);
-                                resolve();
+                                resolve(reader.result);
                             };
                             reader.readAsDataURL(file);
                         });
+                        if (!isCurrentDrop()) {
+                            logDropDebug(diagnostics, 'image_local_fallback_stale_drop_ignored', {
+                                fileName: file.name || 'image'
+                            });
+                            return null;
+                        }
+                        logDropDebug(diagnostics, 'image_local_fallback_success', {
+                            fileName: file.name || 'image'
+                        });
+                        return {
+                            src: localSrc,
+                            name: file.name || 'image',
+                            imageId: null,
+                            index
+                        };
                     }
                 } catch (error) {
                     console.warn('Ошибка загрузки изображения через drag-and-drop:', error);
-                    await new Promise((resolve) => {
+                    logDropDebug(diagnostics, 'image_upload_error', {
+                        fileName: file.name || 'image',
+                        message: error?.message || String(error)
+                    });
+                    const fallbackSrc = await new Promise((resolve) => {
                         const reader = new FileReader();
                         reader.onload = () => {
-                            emitAt(reader.result, file.name || 'image', null, index++);
-                            resolve();
+                            resolve(reader.result);
                         };
                         reader.readAsDataURL(file);
                     });
+                    if (!isCurrentDrop()) {
+                        logDropDebug(diagnostics, 'image_error_fallback_stale_drop_ignored', {
+                            fileName: file.name || 'image'
+                        });
+                        return null;
+                    }
+                    logDropDebug(diagnostics, 'image_error_fallback_success', {
+                        fileName: file.name || 'image'
+                    });
+                    return {
+                        src: fallbackSrc,
+                        name: file.name || 'image',
+                        imageId: null,
+                        index
+                    };
                 }
+            });
+            for (const placement of imagePlacements) {
+                if (!placement) continue;
+                emitAt(placement.src, placement.name, placement.imageId, placement.index);
             }
+            logDropDebug(diagnostics, 'drop_done', { route: 'image_files', itemsProcessed: imageFiles.length });
             return;
         }
 
-        const nonImageFiles = files.filter((file) => !file.type || !file.type.startsWith('image/'));
+        const nonImageFiles = limitedFiles.filter((file) => !file.type || !file.type.startsWith('image/'));
         if (nonImageFiles.length > 0) {
-            let index = 0;
-            for (const file of nonImageFiles) {
-                const offset = 25 * index++;
-                const position = { x: x + offset, y: y + offset };
+            logDropDebug(diagnostics, 'route_non_image_files', { count: nonImageFiles.length });
+            const filePlacements = await mapWithConcurrency(nonImageFiles, 2, async (file, index) => {
+                const fanOffset = getFanOffset(index);
+                const worldPoint = toWorldPosition(x + fanOffset.dx, y + fanOffset.dy);
                 const fallbackProps = {
                     fileName: file.name || 'file',
                     fileSize: file.size || 0,
@@ -212,13 +415,40 @@ export class ToolEventRouter {
                     width: 120,
                     height: 140
                 };
+                const position = {
+                    x: Math.round(worldPoint.x - fallbackProps.width / 2),
+                    y: Math.round(worldPoint.y - fallbackProps.height / 2)
+                };
+                logDropDebug(diagnostics, 'file_prepare', {
+                    fileName: fallbackProps.fileName,
+                    worldX: worldPoint.x,
+                    worldY: worldPoint.y,
+                    placeX: position.x,
+                    placeY: position.y
+                });
                 try {
                     if (manager.core && manager.core.fileUploadService) {
                         const uploadResult = await manager.core.fileUploadService.uploadFile(file, file.name || 'file');
-                        manager.eventBus.emit(Events.UI.ToolbarAction, {
+                        if (!isCurrentDrop()) {
+                            logDropDebug(diagnostics, 'file_upload_stale_drop_ignored', {
+                                fileName: uploadResult?.name || fallbackProps.fileName
+                            });
+                            return null;
+                        }
+                        const objectWidth = fallbackProps.width;
+                        const objectHeight = fallbackProps.height;
+                        const centeredPosition = {
+                            x: Math.round(worldPoint.x - objectWidth / 2),
+                            y: Math.round(worldPoint.y - objectHeight / 2)
+                        };
+                        logDropDebug(diagnostics, 'file_upload_success', {
+                            fileName: uploadResult?.name || fallbackProps.fileName,
+                            fileId: uploadResult?.fileId || uploadResult?.id || null
+                        });
+                        return {
                             type: 'file',
                             id: 'file',
-                            position,
+                            position: centeredPosition,
                             properties: {
                                 fileName: uploadResult.name,
                                 fileSize: uploadResult.size,
@@ -229,35 +459,65 @@ export class ToolEventRouter {
                                 height: 140
                             },
                             fileId: uploadResult.fileId || uploadResult.id || null
-                        });
+                        };
                     } else {
-                        manager.eventBus.emit(Events.UI.ToolbarAction, {
+                        if (!isCurrentDrop()) {
+                            logDropDebug(diagnostics, 'file_local_fallback_stale_drop_ignored', {
+                                fileName: fallbackProps.fileName
+                            });
+                            return null;
+                        }
+                        logDropDebug(diagnostics, 'file_local_fallback_success', {
+                            fileName: fallbackProps.fileName
+                        });
+                        return {
                             type: 'file',
                             id: 'file',
                             position,
                             properties: fallbackProps
-                        });
+                        };
                     }
                 } catch (error) {
                     console.warn('Ошибка загрузки файла через drag-and-drop:', error);
-                    manager.eventBus.emit(Events.UI.ToolbarAction, {
+                    logDropDebug(diagnostics, 'file_upload_error', {
+                        fileName: fallbackProps.fileName,
+                        message: error?.message || String(error)
+                    });
+                    if (!isCurrentDrop()) {
+                        logDropDebug(diagnostics, 'file_error_fallback_stale_drop_ignored', {
+                            fileName: fallbackProps.fileName
+                        });
+                        return null;
+                    }
+                    logDropDebug(diagnostics, 'file_error_fallback_success', {
+                        fileName: fallbackProps.fileName
+                    });
+                    return {
                         type: 'file',
                         id: 'file',
                         position,
                         properties: fallbackProps
-                    });
+                    };
                 }
+            });
+            for (const actionPayload of filePlacements) {
+                if (!actionPayload) continue;
+                if (!isCurrentDrop()) break;
+                manager.eventBus.emit(Events.UI.ToolbarAction, actionPayload);
             }
+            logDropDebug(diagnostics, 'drop_done', { route: 'non_image_files', itemsProcessed: nonImageFiles.length });
             return;
         }
 
         const html = dt.getData('text/html');
         if (html && html.includes('<img')) {
+            logDropDebug(diagnostics, 'route_html_image');
             const match = html.match(/<img[^>]*src\s*=\s*"([^"]+)"/i);
             if (match && match[1]) {
                 const url = match[1];
                 if (/^data:image\//i.test(url)) {
                     emitAt(url, 'clipboard-image.png');
+                    logDropDebug(diagnostics, 'drop_done', { route: 'html_data_image' });
                     return;
                 }
                 if (/^https?:\/\//i.test(url)) {
@@ -270,8 +530,10 @@ export class ToolEventRouter {
                             reader.readAsDataURL(blob);
                         });
                         emitAt(dataUrl, url.split('/').pop() || 'image');
+                        logDropDebug(diagnostics, 'drop_done', { route: 'html_http_image_fetched' });
                     } catch (_) {
                         emitAt(url, url.split('/').pop() || 'image');
+                        logDropDebug(diagnostics, 'drop_done', { route: 'html_http_image_direct' });
                     }
                     return;
                 }
@@ -280,6 +542,7 @@ export class ToolEventRouter {
 
         const uriList = dt.getData('text/uri-list') || '';
         if (uriList) {
+            logDropDebug(diagnostics, 'route_uri_list');
             const lines = uriList.split('\n').filter((line) => !!line && !line.startsWith('#'));
             const urls = lines.filter((line) => /^https?:\/\//i.test(line));
             let index = 0;
@@ -299,17 +562,22 @@ export class ToolEventRouter {
                     emitAt(url, url.split('/').pop() || 'image', index++);
                 }
             }
-            if (index > 0) return;
+            if (index > 0) {
+                logDropDebug(diagnostics, 'drop_done', { route: 'uri_list_images', itemsProcessed: index });
+                return;
+            }
         }
 
         const text = dt.getData('text/plain') || '';
         if (text) {
+            logDropDebug(diagnostics, 'route_text_plain');
             const trimmed = text.trim();
             const isDataUrl = /^data:image\//i.test(trimmed);
             const isHttpUrl = /^https?:\/\//i.test(trimmed);
             const looksLikeImage = /(png|jpe?g|gif|webp|bmp|svg)(\?.*)?$/i.test(trimmed);
             if (isDataUrl) {
                 emitAt(trimmed, 'clipboard-image.png');
+                logDropDebug(diagnostics, 'drop_done', { route: 'text_data_image' });
                 return;
             }
             if (isHttpUrl && looksLikeImage) {
@@ -322,11 +590,14 @@ export class ToolEventRouter {
                         reader.readAsDataURL(blob);
                     });
                     emitAt(dataUrl, trimmed.split('/').pop() || 'image');
+                    logDropDebug(diagnostics, 'drop_done', { route: 'text_http_image_fetched' });
                 } catch (_) {
                     emitAt(trimmed, trimmed.split('/').pop() || 'image');
+                    logDropDebug(diagnostics, 'drop_done', { route: 'text_http_image_direct' });
                 }
             }
         }
+        logDropDebug(diagnostics, 'drop_done', { route: 'no_supported_payload' });
     }
 
     static handleKeyDown(manager, event) {

package/src/ui/Toolbar.js

@@ -46,7 +46,13 @@ export class Toolbar {
             console.error('❌ Ошибка загрузки иконок:', error);
         }
 
-        this._toolActivatedHandler = ({ tool }) => this.setActiveToolbarButton(tool);
+        this._toolActivatedHandler = ({ tool }) => {
+            this.setActiveToolbarButton(tool);
+            // Draw palette must stay open only while draw tool is active.
+            if (tool !== 'draw') {
+                this.closeDrawPopup();
+            }
+        };
         this.createToolbar();
         this.attachEvents();
         this.setupHistoryEvents();
@@ -133,9 +139,13 @@ export class Toolbar {
             const isDrawButton = e.target.closest && e.target.closest('.moodboard-toolbar__button--pencil');
             const isEmojiButton = e.target.closest && e.target.closest('.moodboard-toolbar__button--emoji');
             const isFrameButton = e.target.closest && e.target.closest('.moodboard-toolbar__button--frame');
+            const isDrawActive = !!(this.element && this.element.querySelector('.moodboard-toolbar__button--pencil.moodboard-toolbar__button--active'));
+
             if (!isInsideToolbar && !isInsideShapesPopup && !isShapesButton && !isInsideDrawPopup && !isDrawButton && !isInsideEmojiPopup && !isEmojiButton && !isInsideFramePopup && !isFrameButton) {
                 this.closeShapesPopup();
-                this.closeDrawPopup();
+                if (!isDrawActive) {
+                    this.closeDrawPopup();
+                }
                 this.closeEmojiPopup();
                 this.closeFramePopup();
             }

package/src/ui/toolbar/ToolbarPopupsController.js

@@ -232,6 +232,9 @@ export class ToolbarPopupsController {
         const row2 = document.createElement('div');
         row2.className = 'moodboard-draw__row';
         this.toolbar.drawRow2 = row2;
+        const clearActivePresetButtons = () => {
+            row2.querySelectorAll('.moodboard-draw__btn--active').forEach((el) => el.classList.remove('moodboard-draw__btn--active'));
+        };
 
         const pencilPresetEl = document.createElement('div');
         pencilPresetEl.className = 'moodboard-draw__row';
@@ -267,7 +270,7 @@ export class ToolbarPopupsController {
             btn.appendChild(holder);
             btn.addEventListener('click', () => {
                 this.toolbar.animateButton(btn);
-                pencilPresetEl.querySelectorAll('.moodboard-draw__btn--active').forEach((el) => el.classList.remove('moodboard-draw__btn--active'));
+                clearActivePresetButtons();
                 btn.classList.add('moodboard-draw__btn--active');
                 const width = s.width;
                 const color = parseInt(s.color.replace('#', ''), 16);
@@ -291,7 +294,7 @@ export class ToolbarPopupsController {
             btn.appendChild(sw);
             btn.addEventListener('click', () => {
                 this.toolbar.animateButton(btn);
-                markerPresetEl.querySelectorAll('.moodboard-draw__btn--active').forEach((el) => el.classList.remove('moodboard-draw__btn--active'));
+                clearActivePresetButtons();
                 btn.classList.add('moodboard-draw__btn--active');
                 const color = parseInt(s.color.replace('#', ''), 16);
                 this.toolbar.eventBus.emit(Events.Draw.BrushSet, { mode: 'marker', color, width: 8 });