Transform scale

What happens: When the draggable element is child of a scaled element (like transform: scale(2)😉 the draggable element has an offset while dragging: It moves faster (scale>1) or slower (scale<1)than the cursor. What should/could happen: Even if it is child of a scaled element, the draggable element could be normally draggable.

Use cases: Applications in which Elements are arranged; adjustment of element size to available space.

Existing Implementations: jsPlumb uses a model in which the programmer registers changes of the scale factor of the container element: https://jsplumbtoolkit.com/doc/zooming.html

I tryed to play with onMouseMove event, but looks like displace init cords of element after that event var scale = /* get the scale */ x = event.pageX / scale, y = event.pageY / scale;

[catc]

So I investigated a few possible solutions for this issue - unfortunately though, the solution is not really simple. Since the purpose of this library was to be a simple microlibrary, I don’t think it makes sense to add a bunch of extra support for a pretty rare edge use case.

I’d suggest to just fork the library and implement support for scaling yourself - it shouldn’t be too difficult to do:

// on https://github.com/catc/displace/blob/master/src/events.js#L22-L23 add scale support
let wOff = e.clientX - el.offsetLeft * YOUR_SCALE;
let hOff = e.clientY - el.offsetTop * YOUR_SCALE;

// and then in the custom move function when initializing
const opts = {
	...
	customMove: function(el, x, y) {
		el.style.left = x / YOUR_SCALE + 'px';
		el.style.top =  y / YOUR_SCALE + 'px';
	},
}

There’s a couple other minor edge cases - like having to customize constrain clamping to reflect the new scale in the customMove fn.

Gonna close this issue for now, but feel free to ask any other questions.

[catc]

Not sure yet - might add a custom override function you can provide that overrides the 1:1 translate to your own custom ratio.