feat: support set default selected shape for pie-select and interval-…

…select interaction. Related to #248.

src/interaction/helper.js

@@ -2,7 +2,7 @@ const TimeUtil = require('@antv/scale/lib/time-util');
 const Util = require('../util/common');
 
 module.exports = {
-  directionEnabled: (mode, dir) => {
+  directionEnabled(mode, dir) {
     if (mode === undefined) {
       return true;
     } else if (typeof mode === 'string') {

src/interaction/interval-select.js

@@ -20,15 +20,25 @@ class IntervalSelect extends Interaction {
       unSelectStyle: {
         fillOpacity: 0.4
       },
-      cancelable: true
+      cancelable: true,
+      defaultSelected: null // set the default selected shape
     });
     if (Util.isWx || Util.isMy) { // 小程序
       defaultCfg.startEvent = 'touchstart';
       defaultCfg.endEvent = 'touchend';
     }
 
     return defaultCfg;
+  }
 
+  constructor(cfg, chart) {
+    super(cfg, chart);
+    const defaultSelected = this.defaultSelected;
+    if (Util.isObject(defaultSelected)) {
+      const { selectedShape, unSelectedShapes } = this._selectShapesByData(defaultSelected);
+      selectedShape && this._selectShapes(selectedShape, unSelectedShapes);
+      this.selectedShape = selectedShape;
+    }
   }
 
   _resetShape(shape) {
@@ -49,6 +59,77 @@ class IntervalSelect extends Interaction {
     }
   }
 
+  _selectShapesByData(data) {
+    const chart = this.chart;
+    const geom = chart.get('geoms')[0];
+    const container = geom.get('container');
+    const children = container.get('children');
+    let selectedShape = null;
+    const unSelectedShapes = [];
+    Util.each(children, child => {
+      if (child.get('isShape') && (child.get('className') === geom.get('type'))) { // get geometry's shape
+        const shapeData = child.get('origin')._origin;
+        if (Util.isObjectValueEqual(shapeData, data)) {
+          selectedShape = child;
+        } else {
+          unSelectedShapes.push(child);
+        }
+      }
+    });
+
+    return {
+      selectedShape,
+      unSelectedShapes
+    };
+  }
+
+  _selectShapes(selectedShape, unSelectedShapes) {
+    const { selectStyle, unSelectStyle, selectAxisStyle, chart } = this;
+    if (!selectedShape.get('_originAttrs')) {
+      const originAttrs = Object.assign({}, selectedShape.attr());
+      selectedShape.set('_originAttrs', originAttrs);
+    }
+
+    selectedShape.attr(selectStyle);
+
+    Util.each(unSelectedShapes, child => {
+      if (!child.get('_originAttrs')) {
+        const originAttrs = Object.assign({}, child.attr());
+        child.set('_originAttrs', originAttrs);
+      } else {
+        child.attr(child.get('_originAttrs'));
+      }
+      child.set('_selected', false);
+      unSelectStyle && child.attr(unSelectStyle);
+    });
+
+    selectedShape.set('_selected', true);
+
+    if (this.selectAxis) {
+      if (this.selectedAxisShape) {
+        this._resetShape(this.selectedAxisShape);
+      }
+      const geom = chart.get('geoms')[0];
+      const xScale = geom.getXScale();
+      const origin = selectedShape.get('origin')._origin;
+      const { frontPlot, backPlot } = chart.get('axisController');
+
+      let axisShape;
+
+      Util.each(frontPlot.get('children').concat(backPlot.get('children')), s => {
+        if (s.get('value') === xScale.scale(origin[xScale.field])) {
+          axisShape = s;
+          return false;
+        }
+      });
+      this.selectedAxisShape = axisShape;
+      axisShape.set('_originAttrs', Object.assign({}, axisShape.attr()));
+      axisShape.attr(selectAxisStyle);
+    }
+
+    this.canvas.draw();
+  }
+
   reset() {
     const self = this;
     if (!self.selectedShape) {
@@ -85,7 +166,7 @@ class IntervalSelect extends Interaction {
     const container = geom.get('container');
     const children = container.get('children');
     let selectedShape;
-    const unSelectedShapes = [];
+    let unSelectedShapes = [];
     if (mode === 'shape') {
       const plot = chart.get('plotRange');
       if (!Helper.isPointInPlot({ x, y }, plot)) {
@@ -108,16 +189,9 @@ class IntervalSelect extends Interaction {
       }
 
       const data = records[0]._origin;
-      Util.each(children, child => {
-        if (child.get('isShape') && (child.get('className') === geom.get('type'))) { // get geometry's shape
-          const shapeData = child.get('origin')._origin;
-          if (Object.is(shapeData, data)) {
-            selectedShape = child;
-          } else {
-            unSelectedShapes.push(child);
-          }
-        }
-      });
+      const result = this._selectShapesByData(data);
+      selectedShape = result.selectedShape;
+      unSelectedShapes = result.unSelectedShapes;
     }
 
     if (selectedShape) {
@@ -129,54 +203,7 @@ class IntervalSelect extends Interaction {
         }
         this.reset();
       } else {
-        const { selectStyle, unSelectStyle, selectAxisStyle } = this;
-
-        if (!selectedShape.get('_originAttrs')) {
-          const originAttrs = Object.assign({}, selectedShape.attr());
-          selectedShape.set('_originAttrs', originAttrs);
-        }
-
-        selectedShape.attr(selectStyle);
-
-        Util.each(unSelectedShapes, child => {
-          if (!child.get('_originAttrs')) {
-            const originAttrs = Object.assign({}, child.attr());
-            child.set('_originAttrs', originAttrs);
-          } else {
-            child.attr(child.get('_originAttrs'));
-          }
-          child.set('_selected', false);
-          unSelectStyle && child.attr(unSelectStyle);
-        });
-
-        selectedShape.set('_selected', true);
-
-        if (this.selectAxis) {
-          if (this.selectedAxisShape) {
-            this._resetShape(this.selectedAxisShape);
-          }
-
-          const xScale = geom.getXScale();
-          const origin = selectedShape.get('origin')._origin;
-          const {
-            frontPlot,
-            backPlot
-          } = chart.get('axisController');
-
-          let axisShape;
-
-          Util.each(frontPlot.get('children').concat(backPlot.get('children')), s => {
-            if (s.get('value') === xScale.scale(origin[xScale.field])) {
-              axisShape = s;
-              return false;
-            }
-          });
-          this.selectedAxisShape = axisShape;
-          axisShape.set('_originAttrs', Object.assign({}, axisShape.attr()));
-          axisShape.attr(selectAxisStyle);
-        }
-
-        this.canvas.draw();
+        this._selectShapes(selectedShape, unSelectedShapes);
       }
     } else {
       this.reset();

src/interaction/pan.js

@@ -68,7 +68,6 @@ class Pan extends Interaction {
       }
     }
 
-    chart.set('limitInPlot', true);
     chart.registerPlugins([ FilterPlugin, {
       changeData() {
         self.limitRange = {};

src/interaction/pie-select.js

@@ -14,7 +14,8 @@ class PieSelect extends Interaction {
       style: {
         fillOpacity: 0.5
       },
-      cancelable: true
+      cancelable: true,
+      defaultSelected: null // set the default selected shape
     });
     if (Util.isWx || Util.isMy) { // 小程序
       defaultCfg.startEvent = 'touchstart';
@@ -34,8 +35,67 @@ class PieSelect extends Interaction {
         self.selectedShape = null;
         self.lastShape = null;
         self.halo = null;
+        self.defaultSelected = null;
       }
     });
+    const defaultSelected = self.defaultSelected;
+    if (Util.isObject(defaultSelected)) {
+      const selectedShape = self._getSelectedShapeByData(defaultSelected);
+      selectedShape && self._selectedShape(selectedShape);
+      this.canvas.draw();
+    }
+  }
+
+  _getSelectedShapeByData(data) {
+    let selectedShape = null;
+    const chart = this.chart;
+    const geom = chart.get('geoms')[0];
+    const container = geom.get('container');
+    const children = container.get('children');
+    Util.each(children, child => {
+      if (child.get('isShape') && (child.get('className') === geom.get('type'))) { // get geometry's shape
+        const shapeData = child.get('origin')._origin;
+        if (Util.isObjectValueEqual(shapeData, data)) {
+          selectedShape = child;
+          return false;
+        }
+      }
+    });
+    return selectedShape;
+  }
+
+  _selectedShape(selectedShape) {
+    const { offset, style, appendRadius, chart } = this;
+
+    this.lastShape = selectedShape;
+    const { x, y, startAngle, endAngle, r, fill } = selectedShape._attrs.attrs;
+    const frontPlot = chart.get('frontPlot');
+    const halo = frontPlot.addShape('sector', {
+      attrs: Util.mix({
+        x,
+        y,
+        r: r + offset + appendRadius,
+        r0: r + offset,
+        fill,
+        startAngle,
+        endAngle
+      }, style)
+    });
+    this.halo = halo;
+    let animate = this.animate;
+    if (animate) {
+      if (animate === true) {
+        animate = {
+          duration: 300
+        };
+      }
+      halo.attr('r', r + offset);
+      halo.animate().to(Util.mix({
+        attrs: {
+          r: r + offset + appendRadius
+        }
+      }, animate));
+    }
   }
 
   start(ev) {
@@ -55,20 +115,8 @@ class PieSelect extends Interaction {
       return;
     }
 
-    let selectedShape;
     const data = records[0]._origin;
-    const geom = chart.get('geoms')[0];
-    const container = geom.get('container');
-    const children = container.get('children');
-    Util.each(children, child => {
-      if (child.get('isShape') && (child.get('className') === geom.get('type'))) { // get geometry's shape
-        const shapeData = child.get('origin')._origin;
-        if (Object.is(shapeData, data)) {
-          selectedShape = child;
-          return false;
-        }
-      }
-    });
+    const selectedShape = this._getSelectedShapeByData(data);
     const lastShape = this.lastShape;
     this.selectedShape = selectedShape;
     this.selected = true;
@@ -80,36 +128,7 @@ class PieSelect extends Interaction {
       this.lastShape = null;
       this.selected = false;
     } else {
-      this.lastShape = selectedShape;
-      const { x, y, startAngle, endAngle, r, fill } = selectedShape._attrs.attrs;
-      const frontPlot = chart.get('frontPlot');
-      const { offset, style, appendRadius } = this;
-      const halo = frontPlot.addShape('sector', {
-        attrs: Util.mix({
-          x,
-          y,
-          r: r + offset + appendRadius,
-          r0: r + offset,
-          fill,
-          startAngle,
-          endAngle
-        }, style)
-      });
-      this.halo = halo;
-      let animate = this.animate;
-      if (animate) {
-        if (animate === true) {
-          animate = {
-            duration: 300
-          };
-        }
-        halo.attr('r', r + offset);
-        halo.animate().to(Util.mix({
-          attrs: {
-            r: r + offset + appendRadius
-          }
-        }, animate));
-      }
+      this._selectedShape(selectedShape);
     }
 
     this.canvas.draw();

src/interaction/pinch.js

@@ -31,7 +31,6 @@ class Pinch extends Interaction {
     hammer.get('pinch').set({ // open pinch recognizer
       enable: true
     });
-    chart.set('limitInPlot', true);
 
     chart.registerPlugins([ FilterPlugin, {
       changeData() {

src/plugin/filter.js

@@ -6,6 +6,8 @@ const TimeUtil = require('@antv/scale/lib/time-util');
 
 module.exports = {
   beforeGeomInit(chart) {
+    chart.set('limitInPlot', true);
+
     const data = chart.get('data');
     const colDefs = chart.get('colDefs');
     if (!colDefs) return data;

src/util/common.js

@@ -18,6 +18,23 @@ const Util = {
   deepMix: require('@antv/util/lib/deepMix'),
   mix: require('@antv/util/lib/mix'),
   each: require('@antv/util/lib/each'),
+  isObjectValueEqual(a, b) {
+    const aProps = Object.getOwnPropertyNames(a);
+    const bProps = Object.getOwnPropertyNames(b);
+
+    if (aProps.length !== bProps.length) {
+      return false;
+    }
+
+    for (let i = 0, len = aProps.length; i < len; i++) {
+      const propName = aProps[i];
+
+      if (a[propName] !== b[propName]) {
+        return false;
+      }
+    }
+    return true;
+  },
   wrapBehavior(obj, action) {
     if (obj['_wrap_' + action]) {
       return obj['_wrap_' + action];