@sequent-org/moodboard 1.2.78 → 1.2.80

package/package.json

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

package/src/ui/HtmlHandlesLayer.js

@@ -30,6 +30,21 @@ export class HtmlHandlesLayer {
         this.layer.className = 'moodboard-html-handles';
         this.container.appendChild(this.layer);
 
+        // Обновление при изменении размеров окна/масштаба (DPR)
+        window.addEventListener('resize', () => this.update(), { passive: true });
+        // Некоторые браузеры меняют devicePixelRatio без resize — страхуемся
+        if (typeof window !== 'undefined' && 'matchMedia' in window) {
+            try {
+                // media-query, реагирующая на изменение DPR
+                const mq = window.matchMedia(`(resolution: ${window.devicePixelRatio || 1}dppx)`);
+                if (mq && mq.addEventListener) {
+                    mq.addEventListener('change', () => this.update());
+                } else if (mq && mq.addListener) {
+                    mq.addListener(() => this.update());
+                }
+            } catch (_) {}
+        }
+
         // Подписки: обновлять при изменениях выбора и трансформациях
         this.eventBus.on(Events.Tool.SelectionAdd, () => this.update());
         this.eventBus.on(Events.Tool.SelectionRemove, () => this.update());
@@ -185,8 +200,8 @@ export class HtmlHandlesLayer {
     _showBounds(worldBounds, id) {
         if (!this.layer) return;
         // Преобразуем world координаты в CSS-пиксели
-        const res = (this.core.pixi.app.renderer?.resolution) || 1;
         const view = this.core.pixi.app.view;
+        const res = (this.core.pixi.app.renderer?.resolution) || 1;
         const containerRect = this.container.getBoundingClientRect();
         const viewRect = view.getBoundingClientRect();
         const offsetLeft = viewRect.left - containerRect.left;
@@ -209,11 +224,13 @@ export class HtmlHandlesLayer {
             isFrameTarget = mbType === 'frame';
         }
 
-        // Вычисляем позицию и размер в CSS координатах, округляем до целых px
-        const cssX = offsetLeft + (worldX + worldBounds.x * worldScale) / res;
-        const cssY = offsetTop + (worldY + worldBounds.y * worldScale) / res;
-        const cssWidth = Math.max(1, (worldBounds.width * worldScale) / res);
-        const cssHeight = Math.max(1, (worldBounds.height * worldScale) / res);
+        // Вычисляем позицию и размер через математику сцены (toGlobal) и переводим в CSS px
+        const tl = world.toGlobal(new PIXI.Point(worldBounds.x, worldBounds.y));
+        const br = world.toGlobal(new PIXI.Point(worldBounds.x + worldBounds.width, worldBounds.y + worldBounds.height));
+        const cssX = offsetLeft + (tl.x / res);
+        const cssY = offsetTop + (tl.y / res);
+        const cssWidth = Math.max(1, (br.x - tl.x) / res);
+        const cssHeight = Math.max(1, (br.y - tl.y) / res);
 
         const left = Math.round(cssX);
         const top = Math.round(cssY);