@sequent-org/moodboard 1.2.78 → 1.2.79
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/ui/HtmlHandlesLayer.js +30 -4
package/package.json
CHANGED
|
@@ -30,6 +30,21 @@ export class HtmlHandlesLayer {
|
|
|
30
30
|
this.layer.className = 'moodboard-html-handles';
|
|
31
31
|
this.container.appendChild(this.layer);
|
|
32
32
|
|
|
33
|
+
// Обновление при изменении размеров окна/масштаба (DPR)
|
|
34
|
+
window.addEventListener('resize', () => this.update(), { passive: true });
|
|
35
|
+
// Некоторые браузеры меняют devicePixelRatio без resize — страхуемся
|
|
36
|
+
if (typeof window !== 'undefined' && 'matchMedia' in window) {
|
|
37
|
+
try {
|
|
38
|
+
// media-query, реагирующая на изменение DPR
|
|
39
|
+
const mq = window.matchMedia(`(resolution: ${window.devicePixelRatio || 1}dppx)`);
|
|
40
|
+
if (mq && mq.addEventListener) {
|
|
41
|
+
mq.addEventListener('change', () => this.update());
|
|
42
|
+
} else if (mq && mq.addListener) {
|
|
43
|
+
mq.addListener(() => this.update());
|
|
44
|
+
}
|
|
45
|
+
} catch (_) {}
|
|
46
|
+
}
|
|
47
|
+
|
|
33
48
|
// Подписки: обновлять при изменениях выбора и трансформациях
|
|
34
49
|
this.eventBus.on(Events.Tool.SelectionAdd, () => this.update());
|
|
35
50
|
this.eventBus.on(Events.Tool.SelectionRemove, () => this.update());
|
|
@@ -185,8 +200,12 @@ export class HtmlHandlesLayer {
|
|
|
185
200
|
_showBounds(worldBounds, id) {
|
|
186
201
|
if (!this.layer) return;
|
|
187
202
|
// Преобразуем world координаты в CSS-пиксели
|
|
188
|
-
const res = (this.core.pixi.app.renderer?.resolution) || 1;
|
|
189
203
|
const view = this.core.pixi.app.view;
|
|
204
|
+
// Динамически вычисляем фактическое соотношение пикселей canvas/CSS,
|
|
205
|
+
// чтобы корректно работать при зуме браузера
|
|
206
|
+
const res = (view && view.width && view.clientWidth)
|
|
207
|
+
? (view.width / view.clientWidth)
|
|
208
|
+
: (this.core.pixi.app.renderer?.resolution || 1);
|
|
190
209
|
const containerRect = this.container.getBoundingClientRect();
|
|
191
210
|
const viewRect = view.getBoundingClientRect();
|
|
192
211
|
const offsetLeft = viewRect.left - containerRect.left;
|
|
@@ -374,7 +393,10 @@ export class HtmlHandlesLayer {
|
|
|
374
393
|
_toWorldScreenInverse(dx, dy) {
|
|
375
394
|
const world = this.core.pixi.worldLayer || this.core.pixi.app.stage;
|
|
376
395
|
const s = world?.scale?.x || 1;
|
|
377
|
-
const
|
|
396
|
+
const view = this.core.pixi.app.view;
|
|
397
|
+
const res = (view && view.width && view.clientWidth)
|
|
398
|
+
? (view.width / view.clientWidth)
|
|
399
|
+
: (this.core.pixi.app.renderer?.resolution || 1);
|
|
378
400
|
return { dxWorld: (dx * res) / s, dyWorld: (dy * res) / s };
|
|
379
401
|
}
|
|
380
402
|
|
|
@@ -387,8 +409,10 @@ export class HtmlHandlesLayer {
|
|
|
387
409
|
const s = world?.scale?.x || 1;
|
|
388
410
|
const tx = world?.x || 0;
|
|
389
411
|
const ty = world?.y || 0;
|
|
390
|
-
const res = (this.core.pixi.app.renderer?.resolution) || 1;
|
|
391
412
|
const view = this.core.pixi.app.view;
|
|
413
|
+
const res = (view && view.width && view.clientWidth)
|
|
414
|
+
? (view.width / view.clientWidth)
|
|
415
|
+
: (this.core.pixi.app.renderer?.resolution || 1);
|
|
392
416
|
const containerRect = this.container.getBoundingClientRect();
|
|
393
417
|
const viewRect = view.getBoundingClientRect();
|
|
394
418
|
const offsetLeft = viewRect.left - containerRect.left;
|
|
@@ -664,8 +688,10 @@ export class HtmlHandlesLayer {
|
|
|
664
688
|
const s = world?.scale?.x || 1;
|
|
665
689
|
const tx = world?.x || 0;
|
|
666
690
|
const ty = world?.y || 0;
|
|
667
|
-
const res = (this.core.pixi.app.renderer?.resolution) || 1;
|
|
668
691
|
const view = this.core.pixi.app.view;
|
|
692
|
+
const res = (view && view.width && view.clientWidth)
|
|
693
|
+
? (view.width / view.clientWidth)
|
|
694
|
+
: (this.core.pixi.app.renderer?.resolution || 1);
|
|
669
695
|
const containerRect = this.container.getBoundingClientRect();
|
|
670
696
|
const viewRect = view.getBoundingClientRect();
|
|
671
697
|
const offsetLeft = viewRect.left - containerRect.left;
|