@sequent-org/moodboard 1.0.7 → 1.0.8

package/package.json

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

package/src/core/PixiEngine.js

@@ -17,7 +17,8 @@ export class PixiEngine {
             backgroundColor: this.options.backgroundColor,
             antialias: true,
             resolution: (typeof window !== 'undefined' && window.devicePixelRatio) ? window.devicePixelRatio : 1,
-            autoDensity: true
+            autoDensity: true,
+            resizeTo: this.container // Автоматически изменять размер при изменении контейнера
         });
 
         this.container.appendChild(this.app.view);
@@ -433,6 +434,17 @@ export class PixiEngine {
         return null;
     }
 
+    /**
+     * Изменяет размер PIXI приложения
+     * @param {number} width - новая ширина
+     * @param {number} height - новая высота
+     */
+    resize(width, height) {
+        if (this.app && this.app.renderer) {
+            this.app.renderer.resize(width, height);
+        }
+    }
+
     destroy() {
         this.app.destroy(true);
     }

package/src/core/index.js

@@ -36,6 +36,37 @@ export class CoreMoodBoard {
             backgroundColor: 0xF5F5F5,
             ...options
         };
+        
+        // Устанавливаем размеры контейнера, если они не заданы
+        if (!this.options.width || this.options.width === 800) {
+            this.options.width = this.container.clientWidth || 800;
+        }
+        if (!this.options.height || this.options.height === 600) {
+            this.options.height = this.container.clientHeight || 600;
+        }
+        
+        // Создаем ResizeObserver для отслеживания изменений размера контейнера
+        this.resizeObserver = null;
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver((entries) => {
+                for (const entry of entries) {
+                    const { width, height } = entry.contentRect;
+                    if (this.pixi && this.pixi.app) {
+                        // Обновляем размеры PIXI приложения
+                        this.pixi.resize(width, height);
+                        // Обновляем размеры в опциях
+                        this.options.width = width;
+                        this.options.height = height;
+                        // Обновляем размеры рабочего пространства
+                        if (this.workspaceManager) {
+                            this.workspaceManager.updateSize();
+                        }
+                        // Уведомляем о изменении размера
+                        this.eventBus.emit('resize', { width, height });
+                    }
+                }
+            });
+        }
 
         this.eventBus = new EventBus();
         this.state = new StateManager(this.eventBus);
@@ -72,6 +103,11 @@ export class CoreMoodBoard {
         try {
             await this.pixi.init();
             this.keyboard.startListening(); // Запускаем прослушивание клавиатуры
+            
+            // Запускаем отслеживание изменения размера контейнера
+            if (this.resizeObserver) {
+                this.resizeObserver.observe(this.container);
+            }
 
             // Инициализируем систему инструментов
             await this.initTools();
@@ -1623,6 +1659,12 @@ export class CoreMoodBoard {
     }
 
     destroy() {
+        // Останавливаем отслеживание изменения размера
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+        
         this.saveManager.destroy();
         this.keyboard.destroy();
         this.history.destroy();

package/src/moodboard/MoodBoard.js

@@ -322,6 +322,26 @@ export class MoodBoard {
         }
     }
     
+    /**
+     * Обновляет размеры холста
+     */
+    updateSize() {
+        if (this.workspaceManager) {
+            return this.workspaceManager.updateSize();
+        }
+        return null;
+    }
+    
+    /**
+     * Получает текущие размеры холста
+     */
+    getSize() {
+        if (this.workspaceManager) {
+            return this.workspaceManager.getCanvasSize();
+        }
+        return { width: 800, height: 600 };
+    }
+    
     /**
      * Очистка ресурсов
      */

package/src/moodboard/WorkspaceManager.js

@@ -83,12 +83,29 @@ export class WorkspaceManager {
             return { width: 800, height: 600 };
         }
         
+        // Получаем размеры родительского контейнера
+        const parentWidth = this.container.clientWidth;
+        const parentHeight = this.container.clientHeight;
+        
         return {
-            width: this.canvasContainer.clientWidth,
-            height: this.canvasContainer.clientHeight
+            width: parentWidth || 800,
+            height: parentHeight || 600
         };
     }
     
+    /**
+     * Обновляет размеры рабочего пространства
+     */
+    updateSize() {
+        if (this.canvasContainer && this.container) {
+            const size = this.getCanvasSize();
+            this.canvasContainer.style.width = size.width + 'px';
+            this.canvasContainer.style.height = size.height + 'px';
+            return size;
+        }
+        return null;
+    }
+    
     /**
      * Очистка ресурсов
      */

package/src/ui/styles/workspace.css

@@ -15,10 +15,9 @@
 }
 
 .moodboard-workspace {
-    position: fixed;
-    inset: 0;
-    width: 100vw;
-    height: 100vh;
+    position: relative;
+    width: 100%;
+    height: 100%;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     overflow: hidden;
 }
@@ -175,7 +174,10 @@
 /* Canvas Container */
 .moodboard-workspace__canvas {
     position: absolute;
-    inset: 0;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     overflow: hidden;
 }