@sequent-org/moodboard 1.2.77 → 1.2.79

package/package.json

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

package/src/core/index.js

@@ -361,46 +361,82 @@ export class CoreMoodBoard {
             this._cursor.y = y;
         });
 
-        // Вставка изображения из буфера обмена — по курсору, если он над холстом; иначе по центру видимой области
-        this.eventBus.on(Events.UI.PasteImage, ({ src, name, imageId }) => {
-            if (!src) return;
-            const view = this.pixi.app.view;
-            const world = this.pixi.worldLayer || this.pixi.app.stage;
-            const s = world?.scale?.x || 1;
-            const hasCursor = Number.isFinite(this._cursor.x) && Number.isFinite(this._cursor.y);
-            
-            let screenX, screenY;
-            if (hasCursor) {
-                // Используем позицию курсора
-                screenX = this._cursor.x;
-                screenY = this._cursor.y;
-            } else {
-                // Центр экрана
-                screenX = view.clientWidth / 2;
-                screenY = view.clientHeight / 2;
-            }
-            
-            // Преобразуем экранные координаты в мировые (с учетом zoom и pan)
-            const worldX = (screenX - (world?.x || 0)) / s;
-            const worldY = (screenY - (world?.y || 0)) / s;
-            
-            // Центруем изображение относительно точки вставки
-            const properties = { src, name, width: 300, height: 200 };
-            const extraData = imageId ? { imageId } : {};
-            this.createObject('image', { x: Math.round(worldX - 150), y: Math.round(worldY - 100) }, properties, extraData);
-        });
-
-        // Вставка изображения из буфера обмена по контекстному клику (координаты на экране)
-        this.eventBus.on(Events.UI.PasteImageAt, ({ x, y, src, name, imageId }) => {
-            if (!src) return;
-            const world = this.pixi.worldLayer || this.pixi.app.stage;
-            const s = world?.scale?.x || 1;
-            const worldX = (x - (world?.x || 0)) / s;
-            const worldY = (y - (world?.y || 0)) / s;
-            const properties = { src, name, width: 300, height: 200 };
-            const extraData = imageId ? { imageId } : {};
-            this.createObject('image', { x: Math.round(worldX - 150), y: Math.round(worldY - 100) }, properties, extraData);
-        });
+		// Вставка изображения из буфера обмена — по курсору, если он над холстом; иначе по центру видимой области
+		this.eventBus.on(Events.UI.PasteImage, ({ src, name, imageId }) => {
+			if (!src) return;
+			const view = this.pixi.app.view;
+			const world = this.pixi.worldLayer || this.pixi.app.stage;
+			const s = world?.scale?.x || 1;
+			const hasCursor = Number.isFinite(this._cursor.x) && Number.isFinite(this._cursor.y);
+			
+			let screenX, screenY;
+			if (hasCursor) {
+				// Используем позицию курсора
+				screenX = this._cursor.x;
+				screenY = this._cursor.y;
+			} else {
+				// Центр экрана
+				screenX = view.clientWidth / 2;
+				screenY = view.clientHeight / 2;
+			}
+			
+			// Преобразуем экранные координаты в мировые (с учетом zoom и pan)
+			const worldX = (screenX - (world?.x || 0)) / s;
+			const worldY = (screenY - (world?.y || 0)) / s;
+
+			const placeWithAspect = (natW, natH) => {
+				let w = 300, h = 200;
+				if (natW > 0 && natH > 0) {
+					const ar = natW / natH;
+					w = 300;
+					h = Math.max(1, Math.round(w / ar));
+				}
+				const properties = { src, name, width: w, height: h };
+				const extraData = imageId ? { imageId } : {};
+				this.createObject('image', { x: Math.round(worldX - Math.round(w / 2)), y: Math.round(worldY - Math.round(h / 2)) }, properties, extraData);
+			};
+
+			try {
+				const img = new Image();
+				img.decoding = 'async';
+				img.onload = () => placeWithAspect(img.naturalWidth || 0, img.naturalHeight || 0);
+				img.onerror = () => placeWithAspect(0, 0);
+				img.src = src;
+			} catch (_) {
+				placeWithAspect(0, 0);
+			}
+		});
+
+		// Вставка изображения из буфера обмена по контекстному клику (координаты на экране)
+		this.eventBus.on(Events.UI.PasteImageAt, ({ x, y, src, name, imageId }) => {
+			if (!src) return;
+			const world = this.pixi.worldLayer || this.pixi.app.stage;
+			const s = world?.scale?.x || 1;
+			const worldX = (x - (world?.x || 0)) / s;
+			const worldY = (y - (world?.y || 0)) / s;
+
+			const placeWithAspect = (natW, natH) => {
+				let w = 300, h = 200;
+				if (natW > 0 && natH > 0) {
+					const ar = natW / natH;
+					w = 300;
+					h = Math.max(1, Math.round(w / ar));
+				}
+				const properties = { src, name, width: w, height: h };
+				const extraData = imageId ? { imageId } : {};
+				this.createObject('image', { x: Math.round(worldX - Math.round(w / 2)), y: Math.round(worldY - Math.round(h / 2)) }, properties, extraData);
+			};
+
+			try {
+				const img = new Image();
+				img.decoding = 'async';
+				img.onload = () => placeWithAspect(img.naturalWidth || 0, img.naturalHeight || 0);
+				img.onerror = () => placeWithAspect(0, 0);
+				img.src = src;
+			} catch (_) {
+				placeWithAspect(0, 0);
+			}
+		});
 
         // Слойность: изменение порядка отрисовки (локальные операции)
         const applyZOrderFromState = () => {

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,12 @@ 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;
+        // Динамически вычисляем фактическое соотношение пикселей canvas/CSS,
+        // чтобы корректно работать при зуме браузера
+        const res = (view && view.width && view.clientWidth) 
+            ? (view.width / view.clientWidth) 
+            : (this.core.pixi.app.renderer?.resolution || 1);
         const containerRect = this.container.getBoundingClientRect();
         const viewRect = view.getBoundingClientRect();
         const offsetLeft = viewRect.left - containerRect.left;
@@ -374,7 +393,10 @@ export class HtmlHandlesLayer {
     _toWorldScreenInverse(dx, dy) {
         const world = this.core.pixi.worldLayer || this.core.pixi.app.stage;
         const s = world?.scale?.x || 1;
-        const res = (this.core.pixi.app.renderer?.resolution) || 1;
+        const view = this.core.pixi.app.view;
+        const res = (view && view.width && view.clientWidth) 
+            ? (view.width / view.clientWidth) 
+            : (this.core.pixi.app.renderer?.resolution || 1);
         return { dxWorld: (dx * res) / s, dyWorld: (dy * res) / s };
     }
 
@@ -387,8 +409,10 @@ export class HtmlHandlesLayer {
         const s = world?.scale?.x || 1;
         const tx = world?.x || 0;
         const ty = world?.y || 0;
-        const res = (this.core.pixi.app.renderer?.resolution) || 1;
         const view = this.core.pixi.app.view;
+        const res = (view && view.width && view.clientWidth) 
+            ? (view.width / view.clientWidth) 
+            : (this.core.pixi.app.renderer?.resolution || 1);
         const containerRect = this.container.getBoundingClientRect();
         const viewRect = view.getBoundingClientRect();
         const offsetLeft = viewRect.left - containerRect.left;
@@ -664,8 +688,10 @@ export class HtmlHandlesLayer {
         const s = world?.scale?.x || 1;
         const tx = world?.x || 0;
         const ty = world?.y || 0;
-        const res = (this.core.pixi.app.renderer?.resolution) || 1;
         const view = this.core.pixi.app.view;
+        const res = (view && view.width && view.clientWidth) 
+            ? (view.width / view.clientWidth) 
+            : (this.core.pixi.app.renderer?.resolution || 1);
         const containerRect = this.container.getBoundingClientRect();
         const viewRect = view.getBoundingClientRect();
         const offsetLeft = viewRect.left - containerRect.left;