wip

pixijs · Feb 27, 2024 · fd38bb1 · fd38bb1
1 parent fa9a3e0
commit fd38bb1
Show file tree

Hide file tree

Showing 15 changed files with 3,435 additions and 43 deletions.
diff --git a/src/chrome/src/inject/overlay/Transform.ts b/src/chrome/src/inject/overlay/Transform.ts
diff --git a/src/chrome/src/inject/overlay/overlay.ts b/src/chrome/src/inject/overlay/overlay.ts
@@ -1,7 +1,7 @@
 import { Sprite } from 'pixi.js';
 import { getPixiWrapper } from '../devtool';
 import { Throttle } from '../utils/throttle';
-import { Transform } from './transform/Transform';
+import { Transform } from './Transform';
 
 interface Overlay {
   transform: Transform;
@@ -76,39 +76,11 @@ export function getOverlayWrapper(): Overlay {
 
         if (!selectedNode) return;
 
-        const worldTransform = selectedNode.worldTransform;
-        const size = selectedNode.getBounds(false);
+        if (selectedNode === this.transform.node) return;
 
         this.transform.update({
-          x: worldTransform.tx - (worldTransform.tx - size.x),
-          y: worldTransform.ty - (worldTransform.ty - size.y),
-          width: size.width,
-          height: size.height,
-          angle: selectedNode.angle,
-          scaleX: worldTransform.a,
-          scaleY: worldTransform.d,
+          node: selectedNode,
           classPrefix: 'tr',
-          onUpdate: (s: {
-            width: number;
-            height: number;
-            x: number;
-            y: number;
-            scaleX: number;
-            scaleY: number;
-            angle: number;
-          }) => {
-            if (selectedNode.parent) {
-              selectedNode.parent.worldTransform.applyInverse(s, s);
-            } else {
-              selectedNode.worldTransform.applyInverse(s, s);
-            }
-            selectedNode.x = s.x + selectedNode.pivot.x;
-            selectedNode.y = s.y + selectedNode.pivot.y;
-            if ((selectedNode as Sprite).anchor) {
-              selectedNode.x += (selectedNode as Sprite).anchor.x * selectedNode.width;
-              selectedNode.y += (selectedNode as Sprite).anchor.y * selectedNode.height;
-            }
-          },
         });
       },
     };

diff --git a/src/chrome/src/inject/overlay/transform/Transform.ts b/src/chrome/src/inject/overlay/transform/Transform.ts
@@ -1,4 +1,4 @@
-import { scale, rotate, translate, styler } from 'free-transform';
+import { rotate, scale, styler, translate } from 'free-transform';
 
 interface TransformOptions {
   classPrefix: string;
@@ -192,6 +192,7 @@ export class Transform {
   }
 
   update(options: TransformOptions) {
+    this.node = options.node;
     this.width = options.width;
     this.height = options.height;
     this.x = options.x;
@@ -205,7 +206,8 @@ export class Transform {
     this.offsetY = options.offsetY || 0;
     this.onUpdate =
       options.onUpdate ||
-      function () {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      function (_opts: any) {
         /** */
       };
 
@@ -238,7 +240,6 @@ export class Transform {
 
     const startX = event.pageX;
     const startY = event.pageY;
-
     const drag = translate(
       {
         x: this.x,
@@ -250,12 +251,12 @@ export class Transform {
     );
 
     const up = () => {
-      document.removeEventListener('mousemove', drag);
-      document.removeEventListener('mouseup', up);
+      this.transform.parentElement!.removeEventListener('mousemove', drag);
+      this.transform.parentElement!.removeEventListener('mouseup', up);
     };
 
-    document.addEventListener('mousemove', drag);
-    document.addEventListener('mouseup', up);
+    this.transform.parentElement!.addEventListener('mousemove', drag);
+    this.transform.parentElement!.addEventListener('mouseup', up);
   }
 
   handleScale(scaleType: string, event: MouseEvent) {