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';
@@ -19,7 +20,7 @@ import { CoordType, CoordProps } from './Coord';
 
 export { Point } from './types';
 
-export interface ChartProps<TRecord extends DataRecord = DataRecord> {
+export interface ChartProps<TRecord extends DataRecord = DataRecord> extends SelectionProps {
   data: Data<TRecord>;
   scale?: DataRecordScale<TRecord>;
   coord?: CoordType | CoordProps;
@@ -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, 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/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 = chart.getColorScales()[0];
+      const color = colorController.mapping(value);
+      return <View color={color} elements={elements} {...props} />;
+    }
+  };
+};

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

@@ -1,5 +1,6 @@
 import { isFunction } from '@antv/util';
 import { Component, isEqual as equal, ShapeStyleProps } from '@antv/f-engine';
+import Chart from '../../chart';
 import { ChartChildProps } from '../../chart';
 
 function isEqual(origin1, origin2, fields: string[]) {
@@ -26,6 +27,7 @@ export interface SelectionProps {
     unSelectedStyle?: ShapeStyleProps | StyleType;
     cancelable?: boolean;
     onChange?: Function;
+    mode: 'element-link' | 'element' | 'point';
   };
 }
 
@@ -46,21 +48,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 +99,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 +119,7 @@ class Selection<
             newSelected.push(record.origin);
           }
         });
-        onChange && onChange({ selected: newSelected })
+        onChange && onChange({ selected: newSelected });
         this.setState({
           selected: newSelected,
         } as S);
@@ -116,14 +144,14 @@ class Selection<
         .map((key) => selectedMap[key])
         .filter(Boolean);
 
-      onChange && onChange({ selected: newSelected })
+      onChange && onChange({ selected: newSelected });
       this.setState({
         selected: newSelected,
       } as S);
     });
   }
 
-  willReceiveProps(nextProps: P): void {
+  willReceiveProps(nextProps: P, context?): void {
     const { selection: nextSelection } = nextProps;
     const { selection: lastSelection } = this.props;
     if (!nextSelection || !lastSelection) {
@@ -146,7 +174,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,4 @@ export {
   CandlestickView,
 } from './candlestick';
 export { default as Pictorial, PictorialProps } from './pictorial';
+export { default as ElementLink } from './elementLink';

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;