@sequent-org/moodboard 1.2.71 → 1.2.73

package/package.json

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

package/src/core/index.js

@@ -574,6 +574,13 @@ export class CoreMoodBoard {
                 stage.x += delta.x;
                 stage.y += delta.y;
             }
+            // Сообщаем системе об обновлении позиции мира для автосохранения
+            try {
+                const world = this.pixi.worldLayer || this.pixi.app.stage;
+                this.eventBus.emit(Events.Grid.BoardDataChanged, {
+                    settings: { pan: { x: world.x || 0, y: world.y || 0 } }
+                });
+            } catch (_) {}
         });
 
         // Миникарта перенесена в BoardService
@@ -2167,6 +2174,10 @@ export class CoreMoodBoard {
         };
         const world = this.pixi?.worldLayer || app?.stage;
         const currentZoom = Math.max(0.1, Math.min(5, world?.scale?.x || 1));
+        const currentPan = {
+            x: (world?.x ?? 0),
+            y: (world?.y ?? 0)
+        };
         const canvasW = app?.view?.clientWidth || app?.view?.width || 0;
         const canvasH = app?.view?.clientHeight || app?.view?.height || 0;
 
@@ -2191,6 +2202,7 @@ export class CoreMoodBoard {
             backgroundColor: toHex(rendererBg ?? 0xF5F5F5),
             grid: gridSettings || undefined,
             zoom: { min: 0.1, max: 5.0, default: 1.0, current: currentZoom },
+            pan: currentPan,
             canvas: { width: canvasW, height: canvasH }
         };
 

package/src/objects/FileObject.js

@@ -175,7 +175,9 @@ export class FileObject {
         
         // Иконка файла в верхней части
         const iconSize = Math.min(48, w * 0.4);
-        const iconX = (w - iconSize) / 2;
+        // Центрируем фактическую ширину иконки (она рисуется как 80% от size)
+        const iconWidthDrawn = iconSize * 0.8;
+        const iconX = (w - iconWidthDrawn) / 2;
         const iconY = 16;
         
         // Определяем цвет иконки по расширению файла
@@ -236,21 +238,55 @@ export class FileObject {
 
     _updateTextPosition() {
         if (!this.fileNameText) return;
-        
-        // Обновляем стиль текста
-        this.fileNameText.style.wordWrapWidth = this.width - 8;
+
+        // Обновляем стиль текста (ограничиваем по подложке и переносим слова)
+        this.fileNameText.style.wordWrap = true;
+        this.fileNameText.style.wordWrapWidth = Math.max(1, this.width - 16);
         this.fileNameText.updateText();
-        
-        // Позиционируем название файла
+
+        // Параметры иконки и отступов
+        const iconSize = Math.min(48, this.width * 0.4);
+        const iconY = 16;
+        const gapName = 8;       // расстояние между иконкой и названием (уменьшено в 2 раза)
+        const gapSize = 6;       // расстояние между названием и размером
+        const bottomPad = 10;    // нижний внутренний отступ подложки
+
+        // Позиционируем название файла непосредственно под иконкой и по центру
         this.fileNameText.anchor.set(0.5, 0);
         this.fileNameText.x = this.width / 2;
-        this.fileNameText.y = this.height - 40;
-        
-        // Позиционируем размер файла
+        this.fileNameText.y = iconY + iconSize + gapName;
+
+        // Позиционируем размер файла под названием
         if (this.fileSizeText) {
             this.fileSizeText.anchor.set(0.5, 0);
             this.fileSizeText.x = this.width / 2;
-            this.fileSizeText.y = this.height - 20;
+            this.fileSizeText.y = this.fileNameText.y + this.fileNameText.height + gapSize;
+        }
+
+        // Адаптивная высота подложки: не даём текстам выходить за пределы
+        const contentBottom = this.fileSizeText
+            ? (this.fileSizeText.y + this.fileSizeText.height)
+            : (this.fileNameText.y + this.fileNameText.height);
+        const requiredHeight = Math.ceil(contentBottom + bottomPad);
+        if (requiredHeight > this.height) {
+            const previous = this.height;
+            this.height = requiredHeight;
+            // Перерисовываем фон и иконку под новую высоту
+            this._redraw();
+            // Повторно позиционируем тексты (одноразово)
+            if (this.height !== previous) {
+                // Предотвращаем возможную рекурсию: вторая установка не должна дальше менять высоту
+                this.fileNameText.style.wordWrapWidth = Math.max(1, this.width - 16);
+                this.fileNameText.updateText();
+                this.fileNameText.anchor.set(0.5, 0);
+                this.fileNameText.x = this.width / 2;
+                this.fileNameText.y = iconY + iconSize + gapName;
+                if (this.fileSizeText) {
+                    this.fileSizeText.anchor.set(0.5, 0);
+                    this.fileSizeText.x = this.width / 2;
+                    this.fileSizeText.y = this.fileNameText.y + this.fileNameText.height + gapSize;
+                }
+            }
         }
     }
 

package/src/services/SettingsApplier.js

@@ -70,6 +70,16 @@ export class SettingsApplier {
                 try { this.eventBus.emit(Events.UI.ZoomPercent, { percentage: Math.round(z * 100) }); } catch (_) {}
             }
         }
+
+        // 4) Панорамирование (позиция мира)
+        if (s.pan && typeof s.pan.x === 'number' && typeof s.pan.y === 'number') {
+            const world = this.pixi?.worldLayer || this.pixi?.app?.stage;
+            if (world) {
+                world.x = s.pan.x;
+                world.y = s.pan.y;
+                // Обновление зависимых слоёв/панелей выполняется по их событиям; здесь только применяем позицию
+            }
+        }
     }
 
     _toIntColor(hexOrInt) {

package/src/tools/object-tools/PlacementTool.js

@@ -592,28 +592,30 @@ export class PlacementTool extends BaseTool {
         background.drawRect(0, 0, width, height);
         background.endFill();
 
-        // Иконка-заглушка файла наверху
+        // Иконка-заглушка файла наверху (центрируем фактическую ширину)
         const icon = new PIXI.Graphics();
         const iconSize = Math.min(48, width * 0.4);
-        const iconX = (width - iconSize) / 2;
+        const iconWidthDrawn = iconSize * 0.8;
+        const iconX = (width - iconWidthDrawn) / 2;
         const iconY = 16;
         icon.beginFill(0x6B7280, 1);
-        icon.drawRect(iconX, iconY, iconSize * 0.8, iconSize);
+        icon.drawRect(iconX, iconY, iconWidthDrawn, iconSize);
         icon.endFill();
 
         // Текст названия файла
         const fileName = this.selectedFile.fileName || 'File';
-        const displayName = fileName.length > 15 ? fileName.substring(0, 12) + '...' : fileName;
+        const displayName = fileName;
         const nameText = new PIXI.Text(displayName, {
             fontFamily: 'system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif',
             fontSize: 12,
             fill: 0x333333,
             align: 'center',
             wordWrap: true,
-            wordWrapWidth: width - 8
+            wordWrapWidth: Math.max(1, width - 16)
         });
-        nameText.x = (width - nameText.width) / 2;
-        nameText.y = height - 40;
+        nameText.anchor.set(0.5, 0);
+        nameText.x = width / 2;
+        nameText.y = iconY + iconSize + 8;
 
         // Добавляем в контейнер в правильном порядке
         this.ghostContainer.addChild(shadow);