Merge pull request #1 from gastonmorixe/gastonmorixe-patch-1

DOM Mouse handler move to dom entity

Author: gastonmorixe

.github/workflows/build-pages.yml

@@ -6,9 +6,9 @@ on:
   push:
     branches:
       - main         # Trigger on push to the main branch
-  pull_request:
-    branches:
-      - main         # Trigger on PRs to the main branch
+#  pull_request:
+#    branches:
+#      - main         # Trigger on PRs to the main branch
 
 jobs:
   build:

src/dom.ts

@@ -20,14 +20,19 @@ export class MouseForceSystem extends System {
       const position = entity.getComponent(PositionComponent);
       const velocity = entity.getComponent(VelocityComponent);
       const force = entity.getComponent(ForceComponent);
-      const mouseDragForce = entity.getComponent(MouseDragComponent);
+      const mouseDrag = entity.getComponent(MouseDragComponent);
 
+      // TODO: Move this to init. Make Engine/System call init on all systems
+      if (mouseDrag && !mouseDrag.dragHandler) {
+        mouseDrag.dragHandler = new DragHandler(entity);
+      }
+      
       if (
         position &&
         velocity &&
         force &&
-        mouseDragForce &&
-        mouseDragForce.isDragging
+        mouseDrag &&
+        mouseDrag.isDragging
       ) {
         // console.log(
         //   "[MouseForceSystem]",
@@ -38,8 +43,8 @@ export class MouseForceSystem extends System {
         //     mouseDrag,
         //   }),
         // );
-        const dx = mouseDragForce.targetX - position.x;
-        const dy = mouseDragForce.targetY - position.y;
+        const dx = mouseDrag.targetX - position.x;
+        const dy = mouseDrag.targetY - position.y;
 
         // Apply force proportional to the distance (like a spring)
         const fx = this.dragStrength * dx - this.damping * velocity.vx;
@@ -64,7 +69,8 @@ export class MouseDragComponent extends Component {
   targetY: number = 0;
   offsetX: number = 0; // Offset from the mouse click to the box's position
   offsetY: number = 0;
-
+  dragHandler?: DragHandler;
+  
   setTarget(x: number, y: number) {
     this.targetX = x;
     this.targetY = y;
@@ -99,6 +105,7 @@ export class DOMUpdateSystem extends System {
 
       if (position && domComponent) {
         const domElement = domComponent.domElement;
+        // TODO: Update only if it changed
         if (domElement) {
           domElement.style.transform = `translate(${position.x}px, ${position.y}px)`;
         }
@@ -107,7 +114,12 @@ export class DOMUpdateSystem extends System {
   }
 }
 
-export class DOMMouseDragHandler {
+export class DragHandler {
+  constructor(entity: Entity) {
+    // super();
+    this.initializeDragListeners(entity);
+  }
+  
   initializeDragListeners(entity: Entity) {
     const domComponent = entity.getComponent(DOMComponent);
     const mouseDrag = entity.getComponent(MouseDragComponent);

src/main.ts

@@ -7,7 +7,7 @@ import { AnimationEngine } from "./engine";
 import { MovementSystem, FrictionSystem } from "./systems";
 
 // Specialized Systems and Entities
-import { MouseForceSystem, DOMUpdateSystem, DOMMouseDragHandler } from "./dom";
+import { MouseForceSystem, DOMUpdateSystem } from "./dom";
 import { BoxEntity, AnchorEntity } from "./entities";
 import { SpringEntity, SpringPhysicsSystem } from "./spring";
 import { ChartSystem } from "./chart";
@@ -25,23 +25,20 @@ const anchorEntity = new AnchorEntity({ x: 100, y: 100 }, "anchor");
 
 // Create a spring entity that connects box1 and anchor
 const springEntity = new SpringEntity(boxEntity, anchorEntity, 0.2, 0.05, 1.0);
-springEntity.name = "spring";
 
 // Create second box entity
 const boxElement2 = document.getElementById("box2") as HTMLElement;
 const boxEntity2 = new BoxEntity(boxElement2, { x: 250, y: 100 }, "box2");
 
 // Creating the spring force connecting box and box2
 const springEntity2 = new SpringEntity(boxEntity, boxEntity2, 0.2, 0.05, 2.0);
-springEntity2.name = "spring2";
 
 // Create third box entity
 const boxElement3 = document.getElementById("box3") as HTMLElement;
 const boxEntity3 = new BoxEntity(boxElement3, { x: 400, y: 100 }, "box3");
 
 // Creating the spring force connecting box2 and box3
 const springEntity3 = new SpringEntity(boxEntity2, boxEntity3, 0.1, 0.05, 1.0);
-springEntity3.name = "spring3";
 
 //
 // --- Systems ---
@@ -62,16 +59,6 @@ const mouseForceSystem = new MouseForceSystem(0.2, 0.1); // Drag strength and da
 // Set up the DOM update system (handles syncing the DOM with the entity position)
 const domUpdateSystem = new DOMUpdateSystem();
 
-// Set up the DOM mouse drag handler to handle mouse events via the DOM component
-const domMouseDragHandler = new DOMMouseDragHandler();
-domMouseDragHandler.initializeDragListeners(boxEntity);
-
-const domMouseDragHandler2 = new DOMMouseDragHandler();
-domMouseDragHandler2.initializeDragListeners(boxEntity2);
-
-const domMouseDragHandler3 = new DOMMouseDragHandler();
-domMouseDragHandler3.initializeDragListeners(boxEntity3);
-
 //
 // -- Engine --
 //
@@ -106,7 +93,7 @@ if (chartContext) {
 engine.start();
 
 // TODO
-// -[ ] Prepare specific entities kinds (anchor, box, etc). The components should be added in the constructor like the spring, this minimizes the amount of components to add manually to an entity.
+// -[x] Prepare specific entities kinds (anchor, box, etc). The components should be added in the constructor like the spring, this minimizes the amount of components to add manually to an entity.
 // -[ ] Cleanup creation examples, it's easy to forget to add entities to the engine if not added right after creation.
 // -[ ] Take initial and drop velocity into account
 // -[ ] Attach multiple entities to the spring force. Make a cloth like simulation.