fix: 修改 line geometry shape 获取

antvis · Oct 21, 2021 · 82771da · 82771da
1 parent 6a21aaf
commit 82771da
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 111 deletions.
diff --git a/packages/f2-next/src/components/geometry/index.tsx b/packages/f2-next/src/components/geometry/index.tsx
@@ -20,21 +20,22 @@ import { Linear, Category } from '../../attr';
 import { applyMixins } from '../../mixins';
 import AttrMixin from '../../mixins/attr';
 import { toTimeStamp } from '../../util/index';
+import { AttrRange } from './interface';
 
 // 保留原始数据的字段
 const FIELD_ORIGIN = 'origin';
 // 需要映射的属性名
 const ATTRS = ['x', 'y', 'color', 'size', 'shape'];
 // 分组处理的属性
 const GROUP_ATTRS = ['color', 'size', 'shape'];
-
 class Geometry extends Component implements AttrMixin {
   isGeometry = true;
   isInit = false;
   chart: Chart;
   data: any;
   attrs: any = {};
   adjust: any;
+  ranges: AttrRange = {}; // 各属性值域
 
   // 预处理后的数据
   dataArray: any;
@@ -60,6 +61,7 @@ class Geometry extends Component implements AttrMixin {
 
   _init() {
     this._prepareAttrs();
+    this._initAttrRanges();
     this._createAttrs();
     this._adjustScales();
     this._processData();
@@ -297,27 +299,28 @@ class Geometry extends Component implements AttrMixin {
     return chart.scale.getZeroValue(scale);
   }
 
-  // 获取
+  // 从值域中第一个值获取属性默认 value
   _getAttrsDefaultValue() {
-    const { context } = this;
-    const { theme } = context;
+    const { color = [], size = [], shape = [] } = this.ranges;
     return {
-      color: theme.colors[0],
-      size: theme.sizes[0],
-    };
+      color: color[0],
+      size: size[0],
+      shape: shape[0],
+    }
   }
 
-  _getAttrsRange() {
-    const { context } = this;
-    const { theme } = context;
+  // 初始化各属性值域
+  _initAttrRanges() {
+    const { props } = this;
+    const { theme } = props?.chart?.context;
 
-    // 构造各属性的值域
+    // color & size 的值域通用，shape 需要根据不同的 geometry 去获取
     const ranges = {
       color: theme.colors,
       size: theme.sizes,
-      shape: theme.shapes,
     };
 
+    this.ranges = ranges;
     return ranges;
   }
 
@@ -328,12 +331,11 @@ class Geometry extends Component implements AttrMixin {
     const attrNamesLength = attrNames.length;
 
     // 设置各属性的值域
-    const attrsRange = this._getAttrsRange();
     for (let key = 0; key < attrNamesLength; key++) {
       const attrName = attrNames[key];
 
       if (!this.getAttrRange(attrName)) {
-        this.setAttrRange(attrName, attrsRange[attrName]);
+        this.setAttrRange(attrName, this.ranges[attrName]);
       }
     }
 

diff --git a/packages/f2-next/src/components/geometry/interface.ts b/packages/f2-next/src/components/geometry/interface.ts
@@ -0,0 +1,5 @@
+export interface AttrRange {
+  shape?: any[];
+  color?: any[];
+  size?: any[];
+}
diff --git a/packages/f2-next/src/components/line/lineView.tsx b/packages/f2-next/src/components/line/lineView.tsx
@@ -2,20 +2,20 @@ import { jsx } from '../../jsx';
 import { isArray } from '@antv/util';
 
 export default (props: any) => {
-  const { mappedArray, lineWidth = '4px' } = props;
+  const { mappedArray } = props;
 
   return (
     <group>
       {
         mappedArray.map(item => {
-          const { color, points, lineDash, smooth } = item;
+          const { color, points, size, lineWidth, lineDash, smooth } = item;
           return (
             <group>
               <polyline
                 attrs={{
                   points: points,
                   stroke: color,
-                  lineWidth: lineWidth,
+                  lineWidth: lineWidth ?? size,
                   lineDash,
                   smooth,
                 }}

diff --git a/packages/f2-next/src/components/line/withLine.tsx b/packages/f2-next/src/components/line/withLine.tsx
@@ -4,82 +4,22 @@ import Geometry from '../geometry';
 
 export default View => {
   return class Line extends Geometry {
-    _getAttrsRange() {
-      const { context } = this;
-      const { theme } = context;
+    constructor(props, context) {
+      super(props);
+      this._getShapeRanges(context);
+    }
 
-      // 构造各属性的值域
+    // 获取 line 类型 shape range
+    _getShapeRanges = (context) => {
+      const { theme } = context;
       const ranges = {
-        color: theme.colors,
-        size: theme.sizes,
+        ...this.ranges,
         shape: theme.shapes.line,
       };
-
+      this.ranges = ranges;
       return ranges;
     }
 
-    _getAttrsDefaultValue() {
-      const { context } = this;
-      const { theme } = context;
-      return {
-        color: theme.colors[0],
-        size: theme.sizes[0],
-        shape: theme.shapes.line[0],
-      };
-    }
-
-    _mappingAttrs(dataArray) {
-      const { x, y, ...attrs } = this.attrs;
-      const attrNames = Object.keys(attrs);
-      const attrNamesLength = attrNames.length;
-
-      // 设置各属性的值域
-      const attrsRange = this._getAttrsRange();
-      for (let key = 0; key < attrNamesLength; key++) {
-        const attrName = attrNames[key];
-
-        if (!this.getAttrRange(attrName)) {
-          this.setAttrRange(attrName, attrsRange[attrName]);
-        }
-      }
-
-      // 默认值
-      const defaultValues = this._getAttrsDefaultValue();
-      const dataArrayLength = dataArray.length;
-      const mappedArray = new Array(dataArrayLength);
-      for (let i = 0; i < dataArrayLength; i++) {
-        const data = dataArray[i];
-
-        // 图形属性映射，因为每组里面这些属性的值都是相同的，所以只需要映射第一个就可以了
-        const attrsValue = {};
-        for (let key = 0; key < attrNamesLength; key++) {
-          const attrName = attrNames[key];
-          attrsValue[attrName] = this.getAttrValue(attrName, data[0]);
-        }
-
-        // 生成映射后的数据对象
-        const mappedData = new Array(data.length);
-        for (let i = 0, len = data.length; i < len; i++) {
-          const record = data[i];
-          const result = {
-            ...record,
-            ...defaultValues,
-            ...attrsValue,
-          };
-          mappedData[i] = result;
-        }
-        mappedArray[i] = mappedData;
-      }
-      return mappedArray;
-    }
-
-    mapping() {
-      const originMapped = super.mapping();
-      const mappedArray = this._mappingAttrs(originMapped);
-      this.mappedArray = mappedArray;
-      return mappedArray;
-    }
-
     _convertPosition(mappedArray) {
       const { props } = this;
       const { coord } = props;
@@ -95,49 +35,53 @@ export default View => {
       return mappedArray;
     }
 
-    parsePoints(dataArray) {
+    // 获取主题中默认 line shape 样式
+    _getThemeShape(shape: string | undefined) {
+      const { context } = this;
+      const { theme } = context;
+      const { line: lineShapeMap } = theme.shape;
+      return mix({}, lineShapeMap.default, lineShapeMap[shape]);
+    }
+
+    // 合并优先级数据映射后的 style(color, size, shape) > props.style
+    _mergeStyle(dataItem, propsStyle) {
+      const { color, shape, size } = dataItem;
+      // 'line' | 'smooth' | 'dash' 三种 shapes 映射到具体的 line attrs
+      const themeStyle = this._getThemeShape(shape);
+      return {
+        ...propsStyle,
+        ...themeStyle,
+        size,
+        color,
+      };
+    }
+
+    parsePoints(dataArray, style) {
       const { props } = this;
       const { coord } = props;
       return dataArray.map(data => {
-        const { color, shape, size } = data[0];
         const points = data;
         if (coord.isPolar) {
           points.push(data[0]);
         }
-        const extLineAttrs: any = {};
-        switch (shape) {
-          case 'line':
-            break;
-          case 'dash':
-            extLineAttrs.lineDash = [4, 4];
-            break;
-          case 'smooth':
-            extLineAttrs.smooth = true;
-            break;
-          default:
-            break;
-        }
+        const lineStyle = this._mergeStyle(data[0], style);
         return {
-          color,
-          size,
+          ...lineStyle,
           points,
-          ...extLineAttrs,
         }
       });
     }
 
     render() {
       const { props } = this;
-      const { smooth, lineWidth } = props;
+      const { style } = props;
       const { coord } = props;
       const mapped = this.mapping();
-      const mappedArray = this.parsePoints(mapped);
+      const mappedArray = this.parsePoints(mapped, style);
       return (
         <View
           coord={ coord }
           mappedArray={ mappedArray }
-          smooth={smooth}
-          lineWidth={lineWidth}
         />
       );
     }

diff --git a/packages/f2-next/src/theme.ts b/packages/f2-next/src/theme.ts
@@ -100,9 +100,17 @@ const Theme = {
   sizes: [ 4, 8, 10, 12 ],
   shape: {
     line: {
-      lineWidth: 2,
-      lineJoin: 'round',
-      lineCap: 'round'
+      default: {
+        lineWidth: 2,
+        lineJoin: 'round',
+        lineCap: 'round'
+      },
+      smooth: {
+        smooth: true,
+      },
+      dash: {
+        lineDash: [4, 4],
+      },
     },
     point: {
       lineWidth: 0,