diff --git a/packages/core/src/view/Graph.ts b/packages/core/src/view/Graph.ts index 09fbe6ab8..5d0f529f7 100644 --- a/packages/core/src/view/Graph.ts +++ b/packages/core/src/view/Graph.ts @@ -56,6 +56,8 @@ import type { GraphPlugin, GraphPluginConstructor, MouseListenerSet } from '../t import Multiplicity from './other/Multiplicity'; import ImageBundle from './image/ImageBundle'; import GraphSelectionModel from './GraphSelectionModel'; +import { registerDefaultShapes } from './cell/register-shapes'; +import { registerDefaultStyleElements } from './style/register'; export const defaultPlugins: GraphPluginConstructor[] = [ CellEditorHandler, @@ -486,6 +488,11 @@ class Graph extends EventSource { // Group: Main graph constructor and functions // =================================================================================================================== + protected registerDefaults(): void { + registerDefaultShapes(); + registerDefaultStyleElements(); + } + constructor( container: HTMLElement, model?: GraphDataModel, @@ -493,6 +500,7 @@ class Graph extends EventSource { stylesheet: Stylesheet | null = null ) { super(); + this.registerDefaults(); this.container = container ?? document.createElement('div'); this.model = model ?? this.createGraphDataModel(); diff --git a/packages/core/src/view/cell/CellRenderer.ts b/packages/core/src/view/cell/CellRenderer.ts index 008938c42..dd45d94fa 100644 --- a/packages/core/src/view/cell/CellRenderer.ts +++ b/packages/core/src/view/cell/CellRenderer.ts @@ -17,21 +17,8 @@ limitations under the License. */ import RectangleShape from '../geometry/node/RectangleShape'; -import EllipseShape from '../geometry/node/EllipseShape'; -import RhombusShape from '../geometry/node/RhombusShape'; -import CylinderShape from '../geometry/node/CylinderShape'; import ConnectorShape from '../geometry/edge/ConnectorShape'; -import ActorShape from '../geometry/ActorShape'; -import TriangleShape from '../geometry/node/TriangleShape'; -import HexagonShape from '../geometry/node/HexagonShape'; -import CloudShape from '../geometry/node/CloudShape'; -import LineShape from '../geometry/edge/LineShape'; -import ArrowShape from '../geometry/edge/ArrowShape'; -import ArrowConnectorShape from '../geometry/edge/ArrowConnectorShape'; -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 TextShape from '../geometry/node/TextShape'; import { ALIGN, @@ -41,7 +28,6 @@ import { DEFAULT_TEXT_DIRECTION, DIALECT, NONE, - SHAPE, } from '../../util/Constants'; import { getRotatedPoint, mod, toRadians } from '../../util/mathUtils'; import { convertPoint } from '../../util/styleUtils'; @@ -1515,27 +1501,4 @@ class CellRenderer { } } -// Add default shapes into the default shapes array -for (const [shapeName, shapeClass] of [ - [SHAPE.RECTANGLE, RectangleShape], - [SHAPE.ELLIPSE, EllipseShape], - [SHAPE.RHOMBUS, RhombusShape], - [SHAPE.CYLINDER, CylinderShape], - [SHAPE.CONNECTOR, ConnectorShape], - [SHAPE.ACTOR, ActorShape], - [SHAPE.TRIANGLE, TriangleShape], - [SHAPE.HEXAGON, HexagonShape], - [SHAPE.CLOUD, CloudShape], - [SHAPE.LINE, LineShape], - [SHAPE.ARROW, ArrowShape], - [SHAPE.ARROW_CONNECTOR, ArrowConnectorShape], - [SHAPE.DOUBLE_ELLIPSE, DoubleEllipseShape], - [SHAPE.SWIMLANE, SwimlaneShape], - [SHAPE.IMAGE, ImageShape], - [SHAPE.LABEL, LabelShape], -]) { - // @ts-ignore - CellRenderer.registerShape(shapeName, shapeClass); -} - export default CellRenderer; diff --git a/packages/core/src/view/cell/register-shapes.ts b/packages/core/src/view/cell/register-shapes.ts new file mode 100644 index 000000000..fb9ca8772 --- /dev/null +++ b/packages/core/src/view/cell/register-shapes.ts @@ -0,0 +1,67 @@ +/* +Copyright 2024-present The maxGraph project Contributors + +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 CellRenderer from './CellRenderer'; +import RectangleShape from '../geometry/node/RectangleShape'; +import EllipseShape from '../geometry/node/EllipseShape'; +import RhombusShape from '../geometry/node/RhombusShape'; +import CylinderShape from '../geometry/node/CylinderShape'; +import ConnectorShape from '../geometry/edge/ConnectorShape'; +import ActorShape from '../geometry/ActorShape'; +import TriangleShape from '../geometry/node/TriangleShape'; +import HexagonShape from '../geometry/node/HexagonShape'; +import CloudShape from '../geometry/node/CloudShape'; +import LineShape from '../geometry/edge/LineShape'; +import ArrowShape from '../geometry/edge/ArrowShape'; +import ArrowConnectorShape from '../geometry/edge/ArrowConnectorShape'; +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; + +/** + * Add default shapes into `CellRenderer` shapes. + */ +export function registerDefaultShapes() { + if (!isDefaultElementsRegistered) { + for (const [shapeName, shapeClass] of [ + [SHAPE.ACTOR, ActorShape], + [SHAPE.ARROW, ArrowShape], + [SHAPE.ARROW_CONNECTOR, ArrowConnectorShape], + [SHAPE.CONNECTOR, ConnectorShape], + [SHAPE.CLOUD, CloudShape], + [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], + ]) { + // @ts-ignore + CellRenderer.registerShape(shapeName, shapeClass); + } + + isDefaultElementsRegistered = true; + } +} diff --git a/packages/core/src/view/style/StyleRegistry.ts b/packages/core/src/view/style/StyleRegistry.ts index 811e1812b..308a31aa2 100644 --- a/packages/core/src/view/style/StyleRegistry.ts +++ b/packages/core/src/view/style/StyleRegistry.ts @@ -21,8 +21,6 @@ import EdgeStyle from './EdgeStyle'; import Perimeter from './Perimeter'; /** - * @class StyleRegistry - * * Singleton class that acts as a global converter from string to object values * in a style. This is currently only used to perimeters and edge styles. */ @@ -59,19 +57,4 @@ class StyleRegistry { } } -StyleRegistry.putValue(EDGESTYLE.ELBOW, EdgeStyle.ElbowConnector); -StyleRegistry.putValue(EDGESTYLE.ENTITY_RELATION, EdgeStyle.EntityRelation); -StyleRegistry.putValue(EDGESTYLE.LOOP, EdgeStyle.Loop); -StyleRegistry.putValue(EDGESTYLE.SIDETOSIDE, EdgeStyle.SideToSide); -StyleRegistry.putValue(EDGESTYLE.TOPTOBOTTOM, EdgeStyle.TopToBottom); -StyleRegistry.putValue(EDGESTYLE.ORTHOGONAL, EdgeStyle.OrthConnector); -StyleRegistry.putValue(EDGESTYLE.SEGMENT, EdgeStyle.SegmentConnector); -StyleRegistry.putValue(EDGESTYLE.MANHATTAN, EdgeStyle.ManhattanConnector); - -StyleRegistry.putValue(PERIMETER.ELLIPSE, Perimeter.EllipsePerimeter); -StyleRegistry.putValue(PERIMETER.RECTANGLE, Perimeter.RectanglePerimeter); -StyleRegistry.putValue(PERIMETER.RHOMBUS, Perimeter.RhombusPerimeter); -StyleRegistry.putValue(PERIMETER.TRIANGLE, Perimeter.TrianglePerimeter); -StyleRegistry.putValue(PERIMETER.HEXAGON, Perimeter.HexagonPerimeter); - export default StyleRegistry; diff --git a/packages/core/src/view/style/register.ts b/packages/core/src/view/style/register.ts new file mode 100644 index 000000000..8bce72778 --- /dev/null +++ b/packages/core/src/view/style/register.ts @@ -0,0 +1,48 @@ +/* +Copyright 2024-present The maxGraph project Contributors + +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 { EDGESTYLE, PERIMETER } from '../../util/Constants'; +import EdgeStyle from './EdgeStyle'; +import Perimeter from './Perimeter'; +import StyleRegistry from './StyleRegistry'; + +let isDefaultsRegistered = false; + +/** + * Register style elements for "EdgeStyle" and "Perimeters". + */ +export const registerDefaultStyleElements = (): void => { + if (!isDefaultsRegistered) { + // Edge styles + StyleRegistry.putValue(EDGESTYLE.ELBOW, EdgeStyle.ElbowConnector); + StyleRegistry.putValue(EDGESTYLE.ENTITY_RELATION, EdgeStyle.EntityRelation); + StyleRegistry.putValue(EDGESTYLE.LOOP, EdgeStyle.Loop); + StyleRegistry.putValue(EDGESTYLE.MANHATTAN, EdgeStyle.ManhattanConnector); + StyleRegistry.putValue(EDGESTYLE.ORTHOGONAL, EdgeStyle.OrthConnector); + StyleRegistry.putValue(EDGESTYLE.SEGMENT, EdgeStyle.SegmentConnector); + StyleRegistry.putValue(EDGESTYLE.SIDETOSIDE, EdgeStyle.SideToSide); + StyleRegistry.putValue(EDGESTYLE.TOPTOBOTTOM, EdgeStyle.TopToBottom); + + // Perimeters + StyleRegistry.putValue(PERIMETER.ELLIPSE, Perimeter.EllipsePerimeter); + StyleRegistry.putValue(PERIMETER.HEXAGON, Perimeter.HexagonPerimeter); + StyleRegistry.putValue(PERIMETER.RECTANGLE, Perimeter.RectanglePerimeter); + StyleRegistry.putValue(PERIMETER.RHOMBUS, Perimeter.RhombusPerimeter); + StyleRegistry.putValue(PERIMETER.TRIANGLE, Perimeter.TrianglePerimeter); + + isDefaultsRegistered = true; + } +};