feat: introduce global config for the Entity Relation connector

Previously, it was not possible to update the “segment” default value globally. This is now possible, as is resetting the value to the maxGraph default.
maxGraph · tbouffard · Jan 7, 2025 · Jan 6, 2025 · Jan 6, 2025 · Jan 6, 2025
commit bd13aa2183c660a6e4580ca9bc971d92479f57ba
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -159,6 +159,7 @@ export { default as ObjectIdentity } from './util/ObjectIdentity';
 export { default as Point } from './view/geometry/Point';
 export { default as Rectangle } from './view/geometry/Rectangle';
 
+export * from './view/style/config';
 export { default as EdgeStyle } from './view/style/EdgeStyle';
 export { default as Perimeter } from './view/style/Perimeter';
 export { default as StyleRegistry } from './view/style/StyleRegistry';

diff --git a/packages/core/src/util/Constants.ts b/packages/core/src/util/Constants.ts
@@ -362,8 +362,7 @@ export const DEFAULT_MARKERSIZE = 6;
 export const DEFAULT_IMAGESIZE = 24;
 
 /**
- * Defines the length of the horizontal segment of an `Entity Relation`.
- * This can be overridden using {@link CellStateStyle.segment} style.
+ * Default value of {@link EntityRelationConnectorConfig.segment}.
  */
 export const ENTITY_SEGMENT = 30;
 

diff --git a/packages/core/src/view/style/config.ts b/packages/core/src/view/style/config.ts
@@ -0,0 +1,45 @@
+/*
+Copyright 2025-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 { ENTITY_SEGMENT } from '../../util/Constants';
+
+/**
+ * Configure the `Entity Relation connector` defaults for maxGraph.
+ *
+ * @experimental subject to change or removal. maxGraph's global configuration may be modified in the future without prior notice.
+ * @since 0.15.0
+ * @category Configuration
+ */
+export const EntityRelationConnectorConfig = {
+  /**
+   * Defines the length of the horizontal segment of an `Entity Relation`.
+   * This can be overridden using {@link CellStateStyle.segment} style.
+   * @default {@link ENTITY_SEGMENT}
+   */
+  segment: ENTITY_SEGMENT,
+};
+
+/**
+ * Resets {@link EntityRelationConnectorConfig} to default values.
+ *
+ * @experimental Subject to change or removal. maxGraph's global configuration may be modified in the future without prior notice.
+ * @since 0.15.0
+ * @category Configuration
+ */
+export const resetEntityRelationConnectorConfig = (): void => {
+  // implement the reset manually as there are a few properties for now
+  EntityRelationConnectorConfig.segment = ENTITY_SEGMENT;
+};
diff --git a/packages/core/src/view/style/edge/EntityRelation.ts b/packages/core/src/view/style/edge/EntityRelation.ts
@@ -19,11 +19,10 @@ limitations under the License.
 import CellState from '../../cell/CellState';
 import Geometry from '../../geometry/Geometry';
 import Point from '../../geometry/Point';
-import { DIRECTION_MASK, ENTITY_SEGMENT } from '../../../util/Constants';
+import { DIRECTION_MASK } from '../../../util/Constants';
 import { getPortConstraints } from '../../../util/mathUtils';
-import { getValue } from '../../../util/Utils';
-
 import type { EdgeStyleFunction } from '../../../types';
+import { EntityRelationConnectorConfig } from '../config';
 
 export const EntityRelation: EdgeStyleFunction = (
   state: CellState,
@@ -33,7 +32,8 @@ export const EntityRelation: EdgeStyleFunction = (
   result: Point[]
 ) => {
   const { view } = state;
-  const segment = getValue(state.style, 'segment', ENTITY_SEGMENT) * view.scale;
+  const segment =
+    (state.style?.segment ?? EntityRelationConnectorConfig.segment) * view.scale;
 
   const pts = state.absolutePoints;
   const p0 = pts[0];

diff --git a/packages/html/.storybook/preview.ts b/packages/html/.storybook/preview.ts
@@ -3,6 +3,7 @@ import {
   GlobalConfig,
   NoOpLogger,
   resetEdgeHandlerConfig,
+  resetEntityRelationConnectorConfig,
   resetHandleConfig,
   resetStyleDefaultsConfig,
   resetVertexHandlerConfig,
@@ -19,6 +20,7 @@ const resetMaxGraphConfigs = (): void => {
   GlobalConfig.logger = defaultLogger;
 
   resetEdgeHandlerConfig();
+  resetEntityRelationConnectorConfig();
   resetHandleConfig();
   resetStyleDefaultsConfig();
   resetVertexHandlerConfig();

diff --git a/packages/html/stories/Folding.stories.ts b/packages/html/stories/Folding.stories.ts
@@ -15,7 +15,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { constants, EdgeStyle, Graph, LayoutManager, StackLayout } from '@maxgraph/core';
+import {
+  constants,
+  EdgeStyle,
+  EntityRelationConnectorConfig,
+  Graph,
+  LayoutManager,
+  StackLayout,
+} from '@maxgraph/core';
 import { globalTypes, globalValues } from './shared/args.js';
 import {
   configureExpandedAndCollapsedImages,
@@ -39,7 +46,7 @@ const Template = ({ label, ...args }: Record<string, string>) => {
 
   // TODO Allow overriding constants. See https://github.com/maxGraph/maxGraph/issues/192
   // Enables crisp rendering of rectangles in SVG
-  // constants.ENTITY_SEGMENT = 20;
+  EntityRelationConnectorConfig.segment = 20;
 
   // Creates the graph inside the given container
   const graph = new Graph(container);

diff --git a/packages/website/docs/usage/global-configuration.md b/packages/website/docs/usage/global-configuration.md
@@ -14,6 +14,7 @@ The following objects can be used to configure `maxGraph` globally:
 
   - `Client`: this is the historical entry point for global configuration, coming from the `mxGraph` library.
   - `EdgeHandlerConfig` (since 0.14.0): for `EdgeHandler` (including subclasses).
+  - `EntityRelationConnectorConfig` (since 0.15.0): for the `EntityRelation` Connector/EdgeStyle.
   - `GlobalConfig` (since 0.11.0): for shared resources (logger).
   - `HandleConfig` (since 0.14.0): for shared handle configurations.
   - `StencilShapeConfig` (since 0.11.0): for stencil shapes.
@@ -23,6 +24,7 @@ The following objects can be used to configure `maxGraph` globally:
 Some functions are provided to reset the global configuration to the default values. For example:
 
   - `resetEdgeHandlerConfig` (since 0.14.0)
+  - `resetEntityRelationConnectorConfig` (since 0.15.0)
   - `resetHandleConfig` (since 0.14.0)
   - `resetStyleDefaultsConfig` (since 0.14.0)
   - `resetVertexHandlerConfig` (since 0.14.0)