feat: use new features of maxGraph 0.18.0 (#215)

The overall size of the all examples decreases:
- use `BaseGraph` to control the default styles that are registered
- use `EdgeMarker` instead of the duplicated implementation in the example

In addition:
- use the `CellEditorHandler` plugin that was missing in the list of declared plugins.
- remove ts-ignore that are no longer generated when calling the maxGraph API

Author: tbouffard

projects/_shared/src/custom-shapes.ts

@@ -3,10 +3,7 @@ import {CellRenderer, EllipseShape, RectangleShape} from '@maxgraph/core';
 
 export const registerCustomShapes = (): void => {
   console.info('Registering custom shapes...');
-  // TODO remove ts-ignore when maxGraph 0.18.0 is released
-  // @ts-ignore
   CellRenderer.registerShape('customRectangle', CustomRectangleShape);
-  // @ts-ignore
   CellRenderer.registerShape('customEllipse', CustomEllipseShape);
   console.info('Custom shapes registered');
 };

projects/_shared/src/generate-graph.ts

@@ -1,107 +1,40 @@
 import {
-    type AbstractCanvas2D,
+    BaseGraph,
+    CellEditorHandler,
     CellRenderer,
-    constants,
+    EdgeMarker,
     EdgeStyle,
     EllipseShape,
-    Graph,
     InternalEvent,
     MarkerShape,
     PanningHandler,
     Perimeter,
-    type Point,
     RubberBandHandler,
     SelectionCellsHandler,
     SelectionHandler,
-    type Shape,
-    type StyleArrowValue,
     StyleRegistry,
 } from '@maxgraph/core';
 import {registerCustomShapes} from "./custom-shapes";
 
 
-// TODO remove this function when maxGraph 0.18.0 is released and import it from maxGraph instead using EdgeMarker.createArrow
-// It is currently duplicated from maxGraph as it is not exported in version 0.17.0
-const createArrow =
-    (widthFactor: number) =>
-        (
-            canvas: AbstractCanvas2D,
-            _shape: Shape,
-            type: StyleArrowValue,
-            pe: Point,
-            unitX: number,
-            unitY: number,
-            size: number,
-            _source: boolean,
-            sw: number,
-            filled: boolean
-        ) => {
-            // The angle of the forward facing arrow sides against the x axis is
-            // 26.565 degrees, 1/sin(26.565) = 2.236 / 2 = 1.118 ( / 2 allows for
-            // only half the strokewidth is processed ).
-            const endOffsetX = unitX * sw * 1.118;
-            const endOffsetY = unitY * sw * 1.118;
-
-            unitX *= size + sw;
-            unitY *= size + sw;
-
-            const pt = pe.clone();
-            pt.x -= endOffsetX;
-            pt.y -= endOffsetY;
-
-            const f = type !== constants.ARROW.CLASSIC && type !== constants.ARROW.CLASSIC_THIN ? 1 : 3 / 4;
-            pe.x += -unitX * f - endOffsetX;
-            pe.y += -unitY * f - endOffsetY;
-
-            return () => {
-                canvas.begin();
-                canvas.moveTo(pt.x, pt.y);
-                canvas.lineTo(
-                    pt.x - unitX - unitY / widthFactor,
-                    pt.y - unitY + unitX / widthFactor
-                );
-
-                if (type === constants.ARROW.CLASSIC || type === constants.ARROW.CLASSIC_THIN) {
-                    canvas.lineTo(pt.x - (unitX * 3) / 4, pt.y - (unitY * 3) / 4);
-                }
-
-                canvas.lineTo(
-                    pt.x + unitY / widthFactor - unitX,
-                    pt.y - unitY - unitX / widthFactor
-                );
-                canvas.close();
-
-                if (filled) {
-                    canvas.fillAndStroke();
-                } else {
-                    canvas.stroke();
-                }
-            };
-        };
-
 /**
- * Create a custom implementation to not load all default built-in styles. This is because Graph registers them.
- *
- * In the future, we expect to have an implementation of Graph that does not do it.
- * See https://github.com/maxGraph/maxGraph/issues/760
+ * Custom implementation of {@link BaseGraph} that only register the built-in styles required by the example.
  */
-class CustomGraph extends Graph {
+class CustomGraph extends BaseGraph {
     /**
      * Only registers the elements required for this example. Do not let Graph load all default built-in styles.
      */
     protected override registerDefaults() {
         // Register builtin shapes
         // RectangleShape is not registered here because it is always available. It is the fallback shape for vertices when no shape is returned by the registry
-        // TODO remove ts-ignore when maxGraph 0.18.0 is released
-        // @ts-ignore
         CellRenderer.registerShape('ellipse', EllipseShape);
 
         // Register builtin styles
         StyleRegistry.putValue('ellipsePerimeter', Perimeter.EllipsePerimeter);
         StyleRegistry.putValue('rectanglePerimeter', Perimeter.RectanglePerimeter); // declared in the default vertex style, so must be registered to be used
         StyleRegistry.putValue('orthogonalEdgeStyle', EdgeStyle.OrthConnector);
 
-        const arrowFunction = createArrow(2);
+        const arrowFunction = EdgeMarker.createArrow(2);
         MarkerShape.addMarker('classic', arrowFunction);
         MarkerShape.addMarker('block', arrowFunction);
 
@@ -120,12 +53,16 @@ export const initializeGraph = (container?: HTMLElement) => {
     // Disables the built-in context menu
     InternalEvent.disableContextMenu(container);
 
-    const graph = new CustomGraph(container, undefined, [
-        PanningHandler, // Enables panning with the mouse
-        RubberBandHandler, // Enables rubber band selection
-        SelectionCellsHandler, // Enables management of selected cells
-        SelectionHandler, // Enables selection with the mouse
-    ]);
+    const graph = new CustomGraph({
+        container,
+        plugins: [
+            CellEditorHandler, // Enables in-place editing of cell labels
+            PanningHandler, // Enables panning with the mouse
+            RubberBandHandler, // Enables rubber band selection
+            SelectionCellsHandler, // Enables management of selected cells
+            SelectionHandler, // Enables selection with the mouse
+        ],
+    });
     graph.setPanning(true); // Use mouse right button for panning
 
     // Customize the rubber band selection