@sequent-org/moodboard 1.2.72 → 1.2.74

package/package.json

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

package/src/objects/FileObject.js

@@ -49,7 +49,8 @@ export class FileObject {
             fill: 0x333333,
             align: 'center',
             wordWrap: true,
-            wordWrapWidth: this.width - 8,
+            breakWords: true,
+            wordWrapWidth: Math.max(1, this.width - 24), // горизонтальный padding 12px с каждой стороны
             lineHeight: 14,
             resolution: (typeof window !== 'undefined' && window.devicePixelRatio) ? window.devicePixelRatio : 1
         });
@@ -175,7 +176,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 +239,57 @@ export class FileObject {
 
     _updateTextPosition() {
         if (!this.fileNameText) return;
-        
-        // Обновляем стиль текста
-        this.fileNameText.style.wordWrapWidth = this.width - 8;
+
+        // Обновляем стиль текста (ограничиваем по подложке и переносим слова, учитываем padding)
+        const sidePad = 12;
+        this.fileNameText.style.wordWrap = true;
+        this.fileNameText.style.breakWords = true;
+        this.fileNameText.style.wordWrapWidth = Math.max(1, this.width - sidePad * 2);
         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/tools/object-tools/PlacementTool.js

@@ -592,28 +592,31 @@ 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
+            breakWords: true,
+            wordWrapWidth: Math.max(1, width - 24) // padding 12px по бокам
         });
-        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);