| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293 |
- var __rest = (this && this.__rest) || function (s, e) {
- var t = {};
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
- t[p] = s[p];
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
- t[p[i]] = s[p[i]];
- }
- return t;
- };
- import { Marker } from '@antv/gui';
- import { line as d3line } from 'd3-shape';
- import { createElement } from '../../utils/createElement';
- import { isTranspose } from '../../utils/coordinate';
- import { subObject } from '../../utils/helper';
- import { select } from '../../utils/selection';
- import { applyStyle, getShapeTheme } from '../utils';
- function inferSymbol(x, y, r) {
- return [['M', x, y], ['L', x + 2 * r, y - r], ['L', x + 2 * r, y + r], ['Z']];
- }
- /**
- * @todo support polar later.
- */
- function inferConnectorPath(points) {
- return d3line()
- .x((d) => d[0])
- .y((d) => d[1])(points);
- }
- const ConnectorPath = createElement((g) => {
- // Do not copy className to path.
- const _a = g.attributes, { points, class: className, endMarker = true, direction } = _a, rest = __rest(_a, ["points", "class", "endMarker", "direction"]);
- const markerStyle = subObject(rest, 'endMarker');
- const path = inferConnectorPath(points);
- select(g)
- .maybeAppend('connector', 'path')
- .style('path', path)
- .style('markerEnd', endMarker
- ? new Marker({
- className: 'marker',
- style: Object.assign(Object.assign({}, markerStyle), { symbol: inferSymbol }),
- })
- : null)
- .call(applyStyle, rest);
- });
- function getPoints(coordinate, points, offset, length1 = 0) {
- const [[x0, y0], [x1, y1]] = points;
- if (isTranspose(coordinate)) {
- const OFFSET = offset;
- const X0 = x0 + OFFSET;
- const X1 = x1 + OFFSET;
- const X = X0 + length1;
- return [
- [X0, y0],
- [X, y0],
- [X, y1],
- [X1, y1],
- ];
- }
- const OFFSET = -offset;
- const Y0 = y0 + OFFSET;
- const Y1 = y1 + OFFSET;
- const Y = Y0 + -length1;
- return [
- [x0, Y0],
- [x0, Y],
- [x1, Y],
- [x1, Y1],
- ];
- }
- export const Connector = (options) => {
- const { offset = 0, connectLength1: length1 } = options, style = __rest(options, ["offset", "connectLength1"]);
- return (points, value, coordinate, theme) => {
- const { mark, shape, defaultShape } = value;
- const _a = getShapeTheme(theme, mark, shape, defaultShape), { defaultColor, connectLength1 = length1 } = _a, shapeTheme = __rest(_a, ["defaultColor", "connectLength1"]);
- const { color, transform } = value;
- const P = getPoints(coordinate, points, offset, connectLength1);
- return select(new ConnectorPath())
- .call(applyStyle, shapeTheme)
- .style('points', P)
- .style('stroke', color || defaultColor)
- .style('transform', transform)
- .call(applyStyle, style)
- .node();
- };
- };
- Connector.props = {
- defaultMarker: 'line',
- defaultEnterAnimation: 'fadeIn',
- defaultUpdateAnimation: 'morphing',
- defaultExitAnimation: 'fadeOut',
- };
- //# sourceMappingURL=connector.js.map
|