element.js 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342
  1. var Util = require('../util/common');
  2. var MatrixUtil = require('./util/matrix');
  3. var Vector2 = require('./util/vector2');
  4. var StyleUtil = require('./util/style-parse');
  5. function isUnchanged(m) {
  6. return m[0] === 1 && m[1] === 0 && m[2] === 0 && m[3] === 1 && m[4] === 0 && m[5] === 0;
  7. }
  8. var ALIAS_ATTRS_MAP = {
  9. stroke: 'strokeStyle',
  10. fill: 'fillStyle',
  11. opacity: 'globalAlpha'
  12. };
  13. var SHAPE_ATTRS = ['fillStyle', 'font', 'globalAlpha', 'lineCap', 'lineWidth', 'lineJoin', 'miterLimit', 'shadowBlur', 'shadowColor', 'shadowOffsetX', 'shadowOffsetY', 'strokeStyle', 'textAlign', 'textBaseline', 'lineDash'];
  14. var CLIP_SHAPES = ['circle', 'sector', 'polygon', 'rect', 'polyline'];
  15. var Element =
  16. /*#__PURE__*/
  17. function () {
  18. var _proto = Element.prototype;
  19. _proto._initProperties = function _initProperties() {
  20. this._attrs = {
  21. zIndex: 0,
  22. visible: true,
  23. destroyed: false
  24. };
  25. };
  26. function Element(cfg) {
  27. this._initProperties();
  28. Util.mix(this._attrs, cfg);
  29. var attrs = this._attrs.attrs;
  30. if (attrs) {
  31. this.initAttrs(attrs);
  32. }
  33. this.initTransform();
  34. }
  35. _proto.get = function get(name) {
  36. return this._attrs[name];
  37. };
  38. _proto.set = function set(name, value) {
  39. this._attrs[name] = value;
  40. };
  41. _proto.isGroup = function isGroup() {
  42. return this.get('isGroup');
  43. };
  44. _proto.isShape = function isShape() {
  45. return this.get('isShape');
  46. };
  47. _proto.initAttrs = function initAttrs(attrs) {
  48. this.attr(Util.mix(this.getDefaultAttrs(), attrs));
  49. };
  50. _proto.getDefaultAttrs = function getDefaultAttrs() {
  51. return {};
  52. };
  53. _proto._setAttr = function _setAttr(name, value) {
  54. var attrs = this._attrs.attrs;
  55. if (name === 'clip') {
  56. value = this._setAttrClip(value);
  57. } else {
  58. var alias = ALIAS_ATTRS_MAP[name];
  59. if (alias) {
  60. attrs[alias] = value;
  61. }
  62. }
  63. attrs[name] = value;
  64. };
  65. _proto._getAttr = function _getAttr(name) {
  66. return this._attrs.attrs[name];
  67. }; // _afterAttrsSet() {}
  68. _proto._setAttrClip = function _setAttrClip(clip) {
  69. if (clip && CLIP_SHAPES.indexOf(clip._attrs.type) > -1) {
  70. if (clip.get('canvas') === null) {
  71. clip = Object.assign({}, clip);
  72. }
  73. clip.set('parent', this.get('parent'));
  74. clip.set('context', this.get('context'));
  75. return clip;
  76. }
  77. return null;
  78. };
  79. _proto.attr = function attr(name, value) {
  80. var self = this;
  81. if (self.get('destroyed')) return null;
  82. var argumentsLen = arguments.length;
  83. if (argumentsLen === 0) {
  84. return self._attrs.attrs;
  85. }
  86. if (Util.isObject(name)) {
  87. this._attrs.bbox = null;
  88. for (var k in name) {
  89. self._setAttr(k, name[k]);
  90. }
  91. if (self._afterAttrsSet) {
  92. self._afterAttrsSet();
  93. }
  94. return self;
  95. }
  96. if (argumentsLen === 2) {
  97. this._attrs.bbox = null;
  98. self._setAttr(name, value);
  99. if (self._afterAttrsSet) {
  100. self._afterAttrsSet();
  101. }
  102. return self;
  103. }
  104. return self._getAttr(name);
  105. };
  106. _proto.getParent = function getParent() {
  107. return this.get('parent');
  108. };
  109. _proto.draw = function draw(context) {
  110. if (this.get('destroyed')) {
  111. return;
  112. }
  113. if (this.get('visible')) {
  114. this.setContext(context);
  115. this.drawInner(context);
  116. this.restoreContext(context);
  117. }
  118. };
  119. _proto.setContext = function setContext(context) {
  120. var clip = this._attrs.attrs.clip;
  121. context.save();
  122. if (clip) {
  123. clip.resetTransform(context);
  124. clip.createPath(context);
  125. context.clip();
  126. }
  127. this.resetContext(context);
  128. this.resetTransform(context);
  129. };
  130. _proto.restoreContext = function restoreContext(context) {
  131. context.restore();
  132. };
  133. _proto.resetContext = function resetContext(context) {
  134. var elAttrs = this._attrs.attrs;
  135. if (!this._attrs.isGroup) {
  136. for (var k in elAttrs) {
  137. if (SHAPE_ATTRS.indexOf(k) > -1) {
  138. var v = elAttrs[k];
  139. if (k === 'fillStyle' || k === 'strokeStyle') {
  140. v = StyleUtil.parseStyle(v, this, context);
  141. }
  142. if (k === 'lineDash' && context.setLineDash && Util.isArray(v)) {
  143. context.setLineDash(v);
  144. } else {
  145. context[k] = v;
  146. }
  147. }
  148. }
  149. }
  150. };
  151. _proto.hasFill = function hasFill() {
  152. return this.get('canFill') && this._attrs.attrs.fillStyle;
  153. };
  154. _proto.hasStroke = function hasStroke() {
  155. return this.get('canStroke') && this._attrs.attrs.strokeStyle;
  156. };
  157. _proto.drawInner = function drawInner()
  158. /* context */
  159. {};
  160. _proto.show = function show() {
  161. this.set('visible', true);
  162. return this;
  163. };
  164. _proto.hide = function hide() {
  165. this.set('visible', false);
  166. return this;
  167. };
  168. _proto.isVisible = function isVisible() {
  169. return this.get('visible');
  170. };
  171. _proto._removeFromParent = function _removeFromParent() {
  172. var parent = this.get('parent');
  173. if (parent) {
  174. var children = parent.get('children');
  175. Util.Array.remove(children, this);
  176. }
  177. return this;
  178. };
  179. _proto.remove = function remove(destroy) {
  180. if (destroy) {
  181. this.destroy();
  182. } else {
  183. this._removeFromParent();
  184. }
  185. };
  186. _proto.destroy = function destroy() {
  187. var destroyed = this.get('destroyed');
  188. if (destroyed) {
  189. return null;
  190. }
  191. this._removeFromParent();
  192. this._attrs = {};
  193. this.set('destroyed', true);
  194. };
  195. _proto.getBBox = function getBBox() {
  196. return {
  197. minX: 0,
  198. maxX: 0,
  199. minY: 0,
  200. maxY: 0,
  201. width: 0,
  202. height: 0
  203. };
  204. };
  205. _proto.initTransform = function initTransform() {
  206. var attrs = this._attrs.attrs || {};
  207. if (!attrs.matrix) {
  208. attrs.matrix = [1, 0, 0, 1, 0, 0];
  209. }
  210. this._attrs.attrs = attrs;
  211. };
  212. _proto.getMatrix = function getMatrix() {
  213. return this._attrs.attrs.matrix;
  214. };
  215. _proto.setMatrix = function setMatrix(m) {
  216. this._attrs.attrs.matrix = [m[0], m[1], m[2], m[3], m[4], m[5]];
  217. };
  218. _proto.transform = function transform(actions) {
  219. var matrix = this._attrs.attrs.matrix;
  220. this._attrs.attrs.matrix = MatrixUtil.transform(matrix, actions);
  221. return this;
  222. };
  223. _proto.setTransform = function setTransform(actions) {
  224. this._attrs.attrs.matrix = [1, 0, 0, 1, 0, 0];
  225. return this.transform(actions);
  226. };
  227. _proto.translate = function translate(x, y) {
  228. var matrix = this._attrs.attrs.matrix;
  229. MatrixUtil.translate(matrix, matrix, [x, y]);
  230. };
  231. _proto.rotate = function rotate(rad) {
  232. var matrix = this._attrs.attrs.matrix;
  233. MatrixUtil.rotate(matrix, matrix, rad);
  234. };
  235. _proto.scale = function scale(sx, sy) {
  236. var matrix = this._attrs.attrs.matrix;
  237. MatrixUtil.scale(matrix, matrix, [sx, sy]);
  238. };
  239. _proto.moveTo = function moveTo(x, y) {
  240. var cx = this._attrs.x || 0;
  241. var cy = this._attrs.y || 0;
  242. this.translate(x - cx, y - cy);
  243. this.set('x', x);
  244. this.set('y', y);
  245. };
  246. _proto.apply = function apply(v) {
  247. var m = this._attrs.attrs.matrix;
  248. Vector2.transformMat2d(v, v, m);
  249. return this;
  250. };
  251. _proto.resetTransform = function resetTransform(context) {
  252. var mo = this._attrs.attrs.matrix;
  253. if (!isUnchanged(mo)) {
  254. context.transform(mo[0], mo[1], mo[2], mo[3], mo[4], mo[5]);
  255. }
  256. };
  257. _proto.isDestroyed = function isDestroyed() {
  258. return this.get('destroyed');
  259. };
  260. return Element;
  261. }();
  262. module.exports = Element;