diff --git a/packages/core/src/view/shape/Shape.ts b/packages/core/src/view/shape/Shape.ts index c9903d63e9..34d1c580c6 100644 --- a/packages/core/src/view/shape/Shape.ts +++ b/packages/core/src/view/shape/Shape.ts @@ -1016,8 +1016,8 @@ class Shape { } /** - * Updates the for this shape using and - * and stores the result in . + * Updates the {@link boundingBox} for this shape using {@link createBoundingBox} and + * {@link augmentBoundingBox} and stores the result in {@link boundingBox}. */ updateBoundingBox() { // Tries to get bounding box from SVG subsystem diff --git a/packages/core/src/view/shape/node/AbstractPathShape.ts b/packages/core/src/view/shape/node/AbstractPathShape.ts new file mode 100644 index 0000000000..707b2808b6 --- /dev/null +++ b/packages/core/src/view/shape/node/AbstractPathShape.ts @@ -0,0 +1,83 @@ +/* +Copyright 2021-present The maxGraph project Contributors +Copyright (c) 2006-2015, JGraph Ltd +Copyright (c) 2006-2015, Gaudenz Alder + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import type Rectangle from '../../geometry/Rectangle.js'; +import Shape from '../Shape.js'; +import type AbstractCanvas2D from '../../canvas/AbstractCanvas2D.js'; +import type { ColorValue } from '../../../types.js'; +import { NONE } from '../../../util/Constants.js'; + +/** + * Base {@link Shape} for vertex shapes rendered from a single path. + * + * If a custom shape with one filled area is needed, override {@link redrawPath} as in the following example: + * + * ```typescript + * class SampleShape extends AbstractPathShape { + * redrawPath(c: AbstractCanvas2D, x: number, y: number, w: number, h: number) { + * c.moveTo(0, 0); + * c.lineTo(w, h); + * // ... + * c.close(); + * } + * } + * ``` + * + * @category Vertex Shapes + */ +export abstract class AbstractPathShape extends Shape { + constructor( + bounds: Rectangle | null = null, + fill: ColorValue = NONE, + stroke: ColorValue = NONE, + strokeWidth = 1 + ) { + super(); + this.bounds = bounds; + this.fill = fill; + this.stroke = stroke; + this.strokeWidth = strokeWidth; + } + + /** + * Redirects to redrawPath for subclasses to work. + */ + override paintVertexShape( + c: AbstractCanvas2D, + x: number, + y: number, + w: number, + h: number + ) { + c.translate(x, y); + c.begin(); + this.redrawPath(c, x, y, w, h); + c.fillAndStroke(); + } + + /** + * Draws the path for this shape. + */ + abstract redrawPath( + c: AbstractCanvas2D, + x: number, + y: number, + w: number, + h: number + ): void; +} diff --git a/packages/core/src/view/shape/node/ActorShape.ts b/packages/core/src/view/shape/node/ActorShape.ts index 0c00454400..e6922ab9e9 100644 --- a/packages/core/src/view/shape/node/ActorShape.ts +++ b/packages/core/src/view/shape/node/ActorShape.ts @@ -16,67 +16,21 @@ See the License for the specific language governing permissions and limitations under the License. */ -import type Rectangle from '../../geometry/Rectangle.js'; -import Shape from '../Shape.js'; +import { AbstractPathShape } from './AbstractPathShape.js'; import type AbstractCanvas2D from '../../canvas/AbstractCanvas2D.js'; -import { ColorValue } from '../../../types.js'; -import { NONE } from '../../../util/Constants.js'; /** - * Extends {@link Shape} to implement an actor shape. + * Path-based actor vertex shape built on {@link AbstractPathShape}. * * This shape is registered under `actor` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}. * - * If a custom shape with one filled area is needed, then this shape's {@link redrawPath} method should be overridden - * like in the following example: - * - * ```typescript - * class SampleShape extends ActorShape { - * redrawPath(c: AbstractCanvas2D, x: number, y: number, w: number, h: number) { - * path.moveTo(0, 0); - * path.lineTo(w, h); - * // ... - * path.close(); - * } - * } - * ``` - * * @category Vertex Shapes */ -class ActorShape extends Shape { - constructor( - bounds: Rectangle | null = null, - fill: ColorValue = NONE, - stroke: ColorValue = NONE, - strokeWidth = 1 - ) { - super(); - this.bounds = bounds; - this.fill = fill; - this.stroke = stroke; - this.strokeWidth = strokeWidth; - } - - /** - * Redirects to redrawPath for subclasses to work. - */ - override paintVertexShape( - c: AbstractCanvas2D, - x: number, - y: number, - w: number, - h: number - ) { - c.translate(x, y); - c.begin(); - this.redrawPath(c, x, y, w, h); - c.fillAndStroke(); - } - +class ActorShape extends AbstractPathShape { /** * Draws the path for this shape. */ - redrawPath(c: AbstractCanvas2D, x: number, y: number, w: number, h: number) { + override redrawPath(c: AbstractCanvas2D, x: number, y: number, w: number, h: number) { const width = w / 3; c.moveTo(0, h); c.curveTo(0, (3 * h) / 5, 0, (2 * h) / 5, w / 2, (2 * h) / 5); diff --git a/packages/core/src/view/shape/node/CloudShape.ts b/packages/core/src/view/shape/node/CloudShape.ts index d57bdf2fc2..e89b182df3 100644 --- a/packages/core/src/view/shape/node/CloudShape.ts +++ b/packages/core/src/view/shape/node/CloudShape.ts @@ -16,26 +16,17 @@ See the License for the specific language governing permissions and limitations under the License. */ -import ActorShape from './ActorShape.js'; -import AbstractCanvas2D from '../../canvas/AbstractCanvas2D.js'; -import Rectangle from '../../geometry/Rectangle.js'; +import { AbstractPathShape } from './AbstractPathShape.js'; +import type AbstractCanvas2D from '../../canvas/AbstractCanvas2D.js'; /** - * Extends {@link ActorShape} to implement a cloud shape. + * Path-based cloud vertex shape built on {@link AbstractPathShape}. * * This shape is registered under `cloud` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}. * * @category Vertex Shapes */ -class CloudShape extends ActorShape { - constructor(bounds: Rectangle, fill: string, stroke: string, strokeWidth = 1) { - super(); - this.bounds = bounds; - this.fill = fill; - this.stroke = stroke; - this.strokeWidth = strokeWidth; - } - +class CloudShape extends AbstractPathShape { /** * Draws the path for this shape. */ diff --git a/packages/core/src/view/shape/node/HexagonShape.ts b/packages/core/src/view/shape/node/HexagonShape.ts index ca7723392e..2a8f8f236c 100644 --- a/packages/core/src/view/shape/node/HexagonShape.ts +++ b/packages/core/src/view/shape/node/HexagonShape.ts @@ -16,9 +16,9 @@ See the License for the specific language governing permissions and limitations under the License. */ -import ActorShape from './ActorShape.js'; +import { AbstractPathShape } from './AbstractPathShape.js'; import Point from '../../geometry/Point.js'; -import AbstractCanvas2D from '../../canvas/AbstractCanvas2D.js'; +import type AbstractCanvas2D from '../../canvas/AbstractCanvas2D.js'; /** * Implementation of the hexagon shape. @@ -27,11 +27,7 @@ import AbstractCanvas2D from '../../canvas/AbstractCanvas2D.js'; * * @category Vertex Shapes */ -class HexagonShape extends ActorShape { - constructor() { - super(); - } - +class HexagonShape extends AbstractPathShape { /** * Draws the path for this shape. */ diff --git a/packages/core/src/view/shape/node/TriangleShape.ts b/packages/core/src/view/shape/node/TriangleShape.ts index 87df6c938e..e5c5c772e8 100644 --- a/packages/core/src/view/shape/node/TriangleShape.ts +++ b/packages/core/src/view/shape/node/TriangleShape.ts @@ -17,8 +17,8 @@ limitations under the License. */ import Point from '../../geometry/Point.js'; -import ActorShape from './ActorShape.js'; -import AbstractCanvas2D from '../../canvas/AbstractCanvas2D.js'; +import { AbstractPathShape } from './AbstractPathShape.js'; +import type AbstractCanvas2D from '../../canvas/AbstractCanvas2D.js'; /** * Implementation of the triangle shape. @@ -27,11 +27,7 @@ import AbstractCanvas2D from '../../canvas/AbstractCanvas2D.js'; * * @category Vertex Shapes */ -class TriangleShape extends ActorShape { - constructor() { - super(); - } - +class TriangleShape extends AbstractPathShape { /** * Adds roundable support. * @returns {boolean}