awslabs/diagram-maker-plugin-minimap

Minimap rect offset position not calculated correctly when not in full screen

manevpe opened this issue · 2 comments

Describe the bug
Try using diagram maker in a container, that is not at the top left of the page.
In that case, dragging the minimap rect doesn't work correctly.

To Reproduce
Steps to reproduce the behavior:
To easily reproduce, in the integ examples, in the index.html, add 5-6 divs, before the diagramMakerContainer div.
Build the integ and open one of the examples - if built correctly, you will notice that diagram maker workspace is not starting at the top of the page.
Try dragging the rectangle in the minimap, in order to pan the view.
You will notice that the panning is not correct - it is offset by the position of diagram maker workspace on the screen. I've attached a screenshot with more explanation below.

I've traced the problem to "handleMinimapEvent" function, which accepts the original event and then makes some calculations. On this line:
const rectInitPos = event.dragReference || { x: 0, y: 0 };
it seems that the dragReference is not correct - it is calculated relative to the whole screen, not from the top left of the diagram maker workspace.
Because of that, the offset calculations are off and the dragging doesn't work correctly.

Expected behavior
Dragging events to calculate correctly the offset, when diagram maker workspace is not in the top left of the screen.
I'm not sure whether this is an issue with diagram maker itself, that is not passing the correct data in the dragReference, or that the minimap plugin is using the incorrect data from the event.

If we change the line to this, it works, although it is not allowed in typescript:
const rectInitPos = subtract(event.dragReference, diagramMaker.container.getBoundingClientRect()) || { x: 0, y: 0 };

Screenshots
image
Notice that the X coordinate in the logger are correct, because diagram maker workspace is to the left most position, but the Y coordinates are way off, because it is not at the top. In this case as the rect is at the top left, both X and Y should be 0.

Thank you for reporting the bug.
I was able to fix the issue with your suggestion after making the DiagramMaker.container public.

Screenshot:
Screen Shot 2021-07-12 at 10 25 32 PM

However, I don't think we want to mark the DiagramMaker.container public.

Recomendation
How about we introduce a method under DiagramMaker to expose the container's position? Given the position, the calculation can be done 👍

@manevpe I am going to close this issue but please feel free to reopen if you need more guidance on this from us. Thank you!