Layer.js 11 KB

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