feat(interaction): add elementSelect, elementSelectByX, elementSelect…

…ByColor (#4219)

__tests__/integration/interactions/alphabet-interval-select-single.ts

@@ -0,0 +1,36 @@
+import { G2Spec, ELEMENT_CLASS_NAME } from '../../../src';
+import { step } from './utils';
+
+export function alphabetIntervalSelectSingle(): G2Spec {
+  return {
+    type: 'interval',
+    padding: 0,
+    transform: [{ type: 'sortX', by: 'y', reverse: true }],
+    data: {
+      type: 'fetch',
+      value: 'data/alphabet.csv',
+    },
+    axis: false,
+    legend: false,
+    encode: {
+      x: 'letter',
+      y: 'frequency',
+      color: 'steelblue',
+    },
+    interaction: [
+      {
+        type: 'elementSelect',
+        selectedFill: 'red',
+        unselectedOpacity: 0.6,
+        single: true,
+      },
+    ],
+  };
+}
+
+alphabetIntervalSelectSingle.steps = ({ canvas }) => {
+  const { document } = canvas;
+  const elements = document.getElementsByClassName(ELEMENT_CLASS_NAME);
+  const [e, e1] = elements;
+  return [step(e, 'click'), step(e1, 'click'), step(e1, 'click')];
+};

__tests__/integration/interactions/alphabet-interval-select.ts

@@ -0,0 +1,42 @@
+import {
+  G2Spec,
+  ELEMENT_CLASS_NAME,
+  MAIN_LAYER_CLASS_NAME,
+} from '../../../src';
+import { step } from './utils';
+
+export function alphabetIntervalSelect(): G2Spec {
+  return {
+    type: 'interval',
+    padding: 0,
+    data: {
+      type: 'fetch',
+      value: 'data/alphabet.csv',
+    },
+    axis: false,
+    legend: false,
+    encode: {
+      x: 'letter',
+      y: 'frequency',
+      color: 'steelblue',
+    },
+    interaction: [
+      { type: 'elementSelect', selectedFill: 'red', unselectedOpacity: 0.6 },
+    ],
+  };
+}
+
+alphabetIntervalSelect.steps = ({ canvas }) => {
+  const { document } = canvas;
+  const elements = document.getElementsByClassName(ELEMENT_CLASS_NAME);
+  const [mainLayer] = document.getElementsByClassName(MAIN_LAYER_CLASS_NAME);
+  const [e, e1] = elements;
+  return [
+    step(e, 'click'),
+    step(e1, 'click'),
+    step(e1, 'click'),
+    step(e, 'click'),
+    step(e, 'click'),
+    step(mainLayer, 'click'), // Reset the canvas.
+  ];
+};

__tests__/integration/interactions/index.ts

@@ -4,3 +4,8 @@ export { alphabetIntervalActiveInactive } from './alphabet-interval-active-inact
 export { stateAgesIntervalActiveByColorLinked } from './stateages-interval-active-by-color-linked';
 export { stateAgesIntervalActiveByColor } from './stateages-interval-active-by-color';
 export { stateAgesIntervalActiveByX } from './stateages-interval-active-by-x';
+export { alphabetIntervalSelect } from './alphabet-interval-select';
+export { alphabetIntervalSelectSingle } from './alphabet-interval-select-single';
+export { stateAgesIntervalSelectByColor } from './stateages-interval-select-by-color';
+export { stateAgesIntervalSelectByColorSingle } from './stateages-interval-select-by-color-single';
+export { stateAgesIntervalSelectByX } from './stateages-interval-select-by-x';

__tests__/integration/interactions/stateages-interval-select-by-color-single.ts

@@ -0,0 +1,60 @@
+import {
+  G2Spec,
+  ELEMENT_CLASS_NAME,
+  MAIN_LAYER_CLASS_NAME,
+} from '../../../src';
+import { step } from './utils';
+
+export function stateAgesIntervalSelectByColorSingle(): G2Spec {
+  return {
+    type: 'interval',
+    padding: 0,
+    axis: false,
+    legend: false,
+    width: 800,
+    transform: [
+      { type: 'stackY' },
+      { type: 'sortX', by: 'y', reverse: true, slice: 5 },
+    ],
+    data: {
+      type: 'fetch',
+      value: 'data/stateages.csv',
+      format: 'csv',
+    },
+    encode: {
+      x: 'state',
+      y: 'population',
+      color: 'age',
+    },
+    scale: {
+      x: { paddingInner: 0.2 },
+    },
+    interaction: [
+      {
+        type: 'elementSelectByColor',
+        link: true,
+        linkFill: (d) => (d.state === 'CA' ? 'red' : undefined),
+        selectedStroke: '#000',
+        selectedStrokeWidth: 1,
+        unselectedOpacity: 0.6,
+        linkFillOpacity: 0.5,
+        single: true,
+      },
+    ],
+  };
+}
+
+stateAgesIntervalSelectByColorSingle.steps = ({ canvas }) => {
+  const { document } = canvas;
+  const elements = document.getElementsByClassName(ELEMENT_CLASS_NAME);
+  const [mainLayer] = document.getElementsByClassName(MAIN_LAYER_CLASS_NAME);
+  const [e1] = elements;
+  const e2 = elements[elements.length - 1];
+  return [
+    step(e1, 'click'),
+    step(e1, 'click'),
+    step(e1, 'click'),
+    step(e2, 'click'),
+    step(mainLayer, 'click'),
+  ];
+};

__tests__/integration/interactions/stateages-interval-select-by-color.ts

@@ -0,0 +1,53 @@
+import { G2Spec, ELEMENT_CLASS_NAME } from '../../../src';
+import { step } from './utils';
+
+export function stateAgesIntervalSelectByColor(): G2Spec {
+  return {
+    type: 'interval',
+    padding: 0,
+    axis: false,
+    legend: false,
+    width: 800,
+    transform: [
+      { type: 'stackY' },
+      { type: 'sortX', by: 'y', reverse: true, slice: 5 },
+    ],
+    data: {
+      type: 'fetch',
+      value: 'data/stateages.csv',
+      format: 'csv',
+    },
+    encode: {
+      x: 'state',
+      y: 'population',
+      color: 'age',
+    },
+    scale: {
+      x: { paddingInner: 0.2 },
+    },
+    interaction: [
+      {
+        type: 'elementSelectByColor',
+        link: true,
+        linkFill: (d) => (d.state === 'CA' ? 'red' : undefined),
+        selectedStroke: '#000',
+        selectedStrokeWidth: 1,
+        unselectedOpacity: 0.6,
+        linkFillOpacity: 0.5,
+      },
+    ],
+  };
+}
+
+stateAgesIntervalSelectByColor.steps = ({ canvas }) => {
+  const { document } = canvas;
+  const elements = document.getElementsByClassName(ELEMENT_CLASS_NAME);
+  const [e1] = elements;
+  const e2 = elements[elements.length - 1];
+  return [
+    step(e1, 'click'),
+    step(e2, 'click'),
+    step(e1, 'click'),
+    step(e2, 'click'),
+  ];
+};

__tests__/integration/interactions/stateages-interval-select-by-x.ts

@@ -0,0 +1,38 @@
+import { G2Spec, ELEMENT_CLASS_NAME } from '../../../src';
+import { step } from './utils';
+
+export function stateAgesIntervalSelectByX(): G2Spec {
+  return {
+    type: 'interval',
+    padding: 0,
+    transform: [
+      { type: 'sortX', by: 'y', reverse: true, reducer: 'sum', slice: 6 },
+      { type: 'dodgeX' },
+    ],
+    data: {
+      type: 'fetch',
+      value: 'data/stateages.csv',
+    },
+    axis: false,
+    legend: false,
+    encode: {
+      x: 'state',
+      y: 'population',
+      color: 'age',
+    },
+    interaction: [
+      {
+        type: 'elementSelectByX',
+        selectedFill: 'red',
+        unselectedOpacity: 0.6,
+      },
+    ],
+  };
+}
+
+stateAgesIntervalSelectByX.steps = ({ canvas }) => {
+  const { document } = canvas;
+  const elements = document.getElementsByClassName(ELEMENT_CLASS_NAME);
+  const [e1] = elements;
+  return [step(e1, 'click')];
+};

__tests__/unit/stdlib/index.spec.ts

@@ -143,6 +143,9 @@ import {
   ElementActive,
   ElementActiveByColor,
   ElementActiveByX,
+  ElementSelect,
+  ElementSelectByColor,
+  ElementSelectByX,
   // ElementSelected,
   // Tooltip,
   // Fisheye as FisheyeInteraction,
@@ -418,6 +421,9 @@ describe('stdlib', () => {
       'interaction.elementActive': ElementActive,
       'interaction.elementActiveByX': ElementActiveByX,
       'interaction.elementActiveByColor': ElementActiveByColor,
+      'interaction.elementSelect': ElementSelect,
+      'interaction.elementSelectByX': ElementSelectByX,
+      'interaction.elementSelectByColor': ElementSelectByColor,
       // 'interaction.elementSelected': ElementSelected,
       // 'interaction.elementHighlight': ElementHighlight,
       // 'interaction.elementHighlightByX': ElementHighlightByX,

src/interaction/index.ts

@@ -1,9 +1,12 @@
 // export { createInteraction } from './create';
 // export { createInteractionLibrary } from './stdlib';
-
 export { ElementActive } from './native/elementActive';
 export { ElementActiveByX } from './native/elementActiveByX';
 export { ElementActiveByColor } from './native/elementActiveByColor';
+export { ElementSelect } from './native/elementSelect';
+export { ElementSelectByX } from './native/elementSelectByX';
+export { ElementSelectByColor } from './native/elementSelectByColor';
+
 // export { ElementSelected } from './builtin/elementSelected';
 // export { Tooltip } from './builtin/tooltip';
 // export { Fisheye } from './builtin/fisheye';

src/interaction/native/elementActive.ts

@@ -10,8 +10,6 @@ import {
   applyDefaultsActiveStyle,
 } from './utils';
 
-export const LINK_CLASS_NAME = 'element-link';
-
 /**
  * Active a group of elements.
  */

src/interaction/native/elementActiveByColor.ts

@@ -2,6 +2,7 @@ import {
   applyDefaultsActiveStyle,
   createDatumof,
   selectG2Elements,
+  createColorKey,
 } from './utils';
 import { elementActive } from './elementActive';
 
@@ -16,7 +17,7 @@ export function ElementActiveByColor(options) {
       ...applyDefaultsActiveStyle(options),
       elements: selectG2Elements,
       datum: createDatumof(view),
-      groupKey: (element) => element.__data__.color,
+      groupKey: createColorKey(view),
     });
   };
 }

src/interaction/native/elementActiveByX.ts

@@ -2,6 +2,7 @@ import {
   applyDefaultsActiveStyle,
   createDatumof,
   selectG2Elements,
+  createXKey,
 } from './utils';
 import { elementActive } from './elementActive';
 
@@ -14,15 +15,11 @@ export function ElementActiveByX(
 ) {
   return (context) => {
     const { container, view } = context;
-    const { x: scaleX } = context.view.scale;
     return elementActive(container, {
       ...applyDefaultsActiveStyle(options),
       elements: selectG2Elements,
       datum: createDatumof(view),
-      groupKey: (element) => {
-        const { x } = element.__data__;
-        return scaleX.invert(x);
-      },
+      groupKey: createXKey(view),
     });
   };
 }