diff --git a/projects/_shared/src/custom-shapes.ts b/projects/_shared/src/custom-shapes.ts index c353041..de34d5e 100644 --- a/projects/_shared/src/custom-shapes.ts +++ b/projects/_shared/src/custom-shapes.ts @@ -1,4 +1,12 @@ -import {AbstractCanvas2D, ColorValue, EllipseShape, Rectangle, ShapeRegistry, RectangleShape} from '@maxgraph/core'; +import {AbstractCanvas2D, EllipseShape, ShapeRegistry, RectangleShape} from '@maxgraph/core'; + +// The renderer builds a registered shape with no argument, so these defaults cannot come from a constructor. They are +// also derived from the style, so `resetStyles()` wipes them on every style change. Each one is therefore declared +// twice, as a class field for the first render and in a `resetStyles()` override for every later change, which is why +// it is a named constant rather than a literal. +const RECTANGLE_STROKE_WIDTH = 3; +const RECTANGLE_IS_ROUNDED = true; // force rounded shape +const ELLIPSE_STROKE_WIDTH = 5; export const registerCustomShapes = (): void => { console.info('Registering custom shapes...'); @@ -8,9 +16,13 @@ export const registerCustomShapes = (): void => { }; class CustomRectangleShape extends RectangleShape { - constructor(bounds: Rectangle, fill: ColorValue, stroke: ColorValue) { - super(bounds, fill, stroke, 3); - this.isRounded = true; // force rounded shape + override strokeWidth = RECTANGLE_STROKE_WIDTH; + override isRounded = RECTANGLE_IS_ROUNDED; + + override resetStyles(): void { + super.resetStyles(); + this.strokeWidth = RECTANGLE_STROKE_WIDTH; + this.isRounded = RECTANGLE_IS_ROUNDED; } override paintBackground( @@ -37,8 +49,11 @@ class CustomRectangleShape extends RectangleShape { } class CustomEllipseShape extends EllipseShape { - constructor(bounds: Rectangle, fill: string, stroke: string) { - super(bounds, fill, stroke, 5); + override strokeWidth = ELLIPSE_STROKE_WIDTH; + + override resetStyles(): void { + super.resetStyles(); + this.strokeWidth = ELLIPSE_STROKE_WIDTH; } override paintVertexShape(