base.js 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. var tslib_1 = require("tslib");
  4. var g_base_1 = require("@antv/g-base");
  5. var svg_1 = require("../util/svg");
  6. var dom_1 = require("../util/dom");
  7. var draw_1 = require("../util/draw");
  8. var constant_1 = require("../constant");
  9. var Shape = require("./index");
  10. var group_1 = require("../group");
  11. var g_base_2 = require("@antv/g-base");
  12. var ShapeBase = /** @class */ (function (_super) {
  13. tslib_1.__extends(ShapeBase, _super);
  14. function ShapeBase() {
  15. var _this = _super !== null && _super.apply(this, arguments) || this;
  16. _this.type = 'svg';
  17. _this.canFill = false;
  18. _this.canStroke = false;
  19. return _this;
  20. }
  21. ShapeBase.prototype.getDefaultAttrs = function () {
  22. var attrs = _super.prototype.getDefaultAttrs.call(this);
  23. // 设置默认值
  24. return tslib_1.__assign(tslib_1.__assign({}, attrs), { lineWidth: 1, lineAppendWidth: 0, strokeOpacity: 1, fillOpacity: 1 });
  25. };
  26. // 覆盖基类的 afterAttrsChange 方法
  27. ShapeBase.prototype.afterAttrsChange = function (targetAttrs) {
  28. _super.prototype.afterAttrsChange.call(this, targetAttrs);
  29. var canvas = this.get('canvas');
  30. // 只有挂载到画布下,才对元素进行实际渲染
  31. if (canvas && canvas.get('autoDraw')) {
  32. var context = canvas.get('context');
  33. this.draw(context, targetAttrs);
  34. }
  35. };
  36. ShapeBase.prototype.getShapeBase = function () {
  37. return Shape;
  38. };
  39. ShapeBase.prototype.getGroupBase = function () {
  40. return group_1.default;
  41. };
  42. /**
  43. * 一些方法调用会引起画布变化
  44. * @param {ChangeType} changeType 改变的类型
  45. */
  46. ShapeBase.prototype.onCanvasChange = function (changeType) {
  47. draw_1.refreshElement(this, changeType);
  48. };
  49. ShapeBase.prototype.calculateBBox = function () {
  50. var el = this.get('el');
  51. var bbox = null;
  52. // 包围盒计算依赖于绘制,如果还没有生成对应的 Dom 元素,则包围盒的长宽均为 0
  53. if (el) {
  54. bbox = el.getBBox();
  55. }
  56. else {
  57. var bboxMethod = g_base_2.getBBoxMethod(this.get('type'));
  58. if (bboxMethod) {
  59. bbox = bboxMethod(this);
  60. }
  61. }
  62. if (bbox) {
  63. var x = bbox.x, y = bbox.y, width = bbox.width, height = bbox.height;
  64. var lineWidth = this.getHitLineWidth();
  65. var halfWidth = lineWidth / 2;
  66. var minX = x - halfWidth;
  67. var minY = y - halfWidth;
  68. var maxX = x + width + halfWidth;
  69. var maxY = y + height + halfWidth;
  70. return {
  71. x: minX,
  72. y: minY,
  73. minX: minX,
  74. minY: minY,
  75. maxX: maxX,
  76. maxY: maxY,
  77. width: width + lineWidth,
  78. height: height + lineWidth,
  79. };
  80. }
  81. return {
  82. x: 0,
  83. y: 0,
  84. minX: 0,
  85. minY: 0,
  86. maxX: 0,
  87. maxY: 0,
  88. width: 0,
  89. height: 0,
  90. };
  91. };
  92. ShapeBase.prototype.isFill = function () {
  93. var _a = this.attr(), fill = _a.fill, fillStyle = _a.fillStyle;
  94. return (fill || fillStyle || this.isClipShape()) && this.canFill;
  95. };
  96. ShapeBase.prototype.isStroke = function () {
  97. var _a = this.attr(), stroke = _a.stroke, strokeStyle = _a.strokeStyle;
  98. return (stroke || strokeStyle) && this.canStroke;
  99. };
  100. ShapeBase.prototype.draw = function (context, targetAttrs) {
  101. var el = this.get('el');
  102. if (this.get('destroyed')) {
  103. if (el) {
  104. el.parentNode.removeChild(el);
  105. }
  106. }
  107. else {
  108. if (!el) {
  109. dom_1.createDom(this);
  110. }
  111. svg_1.setClip(this, context);
  112. this.createPath(context, targetAttrs);
  113. this.shadow(context, targetAttrs);
  114. this.strokeAndFill(context, targetAttrs);
  115. this.transform(targetAttrs);
  116. }
  117. };
  118. /**
  119. * @protected
  120. * 绘制图形的路径
  121. * @param {Defs} context 上下文
  122. * @param {ShapeAttrs} targetAttrs 渲染的目标属性
  123. */
  124. ShapeBase.prototype.createPath = function (context, targetAttrs) { };
  125. // stroke and fill
  126. ShapeBase.prototype.strokeAndFill = function (context, targetAttrs) {
  127. var attrs = targetAttrs || this.attr();
  128. var fill = attrs.fill, fillStyle = attrs.fillStyle, stroke = attrs.stroke, strokeStyle = attrs.strokeStyle, fillOpacity = attrs.fillOpacity, strokeOpacity = attrs.strokeOpacity, lineWidth = attrs.lineWidth;
  129. var el = this.get('el');
  130. if (this.canFill) {
  131. // 初次渲染和更新渲染的逻辑有所不同: 初次渲染值为空时,需要设置为 none,否则就会是黑色,而更新渲染则不需要
  132. if (!targetAttrs) {
  133. this._setColor(context, 'fill', fill || fillStyle);
  134. }
  135. else if ('fill' in attrs) {
  136. this._setColor(context, 'fill', fill);
  137. }
  138. else if ('fillStyle' in attrs) {
  139. // compatible with fillStyle
  140. this._setColor(context, 'fill', fillStyle);
  141. }
  142. if (fillOpacity) {
  143. el.setAttribute(constant_1.SVG_ATTR_MAP['fillOpacity'], fillOpacity);
  144. }
  145. }
  146. if (this.canStroke && lineWidth > 0) {
  147. if (!targetAttrs) {
  148. this._setColor(context, 'stroke', stroke || strokeStyle);
  149. }
  150. else if ('stroke' in attrs) {
  151. this._setColor(context, 'stroke', stroke);
  152. }
  153. else if ('strokeStyle' in attrs) {
  154. // compatible with strokeStyle
  155. this._setColor(context, 'stroke', strokeStyle);
  156. }
  157. if (strokeOpacity) {
  158. el.setAttribute(constant_1.SVG_ATTR_MAP['strokeOpacity'], strokeOpacity);
  159. }
  160. if (lineWidth) {
  161. el.setAttribute(constant_1.SVG_ATTR_MAP['lineWidth'], lineWidth);
  162. }
  163. }
  164. };
  165. ShapeBase.prototype._setColor = function (context, attr, value) {
  166. var el = this.get('el');
  167. if (!value) {
  168. // need to set `none` to avoid default value
  169. el.setAttribute(constant_1.SVG_ATTR_MAP[attr], 'none');
  170. return;
  171. }
  172. value = value.trim();
  173. if (/^[r,R,L,l]{1}[\s]*\(/.test(value)) {
  174. var id = context.find('gradient', value);
  175. if (!id) {
  176. id = context.addGradient(value);
  177. }
  178. el.setAttribute(constant_1.SVG_ATTR_MAP[attr], "url(#" + id + ")");
  179. }
  180. else if (/^[p,P]{1}[\s]*\(/.test(value)) {
  181. var id = context.find('pattern', value);
  182. if (!id) {
  183. id = context.addPattern(value);
  184. }
  185. el.setAttribute(constant_1.SVG_ATTR_MAP[attr], "url(#" + id + ")");
  186. }
  187. else {
  188. el.setAttribute(constant_1.SVG_ATTR_MAP[attr], value);
  189. }
  190. };
  191. ShapeBase.prototype.shadow = function (context, targetAttrs) {
  192. var attrs = this.attr();
  193. var _a = targetAttrs || attrs, shadowOffsetX = _a.shadowOffsetX, shadowOffsetY = _a.shadowOffsetY, shadowBlur = _a.shadowBlur, shadowColor = _a.shadowColor;
  194. if (shadowOffsetX || shadowOffsetY || shadowBlur || shadowColor) {
  195. svg_1.setShadow(this, context);
  196. }
  197. };
  198. ShapeBase.prototype.transform = function (targetAttrs) {
  199. var attrs = this.attr();
  200. var matrix = (targetAttrs || attrs).matrix;
  201. if (matrix) {
  202. svg_1.setTransform(this);
  203. }
  204. };
  205. ShapeBase.prototype.isInShape = function (refX, refY) {
  206. return this.isPointInPath(refX, refY);
  207. };
  208. ShapeBase.prototype.isPointInPath = function (refX, refY) {
  209. var el = this.get('el');
  210. var canvas = this.get('canvas');
  211. var bbox = canvas.get('el').getBoundingClientRect();
  212. var clientX = refX + bbox.left;
  213. var clientY = refY + bbox.top;
  214. var element = document.elementFromPoint(clientX, clientY);
  215. if (element && element.isEqualNode(el)) {
  216. return true;
  217. }
  218. return false;
  219. };
  220. /**
  221. * 获取线拾取的宽度
  222. * @returns {number} 线的拾取宽度
  223. */
  224. ShapeBase.prototype.getHitLineWidth = function () {
  225. var _a = this.attrs, lineWidth = _a.lineWidth, lineAppendWidth = _a.lineAppendWidth;
  226. if (this.isStroke()) {
  227. return lineWidth + lineAppendWidth;
  228. }
  229. return 0;
  230. };
  231. return ShapeBase;
  232. }(g_base_1.AbstractShape));
  233. exports.default = ShapeBase;
  234. //# sourceMappingURL=base.js.map