123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234 |
- "use strict";
- Object.defineProperty(exports, "__esModule", { value: true });
- var tslib_1 = require("tslib");
- var g_base_1 = require("@antv/g-base");
- var svg_1 = require("../util/svg");
- var dom_1 = require("../util/dom");
- var draw_1 = require("../util/draw");
- var constant_1 = require("../constant");
- var Shape = require("./index");
- var group_1 = require("../group");
- var g_base_2 = require("@antv/g-base");
- var ShapeBase = /** @class */ (function (_super) {
- tslib_1.__extends(ShapeBase, _super);
- function ShapeBase() {
- var _this = _super !== null && _super.apply(this, arguments) || this;
- _this.type = 'svg';
- _this.canFill = false;
- _this.canStroke = false;
- return _this;
- }
- ShapeBase.prototype.getDefaultAttrs = function () {
- var attrs = _super.prototype.getDefaultAttrs.call(this);
- // 设置默认值
- return tslib_1.__assign(tslib_1.__assign({}, attrs), { lineWidth: 1, lineAppendWidth: 0, strokeOpacity: 1, fillOpacity: 1 });
- };
- // 覆盖基类的 afterAttrsChange 方法
- ShapeBase.prototype.afterAttrsChange = function (targetAttrs) {
- _super.prototype.afterAttrsChange.call(this, targetAttrs);
- var canvas = this.get('canvas');
- // 只有挂载到画布下,才对元素进行实际渲染
- if (canvas && canvas.get('autoDraw')) {
- var context = canvas.get('context');
- this.draw(context, targetAttrs);
- }
- };
- ShapeBase.prototype.getShapeBase = function () {
- return Shape;
- };
- ShapeBase.prototype.getGroupBase = function () {
- return group_1.default;
- };
- /**
- * 一些方法调用会引起画布变化
- * @param {ChangeType} changeType 改变的类型
- */
- ShapeBase.prototype.onCanvasChange = function (changeType) {
- draw_1.refreshElement(this, changeType);
- };
- ShapeBase.prototype.calculateBBox = function () {
- var el = this.get('el');
- var bbox = null;
- // 包围盒计算依赖于绘制,如果还没有生成对应的 Dom 元素,则包围盒的长宽均为 0
- if (el) {
- bbox = el.getBBox();
- }
- else {
- var bboxMethod = g_base_2.getBBoxMethod(this.get('type'));
- if (bboxMethod) {
- bbox = bboxMethod(this);
- }
- }
- if (bbox) {
- var x = bbox.x, y = bbox.y, width = bbox.width, height = bbox.height;
- var lineWidth = this.getHitLineWidth();
- var halfWidth = lineWidth / 2;
- var minX = x - halfWidth;
- var minY = y - halfWidth;
- var maxX = x + width + halfWidth;
- var maxY = y + height + halfWidth;
- return {
- x: minX,
- y: minY,
- minX: minX,
- minY: minY,
- maxX: maxX,
- maxY: maxY,
- width: width + lineWidth,
- height: height + lineWidth,
- };
- }
- return {
- x: 0,
- y: 0,
- minX: 0,
- minY: 0,
- maxX: 0,
- maxY: 0,
- width: 0,
- height: 0,
- };
- };
- ShapeBase.prototype.isFill = function () {
- var _a = this.attr(), fill = _a.fill, fillStyle = _a.fillStyle;
- return (fill || fillStyle || this.isClipShape()) && this.canFill;
- };
- ShapeBase.prototype.isStroke = function () {
- var _a = this.attr(), stroke = _a.stroke, strokeStyle = _a.strokeStyle;
- return (stroke || strokeStyle) && this.canStroke;
- };
- ShapeBase.prototype.draw = function (context, targetAttrs) {
- var el = this.get('el');
- if (this.get('destroyed')) {
- if (el) {
- el.parentNode.removeChild(el);
- }
- }
- else {
- if (!el) {
- dom_1.createDom(this);
- }
- svg_1.setClip(this, context);
- this.createPath(context, targetAttrs);
- this.shadow(context, targetAttrs);
- this.strokeAndFill(context, targetAttrs);
- this.transform(targetAttrs);
- }
- };
- /**
- * @protected
- * 绘制图形的路径
- * @param {Defs} context 上下文
- * @param {ShapeAttrs} targetAttrs 渲染的目标属性
- */
- ShapeBase.prototype.createPath = function (context, targetAttrs) { };
- // stroke and fill
- ShapeBase.prototype.strokeAndFill = function (context, targetAttrs) {
- var attrs = targetAttrs || this.attr();
- var fill = attrs.fill, fillStyle = attrs.fillStyle, stroke = attrs.stroke, strokeStyle = attrs.strokeStyle, fillOpacity = attrs.fillOpacity, strokeOpacity = attrs.strokeOpacity, lineWidth = attrs.lineWidth;
- var el = this.get('el');
- if (this.canFill) {
- // 初次渲染和更新渲染的逻辑有所不同: 初次渲染值为空时,需要设置为 none,否则就会是黑色,而更新渲染则不需要
- if (!targetAttrs) {
- this._setColor(context, 'fill', fill || fillStyle);
- }
- else if ('fill' in attrs) {
- this._setColor(context, 'fill', fill);
- }
- else if ('fillStyle' in attrs) {
- // compatible with fillStyle
- this._setColor(context, 'fill', fillStyle);
- }
- if (fillOpacity) {
- el.setAttribute(constant_1.SVG_ATTR_MAP['fillOpacity'], fillOpacity);
- }
- }
- if (this.canStroke && lineWidth > 0) {
- if (!targetAttrs) {
- this._setColor(context, 'stroke', stroke || strokeStyle);
- }
- else if ('stroke' in attrs) {
- this._setColor(context, 'stroke', stroke);
- }
- else if ('strokeStyle' in attrs) {
- // compatible with strokeStyle
- this._setColor(context, 'stroke', strokeStyle);
- }
- if (strokeOpacity) {
- el.setAttribute(constant_1.SVG_ATTR_MAP['strokeOpacity'], strokeOpacity);
- }
- if (lineWidth) {
- el.setAttribute(constant_1.SVG_ATTR_MAP['lineWidth'], lineWidth);
- }
- }
- };
- ShapeBase.prototype._setColor = function (context, attr, value) {
- var el = this.get('el');
- if (!value) {
- // need to set `none` to avoid default value
- el.setAttribute(constant_1.SVG_ATTR_MAP[attr], 'none');
- return;
- }
- value = value.trim();
- if (/^[r,R,L,l]{1}[\s]*\(/.test(value)) {
- var id = context.find('gradient', value);
- if (!id) {
- id = context.addGradient(value);
- }
- el.setAttribute(constant_1.SVG_ATTR_MAP[attr], "url(#" + id + ")");
- }
- else if (/^[p,P]{1}[\s]*\(/.test(value)) {
- var id = context.find('pattern', value);
- if (!id) {
- id = context.addPattern(value);
- }
- el.setAttribute(constant_1.SVG_ATTR_MAP[attr], "url(#" + id + ")");
- }
- else {
- el.setAttribute(constant_1.SVG_ATTR_MAP[attr], value);
- }
- };
- ShapeBase.prototype.shadow = function (context, targetAttrs) {
- var attrs = this.attr();
- var _a = targetAttrs || attrs, shadowOffsetX = _a.shadowOffsetX, shadowOffsetY = _a.shadowOffsetY, shadowBlur = _a.shadowBlur, shadowColor = _a.shadowColor;
- if (shadowOffsetX || shadowOffsetY || shadowBlur || shadowColor) {
- svg_1.setShadow(this, context);
- }
- };
- ShapeBase.prototype.transform = function (targetAttrs) {
- var attrs = this.attr();
- var matrix = (targetAttrs || attrs).matrix;
- if (matrix) {
- svg_1.setTransform(this);
- }
- };
- ShapeBase.prototype.isInShape = function (refX, refY) {
- return this.isPointInPath(refX, refY);
- };
- ShapeBase.prototype.isPointInPath = function (refX, refY) {
- var el = this.get('el');
- var canvas = this.get('canvas');
- var bbox = canvas.get('el').getBoundingClientRect();
- var clientX = refX + bbox.left;
- var clientY = refY + bbox.top;
- var element = document.elementFromPoint(clientX, clientY);
- if (element && element.isEqualNode(el)) {
- return true;
- }
- return false;
- };
- /**
- * 获取线拾取的宽度
- * @returns {number} 线的拾取宽度
- */
- ShapeBase.prototype.getHitLineWidth = function () {
- var _a = this.attrs, lineWidth = _a.lineWidth, lineAppendWidth = _a.lineAppendWidth;
- if (this.isStroke()) {
- return lineWidth + lineAppendWidth;
- }
- return 0;
- };
- return ShapeBase;
- }(g_base_1.AbstractShape));
- exports.default = ShapeBase;
- //# sourceMappingURL=base.js.map
|