diff --git a/.github/workflows/build-pages.yml b/.github/workflows/build-pages.yml index 4a347b2..dcb5f13 100644 --- a/.github/workflows/build-pages.yml +++ b/.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: diff --git a/src/dom.ts b/src/dom.ts index b4bde18..b59020d 100644 --- a/src/dom.ts +++ b/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); diff --git a/src/main.ts b/src/main.ts index ecd8ed0..171b1fc 100644 --- a/src/main.ts +++ b/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,7 +25,6 @@ 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; @@ -33,7 +32,6 @@ 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; @@ -41,7 +39,6 @@ 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.