Skip to content

fix: keep the custom shape defaults across style changes #312

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tbouffard merged 2 commits into from
Oct 1, 2026
Merged

fix: keep the custom shape defaults across style changes #312

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
79cfda2
fix: keep the custom shape defaults across style changes
redfish4ktc Sep 29, 2026
66ae666
refactor: name the duplicated defaults of the custom shapes
redfish4ktc Sep 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 21 additions & 6 deletions projects/_shared/src/custom-shapes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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...');
Expand All @@ -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(
Expand All @@ -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(
Expand Down
Loading