@sequent-org/moodboard 1.0.9 → 1.0.11

package/package.json

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

package/src/core/PixiEngine.js

@@ -17,8 +17,7 @@ export class PixiEngine {
             backgroundColor: this.options.backgroundColor,
             antialias: true,
             resolution: (typeof window !== 'undefined' && window.devicePixelRatio) ? window.devicePixelRatio : 1,
-            autoDensity: true,
-            resizeTo: this.container // Автоматически изменять размер при изменении контейнера
+            autoDensity: true
         });
 
         this.container.appendChild(this.app.view);
@@ -434,17 +433,6 @@ 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,37 +36,6 @@ 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);
@@ -103,11 +72,6 @@ export class CoreMoodBoard {
         try {
             await this.pixi.init();
             this.keyboard.startListening(); // Запускаем прослушивание клавиатуры
-            
-            // Запускаем отслеживание изменения размера контейнера
-            if (this.resizeObserver) {
-                this.resizeObserver.observe(this.container);
-            }
 
             // Инициализируем систему инструментов
             await this.initTools();
@@ -1659,12 +1623,6 @@ 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

@@ -196,9 +196,9 @@ export class MoodBoard {
     }
 
     initZoombar() {
-        // Рисуем панель зума поверх холста (в том же контейнере, что и topbar)
+        // Рисуем панель зума в правом нижнем углу (внутри workspace контейнера)
         this.zoombar = new ZoomPanel(
-            this.topbarContainer,
+            this.workspaceElement,
             this.coreMoodboard.eventBus
         );
     }
@@ -322,26 +322,6 @@ 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,29 +83,12 @@ export class WorkspaceManager {
             return { width: 800, height: 600 };
         }
         
-        // Получаем размеры родительского контейнера
-        const parentWidth = this.container.clientWidth;
-        const parentHeight = this.container.clientHeight;
-        
         return {
-            width: parentWidth || 800,
-            height: parentHeight || 600
+            width: this.canvasContainer.clientWidth,
+            height: this.canvasContainer.clientHeight
         };
     }
     
-    /**
-     * Обновляет размеры рабочего пространства
-     */
-    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,9 +15,10 @@
 }
 
 .moodboard-workspace {
-    position: relative;
-    width: 100%;
-    height: 100%;
+    position: fixed;
+    inset: 0;
+    width: 100vw;
+    height: 100vh;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     overflow: hidden;
 }
@@ -49,11 +50,11 @@
     pointer-events: none;
 }
 
-/* Right top zoom panel container (reuses topbar container area) */
+/* Bottom-right zoom panel container (positioned left of map panel) */
 .moodboard-zoombar {
     position: absolute;
-    top: 16px;
-    right: 16px;
+    bottom: 16px;
+    right: 80px; /* Слева от кнопки карты (36px + 8px gap + 36px button = 80px) */
     display: inline-flex;
     align-items: center;
     gap: 8px;
@@ -102,7 +103,7 @@
 .moodboard-zoombar__menu {
     position: absolute;
     right: 0;
-    top: 49px;
+    bottom: 49px; /* Открывается вверх от панели зума */
     background: #fff;
     border: 1px solid #e0e0e0;
     border-radius: 8px;
@@ -174,10 +175,7 @@
 /* Canvas Container */
 .moodboard-workspace__canvas {
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
     overflow: hidden;
 }