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