@sequent-org/moodboard 1.2.30 → 1.2.35

package/package.json

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

package/src/core/ApiClient.js

@@ -45,22 +45,6 @@ export class ApiClient {
             // Фильтруем объекты изображений и файлов - убираем избыточные данные
             const cleanedData = this._cleanObjectData(boardData);
 
-            // Диагностика размеров изображений перед отправкой
-            try {
-                const images = Array.isArray(cleanedData?.objects)
-                    ? cleanedData.objects.filter(o => o && o.type === 'image')
-                    : [];
-                images.forEach((o) => {
-                    console.log('🧪 SAVE image size', {
-                        id: o.id,
-                        width: o.width,
-                        height: o.height,
-                        propWidth: o.properties?.width,
-                        propHeight: o.properties?.height
-                    });
-                });
-            } catch (_) {}
-
             const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
 
             const response = await fetch('/api/moodboard/save', {

package/src/core/SaveManager.js

@@ -157,41 +157,6 @@ export class SaveManager {
                     data: saveData,
                     timestamp: new Date().toISOString()
                 });
-
-                // Диагностика: по флагу проверяем, что сервер отдает те же размеры на чтение
-                try {
-                    if (typeof window !== 'undefined' && window.MOODBOARD_DEBUG_VERIFY_LOAD === true) {
-                        const boardId = saveData?.id;
-                        if (boardId) {
-                            const verifyUrl = `${this.options.loadEndpoint}/${boardId}`;
-                            const resp = await fetch(verifyUrl, {
-                                method: 'GET',
-                                headers: {
-                                    'Accept': 'application/json',
-                                    'X-Requested-With': 'XMLHttpRequest'
-                                }
-                            });
-                            if (resp.ok) {
-                                const result = await resp.json();
-                                const data = result?.data || result;
-                                const imgs = Array.isArray(data?.objects) ? data.objects.filter(o => o && o.type === 'image') : [];
-                                imgs.forEach((o) => {
-                                    console.log('🧪 VERIFY LOAD after save image size', {
-                                        id: o.id,
-                                        width: o.width,
-                                        height: o.height,
-                                        propWidth: o.properties?.width,
-                                        propHeight: o.properties?.height
-                                    });
-                                });
-                            } else {
-                                console.warn('⚠️ VERIFY LOAD failed:', resp.status, resp.statusText);
-                            }
-                        }
-                    }
-                } catch (e) {
-                    console.warn('⚠️ VERIFY LOAD exception:', e?.message || e);
-                }
             } else {
                 throw new Error(response.message || 'Ошибка сохранения');
             }

package/src/core/index.js

@@ -1067,80 +1067,84 @@ export class CoreMoodBoard {
             const object = objects.find(obj => obj.id === data.object);
             const objectType = object ? object.type : null;
 
-            // Сохраняем пропорции для фреймов, кроме произвольных (lockedAspect=false)
-            if ((objectType === 'frame' || (objectType === 'image' && object?.properties?.isEmojiIcon)) && data.size) {
-                const lockedAspect = !!(object?.properties && (object.properties.lockedAspect === true));
+            // Сохраняем пропорции:
+            // - всегда для изображений (включая эмоджи-иконки, которые квадратные)
+            // - для фреймов только если lockedAspect=true
+            if (data.size && (objectType === 'image' || objectType === 'frame')) {
                 const isEmoji = (objectType === 'image' && object?.properties?.isEmojiIcon);
-                if (!lockedAspect && !isEmoji) {
-                    // произвольные фреймы — без ограничений
-                } else {
-                const start = this._activeResize?.startSize || { width: object.width, height: object.height };
-                const aspect = isEmoji ? 1 : ((start.width > 0 && start.height > 0) ? (start.width / start.height) : (object.width / Math.max(1, object.height)));
-                let w = Math.max(1, data.size.width);
-                let h = Math.max(1, data.size.height);
-                const hndl = (this._activeResize?.handle || '').toLowerCase();
-                if (isEmoji) {
-                    // Делаем квадрат, фиксируя противоположную сторону к старту
-                    const s = Math.max(w, h);
-                    // Вычислим позицию сразу, чтобы не было дрейфа правой/нижней границы
+                const isImage = (objectType === 'image');
+                const lockedAspect = objectType === 'frame'
+                    ? !!(object?.properties && object.properties.lockedAspect === true)
+                    : true; // для изображений всегда держим аспект
+
+                if (lockedAspect || isImage || isEmoji) {
+                    const start = this._activeResize?.startSize || { width: object.width, height: object.height };
+                    const startW = Math.max(1, start.width);
+                    const startH = Math.max(1, start.height);
+                    const aspect = isEmoji ? 1 : (startW / startH);
+
+                    let w = Math.max(1, data.size.width);
+                    let h = Math.max(1, data.size.height);
+                    const hndl = (this._activeResize?.handle || '').toLowerCase();
+
+                    if (isEmoji) {
+                        // Квадрат
+                        const s = Math.max(w, h);
+                        if (!data.position && this._activeResize && this._activeResize.objectId === data.object) {
+                            const startPos = this._activeResize.startPosition;
+                            const sw = this._activeResize.startSize.width;
+                            const sh = this._activeResize.startSize.height;
+                            let x = startPos.x;
+                            let y = startPos.y;
+                            if (hndl.includes('w')) { x = startPos.x + (sw - s); }
+                            if (hndl.includes('n')) { y = startPos.y + (sh - s); }
+                            const isEdge = ['n','s','e','w'].includes(hndl);
+                            if (isEdge) {
+                                if (hndl === 'n' || hndl === 's') x = startPos.x + Math.round((sw - s) / 2);
+                                if (hndl === 'e' || hndl === 'w') y = startPos.y + Math.round((sh - s) / 2);
+                            }
+                            data.position = { x: Math.round(x), y: Math.round(y) };
+                        }
+                        w = s; h = s;
+                    } else {
+                        // Поддержка аспекта (для images всегда; для frames — если lockedAspect)
+                        const dw = Math.abs(w - startW);
+                        const dh = Math.abs(h - startH);
+                        if (dw >= dh) { h = Math.round(w / aspect); } else { w = Math.round(h * aspect); }
+                    }
+
+                    // Минимальная площадь — только для фреймов (как раньше)
+                    if (objectType === 'frame') {
+                        const minArea = 1800;
+                        const area = Math.max(1, w * h);
+                        if (area < minArea) {
+                            const scale = Math.sqrt(minArea / area);
+                            w = Math.round(w * scale);
+                            h = Math.round(h * scale);
+                        }
+                    }
+
+                    data.size = { width: w, height: h };
+
+                    // Компенсация позиции по зафиксированной стороне
                     if (!data.position && this._activeResize && this._activeResize.objectId === data.object) {
                         const startPos = this._activeResize.startPosition;
                         const sw = this._activeResize.startSize.width;
                         const sh = this._activeResize.startSize.height;
                         let x = startPos.x;
                         let y = startPos.y;
-                        if (hndl.includes('w')) { x = startPos.x + (sw - s); }
-                        if (hndl.includes('n')) { y = startPos.y + (sh - s); }
+                        if (hndl.includes('w')) { x = startPos.x + (sw - data.size.width); }
+                        if (hndl.includes('n')) { y = startPos.y + (sh - data.size.height); }
                         const isEdge = ['n','s','e','w'].includes(hndl);
                         if (isEdge) {
-                            if (hndl === 'n' || hndl === 's') x = startPos.x + Math.round((sw - s) / 2);
-                            if (hndl === 'e' || hndl === 'w') y = startPos.y + Math.round((sh - s) / 2);
+                            if (hndl === 'n' || hndl === 's') {
+                                x = startPos.x + Math.round((sw - data.size.width) / 2);
+                            } else if (hndl === 'e' || hndl === 'w') {
+                                y = startPos.y + Math.round((sh - data.size.height) / 2);
+                            }
                         }
                         data.position = { x: Math.round(x), y: Math.round(y) };
                     }
-                    w = s; h = s;
-                } else {
-                    // Обычная поддержка аспекта для фреймов
-                    const dw = Math.abs(w - start.width);
-                    const dh = Math.abs(h - start.height);
-                    if (dw >= dh) { h = Math.round(w / aspect); } else { w = Math.round(h * aspect); }
-                }
-                 // Минимальная площадь — только для фреймов
-                 if (!isEmoji) {
-                     const minArea = 1800;
-                     const area = Math.max(1, w * h);
-                     if (area < minArea) {
-                         const scale = Math.sqrt(minArea / area);
-                         w = Math.round(w * scale);
-                         h = Math.round(h * scale);
-                     }
-                 }
-                 data.size = { width: w, height: h };
-
-                // Если позиция известна (фиксированная противоположная сторона) — откорректируем её
-                if (!data.position && this._activeResize && this._activeResize.objectId === data.object) {
-                    const hndl = (this._activeResize.handle || '').toLowerCase();
-                    const startPos = this._activeResize.startPosition;
-                    const sw = this._activeResize.startSize.width;
-                    const sh = this._activeResize.startSize.height;
-                    let x = startPos.x;
-                    let y = startPos.y;
-                    // Базовая привязка противоположной стороны
-                    if (hndl.includes('w')) { x = startPos.x + (sw - w); }
-                    if (hndl.includes('n')) { y = startPos.y + (sh - h); }
-                    // Симметрическая компенсация по перпендикулярной оси для edge-хэндлов
-                    const isEdge = ['n','s','e','w'].includes(hndl);
-                    if (isEdge) {
-                        if (hndl === 'n' || hndl === 's') {
-                            // Вверх/вниз: верх или низ фиксируется, ширина меняется симметрично относительно центра
-                            x = startPos.x + Math.round((sw - w) / 2);
-                        } else if (hndl === 'e' || hndl === 'w') {
-                            // Вправо/влево: левая или правая фиксируется, высота меняется симметрично относительно центра
-                            y = startPos.y + Math.round((sh - h) / 2);
-                        }
-                    }
-                    data.position = { x: Math.round(x), y: Math.round(y) };
-                }
                 }
             }
 
@@ -1185,8 +1189,8 @@ export class CoreMoodBoard {
                 // Принудительно сохраняем пропорции для фреймов (если lockedAspect=true)
                 const objects = this.state.getObjects();
                 const object = objects.find(obj => obj.id === data.object);
-                const objectType = object ? object.type : null;
-                if (objectType === 'frame' && !!(object?.properties && object.properties.lockedAspect === true)) {
+                const objectType = object ? object : null;
+                if (object && object.type === 'frame' && object.properties && object.properties.lockedAspect === true) {
                     const start = this._activeResize?.startSize || { width: object.width, height: object.height };
                     const aspect = (start.width > 0 && start.height > 0) ? (start.width / start.height) : (object.width / Math.max(1, object.height));
                     let w = Math.max(1, data.newSize.width);
@@ -1194,7 +1198,7 @@ export class CoreMoodBoard {
                     const dw = Math.abs(w - start.width);
                     const dh = Math.abs(h - start.height);
                     if (dw >= dh) { h = Math.round(w / aspect); } else { w = Math.round(h * aspect); }
-                    // Минимальная площадь фрейма ~1800px²
+                    // Минимальная площадь фрейма ~х2 по сторонам
                     const minArea = 1800;
                     const area = Math.max(1, w * h);
                     if (area < minArea) {
@@ -1204,7 +1208,7 @@ export class CoreMoodBoard {
                     }
                     data.newSize = { width: w, height: h };
                     if (!data.newPosition && this._activeResize && this._activeResize.objectId === data.object) {
-                        const hndl = (this._activeResize.handle || '').toLowerCase();
+                        const hndl = (this._activeResize?.full || this._activeResize?.handle || '').toLowerCase();
                         const startPos = this._activeResize.startPosition;
                         const sw = this._activeResize.startSize.width;
                         const sh = this._activeResize.startSize.height;
@@ -1212,19 +1216,45 @@ export class CoreMoodBoard {
                         let y = startPos.y;
                         if (hndl.includes('w')) { x = startPos.x + (sw - w); }
                         if (hndl.includes('n')) { y = startPos.y + (sh - h); }
-                        const isEdge = ['n','s','e','w'].includes(hnl = hndl);
+                        const isEdge = ['n','s','e','w'].includes(hndl);
                         if (isEdge) {
-                            if (hnl === 'n' || hnl === 's') {
-                                x = startPos.x + Math.round((sw - w) / 2);
-                            } else if (hnl === 'e' || hnl === 'w') {
-                                y = startPos.y + Math.round((sh - h) / 2);
-                            }
+                            if (hndl === 'n' || hndl === 's') x = Math.round(startPos.x + (sw - w) / 2);
+                            if (hndl === 'e' || hndl === 'w') y = Math.round(startPos.y + (sh - h) / 2);
                         }
                         data.newPosition = { x: Math.round(x), y: Math.round(y) };
                     }
+                } else if (object && object.type === 'image') {
+                    // Для изображений всегда фиксируем исходное соотношение сторон
+                    const start = this._activeResize?.startSize || { width: object.width, height: object.height };
+                    const startW = Math.max(1, start.width);
+                    const startH = Math.max(1, start.height);
+                    const aspect = startW / startH;
+                    let w = Math.max(1, data.newSize.width);
+                    let h = Math.max(1, data.newSize.height);
+                    const dw = Math.abs(w - startW);
+                    const dh = Math.abs(h - startH);
+                    if (dw >= dh) { h = Math.round(w / aspect); } else { w = Math.round(h * aspect); }
+                    data.newSize = { width: w, height: h };
+                    if (!data.newPosition && this._activeResize && this._activeResize.objectId === data.object) {
+                        const hndl = (this.extent?.handle || this._activeResize?.handle || '').match ? (this._activeResize?.handle || '') : '';
+                        const handle = (this._activeResize?.handle || '').toString().toLowerCase();
+                        const startPos = this._activeResize.startPosition || { x: 0, y: 0 };
+                        const sw = this._activeResize.startSize?.width || startW;
+                        const sh = this._activeResize.startSize?.height || startH;
+                        let x = startPos.x;
+                        let y = startPos.y;
+                        if (handle.includes('w')) { x = startPos.x + (sw - w); }
+                        if (handle.includes('n')) { y = startPos.y + (sh - h); }
+                        const edge = ['n','s','e','w'].includes(handle);
+                        if (edge) {
+                            if (handle === 'n' || handle === 's') x = Math.round(startPos.x + (sw - w) / 2);
+                            if (handle === 'e' || handle === 'w') y = Math.round(startPos.y + (sh - h) / 2);
+                        }
+                        data.newPosition = { x: Math.floor(x), y: Math.floor(y) };
+                    }
                 }
                 // Для произвольных фреймов также обеспечим минимальную площадь
-                if (objectType === 'frame' && data.newSize && !(object?.properties && object.properties.lockedAspect === true)) {
+                if (object && object.type === 'frame' && data.newSize && !(object.properties && object.properties === true)) {
                     const minArea = 1800;
                     const w0 = Math.max(1, data.newSize.width);
                     const h0 = Math.max(1, data.newSize.height);
@@ -1235,22 +1265,20 @@ export class CoreMoodBoard {
                         const h = Math.round(h0 * scale);
                         data.newSize = { width: w, height: h };
                         if (!data.newPosition && this._activeResize && this._activeResize.objectId === data.object) {
-                            const hndl2 = (this._activeResize.handle || '').toLowerCase();
-                            const startPos2 = this._activeResize.startPosition;
+                            const h2 = (this._activeResize?.handle || '').toLowerCase();
+                            const sPos2 = this._activeResize.startPosition;
                             const sw2 = this._activeResize.startSize.width;
                             const sh2 = this._activeResize.startSize.height;
-                            let x2 = startPos2.x;
-                            let y2 = startPos2.y;
-                            if (hndl2.includes('w')) { x2 = startPos2.x + (sw2 - w); }
-                            if (hndl2.includes('n')) { y2 = startPos2.y + (sh2 - h); }
+                            let x2 = sPos2.x;
+                            let y2 = sPos2.y;
+                            if (h2.includes('w')) { x2 = sPos2.x + (sw2 - w); }
+                            if (h2.includes('n')) { y2 = sPos2.y + (sh2 - h); }
                             data.newPosition = { x: Math.round(x2), y: Math.round(y2) };
                         }
                     }
                 }
                 // Создаем команду только если размер действительно изменился
-                if (data.oldSize.width !== data.newSize.width || 
-                    data.oldSize.height !== data.newSize.height) {
-                    
+                if (data.oldSize.width !== data.newSize.width || data.oldSize.height !== data.newSize.height) {
                     console.log(`📝 Создаем ResizeObjectCommand:`, {
                         object: data.object,
                         oldSize: data.oldSize,
@@ -1258,14 +1286,13 @@ export class CoreMoodBoard {
                         oldPosition: data.oldPosition,
                         newPosition: data.newPosition
                     });
-                    
                     // Гарантируем согласованность позиции: если UI не передал, вычислим
                     let oldPos = data.oldPosition;
                     let newPos = data.newPosition;
                     if ((!oldPos || !newPos) && this._activeResize && this._activeResize.objectId === data.object) {
-                        const h = (this._activeResize.handle || '').toLowerCase();
+                        const h = (this._activeResize?.handle || '').toLowerCase();
                         const start = this._activeResize.startPosition;
-                        const startSize = this._activeResize.startSize;
+                        const startSize = this.optimization?.startSize || this._activeResize.startSize;
                         const dw = (data.newSize?.width || startSize.width) - startSize.width;
                         const dh = (data.newSize?.height || startSize.height) - startSize.height;
                         const calcNew = { x: start.x + (h.includes('w') ? dw : 0), y: start.y + (h.includes('n') ? dh : 0) };
@@ -1273,6 +1300,7 @@ export class CoreMoodBoard {
                         if (!newPos) newPos = calcNew;
                     }
                     const command = new ResizeObjectCommand(
+                        this, 
                         this, 
                         data.object, 
                         data.oldSize, 

package/src/moodboard/DataManager.js

@@ -9,18 +9,10 @@ export class DataManager {
     /**
      * Загружает данные в MoodBoard
      */
-    async loadData(data) {
+    loadData(data) {
         if (!data) return;
         
-        // Восстанавливаем отсутствующие URL изображений по imageId перед созданием объектов
-        try {
-            const apiClient = this.coreMoodboard?.apiClient;
-            if (apiClient && typeof apiClient.restoreObjectUrls === 'function') {
-                data = await apiClient.restoreObjectUrls(data);
-            }
-        } catch (e) {
-            console.warn('⚠️ Не удалось восстановить URL изображений по imageId:', e?.message || e);
-        }
+
         
         // Очищаем доску перед загрузкой
         this.clearBoard();
@@ -31,19 +23,6 @@ export class DataManager {
             
             data.objects.forEach((objectData, index) => {
                 try {
-                    // Диагностика размеров изображений на загрузке до создания
-                    if (objectData && objectData.type === 'image') {
-                        try {
-                            console.log('🧪 LOAD image size (before create)', {
-                                id: objectData.id,
-                                width: objectData.width,
-                                height: objectData.height,
-                                propWidth: objectData.properties?.width,
-                                propHeight: objectData.properties?.height
-                            });
-                        } catch (_) {}
-                    }
-
                     // Используем полные данные объекта, включая ID
                     const createdObject = this.coreMoodboard.createObjectFromData(objectData);
 

package/src/moodboard/MoodBoard.js

@@ -344,7 +344,7 @@ export class MoodBoard {
             
             if (!boardId || !this.options.apiUrl) {
                 console.log('📦 MoodBoard: нет boardId или apiUrl, загружаем пустую доску');
-                await this.dataManager.loadData(this.data || { objects: [] });
+                this.dataManager.loadData(this.data || { objects: [] });
                 
                 // Вызываем коллбек onLoad
                 if (typeof this.options.onLoad === 'function') {
@@ -374,25 +374,10 @@ export class MoodBoard {
             }
             
             const boardData = await response.json();
-
-            // Диагностика: лог размеров изображений прямо из ответа API до любой обработки
-            try {
-                const objects = (boardData && boardData.data && Array.isArray(boardData.data.objects)) ? boardData.data.objects : [];
-                const images = objects.filter(o => o && o.type === 'image');
-                images.forEach((o) => {
-                    console.log('🧪 API LOAD payload image size', {
-                        id: o.id,
-                        width: o.width,
-                        height: o.height,
-                        propWidth: o.properties?.width,
-                        propHeight: o.properties?.height
-                    });
-                });
-            } catch (_) {}
             
             if (boardData && boardData.data) {
                 console.log('✅ MoodBoard: данные загружены с сервера', boardData.data);
-                await this.dataManager.loadData(boardData.data);
+                this.dataManager.loadData(boardData.data);
                 
                 // Вызываем коллбек onLoad
                 if (typeof this.options.onLoad === 'function') {
@@ -400,7 +385,7 @@ export class MoodBoard {
                 }
             } else {
                 console.log('📦 MoodBoard: нет данных с сервера, загружаем пустую доску');
-                await this.dataManager.loadData(this.data || { objects: [] });
+                this.dataManager.loadData(this.data || { objects: [] });
                 
                 // Вызываем коллбек onLoad
                 if (typeof this.options.onLoad === 'function') {