@sequent-org/moodboard 1.2.100 → 1.2.102

package/package.json

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

package/src/moodboard/MoodBoard.js

@@ -477,6 +477,14 @@ export class MoodBoard {
         
         this._safeDestroy(this.alignmentGuides, 'alignmentGuides');
         this.alignmentGuides = null;
+
+        // HTML-слои (текст и ручки) также нужно корректно уничтожать,
+        // чтобы удалить DOM и отписаться от глобальных слушателей resize/DPR
+        this._safeDestroy(this.htmlTextLayer, 'htmlTextLayer');
+        this.htmlTextLayer = null;
+
+        this._safeDestroy(this.htmlHandlesLayer, 'htmlHandlesLayer');
+        this.htmlHandlesLayer = null;
         
         this._safeDestroy(this.commentPopover, 'commentPopover');
         this.commentPopover = null;
@@ -507,6 +515,16 @@ export class MoodBoard {
             this.container.classList.remove('moodboard-root');
         }
         this.container = null;
+
+        // Сбрасываем глобальные ссылки на слои, если они устанавливались
+        if (typeof window !== 'undefined') {
+            if (window.moodboardHtmlTextLayer === this.htmlTextLayer) {
+                window.moodboardHtmlTextLayer = null;
+            }
+            if (window.moodboardHtmlHandlesLayer === this.htmlHandlesLayer) {
+                window.moodboardHtmlHandlesLayer = null;
+            }
+        }
         
         // Вызываем коллбек onDestroy
         if (typeof this.options.onDestroy === 'function') {

package/src/ui/HtmlHandlesLayer.js

@@ -22,7 +22,12 @@ export class HtmlHandlesLayer {
         this.target = { type: 'none', id: null, bounds: null };
         this.handles = {};
         this._drag = null;
-        this._handlesSuppressed = false; // скрывать ручки во время перетаскивания/трансформаций
+      this._handlesSuppressed = false; // скрывать ручки во время перетаскивания/трансформаций
+
+      // Ссылки на обработчики, чтобы корректно отписаться при destroy()
+      this._onWindowResize = null;
+      this._onDprChange = null;
+      this._dprMediaQuery = null;
     }
 
     attach() {
@@ -31,16 +36,19 @@ export class HtmlHandlesLayer {
         this.container.appendChild(this.layer);
 
         // Обновление при изменении размеров окна/масштаба (DPR)
-        window.addEventListener('resize', () => this.update(), { passive: true });
+      this._onWindowResize = () => this.update();
+      window.addEventListener('resize', this._onWindowResize, { 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());
+          const mq = window.matchMedia(`(resolution: ${window.devicePixelRatio || 1}dppx)`);
+          this._dprMediaQuery = mq;
+          this._onDprChange = () => this.update();
+          if (mq && mq.addEventListener) {
+            mq.addEventListener('change', this._onDprChange);
+          } else if (mq && mq.addListener) {
+            mq.addListener(this._onDprChange);
                 }
             } catch (_) {}
         }
@@ -102,12 +110,34 @@ export class HtmlHandlesLayer {
     }
 
     destroy() {
-        if (this.layer) this.layer.remove();
-        this.layer = null;
+      // Отписываемся от глобальных событий окна/DPR,
+      // чтобы старые инстансы не продолжали реагировать после destroy()
+      if (this._onWindowResize) {
+        window.removeEventListener('resize', this._onWindowResize);
+        this._onWindowResize = null;
+      }
+      if (this._dprMediaQuery && this._onDprChange) {
+        try {
+          if (this._dprMediaQuery.removeEventListener) {
+            this._dprMediaQuery.removeEventListener('change', this._onDprChange);
+          } else if (this._dprMediaQuery.removeListener) {
+            this._dprMediaQuery.removeListener(this._onDprChange);
+          }
+        } catch (_) {}
+        this._dprMediaQuery = null;
+        this._onDprChange = null;
+      }
+
+      if (this.layer) {
+        this.layer.remove();
+      }
+      this.layer = null;
     }
 
     update() {
-        if (!this.core) return;
+      // Дополнительная защита: если слой или core уже уничтожены,
+      // выходим, чтобы не получить ошибок при resize/смене DPR
+      if (!this.core || !this.core.pixi || !this.core.pixi.app || !this.layer) return;
         const selectTool = this.core?.selectTool;
         const ids = selectTool ? Array.from(selectTool.selectedObjects || []) : [];
         if (!ids || ids.length === 0) { this.hide(); return; }
@@ -224,10 +254,13 @@ export class HtmlHandlesLayer {
             isFrameTarget = mbType === 'frame';
         }
 
-        // Вычисляем позицию и размер через математику сцены (toGlobal) и переводим в CSS px
+        // Вычисляем позицию и размер через математику сцены (toGlobal) и переводим в CSS px.
+        // Важно: toGlobal() уже возвращает координаты в логических экранных пикселях
+        // (учитывая позицию/масштаб world), поэтому ДЕЛИТЬ их на renderer.resolution не нужно.
+        // Деление приводило к эффекту 1 / resolution (например, при res = 0.8 рамка
+        // становилась больше и съезжала относительно объекта).
         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));
-        // Используем координаты в CSS-пикселях напрямую (Pixi toGlobal выдаёт экранные px)
         const cssX = offsetLeft + tl.x;
         const cssY = offsetTop + tl.y;
         const cssWidth = Math.max(1, (br.x - tl.x));
@@ -405,6 +438,7 @@ export class HtmlHandlesLayer {
         const s = world?.scale?.x || 1;
         const tx = world?.x || 0;
         const ty = world?.y || 0;
+        const rendererRes = (this.core.pixi.app.renderer?.resolution) || 1;
         const containerRect = this.container.getBoundingClientRect();
         const view = this.core.pixi.app.view;
         const viewRect = view.getBoundingClientRect();
@@ -423,11 +457,12 @@ export class HtmlHandlesLayer {
             w: startCSS.width,
             h: startCSS.height,
         };
+        // Экранные координаты (CSS) → device-пиксели → world
         const startWorld = {
-            x: (startScreen.x - tx) / s,
-            y: (startScreen.y - ty) / s,
-            width: startScreen.w / s,
-            height: startScreen.h / s,
+            x: ((startScreen.x * rendererRes) - tx) / s,
+            y: ((startScreen.y * rendererRes) - ty) / s,
+            width: (startScreen.w * rendererRes) / s,
+            height: (startScreen.h * rendererRes) / s,
         };
 
         let objects = [id];
@@ -568,10 +603,10 @@ export class HtmlHandlesLayer {
             const screenY = (newTop - offsetTop);
             const screenW = newW;
             const screenH = newH;
-            const worldX = (screenX - tx) / s;
-            const worldY = (screenY - ty) / s;
-            const worldW = screenW / s;
-            const worldH = screenH / s;
+            const worldX = ((screenX * rendererRes) - tx) / s;
+            const worldY = ((screenY * rendererRes) - ty) / s;
+            const worldW = (screenW * rendererRes) / s;
+            const worldH = (screenH * rendererRes) / s;
 
             // Определяем, изменилась ли позиция (только для левых/верхних ручек)
             const positionChanged = (newLeft !== startCSS.left) || (newTop !== startCSS.top);
@@ -616,10 +651,10 @@ export class HtmlHandlesLayer {
             const screenY = (endCSS.top - offsetTop);
             const screenW = endCSS.width;
             const screenH = endCSS.height;
-            const worldX = (screenX - tx) / s;
-            const worldY = (screenY - ty) / s;
-            const worldW = screenW / s;
-            const worldH = screenH / s;
+            const worldX = ((screenX * rendererRes) - tx) / s;
+            const worldY = ((screenY * rendererRes) - ty) / s;
+            const worldW = (screenW * rendererRes) / s;
+            const worldH = (screenH * rendererRes) / s;
 
             if (isGroup) {
                 this.eventBus.emit(Events.Tool.GroupResizeEnd, { objects });
@@ -681,6 +716,7 @@ export class HtmlHandlesLayer {
         const s = world?.scale?.x || 1;
         const tx = world?.x || 0;
         const ty = world?.y || 0;
+        const rendererRes = (this.core.pixi.app.renderer?.resolution) || 1;
         const containerRect = this.container.getBoundingClientRect();
         const view = this.core.pixi.app.view;
         const viewRect = view.getBoundingClientRect();
@@ -701,10 +737,10 @@ export class HtmlHandlesLayer {
             h: startCSS.height,
         };
         const startWorld = {
-            x: (startScreen.x - tx) / s,
-            y: (startScreen.y - ty) / s,
-            width: startScreen.w / s,
-            height: startScreen.h / s,
+            x: ((startScreen.x * rendererRes) - tx) / s,
+            y: ((startScreen.y * rendererRes) - ty) / s,
+            width: (startScreen.w * rendererRes) / s,
+            height: (startScreen.h * rendererRes) / s,
         };
 
         let objects = [id];
@@ -830,10 +866,10 @@ export class HtmlHandlesLayer {
             const screenY = (newTop - offsetTop);
             const screenW = newW;
             const screenH = newH;
-            const worldX = (screenX - tx) / s;
-            const worldY = (screenY - ty) / s;
-            const worldW = screenW / s;
-            const worldH = screenH / s;
+            const worldX = ((screenX * rendererRes) - tx) / s;
+            const worldY = ((screenY * rendererRes) - ty) / s;
+            const worldW = (screenW * rendererRes) / s;
+            const worldH = (screenH * rendererRes) / s;
 
             // Определяем, изменилась ли позиция (только для левых/верхних граней)
             const edgePositionChanged = (newLeft !== startCSS.left) || (newTop !== startCSS.top);
@@ -867,10 +903,10 @@ export class HtmlHandlesLayer {
             const screenY = (endCSS.top - offsetTop);
             const screenW = endCSS.width;
             const screenH = endCSS.height;
-            const worldX = (screenX - tx) / s;
-            const worldY = (screenY - ty) / s;
-            const worldW = screenW / s;
-            const worldH = screenH / s;
+            const worldX = ((screenX * rendererRes) - tx) / s;
+            const worldY = ((screenY * rendererRes) - ty) / s;
+            const worldW = (screenW * rendererRes) / s;
+            const worldH = (screenH * rendererRes) / s;
 
             if (isGroup) {
                 this.eventBus.emit(Events.Tool.GroupResizeEnd, { objects });
@@ -888,7 +924,7 @@ export class HtmlHandlesLayer {
                             el.style.width = `${Math.max(1, Math.round(endCSS.width))}px`;
                             el.style.height = 'auto';
                             const measured = Math.max(1, Math.round(el.scrollHeight));
-                            finalWorldH = (measured) / s;
+                            finalWorldH = (measured * rendererRes) / s;
                         }
                     } catch (_) {}
                 }