Position of div children get wrong because of scale transform on div parent

50
April 22, 2019, at 03:30 AM

I'm working on a react app where there is two columns face to face, each columns has rows inside. Each rows of differents columns can be connect by one or many lines. Easy. The difficulty is that all the app has to be "pannable and zoomable". Which use css transform attribute which mess with the positioning of elements. I almost have something that works. I manage the drag n drop of the rows inside the columns with beautiful-react-dnd using React.createPortal() to manage the position of the draggable elements. I save in my redux store positions of the point in each rows where a line can be connected. I have a component "Line" that take as props origin position to end position. Like that, when my rows are dragged, line are moving in real time, it's work perfectly until I zoom and the scale transform is modified.

When doing that, my line component is scaled, and i can't manage to counter the scale effect. Per example, if don't touch the zoom, and drow a line between two rows, it's working. If I unzoom and create a new Line, even if the coordinate of points are still good compare to parent element (I listen to the wheel event and update the coordinate) which make the calculation of the length and the angle correct for the positioning, my line end up too short and badly positioned because of the scaling.

I basically try everything that I found on the net in term of css. I try to scale the Line inverse to the zoom to counterbalance, the effect, but not working. I try to build the zoom without the scale attribute, but with the z-axis and perspective, which bring more positioning problems^^. I tried to listen to change due to the pan and the zoom to update coordinates of the lines container, which works great for the pan (transform: translate(x, y), but not for the scale.

The problem is when react mount a component when the scale of parent is not at 1.

I expect the behavior of moving elements to be the same no matter the scale transform apply to parent div.

If you have any advice, thanks!

READ ALSO
Is it possible to add a two dot in a variable name in Javascript?

Is it possible to add a two dot in a variable name in Javascript?

i want to create a variable like this in javascript

26
Load images by mouseclick

Load images by mouseclick

I am trying do load apng file with p5

20
expo background push notfication in iOS

expo background push notfication in iOS

At first, I was worried that expo had a custom notification system (had me thinking "coulda had a p8", if you know the commercial like that, haha)In the end, I was impressed with how direct and easy sending messages with expo's push notification service...

28
Post back on checkbox change

Post back on checkbox change

I want to post back whenever checkbox is changed for a Tree view, I searched and found answers but it isn't workingWhen i debug it never gets to the event function

50