fix(core): dot absolute positioning bug fix

Author: shivanshkc

CHANGELOG.md

@@ -1,10 +1,9 @@
 ## [1.3.1](https://github.com/shivanshkc/graviton-web-client/compare/v1.3.0...v1.3.1) (2022-04-07)
 
-
 ### Bug Fixes
 
-* **core:** bigget dot creation fix on mobile devices ([2179611](https://github.com/shivanshkc/graviton-web-client/commit/2179611756190fb3140193ef512e8c865f375e72))
-* **core:** dots being created do not participate in simulation ([4aa1587](https://github.com/shivanshkc/graviton-web-client/commit/4aa1587f136aebd6b6c2480e69def08e531fa242))
+- **core:** bigget dot creation fix on mobile devices ([2179611](https://github.com/shivanshkc/graviton-web-client/commit/2179611756190fb3140193ef512e8c865f375e72))
+- **core:** dots being created do not participate in simulation ([4aa1587](https://github.com/shivanshkc/graviton-web-client/commit/4aa1587f136aebd6b6c2480e69def08e531fa242))
 
 # [1.3.0](https://github.com/shivanshkc/graviton-web-client/compare/v1.2.1...v1.3.0) (2022-04-07)
 

src/pages/home/home.component.ts

@@ -79,14 +79,11 @@ export class HomeComponent implements AfterViewInit, OnDestroy {
     const posX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
     const posY = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
 
-    // This position moves the center of the dot to the click position.
-    const centeredPos = new Vector2(posX - defaultDotDiameter / 2, posY - defaultDotDiameter / 2);
-
     const dot = {
       color: getRandomColor(),
       mass: defaultDotMass,
       diameter: defaultDotDiameter,
-      position: centeredPos,
+      position: new Vector2(posX, posY),
       velocity: Vector2.zero,
     };
 
@@ -138,17 +135,7 @@ export class HomeComponent implements AfterViewInit, OnDestroy {
       // Dot's mass and dimensions do not exceed the max limit.
       if (dotBeingCreated.diameter < maxDotDiameter) {
         dotBeingCreated.mass += defaultDotMass * defaultIncrementRatio;
-
-        // Storing the diameter change in a separate variable to keep the dot's center at the click position.
-        const diaChange = defaultDotDiameter * defaultIncrementRatio;
-        // Updating diameter.
-        dotBeingCreated.diameter += diaChange;
-
-        // Moving dot's center to the click position.
-        dotBeingCreated.position = new Vector2(
-          dotBeingCreated.position.x - diaChange / 2,
-          dotBeingCreated.position.y - diaChange / 2,
-        );
+        dotBeingCreated.diameter += defaultDotDiameter * defaultIncrementRatio;
       }
 
       newDots[newDots.length - 1] = { ...dotBeingCreated };
@@ -200,7 +187,6 @@ export class HomeComponent implements AfterViewInit, OnDestroy {
   /** Calculates the force of gravity between given dots. */
   private _gravityBetweenDots(dot1: Dot, dot2: Dot): Vector2 {
     const displacement = dot1.position.displacement(dot2.position);
-
     const displacementDir = displacement.direction();
     const displacementMag = displacement.magnitude();
 

src/shared/components/dot/dot.component.ts

@@ -25,8 +25,8 @@ export class DotComponent implements OnInit {
 
     this.ngStyle = {
       position: 'absolute',
-      top: `${this.dot.position.y}px`,
-      left: `${this.dot.position.x}px`,
+      top: `${this.dot.position.y - this.dot.diameter / 2}px`,
+      left: `${this.dot.position.x - this.dot.diameter / 2}px`,
 
       borderRadius: '50%',
       width: `${this.dot.diameter}px`,