cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
286 lines (285 loc) • 9.7 kB
JavaScript
import { __extends } from "../../../tslib/tslib.es6.mjs";
import { isObject, disableUserSelect, each, isGradientObject, isImagePatternObject } from "../core/util.mjs";
import { devicePixelRatio } from "../config.mjs";
import Eventful from "../core/Eventful.mjs";
import { getCanvasGradient } from "./helper.mjs";
import { createCanvasPattern } from "./graphic.mjs";
import BoundingRect from "../core/BoundingRect.mjs";
import { REDRAW_BIT } from "../graphic/constants.mjs";
import { platformApi } from "../core/platform.mjs";
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(Layer2, _super);
function Layer2(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 (isObject(id)) {
dom = id;
id = dom.id;
}
_this.id = id;
_this.dom = dom;
var domStyle = dom.style;
if (domStyle) {
disableUserSelect(dom);
dom.onselectstart = function() {
return false;
};
domStyle.padding = "0";
domStyle.margin = "0";
domStyle.borderWidth = "0";
}
_this.painter = painter;
_this.dpr = dpr;
return _this;
}
Layer2.prototype.getElementCount = function() {
return this.__endIndex - this.__startIndex;
};
Layer2.prototype.afterBrush = function() {
this.__prevStartIndex = this.__startIndex;
this.__prevEndIndex = this.__endIndex;
};
Layer2.prototype.initContext = function() {
this.ctx = this.dom.getContext("2d");
this.ctx.dpr = this.dpr;
};
Layer2.prototype.setUnpainted = function() {
this.__firstTimePaint = true;
};
Layer2.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);
}
};
Layer2.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 i2 = 0; i2 < mergedRepaintRects.length; ++i2) {
var mergedRect = mergedRepaintRects[i2];
if (mergedRect.intersect(rect)) {
var pendingRect_1 = new BoundingRect(0, 0, 0, 0);
pendingRect_1.copy(mergedRect);
pendingRect_1.union(rect);
mergedRepaintRects[i2] = 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 = i2;
}
}
}
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;
};
Layer2.prototype.debugGetPaintRects = function() {
return (this._paintRects || []).slice();
};
Layer2.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);
}
}
};
Layer2.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, width2, height2) {
ctx.clearRect(x, y, width2, height2);
if (clearColor && clearColor !== "transparent") {
var clearColorGradientOrPattern = void 0;
if (isGradientObject(clearColor)) {
var shouldCache = clearColor.global || clearColor.__width === width2 && clearColor.__height === height2;
clearColorGradientOrPattern = shouldCache && clearColor.__canvasGradient || getCanvasGradient(ctx, clearColor, {
x: 0,
y: 0,
width: width2,
height: height2
});
clearColor.__canvasGradient = clearColorGradientOrPattern;
clearColor.__width = width2;
clearColor.__height = height2;
} else if (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, width2, height2);
ctx.restore();
}
if (haveMotionBLur) {
ctx.save();
ctx.globalAlpha = lastFrameAlpha;
ctx.drawImage(domBack, x, y, width2, height2);
ctx.restore();
}
}
if (!repaintRects || haveMotionBLur) {
doClear(0, 0, width, height);
} else if (repaintRects.length) {
each(repaintRects, function(rect) {
doClear(rect.x * dpr, rect.y * dpr, rect.width * dpr, rect.height * dpr);
});
}
};
return Layer2;
}(Eventful);
var Layer$1 = Layer;
export { Layer$1 as default };