feat: 增加elementLink

Author: xuying.xu

packages/f2/src/chart/index.tsx

@@ -9,6 +9,7 @@ import {
   Ref,
   createRef,
 } from '@antv/f-engine';
+import Selection, { SelectionProps, SelectionState } from '../components/geometry/selection';
 import { ScaleConfig } from '../deps/f2-scale/src';
 import { each, findIndex, isArray, deepMix } from '@antv/util';
 import CoordController, { Coord } from '../controller/coord';
@@ -54,7 +55,7 @@ export interface ComponentPosition {
 class Chart<
   TRecord extends DataRecord = DataRecord,
   IProps extends ChartProps<TRecord> = ChartProps<TRecord>
-> extends Component<IProps, ChartState> {
+> extends Selection<IProps & SelectionProps, SelectionState & ChartState> {
   // 坐标系
   private componentsPosition: ComponentPosition[] = [];
 
@@ -65,7 +66,7 @@ class Chart<
   public adjust: any;
   public coordRef: Ref;
   constructor(props: IProps, context?: IContext) {
-    super(props);
+    super(props, context);
 
     const { theme, px2hd } = context;
 
@@ -81,6 +82,7 @@ class Chart<
     // state
     this.state = {
       filters: {},
+      selected: [],
     };
   }
 
@@ -112,6 +114,10 @@ class Chart<
     coord.create(coordOption);
   }
 
+  didMount(): void {
+    super.didMount();
+  }
+
   // props 更新
   willReceiveProps(nextProps: IProps, context) {
     const { scale, coord, props: lastProps } = this;
@@ -178,6 +184,7 @@ class Chart<
   }
 
   updateCoordFor(component: Component, layout: PositionLayout | PositionLayout[]) {
+    // console.log('updateCoordFor');
     if (!layout) return;
     const { componentsPosition } = this;
     const componentPosition = { component, layout };
@@ -331,6 +338,7 @@ class Chart<
         ...filters,
         [field]: condition,
       },
+      selected: this.state.selected || [],
     });
   }
 

packages/f2/src/components/axis/withAxis.tsx

@@ -48,6 +48,7 @@ export default (View) => {
     }
 
     willMount() {
+      console.log('axis willMount');
       this.updateCoord();
     }
 
@@ -282,6 +283,7 @@ export default (View) => {
 
       const ticks = this.getTicks();
       const position = this._getPosition();
+      // console.log('axis position', position, props.chart.scale);
       const dimType = this._getDimType();
 
       return (

packages/f2/src/components/elementLink/elementLinkView.tsx

@@ -0,0 +1,31 @@
+import { jsx } from '@antv/f-engine';
+
+export default (props) => {
+  const { elements, color } = props;
+  const topPoints = [];
+  const bottomPoints = [];
+
+  elements.map((d) => {
+    const { min, max } = d.shape.getBounds();
+    topPoints.push([min[0], min[1]]);
+    topPoints.push([max[0], min[1]]);
+    bottomPoints.push([min[0], max[1]]);
+    bottomPoints.push([max[0], max[1]]);
+  });
+
+  // 将上边的点和下边的点连接起来，形成一个多边形
+  const points = [...topPoints, ...bottomPoints.reverse()];
+
+  return (
+    <group>
+      <polygon
+        style={{
+          points,
+          fill: color,
+          stroke: 'none',
+          opacity: 0.4,
+        }}
+      />
+    </group>
+  );
+};

packages/f2/src/components/elementLink/index.tsx

@@ -0,0 +1,5 @@
+import withElementLink, { ElementLinkProps } from './withElementLink';
+import elementLinkView from './elementLinkView';
+
+export { ElementLinkProps, withElementLink, elementLinkView };
+export default withElementLink(elementLinkView);

packages/f2/src/components/elementLink/withElementLink.tsx

@@ -0,0 +1,61 @@
+import { jsx, Component, Children } from '@antv/f-engine';
+import { ChartChildProps } from '../../chart';
+export interface DataRecord {
+  origin: any;
+  [k: string]: any;
+}
+
+export interface ElementLinkProps {
+  [k: string]: any;
+}
+export interface ElementLinkState {
+  // records: DataRecord[];
+  selected: any[];
+}
+
+export default (View) => {
+  return class ElementLink<IProps extends ElementLinkProps & ElementLinkProps> extends Component<
+    IProps & ChartChildProps,
+    ElementLinkState
+  > {
+    constructor(props: IProps & ChartChildProps) {
+      super(props);
+      this.state = {
+        selected: [],
+      };
+    }
+
+    findAllShapeNode(vNode, value) {
+      if (!value) return [];
+
+      const shapeNodes = [];
+      Children.map(vNode, (node) => {
+        if (!node) return;
+        const { key, children } = node;
+        if (key === value) {
+          shapeNodes.push(...children);
+        }
+        if (children) {
+          shapeNodes.push(...this.findAllShapeNode(children, value));
+        }
+      });
+      return shapeNodes;
+    }
+
+    render() {
+      const { props } = this;
+      const { chart, field } = props;
+      const { selected } = chart.state;
+      const geometry = props.chart.getGeometrys()[0];
+
+      if (!selected || !selected.length) return null;
+      const value = selected[0][field];
+
+      const elements = this.findAllShapeNode(geometry, value);
+
+      const colorController = geometry.getAttr('color');
+      const color = colorController.mapping(value);
+      return <View color={color} elements={elements} {...props} />;
+    }
+  };
+};

packages/f2/src/components/geometry/index.tsx

@@ -108,6 +108,9 @@ class Geometry<
   // 动画配置
   animation: AnimationProps;
 
+  // 主图形元素
+  elements: any[];
+
   getDefaultCfg() {
     return {};
   }
@@ -173,6 +176,7 @@ class Geometry<
   }
 
   willMount() {
+    console.log('geo willMount');
     this._createAttrs();
     if (!this.dataRecords) {
       this._processData();
@@ -778,9 +782,12 @@ class Geometry<
     const records = this.flatRecords();
     const xScale = this.getXScale();
     const yScale = this.getYScale();
+    const colorScale = this.getColorScale();
     const { field: xField } = xScale;
     const { field: yField } = yScale;
-    const value = data[xField];
+    const { field: colorField } = colorScale;
+    const fieldValue = field === 'xfield' ? xField : field === 'colorField' ? colorField : yField;
+    const value = data[fieldValue];
     const rst = [];
 
     for (let i = 0, len = records.length; i < len; i++) {
@@ -789,7 +796,7 @@ class Geometry<
         xField,
         yField,
       };
-      const originValue = record[FIELD_ORIGIN][field === 'xfield' ? xField : yField];
+      const originValue = record[FIELD_ORIGIN][fieldValue];
       if (originValue === value) {
         rst.push(record);
       }
@@ -827,6 +834,10 @@ class Geometry<
     });
     return items;
   }
+
+  getAllElements() {
+    return this.elements;
+  }
 }
 
 export default Geometry;

packages/f2/src/components/geometry/selection.ts

@@ -1,6 +1,6 @@
 import { isFunction } from '@antv/util';
 import { Component, isEqual as equal, ShapeStyleProps } from '@antv/f-engine';
-import { ChartChildProps } from '../../chart';
+import { ChartChildProps, Chart } from '../../chart';
 
 function isEqual(origin1, origin2, fields: string[]) {
   if (origin1 === origin2) {
@@ -26,6 +26,7 @@ export interface SelectionProps {
     unSelectedStyle?: ShapeStyleProps | StyleType;
     cancelable?: boolean;
     onChange?: Function;
+    mode: 'element-link' | 'element' | 'point';
   };
 }
 
@@ -46,21 +47,47 @@ class Selection<
     this.state.selected = defaultSelected;
   }
 
+  getElementRecord(shape) {
+    const origin = shape.get('data') || {};
+    return [
+      {
+        origin,
+      },
+    ];
+  }
+
+  getLinkRecord(shape, chart) {
+    const origin = shape.get('data') || {};
+
+    const records = chart.getRecords(origin, 'colorField');
+
+    return records;
+  }
+
+  getSelectRecords(ev, triggerOn, mode: string, chart) {
+    const { points, canvasX: x, canvasY: y } = ev;
+    const point = triggerOn === 'click' ? { x, y } : points[0];
+    if (mode === 'element') return this.getElementRecord(ev.target);
+    if (mode === 'element-link') return this.getLinkRecord(ev.target, chart);
+    return this.getSnapRecords(point);
+  }
+
   didMount() {
     const { props, state } = this;
-    const { selection, chart } = props;
+    const { selection } = props;
     if (!selection) return;
     // 默认为 click
-    const { triggerOn = 'click', onChange } = selection;
+    const { triggerOn = 'click', onChange, mode } = selection;
+    // 监听在整个画布上，适用于折线图。
+    const chart = props.chart || (this as Chart);
     chart.on(triggerOn, (ev) => {
-      const { points, canvasX: x, canvasY: y } = ev;
-      const point = triggerOn === 'click' ? { x, y } : points[0];
-      const records = this.getSnapRecords(point);
+      const records = this.getSelectRecords(ev, triggerOn, mode, chart);
+
       const { type = 'single', cancelable = true } = selection;
 
       if (!records || !records.length) {
         if (cancelable) {
-          onChange && onChange({ selected: null })
+          onChange && onChange({ selected: null });
           this.setState({
             selected: null,
           } as S);
@@ -71,15 +98,15 @@ class Selection<
       const { selected } = state;
       const origins = records.map((record) => record.origin);
       if (!selected || !selected.length) {
-        onChange && onChange({ selected: origins })
+        onChange && onChange({ selected: origins });
         this.setState({
           selected: origins,
         } as S);
       }
 
       if (type === 'single') {
         if (!cancelable) {
-          onChange && onChange({ selected: origins })
+          onChange && onChange({ selected: origins });
           this.setState({
             selected: origins,
           } as S);
@@ -91,7 +118,7 @@ class Selection<
             newSelected.push(record.origin);
           }
         });
-        onChange && onChange({ selected: newSelected })
+        onChange && onChange({ selected: newSelected });
         this.setState({
           selected: newSelected,
         } as S);
@@ -116,7 +143,7 @@ class Selection<
         .map((key) => selectedMap[key])
         .filter(Boolean);
 
-      onChange && onChange({ selected: newSelected })
+      onChange && onChange({ selected: newSelected });
       this.setState({
         selected: newSelected,
       } as S);
@@ -146,7 +173,7 @@ class Selection<
     if (!selected || !selected.length) {
       return false;
     }
-    const { chart } = props;
+    const chart = props.chart || (this as Chart);
     const scales = chart.getScales();
     const fields = Object.keys(scales);
     for (let i = 0, len = selected.length; i < len; i++) {

packages/f2/src/components/index.ts

@@ -33,3 +33,5 @@ export {
   CandlestickView,
 } from './candlestick';
 export { default as Pictorial, PictorialProps } from './pictorial';
+export { default as ElementLink } from './elementLink';
+export { default as Wrapper } from './wrapper';

packages/f2/src/components/interval/view/rect.tsx

@@ -14,13 +14,14 @@ export default (props) => {
         return (
           <group key={key}>
             {children.map((item) => {
-              const { key, xMin, xMax, yMin, yMax, color, shape } = item;
+              const { key, xMin, xMax, yMin, yMax, color, shape, origin } = item;
               if (isNaN(xMin) || isNaN(xMax) || isNaN(yMin) || isNaN(yMax)) {
                 return null;
               }
               return (
                 <rect
                   key={key}
+                  data={origin}
                   attrs={{
                     x: xMin,
                     y: yMin,

packages/f2/src/components/interval/withInterval.tsx

@@ -98,7 +98,7 @@ export default (Views) => {
             mix(child, coord.transformToRect(rect));
           }
 
-          mix(child.shape, this.getSelectionStyle(child));
+          mix(child.shape, this.props.chart.getSelectionStyle(child));
         }
       }
       return records;