Merge pull request #9 from RiskChallenger/rien/fuse-bug

Rien/fuse bug

src/classes/Block.ts

@@ -6,7 +6,7 @@ import {
   Point,
   Rectangle,
 } from "pixi.js";
-import { distanceBetweenPoints } from "../helpers";
+import { distanceBetweenPoints, moveToNewParent } from "../helpers";
 import { DragContainer } from "./DragContainer";
 import { Group } from "./Group";
 
@@ -116,18 +116,15 @@ export class Block extends DragContainer {
     return this.nearFusingBlock() || this.nearFusingGroup();
   }
 
-  public fuse(oldPosition: Rectangle): void {
+  public fuse(): void {
     if (!this.fusingGroup) {
       throw new Error("Cannot fuse without fusing group");
     }
-    this.fusingGroup.addBlock(this);
 
-    this.parent.toLocal(
-      new Point(oldPosition.x, oldPosition.y),
-      undefined,
-      this.position
-    );
+    moveToNewParent(this, this.fusingGroup);
+    this.fusingGroup.addBlock(this);
     this.addToGroup(this.fusingGroup);
+
     this.unsetFusingGroup();
   }
 

src/classes/Group.ts

@@ -1,4 +1,5 @@
 import { ITextStyle, Point, Rectangle, Text } from "pixi.js";
+import { moveToNewParent } from "../helpers";
 import { Block } from "./Block";
 import { DragContainer } from "./DragContainer";
 export class Group extends DragContainer {
@@ -113,11 +114,8 @@ export class Group extends DragContainer {
     }
 
     this.blocks.forEach((b) => {
-      const oldPos = b.getBounds();
-      this.removeBlock(b);
+      moveToNewParent(b, this.fusingGroup!);
       this.fusingGroup?.addBlock(b);
-
-      b.parent.toLocal(new Point(oldPos.x, oldPos.y), undefined, b.position);
       b.addToGroup(this.fusingGroup!);
     });
 

src/classes/GroupingApplication.ts

@@ -3,8 +3,10 @@ import {
   Application,
   FederatedPointerEvent,
   IApplicationOptions,
+  ITextStyle,
   Point,
 } from "pixi.js";
+import { moveToNewParent } from "../helpers";
 import { Block } from "./Block";
 import { Group } from "./Group";
 
@@ -13,14 +15,23 @@ export class GroupingApplication extends Application<HTMLCanvasElement> {
   private blocks: Block[] = [];
   // Blocks that have no group
   private looseBlocks: Block[] = [];
-  public groups: Group[] = [];
+  private groups: Group[] = [];
   private groupNameCounter = 0;
 
+  private groupNameStyle?: Partial<ITextStyle>;
   private viewport: Viewport;
 
-  constructor(options: Partial<IApplicationOptions> | undefined) {
+  constructor(
+    options:
+      | (Partial<IApplicationOptions> & {
+          groupNameStyle?: Partial<ITextStyle>;
+        })
+      | undefined
+  ) {
     super(options);
 
+    this.groupNameStyle = options?.groupNameStyle;
+
     this.viewport = new Viewport({
       screenWidth: window.innerWidth,
       screenHeight: window.innerHeight,
@@ -64,16 +75,9 @@ export class GroupingApplication extends Application<HTMLCanvasElement> {
     block.parent.toLocal(middleOfBlock, undefined, block.position);
     this.groups.find((g) => {
       if (g.isNearMembers(block)) {
-        const oldPos = block.getBounds();
-        // Spawned inside a group
-        this.viewport.removeChild(block);
+        moveToNewParent(block, g);
         g.addBlock(block);
         block.addToGroup(g);
-        block.parent.toLocal(
-          new Point(oldPos.x, oldPos.y),
-          undefined,
-          block.position
-        );
         g.updateBoundary(false);
         return true;
       }
@@ -83,7 +87,11 @@ export class GroupingApplication extends Application<HTMLCanvasElement> {
         // Spawned near a loose block
         this.viewport.removeChild(lb);
         this.viewport.removeChild(block);
-        const newGroup = new Group(this.nextGroupName(), [lb, block]);
+        const newGroup = new Group(
+          this.nextGroupName(),
+          [lb, block],
+          this.groupNameStyle
+        );
         this.viewport.addChild(newGroup);
         lb.addToGroup(newGroup);
         block.addToGroup(newGroup);
@@ -142,9 +150,7 @@ export class GroupingApplication extends Application<HTMLCanvasElement> {
     }
     if (active?.hasFusingGroup()) {
       if (active instanceof Block) {
-        const oldPos = active.getBounds();
-        this.viewport.removeChild(active);
-        active.fuse(oldPos);
+        active.fuse();
         this.looseBlocks = this.looseBlocks.filter((b) => b !== active);
       }
       if (active instanceof Group) {

src/helpers.ts

@@ -1,5 +1,20 @@
-import { Point } from "pixi.js";
+import { Container, DisplayObject, Point } from "pixi.js";
 
 export function distanceBetweenPoints(p1: Point, p2: Point): number {
   return Math.sqrt((p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2);
 }
+
+// Code inspired by pixi-discord
+// https://discord.com/channels/734147990985375826/1153692570577285240
+export function moveToNewParent(
+  target: DisplayObject,
+  newParent: Container
+): void {
+  target.getBounds();
+  newParent.getBounds();
+  const toParentMatrix = newParent.transform.worldTransform
+    .clone()
+    .invert()
+    .append(target.worldTransform);
+  target.transform.setFromMatrix(toParentMatrix);
+}

src/main.ts

@@ -4,7 +4,6 @@ import { GroupingApplication } from "./classes/GroupingApplication";
 import "./style.css";
 
 const app = new GroupingApplication({
-  background: "#333",
   antialias: true,
   view: document.querySelector("canvas")!,
 });