Displayable.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277
  1. var zrUtil = require("../core/util");
  2. var Style = require("./Style");
  3. var Element = require("../Element");
  4. var RectText = require("./mixin/RectText");
  5. /**
  6. * Base class of all displayable graphic objects
  7. * @module zrender/graphic/Displayable
  8. */
  9. /**
  10. * @alias module:zrender/graphic/Displayable
  11. * @extends module:zrender/Element
  12. * @extends module:zrender/graphic/mixin/RectText
  13. */
  14. function Displayable(opts) {
  15. opts = opts || {};
  16. Element.call(this, opts); // Extend properties
  17. for (var name in opts) {
  18. if (opts.hasOwnProperty(name) && name !== 'style') {
  19. this[name] = opts[name];
  20. }
  21. }
  22. /**
  23. * @type {module:zrender/graphic/Style}
  24. */
  25. this.style = new Style(opts.style, this);
  26. this._rect = null; // Shapes for cascade clipping.
  27. // Can only be `null`/`undefined` or an non-empty array, MUST NOT be an empty array.
  28. // because it is easy to only using null to check whether clipPaths changed.
  29. this.__clipPaths = null; // FIXME Stateful must be mixined after style is setted
  30. // Stateful.call(this, opts);
  31. }
  32. Displayable.prototype = {
  33. constructor: Displayable,
  34. type: 'displayable',
  35. /**
  36. * Dirty flag. From which painter will determine if this displayable object needs brush.
  37. * @name module:zrender/graphic/Displayable#__dirty
  38. * @type {boolean}
  39. */
  40. __dirty: true,
  41. /**
  42. * Whether the displayable object is visible. when it is true, the displayable object
  43. * is not drawn, but the mouse event can still trigger the object.
  44. * @name module:/zrender/graphic/Displayable#invisible
  45. * @type {boolean}
  46. * @default false
  47. */
  48. invisible: false,
  49. /**
  50. * @name module:/zrender/graphic/Displayable#z
  51. * @type {number}
  52. * @default 0
  53. */
  54. z: 0,
  55. /**
  56. * @name module:/zrender/graphic/Displayable#z
  57. * @type {number}
  58. * @default 0
  59. */
  60. z2: 0,
  61. /**
  62. * The z level determines the displayable object can be drawn in which layer canvas.
  63. * @name module:/zrender/graphic/Displayable#zlevel
  64. * @type {number}
  65. * @default 0
  66. */
  67. zlevel: 0,
  68. /**
  69. * Whether it can be dragged.
  70. * @name module:/zrender/graphic/Displayable#draggable
  71. * @type {boolean}
  72. * @default false
  73. */
  74. draggable: false,
  75. /**
  76. * Whether is it dragging.
  77. * @name module:/zrender/graphic/Displayable#draggable
  78. * @type {boolean}
  79. * @default false
  80. */
  81. dragging: false,
  82. /**
  83. * Whether to respond to mouse events.
  84. * @name module:/zrender/graphic/Displayable#silent
  85. * @type {boolean}
  86. * @default false
  87. */
  88. silent: false,
  89. /**
  90. * If enable culling
  91. * @type {boolean}
  92. * @default false
  93. */
  94. culling: false,
  95. /**
  96. * Mouse cursor when hovered
  97. * @name module:/zrender/graphic/Displayable#cursor
  98. * @type {string}
  99. */
  100. cursor: 'pointer',
  101. /**
  102. * If hover area is bounding rect
  103. * @name module:/zrender/graphic/Displayable#rectHover
  104. * @type {string}
  105. */
  106. rectHover: false,
  107. /**
  108. * Render the element progressively when the value >= 0,
  109. * usefull for large data.
  110. * @type {boolean}
  111. */
  112. progressive: false,
  113. /**
  114. * @type {boolean}
  115. */
  116. incremental: false,
  117. /**
  118. * Scale ratio for global scale.
  119. * @type {boolean}
  120. */
  121. globalScaleRatio: 1,
  122. beforeBrush: function (ctx) {},
  123. afterBrush: function (ctx) {},
  124. /**
  125. * Graphic drawing method.
  126. * @param {CanvasRenderingContext2D} ctx
  127. */
  128. // Interface
  129. brush: function (ctx, prevEl) {},
  130. /**
  131. * Get the minimum bounding box.
  132. * @return {module:zrender/core/BoundingRect}
  133. */
  134. // Interface
  135. getBoundingRect: function () {},
  136. /**
  137. * If displayable element contain coord x, y
  138. * @param {number} x
  139. * @param {number} y
  140. * @return {boolean}
  141. */
  142. contain: function (x, y) {
  143. return this.rectContain(x, y);
  144. },
  145. /**
  146. * @param {Function} cb
  147. * @param {} context
  148. */
  149. traverse: function (cb, context) {
  150. cb.call(context, this);
  151. },
  152. /**
  153. * If bounding rect of element contain coord x, y
  154. * @param {number} x
  155. * @param {number} y
  156. * @return {boolean}
  157. */
  158. rectContain: function (x, y) {
  159. var coord = this.transformCoordToLocal(x, y);
  160. var rect = this.getBoundingRect();
  161. return rect.contain(coord[0], coord[1]);
  162. },
  163. /**
  164. * Mark displayable element dirty and refresh next frame
  165. */
  166. dirty: function () {
  167. this.__dirty = this.__dirtyText = true;
  168. this._rect = null;
  169. this.__zr && this.__zr.refresh();
  170. },
  171. /**
  172. * If displayable object binded any event
  173. * @return {boolean}
  174. */
  175. // TODO, events bound by bind
  176. // isSilent: function () {
  177. // return !(
  178. // this.hoverable || this.draggable
  179. // || this.onmousemove || this.onmouseover || this.onmouseout
  180. // || this.onmousedown || this.onmouseup || this.onclick
  181. // || this.ondragenter || this.ondragover || this.ondragleave
  182. // || this.ondrop
  183. // );
  184. // },
  185. /**
  186. * Alias for animate('style')
  187. * @param {boolean} loop
  188. */
  189. animateStyle: function (loop) {
  190. return this.animate('style', loop);
  191. },
  192. attrKV: function (key, value) {
  193. if (key !== 'style') {
  194. Element.prototype.attrKV.call(this, key, value);
  195. } else {
  196. this.style.set(value);
  197. }
  198. },
  199. /**
  200. * @param {Object|string} key
  201. * @param {*} value
  202. */
  203. setStyle: function (key, value) {
  204. this.style.set(key, value);
  205. this.dirty(false);
  206. return this;
  207. },
  208. /**
  209. * Use given style object
  210. * @param {Object} obj
  211. */
  212. useStyle: function (obj) {
  213. this.style = new Style(obj, this);
  214. this.dirty(false);
  215. return this;
  216. },
  217. /**
  218. * The string value of `textPosition` needs to be calculated to a real postion.
  219. * For example, `'inside'` is calculated to `[rect.width/2, rect.height/2]`
  220. * by default. See `contain/text.js#calculateTextPosition` for more details.
  221. * But some coutom shapes like "pin", "flag" have center that is not exactly
  222. * `[width/2, height/2]`. So we provide this hook to customize the calculation
  223. * for those shapes. It will be called if the `style.textPosition` is a string.
  224. * @param {Obejct} [out] Prepared out object. If not provided, this method should
  225. * be responsible for creating one.
  226. * @param {module:zrender/graphic/Style} style
  227. * @param {Object} rect {x, y, width, height}
  228. * @return {Obejct} out The same as the input out.
  229. * {
  230. * x: number. mandatory.
  231. * y: number. mandatory.
  232. * textAlign: string. optional. use style.textAlign by default.
  233. * textVerticalAlign: string. optional. use style.textVerticalAlign by default.
  234. * }
  235. */
  236. calculateTextPosition: null
  237. };
  238. zrUtil.inherits(Displayable, Element);
  239. zrUtil.mixin(Displayable, RectText); // zrUtil.mixin(Displayable, Stateful);
  240. var _default = Displayable;
  241. module.exports = _default;