dom.js 3.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. import env from './env.js';
  2. import { buildTransformer } from './fourPointsTransform.js';
  3. var EVENT_SAVED_PROP = '___zrEVENTSAVED';
  4. var _calcOut = [];
  5. export function transformLocalCoord(out, elFrom, elTarget, inX, inY) {
  6. return transformCoordWithViewport(_calcOut, elFrom, inX, inY, true)
  7. && transformCoordWithViewport(out, elTarget, _calcOut[0], _calcOut[1]);
  8. }
  9. export function transformCoordWithViewport(out, el, inX, inY, inverse) {
  10. if (el.getBoundingClientRect && env.domSupported && !isCanvasEl(el)) {
  11. var saved = el[EVENT_SAVED_PROP] || (el[EVENT_SAVED_PROP] = {});
  12. var markers = prepareCoordMarkers(el, saved);
  13. var transformer = preparePointerTransformer(markers, saved, inverse);
  14. if (transformer) {
  15. transformer(out, inX, inY);
  16. return true;
  17. }
  18. }
  19. return false;
  20. }
  21. function prepareCoordMarkers(el, saved) {
  22. var markers = saved.markers;
  23. if (markers) {
  24. return markers;
  25. }
  26. markers = saved.markers = [];
  27. var propLR = ['left', 'right'];
  28. var propTB = ['top', 'bottom'];
  29. for (var i = 0; i < 4; i++) {
  30. var marker = document.createElement('div');
  31. var stl = marker.style;
  32. var idxLR = i % 2;
  33. var idxTB = (i >> 1) % 2;
  34. stl.cssText = [
  35. 'position: absolute',
  36. 'visibility: hidden',
  37. 'padding: 0',
  38. 'margin: 0',
  39. 'border-width: 0',
  40. 'user-select: none',
  41. 'width:0',
  42. 'height:0',
  43. propLR[idxLR] + ':0',
  44. propTB[idxTB] + ':0',
  45. propLR[1 - idxLR] + ':auto',
  46. propTB[1 - idxTB] + ':auto',
  47. ''
  48. ].join('!important;');
  49. el.appendChild(marker);
  50. markers.push(marker);
  51. }
  52. return markers;
  53. }
  54. function preparePointerTransformer(markers, saved, inverse) {
  55. var transformerName = inverse ? 'invTrans' : 'trans';
  56. var transformer = saved[transformerName];
  57. var oldSrcCoords = saved.srcCoords;
  58. var srcCoords = [];
  59. var destCoords = [];
  60. var oldCoordTheSame = true;
  61. for (var i = 0; i < 4; i++) {
  62. var rect = markers[i].getBoundingClientRect();
  63. var ii = 2 * i;
  64. var x = rect.left;
  65. var y = rect.top;
  66. srcCoords.push(x, y);
  67. oldCoordTheSame = oldCoordTheSame && oldSrcCoords && x === oldSrcCoords[ii] && y === oldSrcCoords[ii + 1];
  68. destCoords.push(markers[i].offsetLeft, markers[i].offsetTop);
  69. }
  70. return (oldCoordTheSame && transformer)
  71. ? transformer
  72. : (saved.srcCoords = srcCoords,
  73. saved[transformerName] = inverse
  74. ? buildTransformer(destCoords, srcCoords)
  75. : buildTransformer(srcCoords, destCoords));
  76. }
  77. export function isCanvasEl(el) {
  78. return el.nodeName.toUpperCase() === 'CANVAS';
  79. }
  80. var replaceReg = /([&<>"'])/g;
  81. var replaceMap = {
  82. '&': '&amp;',
  83. '<': '&lt;',
  84. '>': '&gt;',
  85. '"': '&quot;',
  86. '\'': '&#39;'
  87. };
  88. export function encodeHTML(source) {
  89. return source == null
  90. ? ''
  91. : (source + '').replace(replaceReg, function (str, c) {
  92. return replaceMap[c];
  93. });
  94. }