fix: 修复 interval 类型 label 在转置直角坐标系下 position 计算错误问题

antvis · Mar 20, 2020 · 39d0212 · 39d0212
1 parent c0fd91a
commit 39d0212
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 23 deletions.
diff --git a/src/component/labels.ts b/src/component/labels.ts
@@ -167,7 +167,7 @@ export default class Labels {
     if ((content.isGroup && content.isGroup()) || (content.isShape && content.isShape()))  {
       // 如果 content 是 Group 或者 Shape，根据 textAlign 调整位置后，直接将其加入 labelGroup
       const { width, height } = content.getCanvasBBox();
-      const textAlign = cfg.textAlign || 'left';
+      const textAlign = get(cfg, 'textAlign', 'left');
 
       let x = cfg.x;
       const y = cfg.y - (height / 2);
@@ -187,6 +187,7 @@ export default class Labels {
           x: cfg.x,
           y: cfg.y,
           textAlign: cfg.textAlign,
+          textBaseline: get(cfg, 'textBaseline', 'middle'),
           text: cfg.content,
           ...cfg.style,
         },

diff --git a/src/geometry/label/base.ts b/src/geometry/label/base.ts
@@ -219,6 +219,7 @@ export default class GeometryLabel {
     }
 
     if (labelCfg.position) {
+      // 如果 label 支持 position 属性
       this.setLabelPosition(label, mappingData, index, labelCfg.position);
     }
     const offsetPoint = this.getLabelOffset(labelCfg, index, total);

diff --git a/src/geometry/label/interface.ts b/src/geometry/label/interface.ts
@@ -17,6 +17,7 @@ export interface LabelPointCfg {
   color?: string;
   content?: any;
   textAlign?: TextAlign;
+  textBaseline?: string;
   rotate?: number;
   angle?: number;
   r?: number;
@@ -33,6 +34,7 @@ export interface LabelItem extends GeometryLabelCfg {
   color?: string;
   content?: any;
   textAlign?: TextAlign;
+  textBaseline?: string;
   rotate?: number;
   angle?: number;
   r?: number;

diff --git a/src/geometry/label/interval.ts b/src/geometry/label/interval.ts
@@ -1,3 +1,5 @@
+import { get } from '@antv/util';
+
 import { MappingDatum, Point } from '../../interface';
 import GeometryLabel from './base';
 import { LabelPointCfg } from './interface';
@@ -12,56 +14,52 @@ export default class IntervalLabel extends GeometryLabel {
     const shapePoints = mappingData.points as Point[];
     const point0 = coordinate.convert(shapePoints[0]);
     const point1 = coordinate.convert(shapePoints[2]);
-    const width = ((point0.x - point1.x) / 2) * (transposed ? -1 : 1);
-    const height = ((point0.y - point1.y) / 2) * (transposed ? -1 : 1);
+    const flag = transposed ? -1 : 1;
+    const width = ((point0.x - point1.x) / 2) * flag;
+    const height = ((point0.y - point1.y) / 2) * flag;
 
     switch (position) {
       case 'right':
-        if (transposed) {
-          labelPointCfg.x -= width;
-          labelPointCfg.y += height;
-          labelPointCfg.textAlign = labelPointCfg.textAlign || 'center';
-        } else {
+        if (!transposed) {
           labelPointCfg.x -= width;
           labelPointCfg.y += height;
-          labelPointCfg.textAlign = labelPointCfg.textAlign || 'left';
         }
+        labelPointCfg.textAlign = get(labelPointCfg, 'textAlign', 'left');
         break;
       case 'left':
         if (transposed) {
-          labelPointCfg.x -= width;
-          labelPointCfg.y -= height;
-          labelPointCfg.textAlign = labelPointCfg.textAlign || 'center';
+          labelPointCfg.x -= width * 2;
         } else {
           labelPointCfg.x += width;
           labelPointCfg.y += height;
-          labelPointCfg.textAlign = labelPointCfg.textAlign || 'right';
         }
+        labelPointCfg.textAlign = get(labelPointCfg, 'textAlign', 'right');
         break;
       case 'bottom':
         if (transposed) {
-          labelPointCfg.x -= width * 2;
-          labelPointCfg.textAlign = labelPointCfg.textAlign || 'left';
+          labelPointCfg.x -= width;
+          labelPointCfg.y -= height;
         } else {
           labelPointCfg.y += height * 2;
-          labelPointCfg.textAlign = labelPointCfg.textAlign || 'center';
         }
-
+        labelPointCfg.textAlign = get(labelPointCfg, 'textAlign', 'center');
+        labelPointCfg.textBaseline = get(labelPointCfg, 'textBaseline', 'top');
         break;
       case 'middle':
         if (transposed) {
           labelPointCfg.x -= width;
         } else {
           labelPointCfg.y += height;
         }
-        labelPointCfg.textAlign = labelPointCfg.textAlign || 'center';
+        labelPointCfg.textAlign = get(labelPointCfg, 'textAlign', 'center');
         break;
       case 'top':
         if (transposed) {
-          labelPointCfg.textAlign = labelPointCfg.textAlign || 'left';
-        } else {
-          labelPointCfg.textAlign = labelPointCfg.textAlign || 'center';
+          labelPointCfg.x -= width;
+          labelPointCfg.y += height;
         }
+        labelPointCfg.textAlign = get(labelPointCfg, 'textAlign', 'center');
+        labelPointCfg.textBaseline = get(labelPointCfg, 'textBaseline', 'bottom');
         break;
       default:
         break;

diff --git a/src/theme/default.ts b/src/theme/default.ts
@@ -1231,7 +1231,6 @@ export function getThemeByStylesheet(styleSheet: StyleSheet) {
       style: {
         fill: styleSheet.labelFillColor,
         fontSize: styleSheet.labelFontSize,
-        textBaseline: 'middle',
         fontFamily: styleSheet.fontFamily,
         stroke: styleSheet.labelBorderColor,
         lineWidth: styleSheet.labelBorder,
@@ -1242,7 +1241,6 @@ export function getThemeByStylesheet(styleSheet: StyleSheet) {
       style: {
         fill: styleSheet.innerLabelFillColor,
         fontSize: styleSheet.innerLabelFontSize,
-        textBaseline: 'middle',
         fontFamily: styleSheet.fontFamily,
         stroke: styleSheet.innerLabelBorderColor,
         lineWidth: styleSheet.innerLabelBorder,