feat: pie-select and interval-select support cancelable property.

antvis · Jun 20, 2018 · fd27072 · fd27072
1 parent de26f0c
commit fd27072
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 37 deletions.
diff --git a/demos/0-interacion-interval-select.html b/demos/0-interacion-interval-select.html
@@ -44,7 +44,11 @@
       stroke: '#000',
       lineWidth: 1
     },
-    // unSelectStyle:null
+    unSelectStyle: null,
+    cancelable: false,
+    onEnd(ev) {
+      console.log(ev.data, ev.selected)
+    }
   });
 </script>
 </body>

diff --git a/demos/0-interacion-pie-select.html b/demos/0-interacion-pie-select.html
@@ -68,12 +68,18 @@
     duration: 300,
     easing: 'backOut'
   },
+  cancelable: true,
   onEnd(ev) {
-    const { shape, data, shapeInfo} = ev;
+    const { shape, data, shapeInfo, selected } = ev;
     if (shape) {
-      $('#number').css('color', shapeInfo.color);
-      $('#number').text(data.percent * 100 + '%');
-      $('#name').text(data.name);
+      if (selected) {
+        $('#number').css('color', shapeInfo.color);
+        $('#number').text(data.percent * 100 + '%');
+        $('#name').text(data.name);
+      } else {
+        $('#number').text('');
+        $('#name').text('');
+      }
     }
   }
 });

diff --git a/src/interaction/interval-select.js b/src/interaction/interval-select.js
@@ -14,11 +14,15 @@ class IntervalSelect extends Interaction {
       }, // 被选中图形的样式
       unSelectStyle: {
         fillOpacity: 0.4
-      } // 未被选中图形的样式
+      }, // 未被选中图形的样式
+      cancelable: true // 选中之后是否允许取消选中，默认允许取消选中
     });
   }
 
   _reset() {
+    if (!this.selectedShape) {
+      return;
+    }
     const chart = this.chart;
     const geom = chart.get('geoms')[0];
     const container = geom.get('container');
@@ -30,6 +34,7 @@ class IntervalSelect extends Interaction {
         child._attrs.attrs = originAttrs;
         child.set('_originAttrs', null);
       }
+      child.set('_selected', false);
     });
     this.canvas.draw();
   }
@@ -63,42 +68,50 @@ class IntervalSelect extends Interaction {
       }
     });
 
-    const lastShape = this.lastShape;
-    if (selectedShape && selectedShape !== lastShape) { // 没有被选中
-      const { selectStyle, unSelectStyle } = this;
-
-      if (!selectedShape.get('_originAttrs')) {
-        const originAttrs = Object.assign({}, selectedShape.attr());
-        selectedShape.set('_originAttrs', originAttrs);
-      }
-
-      selectedShape.attr(selectStyle);
+    if (selectedShape) { // 有图形被选中
+      this.selectedShape = selectedShape;
+      if (selectedShape.get('_selected')) { // 已经被选中
+        if (!this.cancelable) { // 不允许取消选中则不处理
+          return;
+        }
+        this._reset(); // 允许取消选中
+      } else { // 未被选中
+        const { selectStyle, unSelectStyle } = this;
 
-      Util.each(unSelectedShapes, child => {
-        if (!child.get('_originAttrs')) {
-          const originAttrs = Object.assign({}, child.attr());
-          child.set('_originAttrs', originAttrs);
-        } else {
-          child.attr(child.get('_originAttrs'));
+        if (!selectedShape.get('_originAttrs')) {
+          const originAttrs = Object.assign({}, selectedShape.attr());
+          selectedShape.set('_originAttrs', originAttrs);
         }
 
-        unSelectStyle && child.attr(unSelectStyle);
-      });
+        selectedShape.attr(selectStyle);
 
-      this.lastShape = selectedShape;
-      this.canvas.draw();
-    } else {
-      this.lastShape = null;
+        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);
+        this.canvas.draw();
+      }
+    } else { // 没有选中图形，恢复原态
       this._reset();
+      this.selectedShape = null;
     }
   }
 
   end(ev) {
-    const selectedShape = this.lastShape;
+    const selectedShape = this.selectedShape;
     if (selectedShape && !selectedShape.get('destroyed')) {
       ev.data = selectedShape.get('origin')._origin; // 绘制数据，包含原始数据啊
       ev.shapeInfo = selectedShape.get('origin');
       ev.shape = selectedShape;
+      ev.selected = !!selectedShape.get('_selected'); // 返回选中的状态
     }
   }
 

diff --git a/src/interaction/pie-select.js b/src/interaction/pie-select.js
@@ -11,7 +11,8 @@ class PieSelect extends Interaction {
       appendRadius: 8, // 光环的大小
       style: {
         fillOpacity: 0.5
-      }
+      },
+      cancelable: true // 选中之后是否允许取消选中，默认允许取消选中
     });
   }
 
@@ -26,7 +27,11 @@ class PieSelect extends Interaction {
     this.halo && this.halo.remove(true);
 
     const records = chart.getSnapRecords({ x, y });
-    if (!records.length) return;
+    if (!records.length) {
+      this.selected = false;
+      this.selectedShape = null;
+      return;
+    }
 
     let selectedShape;
     const data = records[0]._origin;
@@ -37,15 +42,23 @@ class PieSelect extends Interaction {
     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)) {
+        if (Object.is(shapeData, data)) { // 判断是否相同
           selectedShape = child;
           return false;
         }
       }
     });
     const lastShape = this.lastShape;
-
-    if (selectedShape && selectedShape !== lastShape) { // 没有被选中
+    this.selectedShape = selectedShape;
+    this.selected = true;
+    if (selectedShape === lastShape) { // 上去被选中的
+      if (!this.cancelable) { // 不允许取消选中
+        return;
+      }
+      this.halo && this.halo.remove(true);
+      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');
@@ -75,18 +88,19 @@ class PieSelect extends Interaction {
             r: r + offset + appendRadius
           }
         }, animate));
-      } else {
-        this.canvas.draw();
       }
     }
+
+    this.canvas.draw();
   }
 
   end(ev) {
-    const selectedShape = this.lastShape;
+    const selectedShape = this.selectedShape;
     if (selectedShape && !selectedShape.get('destroyed')) {
       ev.data = selectedShape.get('origin')._origin; // 绘制数据，包含原始数据啊
       ev.shapeInfo = selectedShape.get('origin');
       ev.shape = selectedShape;
+      ev.selected = !!this.selected;
     }
   }
 }