diff --git a/CHANGELOG.md b/CHANGELOG.md index 104df2156e..ce74720c87 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,9 @@ For more details on the contents of a release, see [the GitHub release page] (ht _**Note:** Yet to be released breaking changes appear here._ +**Breaking Changes**: +- the `SHAPE` enum has been removed. Use values of the `ShapeValue` type instead. + ## 0.19.0 Release date: `2025-04-30` diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index 887c590086..eaa0191e90 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -958,25 +958,43 @@ export type StylePortConstraint = DirectionValue | DirectionValue[]; /** * Names used to register the shapes provided out-of-the-box by maxGraph with {@link CellRenderer.registerShape}. + * They can be used as a value for {@link CellStateStyle.shape}. + * * @category Style */ export type ShapeValue = - | 'rectangle' - | 'ellipse' - | 'doubleEllipse' - | 'rhombus' - | 'line' - | 'image' + /** Name under which {@link ActorShape} is registered by default. */ + | 'actor' + /** Name under which {@link ArrowShape} is registered by default. */ | 'arrow' + /** Name under which {@link ArrowConnectorShape} is registered by default. */ | 'arrowConnector' - | 'label' + /** Name under which {@link CloudShape} is registered by default. */ + | 'cloud' + /** Name under which {@link ConnectorShape} is registered by default. */ + | 'connector' + /** Name under which {@link CylinderShape} is registered by default. */ | 'cylinder' + /** Name under which {@link DoubleEllipseShape} is registered by default. */ + | 'doubleEllipse' + /** Name under which {@link EllipseShape} is registered by default. */ + | 'ellipse' + /** Name under which {@link HexagonShape} is registered by default. */ + | 'hexagon' + /** Name under which {@link ImageShape} is registered by default. */ + | 'image' + /** Name under which {@link LabelShape} is registered by default. */ + | 'label' + /** Name under which {@link LineShape} is registered by default. */ + | 'line' + /** Name under which {@link RectangleShape} is registered by default. */ + | 'rectangle' + /** Name under which {@link RhombusShape} is registered by default. */ + | 'rhombus' + /** Name under which {@link SwimlaneShape} is registered by default. */ | 'swimlane' - | 'connector' - | 'actor' - | 'cloud' - | 'triangle' - | 'hexagon'; + /** Name under which {@link TriangleShape} is registered by default. */ + | 'triangle'; /** * {@link ShapeValue} with support for extensions. diff --git a/packages/core/src/util/Constants.ts b/packages/core/src/util/Constants.ts index a75e3540e2..f6c9eefe2c 100644 --- a/packages/core/src/util/Constants.ts +++ b/packages/core/src/util/Constants.ts @@ -545,89 +545,3 @@ export enum PERIMETER { HEXAGON = 'hexagonPerimeter', TRIANGLE = 'trianglePerimeter', } - -/** - * Names used to register the shapes provided out-of-the-box by maxGraph with {@link CellRenderer.registerShape}. - * Can be used as a value for {@link CellStateStyle.shape}. - */ -export enum SHAPE { - /** - * Name under which {@link RectangleShape} is registered. - */ - RECTANGLE = 'rectangle', - - /** - * Name under which {@link Ellipse} is registered. - */ - ELLIPSE = 'ellipse', - - /** - * Name under which {@link DoubleEllipse} is registered. - */ - DOUBLE_ELLIPSE = 'doubleEllipse', - - /** - * Name under which {@link Rhombus} is registered. - */ - RHOMBUS = 'rhombus', - - /** - * Name under which {@link LineShape} is registered. - */ - LINE = 'line', - - /** - * Name under which {@link ImageShape} is registered. - */ - IMAGE = 'image', - - /** - * Name under which {@link ArrowShape} is registered. - */ - ARROW = 'arrow', - - /** - * Name under which {@link ArrowConnectorShape} is registered. - */ - ARROW_CONNECTOR = 'arrowConnector', - - /** - * Name under which {@link Label} is registered. - */ - LABEL = 'label', - - /** - * Name under which {@link Cylinder} is registered. - */ - CYLINDER = 'cylinder', - - /** - * Name under which {@link Swimlane} is registered. - */ - SWIMLANE = 'swimlane', - - /** - * Name under which {@link ConnectorShape} is registered. - */ - CONNECTOR = 'connector', - - /** - * Name under which {@link Actor} is registered. - */ - ACTOR = 'actor', - - /** - * Name under which {@link Cloud} is registered. - */ - CLOUD = 'cloud', - - /** - * Name under which {@link Triangle} is registered. - */ - TRIANGLE = 'triangle', - - /** - * Name under which {@link Hexagon} is registered. - */ - HEXAGON = 'hexagon', -} diff --git a/packages/core/src/view/cell/register-shapes.ts b/packages/core/src/view/cell/register-shapes.ts index 5b503bb702..33fd3f0961 100644 --- a/packages/core/src/view/cell/register-shapes.ts +++ b/packages/core/src/view/cell/register-shapes.ts @@ -32,7 +32,6 @@ import DoubleEllipseShape from '../geometry/node/DoubleEllipseShape'; import SwimlaneShape from '../geometry/node/SwimlaneShape'; import ImageShape from '../geometry/node/ImageShape'; import LabelShape from '../geometry/node/LabelShape'; -import { SHAPE } from '../../util/Constants'; let isDefaultElementsRegistered = false; @@ -46,22 +45,22 @@ let isDefaultElementsRegistered = false; export function registerDefaultShapes() { if (!isDefaultElementsRegistered) { const shapesToRegister: [ShapeValue, ShapeConstructor][] = [ - [SHAPE.ACTOR, ActorShape], - [SHAPE.ARROW, ArrowShape], - [SHAPE.ARROW_CONNECTOR, ArrowConnectorShape], - [SHAPE.CLOUD, CloudShape], - [SHAPE.CONNECTOR, ConnectorShape], - [SHAPE.CYLINDER, CylinderShape], - [SHAPE.DOUBLE_ELLIPSE, DoubleEllipseShape], - [SHAPE.ELLIPSE, EllipseShape], - [SHAPE.HEXAGON, HexagonShape], - [SHAPE.IMAGE, ImageShape], - [SHAPE.LABEL, LabelShape], - [SHAPE.LINE, LineShape], - [SHAPE.RECTANGLE, RectangleShape], - [SHAPE.RHOMBUS, RhombusShape], - [SHAPE.SWIMLANE, SwimlaneShape], - [SHAPE.TRIANGLE, TriangleShape], + ['actor', ActorShape], + ['arrow', ArrowShape], + ['arrowConnector', ArrowConnectorShape], + ['cloud', CloudShape], + ['connector', ConnectorShape], + ['cylinder', CylinderShape], + ['doubleEllipse', DoubleEllipseShape], + ['ellipse', EllipseShape], + ['hexagon', HexagonShape], + ['image', ImageShape], + ['label', LabelShape], + ['line', LineShape], + ['rectangle', RectangleShape], + ['rhombus', RhombusShape], + ['swimlane', SwimlaneShape], + ['triangle', TriangleShape], ]; for (const [shapeName, shapeClass] of shapesToRegister) { CellRenderer.registerShape(shapeName, shapeClass); diff --git a/packages/core/src/view/geometry/edge/ArrowConnectorShape.ts b/packages/core/src/view/geometry/edge/ArrowConnectorShape.ts index df6e4ace8e..b8e688aa80 100644 --- a/packages/core/src/view/geometry/edge/ArrowConnectorShape.ts +++ b/packages/core/src/view/geometry/edge/ArrowConnectorShape.ts @@ -30,7 +30,7 @@ import { ColorValue } from '../../../types'; * * The shape is used to represent edges, not vertices. * - * By default, this shape is registered under {@link SHAPE.ARROW_CONNECTOR} in {@link CellRenderer}. + * This shape is registered under `arrowConnector` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}. * * @category Edge Shapes */ diff --git a/packages/core/src/view/geometry/edge/ArrowShape.ts b/packages/core/src/view/geometry/edge/ArrowShape.ts index 8f13ff82d4..e016c49285 100644 --- a/packages/core/src/view/geometry/edge/ArrowShape.ts +++ b/packages/core/src/view/geometry/edge/ArrowShape.ts @@ -24,9 +24,11 @@ import Point from '../Point'; import { ColorValue } from '../../../types'; /** - * Extends {@link Shape} to implement an arrow shape. The shape is used to represent edges, not vertices. + * Extends {@link Shape} to implement an arrow shape. * - * By default, this shape is registered under {@link SHAPE.ARROW} in {@link CellRenderer}. + * The shape is used to represent edges, not vertices. + * + * This shape is registered under `arrow` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}. * * @category Edge Shapes */ diff --git a/packages/core/src/view/geometry/edge/ConnectorShape.ts b/packages/core/src/view/geometry/edge/ConnectorShape.ts index 502b221c9a..d446c22eb2 100644 --- a/packages/core/src/view/geometry/edge/ConnectorShape.ts +++ b/packages/core/src/view/geometry/edge/ConnectorShape.ts @@ -30,7 +30,7 @@ import { ArrowValue, ColorValue } from '../../../types'; * * The shape is used to represent edges, not vertices. * - * This shape is registered under {@link SHAPE.CONNECTOR} in {@link CellRenderer}. + * This shape is registered under `connector` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}. * * @category Edge Shapes */ diff --git a/packages/core/src/view/geometry/edge/LineShape.ts b/packages/core/src/view/geometry/edge/LineShape.ts index 54c79b8400..3d2c797fac 100644 --- a/packages/core/src/view/geometry/edge/LineShape.ts +++ b/packages/core/src/view/geometry/edge/LineShape.ts @@ -26,7 +26,7 @@ import { ColorValue } from '../../../types'; * * The shape is used to represent edges, not vertices. * - * By default, this shape is registered under {@link SHAPE.LINE} in {@link CellRenderer}. + * This shape is registered under `line` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}. * * @category Edge Shapes */ diff --git a/packages/core/src/view/geometry/edge/PolylineShape.ts b/packages/core/src/view/geometry/edge/PolylineShape.ts index e16695d5b7..3306086977 100644 --- a/packages/core/src/view/geometry/edge/PolylineShape.ts +++ b/packages/core/src/view/geometry/edge/PolylineShape.ts @@ -27,7 +27,7 @@ import { ColorValue } from '../../../types'; * * The shape is used to represent edges, not vertices. * - * By default, this shape is not registered in {@link CellRenderer}. + * This shape is **NOT** registered in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}. * * @category Edge Shapes */ diff --git a/packages/core/src/view/geometry/node/ActorShape.ts b/packages/core/src/view/geometry/node/ActorShape.ts index b34d2b7416..59867e7046 100644 --- a/packages/core/src/view/geometry/node/ActorShape.ts +++ b/packages/core/src/view/geometry/node/ActorShape.ts @@ -24,7 +24,8 @@ import { NONE } from '../../../util/Constants'; /** * Extends {@link Shape} to implement an actor shape. - * This shape is registered by default under {@link SHAPE.ACTOR} in {@link CellRenderer}. + * + * 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: diff --git a/packages/core/src/view/geometry/node/CloudShape.ts b/packages/core/src/view/geometry/node/CloudShape.ts index 44c8416f24..2cac0db6f5 100644 --- a/packages/core/src/view/geometry/node/CloudShape.ts +++ b/packages/core/src/view/geometry/node/CloudShape.ts @@ -22,7 +22,8 @@ import Rectangle from '../Rectangle'; /** * Extends {@link ActorShape} to implement a cloud shape. - * This shape is registered by default under {@link SHAPE.CLOUD} in {@link CellRenderer}. + * + * This shape is registered under `cloud` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}. * * @category Vertex Shapes */ diff --git a/packages/core/src/view/geometry/node/CylinderShape.ts b/packages/core/src/view/geometry/node/CylinderShape.ts index 66a988c803..4dad45b63e 100644 --- a/packages/core/src/view/geometry/node/CylinderShape.ts +++ b/packages/core/src/view/geometry/node/CylinderShape.ts @@ -23,7 +23,8 @@ import { NONE } from '../../../util/Constants'; /** * Extends {@link Shape} to implement a cylinder shape. - * This shape is registered by default under {@link SHAPE.CYLINDER} in {@link CellRenderer}. + * + * This shape is registered under `cylinder` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}. * * If a custom shape with one filled area and an overlay path is needed, then this shape's {@link redrawPath} should be overridden. * diff --git a/packages/core/src/view/geometry/node/DoubleEllipseShape.ts b/packages/core/src/view/geometry/node/DoubleEllipseShape.ts index efc61cc3c2..5012358a28 100644 --- a/packages/core/src/view/geometry/node/DoubleEllipseShape.ts +++ b/packages/core/src/view/geometry/node/DoubleEllipseShape.ts @@ -22,7 +22,8 @@ import AbstractCanvas2D from '../../../view/canvas/AbstractCanvas2D'; /** * Extends {@link Shape} to implement a double ellipse shape. - * This shape is registered by default under {@link SHAPE.DOUBLE_ELLIPSE} in {@link CellRenderer}. + * + * This shape is registered under `doubleEllipse` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}. * * If a custom shape is needed to only fill the inner ellipse, then this shape's {@link paintVertexShape} method should be overridden * like in the following example: diff --git a/packages/core/src/view/geometry/node/EllipseShape.ts b/packages/core/src/view/geometry/node/EllipseShape.ts index 543efee843..e8eceb352c 100644 --- a/packages/core/src/view/geometry/node/EllipseShape.ts +++ b/packages/core/src/view/geometry/node/EllipseShape.ts @@ -22,7 +22,8 @@ import Rectangle from '../Rectangle'; /** * Extends {@link Shape} to implement an ellipse shape. - * This shape is registered by default under {@link SHAPE.ELLIPSE} in {@link CellRenderer}. + * + * This shape is registered under `ellipse` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}. * * @category Vertex Shapes */ diff --git a/packages/core/src/view/geometry/node/HexagonShape.ts b/packages/core/src/view/geometry/node/HexagonShape.ts index 7b837ad4e0..e35506ed08 100644 --- a/packages/core/src/view/geometry/node/HexagonShape.ts +++ b/packages/core/src/view/geometry/node/HexagonShape.ts @@ -24,6 +24,8 @@ import AbstractCanvas2D from '../../canvas/AbstractCanvas2D'; /** * Implementation of the hexagon shape. * + * This shape is registered under `hexagon` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}. + * * @category Vertex Shapes */ class HexagonShape extends ActorShape { diff --git a/packages/core/src/view/geometry/node/ImageShape.ts b/packages/core/src/view/geometry/node/ImageShape.ts index 68ff57b72f..1ab251ad4a 100644 --- a/packages/core/src/view/geometry/node/ImageShape.ts +++ b/packages/core/src/view/geometry/node/ImageShape.ts @@ -25,7 +25,8 @@ import { ColorValue } from '../../../types'; /** * Extends {@link RectangleShape} to implement an image shape. - * This shape is registered by default under {@link SHAPE.IMAGE} in {@link CellRenderer}. + * + * This shape is registered under `image` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}. * * @category Vertex Shapes */ diff --git a/packages/core/src/view/geometry/node/LabelShape.ts b/packages/core/src/view/geometry/node/LabelShape.ts index b1c1a831e9..92d376e25f 100644 --- a/packages/core/src/view/geometry/node/LabelShape.ts +++ b/packages/core/src/view/geometry/node/LabelShape.ts @@ -24,7 +24,8 @@ import AbstractCanvas2D from '../../canvas/AbstractCanvas2D'; /** * Extends {@link RectangleShape} to implement an image shape with a label. - * This shape is registered by default under {@link SHAPE.LABEL} in {@link CellRenderer}. + * + * This shape is registered under `label` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}. * * @category Vertex Shapes */ diff --git a/packages/core/src/view/geometry/node/RectangleShape.ts b/packages/core/src/view/geometry/node/RectangleShape.ts index 2a57e3036d..520026f751 100644 --- a/packages/core/src/view/geometry/node/RectangleShape.ts +++ b/packages/core/src/view/geometry/node/RectangleShape.ts @@ -24,7 +24,8 @@ import { ColorValue } from '../../../types'; /** * Extends {@link Shape} to implement a rectangle shape. - * This shape is registered by default under {@link SHAPE.RECTANGLE} in {@link CellRenderer}. + * + * This shape is registered under `rectangle` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}. * * @category Vertex Shapes */ diff --git a/packages/core/src/view/geometry/node/RhombusShape.ts b/packages/core/src/view/geometry/node/RhombusShape.ts index 76bb5ee660..040e94b088 100644 --- a/packages/core/src/view/geometry/node/RhombusShape.ts +++ b/packages/core/src/view/geometry/node/RhombusShape.ts @@ -24,7 +24,8 @@ import AbstractCanvas2D from '../../canvas/AbstractCanvas2D'; /** * Extends {@link Shape} to implement a rhombus (aka diamond) shape. - * This shape is registered by default under {@link SHAPE.RHOMBUS} in {@link CellRenderer}. + * + * This shape is registered under `rhombus` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}. * * @category Vertex Shapes */ diff --git a/packages/core/src/view/geometry/node/SwimlaneShape.ts b/packages/core/src/view/geometry/node/SwimlaneShape.ts index 6ad2a795c5..00a7173072 100644 --- a/packages/core/src/view/geometry/node/SwimlaneShape.ts +++ b/packages/core/src/view/geometry/node/SwimlaneShape.ts @@ -29,7 +29,8 @@ import AbstractCanvas2D from '../../canvas/AbstractCanvas2D'; /** * Extends {@link Shape} to implement a swimlane shape. - * This shape is registered by default under {@link SHAPE.SWIMLANE} in {@link CellRenderer}. + * + * This shape is registered under `swimlane` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}. * * Use: * - {@link CellStateStyle.startSize} to define the size of the title region, diff --git a/packages/core/src/view/geometry/node/TextShape.ts b/packages/core/src/view/geometry/node/TextShape.ts index 7f12fd0124..581b9f3776 100644 --- a/packages/core/src/view/geometry/node/TextShape.ts +++ b/packages/core/src/view/geometry/node/TextShape.ts @@ -53,6 +53,8 @@ import { matchBinaryMask } from '../../../internal/utils'; /** * Extends {@link Shape} to implement a text shape. * + * This shape is **NOT** registered in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}. + * * To change vertical text from "bottom to top" to "top to bottom", the following code can be used: * ```javascript * TextShape.prototype.verticalTextRotation = 90; diff --git a/packages/core/src/view/geometry/node/TriangleShape.ts b/packages/core/src/view/geometry/node/TriangleShape.ts index 86ab5912e3..1a2307c22c 100644 --- a/packages/core/src/view/geometry/node/TriangleShape.ts +++ b/packages/core/src/view/geometry/node/TriangleShape.ts @@ -24,6 +24,8 @@ import AbstractCanvas2D from '../../canvas/AbstractCanvas2D'; /** * Implementation of the triangle shape. * + * This shape is registered under `triangle` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}. + * * @category Vertex Shapes */ class TriangleShape extends ActorShape { diff --git a/packages/core/src/view/mixins/CellsMixin.ts b/packages/core/src/view/mixins/CellsMixin.ts index 343220f15f..9bd902ec34 100644 --- a/packages/core/src/view/mixins/CellsMixin.ts +++ b/packages/core/src/view/mixins/CellsMixin.ts @@ -33,7 +33,6 @@ import { DEFAULT_FONTSIZE, DEFAULT_IMAGESIZE, DIRECTION, - SHAPE, } from '../../util/Constants'; import Geometry from '../geometry/Geometry'; import EventObject from '../event/EventObject'; @@ -958,7 +957,7 @@ export const CellsMixin: PartialType = { // Adds dimension of image if shape is a label if (state.getImageSrc() || style.image) { - if (style.shape === SHAPE.LABEL) { + if (style.shape === 'label') { if (style.verticalAlign === ALIGN.MIDDLE) { dx += style.imageWidth || DEFAULT_IMAGESIZE; } diff --git a/packages/core/src/view/mixins/SwimlaneMixin.ts b/packages/core/src/view/mixins/SwimlaneMixin.ts index a1668c28c6..980940525b 100644 --- a/packages/core/src/view/mixins/SwimlaneMixin.ts +++ b/packages/core/src/view/mixins/SwimlaneMixin.ts @@ -17,7 +17,7 @@ limitations under the License. import Rectangle from '../geometry/Rectangle'; import { convertPoint } from '../../util/styleUtils'; import { mod } from '../../util/mathUtils'; -import { DEFAULT_STARTSIZE, DIRECTION, SHAPE } from '../../util/Constants'; +import { DEFAULT_STARTSIZE, DIRECTION } from '../../util/Constants'; import { getClientX, getClientY } from '../../util/EventUtils'; import type { AbstractGraph } from '../AbstractGraph'; import type { DirectionValue } from '../../types'; @@ -191,7 +191,7 @@ export const SwimlaneMixin: PartialType = { isSwimlane(cell, ignoreState = false) { if (cell && cell.getParent() !== this.getDataModel().getRoot() && !cell.isEdge()) { - return this.getCurrentCellStyle(cell, ignoreState).shape === SHAPE.SWIMLANE; + return this.getCurrentCellStyle(cell, ignoreState).shape === 'swimlane'; } return false; }, diff --git a/packages/core/src/view/style/Stylesheet.ts b/packages/core/src/view/style/Stylesheet.ts index b96a25bfb5..029c96f9a5 100644 --- a/packages/core/src/view/style/Stylesheet.ts +++ b/packages/core/src/view/style/Stylesheet.ts @@ -16,7 +16,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { ALIGN, NONE, SHAPE } from '../../util/Constants'; +import { ALIGN, NONE } from '../../util/Constants'; import { clone } from '../../util/cloneUtils'; import type { CellStateStyle, CellStyle } from '../../types'; @@ -65,7 +65,7 @@ export class Stylesheet { */ createDefaultVertexStyle() { const style = {} as CellStateStyle; - style.shape = SHAPE.RECTANGLE; + style.shape = 'rectangle'; style.perimeter = 'rectanglePerimeter'; style.verticalAlign = ALIGN.MIDDLE; style.align = ALIGN.CENTER; @@ -81,7 +81,7 @@ export class Stylesheet { */ createDefaultEdgeStyle() { const style = {} as CellStateStyle; - style.shape = SHAPE.CONNECTOR; + style.shape = 'connector'; style.endArrow = 'classic'; style.verticalAlign = ALIGN.MIDDLE; style.align = ALIGN.CENTER; @@ -132,7 +132,7 @@ export class Stylesheet { * * ```javascript * const style = {} as CellStateStyle; - * style.shape = SHAPE.RECTANGLE; + * style.shape = 'rectangle'; * style.perimeter = PERIMETER.RECTANGLE; * style.rounded = true; * graph.getStylesheet().putCellStyle('rounded', style); diff --git a/packages/html/stories/ColorStylePlaceHolders.stories.ts b/packages/html/stories/ColorStylePlaceHolders.stories.ts index a1d1d16118..ce55a0d645 100644 --- a/packages/html/stories/ColorStylePlaceHolders.stories.ts +++ b/packages/html/stories/ColorStylePlaceHolders.stories.ts @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { constants, Graph } from '@maxgraph/core'; +import { Graph } from '@maxgraph/core'; import { globalTypes, globalValues } from './shared/args.js'; import { configureImagesBasePath, createGraphContainer } from './shared/configure.js'; @@ -44,7 +44,7 @@ const Template = ({ label, ...args }: Record) => { defaultVertexStyle.foldable = false; graph.getStylesheet().putCellStyle('swimlane', { - shape: constants.SHAPE.SWIMLANE, + shape: 'swimlane', startSize: 30, fillColor: '#ffffff', strokeColor: 'red', diff --git a/packages/html/stories/Folding.stories.ts b/packages/html/stories/Folding.stories.ts index 6fc4df962b..0eee36d71b 100644 --- a/packages/html/stories/Folding.stories.ts +++ b/packages/html/stories/Folding.stories.ts @@ -16,7 +16,6 @@ limitations under the License. */ import { - constants, EdgeStyle, EntityRelationConnectorConfig, Graph, @@ -72,7 +71,7 @@ const Template = ({ label, ...args }: Record) => { style.startSize = 30; style = {}; - style.shape = constants.SHAPE.RECTANGLE; + style.shape = 'rectangle'; style.strokeColor = 'none'; style.fillColor = 'none'; style.foldable = false; diff --git a/packages/html/stories/SwimLanes.stories.ts b/packages/html/stories/SwimLanes.stories.ts index 5b863704df..27756d28a7 100644 --- a/packages/html/stories/SwimLanes.stories.ts +++ b/packages/html/stories/SwimLanes.stories.ts @@ -96,7 +96,7 @@ const Template = ({ label, ...args }: Record) => { // Changes the default vertex style in-place let style = graph.getStylesheet().getDefaultVertexStyle(); - style.shape = constants.SHAPE.SWIMLANE; + style.shape = 'swimlane'; style.verticalAlign = 'middle'; style.labelBackgroundColor = 'white'; style.fontSize = 11; @@ -108,7 +108,7 @@ const Template = ({ label, ...args }: Record) => { style.foldable = true; style = cloneUtils.clone(style); - style.shape = constants.SHAPE.RECTANGLE; + style.shape = 'rectangle'; style.fontSize = 10; style.rounded = true; style.horizontal = true; @@ -118,13 +118,13 @@ const Template = ({ label, ...args }: Record) => { graph.getStylesheet().putCellStyle('process', style); style = cloneUtils.clone(style); - style.shape = constants.SHAPE.ELLIPSE; + style.shape = 'ellipse'; style.perimeter = Perimeter.EllipsePerimeter; delete style.rounded; graph.getStylesheet().putCellStyle('state', style); style = cloneUtils.clone(style); - style.shape = constants.SHAPE.RHOMBUS; + style.shape = 'rhombus'; style.perimeter = Perimeter.RhombusPerimeter; style.verticalAlign = 'top'; style.spacingTop = 40; @@ -132,7 +132,7 @@ const Template = ({ label, ...args }: Record) => { graph.getStylesheet().putCellStyle('condition', style); style = cloneUtils.clone(style); - style.shape = constants.SHAPE.DOUBLE_ELLIPSE; + style.shape = 'doubleEllipse'; style.perimeter = Perimeter.EllipsePerimeter; style.spacingTop = 28; style.fontSize = 14;