Vuejs wysiwyg designer zoom issue

Question

im having a problem with my project. Since the project is quite big, i wanted to share the code as-is so you can git clone the project.

https://github.com/erdesigns-eu/Vuejs-WYSIWYG

I will first explain what i want to do, and which component im having troubles with. I want to create a WYSIWYG desiger in Vue.js that has ability to zoom among other things. So what i came up with is a component that has one div that contains the actual elements i want to use for designing, and another div that is an overlay which contains the resize handles and frames. This allows me to zoom in on the div containing the actual elements, and update the position of the handles - this way the size of the handles remain while the element can be zoomed.

Now i got things working, i can zoom, and drag elements and all works fine. Except when dragging multiple items. When dragging multiple items and zoom level at 100% all items are dragged relative and the position between the elements remains the same, which is what i want. But when zoomed in, the relative position is incorrectly calculated.

The important part of the code is in the DesignSurface.vue component. Im sure there is alot that can be improved, but i want to tackle one problem at a time. SInce im working on this for a couple of days, and still havent manages to find what exactly im doing wrong - im trying to get some help. Please clone the project, run npm install and npm run dev to start the project in the browser. Select a component and use the CTRL key to select multiple components.

A quick short gif that shows what i mean:

Answer 1

Okay so after a short pause i found the issue, the issue was in the calculation when dragging is started, and in the calculation inside the mousemove handler. Updated code can be found in the project.