[FEAT] Add new API to add an handler on the grid (#15)

Author: csouchet

README.md

@@ -61,9 +61,6 @@ If it's necessary (because the exercise is too long), no need to implement all t
   <p align="center">
     <img title="Token" src="images/token.png">
   </p>
-
-- Add a new api method that adds a handler on click on square. \
-  It should be called with: `<library object>.addHandler(squareLabel, (event) => {....});`
 
 - Add one or several new api methods that let know if a line or a column is completed. The number of the squares that are
 in the row or in the column should be returned for a latter use. \

library/ts-rollup/README.md

@@ -31,6 +31,16 @@ The result should be something like this:
     <img title="Grid" src="../../images/background-color.png">
   </p>
 
+### Register a handler on the grid
+```javascript
+    bingo.registerHandler(cell => {
+        alert(`You click on square ${cell.value}`);
+    });
+```
+
+This API could be useful for the implementation of the demonstrators. \
+The current handler parameter may not be enough or the wrong one. You are free to adapt it.
+
 ## Technical part
 
 The project is configured with Jest for the tests, Playwright & Jest-image-snapshot for the visual tests, ESLint for the code formatting.

library/ts-rollup/dev/index.ts

@@ -24,3 +24,8 @@ updateBackground.onchange = () => {
   bingo.updateBackgroundColor(updateBackground.value, 'Pink');
   updateBackground.value = ''; // reset
 };
+
+// register handler on grid
+bingo.registerHandler(cell => {
+  alert(`You click on square ${cell.value}`);
+});

library/ts-rollup/src/index.ts

@@ -1,5 +1,6 @@
 import { BingoGraph } from './graph';
 import { mxgraph } from './initializer';
+import { mxCell } from 'mxgraph';
 
 const titleHeight = 70;
 
@@ -87,6 +88,20 @@ export class Bingo {
     const newStyle = `${style};${mxgraph.mxConstants.STYLE_FILLCOLOR}=${fillColor}`;
     this.graph.getModel().setStyle(cell, newStyle);
   }
+
+  registerHandler(handler: (cell: mxCell) => void): void {
+    this.graph.addListener(mxgraph.mxEvent.CLICK, (sender, event) => {
+      const cell = event.getProperty('cell'); // cell may be null
+      if (cell == null) {
+        return;
+      }
+
+      if (handler) {
+        handler(cell);
+        event.consume();
+      }
+    });
+  }
 }
 
 // naive implementation, doesn't prevent duplicates in grid