coord.js 3.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. import { Dom } from '@antv/x6-common';
  2. import { Point, Rectangle } from '@antv/x6-geometry';
  3. import { Base } from './base';
  4. import { Util } from '../util';
  5. export class CoordManager extends Base {
  6. getClientMatrix() {
  7. return Dom.createSVGMatrix(this.view.stage.getScreenCTM());
  8. }
  9. /**
  10. * Returns coordinates of the graph viewport, relative to the window.
  11. */
  12. getClientOffset() {
  13. // see: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
  14. const rect = this.view.svg.getBoundingClientRect();
  15. return new Point(rect.left, rect.top);
  16. }
  17. /**
  18. * Returns coordinates of the graph viewport, relative to the document.
  19. */
  20. getPageOffset() {
  21. // see: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
  22. return this.getClientOffset().translate(window.scrollX, window.scrollY);
  23. }
  24. snapToGrid(x, y) {
  25. const p = typeof x === 'number'
  26. ? this.clientToLocalPoint(x, y)
  27. : this.clientToLocalPoint(x.x, x.y);
  28. return p.snapToGrid(this.graph.getGridSize());
  29. }
  30. localToGraphPoint(x, y) {
  31. const localPoint = Point.create(x, y);
  32. return Util.transformPoint(localPoint, this.graph.matrix());
  33. }
  34. localToClientPoint(x, y) {
  35. const localPoint = Point.create(x, y);
  36. return Util.transformPoint(localPoint, this.getClientMatrix());
  37. }
  38. localToPagePoint(x, y) {
  39. const p = typeof x === 'number'
  40. ? this.localToGraphPoint(x, y)
  41. : this.localToGraphPoint(x);
  42. return p.translate(this.getPageOffset());
  43. }
  44. localToGraphRect(x, y, width, height) {
  45. const localRect = Rectangle.create(x, y, width, height);
  46. return Util.transformRectangle(localRect, this.graph.matrix());
  47. }
  48. localToClientRect(x, y, width, height) {
  49. const localRect = Rectangle.create(x, y, width, height);
  50. return Util.transformRectangle(localRect, this.getClientMatrix());
  51. }
  52. localToPageRect(x, y, width, height) {
  53. const rect = typeof x === 'number'
  54. ? this.localToGraphRect(x, y, width, height)
  55. : this.localToGraphRect(x);
  56. return rect.translate(this.getPageOffset());
  57. }
  58. graphToLocalPoint(x, y) {
  59. const graphPoint = Point.create(x, y);
  60. return Util.transformPoint(graphPoint, this.graph.matrix().inverse());
  61. }
  62. clientToLocalPoint(x, y) {
  63. const clientPoint = Point.create(x, y);
  64. return Util.transformPoint(clientPoint, this.getClientMatrix().inverse());
  65. }
  66. clientToGraphPoint(x, y) {
  67. const clientPoint = Point.create(x, y);
  68. return Util.transformPoint(clientPoint, this.graph.matrix().multiply(this.getClientMatrix().inverse()));
  69. }
  70. pageToLocalPoint(x, y) {
  71. const pagePoint = Point.create(x, y);
  72. const graphPoint = pagePoint.diff(this.getPageOffset());
  73. return this.graphToLocalPoint(graphPoint);
  74. }
  75. graphToLocalRect(x, y, width, height) {
  76. const graphRect = Rectangle.create(x, y, width, height);
  77. return Util.transformRectangle(graphRect, this.graph.matrix().inverse());
  78. }
  79. clientToLocalRect(x, y, width, height) {
  80. const clientRect = Rectangle.create(x, y, width, height);
  81. return Util.transformRectangle(clientRect, this.getClientMatrix().inverse());
  82. }
  83. clientToGraphRect(x, y, width, height) {
  84. const clientRect = Rectangle.create(x, y, width, height);
  85. return Util.transformRectangle(clientRect, this.graph.matrix().multiply(this.getClientMatrix().inverse()));
  86. }
  87. pageToLocalRect(x, y, width, height) {
  88. const graphRect = Rectangle.create(x, y, width, height);
  89. const pageOffset = this.getPageOffset();
  90. graphRect.x -= pageOffset.x;
  91. graphRect.y -= pageOffset.y;
  92. return this.graphToLocalRect(graphRect);
  93. }
  94. }
  95. //# sourceMappingURL=coord.js.map