Inconsistent state when rotating + moving

[ctcq]

I'm trying to rotate and then move a RectangularBoxMarkerBase. Here's what I get as output for the top, left and rotationAngle properties accessed from markerArea.getState(). I left out height and width props since they do not change across steps:

---

1. Marker state before rotation:

(index)	0	1
0	top	911.6034718523122
1	left	562.1380115855824
2	rotationAngle	0

2. Now I rotate the marker to >90 degrees. top and left do not change on rotation. Which is fine, since I can infer the actual position from those and the angle:

(index)	0	1
0	top	911.6034718523122
1	left	562.1380115855825
2	rotationAngle	95.69932877020882

3. Now I move the marker to the right:

(index)	0	1
0	top	766.8650685319997
1	left	552.29902232777
2	rotationAngle	95.69932877020882

This is the unexpected part. The values shown here do not correspond to where the marker has been dragged to, or what is shown visually for that matter. See 5. for what I'd expect.

4. State after rotating back to approx 0 degrees. top and left are correct again:

(index)	0	1
0	top	916.1867755928424
1	left	707.1379900074969
2	rotationAngle	0.839002488562528

5. Now rotating back to approx 95 degrees, I obtain what I'd actually have expected at 3:

(index)	0	1
0	top	916.1867755928424
1	left	707.1379900074969
2	rotationAngle	95.67315645833156

---

Not sure if this is a bug, or a documentation issue. I'm aware there are more props exposed by getState, namely containerTransformMatrix which might be the key to this. But it's unclear to me how to compute props from step 5 given the props from step 3 with.

[ailon]

Hi there!

Yes, those matrices are the key. Tbh, that part was done that way during v2 development (5+ years ago) and it was the product of handling multiple edge cases. The goal then was to get the correct behavior visually (interactively) every time and not much thought was placed into doing it programatically through state. So long story short, there's no documentation or proper API for this.

Having said that, if I remember correctly, if you just place the object where you want and just use top/left/width/height/rotationAngle and restore the state you should get an expected placement in the expected location. It's just the editor user-manipulation part that is tricky.

[ctcq]

Hello again. Thanks for looking into this.

I did try your suggested approach, but it doesn't seem to work correctly. Maybe I'm missing something, but the coordinates I get after restoring state are still the same (and 'incorrect' as outlined in my initial post). I even added a timeout between restoring and getting the state, but to no avail.

Just so that we're on the same page, something I omitted in my original post:

I need the top, left, ... props to be correct when persisting, because the marker position needs to be read programmatically in some other place by some other team. Therefore persisted state is as cartesian x-y coordinates. These need to be restored correctly to marker props for further editing with markerjs, and also these need to be 'correct' when used as x-y coordinates from the db.

Even if I didn't have to convert to cartesian and back to top, left props, and would just persist marker state directly, these props would still be 'incorrect' as outlined in my initial post. In order to make them usable outside markerjs, one would have to know the logic how to convert 'incorrect' props to 'correct' ones with those matrices.

So that's actually what I'd like to know: How do I reliable convert top, left, height and width props to cartesian coordinates?

This is what I'm using currently, and it works fine as long as 0 <= rotationAngle < 45

// points in clockwise order, starting at top-left
[
  {
    x: left,
    y: top,
  },
  {
    x: left + width,
    y: top,
  },
  {
    x: left + width,
    y: top + height,
  },
  {
    x: left,
    y: top + height,
  },
],