How to move SVG element with bobril framework

The onPointerDown, onPointerMove and onPointerUp component lifecycle methods (more info in bobril/index.ts IBobrilComponent) are exactly what you need but with little bit more code.

Use bobril b.registerMouseOwner with your context in onPointerDown method.

onPointerDown(ctx: ICtx, event: b.IBobrilPointerEvent) {    b.registerMouseOwner(ctx);    // Store the initial coordinates    ctx.lastX = event.x;    ctx.lastY = event.y;    return true;},

Then your component can handle mouse move in onPointerMove method even moving outside the element. You only have to be sure that you are still the current owner. So your method can look e.g. like this:

onPointerMove(ctx: ICtx, event: b.IBobrilPointerEvent) {    if (!b.isMouseOwner(ctx))        return false;    if (ctx.lastX === event.x && ctx.lastY === event.y)        return false;    // Call handler if it is registered    if (ctx.data.onMove) {        ctx.data.onMove(event.x - ctx.lastX, event.y - ctx.lastY);    }    // Update coordinates     ctx.lastX = event.x;    ctx.lastY = event.y;    return true;},

Don't forget to release your registration.

onPointerUp(ctx: ICtx, event: b.IBobrilPointerEvent) {    b.releaseMouseOwner();    return true;}

The example above stores the last pointer coordinates into the component context ICtx. Then it can be used to provide deltaX and deltaY to onMove handler. This handler can be registered by input data when you create the node of the component.