src/dep/showDebugDirtyRect.js

var DebugRect = (function () {
    function DebugRect(style) {
        var dom = this.dom = document.createElement('div');
        dom.className = 'ec-debug-dirty-rect';
        style = Object.assign({}, style);
        Object.assign(style, {
            backgroundColor: 'rgba(0, 0, 255, 0.2)',
            border: '1px solid #00f'
        });
        dom.style.cssText = "\nposition: absolute;\nopacity: 0;\ntransition: opacity 0.5s linear;\npointer-events: none;\n";
        for (var key in style) {
            if (style.hasOwnProperty(key)) {
                dom.style[key] = style[key];
            }
        }
    }
    DebugRect.prototype.update = function (rect) {
        var domStyle = this.dom.style;
        domStyle.width = rect.width + 'px';
        domStyle.height = rect.height + 'px';
        domStyle.left = rect.x + 'px';
        domStyle.top = rect.y + 'px';
    };
    DebugRect.prototype.hide = function () {
        this.dom.style.opacity = '0';
    };
    DebugRect.prototype.show = function () {
        var _this = this;
        clearTimeout(this._hideTimeout);
        this.dom.style.opacity = '1';
        this._hideTimeout = setTimeout(function () {
            _this.hide();
        }, 500);
    };
    return DebugRect;
}());
export default function (zr, opts) {
    opts = opts || {};
    var painter = zr.painter;
    if (!painter.getLayers) {
        throw new Error('Debug dirty rect can only been used on canvas renderer.');
    }
    if (painter.isSingleCanvas()) {
        throw new Error('Debug dirty rect can only been used on zrender inited with container.');
    }
    var debugViewRoot = document.createElement('div');
    debugViewRoot.style.cssText = "\nposition:absolute;\nleft:0;\ntop:0;\nright:0;\nbottom:0;\npointer-events:none;\n";
    debugViewRoot.className = 'ec-debug-dirty-rect-container';
    var debugRects = [];
    var dom = zr.dom;
    dom.appendChild(debugViewRoot);
    var computedStyle = getComputedStyle(dom);
    if (computedStyle.position === 'static') {
        dom.style.position = 'relative';
    }
    zr.on('rendered', function () {
        if (painter.getLayers) {
            var idx_1 = 0;
            painter.eachBuiltinLayer(function (layer) {
                if (!layer.debugGetPaintRects) {
                    return;
                }
                var paintRects = layer.debugGetPaintRects();
                for (var i = 0; i < paintRects.length; i++) {
                    if (!debugRects[idx_1]) {
                        debugRects[idx_1] = new DebugRect(opts.style);
                        debugViewRoot.appendChild(debugRects[idx_1].dom);
                    }
                    debugRects[idx_1].show();
                    debugRects[idx_1].update(paintRects[i]);
                    idx_1++;
                }
            });
            for (var i = idx_1; i < debugRects.length; i++) {
                debugRects[i].hide();
            }
        }
    });
}