Layer.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
  1. import { __extends } from "tslib";
  2. import * as util from '../core/util.js';
  3. import { devicePixelRatio } from '../config.js';
  4. import Eventful from '../core/Eventful.js';
  5. import { getCanvasGradient } from './helper.js';
  6. import { createCanvasPattern } from './graphic.js';
  7. import BoundingRect from '../core/BoundingRect.js';
  8. import { REDRAW_BIT } from '../graphic/constants.js';
  9. import { platformApi } from '../core/platform.js';
  10. function createDom(id, painter, dpr) {
  11. var newDom = platformApi.createCanvas();
  12. var width = painter.getWidth();
  13. var height = painter.getHeight();
  14. var newDomStyle = newDom.style;
  15. if (newDomStyle) {
  16. newDomStyle.position = 'absolute';
  17. newDomStyle.left = '0';
  18. newDomStyle.top = '0';
  19. newDomStyle.width = width + 'px';
  20. newDomStyle.height = height + 'px';
  21. newDom.setAttribute('data-zr-dom-id', id);
  22. }
  23. newDom.width = width * dpr;
  24. newDom.height = height * dpr;
  25. return newDom;
  26. }
  27. ;
  28. var Layer = (function (_super) {
  29. __extends(Layer, _super);
  30. function Layer(id, painter, dpr) {
  31. var _this = _super.call(this) || this;
  32. _this.motionBlur = false;
  33. _this.lastFrameAlpha = 0.7;
  34. _this.dpr = 1;
  35. _this.virtual = false;
  36. _this.config = {};
  37. _this.incremental = false;
  38. _this.zlevel = 0;
  39. _this.maxRepaintRectCount = 5;
  40. _this.__dirty = true;
  41. _this.__firstTimePaint = true;
  42. _this.__used = false;
  43. _this.__drawIndex = 0;
  44. _this.__startIndex = 0;
  45. _this.__endIndex = 0;
  46. _this.__prevStartIndex = null;
  47. _this.__prevEndIndex = null;
  48. var dom;
  49. dpr = dpr || devicePixelRatio;
  50. if (typeof id === 'string') {
  51. dom = createDom(id, painter, dpr);
  52. }
  53. else if (util.isObject(id)) {
  54. dom = id;
  55. id = dom.id;
  56. }
  57. _this.id = id;
  58. _this.dom = dom;
  59. var domStyle = dom.style;
  60. if (domStyle) {
  61. util.disableUserSelect(dom);
  62. dom.onselectstart = function () { return false; };
  63. domStyle.padding = '0';
  64. domStyle.margin = '0';
  65. domStyle.borderWidth = '0';
  66. }
  67. _this.painter = painter;
  68. _this.dpr = dpr;
  69. return _this;
  70. }
  71. Layer.prototype.getElementCount = function () {
  72. return this.__endIndex - this.__startIndex;
  73. };
  74. Layer.prototype.afterBrush = function () {
  75. this.__prevStartIndex = this.__startIndex;
  76. this.__prevEndIndex = this.__endIndex;
  77. };
  78. Layer.prototype.initContext = function () {
  79. this.ctx = this.dom.getContext('2d');
  80. this.ctx.dpr = this.dpr;
  81. };
  82. Layer.prototype.setUnpainted = function () {
  83. this.__firstTimePaint = true;
  84. };
  85. Layer.prototype.createBackBuffer = function () {
  86. var dpr = this.dpr;
  87. this.domBack = createDom('back-' + this.id, this.painter, dpr);
  88. this.ctxBack = this.domBack.getContext('2d');
  89. if (dpr !== 1) {
  90. this.ctxBack.scale(dpr, dpr);
  91. }
  92. };
  93. Layer.prototype.createRepaintRects = function (displayList, prevList, viewWidth, viewHeight) {
  94. if (this.__firstTimePaint) {
  95. this.__firstTimePaint = false;
  96. return null;
  97. }
  98. var mergedRepaintRects = [];
  99. var maxRepaintRectCount = this.maxRepaintRectCount;
  100. var full = false;
  101. var pendingRect = new BoundingRect(0, 0, 0, 0);
  102. function addRectToMergePool(rect) {
  103. if (!rect.isFinite() || rect.isZero()) {
  104. return;
  105. }
  106. if (mergedRepaintRects.length === 0) {
  107. var boundingRect = new BoundingRect(0, 0, 0, 0);
  108. boundingRect.copy(rect);
  109. mergedRepaintRects.push(boundingRect);
  110. }
  111. else {
  112. var isMerged = false;
  113. var minDeltaArea = Infinity;
  114. var bestRectToMergeIdx = 0;
  115. for (var i = 0; i < mergedRepaintRects.length; ++i) {
  116. var mergedRect = mergedRepaintRects[i];
  117. if (mergedRect.intersect(rect)) {
  118. var pendingRect_1 = new BoundingRect(0, 0, 0, 0);
  119. pendingRect_1.copy(mergedRect);
  120. pendingRect_1.union(rect);
  121. mergedRepaintRects[i] = pendingRect_1;
  122. isMerged = true;
  123. break;
  124. }
  125. else if (full) {
  126. pendingRect.copy(rect);
  127. pendingRect.union(mergedRect);
  128. var aArea = rect.width * rect.height;
  129. var bArea = mergedRect.width * mergedRect.height;
  130. var pendingArea = pendingRect.width * pendingRect.height;
  131. var deltaArea = pendingArea - aArea - bArea;
  132. if (deltaArea < minDeltaArea) {
  133. minDeltaArea = deltaArea;
  134. bestRectToMergeIdx = i;
  135. }
  136. }
  137. }
  138. if (full) {
  139. mergedRepaintRects[bestRectToMergeIdx].union(rect);
  140. isMerged = true;
  141. }
  142. if (!isMerged) {
  143. var boundingRect = new BoundingRect(0, 0, 0, 0);
  144. boundingRect.copy(rect);
  145. mergedRepaintRects.push(boundingRect);
  146. }
  147. if (!full) {
  148. full = mergedRepaintRects.length >= maxRepaintRectCount;
  149. }
  150. }
  151. }
  152. for (var i = this.__startIndex; i < this.__endIndex; ++i) {
  153. var el = displayList[i];
  154. if (el) {
  155. var shouldPaint = el.shouldBePainted(viewWidth, viewHeight, true, true);
  156. var prevRect = el.__isRendered && ((el.__dirty & REDRAW_BIT) || !shouldPaint)
  157. ? el.getPrevPaintRect()
  158. : null;
  159. if (prevRect) {
  160. addRectToMergePool(prevRect);
  161. }
  162. var curRect = shouldPaint && ((el.__dirty & REDRAW_BIT) || !el.__isRendered)
  163. ? el.getPaintRect()
  164. : null;
  165. if (curRect) {
  166. addRectToMergePool(curRect);
  167. }
  168. }
  169. }
  170. for (var i = this.__prevStartIndex; i < this.__prevEndIndex; ++i) {
  171. var el = prevList[i];
  172. var shouldPaint = el.shouldBePainted(viewWidth, viewHeight, true, true);
  173. if (el && (!shouldPaint || !el.__zr) && el.__isRendered) {
  174. var prevRect = el.getPrevPaintRect();
  175. if (prevRect) {
  176. addRectToMergePool(prevRect);
  177. }
  178. }
  179. }
  180. var hasIntersections;
  181. do {
  182. hasIntersections = false;
  183. for (var i = 0; i < mergedRepaintRects.length;) {
  184. if (mergedRepaintRects[i].isZero()) {
  185. mergedRepaintRects.splice(i, 1);
  186. continue;
  187. }
  188. for (var j = i + 1; j < mergedRepaintRects.length;) {
  189. if (mergedRepaintRects[i].intersect(mergedRepaintRects[j])) {
  190. hasIntersections = true;
  191. mergedRepaintRects[i].union(mergedRepaintRects[j]);
  192. mergedRepaintRects.splice(j, 1);
  193. }
  194. else {
  195. j++;
  196. }
  197. }
  198. i++;
  199. }
  200. } while (hasIntersections);
  201. this._paintRects = mergedRepaintRects;
  202. return mergedRepaintRects;
  203. };
  204. Layer.prototype.debugGetPaintRects = function () {
  205. return (this._paintRects || []).slice();
  206. };
  207. Layer.prototype.resize = function (width, height) {
  208. var dpr = this.dpr;
  209. var dom = this.dom;
  210. var domStyle = dom.style;
  211. var domBack = this.domBack;
  212. if (domStyle) {
  213. domStyle.width = width + 'px';
  214. domStyle.height = height + 'px';
  215. }
  216. dom.width = width * dpr;
  217. dom.height = height * dpr;
  218. if (domBack) {
  219. domBack.width = width * dpr;
  220. domBack.height = height * dpr;
  221. if (dpr !== 1) {
  222. this.ctxBack.scale(dpr, dpr);
  223. }
  224. }
  225. };
  226. Layer.prototype.clear = function (clearAll, clearColor, repaintRects) {
  227. var dom = this.dom;
  228. var ctx = this.ctx;
  229. var width = dom.width;
  230. var height = dom.height;
  231. clearColor = clearColor || this.clearColor;
  232. var haveMotionBLur = this.motionBlur && !clearAll;
  233. var lastFrameAlpha = this.lastFrameAlpha;
  234. var dpr = this.dpr;
  235. var self = this;
  236. if (haveMotionBLur) {
  237. if (!this.domBack) {
  238. this.createBackBuffer();
  239. }
  240. this.ctxBack.globalCompositeOperation = 'copy';
  241. this.ctxBack.drawImage(dom, 0, 0, width / dpr, height / dpr);
  242. }
  243. var domBack = this.domBack;
  244. function doClear(x, y, width, height) {
  245. ctx.clearRect(x, y, width, height);
  246. if (clearColor && clearColor !== 'transparent') {
  247. var clearColorGradientOrPattern = void 0;
  248. if (util.isGradientObject(clearColor)) {
  249. var shouldCache = clearColor.global || (clearColor.__width === width
  250. && clearColor.__height === height);
  251. clearColorGradientOrPattern = shouldCache
  252. && clearColor.__canvasGradient
  253. || getCanvasGradient(ctx, clearColor, {
  254. x: 0,
  255. y: 0,
  256. width: width,
  257. height: height
  258. });
  259. clearColor.__canvasGradient = clearColorGradientOrPattern;
  260. clearColor.__width = width;
  261. clearColor.__height = height;
  262. }
  263. else if (util.isImagePatternObject(clearColor)) {
  264. clearColor.scaleX = clearColor.scaleX || dpr;
  265. clearColor.scaleY = clearColor.scaleY || dpr;
  266. clearColorGradientOrPattern = createCanvasPattern(ctx, clearColor, {
  267. dirty: function () {
  268. self.setUnpainted();
  269. self.__painter.refresh();
  270. }
  271. });
  272. }
  273. ctx.save();
  274. ctx.fillStyle = clearColorGradientOrPattern || clearColor;
  275. ctx.fillRect(x, y, width, height);
  276. ctx.restore();
  277. }
  278. if (haveMotionBLur) {
  279. ctx.save();
  280. ctx.globalAlpha = lastFrameAlpha;
  281. ctx.drawImage(domBack, x, y, width, height);
  282. ctx.restore();
  283. }
  284. }
  285. ;
  286. if (!repaintRects || haveMotionBLur) {
  287. doClear(0, 0, width, height);
  288. }
  289. else if (repaintRects.length) {
  290. util.each(repaintRects, function (rect) {
  291. doClear(rect.x * dpr, rect.y * dpr, rect.width * dpr, rect.height * dpr);
  292. });
  293. }
  294. };
  295. return Layer;
  296. }(Eventful));
  297. export default Layer;