@antv/f2
Version:
Charts for mobile visualization.
246 lines • 6.59 kB
JavaScript
import { __assign, __extends } from "tslib";
import { jsx, Component, computeLayout } from '@antv/f-engine';
var defaultProps = {
offsetX: 0,
offsetY: 0,
points: [],
direct: 'tl',
side: '8px',
autoAdjust: true
};
var defaultStyle = {
container: {
fill: '#1677FF',
radius: '4px',
padding: ['4px', '8px']
},
text: {
fontSize: '22px',
fill: '#fff'
},
arrow: {
fill: '#1677FF'
}
};
var Label = function Label(_a) {
var content = _a.content,
background = _a.background,
textStyle = _a.textStyle,
_b = _a.animation,
animation = _b === void 0 ? {} : _b;
return jsx("rect", {
style: __assign({
display: 'flex',
fill: defaultStyle.container.fill,
padding: defaultStyle.container.padding,
radius: defaultStyle.container.radius
}, background),
animation: animation
}, jsx("text", {
style: __assign({
text: content,
fontSize: defaultStyle.text.fontSize,
fill: defaultStyle.text.fill
}, textStyle),
animation: animation
}));
};
var Tag = /** @class */function (_super) {
__extends(Tag, _super);
function Tag() {
return _super !== null && _super.apply(this, arguments) || this;
}
Tag.prototype.render = function () {
var _a = this,
props = _a.props,
context = _a.context;
var px2hd = context.px2hd;
var cfg = __assign(__assign({}, defaultProps), props);
var _b = px2hd(cfg),
points = _b.points,
content = _b.content,
offsetX = _b.offsetX,
offsetY = _b.offsetY,
direct = _b.direct,
side = _b.side,
autoAdjust = _b.autoAdjust,
canvasWidth = _b.canvasWidth,
canvasHeight = _b.canvasHeight,
background = _b.background,
textStyle = _b.textStyle,
animation = _b.animation;
var _c = points[0] || {},
x = _c.x,
y = _c.y;
if (isNaN(x) || isNaN(y)) return null;
var offsetXNum = context.px2hd(offsetX);
var offsetYNum = context.px2hd(offsetY);
var posX = x + (offsetXNum || 0);
var posY = y + (offsetYNum || 0);
var layout = computeLayout(this, jsx(Label, {
content: content,
background: background,
textStyle: textStyle
})).layout;
var guideWidth = layout.width,
guideHeight = layout.height;
var _getDirect = function _getDirect(point) {
var newDirect = direct;
var x = point.x,
y = point.y;
var vertical = newDirect[0];
var horizontal = newDirect[1];
// adjust for vertical direction
if (vertical === 't' && y - side - guideHeight < 0) {
vertical = 'b';
} else if (vertical === 'b' && y + side + guideHeight > canvasHeight) {
vertical = 't';
}
// adjust for horizontal direction
var diff = vertical === 'c' ? side : 0;
if (horizontal === 'l' && x - diff - guideWidth < 0) {
horizontal = 'r';
} else if (horizontal === 'r' && x + diff + guideWidth > canvasWidth) {
horizontal = 'l';
} else if (horizontal === 'c') {
if (guideWidth / 2 + x + diff > canvasWidth) {
horizontal = 'l';
} else if (x - guideWidth / 2 - diff < 0) {
horizontal = 'r';
}
}
newDirect = vertical + horizontal;
return newDirect;
};
var _getArrowPoints = function _getArrowPoints(direct) {
var arrowPoints = [];
if (direct === 'tl') {
arrowPoints = [{
x: guideWidth,
y: guideHeight - 1
}, {
x: guideWidth,
y: guideHeight + side
}, {
x: guideWidth - side,
y: guideHeight - 1
}];
posX -= guideWidth || 0;
posY = posY - (guideHeight || 0) - side;
} else if (direct === 'cl') {
arrowPoints = [{
x: guideWidth,
y: guideHeight / 2 - side
}, {
x: guideWidth,
y: guideHeight / 2 + side
}, {
x: guideWidth + side,
y: guideHeight / 2
}];
posX = posX - (guideWidth || 0) - side;
posY -= guideHeight / 2 || 0;
} else if (direct === 'bl') {
arrowPoints = [{
x: guideWidth,
y: -side
}, {
x: guideWidth,
y: 1
}, {
x: guideWidth - side,
y: 1
}];
posX = posX - (guideWidth || 0);
posY += side;
} else if (direct === 'bc') {
arrowPoints = [{
x: guideWidth / 2,
y: -side
}, {
x: guideWidth / 2 - side,
y: 1
}, {
x: guideWidth / 2 + side,
y: 1
}];
posX = posX - (guideWidth / 2 || 0);
posY = posY + side;
} else if (direct === 'br') {
arrowPoints = [{
x: 0,
y: -side
}, {
x: 0,
y: 1
}, {
x: +side,
y: 1
}];
posY += side;
} else if (direct === 'cr') {
arrowPoints = [{
x: -side,
y: guideHeight / 2
}, {
x: 0,
y: guideHeight / 2 - side
}, {
x: 0,
y: guideHeight / 2 + side
}];
posX += side;
posY -= guideHeight / 2 || 0;
} else if (direct === 'tr') {
arrowPoints = [{
x: 0,
y: guideHeight + side
}, {
x: 0,
y: guideHeight - 1
}, {
x: side,
y: guideHeight - 1
}];
posY = posY - (guideHeight || 0) - side;
} else if (direct === 'tc') {
arrowPoints = [{
x: guideWidth / 2,
y: guideHeight + side
}, {
x: guideWidth / 2 - side,
y: guideHeight - 1
}, {
x: guideWidth / 2 + side,
y: guideHeight - 1
}];
posX -= guideWidth / 2 || 0;
posY = posY - guideHeight - side;
}
return arrowPoints;
};
var dr = autoAdjust ? _getDirect(points[0]) : direct;
var arrowPoints = _getArrowPoints(dr);
return jsx("group", {
style: {
x: posX,
y: posY
}
}, jsx(Label, {
content: content,
background: background,
textStyle: textStyle,
animation: animation
}), jsx("polygon", {
style: {
points: arrowPoints.map(function (d) {
return [d.x, d.y];
}),
fill: (background === null || background === void 0 ? void 0 : background.fill) || defaultStyle.arrow.fill
},
animation: animation
}));
};
return Tag;
}(Component);
export default Tag;