Layer.js 11 KB

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