@visactor/vrender-components 0.15.0-alpha.25 → 0.15.0-alpha.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/index.d.ts +1 -1
- package/cjs/index.js +1 -1
- package/cjs/index.js.map +1 -1
- package/cjs/label/arc.d.ts +2 -5
- package/cjs/label/arc.js +38 -24
- package/cjs/label/arc.js.map +1 -1
- package/dist/index.js +39 -26
- package/dist/index.min.js +1 -1
- package/es/index.d.ts +1 -1
- package/es/index.js +1 -1
- package/es/index.js.map +1 -1
- package/es/label/arc.d.ts +2 -5
- package/es/label/arc.js +36 -23
- package/es/label/arc.js.map +1 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -2420,16 +2420,13 @@
|
|
|
2420
2420
|
}
|
|
2421
2421
|
|
|
2422
2422
|
class ArcInfo {
|
|
2423
|
-
constructor(refDatum, center, outerCenter, quadrant, radian, middleAngle
|
|
2423
|
+
constructor(refDatum, center, outerCenter, quadrant, radian, middleAngle) {
|
|
2424
2424
|
this.refDatum = refDatum;
|
|
2425
2425
|
this.center = center;
|
|
2426
2426
|
this.outerCenter = outerCenter;
|
|
2427
2427
|
this.quadrant = quadrant;
|
|
2428
2428
|
this.radian = radian;
|
|
2429
2429
|
this.middleAngle = middleAngle;
|
|
2430
|
-
this.innerRadius = innerRadius;
|
|
2431
|
-
this.outerRadius = outerRadius;
|
|
2432
|
-
this.circleCenter = circleCenter;
|
|
2433
2430
|
this.labelVisible = true;
|
|
2434
2431
|
this.labelLimit = 0;
|
|
2435
2432
|
}
|
|
@@ -2489,9 +2486,11 @@
|
|
|
2489
2486
|
return labels;
|
|
2490
2487
|
}
|
|
2491
2488
|
layoutArcLabels(position, attribute, currentMarks, data, textBoundsArray, ellipsisWidth) {
|
|
2489
|
+
var _a;
|
|
2492
2490
|
this._arcLeft.clear();
|
|
2493
2491
|
this._arcRight.clear();
|
|
2494
2492
|
this._ellipsisWidth = ellipsisWidth;
|
|
2493
|
+
const centerOffset = (_a = attribute === null || attribute === void 0 ? void 0 : attribute.centerOffset) !== null && _a !== void 0 ? _a : 0;
|
|
2495
2494
|
let maxRadius = 0;
|
|
2496
2495
|
currentMarks.forEach(currentMarks => {
|
|
2497
2496
|
if (currentMarks.attribute.outerRadius > maxRadius) {
|
|
@@ -2502,15 +2501,15 @@
|
|
|
2502
2501
|
var _a, _b;
|
|
2503
2502
|
const graphicAttribute = currentMark.attribute;
|
|
2504
2503
|
const center = { x: (_a = graphicAttribute === null || graphicAttribute === void 0 ? void 0 : graphicAttribute.x) !== null && _a !== void 0 ? _a : 0, y: (_b = graphicAttribute === null || graphicAttribute === void 0 ? void 0 : graphicAttribute.y) !== null && _b !== void 0 ? _b : 0 };
|
|
2505
|
-
const item = data[index];
|
|
2506
|
-
const textBounds = textBoundsArray[index];
|
|
2504
|
+
const item = data[index] ? data[index] : null;
|
|
2505
|
+
const textBounds = textBoundsArray[index] ? textBoundsArray[index] : 0;
|
|
2507
2506
|
const arcMiddleAngle = (graphicAttribute.startAngle + graphicAttribute.endAngle) / 2;
|
|
2508
2507
|
const intervalAngle = graphicAttribute.endAngle - graphicAttribute.startAngle;
|
|
2509
2508
|
const arcQuadrant = computeQuadrant(graphicAttribute.endAngle - intervalAngle / 2);
|
|
2510
2509
|
const arcMiddle = circlePoint(center.x, center.y, graphicAttribute.outerRadius, arcMiddleAngle);
|
|
2511
2510
|
const outerArcMiddle = circlePoint(center.x, center.y, maxRadius + attribute.line.line1MinLength, arcMiddleAngle);
|
|
2512
|
-
const arc = new ArcInfo(item, arcMiddle, outerArcMiddle, arcQuadrant, intervalAngle, arcMiddleAngle
|
|
2513
|
-
arc.pointA = circlePoint(center.x, center.y, this.computeDatumRadius(center.x * 2, center.y * 2, graphicAttribute.outerRadius), arc.middleAngle);
|
|
2511
|
+
const arc = new ArcInfo(item, arcMiddle, outerArcMiddle, arcQuadrant, intervalAngle, arcMiddleAngle);
|
|
2512
|
+
arc.pointA = circlePoint(center.x, center.y, this.computeDatumRadius(center.x * 2, center.y * 2, graphicAttribute.outerRadius, centerOffset), arc.middleAngle);
|
|
2514
2513
|
arc.labelSize = {
|
|
2515
2514
|
width: textBounds.x2 - textBounds.x1,
|
|
2516
2515
|
height: textBounds.y2 - textBounds.y1
|
|
@@ -2536,13 +2535,18 @@
|
|
|
2536
2535
|
return arcs;
|
|
2537
2536
|
}
|
|
2538
2537
|
_layoutInsideLabels(arcs, attribute, currentMarks) {
|
|
2538
|
+
var _a, _b, _c, _d, _e;
|
|
2539
|
+
const center = { x: (_b = (_a = currentMarks[0].attribute) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0, y: (_d = (_c = currentMarks[0].attribute) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0 };
|
|
2540
|
+
const centerOffset = (_e = attribute === null || attribute === void 0 ? void 0 : attribute.centerOffset) !== null && _e !== void 0 ? _e : 0;
|
|
2541
|
+
const innerRadiusRatio = this.computeLayoutOuterRadius(currentMarks[0].attribute.innerRadius, attribute.width, attribute.height);
|
|
2542
|
+
const outerRadiusRatio = this.computeLayoutOuterRadius(currentMarks[0].attribute.outerRadius, attribute.width, attribute.height);
|
|
2539
2543
|
const labelConfig = attribute;
|
|
2540
2544
|
const spaceWidth = labelConfig.spaceWidth;
|
|
2541
2545
|
arcs.forEach((arc) => {
|
|
2542
2546
|
var _a, _b;
|
|
2543
2547
|
const { labelSize, radian } = arc;
|
|
2544
|
-
const innerRadius =
|
|
2545
|
-
const outerRadius =
|
|
2548
|
+
const innerRadius = this.computeRadius(innerRadiusRatio, attribute.width, attribute.height, centerOffset, 1);
|
|
2549
|
+
const outerRadius = this.computeRadius(outerRadiusRatio, attribute.width, attribute.height, centerOffset, 1);
|
|
2546
2550
|
const minRadian = connectLineRadian(outerRadius, labelSize.height);
|
|
2547
2551
|
let limit;
|
|
2548
2552
|
if (radian < minRadian) {
|
|
@@ -2567,7 +2571,7 @@
|
|
|
2567
2571
|
const align = this._computeAlign(arc, attribute);
|
|
2568
2572
|
const alignOffset = align === 'left' ? labelWidth : align === 'right' ? 0 : labelWidth / 2;
|
|
2569
2573
|
const labelRadius = outerRadius - spaceWidth - alignOffset;
|
|
2570
|
-
arc.labelPosition = circlePoint(
|
|
2574
|
+
arc.labelPosition = circlePoint(center.x, center.y, labelRadius, arc.middleAngle);
|
|
2571
2575
|
arc.labelLimit = labelWidth;
|
|
2572
2576
|
if (!vutils.isGreater(labelWidth, 0)) {
|
|
2573
2577
|
arc.labelVisible = false;
|
|
@@ -2642,8 +2646,9 @@
|
|
|
2642
2646
|
return arcs;
|
|
2643
2647
|
}
|
|
2644
2648
|
_computeX(arc, attribute, currentMarks) {
|
|
2645
|
-
var _a;
|
|
2646
|
-
const center =
|
|
2649
|
+
var _a, _b, _c, _d, _e, _f;
|
|
2650
|
+
const center = { x: (_b = (_a = currentMarks[0].attribute) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0, y: (_d = (_c = currentMarks[0].attribute) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0 };
|
|
2651
|
+
const centerOffset = (_e = attribute === null || attribute === void 0 ? void 0 : attribute.centerOffset) !== null && _e !== void 0 ? _e : 0;
|
|
2647
2652
|
const plotLayout = { width: center.x * 2, height: center.y * 2 };
|
|
2648
2653
|
let maxRadius = 0;
|
|
2649
2654
|
currentMarks.forEach((currentMark) => {
|
|
@@ -2654,7 +2659,7 @@
|
|
|
2654
2659
|
const radiusRatio = this.computeLayoutOuterRadius(maxRadius, attribute.width, attribute.height);
|
|
2655
2660
|
const line1MinLength = attribute.line.line1MinLength;
|
|
2656
2661
|
const line2MinLength = attribute.line.line2MinLength;
|
|
2657
|
-
const labelLayoutAlign = (
|
|
2662
|
+
const labelLayoutAlign = (_f = attribute.layout) === null || _f === void 0 ? void 0 : _f.align;
|
|
2658
2663
|
const spaceWidth = attribute.spaceWidth;
|
|
2659
2664
|
const { labelPosition, quadrant, pointB } = arc;
|
|
2660
2665
|
if (!vutils.isValidNumber(pointB.x * pointB.y)) {
|
|
@@ -2662,7 +2667,7 @@
|
|
|
2662
2667
|
labelPosition.x = NaN;
|
|
2663
2668
|
arc.labelLimit = 0;
|
|
2664
2669
|
}
|
|
2665
|
-
const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height);
|
|
2670
|
+
const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height, centerOffset);
|
|
2666
2671
|
const flag = isQuadrantLeft(quadrant) ? -1 : 1;
|
|
2667
2672
|
let cx = 0;
|
|
2668
2673
|
const restWidth = flag > 0 ? plotLayout.width - pointB.x : pointB.x;
|
|
@@ -2880,6 +2885,7 @@
|
|
|
2880
2885
|
return -1;
|
|
2881
2886
|
}
|
|
2882
2887
|
_computePointB(arc, r, attribute, currentMarks) {
|
|
2888
|
+
var _a, _b, _c, _d, _e;
|
|
2883
2889
|
const labelConfig = attribute;
|
|
2884
2890
|
let maxRadius = 0;
|
|
2885
2891
|
currentMarks.forEach((currentMark) => {
|
|
@@ -2897,10 +2903,11 @@
|
|
|
2897
2903
|
};
|
|
2898
2904
|
}
|
|
2899
2905
|
else {
|
|
2900
|
-
const center =
|
|
2901
|
-
const
|
|
2906
|
+
const center = { x: (_b = (_a = currentMarks[0].attribute) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0, y: (_d = (_c = currentMarks[0].attribute) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0 };
|
|
2907
|
+
const centerOffset = (_e = attribute === null || attribute === void 0 ? void 0 : attribute.centerOffset) !== null && _e !== void 0 ? _e : 0;
|
|
2908
|
+
const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height, centerOffset);
|
|
2902
2909
|
const { labelPosition, quadrant } = arc;
|
|
2903
|
-
const outerR = Math.max(radius + line1MinLength,
|
|
2910
|
+
const outerR = Math.max(radius + line1MinLength, currentMarks[0].attribute.outerRadius);
|
|
2904
2911
|
const rd = r - outerR;
|
|
2905
2912
|
const x = Math.sqrt(r ** 2 - Math.abs(center.y - labelPosition.y) ** 2) - rd;
|
|
2906
2913
|
if (vutils.isValidNumber(x)) {
|
|
@@ -2922,7 +2929,8 @@
|
|
|
2922
2929
|
}
|
|
2923
2930
|
}
|
|
2924
2931
|
_computeYRange(arc, attribute, currentMarks) {
|
|
2925
|
-
|
|
2932
|
+
var _a, _b, _c, _d, _e;
|
|
2933
|
+
const center = { x: (_b = (_a = currentMarks[0].attribute) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0, y: (_d = (_c = currentMarks[0].attribute) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0 };
|
|
2926
2934
|
const plotRect = { width: center.x * 2, height: center.y * 2 };
|
|
2927
2935
|
let maxRadius = 0;
|
|
2928
2936
|
currentMarks.forEach((currentMark) => {
|
|
@@ -2933,7 +2941,8 @@
|
|
|
2933
2941
|
const radiusRatio = this.computeLayoutOuterRadius(maxRadius, attribute.width, attribute.height);
|
|
2934
2942
|
const line1MinLength = attribute.line.line1MinLength;
|
|
2935
2943
|
const { width, height } = plotRect;
|
|
2936
|
-
const
|
|
2944
|
+
const centerOffset = (_e = attribute === null || attribute === void 0 ? void 0 : attribute.centerOffset) !== null && _e !== void 0 ? _e : 0;
|
|
2945
|
+
const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height, centerOffset);
|
|
2937
2946
|
const r = this._computeLayoutRadius(height / 2, attribute, currentMarks);
|
|
2938
2947
|
const cx = Math.abs(arc.center.x - width / 2);
|
|
2939
2948
|
const cy = arc.center.y - height / 2;
|
|
@@ -2992,6 +3001,7 @@
|
|
|
2992
3001
|
arc.labelYRange = [min, max];
|
|
2993
3002
|
}
|
|
2994
3003
|
_computeLayoutRadius(halfYLength, attribute, currentMarks) {
|
|
3004
|
+
var _a;
|
|
2995
3005
|
const labelConfig = attribute;
|
|
2996
3006
|
const layoutArcGap = labelConfig.layoutArcGap;
|
|
2997
3007
|
const line1MinLength = labelConfig.line.line1MinLength;
|
|
@@ -3002,7 +3012,8 @@
|
|
|
3002
3012
|
}
|
|
3003
3013
|
});
|
|
3004
3014
|
const radiusRatio = this.computeLayoutOuterRadius(maxRadius, attribute.width, attribute.height);
|
|
3005
|
-
const
|
|
3015
|
+
const centerOffset = (_a = attribute === null || attribute === void 0 ? void 0 : attribute.centerOffset) !== null && _a !== void 0 ? _a : 0;
|
|
3016
|
+
const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height, centerOffset);
|
|
3006
3017
|
const outerR = radius + line1MinLength;
|
|
3007
3018
|
const a = outerR - layoutArcGap;
|
|
3008
3019
|
return Math.max((a ** 2 + halfYLength ** 2) / (2 * a), outerR);
|
|
@@ -3081,8 +3092,9 @@
|
|
|
3081
3092
|
: undefined;
|
|
3082
3093
|
return labelLine;
|
|
3083
3094
|
}
|
|
3084
|
-
computeRadius(r, width, height, k) {
|
|
3085
|
-
|
|
3095
|
+
computeRadius(r, width, height, centerOffset, k) {
|
|
3096
|
+
var _a;
|
|
3097
|
+
return ((_a = this.computeLayoutRadius(width ? width : 0, height ? height : 0) * r * (vutils.isNil(k) ? 1 : k) + centerOffset) !== null && _a !== void 0 ? _a : 0);
|
|
3086
3098
|
}
|
|
3087
3099
|
computeLayoutRadius(width, height) {
|
|
3088
3100
|
return Math.min(width / 2, height / 2);
|
|
@@ -3093,9 +3105,10 @@
|
|
|
3093
3105
|
computeLayoutOuterRadius(r, width, height) {
|
|
3094
3106
|
return r / (Math.min(width, height) / 2);
|
|
3095
3107
|
}
|
|
3096
|
-
computeDatumRadius(width, height, outerRadius) {
|
|
3108
|
+
computeDatumRadius(width, height, outerRadius, centerOffset) {
|
|
3109
|
+
var _a;
|
|
3097
3110
|
const outerRadiusRatio = this.computeLayoutOuterRadius(outerRadius, width, height);
|
|
3098
|
-
return this.computeLayoutRadius(width ? width : 0, height ? height : 0) * outerRadiusRatio;
|
|
3111
|
+
return (_a = this.computeLayoutRadius(width ? width : 0, height ? height : 0) * outerRadiusRatio + centerOffset) !== null && _a !== void 0 ? _a : 0;
|
|
3099
3112
|
}
|
|
3100
3113
|
}
|
|
3101
3114
|
ArcLabel.defaultAttributes = {
|
|
@@ -10345,7 +10358,7 @@
|
|
|
10345
10358
|
return new Tag(params ? params.attribute : {});
|
|
10346
10359
|
}
|
|
10347
10360
|
|
|
10348
|
-
const version = "0.15.0-alpha.
|
|
10361
|
+
const version = "0.15.0-alpha.26";
|
|
10349
10362
|
|
|
10350
10363
|
exports.AbstractComponent = AbstractComponent;
|
|
10351
10364
|
exports.ArcInfo = ArcInfo;
|