1 | import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
2 | import { jsx } from '../../../jsx';
|
3 | import { Vector2 } from '@antv/f2-graphic';
|
4 |
|
5 |
|
6 | function getOffsetPoint(center, point, offset) {
|
7 | var vectorX = point.x - center.x;
|
8 | var vectorY = point.y - center.y;
|
9 | var vector = [vectorX, vectorY];
|
10 | var vectorLength = Vector2.length(vector);
|
11 | var offsetLength = vectorLength + offset;
|
12 | var x = vectorX / vectorLength * offsetLength;
|
13 | var y = vectorY / vectorLength * offsetLength;
|
14 | return {
|
15 | x: center.x + x,
|
16 | y: center.y + y
|
17 | };
|
18 | }
|
19 |
|
20 |
|
21 | function getTextAlignInfo(center, point) {
|
22 |
|
23 | var vector = [point.x - center.x, point.y - center.y];
|
24 | var align;
|
25 | var baseLine;
|
26 |
|
27 | if (vector[0] > 0) {
|
28 | align = 'left';
|
29 | } else if (vector[0] < 0) {
|
30 | align = 'right';
|
31 | } else {
|
32 | align = 'center';
|
33 | }
|
34 |
|
35 |
|
36 | if (vector[1] > 0) {
|
37 | baseLine = 'top';
|
38 | } else if (vector[1] < 0) {
|
39 | baseLine = 'bottom';
|
40 | } else {
|
41 | baseLine = 'middle';
|
42 | }
|
43 |
|
44 | return {
|
45 | textAlign: align,
|
46 | textBaseline: baseLine
|
47 | };
|
48 | }
|
49 |
|
50 | var Line = function Line(props) {
|
51 | var line = props.line,
|
52 | gridType = props.gridType,
|
53 | center = props.center,
|
54 | radius = props.radius,
|
55 | ticks = props.ticks;
|
56 | if (!line) return null;
|
57 |
|
58 | if (gridType !== 'line') {
|
59 | return jsx("arc", {
|
60 | attrs: _objectSpread({
|
61 | x: center.x,
|
62 | y: center.y,
|
63 | r: radius
|
64 | }, line)
|
65 | });
|
66 | }
|
67 |
|
68 | var points = ticks.map(function (tick) {
|
69 | var points = tick.points;
|
70 | return points[points.length - 1];
|
71 | });
|
72 |
|
73 | points.push(points[0]);
|
74 | return jsx("polyline", {
|
75 | attrs: _objectSpread({
|
76 | points: points
|
77 | }, line)
|
78 | });
|
79 | };
|
80 |
|
81 | export default (function (props) {
|
82 | var ticks = props.ticks,
|
83 | coord = props.coord,
|
84 | style = props.style,
|
85 | gridType = props.grid;
|
86 | var center = coord.center;
|
87 | var grid = style.grid,
|
88 | tickLine = style.tickLine,
|
89 | line = style.line,
|
90 | labelOffset = style.labelOffset,
|
91 | label = style.label;
|
92 | var firstTicks = ticks[0];
|
93 | var points = firstTicks.points;
|
94 | var end = points[points.length - 1];
|
95 | var radius = Vector2.length([end.x - center.x, end.y - center.y]);
|
96 | return jsx("group", null, grid ? ticks.map(function (tick) {
|
97 | var points = tick.points,
|
98 | gridStyle = tick.gridStyle;
|
99 | var end = points[points.length - 1];
|
100 | return jsx("line", {
|
101 | attrs: _objectSpread(_objectSpread({
|
102 | x1: center.x,
|
103 | y1: center.y,
|
104 | x2: end.x,
|
105 | y2: end.y
|
106 | }, grid), gridStyle)
|
107 | });
|
108 | }) : null, tickLine && tickLine.length ? ticks.map(function (tick) {
|
109 | var points = tick.points;
|
110 | var end = points[points.length - 1];
|
111 | var offsetPoint = getOffsetPoint(center, end, tickLine.length);
|
112 | return jsx("line", {
|
113 | attrs: _objectSpread({
|
114 | x1: end.x,
|
115 | y1: end.y,
|
116 | x2: offsetPoint.x,
|
117 | y2: offsetPoint.y
|
118 | }, tickLine)
|
119 | });
|
120 | }) : null, jsx(Line, {
|
121 | line: line,
|
122 | gridType: gridType,
|
123 | center: center,
|
124 | radius: radius,
|
125 | ticks: ticks
|
126 | }), label ? ticks.map(function (tick) {
|
127 | var points = tick.points,
|
128 | text = tick.text,
|
129 | labelStyle = tick.labelStyle;
|
130 | var end = points[points.length - 1];
|
131 | var offsetPoint = getOffsetPoint(center, end, labelOffset);
|
132 | return jsx("text", {
|
133 | attrs: _objectSpread(_objectSpread(_objectSpread({
|
134 | x: offsetPoint.x,
|
135 | y: offsetPoint.y,
|
136 | text: text
|
137 | }, getTextAlignInfo(center, end)), label), labelStyle)
|
138 | });
|
139 | }) : null);
|
140 | }); |
\ | No newline at end of file |