@sequent-org/moodboard 1.2.80 → 1.2.81

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.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/ui/HtmlHandlesLayer.js +40 -36
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sequent-org/moodboard",
3
- "version": "1.2.80",
3
+ "version": "1.2.81",
4
4
  "type": "module",
5
5
  "description": "Interactive moodboard",
6
6
  "main": "./src/index.js",
package/src/ui/HtmlHandlesLayer.js CHANGED
@@ -201,7 +201,7 @@ export class HtmlHandlesLayer {
201
201
  if (!this.layer) return;
202
202
  // Преобразуем world координаты в CSS-пиксели
203
203
  const view = this.core.pixi.app.view;
204
- const res = (this.core.pixi.app.renderer?.resolution) || 1;
204
+ const rendererRes = (this.core.pixi.app.renderer?.resolution) || 1;
205
205
  const containerRect = this.container.getBoundingClientRect();
206
206
  const viewRect = view.getBoundingClientRect();
207
207
  const offsetLeft = viewRect.left - containerRect.left;
@@ -227,10 +227,12 @@ export class HtmlHandlesLayer {
227
227
  // Вычисляем позицию и размер через математику сцены (toGlobal) и переводим в CSS px
228
228
  const tl = world.toGlobal(new PIXI.Point(worldBounds.x, worldBounds.y));
229
229
  const br = world.toGlobal(new PIXI.Point(worldBounds.x + worldBounds.width, worldBounds.y + worldBounds.height));
230
- const cssX = offsetLeft + (tl.x / res);
231
- const cssY = offsetTop + (tl.y / res);
232
- const cssWidth = Math.max(1, (br.x - tl.x) / res);
233
- const cssHeight = Math.max(1, (br.y - tl.y) / res);
230
+ // Отношение пикселей canvas к CSS-пикселям (устойчиво к зуму браузера и autoDensity)
231
+ const pxPerCss = (view && view.width && viewRect.width) ? (view.width / viewRect.width) : rendererRes;
232
+ const cssX = offsetLeft + (tl.x / pxPerCss);
233
+ const cssY = offsetTop + (tl.y / pxPerCss);
234
+ const cssWidth = Math.max(1, (br.x - tl.x) / pxPerCss);
235
+ const cssHeight = Math.max(1, (br.y - tl.y) / pxPerCss);
234
236
 
235
237
  const left = Math.round(cssX);
236
238
  const top = Math.round(cssY);
@@ -391,8 +393,10 @@ export class HtmlHandlesLayer {
391
393
  _toWorldScreenInverse(dx, dy) {
392
394
  const world = this.core.pixi.worldLayer || this.core.pixi.app.stage;
393
395
  const s = world?.scale?.x || 1;
394
- const res = (this.core.pixi.app.renderer?.resolution) || 1;
395
- return { dxWorld: (dx * res) / s, dyWorld: (dy * res) / s };
396
+ const view = this.core.pixi.app.view;
397
+ const viewRect = view.getBoundingClientRect();
398
+ const pxPerCss = (view && view.width && viewRect.width) ? (view.width / viewRect.width) : ((this.core.pixi.app.renderer?.resolution) || 1);
399
+ return { dxWorld: (dx * pxPerCss) / s, dyWorld: (dy * pxPerCss) / s };
396
400
  }
397
401
 
398
402
  _onHandleDown(e, box) {
@@ -404,10 +408,10 @@ export class HtmlHandlesLayer {
404
408
  const s = world?.scale?.x || 1;
405
409
  const tx = world?.x || 0;
406
410
  const ty = world?.y || 0;
407
- const res = (this.core.pixi.app.renderer?.resolution) || 1;
408
411
  const view = this.core.pixi.app.view;
409
- const containerRect = this.container.getBoundingClientRect();
410
412
  const viewRect = view.getBoundingClientRect();
413
+ const pxPerCss = (view && view.width && viewRect.width) ? (view.width / viewRect.width) : ((this.core.pixi.app.renderer?.resolution) || 1);
414
+ const containerRect = this.container.getBoundingClientRect();
411
415
  const offsetLeft = viewRect.left - containerRect.left;
412
416
  const offsetTop = viewRect.top - containerRect.top;
413
417
 
@@ -418,10 +422,10 @@ export class HtmlHandlesLayer {
418
422
  height: parseFloat(box.style.height),
419
423
  };
420
424
  const startScreen = {
421
- x: (startCSS.left - offsetLeft) * res,
422
- y: (startCSS.top - offsetTop) * res,
423
- w: startCSS.width * res,
424
- h: startCSS.height * res,
425
+ x: (startCSS.left - offsetLeft) * pxPerCss,
426
+ y: (startCSS.top - offsetTop) * pxPerCss,
427
+ w: startCSS.width * pxPerCss,
428
+ h: startCSS.height * pxPerCss,
425
429
  };
426
430
  const startWorld = {
427
431
  x: (startScreen.x - tx) / s,
@@ -564,10 +568,10 @@ export class HtmlHandlesLayer {
564
568
  this._repositionBoxChildren(box);
565
569
 
566
570
  // Перевод в мировые координаты
567
- const screenX = (newLeft - offsetLeft) * res;
568
- const screenY = (newTop - offsetTop) * res;
569
- const screenW = newW * res;
570
- const screenH = newH * res;
571
+ const screenX = (newLeft - offsetLeft) * pxPerCss;
572
+ const screenY = (newTop - offsetTop) * pxPerCss;
573
+ const screenW = newW * pxPerCss;
574
+ const screenH = newH * pxPerCss;
571
575
  const worldX = (screenX - tx) / s;
572
576
  const worldY = (screenY - ty) / s;
573
577
  const worldW = screenW / s;
@@ -612,10 +616,10 @@ export class HtmlHandlesLayer {
612
616
  width: parseFloat(box.style.width),
613
617
  height: parseFloat(box.style.height),
614
618
  };
615
- const screenX = (endCSS.left - offsetLeft) * res;
616
- const screenY = (endCSS.top - offsetTop) * res;
617
- const screenW = endCSS.width * res;
618
- const screenH = endCSS.height * res;
619
+ const screenX = (endCSS.left - offsetLeft) * pxPerCss;
620
+ const screenY = (endCSS.top - offsetTop) * pxPerCss;
621
+ const screenW = endCSS.width * pxPerCss;
622
+ const screenH = endCSS.height * pxPerCss;
619
623
  const worldX = (screenX - tx) / s;
620
624
  const worldY = (screenY - ty) / s;
621
625
  const worldW = screenW / s;
@@ -681,10 +685,10 @@ export class HtmlHandlesLayer {
681
685
  const s = world?.scale?.x || 1;
682
686
  const tx = world?.x || 0;
683
687
  const ty = world?.y || 0;
684
- const res = (this.core.pixi.app.renderer?.resolution) || 1;
685
688
  const view = this.core.pixi.app.view;
686
- const containerRect = this.container.getBoundingClientRect();
687
689
  const viewRect = view.getBoundingClientRect();
690
+ const pxPerCss = (view && view.width && viewRect.width) ? (view.width / viewRect.width) : ((this.core.pixi.app.renderer?.resolution) || 1);
691
+ const containerRect = this.container.getBoundingClientRect();
688
692
  const offsetLeft = viewRect.left - containerRect.left;
689
693
  const offsetTop = viewRect.top - containerRect.top;
690
694
 
@@ -696,10 +700,10 @@ export class HtmlHandlesLayer {
696
700
  height: parseFloat(box.style.height),
697
701
  };
698
702
  const startScreen = {
699
- x: (startCSS.left - offsetLeft) * res,
700
- y: (startCSS.top - offsetTop) * res,
701
- w: startCSS.width * res,
702
- h: startCSS.height * res,
703
+ x: (startCSS.left - offsetLeft) * pxPerCss,
704
+ y: (startCSS.top - offsetTop) * pxPerCss,
705
+ w: startCSS.width * pxPerCss,
706
+ h: startCSS.height * pxPerCss,
703
707
  };
704
708
  const startWorld = {
705
709
  x: (startScreen.x - tx) / s,
@@ -827,10 +831,10 @@ export class HtmlHandlesLayer {
827
831
  this._repositionBoxChildren(box);
828
832
 
829
833
  // Перевод в мировые координаты
830
- const screenX = (newLeft - offsetLeft) * res;
831
- const screenY = (newTop - offsetTop) * res;
832
- const screenW = newW * res;
833
- const screenH = newH * res;
834
+ const screenX = (newLeft - offsetLeft) * pxPerCss;
835
+ const screenY = (newTop - offsetTop) * pxPerCss;
836
+ const screenW = newW * pxPerCss;
837
+ const screenH = newH * pxPerCss;
834
838
  const worldX = (screenX - tx) / s;
835
839
  const worldY = (screenY - ty) / s;
836
840
  const worldW = screenW / s;
@@ -864,10 +868,10 @@ export class HtmlHandlesLayer {
864
868
  width: parseFloat(box.style.width),
865
869
  height: parseFloat(box.style.height),
866
870
  };
867
- const screenX = (endCSS.left - offsetLeft) * res;
868
- const screenY = (endCSS.top - offsetTop) * res;
869
- const screenW = endCSS.width * res;
870
- const screenH = endCSS.height * res;
871
+ const screenX = (endCSS.left - offsetLeft) * pxPerCss;
872
+ const screenY = (endCSS.top - offsetTop) * pxPerCss;
873
+ const screenW = endCSS.width * pxPerCss;
874
+ const screenH = endCSS.height * pxPerCss;
871
875
  const worldX = (screenX - tx) / s;
872
876
  const worldY = (screenY - ty) / s;
873
877
  const worldW = screenW / s;
@@ -889,7 +893,7 @@ export class HtmlHandlesLayer {
889
893
  el.style.width = `${Math.max(1, Math.round(endCSS.width))}px`;
890
894
  el.style.height = 'auto';
891
895
  const measured = Math.max(1, Math.round(el.scrollHeight));
892
- finalWorldH = (measured * res) / s;
896
+ finalWorldH = (measured * pxPerCss) / s;
893
897
  }
894
898
  } catch (_) {}
895
899
  }