@angular/cdk/drag-drop inside panzoom

Question

I'm using Angular 10 with panzoom . Inside the panzoom element I have draggable elements using @angular/cdk/drag-drop .

This works fine until I zoom in or out with the panzoom. When zoomed in the dragging is accelerated and moves faster than my mouse. When zoomed out it's decelerated and moves more slowly than my mouse.

I assume this to be due to with pixel location vs scaled elements within the panzoom somehow.

I found this answer which dealt with it, but I couldn't replicate it and it was using JQuery draggables.

Does anyone know how to make the draggable elements keep the same speed as the mouse when zoomed in or out with panzoom and angular-cdk-drag-drop?

Thank you.

Answer 1

This has been answered here already: Angular CDK drag-drop with zoom by CSS-property “transform: scale(0.5)” doesn't work as expected

The solution is to use the cdkDragConstrainPosition output from the CDK to adjust for the current zoom scale.

You can get the current scale from panzoom in the following way:

console.log(instance.getTransform()); // prints {scale: 1.2, x: 10, y: 10}

A working StackBlitz with panzoom can be found here: https://stackblitz.com/edit/angular-ivy-b2816b?file=src/app/app.component.ts