showDebugDirtyRect.js 3.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. import { extend } from '../core/util.js';
  2. var DebugRect = (function () {
  3. function DebugRect(style) {
  4. var dom = this.dom = document.createElement('div');
  5. dom.className = 'ec-debug-dirty-rect';
  6. style = extend({}, style);
  7. extend(style, {
  8. backgroundColor: 'rgba(0, 0, 255, 0.2)',
  9. border: '1px solid #00f'
  10. });
  11. dom.style.cssText = "\nposition: absolute;\nopacity: 0;\ntransition: opacity 0.5s linear;\npointer-events: none;\n";
  12. for (var key in style) {
  13. if (style.hasOwnProperty(key)) {
  14. dom.style[key] = style[key];
  15. }
  16. }
  17. }
  18. DebugRect.prototype.update = function (rect) {
  19. var domStyle = this.dom.style;
  20. domStyle.width = rect.width + 'px';
  21. domStyle.height = rect.height + 'px';
  22. domStyle.left = rect.x + 'px';
  23. domStyle.top = rect.y + 'px';
  24. };
  25. DebugRect.prototype.hide = function () {
  26. this.dom.style.opacity = '0';
  27. };
  28. DebugRect.prototype.show = function (autoHideDelay) {
  29. var _this = this;
  30. clearTimeout(this._hideTimeout);
  31. this.dom.style.opacity = '1';
  32. this._hideTimeout = setTimeout(function () {
  33. _this.hide();
  34. }, autoHideDelay || 1000);
  35. };
  36. return DebugRect;
  37. }());
  38. export default function showDebugDirtyRect(zr, opts) {
  39. opts = opts || {};
  40. var painter = zr.painter;
  41. if (!painter.getLayers) {
  42. throw new Error('Debug dirty rect can only been used on canvas renderer.');
  43. }
  44. if (painter.isSingleCanvas()) {
  45. throw new Error('Debug dirty rect can only been used on zrender inited with container.');
  46. }
  47. var debugViewRoot = document.createElement('div');
  48. debugViewRoot.style.cssText = "\nposition:absolute;\nleft:0;\ntop:0;\nright:0;\nbottom:0;\npointer-events:none;\n";
  49. debugViewRoot.className = 'ec-debug-dirty-rect-container';
  50. var debugRects = [];
  51. var dom = zr.dom;
  52. dom.appendChild(debugViewRoot);
  53. var computedStyle = getComputedStyle(dom);
  54. if (computedStyle.position === 'static') {
  55. dom.style.position = 'relative';
  56. }
  57. zr.on('rendered', function () {
  58. if (painter.getLayers) {
  59. var idx_1 = 0;
  60. painter.eachBuiltinLayer(function (layer) {
  61. if (!layer.debugGetPaintRects) {
  62. return;
  63. }
  64. var paintRects = layer.debugGetPaintRects();
  65. for (var i = 0; i < paintRects.length; i++) {
  66. if (!paintRects[i].width || !paintRects[i].height) {
  67. continue;
  68. }
  69. if (!debugRects[idx_1]) {
  70. debugRects[idx_1] = new DebugRect(opts.style);
  71. debugViewRoot.appendChild(debugRects[idx_1].dom);
  72. }
  73. debugRects[idx_1].show(opts.autoHideDelay);
  74. debugRects[idx_1].update(paintRects[i]);
  75. idx_1++;
  76. }
  77. });
  78. for (var i = idx_1; i < debugRects.length; i++) {
  79. debugRects[i].hide();
  80. }
  81. }
  82. });
  83. }