Beginner trouble: Re-creating matterjs examples

[Demitor]

Hello!

I am having a hard time wrapping my head around integrating excalibur with matterjs, since I am completely new to game development I figured re-creating an example from matterjs would be a good start. I am trying to re-create the 'slingshot' example from matterjs in excalibur.

I've been using the excalibur-matter example as a base to set the project up, so body and constraint components works like a charm out of the box! My problem is that I am not really sure how the integration works, in the matterjs example they have a MouseConstraint set, and I figure that I need to wire that together with excalibur.
I 've tried a couple of different approaches in order to sync excalibur pointer to the matterjs world. The first thing I tried was to set an event listener on the body attached to the slingshot and set the matterjs body to the position of the cursor:

implemented on the body (actor) attached to the constraint

onInitialize(engine: Engine) {
        this.on('pointerdown', (event) => {
            engine.input.pointers.primary.on('down', (evt) => {
                Body.setPosition(this.matterJs.matterJsBody, evt.worldPos);
            });

            engine.input.pointers.primary.once("up", (event: PointerEvent) => {
                engine.input.pointers.primary.off("move");
            });
        });

The problem I experience here is that when I drag the body on the scene, it wobbles like crazy between the anchor point of the constraint and the cursor. It also releases the 'pull' if I drag the body too quick. And I am guessing it is because I need to wire the excalibur pointer input to the matterjs mouse constraint and remove the current velocity of the body. Is that correct?

I've also tried to implement the MouseConstraint as a component in order to sync the state between excalibur and the matter world, but the problem for me here is that when creating a MouseConstraint the first argument is the matterjs engine, which I would need to pass to either the constructor or to the onAdd function. e.g:

import {Component, Entity} from 'excalibur';
import {Engine, IMouseConstraintDefinition, MouseConstraint} from 'matter-js';

export class MatterJsMouseConstraintComponent extends Component<'matterjs.mouse-constraint'> {
    public readonly type = 'matterjs.mouse-constraint' as const;
    matterJsMouseConstraint!: MouseConstraint;

    constructor(public engine: Engine, public mouseConstraintDefinition: IMouseConstraintDefinition) {
        super();
        this.engine = engine;
    }

    onAdd(owner: Entity) {
        this.matterJsMouseConstraint = MouseConstraint.create(this.engine, this.mouseConstraintDefinition);
    }
}

I later scrapped that and tried to add the MouseConstraint directly in to the MatterJsSystem, so I added the MouseConstraint in the initialize function since I do have access to the matterjs engine in this context.
The Issue I experienced when implementing the MouseConstraint in the MatterJsSystem is that I don't know how to get the excalibur pointer position within the overridden update function, so I was unable to sync the states that way.

I might be on a completely wrong path of implementing the MouseConstraint, but I am out of ideas on how to wire them together. Could you point me in the right direction?

Thank you!