How to move an SVG element using a bobril frame

Question

I want to move an SVG element (circle) with the mouse in bobril. What method of life cycle components should I use? I tried using onPointerDown , etc., but these methods handle events inside the circle. Should I use drag and drop or is there another way to move the circle around the entire SVG?

Answer 1

The life cycle methods of the onPointerDown , onPointerMove and onPointerUp (more details in bobril / index.ts IBobrilComponent ) are exactly what you need but with less code.

Use bobril b.registerMouseOwner with your context in the 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 the mouse movement in the onPointerMove method, even moving beyond the element. You only need to be sure that you are still the current owner. So your method might look like this. eg:

 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; }, 

Do not forget to free your registration.

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

The above example stores the last coordinates of the pointer in the context of the ICtx component. It can then be used to provide deltaY and deltaY in the onMove handler. This handler can be registered with the input when creating the node component.