feat(matrix): add new option triggerEvent to support triggering event on matrix cells

src/component/matrix/MatrixView.ts

@@ -31,6 +31,7 @@ import { LineShape } from 'zrender/src/graphic/shape/Line';
 import { subPixelOptimize } from 'zrender/src/graphic/helper/subPixelOptimize';
 import { Group, Text, Rect, Line, XY, setTooltipConfig, expandOrShrinkRect } from '../../util/graphic';
 import { clearTmpModel, ListIterator } from '../../util/model';
+import { getECData } from '../../util/innerStore';
 import { clone, retrieve2, isFunction, isString } from 'zrender/src/core/util';
 import { formatTplSimple } from '../../util/format';
 import { invert } from 'zrender/src/core/matrix';
@@ -175,7 +176,8 @@ function renderDimensionCells(group: Group, matrixModel: MatrixModel, ecModel: G
                 shape,
                 dimCell.option.value,
                 Z2_DIMENSION_CELL_DEFAULT,
-                tooltipOption
+                tooltipOption,
+                dimIdx === 0 ? 'x' : 'y'
             );
         }
     }
@@ -246,13 +248,16 @@ function createBodyAndCorner(
                     shape,
                     bodyCornerCellOption ? bodyCornerCellOption.value : null,
                     Z2_BODY_CORNER_CELL_DEFAULT,
-                    tooltipOption
+                    tooltipOption,
+                    bodyCornerOptionRoot
                 );
             }
         }
     } // End of createBodyOrCornerCells
 }
 
+type MatrixTargetType = 'x' | 'y' | 'body' | 'corner';
+
 function createMatrixCell(
     xyLocator: MatrixXYLocator[],
     matrixModel: MatrixModel,
@@ -266,6 +271,7 @@ function createMatrixCell(
     textValue: unknown,
     zrCellDefault: Z2CellDefault,
     tooltipOption: MatrixOption['tooltip'],
+    targetType: MatrixTargetType
 ): void {
     // Do not use getModel for handy performance optimization.
     _tmpCellItemStyleModel.option = cellOption ? cellOption.itemStyle : null;
@@ -361,12 +367,12 @@ function createMatrixCell(
     }
 
     // Set silent
+    const triggerEvent = matrixModel.get('triggerEvent', true);
     if (cellText) {
         let labelSilent = _tmpCellLabelModel.get('silent');
-        // auto, tooltip of text cells need silient: false, but non-text cells
-        // do not need a special cursor in most cases.
+        // By default, silent: false is needed for triggerEvent or tooltip interaction.
         if (labelSilent == null) {
-            labelSilent = !tooltipOptionShow;
+            labelSilent = !(triggerEvent || tooltipOptionShow);
         }
         cellText.silent = labelSilent;
         cellText.ignoreHostSilent = true;
@@ -376,11 +382,28 @@ function createMatrixCell(
         rectSilent = (
             // If no background color in cell, set `rect.silent: false` will cause that only
             // the border response to mouse hovering, which is probably weird.
+            // So we deliberately make rect non-interactive if `silent` is not explicitly specified,
+            // even if `triggerEvent` is set as `true`.
             !cellRect.style || cellRect.style.fill === 'none' || !cellRect.style.fill
         );
     }
     cellRect.silent = rectSilent;
 
+    // Both `cellRect` (typically non-transparent) and `cellText` may trigger events, depending on both
+    // `matrix.triggerEvent`, `matrix.xxx.silent` and `matrix.xxx.label.silent` settings.
+    if (triggerEvent && cellRect) {
+        const eventData = {
+            componentType: 'matrix' as const,
+            componentIndex: matrixModel.componentIndex,
+            matrixIndex: matrixModel.componentIndex,
+            targetType: targetType,
+            name: (cellText && cellText.style) ? cellText.style.text : undefined,
+            value: textValue,
+            coord: xyLocator.slice()
+        };
+        getECData(cellRect).eventData = eventData;
+    }
+
     clearTmpModel(_tmpCellModel);
     clearTmpModel(_tmpCellItemStyleModel);
     clearTmpModel(_tmpCellLabelModel);

src/coord/matrix/MatrixModel.ts

@@ -44,6 +44,7 @@ export interface MatrixOption extends ComponentOption, BoxLayoutOptionMixin {
     // Used on the outer border and the divider line.
     borderZ2?: number;
     tooltip?: CommonTooltipOption<MatrixTooltipFormatterParams>;
+    triggerEvent?: boolean;
 
     // PENDING: do we need to support other states, i.e., `emphasis`, `blur`, `select`?
 }
@@ -292,6 +293,7 @@ const defaultMatrixOption: MatrixOption = {
         borderColor: tokens.color.axisLine,
         borderWidth: 1,
     },
+    triggerEvent: false,
 };