refactor: remove side effects when registering default style elements (#311)
Explicitly call the elements to remove the side effects in `CellRenderer` and `StyleRegistry`. This prepares the possibility to mark the library as "side effects free" and will allow to changes the defaults in the future.development
parent
ffc45f1f40
commit
8779a7468b
|
@ -56,6 +56,8 @@ import type { GraphPlugin, GraphPluginConstructor, MouseListenerSet } from '../t
|
||||||
import Multiplicity from './other/Multiplicity';
|
import Multiplicity from './other/Multiplicity';
|
||||||
import ImageBundle from './image/ImageBundle';
|
import ImageBundle from './image/ImageBundle';
|
||||||
import GraphSelectionModel from './GraphSelectionModel';
|
import GraphSelectionModel from './GraphSelectionModel';
|
||||||
|
import { registerDefaultShapes } from './cell/register-shapes';
|
||||||
|
import { registerDefaultStyleElements } from './style/register';
|
||||||
|
|
||||||
export const defaultPlugins: GraphPluginConstructor[] = [
|
export const defaultPlugins: GraphPluginConstructor[] = [
|
||||||
CellEditorHandler,
|
CellEditorHandler,
|
||||||
|
@ -486,6 +488,11 @@ class Graph extends EventSource {
|
||||||
// Group: Main graph constructor and functions
|
// Group: Main graph constructor and functions
|
||||||
// ===================================================================================================================
|
// ===================================================================================================================
|
||||||
|
|
||||||
|
protected registerDefaults(): void {
|
||||||
|
registerDefaultShapes();
|
||||||
|
registerDefaultStyleElements();
|
||||||
|
}
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
container: HTMLElement,
|
container: HTMLElement,
|
||||||
model?: GraphDataModel,
|
model?: GraphDataModel,
|
||||||
|
@ -493,6 +500,7 @@ class Graph extends EventSource {
|
||||||
stylesheet: Stylesheet | null = null
|
stylesheet: Stylesheet | null = null
|
||||||
) {
|
) {
|
||||||
super();
|
super();
|
||||||
|
this.registerDefaults();
|
||||||
|
|
||||||
this.container = container ?? document.createElement('div');
|
this.container = container ?? document.createElement('div');
|
||||||
this.model = model ?? this.createGraphDataModel();
|
this.model = model ?? this.createGraphDataModel();
|
||||||
|
|
|
@ -17,21 +17,8 @@ limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import RectangleShape from '../geometry/node/RectangleShape';
|
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 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 ImageShape from '../geometry/node/ImageShape';
|
||||||
import LabelShape from '../geometry/node/LabelShape';
|
|
||||||
import TextShape from '../geometry/node/TextShape';
|
import TextShape from '../geometry/node/TextShape';
|
||||||
import {
|
import {
|
||||||
ALIGN,
|
ALIGN,
|
||||||
|
@ -41,7 +28,6 @@ import {
|
||||||
DEFAULT_TEXT_DIRECTION,
|
DEFAULT_TEXT_DIRECTION,
|
||||||
DIALECT,
|
DIALECT,
|
||||||
NONE,
|
NONE,
|
||||||
SHAPE,
|
|
||||||
} from '../../util/Constants';
|
} from '../../util/Constants';
|
||||||
import { getRotatedPoint, mod, toRadians } from '../../util/mathUtils';
|
import { getRotatedPoint, mod, toRadians } from '../../util/mathUtils';
|
||||||
import { convertPoint } from '../../util/styleUtils';
|
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;
|
export default CellRenderer;
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -21,8 +21,6 @@ import EdgeStyle from './EdgeStyle';
|
||||||
import Perimeter from './Perimeter';
|
import Perimeter from './Perimeter';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @class StyleRegistry
|
|
||||||
*
|
|
||||||
* Singleton class that acts as a global converter from string to object values
|
* 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.
|
* 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;
|
export default StyleRegistry;
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
};
|
Loading…
Reference in New Issue