@visactor/vrender-components 0.15.3 → 0.15.5-alpha.0

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.
Files changed (29) hide show
  1. package/cjs/index.d.ts +1 -1
  2. package/cjs/index.js +1 -1
  3. package/cjs/index.js.map +1 -1
  4. package/cjs/label/arc.js +22 -6
  5. package/cjs/label/arc.js.map +1 -1
  6. package/cjs/label/base.js +28 -17
  7. package/cjs/label/base.js.map +1 -1
  8. package/cjs/label/type.d.ts +4 -1
  9. package/cjs/label/type.js.map +1 -1
  10. package/cjs/legend/discrete/discrete.js +1 -1
  11. package/cjs/legend/discrete/discrete.js.map +1 -1
  12. package/cjs/util/label-smartInvert.js +3 -2
  13. package/cjs/util/label-smartInvert.js.map +1 -1
  14. package/dist/index.js +69 -36
  15. package/dist/index.min.js +1 -1
  16. package/es/index.d.ts +1 -1
  17. package/es/index.js +1 -1
  18. package/es/index.js.map +1 -1
  19. package/es/label/arc.js +22 -6
  20. package/es/label/arc.js.map +1 -1
  21. package/es/label/base.js +28 -17
  22. package/es/label/base.js.map +1 -1
  23. package/es/label/type.d.ts +4 -1
  24. package/es/label/type.js.map +1 -1
  25. package/es/legend/discrete/discrete.js +1 -1
  26. package/es/legend/discrete/discrete.js.map +1 -1
  27. package/es/util/label-smartInvert.js +3 -2
  28. package/es/util/label-smartInvert.js.map +1 -1
  29. package/package.json +3 -3
package/cjs/util/label-smartInvert.js CHANGED
@@ -4,10 +4,11 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: !0
5
5
  }), exports.smartInvertStrategy = exports.contrastAccessibilityChecker = exports.labelSmartInvert = void 0;
6
6
 
7
- const vutils_1 = require("@visactor/vutils"), defaultAlternativeColors = [ "#ffffff", "#000000" ];
7
+ const vutils_1 = require("@visactor/vutils"), defaultAlternativeColors = [ "#ffffff", "#000000" ], {Color: Color} = vutils_1.ColorUtil;
8
8
 
9
9
  function labelSmartInvert(foregroundColorOrigin, backgroundColorOrogin, textType, contrastRatiosThreshold, alternativeColors) {
10
- const foregroundColor = formatColorToHex(foregroundColorOrigin), backgroundColor = formatColorToHex(backgroundColorOrogin);
10
+ if ("string" != typeof foregroundColorOrigin || "string" != typeof backgroundColorOrogin) return foregroundColorOrigin;
11
+ const foregroundColor = new Color(foregroundColorOrigin).toHex(), backgroundColor = new Color(backgroundColorOrogin).toHex();
11
12
  return contrastAccessibilityChecker(foregroundColor, backgroundColor, textType, contrastRatiosThreshold) ? foregroundColor : improveContrastReverse(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors);
12
13
  }
13
14
 
package/cjs/util/label-smartInvert.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/util/label-smartInvert.ts"],"names":[],"mappings":"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","file":"label-smartInvert.js","sourcesContent":["import type { IColor } from '@visactor/vrender';\nimport { ColorUtil } from '@visactor/vutils';\n\nconst defaultAlternativeColors: string[] = ['#ffffff', '#000000'];\n\n/**\n * 标签智能反色\n * @param foregroundColorOrigin\n * @param backgroundColorOrogin\n * @returns\n */\nexport function labelSmartInvert(\n foregroundColorOrigin: IColor | undefined,\n backgroundColorOrogin: IColor | undefined,\n textType?: string | undefined,\n contrastRatiosThreshold?: number,\n alternativeColors?: string | string[]\n): IColor | undefined {\n const foregroundColor = formatColorToHex(foregroundColorOrigin);\n const backgroundColor = formatColorToHex(backgroundColorOrogin);\n if (!contrastAccessibilityChecker(foregroundColor, backgroundColor, textType, contrastRatiosThreshold)) {\n return improveContrastReverse(\n foregroundColor,\n backgroundColor,\n textType,\n contrastRatiosThreshold,\n alternativeColors\n );\n }\n return foregroundColor;\n}\n\n/**\n * 提升对比度\n * 对于对比度不足阈值的情况，推荐备选颜色色板中的颜色提升对比\n * @param foregroundColor\n * @param backgroundColor\n * @returns\n */\nfunction improveContrastReverse(\n foregroundColor: IColor | undefined,\n backgroundColor: IColor | undefined,\n textType?: IColor | undefined,\n contrastRatiosThreshold?: number,\n alternativeColors?: string | string[]\n) {\n const alternativeColorPalletes: string[] = [];\n if (alternativeColors) {\n if (alternativeColors instanceof Array) {\n alternativeColorPalletes.push(...alternativeColors);\n } else {\n alternativeColorPalletes.push(alternativeColors);\n }\n }\n alternativeColorPalletes.push(...defaultAlternativeColors);\n for (const alternativeColor of alternativeColorPalletes) {\n if (foregroundColor === alternativeColor) {\n continue;\n }\n if (contrastAccessibilityChecker(alternativeColor, backgroundColor, textType, contrastRatiosThreshold)) {\n return alternativeColor;\n }\n }\n return undefined;\n}\n\n/**\n * 颜色对比度可行性检查 https://webaim.org/articles/contrast/\n * - WCAG 2.0 AA 级要求普通文本的对比度至少为 4.5:1，大文本的对比度至少为 3:1。（目前按照此标准）\n * - WCAG 2.1 要求图形和用户界面组件（例如表单输入边框）的对比度至少为 3:1。\n * - WCAG AAA 级要求普通文本的对比度至少为 7:1，大文本的对比度至少为 4.5:1。\n * @param foregroundColor\n * @param backgroundColor\n * @returns\n */\nexport function contrastAccessibilityChecker(\n foregroundColor: IColor | undefined,\n backgroundColor: IColor | undefined,\n textType?: IColor | undefined,\n contrastRatiosThreshold?: number\n): boolean {\n //Contrast ratios can range from 1 to 21\n if (contrastRatiosThreshold) {\n if (contrastRatios(foregroundColor, backgroundColor) > contrastRatiosThreshold) {\n return true;\n }\n return false;\n } else if (textType === 'largeText') {\n if (contrastRatios(foregroundColor, backgroundColor) > 3) {\n return true;\n }\n return false;\n }\n if (contrastRatios(foregroundColor, backgroundColor) > 4.5) {\n return true;\n }\n return false;\n}\n\n/**\n * 计算颜色对比度 https://webaim.org/articles/contrast/\n * Contrast ratios can range from 1 to 21 (commonly written 1:1 to 21:1).\n * (L1 + 0.05) / (L2 + 0.05), whereby:\n * L1 is the relative luminance of the lighter of the colors, and\n * L2 is the relative luminance of the darker of the colors.\n * @param foregroundColor\n * @param backgroundColor\n * @returns\n */\nfunction contrastRatios(foregroundColor: IColor | undefined, backgroundColor: IColor | undefined): number {\n const foregroundColorLuminance = getColorLuminance(foregroundColor as string);\n const backgroundColorLuminance = getColorLuminance(backgroundColor as string);\n const L1 = foregroundColorLuminance > backgroundColorLuminance ? foregroundColorLuminance : backgroundColorLuminance;\n const L2 = foregroundColorLuminance > backgroundColorLuminance ? backgroundColorLuminance : foregroundColorLuminance;\n const contrastRatios = (L1 + 0.05) / (L2 + 0.05);\n return contrastRatios;\n}\n\n/**\n * 计算相对亮度 https://webaim.org/articles/contrast/\n * the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white\n * Note 1: For the sRGB colorspace, the relative luminance of a color is defined as\n * L = 0.2126 * R + 0.7152 * G + 0.0722 * B where R, G and B are defined as:\n * if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4\n * if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4\n * if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4\n * and RsRGB, GsRGB, and BsRGB are defined as:\n * RsRGB = R8bit/255\n * GsRGB = G8bit/255\n * BsRGB = B8bit/255\n * @param color\n * @returns\n */\nfunction getColorLuminance(color: string): number {\n const rgb8bit = ColorUtil.hexToRgb(color);\n const RsRGB = rgb8bit[0] / 255;\n const GsRGB = rgb8bit[1] / 255;\n const BsRGB = rgb8bit[2] / 255;\n let R;\n let G;\n let B;\n if (RsRGB <= 0.03928) {\n R = RsRGB / 12.92;\n } else {\n R = Math.pow((RsRGB + 0.055) / 1.055, 2.4);\n }\n if (GsRGB <= 0.03928) {\n G = GsRGB / 12.92;\n } else {\n G = Math.pow((GsRGB + 0.055) / 1.055, 2.4);\n }\n if (BsRGB <= 0.03928) {\n B = BsRGB / 12.92;\n } else {\n B = Math.pow((BsRGB + 0.055) / 1.055, 2.4);\n }\n const L = 0.2126 * R + 0.7152 * G + 0.0722 * B;\n return L;\n}\n\n/**\n * 规范化color格式为hex\n * 当color为颜色名称或rgb时，对其进行规范化处理\n * @param originColor\n * @returns\n */\nfunction formatColorToHex(originColor: IColor | undefined) {\n if ((originColor as string)?.includes('#')) {\n return originColor;\n }\n const c = new ColorUtil.Color(originColor as string);\n const { r, g, b } = c.color;\n return '#' + ColorUtil.rgbToHex(r, g, b);\n}\n\nexport function smartInvertStrategy(\n fillStrategy: string,\n baseColor: IColor,\n invertColor: IColor,\n similarColor: IColor\n) {\n let result;\n switch (fillStrategy) {\n case 'base':\n result = baseColor;\n break;\n case 'invertBase':\n result = invertColor;\n break;\n case 'similarBase':\n result = similarColor;\n default:\n break;\n }\n return result;\n}\n"]}
1
+ {"version":3,"sources":["../src/util/label-smartInvert.ts"],"names":[],"mappings":"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","file":"label-smartInvert.js","sourcesContent":["import type { IColor } from '@visactor/vrender';\nimport { ColorUtil } from '@visactor/vutils';\n\nconst defaultAlternativeColors: string[] = ['#ffffff', '#000000'];\nconst { Color } = ColorUtil;\n\n/**\n * 标签智能反色\n * @param foregroundColorOrigin\n * @param backgroundColorOrogin\n * @returns\n */\nexport function labelSmartInvert(\n foregroundColorOrigin: IColor | undefined,\n backgroundColorOrogin: IColor | undefined,\n textType?: string | undefined,\n contrastRatiosThreshold?: number,\n alternativeColors?: string | string[]\n): IColor | undefined {\n if (typeof foregroundColorOrigin !== 'string' || typeof backgroundColorOrogin !== 'string') {\n return foregroundColorOrigin;\n }\n const foregroundColor = new Color(foregroundColorOrigin as string).toHex();\n const backgroundColor = new Color(backgroundColorOrogin as string).toHex();\n if (!contrastAccessibilityChecker(foregroundColor, backgroundColor, textType, contrastRatiosThreshold)) {\n return improveContrastReverse(\n foregroundColor,\n backgroundColor,\n textType,\n contrastRatiosThreshold,\n alternativeColors\n );\n }\n return foregroundColor;\n}\n\n/**\n * 提升对比度\n * 对于对比度不足阈值的情况，推荐备选颜色色板中的颜色提升对比\n * @param foregroundColor\n * @param backgroundColor\n * @returns\n */\nfunction improveContrastReverse(\n foregroundColor: IColor | undefined,\n backgroundColor: IColor | undefined,\n textType?: IColor | undefined,\n contrastRatiosThreshold?: number,\n alternativeColors?: string | string[]\n) {\n const alternativeColorPalletes: string[] = [];\n if (alternativeColors) {\n if (alternativeColors instanceof Array) {\n alternativeColorPalletes.push(...alternativeColors);\n } else {\n alternativeColorPalletes.push(alternativeColors);\n }\n }\n alternativeColorPalletes.push(...defaultAlternativeColors);\n for (const alternativeColor of alternativeColorPalletes) {\n if (foregroundColor === alternativeColor) {\n continue;\n }\n if (contrastAccessibilityChecker(alternativeColor, backgroundColor, textType, contrastRatiosThreshold)) {\n return alternativeColor;\n }\n }\n return undefined;\n}\n\n/**\n * 颜色对比度可行性检查 https://webaim.org/articles/contrast/\n * - WCAG 2.0 AA 级要求普通文本的对比度至少为 4.5:1，大文本的对比度至少为 3:1。（目前按照此标准）\n * - WCAG 2.1 要求图形和用户界面组件（例如表单输入边框）的对比度至少为 3:1。\n * - WCAG AAA 级要求普通文本的对比度至少为 7:1，大文本的对比度至少为 4.5:1。\n * @param foregroundColor\n * @param backgroundColor\n * @returns\n */\nexport function contrastAccessibilityChecker(\n foregroundColor: IColor | undefined,\n backgroundColor: IColor | undefined,\n textType?: IColor | undefined,\n contrastRatiosThreshold?: number\n): boolean {\n //Contrast ratios can range from 1 to 21\n if (contrastRatiosThreshold) {\n if (contrastRatios(foregroundColor, backgroundColor) > contrastRatiosThreshold) {\n return true;\n }\n return false;\n } else if (textType === 'largeText') {\n if (contrastRatios(foregroundColor, backgroundColor) > 3) {\n return true;\n }\n return false;\n }\n if (contrastRatios(foregroundColor, backgroundColor) > 4.5) {\n return true;\n }\n return false;\n}\n\n/**\n * 计算颜色对比度 https://webaim.org/articles/contrast/\n * Contrast ratios can range from 1 to 21 (commonly written 1:1 to 21:1).\n * (L1 + 0.05) / (L2 + 0.05), whereby:\n * L1 is the relative luminance of the lighter of the colors, and\n * L2 is the relative luminance of the darker of the colors.\n * @param foregroundColor\n * @param backgroundColor\n * @returns\n */\nfunction contrastRatios(foregroundColor: IColor | undefined, backgroundColor: IColor | undefined): number {\n const foregroundColorLuminance = getColorLuminance(foregroundColor as string);\n const backgroundColorLuminance = getColorLuminance(backgroundColor as string);\n const L1 = foregroundColorLuminance > backgroundColorLuminance ? foregroundColorLuminance : backgroundColorLuminance;\n const L2 = foregroundColorLuminance > backgroundColorLuminance ? backgroundColorLuminance : foregroundColorLuminance;\n const contrastRatios = (L1 + 0.05) / (L2 + 0.05);\n return contrastRatios;\n}\n\n/**\n * 计算相对亮度 https://webaim.org/articles/contrast/\n * the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white\n * Note 1: For the sRGB colorspace, the relative luminance of a color is defined as\n * L = 0.2126 * R + 0.7152 * G + 0.0722 * B where R, G and B are defined as:\n * if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4\n * if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4\n * if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4\n * and RsRGB, GsRGB, and BsRGB are defined as:\n * RsRGB = R8bit/255\n * GsRGB = G8bit/255\n * BsRGB = B8bit/255\n * @param color\n * @returns\n */\nfunction getColorLuminance(color: string): number {\n const rgb8bit = ColorUtil.hexToRgb(color);\n const RsRGB = rgb8bit[0] / 255;\n const GsRGB = rgb8bit[1] / 255;\n const BsRGB = rgb8bit[2] / 255;\n let R;\n let G;\n let B;\n if (RsRGB <= 0.03928) {\n R = RsRGB / 12.92;\n } else {\n R = Math.pow((RsRGB + 0.055) / 1.055, 2.4);\n }\n if (GsRGB <= 0.03928) {\n G = GsRGB / 12.92;\n } else {\n G = Math.pow((GsRGB + 0.055) / 1.055, 2.4);\n }\n if (BsRGB <= 0.03928) {\n B = BsRGB / 12.92;\n } else {\n B = Math.pow((BsRGB + 0.055) / 1.055, 2.4);\n }\n const L = 0.2126 * R + 0.7152 * G + 0.0722 * B;\n return L;\n}\n\n/**\n * 规范化color格式为hex\n * 当color为颜色名称或rgb时，对其进行规范化处理\n * @param originColor\n * @returns\n */\nfunction formatColorToHex(originColor: IColor | undefined) {\n if ((originColor as string)?.includes('#')) {\n return originColor;\n }\n const c = new ColorUtil.Color(originColor as string);\n const { r, g, b } = c.color;\n return '#' + ColorUtil.rgbToHex(r, g, b);\n}\n\nexport function smartInvertStrategy(\n fillStrategy: string,\n baseColor: IColor,\n invertColor: IColor,\n similarColor: IColor\n) {\n let result;\n switch (fillStrategy) {\n case 'base':\n result = baseColor;\n break;\n case 'invertBase':\n result = invertColor;\n break;\n case 'similarBase':\n result = similarColor;\n default:\n break;\n }\n return result;\n}\n"]}
package/dist/index.js CHANGED
@@ -403,9 +403,13 @@
403
403
  }
404
404
 
405
405
  const defaultAlternativeColors = ['#ffffff', '#000000'];
406
+ const { Color } = vutils.ColorUtil;
406
407
  function labelSmartInvert(foregroundColorOrigin, backgroundColorOrogin, textType, contrastRatiosThreshold, alternativeColors) {
407
- const foregroundColor = formatColorToHex(foregroundColorOrigin);
408
- const backgroundColor = formatColorToHex(backgroundColorOrogin);
408
+ if (typeof foregroundColorOrigin !== 'string' || typeof backgroundColorOrogin !== 'string') {
409
+ return foregroundColorOrigin;
410
+ }
411
+ const foregroundColor = new Color(foregroundColorOrigin).toHex();
412
+ const backgroundColor = new Color(backgroundColorOrogin).toHex();
409
413
  if (!contrastAccessibilityChecker(foregroundColor, backgroundColor, textType, contrastRatiosThreshold)) {
410
414
  return improveContrastReverse(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors);
411
415
  }
@@ -487,14 +491,6 @@
487
491
  const L = 0.2126 * R + 0.7152 * G + 0.0722 * B;
488
492
  return L;
489
493
  }
490
- function formatColorToHex(originColor) {
491
- if (originColor === null || originColor === void 0 ? void 0 : originColor.includes('#')) {
492
- return originColor;
493
- }
494
- const c = new vutils.ColorUtil.Color(originColor);
495
- const { r, g, b } = c.color;
496
- return '#' + vutils.ColorUtil.rgbToHex(r, g, b);
497
- }
498
494
  function smartInvertStrategy(fillStrategy, baseColor, invertColor, similarColor) {
499
495
  let result;
500
496
  switch (fillStrategy) {
@@ -2032,13 +2028,14 @@
2032
2028
  return listener;
2033
2029
  }
2034
2030
  _smartInvert(labels) {
2035
- var _a, _b, _c, _d;
2031
+ var _a, _b, _c, _d, _e;
2036
2032
  const option = (this.attribute.smartInvert || {});
2037
2033
  const { textType, contrastRatiosThreshold, alternativeColors } = option;
2038
2034
  const fillStrategy = (_a = option.fillStrategy) !== null && _a !== void 0 ? _a : 'invertBase';
2039
2035
  const strokeStrategy = (_b = option.strokeStrategy) !== null && _b !== void 0 ? _b : 'base';
2040
2036
  const brightColor = (_c = option.brightColor) !== null && _c !== void 0 ? _c : '#ffffff';
2041
2037
  const darkColor = (_d = option.darkColor) !== null && _d !== void 0 ? _d : '#000000';
2038
+ const outsideEnable = (_e = option.outsideEnable) !== null && _e !== void 0 ? _e : false;
2042
2039
  if (fillStrategy === 'null' && strokeStrategy === 'null') {
2043
2040
  return;
2044
2041
  }
@@ -2048,13 +2045,12 @@
2048
2045
  continue;
2049
2046
  }
2050
2047
  const baseMark = this._idToGraphic.get(label.attribute.id);
2051
- const isInside = this._canPlaceInside(label.AABBBounds, baseMark === null || baseMark === void 0 ? void 0 : baseMark.AABBBounds);
2052
2048
  const backgroundColor = baseMark.attribute.fill;
2053
2049
  const foregroundColor = label.attribute.fill;
2054
2050
  const baseColor = backgroundColor;
2055
2051
  const invertColor = labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors);
2056
2052
  const similarColor = contrastAccessibilityChecker(invertColor, brightColor) ? brightColor : darkColor;
2057
- if (isInside) {
2053
+ if (outsideEnable) {
2058
2054
  const fill = smartInvertStrategy(fillStrategy, baseColor, invertColor, similarColor);
2059
2055
  fill && label.setAttributes({ fill });
2060
2056
  if (label.attribute.lineWidth === 0) {
@@ -2064,19 +2060,31 @@
2064
2060
  stroke && label.setAttributes({ stroke });
2065
2061
  }
2066
2062
  else {
2067
- if (label.attribute.lineWidth === 0) {
2068
- continue;
2063
+ const isInside = this._canPlaceInside(label.AABBBounds, baseMark === null || baseMark === void 0 ? void 0 : baseMark.AABBBounds);
2064
+ if (isInside) {
2065
+ const fill = smartInvertStrategy(fillStrategy, baseColor, invertColor, similarColor);
2066
+ fill && label.setAttributes({ fill });
2067
+ if (label.attribute.lineWidth === 0) {
2068
+ continue;
2069
+ }
2070
+ const stroke = smartInvertStrategy(strokeStrategy, baseColor, invertColor, similarColor);
2071
+ stroke && label.setAttributes({ stroke });
2069
2072
  }
2070
- if (label.attribute.stroke) {
2071
- label.setAttributes({
2072
- fill: labelSmartInvert(label.attribute.fill, label.attribute.stroke, textType, contrastRatiosThreshold, alternativeColors)
2073
- });
2074
- continue;
2073
+ else {
2074
+ if (label.attribute.lineWidth === 0) {
2075
+ continue;
2076
+ }
2077
+ if (label.attribute.stroke) {
2078
+ label.setAttributes({
2079
+ fill: labelSmartInvert(label.attribute.fill, label.attribute.stroke, textType, contrastRatiosThreshold, alternativeColors)
2080
+ });
2081
+ continue;
2082
+ }
2083
+ const fill = smartInvertStrategy(fillStrategy, baseColor, invertColor, similarColor);
2084
+ fill && label.setAttributes({ fill });
2085
+ const stroke = smartInvertStrategy(strokeStrategy, baseColor, invertColor, similarColor);
2086
+ stroke && label.setAttributes({ stroke });
2075
2087
  }
2076
- const fill = smartInvertStrategy(fillStrategy, baseColor, invertColor, similarColor);
2077
- fill && label.setAttributes({ fill });
2078
- const stroke = smartInvertStrategy(strokeStrategy, baseColor, invertColor, similarColor);
2079
- stroke && label.setAttributes({ stroke });
2080
2088
  }
2081
2089
  }
2082
2090
  }
@@ -2528,21 +2536,29 @@
2528
2536
  const leftArcs = Array.from(this._arcLeft.values());
2529
2537
  const rightArcs = Array.from(this._arcRight.values());
2530
2538
  const arcs = [];
2531
- if (position === 'inside') {
2532
- arcs.push(...this._layoutInsideLabels(rightArcs, attribute, currentMarks));
2533
- arcs.push(...this._layoutInsideLabels(leftArcs, attribute, currentMarks));
2534
- }
2535
- else {
2536
- arcs.push(...this._layoutOutsideLabels(rightArcs, attribute, currentMarks));
2537
- arcs.push(...this._layoutOutsideLabels(leftArcs, attribute, currentMarks));
2539
+ switch (position) {
2540
+ case 'inside':
2541
+ case 'inside-inner':
2542
+ case 'inside-outer':
2543
+ arcs.push(...this._layoutInsideLabels(rightArcs, attribute, currentMarks));
2544
+ arcs.push(...this._layoutInsideLabels(leftArcs, attribute, currentMarks));
2545
+ break;
2546
+ case 'outside':
2547
+ default:
2548
+ arcs.push(...this._layoutOutsideLabels(rightArcs, attribute, currentMarks));
2549
+ arcs.push(...this._layoutOutsideLabels(leftArcs, attribute, currentMarks));
2550
+ break;
2538
2551
  }
2539
2552
  return arcs;
2540
2553
  }
2541
2554
  _layoutInsideLabels(arcs, attribute, currentMarks) {
2555
+ var _a, _b;
2542
2556
  const labelConfig = attribute;
2543
2557
  const spaceWidth = labelConfig.spaceWidth;
2558
+ const position = (_a = labelConfig === null || labelConfig === void 0 ? void 0 : labelConfig.position) !== null && _a !== void 0 ? _a : 'inside';
2559
+ const offsetRadius = (_b = labelConfig === null || labelConfig === void 0 ? void 0 : labelConfig.offsetRadius) !== null && _b !== void 0 ? _b : -spaceWidth;
2544
2560
  arcs.forEach((arc) => {
2545
- var _a, _b;
2561
+ var _a, _b, _c;
2546
2562
  const { labelSize, radian } = arc;
2547
2563
  const innerRadius = arc.innerRadius;
2548
2564
  const outerRadius = arc.outerRadius;
@@ -2568,14 +2584,28 @@
2568
2584
  arc.labelText = text;
2569
2585
  const labelWidth = Math.min(limit, arc.labelSize.width);
2570
2586
  const align = this._computeAlign(arc, attribute);
2571
- const alignOffset = align === 'left' ? labelWidth : align === 'right' ? 0 : labelWidth / 2;
2572
- const labelRadius = outerRadius - spaceWidth - alignOffset;
2587
+ let alignOffset = 0;
2588
+ if (position === 'inside') {
2589
+ alignOffset = align === 'left' ? labelWidth : align === 'right' ? 0 : labelWidth / 2;
2590
+ }
2591
+ let labelRadius;
2592
+ if (position === 'inside-inner') {
2593
+ labelRadius = innerRadius - offsetRadius + alignOffset;
2594
+ }
2595
+ else {
2596
+ labelRadius = outerRadius + offsetRadius - alignOffset;
2597
+ }
2573
2598
  arc.labelPosition = circlePoint(arc.circleCenter.x, arc.circleCenter.y, labelRadius, arc.middleAngle);
2574
2599
  arc.labelLimit = labelWidth;
2575
2600
  if (!vutils.isGreater(labelWidth, 0)) {
2576
2601
  arc.labelVisible = false;
2577
2602
  }
2578
2603
  arc.angle = (_b = (_a = attribute === null || attribute === void 0 ? void 0 : attribute.textStyle) === null || _a === void 0 ? void 0 : _a.angle) !== null && _b !== void 0 ? _b : arc.middleAngle;
2604
+ let offsetAngle = (_c = labelConfig === null || labelConfig === void 0 ? void 0 : labelConfig.offsetAngle) !== null && _c !== void 0 ? _c : 0;
2605
+ if (['inside-inner', 'inside-outer'].includes(position)) {
2606
+ offsetAngle += Math.PI / 2;
2607
+ }
2608
+ arc.angle += offsetAngle;
2579
2609
  });
2580
2610
  return arcs;
2581
2611
  }
@@ -2640,6 +2670,9 @@
2640
2670
  arc.labelVisible = false;
2641
2671
  }
2642
2672
  arc.angle = (_b = (_a = attribute === null || attribute === void 0 ? void 0 : attribute.textStyle) === null || _a === void 0 ? void 0 : _a.angle) !== null && _b !== void 0 ? _b : 0;
2673
+ if (attribute === null || attribute === void 0 ? void 0 : attribute.offsetAngle) {
2674
+ arc.angle += attribute.offsetAngle;
2675
+ }
2643
2676
  arc.labelLine = Object.assign({}, attribute === null || attribute === void 0 ? void 0 : attribute.line);
2644
2677
  });
2645
2678
  return arcs;
@@ -7639,7 +7672,7 @@
7639
7672
  opacity: 0.85
7640
7673
  },
7641
7674
  unSelected: {
7642
- fill: '#D8D8D8'
7675
+ opacity: 0.5
7643
7676
  }
7644
7677
  }
7645
7678
  },
@@ -10495,7 +10528,7 @@
10495
10528
  return new Tag(params ? params.attribute : {});
10496
10529
  }
10497
10530
 
10498
- const version = "0.15.3";
10531
+ const version = "0.15.5-alpha.0";
10499
10532
 
10500
10533
  exports.AbstractComponent = AbstractComponent;
10501
10534
  exports.ArcInfo = ArcInfo;