Canvas Coordinates
Reactodia uses different coordinate systems when dealing with infinitely-resizable and scalable canvas content.
Coordinate types
| Type | Description |
|---|---|
| paper | Main coordinates system for diagram content (elements, links, etc) — unlimited in size, always in 1:1 scale with element and link templates. |
| scrollable pane | Represents scaled but still unlimited in size layer, natively scrolled inside viewport container. It is possible to use totalPaneSize() and paneTopLeft() to get current pane bounds with the same coordinates type. |
| client (viewport) | Represents fixed-size "window" into visible graph area, equal to DOM client coordinates for the Canvas component. |
| page | Same as DOM page coordinates — generally used when handling pointer-related events. |
Converting coordinates from/to different types
| From type | To type | Method |
|---|---|---|
| paper | scrollable pane | paperToScrollablePaneCoords() |
| page | paperToPageCoords() | |
| scrollable pane | paper | scrollablePaneToPaperCoords() |
| client (viewport) | scrollablePaneToClientCoords() | |
| client (viewport) | paper | clientToPaperCoords() |
| scrollable pane | clientToScrollablePaneCoords() | |
| page | paper | pageToPaperCoords() |