123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297 |
- import { __extends } from "tslib";
- import * as util from '../core/util.js';
- import { devicePixelRatio } from '../config.js';
- import Eventful from '../core/Eventful.js';
- import { getCanvasGradient } from './helper.js';
- import { createCanvasPattern } from './graphic.js';
- import BoundingRect from '../core/BoundingRect.js';
- import { REDRAW_BIT } from '../graphic/constants.js';
- import { platformApi } from '../core/platform.js';
- function createDom(id, painter, dpr) {
- var newDom = platformApi.createCanvas();
- var width = painter.getWidth();
- var height = painter.getHeight();
- var newDomStyle = newDom.style;
- if (newDomStyle) {
- newDomStyle.position = 'absolute';
- newDomStyle.left = '0';
- newDomStyle.top = '0';
- newDomStyle.width = width + 'px';
- newDomStyle.height = height + 'px';
- newDom.setAttribute('data-zr-dom-id', id);
- }
- newDom.width = width * dpr;
- newDom.height = height * dpr;
- return newDom;
- }
- ;
- var Layer = (function (_super) {
- __extends(Layer, _super);
- function Layer(id, painter, dpr) {
- var _this = _super.call(this) || this;
- _this.motionBlur = false;
- _this.lastFrameAlpha = 0.7;
- _this.dpr = 1;
- _this.virtual = false;
- _this.config = {};
- _this.incremental = false;
- _this.zlevel = 0;
- _this.maxRepaintRectCount = 5;
- _this.__dirty = true;
- _this.__firstTimePaint = true;
- _this.__used = false;
- _this.__drawIndex = 0;
- _this.__startIndex = 0;
- _this.__endIndex = 0;
- _this.__prevStartIndex = null;
- _this.__prevEndIndex = null;
- var dom;
- dpr = dpr || devicePixelRatio;
- if (typeof id === 'string') {
- dom = createDom(id, painter, dpr);
- }
- else if (util.isObject(id)) {
- dom = id;
- id = dom.id;
- }
- _this.id = id;
- _this.dom = dom;
- var domStyle = dom.style;
- if (domStyle) {
- util.disableUserSelect(dom);
- dom.onselectstart = function () { return false; };
- domStyle.padding = '0';
- domStyle.margin = '0';
- domStyle.borderWidth = '0';
- }
- _this.painter = painter;
- _this.dpr = dpr;
- return _this;
- }
- Layer.prototype.getElementCount = function () {
- return this.__endIndex - this.__startIndex;
- };
- Layer.prototype.afterBrush = function () {
- this.__prevStartIndex = this.__startIndex;
- this.__prevEndIndex = this.__endIndex;
- };
- Layer.prototype.initContext = function () {
- this.ctx = this.dom.getContext('2d');
- this.ctx.dpr = this.dpr;
- };
- Layer.prototype.setUnpainted = function () {
- this.__firstTimePaint = true;
- };
- Layer.prototype.createBackBuffer = function () {
- var dpr = this.dpr;
- this.domBack = createDom('back-' + this.id, this.painter, dpr);
- this.ctxBack = this.domBack.getContext('2d');
- if (dpr !== 1) {
- this.ctxBack.scale(dpr, dpr);
- }
- };
- Layer.prototype.createRepaintRects = function (displayList, prevList, viewWidth, viewHeight) {
- if (this.__firstTimePaint) {
- this.__firstTimePaint = false;
- return null;
- }
- var mergedRepaintRects = [];
- var maxRepaintRectCount = this.maxRepaintRectCount;
- var full = false;
- var pendingRect = new BoundingRect(0, 0, 0, 0);
- function addRectToMergePool(rect) {
- if (!rect.isFinite() || rect.isZero()) {
- return;
- }
- if (mergedRepaintRects.length === 0) {
- var boundingRect = new BoundingRect(0, 0, 0, 0);
- boundingRect.copy(rect);
- mergedRepaintRects.push(boundingRect);
- }
- else {
- var isMerged = false;
- var minDeltaArea = Infinity;
- var bestRectToMergeIdx = 0;
- for (var i = 0; i < mergedRepaintRects.length; ++i) {
- var mergedRect = mergedRepaintRects[i];
- if (mergedRect.intersect(rect)) {
- var pendingRect_1 = new BoundingRect(0, 0, 0, 0);
- pendingRect_1.copy(mergedRect);
- pendingRect_1.union(rect);
- mergedRepaintRects[i] = pendingRect_1;
- isMerged = true;
- break;
- }
- else if (full) {
- pendingRect.copy(rect);
- pendingRect.union(mergedRect);
- var aArea = rect.width * rect.height;
- var bArea = mergedRect.width * mergedRect.height;
- var pendingArea = pendingRect.width * pendingRect.height;
- var deltaArea = pendingArea - aArea - bArea;
- if (deltaArea < minDeltaArea) {
- minDeltaArea = deltaArea;
- bestRectToMergeIdx = i;
- }
- }
- }
- if (full) {
- mergedRepaintRects[bestRectToMergeIdx].union(rect);
- isMerged = true;
- }
- if (!isMerged) {
- var boundingRect = new BoundingRect(0, 0, 0, 0);
- boundingRect.copy(rect);
- mergedRepaintRects.push(boundingRect);
- }
- if (!full) {
- full = mergedRepaintRects.length >= maxRepaintRectCount;
- }
- }
- }
- for (var i = this.__startIndex; i < this.__endIndex; ++i) {
- var el = displayList[i];
- if (el) {
- var shouldPaint = el.shouldBePainted(viewWidth, viewHeight, true, true);
- var prevRect = el.__isRendered && ((el.__dirty & REDRAW_BIT) || !shouldPaint)
- ? el.getPrevPaintRect()
- : null;
- if (prevRect) {
- addRectToMergePool(prevRect);
- }
- var curRect = shouldPaint && ((el.__dirty & REDRAW_BIT) || !el.__isRendered)
- ? el.getPaintRect()
- : null;
- if (curRect) {
- addRectToMergePool(curRect);
- }
- }
- }
- for (var i = this.__prevStartIndex; i < this.__prevEndIndex; ++i) {
- var el = prevList[i];
- var shouldPaint = el.shouldBePainted(viewWidth, viewHeight, true, true);
- if (el && (!shouldPaint || !el.__zr) && el.__isRendered) {
- var prevRect = el.getPrevPaintRect();
- if (prevRect) {
- addRectToMergePool(prevRect);
- }
- }
- }
- var hasIntersections;
- do {
- hasIntersections = false;
- for (var i = 0; i < mergedRepaintRects.length;) {
- if (mergedRepaintRects[i].isZero()) {
- mergedRepaintRects.splice(i, 1);
- continue;
- }
- for (var j = i + 1; j < mergedRepaintRects.length;) {
- if (mergedRepaintRects[i].intersect(mergedRepaintRects[j])) {
- hasIntersections = true;
- mergedRepaintRects[i].union(mergedRepaintRects[j]);
- mergedRepaintRects.splice(j, 1);
- }
- else {
- j++;
- }
- }
- i++;
- }
- } while (hasIntersections);
- this._paintRects = mergedRepaintRects;
- return mergedRepaintRects;
- };
- Layer.prototype.debugGetPaintRects = function () {
- return (this._paintRects || []).slice();
- };
- Layer.prototype.resize = function (width, height) {
- var dpr = this.dpr;
- var dom = this.dom;
- var domStyle = dom.style;
- var domBack = this.domBack;
- if (domStyle) {
- domStyle.width = width + 'px';
- domStyle.height = height + 'px';
- }
- dom.width = width * dpr;
- dom.height = height * dpr;
- if (domBack) {
- domBack.width = width * dpr;
- domBack.height = height * dpr;
- if (dpr !== 1) {
- this.ctxBack.scale(dpr, dpr);
- }
- }
- };
- Layer.prototype.clear = function (clearAll, clearColor, repaintRects) {
- var dom = this.dom;
- var ctx = this.ctx;
- var width = dom.width;
- var height = dom.height;
- clearColor = clearColor || this.clearColor;
- var haveMotionBLur = this.motionBlur && !clearAll;
- var lastFrameAlpha = this.lastFrameAlpha;
- var dpr = this.dpr;
- var self = this;
- if (haveMotionBLur) {
- if (!this.domBack) {
- this.createBackBuffer();
- }
- this.ctxBack.globalCompositeOperation = 'copy';
- this.ctxBack.drawImage(dom, 0, 0, width / dpr, height / dpr);
- }
- var domBack = this.domBack;
- function doClear(x, y, width, height) {
- ctx.clearRect(x, y, width, height);
- if (clearColor && clearColor !== 'transparent') {
- var clearColorGradientOrPattern = void 0;
- if (util.isGradientObject(clearColor)) {
- var shouldCache = clearColor.global || (clearColor.__width === width
- && clearColor.__height === height);
- clearColorGradientOrPattern = shouldCache
- && clearColor.__canvasGradient
- || getCanvasGradient(ctx, clearColor, {
- x: 0,
- y: 0,
- width: width,
- height: height
- });
- clearColor.__canvasGradient = clearColorGradientOrPattern;
- clearColor.__width = width;
- clearColor.__height = height;
- }
- else if (util.isImagePatternObject(clearColor)) {
- clearColor.scaleX = clearColor.scaleX || dpr;
- clearColor.scaleY = clearColor.scaleY || dpr;
- clearColorGradientOrPattern = createCanvasPattern(ctx, clearColor, {
- dirty: function () {
- self.setUnpainted();
- self.__painter.refresh();
- }
- });
- }
- ctx.save();
- ctx.fillStyle = clearColorGradientOrPattern || clearColor;
- ctx.fillRect(x, y, width, height);
- ctx.restore();
- }
- if (haveMotionBLur) {
- ctx.save();
- ctx.globalAlpha = lastFrameAlpha;
- ctx.drawImage(domBack, x, y, width, height);
- ctx.restore();
- }
- }
- ;
- if (!repaintRects || haveMotionBLur) {
- doClear(0, 0, width, height);
- }
- else if (repaintRects.length) {
- util.each(repaintRects, function (rect) {
- doClear(rect.x * dpr, rect.y * dpr, rect.width * dpr, rect.height * dpr);
- });
- }
- };
- return Layer;
- }(Eventful));
- export default Layer;
|