fix: improve style configuration extensibility (#163)

The type of the `endArrow`, `startArrow` and `shape` properties in
`CellStateStyle` were too strict. They prevented to
use custom registered shapes in the style configuration without using a
cast.

Markers of the arrow and custom shapes can be registered by using
methods in `MarkerShape` and `CellRenderer` respectively.
The key to identify the shapes is a string so the types of the
properties in `CellStateStyle` now allow `string` as well.
These offer both the type guidance for standard maxGraph registered
shapes (via a dedicated type) and the extensibility
for custom shapes.

packages/core/__tests__/view/style/StyleSheet.test.ts

@@ -111,13 +111,15 @@ describe('getCellStyle', () => {
       arcSize: 6,
       fillColor: 'black',
       fillOpacity: 75,
+      shape: 'custom-shape',
     });
     stylesheet.putCellStyle('style3', { fillColor: 'chartreuse' });
 
     const cellStyle = stylesheet.getCellStyle(
       {
         baseStyleNames: ['style-1', 'unknown', 'style2', 'style3'],
-        shape: 'cloud',
+        endArrow: 'custom-arrow-end',
+        startArrow: 'custom-arrow-start',
         strokeColor: 'yellow',
       },
       { strokeColor: 'green', dashed: true }
@@ -125,9 +127,11 @@ describe('getCellStyle', () => {
     expect(cellStyle).toStrictEqual(<CellStateStyle>{
       arcSize: 6, // from style2
       dashed: true, // from default
+      endArrow: 'custom-arrow-end', // from default
       fillColor: 'chartreuse', // from style3 (latest in baseStyleNames)
       fillOpacity: 75, // from style2 (latest in  baseStyleNames having this property)
-      shape: 'cloud', // from style (override default and style-1)
+      shape: 'custom-shape', // from style2 (override default and style-1)
+      startArrow: 'custom-arrow-start', // from default
       strokeColor: 'yellow',
     });
   });

packages/core/src/types.ts

@@ -171,9 +171,13 @@ export type CellStateStyle = {
   elbow?: string;
   /**
    * This defines the style of the end arrow marker.
+   *
+   * Possible values are all names of registered arrow markers with {@link MarkerShape.addMarker}.
+   * This generally includes {@link ArrowType} values and the names of any new shapes.
+   *
    * See {@link startArrow}.
    */
-  endArrow?: ArrowType;
+  endArrow?: ArrowType | string;
   /**
    * Use `false` to not fill or `true` to fill the end arrow marker.
    * See {@link startFill}.
@@ -598,7 +602,7 @@ export type CellStateStyle = {
    * The possible values are all names of the shapes registered with {@link CellRenderer.registerShape}.
    * This usually includes {@link ShapeValue} values and the names of all new shapes.
    */
-  shape?: ShapeValue;
+  shape?: ShapeValue | string;
   /**
    * The size of the source jetty in {@link EdgeStyle.OrthConnector}.
    *
@@ -667,9 +671,13 @@ export type CellStateStyle = {
   spacingTop?: number;
   /**
    * This defines the style of the start arrow marker.
+   *
+   * Possible values are all names of registered arrow markers with {@link MarkerShape.addMarker}.
+   * This generally includes {@link ArrowType} values and the names of any new shapes.
+   *
    * See {@link endArrow}.
    */
-  startArrow?: ArrowType;
+  startArrow?: ArrowType | string;
   /**
    * Use `false` to not fill or `true` to fill the start arrow marker.
    * See {@link endFill}.

packages/core/src/view/geometry/Shape.ts

@@ -116,9 +116,9 @@ class Shape {
 
   endSize = 1;
 
-  startArrow: ArrowType = NONE;
+  startArrow: ArrowType | string = NONE;
 
-  endArrow: ArrowType = NONE;
+  endArrow: ArrowType | string = NONE;
 
   direction: DirectionValue = DIRECTION.EAST;
 

packages/core/src/view/geometry/edge/ConnectorShape.ts

@@ -80,8 +80,7 @@ class ConnectorShape extends PolylineShape {
 
     let result = null;
     const n = pts.length;
-    const type: ArrowType | typeof NONE =
+    const type = (source ? this.style.startArrow : this.style.endArrow) || NONE;
-      (source ? this.style.startArrow : this.style.endArrow) || NONE;
 
     let p0 = source ? pts[1] : pts[n - 2];
     const pe = source ? pts[0] : pts[n - 1];

packages/core/src/view/geometry/edge/MarkerShape.ts

@@ -49,7 +49,7 @@ class MarkerShape {
   static createMarker(
     canvas: AbstractCanvas2D,
     shape: Shape,
-    type: ArrowType,
+    type: ArrowType | string,
     pe: Point,
     unitX: number,
     unitY: number,