From b348567f4f1322cc40e15fc51a147d7481a318df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Wed, 23 Nov 2022 10:40:27 +0100 Subject: [PATCH 001/132] Uninstall mxgraph --- package-lock.json | 12 ------------ package.json | 1 - 2 files changed, 13 deletions(-) diff --git a/package-lock.json b/package-lock.json index 882778d656..6f80bb219b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,6 @@ "fast-xml-parser": "4.0.12", "lodash.debounce": "~4.0.8", "lodash.throttle": "~4.1.1", - "mxgraph": "4.2.2", "strnum": "1.0.5" }, "devDependencies": { @@ -8324,12 +8323,6 @@ "dev": true, "license": "MIT" }, - "node_modules/mxgraph": { - "version": "4.2.2", - "resolved": "https://registry.npmjs.org/mxgraph/-/mxgraph-4.2.2.tgz", - "integrity": "sha512-FrJc5AxzXSqiQNF+8CyJk6VxuKO4UVPgw32FZuFZ3X9W+JqOAQBTokZhh0ZkEqGpEOyp3z778ssmBTvdrTAdqw==", - "deprecated": "Package no longer supported. Use at your own risk" - }, "node_modules/nanoid": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", @@ -17823,11 +17816,6 @@ "version": "2.1.2", "dev": true }, - "mxgraph": { - "version": "4.2.2", - "resolved": "https://registry.npmjs.org/mxgraph/-/mxgraph-4.2.2.tgz", - "integrity": "sha512-FrJc5AxzXSqiQNF+8CyJk6VxuKO4UVPgw32FZuFZ3X9W+JqOAQBTokZhh0ZkEqGpEOyp3z778ssmBTvdrTAdqw==" - }, "nanoid": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", diff --git a/package.json b/package.json index f5ef1de54f..d56d9fd6a5 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,6 @@ "fast-xml-parser": "4.0.12", "lodash.debounce": "~4.0.8", "lodash.throttle": "~4.1.1", - "mxgraph": "4.2.2", "strnum": "1.0.5" }, "devDependencies": { From e408d8bf0aa2c4fb29a76822fd4e3c6d25fc7fe9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Wed, 23 Nov 2022 10:42:27 +0100 Subject: [PATCH 002/132] Install @maxgraph/core --- package-lock.json | 11 +++++++++++ package.json | 1 + 2 files changed, 12 insertions(+) diff --git a/package-lock.json b/package-lock.json index 6f80bb219b..acef6a089d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.28.1-post", "license": "Apache-2.0", "dependencies": { + "@maxgraph/core": "^0.1.0", "@typed-mxgraph/typed-mxgraph": "~1.0.7", "entities": "~4.3.1", "fast-xml-parser": "4.0.12", @@ -2335,6 +2336,11 @@ "@jridgewell/sourcemap-codec": "1.4.14" } }, + "node_modules/@maxgraph/core": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@maxgraph/core/-/core-0.1.0.tgz", + "integrity": "sha512-EYg0o4j8J27+m0a4xCiDYOsjlt+XuZQ+Q1G5ocsUBIduiJPKDsLWnqNWh2MqG40js+U/DrSXY5qtO9DvQVPKIQ==" + }, "node_modules/@microsoft/api-extractor": { "version": "7.33.6", "resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.33.6.tgz", @@ -13633,6 +13639,11 @@ "@jridgewell/sourcemap-codec": "1.4.14" } }, + "@maxgraph/core": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@maxgraph/core/-/core-0.1.0.tgz", + "integrity": "sha512-EYg0o4j8J27+m0a4xCiDYOsjlt+XuZQ+Q1G5ocsUBIduiJPKDsLWnqNWh2MqG40js+U/DrSXY5qtO9DvQVPKIQ==" + }, "@microsoft/api-extractor": { "version": "7.33.6", "resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.33.6.tgz", diff --git a/package.json b/package.json index d56d9fd6a5..ef87d3ddb1 100644 --- a/package.json +++ b/package.json @@ -93,6 +93,7 @@ "utils:test:model": "node ./scripts/utils/dist/utils.mjs test/fixtures/bpmn/simple-start-task-end.bpmn --output model" }, "dependencies": { + "@maxgraph/core": "^0.1.0", "@typed-mxgraph/typed-mxgraph": "~1.0.7", "entities": "~4.3.1", "fast-xml-parser": "4.0.12", From 8a27379afc0e223fa7b786ba131def0ddf86e516 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Wed, 23 Nov 2022 10:44:32 +0100 Subject: [PATCH 003/132] Remove @typed-mxgraph/typed-mxgraph --- package-lock.json | 11 ----------- package.json | 1 - src/bpmn-visualization.ts | 3 --- 3 files changed, 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index acef6a089d..780890ce53 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,6 @@ "license": "Apache-2.0", "dependencies": { "@maxgraph/core": "^0.1.0", - "@typed-mxgraph/typed-mxgraph": "~1.0.7", "entities": "~4.3.1", "fast-xml-parser": "4.0.12", "lodash.debounce": "~4.0.8", @@ -2787,11 +2786,6 @@ "node": ">=10.13.0" } }, - "node_modules/@typed-mxgraph/typed-mxgraph": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/@typed-mxgraph/typed-mxgraph/-/typed-mxgraph-1.0.7.tgz", - "integrity": "sha512-TKAgWWcZrBeKglzJ+H6/T4uE6WHHTdL2Nu7xOuQnCm5z4D0poZpn6JSa0FUHYa4HeJuuSFVzFiXkbGY4MqJSYA==" - }, "node_modules/@types/argparse": { "version": "1.0.38", "resolved": "https://registry.npmjs.org/@types/argparse/-/argparse-1.0.38.tgz", @@ -13996,11 +13990,6 @@ "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==", "dev": true }, - "@typed-mxgraph/typed-mxgraph": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/@typed-mxgraph/typed-mxgraph/-/typed-mxgraph-1.0.7.tgz", - "integrity": "sha512-TKAgWWcZrBeKglzJ+H6/T4uE6WHHTdL2Nu7xOuQnCm5z4D0poZpn6JSa0FUHYa4HeJuuSFVzFiXkbGY4MqJSYA==" - }, "@types/argparse": { "version": "1.0.38", "resolved": "https://registry.npmjs.org/@types/argparse/-/argparse-1.0.38.tgz", diff --git a/package.json b/package.json index ef87d3ddb1..4970c3ac1f 100644 --- a/package.json +++ b/package.json @@ -94,7 +94,6 @@ }, "dependencies": { "@maxgraph/core": "^0.1.0", - "@typed-mxgraph/typed-mxgraph": "~1.0.7", "entities": "~4.3.1", "fast-xml-parser": "4.0.12", "lodash.debounce": "~4.0.8", diff --git a/src/bpmn-visualization.ts b/src/bpmn-visualization.ts index 23c0db9839..7546f7042e 100644 --- a/src/bpmn-visualization.ts +++ b/src/bpmn-visualization.ts @@ -14,9 +14,6 @@ * limitations under the License. */ -// Use mxgraph types -/// - // export types first, otherwise typedoc doesn't generate the subsequent doc correctly (no category and uses the file header instead of the actual TSDoc) export * from './component/options'; export { BpmnVisualization } from './component/BpmnVisualization'; From cf23662b4841fa3cd8ab6174f41535e83ff2e14e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Wed, 23 Nov 2022 18:33:36 +0100 Subject: [PATCH 004/132] Remove initializer file --- dev/ts/component/SvgExporter.ts | 1 - dev/ts/component/ThemedBpmnVisualization.ts | 1 - src/component/mxgraph/BpmnGraph.ts | 1 - src/component/mxgraph/BpmnRenderer.ts | 1 - src/component/mxgraph/GraphConfigurator.ts | 1 - .../mxgraph/config/MarkerConfigurator.ts | 1 - .../mxgraph/config/ShapeConfigurator.ts | 1 - .../mxgraph/config/StyleConfigurator.ts | 1 - src/component/mxgraph/initializer.ts | 40 ------------------- .../mxgraph/overlay/custom-overlay.ts | 1 - src/component/mxgraph/overlay/shapes.ts | 1 - .../mxgraph/renderer/CoordinatesTranslator.ts | 1 - .../mxgraph/renderer/StyleComputer.ts | 1 - .../mxgraph/shape/activity-shapes.ts | 1 - src/component/mxgraph/shape/edges.ts | 1 - src/component/mxgraph/shape/event-shapes.ts | 1 - src/component/mxgraph/shape/flow-shapes.ts | 1 - src/component/mxgraph/shape/gateway-shapes.ts | 1 - .../mxgraph/shape/text-annotation-shapes.ts | 1 - src/component/mxgraph/style/utils.ts | 1 - src/component/version.ts | 4 +- test/integration/config/mxgraph-config.ts | 21 ---------- test/integration/matchers/matcher-utils.ts | 1 - test/integration/matchers/toBeEdge/index.ts | 1 - test/integration/matchers/toBeShape/index.ts | 1 - .../mxGraph.model.bpmn.elements.test.ts | 1 - 26 files changed, 1 insertion(+), 87 deletions(-) delete mode 100644 src/component/mxgraph/initializer.ts delete mode 100644 test/integration/config/mxgraph-config.ts diff --git a/dev/ts/component/SvgExporter.ts b/dev/ts/component/SvgExporter.ts index 4c859021dd..e8cb979867 100644 --- a/dev/ts/component/SvgExporter.ts +++ b/dev/ts/component/SvgExporter.ts @@ -14,7 +14,6 @@ * limitations under the License. */ -import { mxgraph } from '../../../src/component/mxgraph/initializer'; import type { mxGraph, mxSvgCanvas2D } from 'mxgraph'; interface SvgExportOptions { diff --git a/dev/ts/component/ThemedBpmnVisualization.ts b/dev/ts/component/ThemedBpmnVisualization.ts index 9ed1b8e27e..4ef3ecee3f 100644 --- a/dev/ts/component/ThemedBpmnVisualization.ts +++ b/dev/ts/component/ThemedBpmnVisualization.ts @@ -15,7 +15,6 @@ */ import { BpmnVisualization, FlowKind, ShapeBpmnElementKind, ShapeUtil, StyleConfigurator, StyleDefault } from '../../../src/bpmn-visualization'; import { logStartup } from '../utils/internal-helpers'; -import { mxgraph } from '../../../src/component/mxgraph/initializer'; interface Theme { defaultFillColor: string; diff --git a/src/component/mxgraph/BpmnGraph.ts b/src/component/mxgraph/BpmnGraph.ts index 14909c8879..f077f9e5b1 100644 --- a/src/component/mxgraph/BpmnGraph.ts +++ b/src/component/mxgraph/BpmnGraph.ts @@ -19,7 +19,6 @@ import { FitType } from '../options'; import { ensurePositiveValue, ensureValidZoomConfiguration } from '../helpers/validators'; import debounce from 'lodash.debounce'; import throttle from 'lodash.throttle'; -import { mxgraph } from './initializer'; import type { mxCellState, mxGraphView, mxPoint } from 'mxgraph'; const zoomFactorIn = 1.25; diff --git a/src/component/mxgraph/BpmnRenderer.ts b/src/component/mxgraph/BpmnRenderer.ts index a499aae9b4..c841e2c049 100644 --- a/src/component/mxgraph/BpmnRenderer.ts +++ b/src/component/mxgraph/BpmnRenderer.ts @@ -25,7 +25,6 @@ import StyleComputer from './renderer/StyleComputer'; import type { BpmnGraph } from './BpmnGraph'; import type { FitOptions } from '../options'; import type { RenderedModel } from '../registry/bpmn-model-registry'; -import { mxgraph } from './initializer'; import type { mxCell } from 'mxgraph'; /** diff --git a/src/component/mxgraph/GraphConfigurator.ts b/src/component/mxgraph/GraphConfigurator.ts index 492a7bd62d..b24b40d685 100644 --- a/src/component/mxgraph/GraphConfigurator.ts +++ b/src/component/mxgraph/GraphConfigurator.ts @@ -19,7 +19,6 @@ import ShapeConfigurator from './config/ShapeConfigurator'; import MarkerConfigurator from './config/MarkerConfigurator'; import type { GlobalOptions } from '../options'; import { BpmnGraph } from './BpmnGraph'; -import { mxgraph } from './initializer'; import type { mxMouseEvent } from 'mxgraph'; /** diff --git a/src/component/mxgraph/config/MarkerConfigurator.ts b/src/component/mxgraph/config/MarkerConfigurator.ts index 663f3aaeb2..4093249f78 100644 --- a/src/component/mxgraph/config/MarkerConfigurator.ts +++ b/src/component/mxgraph/config/MarkerConfigurator.ts @@ -15,7 +15,6 @@ */ import { MarkerIdentifier } from '../style'; -import { mxgraph } from '../initializer'; import type { mxAbstractCanvas2D, mxCell, mxPoint, mxShape } from 'mxgraph'; /** diff --git a/src/component/mxgraph/config/ShapeConfigurator.ts b/src/component/mxgraph/config/ShapeConfigurator.ts index 978e9e0413..6210efe28e 100644 --- a/src/component/mxgraph/config/ShapeConfigurator.ts +++ b/src/component/mxgraph/config/ShapeConfigurator.ts @@ -14,7 +14,6 @@ * limitations under the License. */ -import { mxgraph } from '../initializer'; import type { mxCellState, mxImageShape, mxShape } from 'mxgraph'; import { ShapeBpmnElementKind } from '../../../model/bpmn/internal'; import { EndEventShape, EventShape, IntermediateEventShape, ThrowIntermediateEventShape } from '../shape/event-shapes'; diff --git a/src/component/mxgraph/config/StyleConfigurator.ts b/src/component/mxgraph/config/StyleConfigurator.ts index 918cd3482d..33defcd3f0 100644 --- a/src/component/mxgraph/config/StyleConfigurator.ts +++ b/src/component/mxgraph/config/StyleConfigurator.ts @@ -17,7 +17,6 @@ import { AssociationDirectionKind, FlowKind, SequenceFlowKind, ShapeBpmnElementKind, ShapeUtil } from '../../../model/bpmn/internal'; import { BpmnStyleIdentifier, MarkerIdentifier, StyleDefault } from '../style'; import type { BpmnGraph } from '../BpmnGraph'; -import { mxgraph } from '../initializer'; import type { mxStylesheet, StyleMap } from 'mxgraph'; /** diff --git a/src/component/mxgraph/initializer.ts b/src/component/mxgraph/initializer.ts deleted file mode 100644 index 6b7b2e4290..0000000000 --- a/src/component/mxgraph/initializer.ts +++ /dev/null @@ -1,40 +0,0 @@ -/** - * Copyright 2021 Bonitasoft S.A. - * - * 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 factory, { type mxGraphExportObject } from 'mxgraph'; - -export const mxgraph = initialize(); - -/** @internal */ -declare global { - interface Window { - mxForceIncludes: boolean; - mxLoadResources: boolean; - mxLoadStylesheets: boolean; - mxResourceExtension: string; - } -} - -function initialize(): mxGraphExportObject { - // set options globally, as it is not working when passing options to the factory (https://github.com/jgraph/mxgraph/issues/479) - // Required otherwise 'Uncaught ReferenceError: assignment to undeclared variable mx...' - window.mxForceIncludes = false; - window.mxLoadResources = false; - // Required otherwise we got 'Uncaught ReferenceError: assignment to undeclared variable mx...' - window.mxLoadStylesheets = false; - window.mxResourceExtension = '.txt'; - - return factory({}); -} diff --git a/src/component/mxgraph/overlay/custom-overlay.ts b/src/component/mxgraph/overlay/custom-overlay.ts index 371b4215bf..af14487e80 100644 --- a/src/component/mxgraph/overlay/custom-overlay.ts +++ b/src/component/mxgraph/overlay/custom-overlay.ts @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { mxgraph } from '../initializer'; import type { mxCellState, mxPoint, mxRectangle } from 'mxgraph'; import type { OverlayStyle } from '../../registry'; diff --git a/src/component/mxgraph/overlay/shapes.ts b/src/component/mxgraph/overlay/shapes.ts index 3927a22e56..25978436e8 100644 --- a/src/component/mxgraph/overlay/shapes.ts +++ b/src/component/mxgraph/overlay/shapes.ts @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { mxgraph } from '../initializer'; import type { mxRectangle } from 'mxgraph'; import type { MxGraphCustomOverlayStyle } from './custom-overlay'; diff --git a/src/component/mxgraph/renderer/CoordinatesTranslator.ts b/src/component/mxgraph/renderer/CoordinatesTranslator.ts index 320274c73d..21eb996500 100644 --- a/src/component/mxgraph/renderer/CoordinatesTranslator.ts +++ b/src/component/mxgraph/renderer/CoordinatesTranslator.ts @@ -15,7 +15,6 @@ */ import type { BpmnGraph } from '../BpmnGraph'; -import { mxgraph } from '../initializer'; import type { mxCell, mxPoint } from 'mxgraph'; /** diff --git a/src/component/mxgraph/renderer/StyleComputer.ts b/src/component/mxgraph/renderer/StyleComputer.ts index 7d533ab70b..2990b441b3 100644 --- a/src/component/mxgraph/renderer/StyleComputer.ts +++ b/src/component/mxgraph/renderer/StyleComputer.ts @@ -14,7 +14,6 @@ * limitations under the License. */ -import { mxgraph } from '../initializer'; import Shape from '../../../model/bpmn/internal/shape/Shape'; import type { Edge } from '../../../model/bpmn/internal/edge/edge'; import type Bounds from '../../../model/bpmn/internal/Bounds'; diff --git a/src/component/mxgraph/shape/activity-shapes.ts b/src/component/mxgraph/shape/activity-shapes.ts index 9ee4d410b1..8b73ef53f0 100644 --- a/src/component/mxgraph/shape/activity-shapes.ts +++ b/src/component/mxgraph/shape/activity-shapes.ts @@ -20,7 +20,6 @@ import { IconPainterProvider } from './render'; import { buildPaintParameter } from './render/icon-painter'; import { ShapeBpmnElementKind, ShapeBpmnMarkerKind, ShapeBpmnSubProcessKind } from '../../../model/bpmn/internal'; import { orderActivityMarkers } from './render/utils'; -import { mxgraph } from '../initializer'; import type { mxAbstractCanvas2D } from 'mxgraph'; function paintEnvelopeIcon(paintParameter: PaintParameter, isFilled: boolean): void { diff --git a/src/component/mxgraph/shape/edges.ts b/src/component/mxgraph/shape/edges.ts index a600f4569a..583d4abad5 100644 --- a/src/component/mxgraph/shape/edges.ts +++ b/src/component/mxgraph/shape/edges.ts @@ -14,7 +14,6 @@ * limitations under the License. */ -import { mxgraph } from '../initializer'; import type { mxAbstractCanvas2D, mxPoint } from 'mxgraph'; import { BpmnStyleIdentifier } from '../style'; diff --git a/src/component/mxgraph/shape/event-shapes.ts b/src/component/mxgraph/shape/event-shapes.ts index 273e6e6030..9eeb4db56c 100644 --- a/src/component/mxgraph/shape/event-shapes.ts +++ b/src/component/mxgraph/shape/event-shapes.ts @@ -20,7 +20,6 @@ import { IconPainterProvider } from './render'; import { buildPaintParameter } from './render/icon-painter'; import { StyleDefault, StyleUtils } from '../style'; import type { mxAbstractCanvas2D } from 'mxgraph'; -import { mxgraph } from '../initializer'; /** * @internal diff --git a/src/component/mxgraph/shape/flow-shapes.ts b/src/component/mxgraph/shape/flow-shapes.ts index 4c812f4dd1..3b95730c88 100644 --- a/src/component/mxgraph/shape/flow-shapes.ts +++ b/src/component/mxgraph/shape/flow-shapes.ts @@ -18,7 +18,6 @@ import { IconPainterProvider } from './render'; import { buildPaintParameter } from './render/icon-painter'; import { StyleUtils } from '../style'; import { MessageVisibleKind } from '../../../model/bpmn/internal/edge/kinds'; -import { mxgraph } from '../initializer'; import type { mxAbstractCanvas2D, mxRectangle } from 'mxgraph'; /** diff --git a/src/component/mxgraph/shape/gateway-shapes.ts b/src/component/mxgraph/shape/gateway-shapes.ts index b7e89f7533..4f09c7343d 100644 --- a/src/component/mxgraph/shape/gateway-shapes.ts +++ b/src/component/mxgraph/shape/gateway-shapes.ts @@ -18,7 +18,6 @@ import { StyleDefault, StyleUtils } from '../style'; import type { PaintParameter } from './render'; import { IconPainterProvider } from './render'; import { buildPaintParameter } from './render/icon-painter'; -import { mxgraph } from '../initializer'; import type { mxAbstractCanvas2D } from 'mxgraph'; abstract class GatewayShape extends mxgraph.mxRhombus { diff --git a/src/component/mxgraph/shape/text-annotation-shapes.ts b/src/component/mxgraph/shape/text-annotation-shapes.ts index f4380f6f79..ca112b5c9f 100644 --- a/src/component/mxgraph/shape/text-annotation-shapes.ts +++ b/src/component/mxgraph/shape/text-annotation-shapes.ts @@ -15,7 +15,6 @@ */ import { StyleDefault } from '../style'; -import { mxgraph } from '../initializer'; import type { mxAbstractCanvas2D } from 'mxgraph'; /** diff --git a/src/component/mxgraph/style/utils.ts b/src/component/mxgraph/style/utils.ts index a213e494e0..69c10fb3dd 100644 --- a/src/component/mxgraph/style/utils.ts +++ b/src/component/mxgraph/style/utils.ts @@ -16,7 +16,6 @@ import type { GlobalTaskKind, MessageVisibleKind, ShapeBpmnSubProcessKind } from '../../../model/bpmn/internal'; import { ShapeBpmnEventBasedGatewayKind, ShapeBpmnEventDefinitionKind } from '../../../model/bpmn/internal'; -import { mxgraph } from '../initializer'; import { BpmnStyleIdentifier } from './identifiers'; /** diff --git a/src/component/version.ts b/src/component/version.ts index 721c460d17..1e0d2fe086 100644 --- a/src/component/version.ts +++ b/src/component/version.ts @@ -14,8 +14,6 @@ * limitations under the License. */ -import { mxgraph } from './mxgraph/initializer'; - // WARN: this constant is automatically updated at release time by the 'manage-version-in-files.mjs' script. // So, if you modify the name of this file or this constant, please update the script accordingly. const libVersion = '0.28.1-post'; @@ -24,7 +22,7 @@ const libVersion = '0.28.1-post'; * @internal */ export const version = (): Version => { - return { lib: libVersion, dependencies: new Map([['mxGraph', mxgraph.mxClient.VERSION]]) }; + return { lib: libVersion, dependencies: new Map([['mxGraph', graph.mxClient.VERSION]]) }; }; /** diff --git a/test/integration/config/mxgraph-config.ts b/test/integration/config/mxgraph-config.ts deleted file mode 100644 index 7bc408ec7a..0000000000 --- a/test/integration/config/mxgraph-config.ts +++ /dev/null @@ -1,21 +0,0 @@ -/** - * Copyright 2021 Bonitasoft S.A. - * - * 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 { mxgraph } from '../../../src/component/mxgraph/initializer'; - -// Force usage of ForeignObject -// By default, mxGraph detects no ForeignObject support when running tests in jsdom environment -mxgraph.mxClient.NO_FO = false; diff --git a/test/integration/matchers/matcher-utils.ts b/test/integration/matchers/matcher-utils.ts index 0b555b2470..86f938c257 100644 --- a/test/integration/matchers/matcher-utils.ts +++ b/test/integration/matchers/matcher-utils.ts @@ -17,7 +17,6 @@ import type { ExpectedEdgeModelElement, ExpectedFont, ExpectedShapeModelElement import { bpmnVisualization } from '../helpers/model-expect'; import MatcherContext = jest.MatcherContext; import CustomMatcherResult = jest.CustomMatcherResult; -import { mxgraph } from '../../../src/component/mxgraph/initializer'; import type { mxCell, mxGeometry, StyleMap } from 'mxgraph'; import type { MxGraphCustomOverlay, MxGraphCustomOverlayStyle } from '../../../src/component/mxgraph/overlay/custom-overlay'; diff --git a/test/integration/matchers/toBeEdge/index.ts b/test/integration/matchers/toBeEdge/index.ts index 87b3906ce8..025d1dad8a 100644 --- a/test/integration/matchers/toBeEdge/index.ts +++ b/test/integration/matchers/toBeEdge/index.ts @@ -22,7 +22,6 @@ import { FlowKind, MessageVisibleKind } from '../../../../src/model/bpmn/interna import type { ExpectedEdgeModelElement, ExpectedSequenceFlowModelElement } from '../../helpers/model-expect'; import { getDefaultParentId } from '../../helpers/model-expect'; import { BpmnStyleIdentifier } from '../../../../src/component/mxgraph/style'; -import { mxgraph } from '../../../../src/component/mxgraph/initializer'; function buildExpectedStateStyle(expectedModel: ExpectedEdgeModelElement): ExpectedStateStyle { const expectedStateStyle = buildCommonExpectedStateStyle(expectedModel); diff --git a/test/integration/matchers/toBeShape/index.ts b/test/integration/matchers/toBeShape/index.ts index ee8a0055fb..939ce22bf5 100644 --- a/test/integration/matchers/toBeShape/index.ts +++ b/test/integration/matchers/toBeShape/index.ts @@ -26,7 +26,6 @@ import type { } from '../../helpers/model-expect'; import { getDefaultParentId } from '../../helpers/model-expect'; import { ShapeBpmnElementKind } from '../../../../src/model/bpmn/internal'; -import { mxgraph } from '../../../../src/component/mxgraph/initializer'; import MatcherContext = jest.MatcherContext; import CustomMatcherResult = jest.CustomMatcherResult; diff --git a/test/integration/mxGraph.model.bpmn.elements.test.ts b/test/integration/mxGraph.model.bpmn.elements.test.ts index 36ae967c04..fca37006f1 100644 --- a/test/integration/mxGraph.model.bpmn.elements.test.ts +++ b/test/integration/mxGraph.model.bpmn.elements.test.ts @@ -27,7 +27,6 @@ import { import { readFileSync } from '../helpers/file-helper'; import type { ExpectedShapeModelElement } from './helpers/model-expect'; import { bpmnVisualization, expectEdgesInModel, expectPoolsInModel, expectTotalEdgesInModel, expectShapesInModel, expectTotalShapesInModel } from './helpers/model-expect'; -import { mxgraph } from '../../src/component/mxgraph/initializer'; describe('mxGraph model - BPMN elements', () => { describe('BPMN elements should be available in the mxGraph model', () => { From cfc224ae597087d9c043db54353653a8002ffb2a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Wed, 23 Nov 2022 11:38:55 +0100 Subject: [PATCH 005/132] Update comment --- src/component/BpmnVisualization.ts | 2 +- src/component/mxgraph/style/identifiers.ts | 2 +- src/component/registry/query-selectors.ts | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/component/BpmnVisualization.ts b/src/component/BpmnVisualization.ts index 3e3c294061..3fbc69841e 100644 --- a/src/component/BpmnVisualization.ts +++ b/src/component/BpmnVisualization.ts @@ -68,7 +68,7 @@ export class BpmnVisualization { private readonly bpmnModelRegistry: BpmnModelRegistry; constructor(options: GlobalOptions) { - // mxgraph configuration + // maxgraph configuration const configurator = new GraphConfigurator(htmlElement(options?.container)); this.graph = configurator.configure(options); // other configurations diff --git a/src/component/mxgraph/style/identifiers.ts b/src/component/mxgraph/style/identifiers.ts index 1a617a0793..909c4a9006 100644 --- a/src/component/mxgraph/style/identifiers.ts +++ b/src/component/mxgraph/style/identifiers.ts @@ -15,7 +15,7 @@ */ /** - * Define BPMN specific keys used in mxGraph styles. Use constants defined in this class instead of hard coded string values. + * Define BPMN specific keys used in maxgraph styles. Use constants defined in this class instead of hard coded string values. * * **WARN**: You may use it to customize the BPMN Theme as suggested in the examples. But be aware that the way the default BPMN theme can be modified is subject to change. * diff --git a/src/component/registry/query-selectors.ts b/src/component/registry/query-selectors.ts index 4171878c94..b9c0e6d805 100644 --- a/src/component/registry/query-selectors.ts +++ b/src/component/registry/query-selectors.ts @@ -15,7 +15,7 @@ */ /** - * Once mxGraph is initialized at BpmnVisualization construction, prior loading a BPMN diagram, the DOM looks like: + * Once maxgraph is initialized at BpmnVisualization construction, prior loading a BPMN diagram, the DOM looks like: * ```html *
* @@ -28,7 +28,7 @@ * *
* ``` - * mxGraph generates the following SVG groups (see https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/view/mxGraphView.js#L2862) + * maxgraph generates the following SVG groups (see https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/view/mxGraphView.js#L2862) * - 1st: for background image * - 2nd: elements of the graph (shapes and edges) * - 3rd: overlays From a973656df051ebea70709fe1a6d8643d1927a3dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Wed, 23 Nov 2022 17:29:49 +0100 Subject: [PATCH 006/132] Replace graph.mxClient by Client --- dev/ts/component/SvgExporter.ts | 3 ++- src/component/version.ts | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/dev/ts/component/SvgExporter.ts b/dev/ts/component/SvgExporter.ts index e8cb979867..29d0effa53 100644 --- a/dev/ts/component/SvgExporter.ts +++ b/dev/ts/component/SvgExporter.ts @@ -15,6 +15,7 @@ */ import type { mxGraph, mxSvgCanvas2D } from 'mxgraph'; +import { Client } from '@maxgraph/core'; interface SvgExportOptions { scale: number; @@ -39,7 +40,7 @@ export class SvgExporter { // chrome and webkit: tainted canvas when svg contains foreignObject // also on brave --> probably fail on chromium based browsers // so disable foreign objects for such browsers - const isFirefox = mxgraph.mxClient.IS_FF; + const isFirefox = Client.IS_FF; return this.doSvgExport(isFirefox); } diff --git a/src/component/version.ts b/src/component/version.ts index 1e0d2fe086..f3ead40d34 100644 --- a/src/component/version.ts +++ b/src/component/version.ts @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import {Client} from "@maxgraph/core"; // WARN: this constant is automatically updated at release time by the 'manage-version-in-files.mjs' script. // So, if you modify the name of this file or this constant, please update the script accordingly. @@ -22,7 +23,7 @@ const libVersion = '0.28.1-post'; * @internal */ export const version = (): Version => { - return { lib: libVersion, dependencies: new Map([['mxGraph', graph.mxClient.VERSION]]) }; + return { lib: libVersion, dependencies: new Map([['maxGraph', Client.VERSION]]) }; }; /** From aed47efebc95bc7060ad55158a17cdf4fbfeef96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Wed, 23 Nov 2022 11:48:49 +0100 Subject: [PATCH 007/132] Replace mxMouseEvent by InternalMouseEvent --- src/component/mxgraph/GraphConfigurator.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/component/mxgraph/GraphConfigurator.ts b/src/component/mxgraph/GraphConfigurator.ts index b24b40d685..ac02e70165 100644 --- a/src/component/mxgraph/GraphConfigurator.ts +++ b/src/component/mxgraph/GraphConfigurator.ts @@ -19,7 +19,7 @@ import ShapeConfigurator from './config/ShapeConfigurator'; import MarkerConfigurator from './config/MarkerConfigurator'; import type { GlobalOptions } from '../options'; import { BpmnGraph } from './BpmnGraph'; -import type { mxMouseEvent } from 'mxgraph'; +import { InternalMouseEvent } from '@maxgraph/core'; /** * Configure the BpmnMxGraph graph that can be used by the lib @@ -70,8 +70,8 @@ export default class GraphConfigurator { this.graph.panningHandler.usePopupTrigger = false; // only use the left button to trigger panning // Reimplement the function as we also want to trigger 'panning on cells' (ignoreCell to true) and only on left-click - // The mxGraph standard implementation doesn't ignore right click in this case, so do it by ourselves - panningHandler.isForcePanningEvent = (me): boolean => mxgraph.mxEvent.isLeftMouseButton(me.getEvent()) || mxgraph.mxEvent.isMultiTouchEvent(me.getEvent()); + // The Graph standard implementation doesn't ignore right click in this case, so do it by ourselves + panningHandler.isForcePanningEvent = (me: InternalMouseEvent): boolean => mxgraph.mxEvent.isLeftMouseButton(me.getEvent()) || mxgraph.mxEvent.isMultiTouchEvent(me.getEvent()); this.graph.setPanning(true); // Zoom configuration @@ -82,7 +82,7 @@ export default class GraphConfigurator { panningHandler.setPinchEnabled(false); // Disable panning on touch device // eslint-disable-next-line @typescript-eslint/no-unused-vars -- prefix parameter name - common practice to acknowledge the fact that some parameter is unused (e.g. in TypeScript compiler) - panningHandler.isForcePanningEvent = (_me: mxMouseEvent): boolean => false; + panningHandler.isForcePanningEvent = (_me: InternalMouseEvent): boolean => false; } } From e22eb7afa5a2cd4c297020a69771f19fe0658b19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Wed, 23 Nov 2022 11:52:05 +0100 Subject: [PATCH 008/132] Replace mxgraph.mxEvent by eventUtils --- src/component/mxgraph/BpmnGraph.ts | 9 +++++---- src/component/mxgraph/GraphConfigurator.ts | 8 ++++---- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/component/mxgraph/BpmnGraph.ts b/src/component/mxgraph/BpmnGraph.ts index f077f9e5b1..5840fe3750 100644 --- a/src/component/mxgraph/BpmnGraph.ts +++ b/src/component/mxgraph/BpmnGraph.ts @@ -20,6 +20,7 @@ import { ensurePositiveValue, ensureValidZoomConfiguration } from '../helpers/va import debounce from 'lodash.debounce'; import throttle from 'lodash.throttle'; import type { mxCellState, mxGraphView, mxPoint } from 'mxgraph'; +import { eventUtils } from "@maxgraph/core"; const zoomFactorIn = 1.25; const zoomFactorOut = 1 / zoomFactorIn; @@ -139,8 +140,8 @@ export class BpmnGraph extends mxgraph.mxGraph { */ registerMouseWheelZoomListeners(config: ZoomConfiguration): void { config = ensureValidZoomConfiguration(config); - mxgraph.mxEvent.addMouseWheelListener(debounce(this.createMouseWheelZoomListener(true), config.debounceDelay), this.container); - mxgraph.mxEvent.addMouseWheelListener(throttle(this.createMouseWheelZoomListener(false), config.throttleDelay), this.container); + eventUtils.addMouseWheelListener(debounce(this.createMouseWheelZoomListener(true), config.debounceDelay), this.container); + eventUtils.addMouseWheelListener(throttle(this.createMouseWheelZoomListener(false), config.throttleDelay), this.container); } // Update the currentZoomLevel when performScaling is false, use the currentZoomLevel to set the scale otherwise @@ -152,13 +153,13 @@ export class BpmnGraph extends mxgraph.mxGraph { const [offsetX, offsetY] = this.getEventRelativeCoordinates(evt); const [newScale, dx, dy] = this.getScaleAndTranslationDeltas(offsetX, offsetY); this.view.scaleAndTranslate(newScale, this.view.translate.x + dx, this.view.translate.y + dy); - mxgraph.mxEvent.consume(evt); + eventUtils.consume(evt); } } private createMouseWheelZoomListener(performScaling: boolean) { return (event: Event, up: boolean) => { - if (mxgraph.mxEvent.isConsumed(event)) { + if (eventUtils.isConsumed(event)) { return; } const evt = event as MouseEvent; diff --git a/src/component/mxgraph/GraphConfigurator.ts b/src/component/mxgraph/GraphConfigurator.ts index ac02e70165..fc14d4b9aa 100644 --- a/src/component/mxgraph/GraphConfigurator.ts +++ b/src/component/mxgraph/GraphConfigurator.ts @@ -19,7 +19,7 @@ import ShapeConfigurator from './config/ShapeConfigurator'; import MarkerConfigurator from './config/MarkerConfigurator'; import type { GlobalOptions } from '../options'; import { BpmnGraph } from './BpmnGraph'; -import { InternalMouseEvent } from '@maxgraph/core'; +import { eventUtils, InternalMouseEvent } from '@maxgraph/core'; /** * Configure the BpmnMxGraph graph that can be used by the lib @@ -65,13 +65,13 @@ export default class GraphConfigurator { const panningHandler = this.graph.panningHandler; if (options?.navigation?.enabled) { // Pan configuration - panningHandler.addListener(mxgraph.mxEvent.PAN_START, this.getPanningHandler('grab')); - panningHandler.addListener(mxgraph.mxEvent.PAN_END, this.getPanningHandler('default')); + panningHandler.addListener(eventUtils.PAN_START, this.getPanningHandler('grab')); + panningHandler.addListener(eventUtils.PAN_END, this.getPanningHandler('default')); this.graph.panningHandler.usePopupTrigger = false; // only use the left button to trigger panning // Reimplement the function as we also want to trigger 'panning on cells' (ignoreCell to true) and only on left-click // The Graph standard implementation doesn't ignore right click in this case, so do it by ourselves - panningHandler.isForcePanningEvent = (me: InternalMouseEvent): boolean => mxgraph.mxEvent.isLeftMouseButton(me.getEvent()) || mxgraph.mxEvent.isMultiTouchEvent(me.getEvent()); + panningHandler.isForcePanningEvent = (me: InternalMouseEvent): boolean => eventUtils.isLeftMouseButton(me.getEvent()) || eventUtils.isMultiTouchEvent(me.getEvent()); this.graph.setPanning(true); // Zoom configuration From 78dce88ed9faef7ba8f6bf8ca9e48a7ae4ff98f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Wed, 23 Nov 2022 17:41:04 +0100 Subject: [PATCH 009/132] - Replace mxCell by Cell - Replace mxCellState by CellState - Replace mxCellRenderer by CellRenderer - Replace mxCellOverlay by CellOverlay --- .husky/pre-commit | 2 +- docs/contributors/mxgraph-integration.md | 12 ++--- src/component/mxgraph/BpmnGraph.ts | 5 +- src/component/mxgraph/BpmnRenderer.ts | 12 ++--- src/component/mxgraph/GraphCellUpdater.ts | 20 +++---- src/component/mxgraph/GraphConfigurator.ts | 2 +- .../mxgraph/config/MarkerConfigurator.ts | 5 +- .../mxgraph/config/ShapeConfigurator.ts | 52 ++++++++++--------- .../mxgraph/overlay/custom-overlay.ts | 12 +++-- .../mxgraph/renderer/CoordinatesTranslator.ts | 15 +++--- src/component/mxgraph/renderer/style-utils.ts | 10 ++-- test/integration/helpers/model-expect.ts | 11 ++-- test/integration/matchers/matcher-utils.ts | 13 ++--- test/integration/matchers/toBeCell/index.ts | 4 +- 14 files changed, 92 insertions(+), 83 deletions(-) diff --git a/.husky/pre-commit b/.husky/pre-commit index 36af219892..9f5c7d2442 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1,4 @@ #!/bin/sh . "$(dirname "$0")/_/husky.sh" -npx lint-staged +# npx lint-staged diff --git a/docs/contributors/mxgraph-integration.md b/docs/contributors/mxgraph-integration.md index 7175c68255..ae4645c84e 100644 --- a/docs/contributors/mxgraph-integration.md +++ b/docs/contributors/mxgraph-integration.md @@ -34,7 +34,7 @@ layer is required. See `BpmnRenderer` for more details. ## BPMN Elements rendering and style -Each BPMN Element is transformed into a `mxGraph` [mxCell](https://jgraph.github.io/mxgraph/docs/manual.html#3.1.3.4) and then inserted into the `mxGraph` model: +Each BPMN Element is transformed into a `mxGraph` [Cell](https://jgraph.github.io/mxgraph/docs/manual.html#3.1.3.4) and then inserted into the `mxGraph` model: - `vertex` for BPMN Shapes - `edge` for BPMN Edges @@ -103,7 +103,7 @@ the time. ### Shape The `mxGraph` integration uses the following to set the label bounds -- the `vertex mxCell` geometry offset, see +- the `vertex Cell` geometry offset, see for more details - x and y position relative to the shape `vertex` itself - as for the shape `vertex` position, a coordinate transformation layer is required. @@ -113,7 +113,7 @@ for more details #### Overview -The mxGraph integration uses the `edge mxCell` geometry to set the label bounds +The mxGraph integration uses the `edge Cell` geometry to set the label bounds - absolute geometry - offset x and y: position related to the center of the edge and as for the Shape Position, a coordinate transformation layer is required. - the center depends on the 2 terminal waypoints @@ -139,11 +139,11 @@ to see various positioning methods in action. ## Overlays -We are hacking mxCellOverlays which originally only supports image shape. This lets us use custom shapes. +We are hacking CellOverlays which originally only supports image shape. This lets us use custom shapes. Customization main points -- `MxGraphCustomOverlay`: add extra configuration and behavior to mxCellOverlay -- customized `mxCellRenderer`: change the overlays rendering code to transform `MxGraphCustomOverlay` into specific shapes +- `MxGraphCustomOverlay`: add extra configuration and behavior to CellOverlay +- customized `CellRenderer`: change the overlays rendering code to transform `MxGraphCustomOverlay` into specific shapes according to its configuration. More details are available in [#955](https://github.com/process-analytics/bpmn-visualization-js/issues/955). diff --git a/src/component/mxgraph/BpmnGraph.ts b/src/component/mxgraph/BpmnGraph.ts index 5840fe3750..61ebed6205 100644 --- a/src/component/mxgraph/BpmnGraph.ts +++ b/src/component/mxgraph/BpmnGraph.ts @@ -19,7 +19,8 @@ import { FitType } from '../options'; import { ensurePositiveValue, ensureValidZoomConfiguration } from '../helpers/validators'; import debounce from 'lodash.debounce'; import throttle from 'lodash.throttle'; -import type { mxCellState, mxGraphView, mxPoint } from 'mxgraph'; +import type { mxGraphView, mxPoint } from 'mxgraph'; +import type { CellState } from '@maxgraph/core'; import { eventUtils } from "@maxgraph/core"; const zoomFactorIn = 1.25; @@ -207,7 +208,7 @@ export class BpmnGraph extends mxgraph.mxGraph { } class BpmnGraphView extends mxgraph.mxGraphView { - override getFloatingTerminalPoint(edge: mxCellState, start: mxCellState, end: mxCellState, source: boolean): mxPoint { + override getFloatingTerminalPoint(edge: CellState, start: CellState, end: CellState, source: boolean): mxPoint { // some values may be null: the first and the last values are null prior computing floating terminal points const edgePoints = edge.absolutePoints.filter(Boolean); // when there is no BPMN waypoint, all values are null diff --git a/src/component/mxgraph/BpmnRenderer.ts b/src/component/mxgraph/BpmnRenderer.ts index c841e2c049..62ffd674bd 100644 --- a/src/component/mxgraph/BpmnRenderer.ts +++ b/src/component/mxgraph/BpmnRenderer.ts @@ -25,7 +25,7 @@ import StyleComputer from './renderer/StyleComputer'; import type { BpmnGraph } from './BpmnGraph'; import type { FitOptions } from '../options'; import type { RenderedModel } from '../registry/bpmn-model-registry'; -import type { mxCell } from 'mxgraph'; +import type { Cell } from '@maxgraph/core'; /** * @internal @@ -60,7 +60,7 @@ export class BpmnRenderer { shapes.forEach(shape => this.insertShape(shape)); } - private getParent(bpmnElement: ShapeBpmnElement): mxCell { + private getParent(bpmnElement: ShapeBpmnElement): Cell { const bpmnElementParent = this.getCell(bpmnElement.parentId); return bpmnElementParent ?? this.graph.getDefaultParent(); } @@ -107,7 +107,7 @@ export class BpmnRenderer { }); } - private insertMessageFlowIconIfNeeded(edge: Edge, mxEdge: mxCell): void { + private insertMessageFlowIconIfNeeded(edge: Edge, mxEdge: Cell): void { if (edge.bpmnElement instanceof MessageFlow && edge.messageVisibleKind !== MessageVisibleKind.NONE) { const cell = this.graph.insertVertex(mxEdge, messageFowIconId(mxEdge.id), undefined, 0, 0, 20, 14, this.styleComputer.computeMessageFlowIconStyle(edge)); cell.geometry.relative = true; @@ -115,17 +115,17 @@ export class BpmnRenderer { } } - private insertWaypoints(waypoints: Waypoint[], mxEdge: mxCell): void { + private insertWaypoints(waypoints: Waypoint[], mxEdge: Cell): void { if (waypoints) { mxEdge.geometry.points = waypoints.map(waypoint => this.coordinatesTranslator.computeRelativeCoordinates(mxEdge.parent, new mxgraph.mxPoint(waypoint.x, waypoint.y))); } } - private getCell(id: string): mxCell { + private getCell(id: string): Cell { return this.graph.getModel().getCell(id); } - private insertVertex(parent: mxCell, id: string | null, value: string, bounds: Bounds, labelBounds: Bounds, style?: string): mxCell { + private insertVertex(parent: Cell, id: string | null, value: string, bounds: Bounds, labelBounds: Bounds, style?: string): Cell { const vertexCoordinates = this.coordinatesTranslator.computeRelativeCoordinates(parent, new mxgraph.mxPoint(bounds.x, bounds.y)); const cell = this.graph.insertVertex(parent, id, value, vertexCoordinates.x, vertexCoordinates.y, bounds.width, bounds.height, style); diff --git a/src/component/mxgraph/GraphCellUpdater.ts b/src/component/mxgraph/GraphCellUpdater.ts index ee4f69d2d1..036c9bed26 100644 --- a/src/component/mxgraph/GraphCellUpdater.ts +++ b/src/component/mxgraph/GraphCellUpdater.ts @@ -37,17 +37,17 @@ export default class GraphCellUpdater { updateAndRefreshCssClassesOfCell(bpmnElementId: string, cssClasses: string[]): void { this.updateAndRefreshCssClassesOfElement(bpmnElementId, cssClasses); - // special case: message flow icon is stored in a dedicated mxCell, so it must be kept in sync + // special case: message flow icon is stored in a dedicated Cell, so it must be kept in sync this.updateAndRefreshCssClassesOfElement(messageFowIconId(bpmnElementId), cssClasses); } private updateAndRefreshCssClassesOfElement(elementId: string, cssClasses: string[]): void { - const mxCell = this.graph.getModel().getCell(elementId); - if (!mxCell) { + const cell = this.graph.getModel().getCell(elementId); + if (!cell) { return; } const view = this.graph.getView(); - const state = view.getState(mxCell); + const state = view.getState(cell); state.style[BpmnStyleIdentifier.EXTRA_CSS_CLASSES] = cssClasses; state.shape.redraw(); // Ensure that label classes are also updated. When there is no label, state.text is null @@ -55,21 +55,21 @@ export default class GraphCellUpdater { } addOverlays(bpmnElementId: string, overlays: Overlay | Overlay[]): void { - const mxCell = this.graph.getModel().getCell(bpmnElementId); - if (!mxCell) { + const cell = this.graph.getModel().getCell(bpmnElementId); + if (!cell) { return; } ensureIsArray(overlays).forEach(overlay => { const bpmnOverlay = new MxGraphCustomOverlay(overlay.label, this.overlayConverter.convert(overlay)); - this.graph.addCellOverlay(mxCell, bpmnOverlay); + this.graph.addCellOverlay(cell, bpmnOverlay); }); } removeAllOverlays(bpmnElementId: string): void { - const mxCell = this.graph.getModel().getCell(bpmnElementId); - if (!mxCell) { + const cell = this.graph.getModel().getCell(bpmnElementId); + if (!cell) { return; } - this.graph.removeCellOverlays(mxCell); + this.graph.removeCellOverlays(cell); } } diff --git a/src/component/mxgraph/GraphConfigurator.ts b/src/component/mxgraph/GraphConfigurator.ts index fc14d4b9aa..743aa8b8d3 100644 --- a/src/component/mxgraph/GraphConfigurator.ts +++ b/src/component/mxgraph/GraphConfigurator.ts @@ -56,7 +56,7 @@ export default class GraphConfigurator { this.graph.setConstrainChildren(false); this.graph.setExtendParents(false); - // Disable folding for container mxCell (pool, lane, sub process, call activity) because we don't need it. + // Disable folding for container Cell (pool, lane, sub process, call activity) because we don't need it. // This also prevents requesting unavailable images (see #185) as we don't override BpmnMxGraph folding default images. this.graph.foldingEnabled = false; } diff --git a/src/component/mxgraph/config/MarkerConfigurator.ts b/src/component/mxgraph/config/MarkerConfigurator.ts index 4093249f78..8d65ea8c26 100644 --- a/src/component/mxgraph/config/MarkerConfigurator.ts +++ b/src/component/mxgraph/config/MarkerConfigurator.ts @@ -15,7 +15,8 @@ */ import { MarkerIdentifier } from '../style'; -import type { mxAbstractCanvas2D, mxCell, mxPoint, mxShape } from 'mxgraph'; +import type { mxAbstractCanvas2D, mxPoint, mxShape } from 'mxgraph'; +import type { Cell } from '@maxgraph/core'; /** * @internal @@ -38,7 +39,7 @@ export default class MarkerConfigurator { unitX: number, unitY: number, size: number, - _source: mxCell, + _source: Cell, strokewidth: number, ): (() => void) => { const nx = unitX * (size + strokewidth + 4); diff --git a/src/component/mxgraph/config/ShapeConfigurator.ts b/src/component/mxgraph/config/ShapeConfigurator.ts index 6210efe28e..f955cd8411 100644 --- a/src/component/mxgraph/config/ShapeConfigurator.ts +++ b/src/component/mxgraph/config/ShapeConfigurator.ts @@ -14,7 +14,9 @@ * limitations under the License. */ -import type { mxCellState, mxImageShape, mxShape } from 'mxgraph'; +import type { mxImageShape, mxShape } from 'mxgraph'; +import type { CellState } from '@maxgraph/core'; +import { CellRenderer } from '@maxgraph/core'; import { ShapeBpmnElementKind } from '../../../model/bpmn/internal'; import { EndEventShape, EventShape, IntermediateEventShape, ThrowIntermediateEventShape } from '../shape/event-shapes'; import { ComplexGatewayShape, EventBasedGatewayShape, ExclusiveGatewayShape, InclusiveGatewayShape, ParallelGatewayShape } from '../shape/gateway-shapes'; @@ -51,35 +53,35 @@ export default class ShapeConfigurator { private registerShapes(): void { // events - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.EVENT_END, EndEventShape); - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.EVENT_START, EventShape); - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.EVENT_INTERMEDIATE_THROW, ThrowIntermediateEventShape); - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.EVENT_INTERMEDIATE_CATCH, IntermediateEventShape); - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.EVENT_BOUNDARY, IntermediateEventShape); + CellRenderer.registerShape(ShapeBpmnElementKind.EVENT_END, EndEventShape); + CellRenderer.registerShape(ShapeBpmnElementKind.EVENT_START, EventShape); + CellRenderer.registerShape(ShapeBpmnElementKind.EVENT_INTERMEDIATE_THROW, ThrowIntermediateEventShape); + CellRenderer.registerShape(ShapeBpmnElementKind.EVENT_INTERMEDIATE_CATCH, IntermediateEventShape); + CellRenderer.registerShape(ShapeBpmnElementKind.EVENT_BOUNDARY, IntermediateEventShape); // gateways - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.GATEWAY_COMPLEX, ComplexGatewayShape); - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.GATEWAY_EVENT_BASED, EventBasedGatewayShape); - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.GATEWAY_EXCLUSIVE, ExclusiveGatewayShape); - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.GATEWAY_INCLUSIVE, InclusiveGatewayShape); - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.GATEWAY_PARALLEL, ParallelGatewayShape); + CellRenderer.registerShape(ShapeBpmnElementKind.GATEWAY_COMPLEX, ComplexGatewayShape); + CellRenderer.registerShape(ShapeBpmnElementKind.GATEWAY_EVENT_BASED, EventBasedGatewayShape); + CellRenderer.registerShape(ShapeBpmnElementKind.GATEWAY_EXCLUSIVE, ExclusiveGatewayShape); + CellRenderer.registerShape(ShapeBpmnElementKind.GATEWAY_INCLUSIVE, InclusiveGatewayShape); + CellRenderer.registerShape(ShapeBpmnElementKind.GATEWAY_PARALLEL, ParallelGatewayShape); // activities - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.SUB_PROCESS, SubProcessShape); - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.CALL_ACTIVITY, CallActivityShape); + CellRenderer.registerShape(ShapeBpmnElementKind.SUB_PROCESS, SubProcessShape); + CellRenderer.registerShape(ShapeBpmnElementKind.CALL_ACTIVITY, CallActivityShape); // tasks - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.TASK, TaskShape); - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.TASK_SERVICE, ServiceTaskShape); - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.TASK_USER, UserTaskShape); - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.TASK_RECEIVE, ReceiveTaskShape); - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.TASK_SEND, SendTaskShape); - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.TASK_MANUAL, ManualTaskShape); - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.TASK_SCRIPT, ScriptTaskShape); - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.TASK_BUSINESS_RULE, BusinessRuleTaskShape); + CellRenderer.registerShape(ShapeBpmnElementKind.TASK, TaskShape); + CellRenderer.registerShape(ShapeBpmnElementKind.TASK_SERVICE, ServiceTaskShape); + CellRenderer.registerShape(ShapeBpmnElementKind.TASK_USER, UserTaskShape); + CellRenderer.registerShape(ShapeBpmnElementKind.TASK_RECEIVE, ReceiveTaskShape); + CellRenderer.registerShape(ShapeBpmnElementKind.TASK_SEND, SendTaskShape); + CellRenderer.registerShape(ShapeBpmnElementKind.TASK_MANUAL, ManualTaskShape); + CellRenderer.registerShape(ShapeBpmnElementKind.TASK_SCRIPT, ScriptTaskShape); + CellRenderer.registerShape(ShapeBpmnElementKind.TASK_BUSINESS_RULE, BusinessRuleTaskShape); // artifacts - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.TEXT_ANNOTATION, TextAnnotationShape); + CellRenderer.registerShape(ShapeBpmnElementKind.TEXT_ANNOTATION, TextAnnotationShape); // shapes for flows - mxgraph.mxCellRenderer.registerShape(BpmnStyleIdentifier.EDGE, BpmnConnector); - mxgraph.mxCellRenderer.registerShape(BpmnStyleIdentifier.MESSAGE_FLOW_ICON, MessageFlowIconShape); + CellRenderer.registerShape(BpmnStyleIdentifier.EDGE, BpmnConnector); + CellRenderer.registerShape(BpmnStyleIdentifier.MESSAGE_FLOW_ICON, MessageFlowIconShape); } private initMxSvgCanvasPrototype(): void { @@ -174,7 +176,7 @@ export default class ShapeConfigurator { } initMxCellRendererCreateCellOverlays(): void { - mxgraph.mxCellRenderer.prototype.createCellOverlays = function (state: mxCellState) { + CellRenderer.prototype.createCellOverlays = function (state: CellState) { const graph = state.view.graph; const overlays = graph.getCellOverlays(state.cell); let dict = null; diff --git a/src/component/mxgraph/overlay/custom-overlay.ts b/src/component/mxgraph/overlay/custom-overlay.ts index af14487e80..0b651ad639 100644 --- a/src/component/mxgraph/overlay/custom-overlay.ts +++ b/src/component/mxgraph/overlay/custom-overlay.ts @@ -13,7 +13,9 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import type { mxCellState, mxPoint, mxRectangle } from 'mxgraph'; +import type { mxPoint, mxRectangle } from 'mxgraph'; +import type { CellState } from '@maxgraph/core'; +import { CellOverlay } from '@maxgraph/core'; import type { OverlayStyle } from '../../registry'; export type VerticalAlignType = 'bottom' | 'middle' | 'top'; @@ -31,7 +33,7 @@ export interface MxGraphCustomOverlayPosition { export type MxGraphCustomOverlayStyle = Required; -export class MxGraphCustomOverlay extends mxgraph.mxCellOverlay { +export class MxGraphCustomOverlay extends CellOverlay { readonly style: MxGraphCustomOverlayStyle; constructor(public label: string, options: MxGraphCustomOverlayOptions) { @@ -39,8 +41,8 @@ export class MxGraphCustomOverlay extends mxgraph.mxCellOverlay { this.style = options.style; } - // Based on original method from mxCellOverlay (mxCellOverlay.prototype.getBounds) - override getBounds(state: mxCellState): mxRectangle { + // Based on original method from CellOverlay (CellOverlay.prototype.getBounds) + override getBounds(state: CellState): mxRectangle { const isEdge = state.view.graph.getModel().isEdge(state.cell); const s = state.view.scale; let pt; @@ -81,7 +83,7 @@ export class MxGraphCustomOverlay extends mxgraph.mxCellOverlay { ); } - private computeEdgeBounds(state: mxCellState): mxPoint { + private computeEdgeBounds(state: CellState): mxPoint { const pts = state.absolutePoints; // 1st point for start position if (this.align == mxgraph.mxConstants.ALIGN_LEFT) { diff --git a/src/component/mxgraph/renderer/CoordinatesTranslator.ts b/src/component/mxgraph/renderer/CoordinatesTranslator.ts index 21eb996500..7135eba755 100644 --- a/src/component/mxgraph/renderer/CoordinatesTranslator.ts +++ b/src/component/mxgraph/renderer/CoordinatesTranslator.ts @@ -15,7 +15,8 @@ */ import type { BpmnGraph } from '../BpmnGraph'; -import type { mxCell, mxPoint } from 'mxgraph'; +import type { mxPoint } from 'mxgraph'; +import type { Cell } from '@maxgraph/core'; /** * @internal @@ -28,7 +29,7 @@ export default class CoordinatesTranslator { * @param parent the cell to use for the new coordinate referential * @param absoluteCoordinate */ - computeRelativeCoordinates(parent: mxCell, absoluteCoordinate: mxPoint): mxPoint { + computeRelativeCoordinates(parent: Cell, absoluteCoordinate: mxPoint): mxPoint { const translateForRoot = this.getTranslateForRoot(parent); const relativeX = absoluteCoordinate.x + translateForRoot.x; const relativeY = absoluteCoordinate.y + translateForRoot.y; @@ -41,7 +42,7 @@ export default class CoordinatesTranslator { // // This implementation is taken from the example described in the documentation of mxgraph#getTranslateForRoot (4.1.1) // The translation is generally negative - private getTranslateForRoot(cell: mxCell): mxPoint { + private getTranslateForRoot(cell: Cell): mxPoint { const model = this.graph.getModel(); const offset = new mxgraph.mxPoint(0, 0); @@ -58,12 +59,12 @@ export default class CoordinatesTranslator { } /** - * Compute the center of the provided `mxCell` for absolute geometry: this is the center point of a segment whose edges - * are the terminal points of the mxCell geometry points. Returns `undefined` if the 2 terminal points are not available. + * Compute the center of the provided `Cell` for absolute geometry: this is the center point of a segment whose edges + * are the terminal points of the Cell geometry points. Returns `undefined` if the 2 terminal points are not available. * - * The center coordinates are given in the same referential as the `mxCell`, so relative to its parent. + * The center coordinates are given in the same referential as the `Cell`, so relative to its parent. */ - computeEdgeCenter(mxEdge: mxCell): mxPoint { + computeEdgeCenter(mxEdge: Cell): mxPoint { const points: mxPoint[] = mxEdge.geometry.points; const p0 = points[0]; diff --git a/src/component/mxgraph/renderer/style-utils.ts b/src/component/mxgraph/renderer/style-utils.ts index 4b226b7fd3..9cbe6ab39b 100644 --- a/src/component/mxgraph/renderer/style-utils.ts +++ b/src/component/mxgraph/renderer/style-utils.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import type { mxCell } from 'mxgraph'; +import type { Cell, CellStyle } from '@maxgraph/core'; import { FlowKind, ShapeUtil } from '../../../model/bpmn/internal'; import { MessageVisibleKind } from '../../../model/bpmn/internal/edge/kinds'; import { BpmnStyleIdentifier } from '../style/identifiers'; @@ -22,22 +22,22 @@ import { BpmnStyleIdentifier } from '../style/identifiers'; /** * Compute the all class names associated to a cell in a hyphen case form. * - * @param cell the `mxCell` related to the BPMN element. + * @param cell the `Cell` related to the BPMN element. * @param isLabel the boolean that indicates if class must be computed for label. * @internal */ -export function computeAllBpmnClassNamesOfCell(cell: mxCell, isLabel: boolean): string[] { +export function computeAllBpmnClassNamesOfCell(cell: Cell, isLabel: boolean): string[] { return computeAllBpmnClassNames(cell.style, isLabel); } /** * Compute the all class names associated to a given bpmn element in a hyphen case form. * - * @param style the part of the mxCell style related to a {@link BpmnElementKind}. Message flow icon is a special case, as it is not related to `BpmnElementKind`. + * @param style the part of the Cell style related to a {@link BpmnElementKind}. Message flow icon is a special case, as it is not related to `BpmnElementKind`. * @param isLabel the boolean that indicates if class must be computed for label. * @internal exported for testing purpose */ -export function computeAllBpmnClassNames(style: string, isLabel: boolean): string[] { +export function computeAllBpmnClassNames(style: CellStyle, isLabel: boolean): string[] { const classes: string[] = []; const styleElements = style.split(';'); diff --git a/test/integration/helpers/model-expect.ts b/test/integration/helpers/model-expect.ts index 887b344118..7b0875afa9 100644 --- a/test/integration/helpers/model-expect.ts +++ b/test/integration/helpers/model-expect.ts @@ -50,7 +50,8 @@ import { toBeTask, toBeUserTask, } from '../matchers'; -import type { mxCell, mxGeometry } from 'mxgraph'; +import type { mxGeometry } from 'mxgraph'; +import type { Cell } from '@maxgraph/core'; import type { ExpectedOverlay } from '../matchers/matcher-utils'; import { getCell } from '../matchers/matcher-utils'; @@ -186,20 +187,20 @@ const defaultParent = bpmnVisualization.graph.getDefaultParent(); export const getDefaultParentId = (): string => defaultParent.id; -const expectElementsInModel = (parentId: string, elementsNumber: number, filter: (cell: mxCell) => boolean): void => { +const expectElementsInModel = (parentId: string, elementsNumber: number, filter: (cell: Cell) => boolean): void => { const model = bpmnVisualization.graph.model; const descendants = model.filterDescendants(filter, getCell(parentId)); expect(descendants).toHaveLength(elementsNumber); }; export const expectPoolsInModel = (pools: number): void => { - expectElementsInModel(undefined, pools, (cell: mxCell): boolean => { + expectElementsInModel(undefined, pools, (cell: Cell): boolean => { return cell.style?.startsWith(ShapeBpmnElementKind.POOL); }); }; export const expectShapesInModel = (parentId: string, shapesNumber: number): void => { - expectElementsInModel(parentId, shapesNumber, (cell: mxCell): boolean => { + expectElementsInModel(parentId, shapesNumber, (cell: Cell): boolean => { return cell.getId() != parentId && cell.isVertex(); }); }; @@ -209,7 +210,7 @@ export const expectTotalShapesInModel = (shapesNumber: number): void => { }; export const expectEdgesInModel = (parentId: string, edgesNumber: number): void => { - expectElementsInModel(parentId, edgesNumber, (cell: mxCell): boolean => { + expectElementsInModel(parentId, edgesNumber, (cell: Cell): boolean => { return cell.isEdge(); }); }; diff --git a/test/integration/matchers/matcher-utils.ts b/test/integration/matchers/matcher-utils.ts index 86f938c257..765d35c4cd 100644 --- a/test/integration/matchers/matcher-utils.ts +++ b/test/integration/matchers/matcher-utils.ts @@ -17,7 +17,8 @@ import type { ExpectedEdgeModelElement, ExpectedFont, ExpectedShapeModelElement import { bpmnVisualization } from '../helpers/model-expect'; import MatcherContext = jest.MatcherContext; import CustomMatcherResult = jest.CustomMatcherResult; -import type { mxCell, mxGeometry, StyleMap } from 'mxgraph'; +import type { mxGeometry, StyleMap } from 'mxgraph'; +import type { Cell } from '@maxgraph/core'; import type { MxGraphCustomOverlay, MxGraphCustomOverlayStyle } from '../../../src/component/mxgraph/overlay/custom-overlay'; export interface ExpectedStateStyle extends StyleMap { @@ -69,7 +70,7 @@ export function buildCellMatcher( expected: R, cellKind: string, buildExpectedCell: (received: string, expected: R) => ExpectedCell, - buildReceivedCell: (cell: mxCell) => ExpectedCell, + buildReceivedCell: (cell: Cell) => ExpectedCell, ): CustomMatcherResult { const options = { isNot: matcherContext.isNot, @@ -135,7 +136,7 @@ export function buildCommonExpectedStateStyle(expectedModel: ExpectedEdgeModelEl }; } -function buildReceivedStateStyle(cell: mxCell): ExpectedStateStyle { +function buildReceivedStateStyle(cell: Cell): ExpectedStateStyle { const stateStyle = bpmnVisualization.graph.getCellStyle(cell); const expectedStateStyle: ExpectedStateStyle = { verticalAlign: stateStyle.verticalAlign, @@ -160,7 +161,7 @@ function buildReceivedStateStyle(cell: mxCell): ExpectedStateStyle { return expectedStateStyle; } -export function buildReceivedCellWithCommonAttributes(cell: mxCell): ExpectedCell { +export function buildReceivedCellWithCommonAttributes(cell: Cell): ExpectedCell { const receivedCell: ExpectedCell = { value: cell.value, style: cell.style, @@ -186,7 +187,7 @@ export function buildReceivedCellWithCommonAttributes(cell: mxCell): ExpectedCel if (cell.edge) { const children = cell.children; if (children && children[0]) { - receivedCell.children = children.map((child: mxCell) => ({ + receivedCell.children = children.map((child: Cell) => ({ value: child.value, style: child.style, id: child.id, @@ -198,6 +199,6 @@ export function buildReceivedCellWithCommonAttributes(cell: mxCell): ExpectedCel return receivedCell; } -export function getCell(received: string): mxCell { +export function getCell(received: string): Cell { return bpmnVisualization.graph.model.getCell(received); } diff --git a/test/integration/matchers/toBeCell/index.ts b/test/integration/matchers/toBeCell/index.ts index 68cd4009e5..4683286848 100644 --- a/test/integration/matchers/toBeCell/index.ts +++ b/test/integration/matchers/toBeCell/index.ts @@ -19,7 +19,7 @@ import MatcherContext = jest.MatcherContext; import CustomMatcherResult = jest.CustomMatcherResult; import type { ExpectedCellWithGeometry } from '../../helpers/model-expect'; import { getDefaultParentId } from '../../helpers/model-expect'; -import type { mxCell } from 'mxgraph'; +import type { Cell } from '@maxgraph/core'; export function toBeCell(this: MatcherContext, received: string): CustomMatcherResult { const pass = getCell(received) ? true : false; @@ -29,7 +29,7 @@ export function toBeCell(this: MatcherContext, received: string): CustomMatcherR }; } -function buildReceivedCell(cell: mxCell): ExpectedCell { +function buildReceivedCell(cell: Cell): ExpectedCell { return { id: cell.id, parent: { id: cell.parent.id }, From 2fe67e2c6e064b397858f402e8693a6aba82eef1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Wed, 23 Nov 2022 16:38:32 +0100 Subject: [PATCH 010/132] Replace mxPoint by Point --- src/component/mxgraph/BpmnGraph.ts | 6 +++--- src/component/mxgraph/BpmnRenderer.ts | 13 +++++++------ .../mxgraph/config/MarkerConfigurator.ts | 6 +++--- .../mxgraph/overlay/custom-overlay.ts | 10 +++++----- .../mxgraph/renderer/CoordinatesTranslator.ts | 16 ++++++++-------- src/component/mxgraph/shape/edges.ts | 9 +++++---- .../mxGraph.model.bpmn.elements.test.ts | 19 ++++++++++--------- 7 files changed, 41 insertions(+), 38 deletions(-) diff --git a/src/component/mxgraph/BpmnGraph.ts b/src/component/mxgraph/BpmnGraph.ts index 61ebed6205..f9791cfdbe 100644 --- a/src/component/mxgraph/BpmnGraph.ts +++ b/src/component/mxgraph/BpmnGraph.ts @@ -19,8 +19,8 @@ import { FitType } from '../options'; import { ensurePositiveValue, ensureValidZoomConfiguration } from '../helpers/validators'; import debounce from 'lodash.debounce'; import throttle from 'lodash.throttle'; -import type { mxGraphView, mxPoint } from 'mxgraph'; -import type { CellState } from '@maxgraph/core'; +import type { mxGraphView } from 'mxgraph'; +import type { CellState, Point } from '@maxgraph/core'; import { eventUtils } from "@maxgraph/core"; const zoomFactorIn = 1.25; @@ -208,7 +208,7 @@ export class BpmnGraph extends mxgraph.mxGraph { } class BpmnGraphView extends mxgraph.mxGraphView { - override getFloatingTerminalPoint(edge: CellState, start: CellState, end: CellState, source: boolean): mxPoint { + override getFloatingTerminalPoint(edge: CellState, start: CellState, end: CellState, source: boolean): Point { // some values may be null: the first and the last values are null prior computing floating terminal points const edgePoints = edge.absolutePoints.filter(Boolean); // when there is no BPMN waypoint, all values are null diff --git a/src/component/mxgraph/BpmnRenderer.ts b/src/component/mxgraph/BpmnRenderer.ts index 62ffd674bd..1e39d0ecdb 100644 --- a/src/component/mxgraph/BpmnRenderer.ts +++ b/src/component/mxgraph/BpmnRenderer.ts @@ -26,6 +26,7 @@ import type { BpmnGraph } from './BpmnGraph'; import type { FitOptions } from '../options'; import type { RenderedModel } from '../registry/bpmn-model-registry'; import type { Cell } from '@maxgraph/core'; +import { Point } from '@maxgraph/core'; /** * @internal @@ -96,10 +97,10 @@ export class BpmnRenderer { if (edgeCenterCoordinate) { mxEdge.geometry.relative = false; - const labelBoundsRelativeCoordinateFromParent = this.coordinatesTranslator.computeRelativeCoordinates(mxEdge.parent, new mxgraph.mxPoint(labelBounds.x, labelBounds.y)); + const labelBoundsRelativeCoordinateFromParent = this.coordinatesTranslator.computeRelativeCoordinates(mxEdge.parent, new Point(labelBounds.x, labelBounds.y)); const relativeLabelX = labelBoundsRelativeCoordinateFromParent.x + labelBounds.width / 2 - edgeCenterCoordinate.x; const relativeLabelY = labelBoundsRelativeCoordinateFromParent.y - edgeCenterCoordinate.y; - mxEdge.geometry.offset = new mxgraph.mxPoint(relativeLabelX, relativeLabelY); + mxEdge.geometry.offset = new Point(relativeLabelX, relativeLabelY); } } @@ -111,13 +112,13 @@ export class BpmnRenderer { if (edge.bpmnElement instanceof MessageFlow && edge.messageVisibleKind !== MessageVisibleKind.NONE) { const cell = this.graph.insertVertex(mxEdge, messageFowIconId(mxEdge.id), undefined, 0, 0, 20, 14, this.styleComputer.computeMessageFlowIconStyle(edge)); cell.geometry.relative = true; - cell.geometry.offset = new mxgraph.mxPoint(-10, -7); + cell.geometry.offset = new Point(-10, -7); } } private insertWaypoints(waypoints: Waypoint[], mxEdge: Cell): void { if (waypoints) { - mxEdge.geometry.points = waypoints.map(waypoint => this.coordinatesTranslator.computeRelativeCoordinates(mxEdge.parent, new mxgraph.mxPoint(waypoint.x, waypoint.y))); + mxEdge.geometry.points = waypoints.map(waypoint => this.coordinatesTranslator.computeRelativeCoordinates(mxEdge.parent, new Point(waypoint.x, waypoint.y))); } } @@ -126,14 +127,14 @@ export class BpmnRenderer { } private insertVertex(parent: Cell, id: string | null, value: string, bounds: Bounds, labelBounds: Bounds, style?: string): Cell { - const vertexCoordinates = this.coordinatesTranslator.computeRelativeCoordinates(parent, new mxgraph.mxPoint(bounds.x, bounds.y)); + const vertexCoordinates = this.coordinatesTranslator.computeRelativeCoordinates(parent, new Point(bounds.x, bounds.y)); const cell = this.graph.insertVertex(parent, id, value, vertexCoordinates.x, vertexCoordinates.y, bounds.width, bounds.height, style); if (labelBounds) { // label coordinates are relative in the cell referential coordinates const relativeLabelX = labelBounds.x - bounds.x; const relativeLabelY = labelBounds.y - bounds.y; - cell.geometry.offset = new mxgraph.mxPoint(relativeLabelX, relativeLabelY); + cell.geometry.offset = new Point(relativeLabelX, relativeLabelY); } return cell; } diff --git a/src/component/mxgraph/config/MarkerConfigurator.ts b/src/component/mxgraph/config/MarkerConfigurator.ts index 8d65ea8c26..4ce4749e78 100644 --- a/src/component/mxgraph/config/MarkerConfigurator.ts +++ b/src/component/mxgraph/config/MarkerConfigurator.ts @@ -15,8 +15,8 @@ */ import { MarkerIdentifier } from '../style'; -import type { mxAbstractCanvas2D, mxPoint, mxShape } from 'mxgraph'; -import type { Cell } from '@maxgraph/core'; +import type { mxAbstractCanvas2D, mxShape } from 'mxgraph'; +import type { Cell, Point } from '@maxgraph/core'; /** * @internal @@ -35,7 +35,7 @@ export default class MarkerConfigurator { c: mxAbstractCanvas2D, _shape: mxShape, _type: string, - pe: mxPoint, + pe: Point, unitX: number, unitY: number, size: number, diff --git a/src/component/mxgraph/overlay/custom-overlay.ts b/src/component/mxgraph/overlay/custom-overlay.ts index 0b651ad639..3bf07331fd 100644 --- a/src/component/mxgraph/overlay/custom-overlay.ts +++ b/src/component/mxgraph/overlay/custom-overlay.ts @@ -13,9 +13,9 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import type { mxPoint, mxRectangle } from 'mxgraph'; +import type { mxRectangle } from 'mxgraph'; import type { CellState } from '@maxgraph/core'; -import { CellOverlay } from '@maxgraph/core'; +import { CellOverlay, Point } from '@maxgraph/core'; import type { OverlayStyle } from '../../registry'; export type VerticalAlignType = 'bottom' | 'middle' | 'top'; @@ -56,7 +56,7 @@ export class MxGraphCustomOverlay extends CellOverlay { if (isEdge) { pt = this.computeEdgeBounds(state); } else { - pt = new mxgraph.mxPoint(); + pt = new Point(); if (this.align == mxgraph.mxConstants.ALIGN_LEFT) { pt.x = state.x; @@ -83,7 +83,7 @@ export class MxGraphCustomOverlay extends CellOverlay { ); } - private computeEdgeBounds(state: CellState): mxPoint { + private computeEdgeBounds(state: CellState): Point { const pts = state.absolutePoints; // 1st point for start position if (this.align == mxgraph.mxConstants.ALIGN_LEFT) { @@ -97,7 +97,7 @@ export class MxGraphCustomOverlay extends CellOverlay { const idx = pts.length / 2; const p0 = pts[idx - 1]; const p1 = pts[idx]; - return new mxgraph.mxPoint(p0.x + (p1.x - p0.x) / 2, p0.y + (p1.y - p0.y) / 2); + return new Point(p0.x + (p1.x - p0.x) / 2, p0.y + (p1.y - p0.y) / 2); } } // last point for end position diff --git a/src/component/mxgraph/renderer/CoordinatesTranslator.ts b/src/component/mxgraph/renderer/CoordinatesTranslator.ts index 7135eba755..b23d8cc0f5 100644 --- a/src/component/mxgraph/renderer/CoordinatesTranslator.ts +++ b/src/component/mxgraph/renderer/CoordinatesTranslator.ts @@ -15,8 +15,8 @@ */ import type { BpmnGraph } from '../BpmnGraph'; -import type { mxPoint } from 'mxgraph'; import type { Cell } from '@maxgraph/core'; +import { Point } from '@maxgraph/core'; /** * @internal @@ -29,11 +29,11 @@ export default class CoordinatesTranslator { * @param parent the cell to use for the new coordinate referential * @param absoluteCoordinate */ - computeRelativeCoordinates(parent: Cell, absoluteCoordinate: mxPoint): mxPoint { + computeRelativeCoordinates(parent: Cell, absoluteCoordinate: Point): Point { const translateForRoot = this.getTranslateForRoot(parent); const relativeX = absoluteCoordinate.x + translateForRoot.x; const relativeY = absoluteCoordinate.y + translateForRoot.y; - return new mxgraph.mxPoint(relativeX, relativeY); + return new Point(relativeX, relativeY); } // Returns the translation to be applied to a cell whose mxGeometry x and y values are expressed with absolute coordinates @@ -42,9 +42,9 @@ export default class CoordinatesTranslator { // // This implementation is taken from the example described in the documentation of mxgraph#getTranslateForRoot (4.1.1) // The translation is generally negative - private getTranslateForRoot(cell: Cell): mxPoint { + private getTranslateForRoot(cell: Cell): Point { const model = this.graph.getModel(); - const offset = new mxgraph.mxPoint(0, 0); + const offset = new Point(0, 0); while (cell != null) { const geo = model.getGeometry(cell); @@ -64,8 +64,8 @@ export default class CoordinatesTranslator { * * The center coordinates are given in the same referential as the `Cell`, so relative to its parent. */ - computeEdgeCenter(mxEdge: Cell): mxPoint { - const points: mxPoint[] = mxEdge.geometry.points; + computeEdgeCenter(mxEdge: Cell): Point { + const points: Point[] = mxEdge.geometry.points; const p0 = points[0]; const pe = points[points.length - 1]; @@ -73,7 +73,7 @@ export default class CoordinatesTranslator { if (p0 != null && pe != null) { const dx = pe.x - p0.x; const dy = pe.y - p0.y; - return new mxgraph.mxPoint(p0.x + dx / 2, p0.y + dy / 2); + return new Point(p0.x + dx / 2, p0.y + dy / 2); } return undefined; diff --git a/src/component/mxgraph/shape/edges.ts b/src/component/mxgraph/shape/edges.ts index 583d4abad5..00f7eef61b 100644 --- a/src/component/mxgraph/shape/edges.ts +++ b/src/component/mxgraph/shape/edges.ts @@ -14,15 +14,16 @@ * limitations under the License. */ -import type { mxAbstractCanvas2D, mxPoint } from 'mxgraph'; +import type { mxAbstractCanvas2D } from 'mxgraph'; +import type { Point } from "@maxgraph/core"; import { BpmnStyleIdentifier } from '../style'; export class BpmnConnector extends mxgraph.mxConnector { - constructor(points: mxPoint[], stroke: string, strokewidth?: number) { + constructor(points: Point[], stroke: string, strokewidth?: number) { super(points, stroke, strokewidth); } - override paintEdgeShape(c: mxAbstractCanvas2D, pts: mxPoint[]): void { + override paintEdgeShape(c: mxAbstractCanvas2D, pts: Point[]): void { // The indirection via functions for markers is needed in // order to apply the offsets before painting the line and // paint the markers after painting the line. @@ -48,7 +49,7 @@ export class BpmnConnector extends mxgraph.mxConnector { // taken from mxPolyline, required as we cannot call mxPolyline method here (parent of the parent) // we only support non STYLE_CURVED here (is possible with parent class) - private paintEdgeLine(c: mxAbstractCanvas2D, pts: mxPoint[]): void { + private paintEdgeLine(c: mxAbstractCanvas2D, pts: Point[]): void { const prev = getPointerEventsValue(c); setPointerEventsValue(c, 'stroke'); this.paintLine(c, pts, this.isRounded); diff --git a/test/integration/mxGraph.model.bpmn.elements.test.ts b/test/integration/mxGraph.model.bpmn.elements.test.ts index fca37006f1..dd19d56673 100644 --- a/test/integration/mxGraph.model.bpmn.elements.test.ts +++ b/test/integration/mxGraph.model.bpmn.elements.test.ts @@ -14,6 +14,7 @@ * limitations under the License. */ +import { Point } from '@maxgraph/core'; import { MarkerIdentifier, MessageVisibleKind, @@ -1348,8 +1349,8 @@ describe('mxGraph model - BPMN elements', () => { const sequenceFlowMxGeometry = new mxgraph.mxGeometry(0, 0, 0, 0); sequenceFlowMxGeometry.points = [ - new mxgraph.mxPoint(190, 100), // absolute coordinates: parent x="160" y="80", cell x="350" y="180" - new mxgraph.mxPoint(350, 100), // absolute coordinates: parent x="160" y="80", cell x="510" y="180" + new Point(190, 100), // absolute coordinates: parent x="160" y="80", cell x="350" y="180" + new Point(350, 100), // absolute coordinates: parent x="160" y="80", cell x="510" y="180" ]; expect('SequenceFlow_id').toBeCellWithParentAndGeometry({ parentId: 'Participant_1', @@ -1358,8 +1359,8 @@ describe('mxGraph model - BPMN elements', () => { const messageFlowMxGeometry = new mxgraph.mxGeometry(0, 0, 0, 0); messageFlowMxGeometry.points = [ - new mxgraph.mxPoint(334, 260), // absolute coordinates: parent graph.getDefaultParent(), cell x="334" y="260" - new mxgraph.mxPoint(334, 342), // absolute coordinates: parent graph.getDefaultParent(), cell x="334" y="342" + new Point(334, 260), // absolute coordinates: parent graph.getDefaultParent(), cell x="334" y="260" + new Point(334, 342), // absolute coordinates: parent graph.getDefaultParent(), cell x="334" y="342" ]; expect('MessageFlow_1').toBeCellWithParentAndGeometry({ geometry: messageFlowMxGeometry, @@ -1406,8 +1407,8 @@ describe('mxGraph model - BPMN elements', () => { const sequenceFlowMxGeometry = new mxgraph.mxGeometry(0, 0, 0, 0); sequenceFlowMxGeometry.points = [ - new mxgraph.mxPoint(160, 100), // absolute coordinates: parent x="190" y="80", cell x="350" y="180" - new mxgraph.mxPoint(320, 100), // absolute coordinates: parent x="190" y="80", cell x="510" y="180" + new Point(160, 100), // absolute coordinates: parent x="190" y="80", cell x="350" y="180" + new Point(320, 100), // absolute coordinates: parent x="190" y="80", cell x="510" y="180" ]; expect('SequenceFlow_id').toBeCellWithParentAndGeometry({ parentId: 'Lane_1_1', @@ -1416,8 +1417,8 @@ describe('mxGraph model - BPMN elements', () => { const messageFlowMxGeometry = new mxgraph.mxGeometry(0, 0, 0, 0); messageFlowMxGeometry.points = [ - new mxgraph.mxPoint(334, 480), // absolute coordinates: parent graph.getDefaultParent(), cell x="334" y="480" - new mxgraph.mxPoint(334, 632), // absolute coordinates: parent graph.getDefaultParent(), cell x="334" y="632" + new Point(334, 480), // absolute coordinates: parent graph.getDefaultParent(), cell x="334" y="480" + new Point(334, 632), // absolute coordinates: parent graph.getDefaultParent(), cell x="334" y="632" ]; expect('MessageFlow_1').toBeCellWithParentAndGeometry({ geometry: messageFlowMxGeometry, @@ -1464,7 +1465,7 @@ describe('mxGraph model - BPMN elements', () => { }); const mxGeometry = new mxgraph.mxGeometry(412, 81, 36, 36); - mxGeometry.offset = new mxgraph.mxPoint(4.16e25, 1.24000000003e29); + mxGeometry.offset = new Point(4.16e25, 1.24000000003e29); expect('EndEvent_1').toBeCellWithParentAndGeometry({ parentId: defaultParentId, geometry: mxGeometry, From c3d25d8b2c560c20915c3f7774e379ed51fd3f6d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Wed, 23 Nov 2022 16:52:07 +0100 Subject: [PATCH 011/132] Replace mxShape by Shape --- docs/contributors/mxgraph-integration.md | 8 ++++---- src/component/mxgraph/config/MarkerConfigurator.ts | 6 +++--- src/component/mxgraph/config/ShapeConfigurator.ts | 14 +++++++------- src/component/mxgraph/shape/render/icon-painter.ts | 7 ++++--- 4 files changed, 18 insertions(+), 17 deletions(-) diff --git a/docs/contributors/mxgraph-integration.md b/docs/contributors/mxgraph-integration.md index ae4645c84e..143606e50a 100644 --- a/docs/contributors/mxgraph-integration.md +++ b/docs/contributors/mxgraph-integration.md @@ -41,11 +41,11 @@ Each BPMN Element is transformed into a `mxGraph` [Cell](https://jgraph.github.i At insertion, a style is passed to configure how the BPMN Element is rendered. The [style](https://jgraph.github.io/mxgraph/docs/js-api/files/view/mxStylesheet-js.html) (see also the [mxGraph manual](https://jgraph.github.io/mxgraph/docs/manual.html#3.1.3.1)) -is defined and registered in `StyleConfigurator`. In particular, it refers to the name of a [mxShape](https://jgraph.github.io/mxgraph/docs/js-api/files/shape/mxShape-js.html) +is defined and registered in `StyleConfigurator`. In particular, it refers to the name of a [Shape](https://jgraph.github.io/mxgraph/docs/js-api/files/shape/Shape-js.html) used for the rendering. -The `mxShape` can be a standard `mxGraph` class or a custom BPMN `mxShape` defined by the `bpmn-visualization`. The custom `mxShapes` are registered by `ShapeConfigurator` -which associates the `mxShape` name (used in style definition) with the `mxShape` class to be used. +The `Shape` can be a standard `mxGraph` class or a custom BPMN `Shape` defined by the `bpmn-visualization`. The custom `Shapes` are registered by `ShapeConfigurator` +which associates the `Shape` name (used in style definition) with the `Shape` class to be used. For more details, see [BPMN Support - How To](./bpmn-support-how-to.md). @@ -151,7 +151,7 @@ More details are available in [#955](https://github.com/process-analytics/bpmn-v ## Custom CSS classes added to svg node generated by mxGraph -In `ShapeConfigurator`, we customize the mxShape rendering code to add extra CSS classes depending on BPMN Element kinds. +In `ShapeConfigurator`, we customize the Shape rendering code to add extra CSS classes depending on BPMN Element kinds. It allows styling to be managed with external CSS classes and it is also used for element identification and selection. More details are available in [#942](https://github.com/process-analytics/bpmn-visualization-js/issues/942). diff --git a/src/component/mxgraph/config/MarkerConfigurator.ts b/src/component/mxgraph/config/MarkerConfigurator.ts index 4ce4749e78..282d6b1c63 100644 --- a/src/component/mxgraph/config/MarkerConfigurator.ts +++ b/src/component/mxgraph/config/MarkerConfigurator.ts @@ -15,8 +15,8 @@ */ import { MarkerIdentifier } from '../style'; -import type { mxAbstractCanvas2D, mxShape } from 'mxgraph'; -import type { Cell, Point } from '@maxgraph/core'; +import type { mxAbstractCanvas2D } from 'mxgraph'; +import type { Cell, Point, Shape } from '@maxgraph/core'; /** * @internal @@ -33,7 +33,7 @@ export default class MarkerConfigurator { // prefix parameter name - common practice to acknowledge the fact that some parameter is unused (e.g. in TypeScript compiler) const createMarker = ( c: mxAbstractCanvas2D, - _shape: mxShape, + _shape: Shape, _type: string, pe: Point, unitX: number, diff --git a/src/component/mxgraph/config/ShapeConfigurator.ts b/src/component/mxgraph/config/ShapeConfigurator.ts index f955cd8411..49ac0a43fc 100644 --- a/src/component/mxgraph/config/ShapeConfigurator.ts +++ b/src/component/mxgraph/config/ShapeConfigurator.ts @@ -14,9 +14,9 @@ * limitations under the License. */ -import type { mxImageShape, mxShape } from 'mxgraph'; +import type { mxImageShape } from 'mxgraph'; import type { CellState } from '@maxgraph/core'; -import { CellRenderer } from '@maxgraph/core'; +import { CellRenderer, Shape } from '@maxgraph/core'; import { ShapeBpmnElementKind } from '../../../model/bpmn/internal'; import { EndEventShape, EventShape, IntermediateEventShape, ThrowIntermediateEventShape } from '../shape/event-shapes'; import { ComplexGatewayShape, EventBasedGatewayShape, ExclusiveGatewayShape, InclusiveGatewayShape, ParallelGatewayShape } from '../shape/gateway-shapes'; @@ -131,9 +131,9 @@ export default class ShapeConfigurator { } private initMxShapePrototype(): void { - // The following is copied from the mxgraph mxShape implementation then converted to TypeScript and enriched for bpmn-visualization + // The following is copied from the mxgraph Shape implementation then converted to TypeScript and enriched for bpmn-visualization // It is needed for adding the custom attributes that permits identification of the BPMN elements in the DOM - mxgraph.mxShape.prototype.createSvgCanvas = function () { + Shape.prototype.createSvgCanvas = function () { const canvas = new mxgraph.mxSvgCanvas2D(this.node, false); canvas.strokeTolerance = this.pointerEvents ? this.svgStrokeTolerance : 0; canvas.pointerEventsValue = this.svgPointerEvents; @@ -182,7 +182,7 @@ export default class ShapeConfigurator { let dict = null; if (overlays != null) { - dict = new mxgraph.mxDictionary(); + dict = new mxgraph.mxDictionary(); for (const currentOverlay of overlays) { const shape = state.overlays != null ? state.overlays.remove(currentOverlay) : null; @@ -191,7 +191,7 @@ export default class ShapeConfigurator { continue; } - let overlayShape: mxShape; + let overlayShape: Shape; // START bpmn-visualization CUSTOMIZATION if (currentOverlay instanceof MxGraphCustomOverlay) { @@ -227,7 +227,7 @@ export default class ShapeConfigurator { // Removes unused if (state.overlays != null) { // prefix parameter name - common practice to acknowledge the fact that some parameter is unused (e.g. in TypeScript compiler) - state.overlays.visit(function (_id: string, shape: mxShape) { + state.overlays.visit(function (_id: string, shape: Shape) { shape.destroy(); }); } diff --git a/src/component/mxgraph/shape/render/icon-painter.ts b/src/component/mxgraph/shape/render/icon-painter.ts index 54aad42419..10fc76f959 100644 --- a/src/component/mxgraph/shape/render/icon-painter.ts +++ b/src/component/mxgraph/shape/render/icon-painter.ts @@ -17,7 +17,8 @@ import { BpmnCanvas } from './BpmnCanvas'; import { StyleUtils } from '../../style'; import type { IconStyleConfiguration, ShapeConfiguration, Size } from './render-types'; -import type { mxAbstractCanvas2D, mxShape } from 'mxgraph'; +import type { mxAbstractCanvas2D } from 'mxgraph'; +import type { Shape } from '@maxgraph/core'; /** * **WARN**: You may use it to customize the BPMN Theme as suggested in the examples. But be aware that the way the default BPMN theme can be modified is subject to change. @@ -52,12 +53,12 @@ export function buildPaintParameter({ y: number; width: number; height: number; - shape: mxShape; + shape: Shape; ratioFromParent?: number; isFilled?: boolean; iconStrokeWidth?: number; }): PaintParameter { - const shapeStrokeWidth = shape.strokewidth || StyleUtils.getStrokeWidth(shape.style); + const shapeStrokeWidth = shape.strokeWidth || StyleUtils.getStrokeWidth(shape.style); const fillColor = shape.fill || StyleUtils.getFillColor(shape.style); const strokeColor = shape.stroke || StyleUtils.getStrokeColor(shape.style); const margin = StyleUtils.getMargin(shape.style); From 0d087c65796f34d8a28c66389cfefe158f12609b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Wed, 23 Nov 2022 17:00:33 +0100 Subject: [PATCH 012/132] Replace mxAbstractCanvas2D by AbstractCanvas2D --- src/component/mxgraph/config/MarkerConfigurator.ts | 5 ++--- src/component/mxgraph/shape/activity-shapes.ts | 10 +++++----- src/component/mxgraph/shape/edges.ts | 11 +++++------ src/component/mxgraph/shape/event-shapes.ts | 4 ++-- src/component/mxgraph/shape/flow-shapes.ts | 5 +++-- src/component/mxgraph/shape/gateway-shapes.ts | 4 ++-- src/component/mxgraph/shape/render/BpmnCanvas.ts | 12 ++++++------ src/component/mxgraph/shape/render/icon-painter.ts | 9 ++++----- .../mxgraph/shape/text-annotation-shapes.ts | 6 +++--- 9 files changed, 32 insertions(+), 34 deletions(-) diff --git a/src/component/mxgraph/config/MarkerConfigurator.ts b/src/component/mxgraph/config/MarkerConfigurator.ts index 282d6b1c63..fe3897ce5a 100644 --- a/src/component/mxgraph/config/MarkerConfigurator.ts +++ b/src/component/mxgraph/config/MarkerConfigurator.ts @@ -15,8 +15,7 @@ */ import { MarkerIdentifier } from '../style'; -import type { mxAbstractCanvas2D } from 'mxgraph'; -import type { Cell, Point, Shape } from '@maxgraph/core'; +import type { Cell, Point, Shape, AbstractCanvas2D } from '@maxgraph/core'; /** * @internal @@ -32,7 +31,7 @@ export default class MarkerConfigurator { // prefix parameter name - common practice to acknowledge the fact that some parameter is unused (e.g. in TypeScript compiler) const createMarker = ( - c: mxAbstractCanvas2D, + c: AbstractCanvas2D, _shape: Shape, _type: string, pe: Point, diff --git a/src/component/mxgraph/shape/activity-shapes.ts b/src/component/mxgraph/shape/activity-shapes.ts index 8b73ef53f0..4e1a5adbc4 100644 --- a/src/component/mxgraph/shape/activity-shapes.ts +++ b/src/component/mxgraph/shape/activity-shapes.ts @@ -20,7 +20,7 @@ import { IconPainterProvider } from './render'; import { buildPaintParameter } from './render/icon-painter'; import { ShapeBpmnElementKind, ShapeBpmnMarkerKind, ShapeBpmnSubProcessKind } from '../../../model/bpmn/internal'; import { orderActivityMarkers } from './render/utils'; -import type { mxAbstractCanvas2D } from 'mxgraph'; +import type { AbstractCanvas2D } from '@maxgraph/core'; function paintEnvelopeIcon(paintParameter: PaintParameter, isFilled: boolean): void { IconPainterProvider.get().paintEnvelopeIcon({ @@ -43,7 +43,7 @@ export abstract class BaseActivityShape extends mxgraph.mxRectangleShape { this.isRounded = true; } - override paintForeground(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void { + override paintForeground(c: AbstractCanvas2D, x: number, y: number, w: number, h: number): void { super.paintForeground(c, x, y, w, h); // 0 is used for ratioParent as if we pass undefined to builder function the default 0.25 value will be used instead this.paintMarkerIcons(buildPaintParameter({ canvas: c, x, y, width: w, height: h, shape: this, ratioFromParent: 0, iconStrokeWidth: 1.5 })); @@ -97,7 +97,7 @@ export abstract class BaseActivityShape extends mxgraph.mxRectangleShape { } abstract class BaseTaskShape extends BaseActivityShape { - override paintForeground(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void { + override paintForeground(c: AbstractCanvas2D, x: number, y: number, w: number, h: number): void { super.paintForeground(c, x, y, w, h); this.paintTaskIcon(buildPaintParameter({ canvas: c, x, y, width: w, height: h, shape: this })); } @@ -206,7 +206,7 @@ export class ScriptTaskShape extends BaseTaskShape { * @internal */ export class CallActivityShape extends BaseActivityShape { - override paintForeground(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void { + override paintForeground(c: AbstractCanvas2D, x: number, y: number, w: number, h: number): void { super.paintForeground(c, x, y, w, h); const paintParameter = buildPaintParameter({ canvas: c, x, y, width: w, height: h, shape: this }); @@ -250,7 +250,7 @@ export class CallActivityShape extends BaseActivityShape { * @internal */ export class SubProcessShape extends BaseActivityShape { - override paintBackground(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void { + override paintBackground(c: AbstractCanvas2D, x: number, y: number, w: number, h: number): void { const subProcessKind = StyleUtils.getBpmnSubProcessKind(this.style); c.save(); // ensure we can later restore the configuration if (subProcessKind === ShapeBpmnSubProcessKind.EVENT) { diff --git a/src/component/mxgraph/shape/edges.ts b/src/component/mxgraph/shape/edges.ts index 00f7eef61b..58f6b370be 100644 --- a/src/component/mxgraph/shape/edges.ts +++ b/src/component/mxgraph/shape/edges.ts @@ -14,8 +14,7 @@ * limitations under the License. */ -import type { mxAbstractCanvas2D } from 'mxgraph'; -import type { Point } from "@maxgraph/core"; +import type { Point, AbstractCanvas2D } from "@maxgraph/core"; import { BpmnStyleIdentifier } from '../style'; export class BpmnConnector extends mxgraph.mxConnector { @@ -23,7 +22,7 @@ export class BpmnConnector extends mxgraph.mxConnector { super(points, stroke, strokewidth); } - override paintEdgeShape(c: mxAbstractCanvas2D, pts: Point[]): void { + override paintEdgeShape(c: AbstractCanvas2D, pts: Point[]): void { // The indirection via functions for markers is needed in // order to apply the offsets before painting the line and // paint the markers after painting the line. @@ -49,7 +48,7 @@ export class BpmnConnector extends mxgraph.mxConnector { // taken from mxPolyline, required as we cannot call mxPolyline method here (parent of the parent) // we only support non STYLE_CURVED here (is possible with parent class) - private paintEdgeLine(c: mxAbstractCanvas2D, pts: Point[]): void { + private paintEdgeLine(c: AbstractCanvas2D, pts: Point[]): void { const prev = getPointerEventsValue(c); setPointerEventsValue(c, 'stroke'); this.paintLine(c, pts, this.isRounded); @@ -57,11 +56,11 @@ export class BpmnConnector extends mxgraph.mxConnector { } } -function getPointerEventsValue(c: mxAbstractCanvas2D): string { +function getPointerEventsValue(c: AbstractCanvas2D): string { return c instanceof mxgraph.mxSvgCanvas2D ? c.pointerEventsValue : null; } -function setPointerEventsValue(c: mxAbstractCanvas2D, value: string): void { +function setPointerEventsValue(c: AbstractCanvas2D, value: string): void { if (c instanceof mxgraph.mxSvgCanvas2D) { c.pointerEventsValue = value; } diff --git a/src/component/mxgraph/shape/event-shapes.ts b/src/component/mxgraph/shape/event-shapes.ts index 9eeb4db56c..42a92c0ebb 100644 --- a/src/component/mxgraph/shape/event-shapes.ts +++ b/src/component/mxgraph/shape/event-shapes.ts @@ -19,7 +19,7 @@ import type { BpmnCanvas, PaintParameter } from './render'; import { IconPainterProvider } from './render'; import { buildPaintParameter } from './render/icon-painter'; import { StyleDefault, StyleUtils } from '../style'; -import type { mxAbstractCanvas2D } from 'mxgraph'; +import type { AbstractCanvas2D } from '@maxgraph/core'; /** * @internal @@ -84,7 +84,7 @@ export class EventShape extends mxgraph.mxEllipse { super(undefined, undefined, undefined); // the configuration is passed with the styles at runtime } - override paintVertexShape(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void { + override paintVertexShape(c: AbstractCanvas2D, x: number, y: number, w: number, h: number): void { const paintParameter = buildPaintParameter({ canvas: c, x, y, width: w, height: h, shape: this, isFilled: this.withFilledIcon }); EventShape.setDashedOuterShapePattern(paintParameter, StyleUtils.getBpmnIsInterrupting(this.style)); diff --git a/src/component/mxgraph/shape/flow-shapes.ts b/src/component/mxgraph/shape/flow-shapes.ts index 3b95730c88..0fc757db71 100644 --- a/src/component/mxgraph/shape/flow-shapes.ts +++ b/src/component/mxgraph/shape/flow-shapes.ts @@ -18,7 +18,8 @@ import { IconPainterProvider } from './render'; import { buildPaintParameter } from './render/icon-painter'; import { StyleUtils } from '../style'; import { MessageVisibleKind } from '../../../model/bpmn/internal/edge/kinds'; -import type { mxAbstractCanvas2D, mxRectangle } from 'mxgraph'; +import type { mxRectangle } from 'mxgraph'; +import type { AbstractCanvas2D } from '@maxgraph/core'; /** * @internal @@ -30,7 +31,7 @@ export class MessageFlowIconShape extends mxgraph.mxRectangleShape { super(bounds, fill, stroke, strokewidth); } - override paintVertexShape(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void { + override paintVertexShape(c: AbstractCanvas2D, x: number, y: number, w: number, h: number): void { const withFilledIcon = StyleUtils.getBpmnIsInitiating(this.style) === MessageVisibleKind.NON_INITIATING; const paintParameter = buildPaintParameter({ canvas: c, x, y, width: w, height: h, shape: this, ratioFromParent: 1, isFilled: withFilledIcon }); diff --git a/src/component/mxgraph/shape/gateway-shapes.ts b/src/component/mxgraph/shape/gateway-shapes.ts index 4f09c7343d..9f3e10ac3e 100644 --- a/src/component/mxgraph/shape/gateway-shapes.ts +++ b/src/component/mxgraph/shape/gateway-shapes.ts @@ -18,14 +18,14 @@ import { StyleDefault, StyleUtils } from '../style'; import type { PaintParameter } from './render'; import { IconPainterProvider } from './render'; import { buildPaintParameter } from './render/icon-painter'; -import type { mxAbstractCanvas2D } from 'mxgraph'; +import type { AbstractCanvas2D } from '@maxgraph/core'; abstract class GatewayShape extends mxgraph.mxRhombus { protected iconPainter = IconPainterProvider.get(); protected abstract paintInnerShape(paintParameter: PaintParameter): void; - override paintVertexShape(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void { + override paintVertexShape(c: AbstractCanvas2D, x: number, y: number, w: number, h: number): void { const paintParameter = buildPaintParameter({ canvas: c, x, y, width: w, height: h, shape: this }); this.paintOuterShape(paintParameter); this.paintInnerShape(paintParameter); diff --git a/src/component/mxgraph/shape/render/BpmnCanvas.ts b/src/component/mxgraph/shape/render/BpmnCanvas.ts index 70addc998d..25908249a0 100644 --- a/src/component/mxgraph/shape/render/BpmnCanvas.ts +++ b/src/component/mxgraph/shape/render/BpmnCanvas.ts @@ -16,7 +16,7 @@ import { StyleDefault } from '../../style'; import type { IconConfiguration, IconStyleConfiguration, ShapeConfiguration, Size } from './render-types'; -import type { mxAbstractCanvas2D } from 'mxgraph'; +import type { AbstractCanvas2D } from '@maxgraph/core'; /** * **WARN**: You may use it to customize the BPMN Theme as suggested in the examples. But be aware that the way the default BPMN theme can be modified is subject to change. @@ -25,7 +25,7 @@ import type { mxAbstractCanvas2D } from 'mxgraph'; * @experimental */ export interface BpmnCanvasConfiguration { - canvas: mxAbstractCanvas2D; + canvas: AbstractCanvas2D; shapeConfig: ShapeConfiguration; iconConfig: IconConfiguration; } @@ -52,9 +52,9 @@ export function computeScaledIconSize(initialIconSize: Size, iconStyleConfigurat } /** - * Wrapper of `mxAbstractCanvas2D` to simplify method calls when painting icons/markers of BPMN shapes. + * Wrapper of `AbstractCanvas2D` to simplify method calls when painting icons/markers of BPMN shapes. * - * It can scale dimensions passed to the method of the original `mxAbstractCanvas2D`. + * It can scale dimensions passed to the method of the original `AbstractCanvas2D`. * * **WARN**: You may use it to customize the BPMN Theme as suggested in the examples. But be aware that the way the default BPMN theme can be modified is subject to change. * @@ -79,7 +79,7 @@ export function computeScaledIconSize(initialIconSize: Size, iconStyleConfigurat * @experimental */ export class BpmnCanvas { - private canvas: mxAbstractCanvas2D; + private canvas: AbstractCanvas2D; private readonly iconOriginalSize: Size; private readonly scaleX: number; @@ -192,7 +192,7 @@ export class BpmnCanvas { this.canvas.setStrokeWidth(strokeWidth); } - arcTo(rx: number, ry: number, angle: number, largeArcFlag: number, sweepFlag: number, x: number, y: number): void { + arcTo(rx: number, ry: number, angle: number, largeArcFlag: boolean, sweepFlag: boolean, x: number, y: number): void { this.canvas.arcTo(rx * this.scaleX, ry * this.scaleY, angle, largeArcFlag, sweepFlag, this.computeScaleFromOriginX(x), this.computeScaleFromOriginY(y)); } diff --git a/src/component/mxgraph/shape/render/icon-painter.ts b/src/component/mxgraph/shape/render/icon-painter.ts index 10fc76f959..a666928d4e 100644 --- a/src/component/mxgraph/shape/render/icon-painter.ts +++ b/src/component/mxgraph/shape/render/icon-painter.ts @@ -17,8 +17,7 @@ import { BpmnCanvas } from './BpmnCanvas'; import { StyleUtils } from '../../style'; import type { IconStyleConfiguration, ShapeConfiguration, Size } from './render-types'; -import type { mxAbstractCanvas2D } from 'mxgraph'; -import type { Shape } from '@maxgraph/core'; +import type { Shape, AbstractCanvas2D } from '@maxgraph/core'; /** * **WARN**: You may use it to customize the BPMN Theme as suggested in the examples. But be aware that the way the default BPMN theme can be modified is subject to change. @@ -27,7 +26,7 @@ import type { Shape } from '@maxgraph/core'; * @experimental */ export interface PaintParameter { - canvas: mxAbstractCanvas2D; + canvas: AbstractCanvas2D; shapeConfig: ShapeConfiguration; iconStyleConfig: IconStyleConfiguration; ratioFromParent?: number; @@ -48,7 +47,7 @@ export function buildPaintParameter({ isFilled, iconStrokeWidth, }: { - canvas: mxAbstractCanvas2D; + canvas: AbstractCanvas2D; x: number; y: number; width: number; @@ -91,7 +90,7 @@ export class IconPainter { /** * Utility paint icon methods to easily instantiate a {@link BpmnCanvas} from a {@link PaintParameter}. * - * @param canvas mxgraph `mxAbstractCanvas2D` in charge of performing the paint operations. + * @param canvas mxgraph `AbstractCanvas2D` in charge of performing the paint operations. * @param ratioFromParent the actual size of the icon will be computed from the shape dimensions using this ratio. * @param setIconOriginFunct called function to set the origin of the icon. Generally, it calls a method of {@link BpmnCanvas}. * @param shapeConfig dimension and style of the shape where the icon is painted. diff --git a/src/component/mxgraph/shape/text-annotation-shapes.ts b/src/component/mxgraph/shape/text-annotation-shapes.ts index ca112b5c9f..d3b6438c53 100644 --- a/src/component/mxgraph/shape/text-annotation-shapes.ts +++ b/src/component/mxgraph/shape/text-annotation-shapes.ts @@ -15,13 +15,13 @@ */ import { StyleDefault } from '../style'; -import type { mxAbstractCanvas2D } from 'mxgraph'; +import type { AbstractCanvas2D } from '@maxgraph/core'; /** * @internal */ export class TextAnnotationShape extends mxgraph.mxRectangleShape { - override paintForeground(c: mxAbstractCanvas2D, x: number, y: number, _w: number, h: number): void { + override paintForeground(c: AbstractCanvas2D, x: number, y: number, _w: number, h: number): void { // paint sort of left square bracket shape - for text annotation c.begin(); c.moveTo(x + StyleDefault.TEXT_ANNOTATION_BORDER_LENGTH, y); @@ -31,7 +31,7 @@ export class TextAnnotationShape extends mxgraph.mxRectangleShape { c.stroke(); } - override paintBackground(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void { + override paintBackground(c: AbstractCanvas2D, x: number, y: number, w: number, h: number): void { c.save(); // ensure we can later restore the configuration c.setStrokeColor('none'); // we have a special stroke shape managed in 'paintForeground' super.paintBackground(c, x, y, w, h); From 817c11440541bbbee64f9dd1fc88f63a26173fe0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Wed, 23 Nov 2022 17:03:36 +0100 Subject: [PATCH 013/132] Replace mxRectangleShape by RectangleShape --- src/component/mxgraph/shape/activity-shapes.ts | 3 ++- src/component/mxgraph/shape/flow-shapes.ts | 3 ++- src/component/mxgraph/shape/text-annotation-shapes.ts | 3 ++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/component/mxgraph/shape/activity-shapes.ts b/src/component/mxgraph/shape/activity-shapes.ts index 4e1a5adbc4..5eb8a55e2d 100644 --- a/src/component/mxgraph/shape/activity-shapes.ts +++ b/src/component/mxgraph/shape/activity-shapes.ts @@ -21,6 +21,7 @@ import { buildPaintParameter } from './render/icon-painter'; import { ShapeBpmnElementKind, ShapeBpmnMarkerKind, ShapeBpmnSubProcessKind } from '../../../model/bpmn/internal'; import { orderActivityMarkers } from './render/utils'; import type { AbstractCanvas2D } from '@maxgraph/core'; +import { RectangleShape } from '@maxgraph/core'; function paintEnvelopeIcon(paintParameter: PaintParameter, isFilled: boolean): void { IconPainterProvider.get().paintEnvelopeIcon({ @@ -34,7 +35,7 @@ function paintEnvelopeIcon(paintParameter: PaintParameter, isFilled: boolean): v /** * @internal */ -export abstract class BaseActivityShape extends mxgraph.mxRectangleShape { +export abstract class BaseActivityShape extends RectangleShape { protected iconPainter = IconPainterProvider.get(); constructor() { diff --git a/src/component/mxgraph/shape/flow-shapes.ts b/src/component/mxgraph/shape/flow-shapes.ts index 0fc757db71..4ada2f93dc 100644 --- a/src/component/mxgraph/shape/flow-shapes.ts +++ b/src/component/mxgraph/shape/flow-shapes.ts @@ -20,11 +20,12 @@ import { StyleUtils } from '../style'; import { MessageVisibleKind } from '../../../model/bpmn/internal/edge/kinds'; import type { mxRectangle } from 'mxgraph'; import type { AbstractCanvas2D } from '@maxgraph/core'; +import { RectangleShape } from '@maxgraph/core'; /** * @internal */ -export class MessageFlowIconShape extends mxgraph.mxRectangleShape { +export class MessageFlowIconShape extends RectangleShape { protected iconPainter = IconPainterProvider.get(); constructor(bounds: mxRectangle, fill: string, stroke: string, strokewidth: number) { diff --git a/src/component/mxgraph/shape/text-annotation-shapes.ts b/src/component/mxgraph/shape/text-annotation-shapes.ts index d3b6438c53..d25ad25851 100644 --- a/src/component/mxgraph/shape/text-annotation-shapes.ts +++ b/src/component/mxgraph/shape/text-annotation-shapes.ts @@ -16,11 +16,12 @@ import { StyleDefault } from '../style'; import type { AbstractCanvas2D } from '@maxgraph/core'; +import { RectangleShape } from '@maxgraph/core'; /** * @internal */ -export class TextAnnotationShape extends mxgraph.mxRectangleShape { +export class TextAnnotationShape extends RectangleShape { override paintForeground(c: AbstractCanvas2D, x: number, y: number, _w: number, h: number): void { // paint sort of left square bracket shape - for text annotation c.begin(); From 540adbd07a700f735ca3838ffbae58f6a3b0802d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Wed, 23 Nov 2022 17:06:30 +0100 Subject: [PATCH 014/132] Replace mxRectangle by Rectangle --- src/component/mxgraph/config/ShapeConfigurator.ts | 6 +++--- src/component/mxgraph/overlay/custom-overlay.ts | 7 +++---- src/component/mxgraph/overlay/shapes.ts | 4 ++-- src/component/mxgraph/shape/flow-shapes.ts | 5 ++--- 4 files changed, 10 insertions(+), 12 deletions(-) diff --git a/src/component/mxgraph/config/ShapeConfigurator.ts b/src/component/mxgraph/config/ShapeConfigurator.ts index 49ac0a43fc..9eb97fc64a 100644 --- a/src/component/mxgraph/config/ShapeConfigurator.ts +++ b/src/component/mxgraph/config/ShapeConfigurator.ts @@ -16,7 +16,7 @@ import type { mxImageShape } from 'mxgraph'; import type { CellState } from '@maxgraph/core'; -import { CellRenderer, Shape } from '@maxgraph/core'; +import { CellRenderer, Shape, Rectangle } from '@maxgraph/core'; import { ShapeBpmnElementKind } from '../../../model/bpmn/internal'; import { EndEventShape, EventShape, IntermediateEventShape, ThrowIntermediateEventShape } from '../shape/event-shapes'; import { ComplexGatewayShape, EventBasedGatewayShape, ExclusiveGatewayShape, InclusiveGatewayShape, ParallelGatewayShape } from '../shape/gateway-shapes'; @@ -195,9 +195,9 @@ export default class ShapeConfigurator { // START bpmn-visualization CUSTOMIZATION if (currentOverlay instanceof MxGraphCustomOverlay) { - overlayShape = new OverlayBadgeShape(currentOverlay.label, new mxgraph.mxRectangle(0, 0, 0, 0), currentOverlay.style); + overlayShape = new OverlayBadgeShape(currentOverlay.label, new Rectangle(0, 0, 0, 0), currentOverlay.style); } else { - overlayShape = new mxgraph.mxImageShape(new mxgraph.mxRectangle(0, 0, 0, 0), currentOverlay.image.src); + overlayShape = new mxgraph.mxImageShape(new Rectangle(0, 0, 0, 0), currentOverlay.image.src); (overlayShape).preserveImageAspect = false; } // END bpmn-visualization CUSTOMIZATION diff --git a/src/component/mxgraph/overlay/custom-overlay.ts b/src/component/mxgraph/overlay/custom-overlay.ts index 3bf07331fd..552a35d960 100644 --- a/src/component/mxgraph/overlay/custom-overlay.ts +++ b/src/component/mxgraph/overlay/custom-overlay.ts @@ -13,9 +13,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import type { mxRectangle } from 'mxgraph'; import type { CellState } from '@maxgraph/core'; -import { CellOverlay, Point } from '@maxgraph/core'; +import { CellOverlay, Point, Rectangle } from '@maxgraph/core'; import type { OverlayStyle } from '../../registry'; export type VerticalAlignType = 'bottom' | 'middle' | 'top'; @@ -42,7 +41,7 @@ export class MxGraphCustomOverlay extends CellOverlay { } // Based on original method from CellOverlay (CellOverlay.prototype.getBounds) - override getBounds(state: CellState): mxRectangle { + override getBounds(state: CellState): Rectangle { const isEdge = state.view.graph.getModel().isEdge(state.cell); const s = state.view.scale; let pt; @@ -75,7 +74,7 @@ export class MxGraphCustomOverlay extends CellOverlay { } } - return new mxgraph.mxRectangle( + return new Rectangle( Math.round(pt.x - (w * this.defaultOverlap - this.offset.x) * s), Math.round(pt.y - (h * this.defaultOverlap - this.offset.y) * s), w * s, diff --git a/src/component/mxgraph/overlay/shapes.ts b/src/component/mxgraph/overlay/shapes.ts index 25978436e8..51ece3232a 100644 --- a/src/component/mxgraph/overlay/shapes.ts +++ b/src/component/mxgraph/overlay/shapes.ts @@ -13,11 +13,11 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import type { mxRectangle } from 'mxgraph'; +import type { Rectangle } from '@maxgraph/core'; import type { MxGraphCustomOverlayStyle } from './custom-overlay'; export class OverlayBadgeShape extends mxgraph.mxText { - constructor(value: string, bounds: mxRectangle, style: MxGraphCustomOverlayStyle) { + constructor(value: string, bounds: Rectangle, style: MxGraphCustomOverlayStyle) { super( value, bounds, diff --git a/src/component/mxgraph/shape/flow-shapes.ts b/src/component/mxgraph/shape/flow-shapes.ts index 4ada2f93dc..e462830546 100644 --- a/src/component/mxgraph/shape/flow-shapes.ts +++ b/src/component/mxgraph/shape/flow-shapes.ts @@ -18,8 +18,7 @@ import { IconPainterProvider } from './render'; import { buildPaintParameter } from './render/icon-painter'; import { StyleUtils } from '../style'; import { MessageVisibleKind } from '../../../model/bpmn/internal/edge/kinds'; -import type { mxRectangle } from 'mxgraph'; -import type { AbstractCanvas2D } from '@maxgraph/core'; +import type { AbstractCanvas2D, Rectangle } from '@maxgraph/core'; import { RectangleShape } from '@maxgraph/core'; /** @@ -28,7 +27,7 @@ import { RectangleShape } from '@maxgraph/core'; export class MessageFlowIconShape extends RectangleShape { protected iconPainter = IconPainterProvider.get(); - constructor(bounds: mxRectangle, fill: string, stroke: string, strokewidth: number) { + constructor(bounds: Rectangle, fill: string, stroke: string, strokewidth: number) { super(bounds, fill, stroke, strokewidth); } From 9670fb3043f6c579ee6e2bc01fb841eba7d13bf7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Wed, 23 Nov 2022 17:16:07 +0100 Subject: [PATCH 015/132] Replace mxImageShape by ImageShape --- src/component/mxgraph/config/ShapeConfigurator.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/component/mxgraph/config/ShapeConfigurator.ts b/src/component/mxgraph/config/ShapeConfigurator.ts index 9eb97fc64a..e11610dd39 100644 --- a/src/component/mxgraph/config/ShapeConfigurator.ts +++ b/src/component/mxgraph/config/ShapeConfigurator.ts @@ -14,9 +14,8 @@ * limitations under the License. */ -import type { mxImageShape } from 'mxgraph'; import type { CellState } from '@maxgraph/core'; -import { CellRenderer, Shape, Rectangle } from '@maxgraph/core'; +import { CellRenderer, Shape, Rectangle, ImageShape } from '@maxgraph/core'; import { ShapeBpmnElementKind } from '../../../model/bpmn/internal'; import { EndEventShape, EventShape, IntermediateEventShape, ThrowIntermediateEventShape } from '../shape/event-shapes'; import { ComplexGatewayShape, EventBasedGatewayShape, ExclusiveGatewayShape, InclusiveGatewayShape, ParallelGatewayShape } from '../shape/gateway-shapes'; @@ -197,8 +196,8 @@ export default class ShapeConfigurator { if (currentOverlay instanceof MxGraphCustomOverlay) { overlayShape = new OverlayBadgeShape(currentOverlay.label, new Rectangle(0, 0, 0, 0), currentOverlay.style); } else { - overlayShape = new mxgraph.mxImageShape(new Rectangle(0, 0, 0, 0), currentOverlay.image.src); - (overlayShape).preserveImageAspect = false; + overlayShape = new ImageShape(new Rectangle(0, 0, 0, 0), currentOverlay.image.src); + (overlayShape).preserveImageAspect = false; } // END bpmn-visualization CUSTOMIZATION @@ -206,7 +205,7 @@ export default class ShapeConfigurator { overlayShape.overlay = currentOverlay; // The 'initializeOverlay' signature forces us to hardly cast the overlayShape - this.initializeOverlay(state, overlayShape); + this.initializeOverlay(state, overlayShape); this.installCellOverlayListeners(state, currentOverlay, overlayShape); if (currentOverlay.cursor != null) { From 80b3c9920bca8e900c9ce377922f7e74559737a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Thu, 24 Nov 2022 11:08:45 +0100 Subject: [PATCH 016/132] Replace mxDictionary by Dictionary --- src/component/mxgraph/config/ShapeConfigurator.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/component/mxgraph/config/ShapeConfigurator.ts b/src/component/mxgraph/config/ShapeConfigurator.ts index e11610dd39..4933838f55 100644 --- a/src/component/mxgraph/config/ShapeConfigurator.ts +++ b/src/component/mxgraph/config/ShapeConfigurator.ts @@ -14,8 +14,8 @@ * limitations under the License. */ -import type { CellState } from '@maxgraph/core'; -import { CellRenderer, Shape, Rectangle, ImageShape } from '@maxgraph/core'; +import type { CellState, CellOverlay } from '@maxgraph/core'; +import { CellRenderer, Shape, Rectangle, ImageShape, Dictionary } from '@maxgraph/core'; import { ShapeBpmnElementKind } from '../../../model/bpmn/internal'; import { EndEventShape, EventShape, IntermediateEventShape, ThrowIntermediateEventShape } from '../shape/event-shapes'; import { ComplexGatewayShape, EventBasedGatewayShape, ExclusiveGatewayShape, InclusiveGatewayShape, ParallelGatewayShape } from '../shape/gateway-shapes'; @@ -181,7 +181,7 @@ export default class ShapeConfigurator { let dict = null; if (overlays != null) { - dict = new mxgraph.mxDictionary(); + dict = new Dictionary(); for (const currentOverlay of overlays) { const shape = state.overlays != null ? state.overlays.remove(currentOverlay) : null; From da761e87fdd69392d6fe689e353facaaf74b6a87 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Thu, 24 Nov 2022 11:16:16 +0100 Subject: [PATCH 017/132] - Replace mxSvgCanvas2D by SvgCanvas2D - Replace mxSvgCanvas2D.format:(value: string) => number by SvgCanvas2D.format:(value: number) => number --- dev/ts/component/SvgExporter.ts | 21 +++--- .../mxgraph/config/ShapeConfigurator.ts | 10 +-- src/component/mxgraph/shape/edges.ts | 5 +- .../mxgraph/shape/render/icon-painter.ts | 72 +++++++++---------- 4 files changed, 55 insertions(+), 53 deletions(-) diff --git a/dev/ts/component/SvgExporter.ts b/dev/ts/component/SvgExporter.ts index 29d0effa53..219d301a00 100644 --- a/dev/ts/component/SvgExporter.ts +++ b/dev/ts/component/SvgExporter.ts @@ -14,8 +14,9 @@ * limitations under the License. */ -import type { mxGraph, mxSvgCanvas2D } from 'mxgraph'; -import { Client } from '@maxgraph/core'; +import type { mxGraph } from 'mxgraph'; +import type { AlignValue, VAlignValue, OverflowValue, TextDirectionValue } from '@maxgraph/core'; +import { Client, SvgCanvas2D } from '@maxgraph/core'; interface SvgExportOptions { scale: number; @@ -100,7 +101,7 @@ ${svgAsString} return svgDoc; } - createSvgCanvas(node: Element): mxSvgCanvas2D { + createSvgCanvas(node: Element): SvgCanvas2D { const canvas = new CanvasForExport(node); // from the draw.io code, may not be needed here canvas.pointerEvents = true; @@ -108,7 +109,7 @@ ${svgAsString} } } -class CanvasForExport extends mxgraph.mxSvgCanvas2D { +class CanvasForExport extends SvgCanvas2D { // Convert HTML entities private htmlConverter = document.createElement('div'); @@ -147,13 +148,13 @@ class CanvasForExport extends mxgraph.mxSvgCanvas2D { w: number, h: number, str: string, - align: string, - valign: string, - wrap: string, - overflow: string, - clip: string, + align: AlignValue, + valign: VAlignValue, + wrap: boolean, + overflow: OverflowValue, + clip: boolean, rotation: number, - dir: string, + dir: TextDirectionValue, ): void { str = this.computeTruncatedText(str, w); super.plainText(x, y, w, h, str, align, valign, wrap, overflow, clip, rotation, dir); diff --git a/src/component/mxgraph/config/ShapeConfigurator.ts b/src/component/mxgraph/config/ShapeConfigurator.ts index 4933838f55..23688f9753 100644 --- a/src/component/mxgraph/config/ShapeConfigurator.ts +++ b/src/component/mxgraph/config/ShapeConfigurator.ts @@ -15,7 +15,7 @@ */ import type { CellState, CellOverlay } from '@maxgraph/core'; -import { CellRenderer, Shape, Rectangle, ImageShape, Dictionary } from '@maxgraph/core'; +import { CellRenderer, Shape, Rectangle, ImageShape, Dictionary, SvgCanvas2D } from '@maxgraph/core'; import { ShapeBpmnElementKind } from '../../../model/bpmn/internal'; import { EndEventShape, EventShape, IntermediateEventShape, ThrowIntermediateEventShape } from '../shape/event-shapes'; import { ComplexGatewayShape, EventBasedGatewayShape, ExclusiveGatewayShape, InclusiveGatewayShape, ParallelGatewayShape } from '../shape/gateway-shapes'; @@ -86,7 +86,7 @@ export default class ShapeConfigurator { private initMxSvgCanvasPrototype(): void { // getTextCss is only used when creating foreignObject for label, so there is no impact on svg text that we use for Overlays. // Analysis done for mxgraph@4.1.1, still apply to mxgraph@4.2.2 - mxgraph.mxSvgCanvas2D.prototype.getTextCss = function () { + SvgCanvas2D.prototype.getTextCss = function () { const s = this.state; const lh = mxgraph.mxConstants.ABSOLUTE_LINE_HEIGHT ? s.fontSize * mxgraph.mxConstants.LINE_HEIGHT + 'px' : mxgraph.mxConstants.LINE_HEIGHT * this.lineHeightCorrection; let css = @@ -133,7 +133,7 @@ export default class ShapeConfigurator { // The following is copied from the mxgraph Shape implementation then converted to TypeScript and enriched for bpmn-visualization // It is needed for adding the custom attributes that permits identification of the BPMN elements in the DOM Shape.prototype.createSvgCanvas = function () { - const canvas = new mxgraph.mxSvgCanvas2D(this.node, false); + const canvas = new SvgCanvas2D(this.node, false); canvas.strokeTolerance = this.pointerEvents ? this.svgStrokeTolerance : 0; canvas.pointerEventsValue = this.svgPointerEvents; const off = this.getSvgScreenOffset(); @@ -165,8 +165,8 @@ export default class ShapeConfigurator { if (!this.antiAlias) { // Rounds all numbers in the SVG output to integers - canvas.format = function (value: string) { - return Math.round(parseFloat(value)); + canvas.format = (value: number): number => { + return Math.round(value); }; } diff --git a/src/component/mxgraph/shape/edges.ts b/src/component/mxgraph/shape/edges.ts index 58f6b370be..b982d514d7 100644 --- a/src/component/mxgraph/shape/edges.ts +++ b/src/component/mxgraph/shape/edges.ts @@ -15,6 +15,7 @@ */ import type { Point, AbstractCanvas2D } from "@maxgraph/core"; +import { SvgCanvas2D } from '@maxgraph/core'; import { BpmnStyleIdentifier } from '../style'; export class BpmnConnector extends mxgraph.mxConnector { @@ -57,11 +58,11 @@ export class BpmnConnector extends mxgraph.mxConnector { } function getPointerEventsValue(c: AbstractCanvas2D): string { - return c instanceof mxgraph.mxSvgCanvas2D ? c.pointerEventsValue : null; + return c instanceof SvgCanvas2D ? c.pointerEventsValue : null; } function setPointerEventsValue(c: AbstractCanvas2D, value: string): void { - if (c instanceof mxgraph.mxSvgCanvas2D) { + if (c instanceof SvgCanvas2D) { c.pointerEventsValue = value; } } diff --git a/src/component/mxgraph/shape/render/icon-painter.ts b/src/component/mxgraph/shape/render/icon-painter.ts index a666928d4e..f82e88966d 100644 --- a/src/component/mxgraph/shape/render/icon-painter.ts +++ b/src/component/mxgraph/shape/render/icon-painter.ts @@ -409,64 +409,64 @@ export class IconPainter { canvas.begin(); canvas.moveTo(124.31, 150.29); canvas.lineTo(99.66, 141.03); - canvas.arcTo(6.43, 6.43, 0, 0, 1, 95.51, 135.03); + canvas.arcTo(6.43, 6.43, 0, false, true, 95.51, 135.03); canvas.lineTo(95.51, 130.66); - canvas.arcTo(47.75, 47.75, 0, 0, 0, 119.51, 89.25); + canvas.arcTo(47.75, 47.75, 0, false, false, 119.51, 89.25); canvas.lineTo(119.51, 71.25); - canvas.arcTo(47.62, 47.62, 0, 0, 0, 101.18, 33.64); - canvas.arcTo(29.35, 29.35, 0, 0, 0, 101.52, 29.14); - canvas.arcTo(29.68, 29.68, 0, 0, 0, 42.17, 29.14); - canvas.arcTo(29.24, 29.24, 0, 0, 0, 42.53, 33.63); - canvas.arcTo(47.65, 47.65, 0, 0, 0, 24.14, 71.23); + canvas.arcTo(47.62, 47.62, 0, false, false, 101.18, 33.64); + canvas.arcTo(29.35, 29.35, 0, false, false, 101.52, 29.14); + canvas.arcTo(29.68, 29.68, 0, false, false, 42.17, 29.14); + canvas.arcTo(29.24, 29.24, 0, false, false, 42.53, 33.63); + canvas.arcTo(47.65, 47.65, 0, false, false, 24.14, 71.23); canvas.lineTo(24.14, 89.23); - canvas.arcTo(47.7, 47.7, 0, 0, 0, 48.19, 130.63); + canvas.arcTo(47.7, 47.7, 0, false, false, 48.19, 130.63); canvas.lineTo(48.19, 135.03); - canvas.arcTo(6.43, 6.43, 0, 0, 1, 44.03, 141.03); + canvas.arcTo(6.43, 6.43, 0, false, true, 44.03, 141.03); canvas.lineTo(19.31, 150.29); - canvas.arcTo(29.81, 29.81, 0, 0, 0, 0.09, 178.03); + canvas.arcTo(29.81, 29.81, 0, false, false, 0.09, 178.03); canvas.lineTo(0.09, 233.51); - canvas.arcTo(5.63, 5.63, 0, 1, 0, 11.34, 233.51); + canvas.arcTo(5.63, 5.63, 0, true, false, 11.34, 233.51); canvas.lineTo(11.34, 178.03); - canvas.arcTo(18.19, 18.19, 0, 0, 1, 11.57, 175.17); + canvas.arcTo(18.19, 18.19, 0, false, true, 11.57, 175.17); canvas.lineTo(20.5, 184.11); - canvas.arcTo(12.32, 12.32, 0, 0, 1, 24.14, 192.89); + canvas.arcTo(12.32, 12.32, 0, false, true, 24.14, 192.89); canvas.lineTo(24.14, 233.51); - canvas.arcTo(5.63, 5.63, 0, 1, 0, 35.39, 233.51); + canvas.arcTo(5.63, 5.63, 0, true, false, 35.39, 233.51); canvas.lineTo(35.39, 192.93); - canvas.arcTo(23.5, 23.5, 0, 0, 0, 28.46, 176.2); + canvas.arcTo(23.5, 23.5, 0, false, false, 28.46, 176.2); canvas.lineTo(17.04, 164.78); - canvas.arcTo(18.34, 18.34, 0, 0, 1, 23.29, 160.78); + canvas.arcTo(18.34, 18.34, 0, false, true, 23.29, 160.78); canvas.lineTo(43.65, 153.15); canvas.lineTo(66.22, 175.72); canvas.lineTo(66.22, 233.51); - canvas.arcTo(5.63, 5.63, 0, 1, 0, 77.47, 233.51); + canvas.arcTo(5.63, 5.63, 0, true, false, 77.47, 233.51); canvas.lineTo(77.47, 175.76); canvas.lineTo(100.04, 153.19); canvas.lineTo(120.4, 160.82); - canvas.arcTo(18.39, 18.39, 0, 0, 1, 126.65, 164.82); + canvas.arcTo(18.39, 18.39, 0, false, true, 126.65, 164.82); canvas.lineTo(115.24, 176.24); - canvas.arcTo(23.5, 23.5, 0, 0, 0, 108.31, 192.93); + canvas.arcTo(23.5, 23.5, 0, false, false, 108.31, 192.93); canvas.lineTo(108.31, 233.55); - canvas.arcTo(5.63, 5.63, 0, 1, 0, 119.56, 233.55); + canvas.arcTo(5.63, 5.63, 0, true, false, 119.56, 233.55); canvas.lineTo(119.56, 192.93); - canvas.arcTo(12.35, 12.35, 0, 0, 1, 123.19, 184.15); + canvas.arcTo(12.35, 12.35, 0, false, true, 123.19, 184.15); canvas.lineTo(132.13, 175.22); - canvas.arcTo(18, 18, 0, 0, 1, 132.36, 178.08); + canvas.arcTo(18, 18, 0, false, true, 132.36, 178.08); canvas.lineTo(132.36, 233.56); - canvas.arcTo(5.63, 5.63, 0, 0, 0, 143.61, 233.56); + canvas.arcTo(5.63, 5.63, 0, false, false, 143.61, 233.56); canvas.lineTo(143.61, 178.03); - canvas.arcTo(29.81, 29.81, 0, 0, 0, 124.31, 150.29); + canvas.arcTo(29.81, 29.81, 0, false, false, 124.31, 150.29); canvas.close(); canvas.moveTo(71.85, 10.72); - canvas.arcTo(18.46, 18.46, 0, 0, 1, 90.17, 27.18); - canvas.arcTo(47.68, 47.68, 0, 0, 0, 53.53, 27.18); - canvas.arcTo(18.44, 18.44, 0, 0, 1, 71.85, 10.72); + canvas.arcTo(18.46, 18.46, 0, false, true, 90.17, 27.18); + canvas.arcTo(47.68, 47.68, 0, false, false, 53.53, 27.18); + canvas.arcTo(18.44, 18.44, 0, false, true, 71.85, 10.72); canvas.close(); canvas.moveTo(35.39, 71.23); - canvas.arcTo(36.46, 36.46, 0, 0, 1, 108.31, 71.23); + canvas.arcTo(36.46, 36.46, 0, false, true, 108.31, 71.23); canvas.lineTo(108.31, 77.4); canvas.curveTo(82.12, 75.4, 56.97, 60.55, 56.71, 60.4); - canvas.arcTo(5.62, 5.62, 0, 0, 0, 48.78, 62.71); + canvas.arcTo(5.62, 5.62, 0, false, false, 48.78, 62.71); canvas.curveTo(46.24, 67.79, 40.45, 71.89, 35.39, 74.62); canvas.close(); canvas.moveTo(35.39, 89.23); @@ -474,13 +474,13 @@ export class IconPainter { canvas.curveTo(40.55, 84.85, 49.73, 80.08, 55.67, 72.66); canvas.curveTo(64.83, 77.46, 85.92, 87.21, 108.31, 88.66); canvas.lineTo(108.31, 89.24); - canvas.arcTo(36.46, 36.46, 0, 1, 1, 35.39, 89.24); + canvas.arcTo(36.46, 36.46, 0, true, true, 35.39, 89.24); canvas.close(); canvas.moveTo(71.85, 165.45); canvas.lineTo(54.06, 147.69); - canvas.arcTo(17.7, 17.7, 0, 0, 0, 59.43, 135.32); - canvas.arcTo(47.57, 47.57, 0, 0, 0, 84.27, 135.32); - canvas.arcTo(17.7, 17.7, 0, 0, 0, 89.64, 147.69); + canvas.arcTo(17.7, 17.7, 0, false, false, 59.43, 135.32); + canvas.arcTo(47.57, 47.57, 0, false, false, 84.27, 135.32); + canvas.arcTo(17.7, 17.7, 0, false, false, 89.64, 147.69); canvas.close(); canvas.fill(); } @@ -591,8 +591,8 @@ export class IconPainter { private static paintGearInnerCircle(canvas: BpmnCanvas, arcStartX: number, arcStartY: number): void { const arcRay = 13.5; canvas.moveTo(arcStartX, arcStartY); - canvas.arcTo(arcRay, arcRay, 0, 1, 1, arcStartX + 2 * arcRay, arcStartY); - canvas.arcTo(arcRay, arcRay, 0, 0, 1, arcStartX, arcStartY); + canvas.arcTo(arcRay, arcRay, 0, true, true, arcStartX + 2 * arcRay, arcStartY); + canvas.arcTo(arcRay, arcRay, 0, false, true, arcStartX, arcStartY); canvas.close(); canvas.fillAndStroke(); } @@ -635,7 +635,7 @@ export class IconPainter { // Loop canvas.begin(); canvas.moveTo(5.5, 19.08); - canvas.arcTo(8, 8, 0, 1, 1, 10.5, 21.08); + canvas.arcTo(8, 8, 0, true, true, 10.5, 21.08); canvas.stroke(); // Arrow From 9318fe435f6be1c2233e4b78e3c0fe9fb30d6a8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Wed, 23 Nov 2022 17:28:30 +0100 Subject: [PATCH 018/132] Replace mxGraphView by GraphView --- docs/contributors/mxgraph-integration.md | 2 +- src/component/mxgraph/BpmnGraph.ts | 7 +++---- src/component/registry/query-selectors.ts | 2 +- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/docs/contributors/mxgraph-integration.md b/docs/contributors/mxgraph-integration.md index 143606e50a..452ed2ea13 100644 --- a/docs/contributors/mxgraph-integration.md +++ b/docs/contributors/mxgraph-integration.md @@ -129,7 +129,7 @@ for more details. The definition of 'center' differs whether the `mxGeometry` is - if relative, it is the center along the line - if absolute, it is derived from the terminal points -This is explained in [mxGraphView.updateEdgeLabelOffset](https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/view/mxGraphView.js#L2187) +This is explained in [GraphView.updateEdgeLabelOffset](https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/view/GraphView.js#L2187) - center between the two endpoints if the geometry is absolute - the relative distance between the center along the line, and the absolute orthogonal distance if the geometry is relative. diff --git a/src/component/mxgraph/BpmnGraph.ts b/src/component/mxgraph/BpmnGraph.ts index f9791cfdbe..a343172b61 100644 --- a/src/component/mxgraph/BpmnGraph.ts +++ b/src/component/mxgraph/BpmnGraph.ts @@ -19,9 +19,8 @@ import { FitType } from '../options'; import { ensurePositiveValue, ensureValidZoomConfiguration } from '../helpers/validators'; import debounce from 'lodash.debounce'; import throttle from 'lodash.throttle'; -import type { mxGraphView } from 'mxgraph'; import type { CellState, Point } from '@maxgraph/core'; -import { eventUtils } from "@maxgraph/core"; +import { eventUtils, GraphView } from "@maxgraph/core"; const zoomFactorIn = 1.25; const zoomFactorOut = 1 / zoomFactorIn; @@ -44,7 +43,7 @@ export class BpmnGraph extends mxgraph.mxGraph { /** * @internal */ - override createGraphView(): mxGraphView { + override createGraphView(): GraphView { return new BpmnGraphView(this); } @@ -207,7 +206,7 @@ export class BpmnGraph extends mxgraph.mxGraph { } } -class BpmnGraphView extends mxgraph.mxGraphView { +class BpmnGraphView extends GraphView { override getFloatingTerminalPoint(edge: CellState, start: CellState, end: CellState, source: boolean): Point { // some values may be null: the first and the last values are null prior computing floating terminal points const edgePoints = edge.absolutePoints.filter(Boolean); diff --git a/src/component/registry/query-selectors.ts b/src/component/registry/query-selectors.ts index b9c0e6d805..a71d06da3b 100644 --- a/src/component/registry/query-selectors.ts +++ b/src/component/registry/query-selectors.ts @@ -28,7 +28,7 @@ * * * ``` - * maxgraph generates the following SVG groups (see https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/view/mxGraphView.js#L2862) + * maxgraph generates the following SVG groups (see https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/view/GraphView.js#L2862) * - 1st: for background image * - 2nd: elements of the graph (shapes and edges) * - 3rd: overlays From f3720ee1bc55cadd519cfa796dc0e04badf45948 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Wed, 23 Nov 2022 17:33:05 +0100 Subject: [PATCH 019/132] Replace mxImageExport by ImageExport --- .husky/pre-commit | 2 +- dev/ts/component/SvgExporter.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.husky/pre-commit b/.husky/pre-commit index 9f5c7d2442..36af219892 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1,4 @@ #!/bin/sh . "$(dirname "$0")/_/husky.sh" -# npx lint-staged +npx lint-staged diff --git a/dev/ts/component/SvgExporter.ts b/dev/ts/component/SvgExporter.ts index 219d301a00..4145ded658 100644 --- a/dev/ts/component/SvgExporter.ts +++ b/dev/ts/component/SvgExporter.ts @@ -16,7 +16,7 @@ import type { mxGraph } from 'mxgraph'; import type { AlignValue, VAlignValue, OverflowValue, TextDirectionValue } from '@maxgraph/core'; -import { Client, SvgCanvas2D } from '@maxgraph/core'; +import { Client, SvgCanvas2D, ImageExport } from '@maxgraph/core'; interface SvgExportOptions { scale: number; @@ -92,7 +92,7 @@ ${svgAsString} svgCanvas.scale(s); - const imgExport = new mxgraph.mxImageExport(); + const imgExport = new ImageExport(); // FIXME only the first overlay is placed at the right position // overlays put on element of subprocess/call-activity are not placed correctly in svg export imgExport.includeOverlays = true; From 3fd2755bdb19fc0084647e6449f6d98732dbc68f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Wed, 23 Nov 2022 17:45:25 +0100 Subject: [PATCH 020/132] Replace mxEllipse by EllipseShape --- src/component/mxgraph/shape/event-shapes.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/component/mxgraph/shape/event-shapes.ts b/src/component/mxgraph/shape/event-shapes.ts index 42a92c0ebb..8422a693b3 100644 --- a/src/component/mxgraph/shape/event-shapes.ts +++ b/src/component/mxgraph/shape/event-shapes.ts @@ -20,11 +20,12 @@ import { IconPainterProvider } from './render'; import { buildPaintParameter } from './render/icon-painter'; import { StyleDefault, StyleUtils } from '../style'; import type { AbstractCanvas2D } from '@maxgraph/core'; +import { EllipseShape } from '@maxgraph/core'; /** * @internal */ -export class EventShape extends mxgraph.mxEllipse { +export class EventShape extends EllipseShape { protected iconPainter = IconPainterProvider.get(); // refactor: when all/more event types will be supported, we could move to a Record/MappedType From d345f8acbf010dd91f7927c5212da10c24cda84c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Wed, 23 Nov 2022 17:46:45 +0100 Subject: [PATCH 021/132] Replace mxRhombus by RhombusShape --- src/component/mxgraph/shape/gateway-shapes.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/component/mxgraph/shape/gateway-shapes.ts b/src/component/mxgraph/shape/gateway-shapes.ts index 9f3e10ac3e..3c5f3f1550 100644 --- a/src/component/mxgraph/shape/gateway-shapes.ts +++ b/src/component/mxgraph/shape/gateway-shapes.ts @@ -19,8 +19,9 @@ import type { PaintParameter } from './render'; import { IconPainterProvider } from './render'; import { buildPaintParameter } from './render/icon-painter'; import type { AbstractCanvas2D } from '@maxgraph/core'; +import { RhombusShape } from '@maxgraph/core'; -abstract class GatewayShape extends mxgraph.mxRhombus { +abstract class GatewayShape extends RhombusShape { protected iconPainter = IconPainterProvider.get(); protected abstract paintInnerShape(paintParameter: PaintParameter): void; From e497f2aad33f719dcee59910812877892c1fd827 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Wed, 23 Nov 2022 17:48:44 +0100 Subject: [PATCH 022/132] Replace mxText by TextShape --- src/component/mxgraph/overlay/shapes.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/component/mxgraph/overlay/shapes.ts b/src/component/mxgraph/overlay/shapes.ts index 51ece3232a..d9140e5293 100644 --- a/src/component/mxgraph/overlay/shapes.ts +++ b/src/component/mxgraph/overlay/shapes.ts @@ -14,9 +14,10 @@ * limitations under the License. */ import type { Rectangle } from '@maxgraph/core'; +import { TextShape } from '@maxgraph/core'; import type { MxGraphCustomOverlayStyle } from './custom-overlay'; -export class OverlayBadgeShape extends mxgraph.mxText { +export class OverlayBadgeShape extends TextShape { constructor(value: string, bounds: Rectangle, style: MxGraphCustomOverlayStyle) { super( value, @@ -37,6 +38,6 @@ export class OverlayBadgeShape extends mxgraph.mxText { style.stroke.color, ); this.fillOpacity = style.fill.opacity; - this.strokewidth = style.stroke.width; + this.strokeWidth = style.stroke.width; } } From 432fe976f21fb1549141f39a748d0c1fbe4023e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Wed, 23 Nov 2022 17:50:32 +0100 Subject: [PATCH 023/132] Replace mxMarker by MarkerShape --- src/component/mxgraph/config/MarkerConfigurator.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/component/mxgraph/config/MarkerConfigurator.ts b/src/component/mxgraph/config/MarkerConfigurator.ts index fe3897ce5a..2dfb156029 100644 --- a/src/component/mxgraph/config/MarkerConfigurator.ts +++ b/src/component/mxgraph/config/MarkerConfigurator.ts @@ -16,6 +16,7 @@ import { MarkerIdentifier } from '../style'; import type { Cell, Point, Shape, AbstractCanvas2D } from '@maxgraph/core'; +import { MarkerShape } from '@maxgraph/core'; /** * @internal @@ -51,6 +52,6 @@ export default class MarkerConfigurator { c.stroke(); }; }; - mxgraph.mxMarker.addMarker(MarkerIdentifier.ARROW_DASH, createMarker); + MarkerShape.addMarker(MarkerIdentifier.ARROW_DASH, createMarker); } } From 0917c5f7a6483b2ccb2df96885d480f30d121592 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Wed, 23 Nov 2022 17:51:58 +0100 Subject: [PATCH 024/132] Replace mxConnector by ConnectorShape --- src/component/mxgraph/shape/edges.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/component/mxgraph/shape/edges.ts b/src/component/mxgraph/shape/edges.ts index b982d514d7..fde0d2fb66 100644 --- a/src/component/mxgraph/shape/edges.ts +++ b/src/component/mxgraph/shape/edges.ts @@ -15,10 +15,10 @@ */ import type { Point, AbstractCanvas2D } from "@maxgraph/core"; -import { SvgCanvas2D } from '@maxgraph/core'; +import { SvgCanvas2D, ConnectorShape } from '@maxgraph/core'; import { BpmnStyleIdentifier } from '../style'; -export class BpmnConnector extends mxgraph.mxConnector { +export class BpmnConnector extends ConnectorShape { constructor(points: Point[], stroke: string, strokewidth?: number) { super(points, stroke, strokewidth); } From be478dd759da599fd166797419dc8605c369f0cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Wed, 23 Nov 2022 17:55:01 +0100 Subject: [PATCH 025/132] Replace mxUtils by utils --- dev/ts/component/SvgExporter.ts | 10 +++++----- src/component/mxgraph/shape/edges.ts | 6 +++--- src/component/mxgraph/style/utils.ts | 26 ++++++++++++++------------ 3 files changed, 22 insertions(+), 20 deletions(-) diff --git a/dev/ts/component/SvgExporter.ts b/dev/ts/component/SvgExporter.ts index 4145ded658..88ba2f24ad 100644 --- a/dev/ts/component/SvgExporter.ts +++ b/dev/ts/component/SvgExporter.ts @@ -16,7 +16,7 @@ import type { mxGraph } from 'mxgraph'; import type { AlignValue, VAlignValue, OverflowValue, TextDirectionValue } from '@maxgraph/core'; -import { Client, SvgCanvas2D, ImageExport } from '@maxgraph/core'; +import { Client, SvgCanvas2D, ImageExport, utils } from '@maxgraph/core'; interface SvgExportOptions { scale: number; @@ -47,7 +47,7 @@ export class SvgExporter { private doSvgExport(enableForeignObjectForLabel: boolean): string { const svgDocument = this.computeSvg({ scale: 1, border: 25, enableForeignObjectForLabel: enableForeignObjectForLabel }); - const svgAsString = mxgraph.mxUtils.getXml(svgDocument); + const svgAsString = utils.getXml(svgDocument); return ` ${svgAsString} @@ -64,7 +64,7 @@ ${svgAsString} const viewScale = this.graph.view.scale; // Prepares SVG document that holds the output - const svgDoc = mxgraph.mxUtils.createXmlDocument(); + const svgDoc = utils.createXmlDocument(); const root = svgDoc.createElementNS(mxgraph.mxConstants.NS_SVG, 'svg'); const s = scale / viewScale; @@ -168,7 +168,7 @@ class CanvasForExport extends SvgCanvas2D { try { this.htmlConverter.innerHTML = str; - str = mxgraph.mxUtils.extractTextWithWhitespace(this.htmlConverter.childNodes); + str = utils.extractTextWithWhitespace(this.htmlConverter.childNodes); // Workaround for substring breaking double byte UTF const exp = Math.ceil((2 * w) / this.state.fontSize); @@ -193,7 +193,7 @@ class CanvasForExport extends SvgCanvas2D { // Uses result and adds ellipsis if more than 1 char remains if (result.length < str.length && str.length - result.length > 1) { - str = mxgraph.mxUtils.trim(result.join('')) + '...'; + str = utils.trim(result.join('')) + '...'; } } catch (e) { console.warn('Error while computing txt label', e); diff --git a/src/component/mxgraph/shape/edges.ts b/src/component/mxgraph/shape/edges.ts index fde0d2fb66..c3894f0f10 100644 --- a/src/component/mxgraph/shape/edges.ts +++ b/src/component/mxgraph/shape/edges.ts @@ -15,7 +15,7 @@ */ import type { Point, AbstractCanvas2D } from "@maxgraph/core"; -import { SvgCanvas2D, ConnectorShape } from '@maxgraph/core'; +import { SvgCanvas2D, ConnectorShape, utils } from '@maxgraph/core'; import { BpmnStyleIdentifier } from '../style'; export class BpmnConnector extends ConnectorShape { @@ -37,12 +37,12 @@ export class BpmnConnector extends ConnectorShape { c.setDashed(false, false); if (sourceMarker != null) { - c.setFillColor(mxgraph.mxUtils.getValue(this.style, BpmnStyleIdentifier.EDGE_START_FILL_COLOR, this.stroke)); + c.setFillColor(utils.getValue(this.style, BpmnStyleIdentifier.EDGE_START_FILL_COLOR, this.stroke)); sourceMarker(); } if (targetMarker != null) { - c.setFillColor(mxgraph.mxUtils.getValue(this.style, BpmnStyleIdentifier.EDGE_END_FILL_COLOR, this.stroke)); + c.setFillColor(utils.getValue(this.style, BpmnStyleIdentifier.EDGE_END_FILL_COLOR, this.stroke)); targetMarker(); } } diff --git a/src/component/mxgraph/style/utils.ts b/src/component/mxgraph/style/utils.ts index 69c10fb3dd..a86fb00637 100644 --- a/src/component/mxgraph/style/utils.ts +++ b/src/component/mxgraph/style/utils.ts @@ -14,6 +14,8 @@ * limitations under the License. */ +import { utils } from '@maxgraph/core'; + import type { GlobalTaskKind, MessageVisibleKind, ShapeBpmnSubProcessKind } from '../../../model/bpmn/internal'; import { ShapeBpmnEventBasedGatewayKind, ShapeBpmnEventDefinitionKind } from '../../../model/bpmn/internal'; import { BpmnStyleIdentifier } from './identifiers'; @@ -73,51 +75,51 @@ export enum StyleDefault { */ export class StyleUtils { static getFillColor(style: any): string { - return mxgraph.mxUtils.getValue(style, mxgraph.mxConstants.STYLE_FILLCOLOR, StyleDefault.DEFAULT_FILL_COLOR); + return utils.getValue(style, mxgraph.mxConstants.STYLE_FILLCOLOR, StyleDefault.DEFAULT_FILL_COLOR); } static getStrokeColor(style: any): string { - return mxgraph.mxUtils.getValue(style, mxgraph.mxConstants.STYLE_STROKECOLOR, StyleDefault.DEFAULT_STROKE_COLOR); + return utils.getValue(style, mxgraph.mxConstants.STYLE_STROKECOLOR, StyleDefault.DEFAULT_STROKE_COLOR); } static getStrokeWidth(style: any): number { - return mxgraph.mxUtils.getValue(style, mxgraph.mxConstants.STYLE_STROKEWIDTH, StyleDefault.STROKE_WIDTH_THIN); + return utils.getValue(style, mxgraph.mxConstants.STYLE_STROKEWIDTH, StyleDefault.STROKE_WIDTH_THIN); } static getMargin(style: any): number { - return mxgraph.mxUtils.getValue(style, mxgraph.mxConstants.STYLE_MARGIN, StyleDefault.DEFAULT_MARGIN); + return utils.getValue(style, mxgraph.mxConstants.STYLE_MARGIN, StyleDefault.DEFAULT_MARGIN); } static getBpmnEventDefinitionKind(style: any): ShapeBpmnEventDefinitionKind { - return mxgraph.mxUtils.getValue(style, BpmnStyleIdentifier.EVENT_DEFINITION_KIND, ShapeBpmnEventDefinitionKind.NONE); + return utils.getValue(style, BpmnStyleIdentifier.EVENT_DEFINITION_KIND, ShapeBpmnEventDefinitionKind.NONE); } static getBpmnSubProcessKind(style: any): ShapeBpmnSubProcessKind { - return mxgraph.mxUtils.getValue(style, BpmnStyleIdentifier.SUB_PROCESS_KIND, undefined); + return utils.getValue(style, BpmnStyleIdentifier.SUB_PROCESS_KIND, undefined); } static getBpmnIsInterrupting(style: any): string { - return mxgraph.mxUtils.getValue(style, BpmnStyleIdentifier.IS_INTERRUPTING, undefined); + return utils.getValue(style, BpmnStyleIdentifier.IS_INTERRUPTING, undefined); } static getBpmnMarkers(style: any): string { - return mxgraph.mxUtils.getValue(style, BpmnStyleIdentifier.MARKERS, undefined); + return utils.getValue(style, BpmnStyleIdentifier.MARKERS, undefined); } static getBpmnIsInstantiating(style: any): boolean { - return JSON.parse(mxgraph.mxUtils.getValue(style, BpmnStyleIdentifier.IS_INSTANTIATING, false)); + return JSON.parse(utils.getValue(style, BpmnStyleIdentifier.IS_INSTANTIATING, false)); } static getBpmnIsInitiating(style: any): MessageVisibleKind { - return mxgraph.mxUtils.getValue(style, BpmnStyleIdentifier.IS_INITIATING, undefined); + return utils.getValue(style, BpmnStyleIdentifier.IS_INITIATING, undefined); } static getBpmnIsParallelEventBasedGateway(style: any): boolean { - return mxgraph.mxUtils.getValue(style, BpmnStyleIdentifier.EVENT_BASED_GATEWAY_KIND, ShapeBpmnEventBasedGatewayKind.Exclusive) == ShapeBpmnEventBasedGatewayKind.Parallel; + return utils.getValue(style, BpmnStyleIdentifier.EVENT_BASED_GATEWAY_KIND, ShapeBpmnEventBasedGatewayKind.Exclusive) == ShapeBpmnEventBasedGatewayKind.Parallel; } static getBpmnGlobalTaskKind(style: any): GlobalTaskKind { - return mxgraph.mxUtils.getValue(style, BpmnStyleIdentifier.GLOBAL_TASK_KIND, undefined); + return utils.getValue(style, BpmnStyleIdentifier.GLOBAL_TASK_KIND, undefined); } } /* eslint-enable @typescript-eslint/no-explicit-any,@typescript-eslint/explicit-module-boundary-types */ From 80177d03f2fc690ef65a27ca6fba75ba3138686b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Wed, 23 Nov 2022 18:01:47 +0100 Subject: [PATCH 026/132] Replace mxGraph by Graph --- dev/ts/component/SvgExporter.ts | 5 ++--- src/component/mxgraph/BpmnGraph.ts | 4 ++-- test/integration/BpmnVisualization.test.ts | 4 ++-- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/dev/ts/component/SvgExporter.ts b/dev/ts/component/SvgExporter.ts index 88ba2f24ad..f881d58c3a 100644 --- a/dev/ts/component/SvgExporter.ts +++ b/dev/ts/component/SvgExporter.ts @@ -14,8 +14,7 @@ * limitations under the License. */ -import type { mxGraph } from 'mxgraph'; -import type { AlignValue, VAlignValue, OverflowValue, TextDirectionValue } from '@maxgraph/core'; +import type { Graph, AlignValue, VAlignValue, OverflowValue, TextDirectionValue } from '@maxgraph/core'; import { Client, SvgCanvas2D, ImageExport, utils } from '@maxgraph/core'; interface SvgExportOptions { @@ -31,7 +30,7 @@ interface SvgExportOptions { // https://github.com/jgraph/drawio/blob/v14.7.7/src/main/webapp/js/diagramly/Editor.js#L5932 // https://github.com/jgraph/drawio/blob/v14.8.0/src/main/webapp/js/grapheditor/Graph.js#L9007 export class SvgExporter { - constructor(private graph: mxGraph) {} + constructor(private graph: Graph) {} exportSvg(): string { return this.doSvgExport(true); diff --git a/src/component/mxgraph/BpmnGraph.ts b/src/component/mxgraph/BpmnGraph.ts index a343172b61..281e040cff 100644 --- a/src/component/mxgraph/BpmnGraph.ts +++ b/src/component/mxgraph/BpmnGraph.ts @@ -20,12 +20,12 @@ import { ensurePositiveValue, ensureValidZoomConfiguration } from '../helpers/va import debounce from 'lodash.debounce'; import throttle from 'lodash.throttle'; import type { CellState, Point } from '@maxgraph/core'; -import { eventUtils, GraphView } from "@maxgraph/core"; +import { eventUtils, GraphView, Graph } from "@maxgraph/core"; const zoomFactorIn = 1.25; const zoomFactorOut = 1 / zoomFactorIn; -export class BpmnGraph extends mxgraph.mxGraph { +export class BpmnGraph extends Graph { private currentZoomLevel = 1; /** diff --git a/test/integration/BpmnVisualization.test.ts b/test/integration/BpmnVisualization.test.ts index 9ffdc34166..ca7629f65c 100644 --- a/test/integration/BpmnVisualization.test.ts +++ b/test/integration/BpmnVisualization.test.ts @@ -66,8 +66,8 @@ describe('BpmnVisualization API', () => { it('lib version', () => { expect(bpmnVisualization.getVersion().lib).toBe(getLibVersionFromPackageJson()); }); - it('mxGraph version', () => { - expect(bpmnVisualization.getVersion().dependencies.get('mxGraph')).toBeDefined(); + it('maxGraph version', () => { + expect(bpmnVisualization.getVersion().dependencies.get('maxGraph')).toBeDefined(); }); it('not modifiable version', () => { const initialVersion = bpmnVisualization.getVersion(); From 3564c3e685a3914bd12a59d6ca46d03d8089bf09 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Wed, 23 Nov 2022 18:04:20 +0100 Subject: [PATCH 027/132] Replace mxEvent.addMouseWheelListener by InternalEvent.addMouseWheelListener --- src/component/mxgraph/BpmnGraph.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/component/mxgraph/BpmnGraph.ts b/src/component/mxgraph/BpmnGraph.ts index 281e040cff..8970aedaf4 100644 --- a/src/component/mxgraph/BpmnGraph.ts +++ b/src/component/mxgraph/BpmnGraph.ts @@ -20,7 +20,7 @@ import { ensurePositiveValue, ensureValidZoomConfiguration } from '../helpers/va import debounce from 'lodash.debounce'; import throttle from 'lodash.throttle'; import type { CellState, Point } from '@maxgraph/core'; -import { eventUtils, GraphView, Graph } from "@maxgraph/core"; +import {eventUtils, GraphView, Graph, InternalEvent} from "@maxgraph/core"; const zoomFactorIn = 1.25; const zoomFactorOut = 1 / zoomFactorIn; @@ -140,8 +140,8 @@ export class BpmnGraph extends Graph { */ registerMouseWheelZoomListeners(config: ZoomConfiguration): void { config = ensureValidZoomConfiguration(config); - eventUtils.addMouseWheelListener(debounce(this.createMouseWheelZoomListener(true), config.debounceDelay), this.container); - eventUtils.addMouseWheelListener(throttle(this.createMouseWheelZoomListener(false), config.throttleDelay), this.container); + InternalEvent.addMouseWheelListener(debounce(this.createMouseWheelZoomListener(true), config.debounceDelay), this.container); + InternalEvent.addMouseWheelListener(throttle(this.createMouseWheelZoomListener(false), config.throttleDelay), this.container); } // Update the currentZoomLevel when performScaling is false, use the currentZoomLevel to set the scale otherwise From 529a53802b7b6fe396a355e961fc84c7869acc48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Wed, 23 Nov 2022 18:06:36 +0100 Subject: [PATCH 028/132] Replace mxEvent.consume by InternalEvent.consume --- src/component/mxgraph/BpmnGraph.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/mxgraph/BpmnGraph.ts b/src/component/mxgraph/BpmnGraph.ts index 8970aedaf4..5ff3946812 100644 --- a/src/component/mxgraph/BpmnGraph.ts +++ b/src/component/mxgraph/BpmnGraph.ts @@ -153,7 +153,7 @@ export class BpmnGraph extends Graph { const [offsetX, offsetY] = this.getEventRelativeCoordinates(evt); const [newScale, dx, dy] = this.getScaleAndTranslationDeltas(offsetX, offsetY); this.view.scaleAndTranslate(newScale, this.view.translate.x + dx, this.view.translate.y + dy); - eventUtils.consume(evt); + InternalEvent.consume(evt); } } From ab7020dd67b937063d3de5874fb5be529e070435 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Wed, 23 Nov 2022 18:24:19 +0100 Subject: [PATCH 029/132] Replace mxStylesheet by Stylesheet --- docs/contributors/mxgraph-integration.md | 2 +- src/component/mxgraph/config/StyleConfigurator.ts | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/contributors/mxgraph-integration.md b/docs/contributors/mxgraph-integration.md index 452ed2ea13..018c1848fd 100644 --- a/docs/contributors/mxgraph-integration.md +++ b/docs/contributors/mxgraph-integration.md @@ -40,7 +40,7 @@ Each BPMN Element is transformed into a `mxGraph` [Cell](https://jgraph.github.i At insertion, a style is passed to configure how the BPMN Element is rendered. -The [style](https://jgraph.github.io/mxgraph/docs/js-api/files/view/mxStylesheet-js.html) (see also the [mxGraph manual](https://jgraph.github.io/mxgraph/docs/manual.html#3.1.3.1)) +The [style](https://jgraph.github.io/mxgraph/docs/js-api/files/view/Stylesheet-js.html) (see also the [mxGraph manual](https://jgraph.github.io/mxgraph/docs/manual.html#3.1.3.1)) is defined and registered in `StyleConfigurator`. In particular, it refers to the name of a [Shape](https://jgraph.github.io/mxgraph/docs/js-api/files/shape/Shape-js.html) used for the rendering. diff --git a/src/component/mxgraph/config/StyleConfigurator.ts b/src/component/mxgraph/config/StyleConfigurator.ts index 33defcd3f0..f7345ea58c 100644 --- a/src/component/mxgraph/config/StyleConfigurator.ts +++ b/src/component/mxgraph/config/StyleConfigurator.ts @@ -17,7 +17,8 @@ import { AssociationDirectionKind, FlowKind, SequenceFlowKind, ShapeBpmnElementKind, ShapeUtil } from '../../../model/bpmn/internal'; import { BpmnStyleIdentifier, MarkerIdentifier, StyleDefault } from '../style'; import type { BpmnGraph } from '../BpmnGraph'; -import type { mxStylesheet, StyleMap } from 'mxgraph'; +import type { StyleMap } from 'mxgraph'; +import type { Stylesheet } from '@maxgraph/core'; /** * Configure the styles used for BPMN rendering. @@ -119,7 +120,7 @@ export class StyleConfigurator { this.configureFlowStyles(); } - private getStylesheet(): mxStylesheet { + private getStylesheet(): Stylesheet { return this.graph.getStylesheet(); } From 7b1d761934264e36370b223c4098ca265f4de070 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Wed, 23 Nov 2022 18:31:29 +0100 Subject: [PATCH 030/132] Rename MxGraphCustomOverlay in MaxGraphCustomOverlay --- src/component/mxgraph/GraphCellUpdater.ts | 4 ++-- .../mxgraph/config/ShapeConfigurator.ts | 4 ++-- .../mxgraph/overlay/OverlayConverter.ts | 18 +++++++++--------- .../mxgraph/overlay/custom-overlay.ts | 16 ++++++++-------- src/component/mxgraph/overlay/shapes.ts | 4 ++-- test/integration/matchers/matcher-utils.ts | 6 +++--- .../mxgraph/overlay/OverlayConverter.test.ts | 6 +++--- 7 files changed, 29 insertions(+), 29 deletions(-) diff --git a/src/component/mxgraph/GraphCellUpdater.ts b/src/component/mxgraph/GraphCellUpdater.ts index 036c9bed26..fd86b8f2b3 100644 --- a/src/component/mxgraph/GraphCellUpdater.ts +++ b/src/component/mxgraph/GraphCellUpdater.ts @@ -17,7 +17,7 @@ import type { BpmnGraph } from './BpmnGraph'; import { BpmnStyleIdentifier } from './style'; import type { Overlay } from '../registry'; -import { MxGraphCustomOverlay } from './overlay/custom-overlay'; +import { MaxGraphCustomOverlay } from './overlay/custom-overlay'; import { ensureIsArray } from '../helpers/array-utils'; import { OverlayConverter } from './overlay/OverlayConverter'; import { messageFowIconId } from './BpmnRenderer'; @@ -60,7 +60,7 @@ export default class GraphCellUpdater { return; } ensureIsArray(overlays).forEach(overlay => { - const bpmnOverlay = new MxGraphCustomOverlay(overlay.label, this.overlayConverter.convert(overlay)); + const bpmnOverlay = new MaxGraphCustomOverlay(overlay.label, this.overlayConverter.convert(overlay)); this.graph.addCellOverlay(cell, bpmnOverlay); }); } diff --git a/src/component/mxgraph/config/ShapeConfigurator.ts b/src/component/mxgraph/config/ShapeConfigurator.ts index 23688f9753..83d90be649 100644 --- a/src/component/mxgraph/config/ShapeConfigurator.ts +++ b/src/component/mxgraph/config/ShapeConfigurator.ts @@ -35,7 +35,7 @@ import { TextAnnotationShape } from '../shape/text-annotation-shapes'; import { MessageFlowIconShape } from '../shape/flow-shapes'; import { BpmnStyleIdentifier } from '../style'; import { computeAllBpmnClassNamesOfCell } from '../renderer/style-utils'; -import { MxGraphCustomOverlay } from '../overlay/custom-overlay'; +import { MaxGraphCustomOverlay } from '../overlay/custom-overlay'; import { OverlayBadgeShape } from '../overlay/shapes'; import { BpmnConnector } from '../shape/edges'; @@ -193,7 +193,7 @@ export default class ShapeConfigurator { let overlayShape: Shape; // START bpmn-visualization CUSTOMIZATION - if (currentOverlay instanceof MxGraphCustomOverlay) { + if (currentOverlay instanceof MaxGraphCustomOverlay) { overlayShape = new OverlayBadgeShape(currentOverlay.label, new Rectangle(0, 0, 0, 0), currentOverlay.style); } else { overlayShape = new ImageShape(new Rectangle(0, 0, 0, 0), currentOverlay.image.src); diff --git a/src/component/mxgraph/overlay/OverlayConverter.ts b/src/component/mxgraph/overlay/OverlayConverter.ts index 409c167184..163825bb52 100644 --- a/src/component/mxgraph/overlay/OverlayConverter.ts +++ b/src/component/mxgraph/overlay/OverlayConverter.ts @@ -15,10 +15,10 @@ */ import type { Overlay, OverlayFont, OverlayPosition, OverlayFill, OverlayStroke } from '../../registry'; import { StyleDefault } from '../style'; -import type { MxGraphCustomOverlayOptions, MxGraphCustomOverlayPosition, MxGraphCustomOverlayStyle } from './custom-overlay'; +import type { MaxGraphCustomOverlayOptions, MaxGraphCustomOverlayPosition, MaxGraphCustomOverlayStyle } from './custom-overlay'; export class OverlayConverter { - private overlayPositions: Map = new Map([ + private overlayPositions: Map = new Map([ // Edge ['start', { horizontalAlign: 'left', verticalAlign: 'top' }], ['middle', { horizontalAlign: 'center', verticalAlign: 'top' }], @@ -34,17 +34,17 @@ export class OverlayConverter { ['middle-right', { horizontalAlign: 'right', verticalAlign: 'middle' }], ]); - convert(overlay: Overlay): MxGraphCustomOverlayOptions { + convert(overlay: Overlay): MaxGraphCustomOverlayOptions { const position = this.convertPosition(overlay); const style = OverlayConverter.convertStyle(overlay); return { position, style }; } - private convertPosition(overlay: Overlay): MxGraphCustomOverlayPosition { + private convertPosition(overlay: Overlay): MaxGraphCustomOverlayPosition { return this.overlayPositions.get(overlay.position); } - private static convertStyle(overlay: Overlay): MxGraphCustomOverlayStyle { + private static convertStyle(overlay: Overlay): MaxGraphCustomOverlayStyle { // recompute the style at each call to ensure we consider default changes that could occur after lib initialization const defaultStyle = { fill: { color: StyleDefault.DEFAULT_OVERLAY_FILL_COLOR.valueOf(), opacity: StyleDefault.DEFAULT_OVERLAY_FILL_OPACITY.valueOf() }, @@ -53,7 +53,7 @@ export class OverlayConverter { }; const style = overlay.style; - const convertedStyle = { ...defaultStyle }; + const convertedStyle = { ...defaultStyle }; if (!style) { return convertedStyle; } @@ -65,21 +65,21 @@ export class OverlayConverter { return convertedStyle; } - private static convertFill(convertedStyle: MxGraphCustomOverlayStyle, apiFill: OverlayFill): void { + private static convertFill(convertedStyle: MaxGraphCustomOverlayStyle, apiFill: OverlayFill): void { if (apiFill) { convertedStyle.fill.color = apiFill.color ?? convertedStyle.fill.color; convertedStyle.fill.opacity = apiFill.opacity ?? convertedStyle.fill.opacity; } } - private static convertStroke(convertedStyle: MxGraphCustomOverlayStyle, apiStroke: OverlayStroke): void { + private static convertStroke(convertedStyle: MaxGraphCustomOverlayStyle, apiStroke: OverlayStroke): void { if (apiStroke) { convertedStyle.stroke.color = apiStroke.color ?? convertedStyle.stroke.color; convertedStyle.stroke.width = apiStroke.width ?? convertedStyle.stroke.width; } } - private static convertFont(convertedStyle: MxGraphCustomOverlayStyle, apiFont: OverlayFont): void { + private static convertFont(convertedStyle: MaxGraphCustomOverlayStyle, apiFont: OverlayFont): void { if (apiFont) { convertedStyle.font.color = apiFont.color ?? convertedStyle.font.color; convertedStyle.font.size = apiFont.size ?? convertedStyle.font.size; diff --git a/src/component/mxgraph/overlay/custom-overlay.ts b/src/component/mxgraph/overlay/custom-overlay.ts index 552a35d960..88358a29b8 100644 --- a/src/component/mxgraph/overlay/custom-overlay.ts +++ b/src/component/mxgraph/overlay/custom-overlay.ts @@ -20,22 +20,22 @@ import type { OverlayStyle } from '../../registry'; export type VerticalAlignType = 'bottom' | 'middle' | 'top'; export type HorizontalAlignType = 'left' | 'center' | 'right'; -export interface MxGraphCustomOverlayOptions { - position: MxGraphCustomOverlayPosition; - style: MxGraphCustomOverlayStyle; +export interface MaxGraphCustomOverlayOptions { + position: MaxGraphCustomOverlayPosition; + style: MaxGraphCustomOverlayStyle; } -export interface MxGraphCustomOverlayPosition { +export interface MaxGraphCustomOverlayPosition { horizontalAlign?: HorizontalAlignType; verticalAlign?: VerticalAlignType; } -export type MxGraphCustomOverlayStyle = Required; +export type MaxGraphCustomOverlayStyle = Required; -export class MxGraphCustomOverlay extends CellOverlay { - readonly style: MxGraphCustomOverlayStyle; +export class MaxGraphCustomOverlay extends CellOverlay { + readonly style: MaxGraphCustomOverlayStyle; - constructor(public label: string, options: MxGraphCustomOverlayOptions) { + constructor(public label: string, options: MaxGraphCustomOverlayOptions) { super(null, '', options.position.horizontalAlign, options.position.verticalAlign, null, 'default'); this.style = options.style; } diff --git a/src/component/mxgraph/overlay/shapes.ts b/src/component/mxgraph/overlay/shapes.ts index d9140e5293..1a94f3e7f3 100644 --- a/src/component/mxgraph/overlay/shapes.ts +++ b/src/component/mxgraph/overlay/shapes.ts @@ -15,10 +15,10 @@ */ import type { Rectangle } from '@maxgraph/core'; import { TextShape } from '@maxgraph/core'; -import type { MxGraphCustomOverlayStyle } from './custom-overlay'; +import type { MaxGraphCustomOverlayStyle } from './custom-overlay'; export class OverlayBadgeShape extends TextShape { - constructor(value: string, bounds: Rectangle, style: MxGraphCustomOverlayStyle) { + constructor(value: string, bounds: Rectangle, style: MaxGraphCustomOverlayStyle) { super( value, bounds, diff --git a/test/integration/matchers/matcher-utils.ts b/test/integration/matchers/matcher-utils.ts index 765d35c4cd..0e8e7496fa 100644 --- a/test/integration/matchers/matcher-utils.ts +++ b/test/integration/matchers/matcher-utils.ts @@ -19,7 +19,7 @@ import MatcherContext = jest.MatcherContext; import CustomMatcherResult = jest.CustomMatcherResult; import type { mxGeometry, StyleMap } from 'mxgraph'; import type { Cell } from '@maxgraph/core'; -import type { MxGraphCustomOverlay, MxGraphCustomOverlayStyle } from '../../../src/component/mxgraph/overlay/custom-overlay'; +import type { MaxGraphCustomOverlay, MaxGraphCustomOverlayStyle } from '../../../src/component/mxgraph/overlay/custom-overlay'; export interface ExpectedStateStyle extends StyleMap { verticalAlign?: string; @@ -57,7 +57,7 @@ export interface ExpectedOverlay { label?: string; horizontalAlign?: string; verticalAlign?: string; - style?: MxGraphCustomOverlayStyle; + style?: MaxGraphCustomOverlayStyle; } export const EXPECTED_LABEL = 'Expected in the mxGraph model'; @@ -172,7 +172,7 @@ export function buildReceivedCellWithCommonAttributes(cell: Cell): ExpectedCell state: { style: buildReceivedStateStyle(cell) }, }; - const cellOverlays = bpmnVisualization.graph.getCellOverlays(cell) as MxGraphCustomOverlay[]; + const cellOverlays = bpmnVisualization.graph.getCellOverlays(cell) as MaxGraphCustomOverlay[]; if (cellOverlays) { receivedCell.overlays = cellOverlays.map(cellOverlay => ({ label: cellOverlay.label, diff --git a/test/unit/component/mxgraph/overlay/OverlayConverter.test.ts b/test/unit/component/mxgraph/overlay/OverlayConverter.test.ts index f638e67793..5d2f103faa 100644 --- a/test/unit/component/mxgraph/overlay/OverlayConverter.test.ts +++ b/test/unit/component/mxgraph/overlay/OverlayConverter.test.ts @@ -17,7 +17,7 @@ * limitations under the License. */ import { OverlayConverter } from '../../../../../src/component/mxgraph/overlay/OverlayConverter'; -import type { MxGraphCustomOverlayPosition } from '../../../../../src/component/mxgraph/overlay/custom-overlay'; +import type { MaxGraphCustomOverlayPosition } from '../../../../../src/component/mxgraph/overlay/custom-overlay'; import type { Overlay, OverlayPosition } from '../../../../../src/bpmn-visualization'; import { StyleDefault } from '../../../../../src/bpmn-visualization'; @@ -39,9 +39,9 @@ describe('overlay converter', () => { [undefined, undefined], [null, undefined], ]; - it.each(positionParameters as [[OverlayPosition, MxGraphCustomOverlayPosition]])( + it.each(positionParameters as [[OverlayPosition, MaxGraphCustomOverlayPosition]])( 'convert API overlay position %s to mxGraph overlay position %s', - (apiPosition: OverlayPosition, mxGraphPosition: MxGraphCustomOverlayPosition) => { + (apiPosition: OverlayPosition, mxGraphPosition: MaxGraphCustomOverlayPosition) => { const overlay: Overlay = { position: apiPosition }; const result = overlayConverter.convert(overlay); From 980f906fdc026b1913f9547c758f53219e63c753 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Wed, 23 Nov 2022 18:39:38 +0100 Subject: [PATCH 031/132] Fix some types on test utils --- test/integration/matchers/matcher-utils.ts | 6 +++--- test/integration/matchers/toBeShape/index.ts | 2 +- test/unit/component/mxgraph/renderer/style-utils.test.ts | 3 ++- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/test/integration/matchers/matcher-utils.ts b/test/integration/matchers/matcher-utils.ts index 0e8e7496fa..bdeb11bb11 100644 --- a/test/integration/matchers/matcher-utils.ts +++ b/test/integration/matchers/matcher-utils.ts @@ -18,7 +18,7 @@ import { bpmnVisualization } from '../helpers/model-expect'; import MatcherContext = jest.MatcherContext; import CustomMatcherResult = jest.CustomMatcherResult; import type { mxGeometry, StyleMap } from 'mxgraph'; -import type { Cell } from '@maxgraph/core'; +import type { Cell, CellStyle } from '@maxgraph/core'; import type { MaxGraphCustomOverlay, MaxGraphCustomOverlayStyle } from '../../../src/component/mxgraph/overlay/custom-overlay'; export interface ExpectedStateStyle extends StyleMap { @@ -35,13 +35,13 @@ export interface ExpectedStateStyle extends StyleMap { endArrow?: string; endSize?: number; shape?: string; - horizontal?: number; + horizontal?: boolean; } export interface ExpectedCell { value?: string; geometry?: mxGeometry; - style?: string; + style?: CellStyle; id?: string; edge?: boolean; vertex?: boolean; diff --git a/test/integration/matchers/toBeShape/index.ts b/test/integration/matchers/toBeShape/index.ts index 939ce22bf5..78f023e99f 100644 --- a/test/integration/matchers/toBeShape/index.ts +++ b/test/integration/matchers/toBeShape/index.ts @@ -71,7 +71,7 @@ function buildExpectedStateStyle(expectedModel: ExpectedShapeModelElement): Expe : expectedStateStyle.fillColor; if ('isHorizontal' in expectedModel) { - expectedStateStyle.horizontal = expectedModel.isHorizontal ? 0 : 1; + expectedStateStyle.horizontal = expectedModel.isHorizontal; } return expectedStateStyle; diff --git a/test/unit/component/mxgraph/renderer/style-utils.test.ts b/test/unit/component/mxgraph/renderer/style-utils.test.ts index fb0012251d..7a00f7847f 100644 --- a/test/unit/component/mxgraph/renderer/style-utils.test.ts +++ b/test/unit/component/mxgraph/renderer/style-utils.test.ts @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import {CellStyle} from "@maxgraph/core"; import { FlowKind, ShapeBpmnElementKind } from '../../../../../src/model/bpmn/internal'; import { computeBpmnBaseClassName, computeAllBpmnClassNames } from '../../../../../src/component/mxgraph/renderer/style-utils'; @@ -67,7 +68,7 @@ describe('compute all css class names based on style input', () => { ${'shape=bpmn.message-flow-icon'} | ${false} | ${['bpmn-message-flow-icon']} ${'shape=bpmn.message-flow-icon;bpmn.isInitiating=non_initiating'} | ${false} | ${['bpmn-message-flow-icon', 'bpmn-icon-non-initiating']} ${'shape=bpmn.message-flow-icon;bpmn.isInitiating=initiating'} | ${true} | ${['bpmn-message-flow-icon', 'bpmn-icon-initiating', 'bpmn-label']} - `('style="$style" / isLabel=$isLabel', ({ style, isLabel, expectedClassNames }: { style: string; isLabel: boolean; expectedClassNames: string[] }) => { + `('style="$style" / isLabel=$isLabel', ({ style, isLabel, expectedClassNames }: { style: CellStyle; isLabel: boolean; expectedClassNames: string[] }) => { expect(computeAllBpmnClassNames(style, isLabel)).toEqual(expectedClassNames); }); }); From 9c47cce12b5ddf5a717d219e4e490394272475ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Thu, 24 Nov 2022 10:46:17 +0100 Subject: [PATCH 032/132] Replace mxGraphDataModel.filterDescendants((cell: mxCell) => boolean, mxCell) by GraphDataModel.filterCells( cells: Cell[], filter: FilterFunction): Cell[] --- test/integration/helpers/model-expect.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/test/integration/helpers/model-expect.ts b/test/integration/helpers/model-expect.ts index 7b0875afa9..a478fa14e5 100644 --- a/test/integration/helpers/model-expect.ts +++ b/test/integration/helpers/model-expect.ts @@ -51,7 +51,7 @@ import { toBeUserTask, } from '../matchers'; import type { mxGeometry } from 'mxgraph'; -import type { Cell } from '@maxgraph/core'; +import type { Cell, FilterFunction } from '@maxgraph/core'; import type { ExpectedOverlay } from '../matchers/matcher-utils'; import { getCell } from '../matchers/matcher-utils'; @@ -187,9 +187,9 @@ const defaultParent = bpmnVisualization.graph.getDefaultParent(); export const getDefaultParentId = (): string => defaultParent.id; -const expectElementsInModel = (parentId: string, elementsNumber: number, filter: (cell: Cell) => boolean): void => { +const expectElementsInModel = (parentId: string, elementsNumber: number, filter: FilterFunction): void => { const model = bpmnVisualization.graph.model; - const descendants = model.filterDescendants(filter, getCell(parentId)); + const descendants = model.filterCells([getCell(parentId)], filter); expect(descendants).toHaveLength(elementsNumber); }; From fcbcd3d50fcf0aaefb6a5a6ac3fec03995c7e34c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Thu, 24 Nov 2022 10:48:26 +0100 Subject: [PATCH 033/132] Replace mxGeometry by Geometry --- docs/contributors/mxgraph-integration.md | 6 ++-- .../mxgraph/renderer/CoordinatesTranslator.ts | 2 +- test/integration/helpers/model-expect.ts | 4 +-- test/integration/matchers/matcher-utils.ts | 6 ++-- .../mxGraph.model.bpmn.elements.test.ts | 34 +++++++++---------- 5 files changed, 26 insertions(+), 26 deletions(-) diff --git a/docs/contributors/mxgraph-integration.md b/docs/contributors/mxgraph-integration.md index 018c1848fd..390a5fc380 100644 --- a/docs/contributors/mxgraph-integration.md +++ b/docs/contributors/mxgraph-integration.md @@ -120,12 +120,12 @@ The mxGraph integration uses the `edge Cell` geometry to set the label bounds - if the waypoints are not available, no position is set and the label is placed on the edge center - width and height: for word wrapping. -see [mxGeometry](https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/model/mxGeometry.js#L60) +see [Geometry](https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/model/Geometry.js#L60) #### mxGraph Details -The label position is related to the 'center' of the edge, see [mxGeometry](https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/model/mxGeometry.js#L35) -for more details. The definition of 'center' differs whether the `mxGeometry` is `relative` or not: +The label position is related to the 'center' of the edge, see [Geometry](https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/model/Geometry.js#L35) +for more details. The definition of 'center' differs whether the `Geometry` is `relative` or not: - if relative, it is the center along the line - if absolute, it is derived from the terminal points diff --git a/src/component/mxgraph/renderer/CoordinatesTranslator.ts b/src/component/mxgraph/renderer/CoordinatesTranslator.ts index b23d8cc0f5..2a1ebc7851 100644 --- a/src/component/mxgraph/renderer/CoordinatesTranslator.ts +++ b/src/component/mxgraph/renderer/CoordinatesTranslator.ts @@ -36,7 +36,7 @@ export default class CoordinatesTranslator { return new Point(relativeX, relativeY); } - // Returns the translation to be applied to a cell whose mxGeometry x and y values are expressed with absolute coordinates + // Returns the translation to be applied to a cell whose Geometry x and y values are expressed with absolute coordinates // (i.e related to the graph default parent) you want to assign as parent to the cell passed as argument of this function. // That way, you will be able to express the cell coordinates as relative to its parent cell. // diff --git a/test/integration/helpers/model-expect.ts b/test/integration/helpers/model-expect.ts index a478fa14e5..052c7e6a09 100644 --- a/test/integration/helpers/model-expect.ts +++ b/test/integration/helpers/model-expect.ts @@ -50,8 +50,8 @@ import { toBeTask, toBeUserTask, } from '../matchers'; -import type { mxGeometry } from 'mxgraph'; import type { Cell, FilterFunction } from '@maxgraph/core'; +import { Geometry } from '@maxgraph/core'; import type { ExpectedOverlay } from '../matchers/matcher-utils'; import { getCell } from '../matchers/matcher-utils'; @@ -116,7 +116,7 @@ expect.extend({ export interface ExpectedCellWithGeometry { parentId?: string; - geometry: mxGeometry; + geometry: Geometry; } export interface ExpectedFont { diff --git a/test/integration/matchers/matcher-utils.ts b/test/integration/matchers/matcher-utils.ts index bdeb11bb11..909efbe736 100644 --- a/test/integration/matchers/matcher-utils.ts +++ b/test/integration/matchers/matcher-utils.ts @@ -17,8 +17,8 @@ import type { ExpectedEdgeModelElement, ExpectedFont, ExpectedShapeModelElement import { bpmnVisualization } from '../helpers/model-expect'; import MatcherContext = jest.MatcherContext; import CustomMatcherResult = jest.CustomMatcherResult; -import type { mxGeometry, StyleMap } from 'mxgraph'; -import type { Cell, CellStyle } from '@maxgraph/core'; +import type { StyleMap } from 'mxgraph'; +import type { Cell, CellStyle, Geometry } from '@maxgraph/core'; import type { MaxGraphCustomOverlay, MaxGraphCustomOverlayStyle } from '../../../src/component/mxgraph/overlay/custom-overlay'; export interface ExpectedStateStyle extends StyleMap { @@ -40,7 +40,7 @@ export interface ExpectedStateStyle extends StyleMap { export interface ExpectedCell { value?: string; - geometry?: mxGeometry; + geometry?: Geometry; style?: CellStyle; id?: string; edge?: boolean; diff --git a/test/integration/mxGraph.model.bpmn.elements.test.ts b/test/integration/mxGraph.model.bpmn.elements.test.ts index dd19d56673..9497ac1403 100644 --- a/test/integration/mxGraph.model.bpmn.elements.test.ts +++ b/test/integration/mxGraph.model.bpmn.elements.test.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { Point } from '@maxgraph/core'; +import { Point, Geometry } from '@maxgraph/core'; import { MarkerIdentifier, MessageVisibleKind, @@ -1334,12 +1334,12 @@ describe('mxGraph model - BPMN elements', () => { expect('Participant_1').toBeCellWithParentAndGeometry({ // unchanged as this is a pool, coordinates are the ones from the bpmn source - geometry: new mxgraph.mxGeometry(160, 80, 900, 180), + geometry: new Geometry(160, 80, 900, 180), }); expect('StartEvent_1').toBeCellWithParentAndGeometry({ parentId: 'Participant_1', - geometry: new mxgraph.mxGeometry( + geometry: new Geometry( 150, // absolute coordinates: parent 160, cell 310 80, // absolute coordinates: parent 80, cell 160 40, // unchanged as no transformation on size @@ -1347,7 +1347,7 @@ describe('mxGraph model - BPMN elements', () => { ), }); - const sequenceFlowMxGeometry = new mxgraph.mxGeometry(0, 0, 0, 0); + const sequenceFlowMxGeometry = new Geometry(0, 0, 0, 0); sequenceFlowMxGeometry.points = [ new Point(190, 100), // absolute coordinates: parent x="160" y="80", cell x="350" y="180" new Point(350, 100), // absolute coordinates: parent x="160" y="80", cell x="510" y="180" @@ -1357,7 +1357,7 @@ describe('mxGraph model - BPMN elements', () => { geometry: sequenceFlowMxGeometry, }); - const messageFlowMxGeometry = new mxgraph.mxGeometry(0, 0, 0, 0); + const messageFlowMxGeometry = new Geometry(0, 0, 0, 0); messageFlowMxGeometry.points = [ new Point(334, 260), // absolute coordinates: parent graph.getDefaultParent(), cell x="334" y="260" new Point(334, 342), // absolute coordinates: parent graph.getDefaultParent(), cell x="334" y="342" @@ -1372,12 +1372,12 @@ describe('mxGraph model - BPMN elements', () => { expect('Participant_1').toBeCellWithParentAndGeometry({ // unchanged as this is a pool, coordinates are the ones from the bpmn source - geometry: new mxgraph.mxGeometry(160, 80, 900, 400), + geometry: new Geometry(160, 80, 900, 400), }); expect('Lane_1_1').toBeCellWithParentAndGeometry({ parentId: 'Participant_1', - geometry: new mxgraph.mxGeometry( + geometry: new Geometry( 30, // absolute coordinates: parent 160, cell 190 0, // absolute coordinates: parent 80, cell 80 870, // unchanged as no transformation on size @@ -1387,7 +1387,7 @@ describe('mxGraph model - BPMN elements', () => { expect('StartEvent_1').toBeCellWithParentAndGeometry({ parentId: 'Lane_1_1', - geometry: new mxgraph.mxGeometry( + geometry: new Geometry( 120, // absolute coordinates: parent 190, cell 310 80, // absolute coordinates: parent 80, cell 160 40, // unchanged as no transformation on size @@ -1397,7 +1397,7 @@ describe('mxGraph model - BPMN elements', () => { expect('Lane_1_847987').not.toBeCellWithParentAndGeometry({ parentId: 'Participant_1', - geometry: new mxgraph.mxGeometry( + geometry: new Geometry( 30, // absolute coordinates: parent 160, cell 190 200, // absolute coordinates: parent 80, cell 280 870, // unchanged as no transformation on size @@ -1405,7 +1405,7 @@ describe('mxGraph model - BPMN elements', () => { ), }); - const sequenceFlowMxGeometry = new mxgraph.mxGeometry(0, 0, 0, 0); + const sequenceFlowMxGeometry = new Geometry(0, 0, 0, 0); sequenceFlowMxGeometry.points = [ new Point(160, 100), // absolute coordinates: parent x="190" y="80", cell x="350" y="180" new Point(320, 100), // absolute coordinates: parent x="190" y="80", cell x="510" y="180" @@ -1415,7 +1415,7 @@ describe('mxGraph model - BPMN elements', () => { geometry: sequenceFlowMxGeometry, }); - const messageFlowMxGeometry = new mxgraph.mxGeometry(0, 0, 0, 0); + const messageFlowMxGeometry = new Geometry(0, 0, 0, 0); messageFlowMxGeometry.points = [ new Point(334, 480), // absolute coordinates: parent graph.getDefaultParent(), cell x="334" y="480" new Point(334, 632), // absolute coordinates: parent graph.getDefaultParent(), cell x="334" y="632" @@ -1449,7 +1449,7 @@ describe('mxGraph model - BPMN elements', () => { expect('StartEvent_1').toBeCellWithParentAndGeometry({ parentId: defaultParentId, - geometry: new mxgraph.mxGeometry( + geometry: new Geometry( 156.10001, // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore @@ -1461,14 +1461,14 @@ describe('mxGraph model - BPMN elements', () => { expect('Activity_1').toBeCellWithParentAndGeometry({ parentId: defaultParentId, - geometry: new mxgraph.mxGeometry(250, 59, 100, 80), + geometry: new Geometry(250, 59, 100, 80), }); - const mxGeometry = new mxgraph.mxGeometry(412, 81, 36, 36); - mxGeometry.offset = new Point(4.16e25, 1.24000000003e29); + const geometry = new Geometry(412, 81, 36, 36); + geometry.offset = new Point(4.16e25, 1.24000000003e29); expect('EndEvent_1').toBeCellWithParentAndGeometry({ parentId: defaultParentId, - geometry: mxGeometry, + geometry: geometry, }); }); @@ -1477,7 +1477,7 @@ describe('mxGraph model - BPMN elements', () => { expect('Activity_1').toBeCellWithParentAndGeometry({ parentId: defaultParentId, - geometry: new mxgraph.mxGeometry( + geometry: new Geometry( // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore malformed source, conversion result 'not_a_number0', // from 'not_a_number' From 0e5e8e25a32ac63c9ba7f3e3bd262cbcdf3e5bac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Thu, 24 Nov 2022 10:57:38 +0100 Subject: [PATCH 034/132] Replace mxGraph.getModel() by graph.model --- dev/ts/main.ts | 2 +- src/component/mxgraph/BpmnRenderer.ts | 4 ++-- src/component/mxgraph/GraphCellUpdater.ts | 6 +++--- src/component/mxgraph/overlay/custom-overlay.ts | 2 +- src/component/mxgraph/renderer/CoordinatesTranslator.ts | 2 +- 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/dev/ts/main.ts b/dev/ts/main.ts index bc5bba1769..30035a8331 100644 --- a/dev/ts/main.ts +++ b/dev/ts/main.ts @@ -117,7 +117,7 @@ function collapseBpmnElement(bpmnElementId: string): void { return; } log('Updating model, bpmnElement to collapse:', bpmnElementId); - const model = bpmnVisualization.graph.getModel(); + const model = bpmnVisualization.graph.model; const cell = model.getCell(bpmnElementId); if (!cell) { log('Element not found in the model, do nothing'); diff --git a/src/component/mxgraph/BpmnRenderer.ts b/src/component/mxgraph/BpmnRenderer.ts index 1e39d0ecdb..50216af79b 100644 --- a/src/component/mxgraph/BpmnRenderer.ts +++ b/src/component/mxgraph/BpmnRenderer.ts @@ -40,7 +40,7 @@ export class BpmnRenderer { } private insertShapesAndEdges({ pools, lanes, subprocesses, otherFlowNodes, boundaryEvents, edges }: RenderedModel): void { - const model = this.graph.getModel(); + const model = this.graph.model; model.clear(); // ensure to remove manual changes or already loaded graphs model.beginUpdate(); try { @@ -123,7 +123,7 @@ export class BpmnRenderer { } private getCell(id: string): Cell { - return this.graph.getModel().getCell(id); + return this.graph.model.getCell(id); } private insertVertex(parent: Cell, id: string | null, value: string, bounds: Bounds, labelBounds: Bounds, style?: string): Cell { diff --git a/src/component/mxgraph/GraphCellUpdater.ts b/src/component/mxgraph/GraphCellUpdater.ts index fd86b8f2b3..3e6ba1324a 100644 --- a/src/component/mxgraph/GraphCellUpdater.ts +++ b/src/component/mxgraph/GraphCellUpdater.ts @@ -42,7 +42,7 @@ export default class GraphCellUpdater { } private updateAndRefreshCssClassesOfElement(elementId: string, cssClasses: string[]): void { - const cell = this.graph.getModel().getCell(elementId); + const cell = this.graph.model.getCell(elementId); if (!cell) { return; } @@ -55,7 +55,7 @@ export default class GraphCellUpdater { } addOverlays(bpmnElementId: string, overlays: Overlay | Overlay[]): void { - const cell = this.graph.getModel().getCell(bpmnElementId); + const cell = this.graph.model.getCell(bpmnElementId); if (!cell) { return; } @@ -66,7 +66,7 @@ export default class GraphCellUpdater { } removeAllOverlays(bpmnElementId: string): void { - const cell = this.graph.getModel().getCell(bpmnElementId); + const cell = this.graph.model.getCell(bpmnElementId); if (!cell) { return; } diff --git a/src/component/mxgraph/overlay/custom-overlay.ts b/src/component/mxgraph/overlay/custom-overlay.ts index 88358a29b8..1b85b12444 100644 --- a/src/component/mxgraph/overlay/custom-overlay.ts +++ b/src/component/mxgraph/overlay/custom-overlay.ts @@ -42,7 +42,7 @@ export class MaxGraphCustomOverlay extends CellOverlay { // Based on original method from CellOverlay (CellOverlay.prototype.getBounds) override getBounds(state: CellState): Rectangle { - const isEdge = state.view.graph.getModel().isEdge(state.cell); + const isEdge = state.view.graph.model.isEdge(state.cell); const s = state.view.scale; let pt; diff --git a/src/component/mxgraph/renderer/CoordinatesTranslator.ts b/src/component/mxgraph/renderer/CoordinatesTranslator.ts index 2a1ebc7851..aeb6fe9997 100644 --- a/src/component/mxgraph/renderer/CoordinatesTranslator.ts +++ b/src/component/mxgraph/renderer/CoordinatesTranslator.ts @@ -43,7 +43,7 @@ export default class CoordinatesTranslator { // This implementation is taken from the example described in the documentation of mxgraph#getTranslateForRoot (4.1.1) // The translation is generally negative private getTranslateForRoot(cell: Cell): Point { - const model = this.graph.getModel(); + const model = this.graph.model; const offset = new Point(0, 0); while (cell != null) { From b52ad44f0e4f94e82dfdd3b5772a9f668a7ebd6f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Thu, 24 Nov 2022 11:02:10 +0100 Subject: [PATCH 035/132] Replace mxGraphDataModel.getGeometry(cell: mxCell) by Cell.getGeometry() --- src/component/mxgraph/renderer/CoordinatesTranslator.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/mxgraph/renderer/CoordinatesTranslator.ts b/src/component/mxgraph/renderer/CoordinatesTranslator.ts index aeb6fe9997..baed9390e4 100644 --- a/src/component/mxgraph/renderer/CoordinatesTranslator.ts +++ b/src/component/mxgraph/renderer/CoordinatesTranslator.ts @@ -47,7 +47,7 @@ export default class CoordinatesTranslator { const offset = new Point(0, 0); while (cell != null) { - const geo = model.getGeometry(cell); + const geo = cell.getGeometry(); if (geo != null) { offset.x -= geo.x; offset.y -= geo.y; From a7377f8c2956b2ec0ec1fb10df0c55306129feaa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Thu, 24 Nov 2022 11:20:55 +0100 Subject: [PATCH 036/132] Replace mxGraphDataModel.isEdge(cell: mxCell) by Cell.isEdge() --- src/component/mxgraph/overlay/custom-overlay.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/mxgraph/overlay/custom-overlay.ts b/src/component/mxgraph/overlay/custom-overlay.ts index 1b85b12444..77b2e40aaf 100644 --- a/src/component/mxgraph/overlay/custom-overlay.ts +++ b/src/component/mxgraph/overlay/custom-overlay.ts @@ -42,7 +42,7 @@ export class MaxGraphCustomOverlay extends CellOverlay { // Based on original method from CellOverlay (CellOverlay.prototype.getBounds) override getBounds(state: CellState): Rectangle { - const isEdge = state.view.graph.model.isEdge(state.cell); + const isEdge = state.cell.isEdge(); const s = state.view.scale; let pt; From 50353f971828ff981f9bd54dc11cfd012e03c8c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Thu, 24 Nov 2022 11:23:52 +0100 Subject: [PATCH 037/132] Replace mxGraphDataModel.getParent(cell: mxCell) by Cell.getParent() --- src/component/mxgraph/renderer/CoordinatesTranslator.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/mxgraph/renderer/CoordinatesTranslator.ts b/src/component/mxgraph/renderer/CoordinatesTranslator.ts index baed9390e4..31bbf1275e 100644 --- a/src/component/mxgraph/renderer/CoordinatesTranslator.ts +++ b/src/component/mxgraph/renderer/CoordinatesTranslator.ts @@ -52,7 +52,7 @@ export default class CoordinatesTranslator { offset.x -= geo.x; offset.y -= geo.y; } - cell = model.getParent(cell); + cell = cell.getParent(); } return offset; From 01c44f3b5c9364cec520ca1fe9172823c5b24a79 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Thu, 24 Nov 2022 11:34:58 +0100 Subject: [PATCH 038/132] Replace mxgraph.mxConstants by constants --- dev/ts/component/SvgExporter.ts | 6 +- dev/ts/component/ThemedBpmnVisualization.ts | 6 +- .../mxgraph/config/ShapeConfigurator.ts | 15 +- .../mxgraph/config/StyleConfigurator.ts | 151 +++++++++--------- .../mxgraph/overlay/custom-overlay.ts | 15 +- .../mxgraph/renderer/StyleComputer.ts | 32 ++-- src/component/mxgraph/style/utils.ts | 10 +- test/integration/matchers/matcher-utils.ts | 19 ++- test/integration/matchers/toBeEdge/index.ts | 4 +- test/integration/matchers/toBeShape/index.ts | 6 +- .../mxGraph.model.bpmn.elements.test.ts | 5 +- 11 files changed, 142 insertions(+), 127 deletions(-) diff --git a/dev/ts/component/SvgExporter.ts b/dev/ts/component/SvgExporter.ts index f881d58c3a..01ddddf392 100644 --- a/dev/ts/component/SvgExporter.ts +++ b/dev/ts/component/SvgExporter.ts @@ -15,7 +15,7 @@ */ import type { Graph, AlignValue, VAlignValue, OverflowValue, TextDirectionValue } from '@maxgraph/core'; -import { Client, SvgCanvas2D, ImageExport, utils } from '@maxgraph/core'; +import { Client, SvgCanvas2D, ImageExport, utils, constants } from '@maxgraph/core'; interface SvgExportOptions { scale: number; @@ -64,7 +64,7 @@ ${svgAsString} // Prepares SVG document that holds the output const svgDoc = utils.createXmlDocument(); - const root = svgDoc.createElementNS(mxgraph.mxConstants.NS_SVG, 'svg'); + const root = svgDoc.createElementNS(constants.NS_SVG, 'svg'); const s = scale / viewScale; const w = Math.max(1, Math.ceil(bounds.width * s) + 2 * border); @@ -76,7 +76,7 @@ ${svgAsString} root.setAttribute('viewBox', (crisp ? '-0.5 -0.5' : '0 0') + ' ' + w + ' ' + h); svgDoc.appendChild(root); - const group = svgDoc.createElementNS(mxgraph.mxConstants.NS_SVG, 'g'); + const group = svgDoc.createElementNS(constants.NS_SVG, 'g'); root.appendChild(group); const svgCanvas = this.createSvgCanvas(group); diff --git a/dev/ts/component/ThemedBpmnVisualization.ts b/dev/ts/component/ThemedBpmnVisualization.ts index 4ef3ecee3f..23a6250610 100644 --- a/dev/ts/component/ThemedBpmnVisualization.ts +++ b/dev/ts/component/ThemedBpmnVisualization.ts @@ -13,6 +13,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import { constants } from '@maxgraph/core'; + import { BpmnVisualization, FlowKind, ShapeBpmnElementKind, ShapeUtil, StyleConfigurator, StyleDefault } from '../../../src/bpmn-visualization'; import { logStartup } from '../utils/internal-helpers'; @@ -187,8 +189,8 @@ export class ThemedBpmnVisualization extends BpmnVisualization { // directly access the 'styles' map to update values. Using stylesheet.getCellStyle returns a copy of the style const seqFlowStyle = stylesheet.styles[FlowKind.SEQUENCE_FLOW]; - seqFlowStyle[mxgraph.mxConstants.STYLE_STROKECOLOR] = color; - seqFlowStyle[mxgraph.mxConstants.STYLE_FILLCOLOR] = color; + seqFlowStyle[constants.STYLE_STROKECOLOR] = color; + seqFlowStyle[constants.STYLE_FILLCOLOR] = color; logStartup('Sequence flows style updated'); } diff --git a/src/component/mxgraph/config/ShapeConfigurator.ts b/src/component/mxgraph/config/ShapeConfigurator.ts index 83d90be649..940684bae1 100644 --- a/src/component/mxgraph/config/ShapeConfigurator.ts +++ b/src/component/mxgraph/config/ShapeConfigurator.ts @@ -15,7 +15,8 @@ */ import type { CellState, CellOverlay } from '@maxgraph/core'; -import { CellRenderer, Shape, Rectangle, ImageShape, Dictionary, SvgCanvas2D } from '@maxgraph/core'; +import { CellRenderer, Shape, Rectangle, ImageShape, Dictionary, SvgCanvas2D, constants } from '@maxgraph/core'; + import { ShapeBpmnElementKind } from '../../../model/bpmn/internal'; import { EndEventShape, EventShape, IntermediateEventShape, ThrowIntermediateEventShape } from '../shape/event-shapes'; import { ComplexGatewayShape, EventBasedGatewayShape, ExclusiveGatewayShape, InclusiveGatewayShape, ParallelGatewayShape } from '../shape/gateway-shapes'; @@ -88,7 +89,7 @@ export default class ShapeConfigurator { // Analysis done for mxgraph@4.1.1, still apply to mxgraph@4.2.2 SvgCanvas2D.prototype.getTextCss = function () { const s = this.state; - const lh = mxgraph.mxConstants.ABSOLUTE_LINE_HEIGHT ? s.fontSize * mxgraph.mxConstants.LINE_HEIGHT + 'px' : mxgraph.mxConstants.LINE_HEIGHT * this.lineHeightCorrection; + const lh = constants.ABSOLUTE_LINE_HEIGHT ? s.fontSize * constants.LINE_HEIGHT + 'px' : constants.LINE_HEIGHT * this.lineHeightCorrection; let css = 'display: inline-block; font-size: ' + s.fontSize + @@ -107,18 +108,18 @@ export default class ShapeConfigurator { // END OF Fix for issue #920 '; '; - if ((s.fontStyle & mxgraph.mxConstants.FONT_BOLD) == mxgraph.mxConstants.FONT_BOLD) { + if ((s.fontStyle & constants.FONT_BOLD) == constants.FONT_BOLD) { css += 'font-weight: bold; '; } - if ((s.fontStyle & mxgraph.mxConstants.FONT_ITALIC) == mxgraph.mxConstants.FONT_ITALIC) { + if ((s.fontStyle & constants.FONT_ITALIC) == constants.FONT_ITALIC) { css += 'font-style: italic; '; } const deco = []; - if ((s.fontStyle & mxgraph.mxConstants.FONT_UNDERLINE) == mxgraph.mxConstants.FONT_UNDERLINE) { + if ((s.fontStyle & constants.FONT_UNDERLINE) == constants.FONT_UNDERLINE) { deco.push('underline'); } - if ((s.fontStyle & mxgraph.mxConstants.FONT_STRIKETHROUGH) == mxgraph.mxConstants.FONT_STRIKETHROUGH) { + if ((s.fontStyle & constants.FONT_STRIKETHROUGH) == constants.FONT_STRIKETHROUGH) { deco.push('line-through'); } if (deco.length > 0) { @@ -151,7 +152,7 @@ export default class ShapeConfigurator { // 'this.state.cell.style' = the style applied to the cell: 1st element: style name = bpmn shape name const cell = this.state.cell; // dialect = strictHtml is set means that current node holds an html label - let allBpmnClassNames = computeAllBpmnClassNamesOfCell(cell, this.dialect === mxgraph.mxConstants.DIALECT_STRICTHTML); + let allBpmnClassNames = computeAllBpmnClassNamesOfCell(cell, this.dialect === constants.DIALECT_STRICTHTML); const extraCssClasses = this.state.style[BpmnStyleIdentifier.EXTRA_CSS_CLASSES]; if (extraCssClasses) { allBpmnClassNames = allBpmnClassNames.concat(extraCssClasses); diff --git a/src/component/mxgraph/config/StyleConfigurator.ts b/src/component/mxgraph/config/StyleConfigurator.ts index f7345ea58c..6d967f3fe8 100644 --- a/src/component/mxgraph/config/StyleConfigurator.ts +++ b/src/component/mxgraph/config/StyleConfigurator.ts @@ -19,6 +19,7 @@ import { BpmnStyleIdentifier, MarkerIdentifier, StyleDefault } from '../style'; import type { BpmnGraph } from '../BpmnGraph'; import type { StyleMap } from 'mxgraph'; import type { Stylesheet } from '@maxgraph/core'; +import { constants } from '@maxgraph/core'; /** * Configure the styles used for BPMN rendering. @@ -33,31 +34,31 @@ export class StyleConfigurator { [ FlowKind.SEQUENCE_FLOW, (style: StyleMap) => { - style[mxgraph.mxConstants.STYLE_ENDARROW] = mxgraph.mxConstants.ARROW_BLOCK_THIN; + style[constants.STYLE_ENDARROW] = constants.ARROW_BLOCK_THIN; }, ], [ FlowKind.MESSAGE_FLOW, (style: StyleMap) => { - style[mxgraph.mxConstants.STYLE_DASHED] = true; - style[mxgraph.mxConstants.STYLE_DASH_PATTERN] = '8 5'; - style[mxgraph.mxConstants.STYLE_STARTARROW] = mxgraph.mxConstants.ARROW_OVAL; - style[mxgraph.mxConstants.STYLE_STARTSIZE] = 8; - style[mxgraph.mxConstants.STYLE_STARTFILL] = true; + style[constants.STYLE_DASHED] = true; + style[constants.STYLE_DASH_PATTERN] = '8 5'; + style[constants.STYLE_STARTARROW] = constants.ARROW_OVAL; + style[constants.STYLE_STARTSIZE] = 8; + style[constants.STYLE_STARTFILL] = true; style[BpmnStyleIdentifier.EDGE_START_FILL_COLOR] = StyleDefault.MESSAGE_FLOW_MARKER_START_FILL_COLOR; - style[mxgraph.mxConstants.STYLE_ENDARROW] = mxgraph.mxConstants.ARROW_BLOCK_THIN; - style[mxgraph.mxConstants.STYLE_ENDFILL] = true; + style[constants.STYLE_ENDARROW] = constants.ARROW_BLOCK_THIN; + style[constants.STYLE_ENDFILL] = true; style[BpmnStyleIdentifier.EDGE_END_FILL_COLOR] = StyleDefault.MESSAGE_FLOW_MARKER_END_FILL_COLOR; }, ], [ FlowKind.ASSOCIATION_FLOW, (style: StyleMap) => { - style[mxgraph.mxConstants.STYLE_DASHED] = true; - style[mxgraph.mxConstants.STYLE_DASH_PATTERN] = '1 2'; - style[mxgraph.mxConstants.STYLE_ENDARROW] = mxgraph.mxConstants.ARROW_OPEN_THIN; - style[mxgraph.mxConstants.STYLE_STARTARROW] = mxgraph.mxConstants.ARROW_OPEN_THIN; - style[mxgraph.mxConstants.STYLE_STARTSIZE] = 12; + style[constants.STYLE_DASHED] = true; + style[constants.STYLE_DASH_PATTERN] = '1 2'; + style[constants.STYLE_ENDARROW] = constants.ARROW_OPEN_THIN; + style[constants.STYLE_STARTARROW] = constants.ARROW_OPEN_THIN; + style[constants.STYLE_STARTSIZE] = 12; }, ], ]); @@ -65,15 +66,15 @@ export class StyleConfigurator { [ SequenceFlowKind.DEFAULT, (style: StyleMap) => { - style[mxgraph.mxConstants.STYLE_STARTARROW] = MarkerIdentifier.ARROW_DASH; + style[constants.STYLE_STARTARROW] = MarkerIdentifier.ARROW_DASH; }, ], [ SequenceFlowKind.CONDITIONAL_FROM_ACTIVITY, (style: StyleMap) => { - style[mxgraph.mxConstants.STYLE_STARTARROW] = mxgraph.mxConstants.ARROW_DIAMOND_THIN; - style[mxgraph.mxConstants.STYLE_STARTSIZE] = 18; - style[mxgraph.mxConstants.STYLE_STARTFILL] = true; + style[constants.STYLE_STARTARROW] = constants.ARROW_DIAMOND_THIN; + style[constants.STYLE_STARTSIZE] = 18; + style[constants.STYLE_STARTFILL] = true; style[BpmnStyleIdentifier.EDGE_START_FILL_COLOR] = StyleDefault.SEQUENCE_FLOW_CONDITIONAL_FROM_ACTIVITY_MARKER_FILL_COLOR; }, ], @@ -82,14 +83,14 @@ export class StyleConfigurator { [ AssociationDirectionKind.NONE, (style: StyleMap) => { - style[mxgraph.mxConstants.STYLE_STARTARROW] = undefined; - style[mxgraph.mxConstants.STYLE_ENDARROW] = undefined; + style[constants.STYLE_STARTARROW] = undefined; + style[constants.STYLE_ENDARROW] = undefined; }, ], [ AssociationDirectionKind.ONE, (style: StyleMap) => { - style[mxgraph.mxConstants.STYLE_STARTARROW] = undefined; + style[constants.STYLE_STARTARROW] = undefined; }, ], [ @@ -134,27 +135,27 @@ export class StyleConfigurator { private configurePoolStyle(): void { const style: StyleMap = {}; - style[mxgraph.mxConstants.STYLE_SHAPE] = mxgraph.mxConstants.SHAPE_SWIMLANE; + style[constants.STYLE_SHAPE] = constants.SHAPE_SWIMLANE; // label style - style[mxgraph.mxConstants.STYLE_VERTICAL_ALIGN] = mxgraph.mxConstants.ALIGN_MIDDLE; - style[mxgraph.mxConstants.STYLE_ALIGN] = mxgraph.mxConstants.ALIGN_CENTER; - style[mxgraph.mxConstants.STYLE_STARTSIZE] = StyleDefault.POOL_LABEL_SIZE; - style[mxgraph.mxConstants.STYLE_FILLCOLOR] = StyleDefault.POOL_LABEL_FILL_COLOR; + style[constants.STYLE_VERTICAL_ALIGN] = constants.ALIGN_MIDDLE; + style[constants.STYLE_ALIGN] = constants.ALIGN_CENTER; + style[constants.STYLE_STARTSIZE] = StyleDefault.POOL_LABEL_SIZE; + style[constants.STYLE_FILLCOLOR] = StyleDefault.POOL_LABEL_FILL_COLOR; this.graph.getStylesheet().putCellStyle(ShapeBpmnElementKind.POOL, style); } private configureLaneStyle(): void { const style: StyleMap = {}; - style[mxgraph.mxConstants.STYLE_SHAPE] = mxgraph.mxConstants.SHAPE_SWIMLANE; + style[constants.STYLE_SHAPE] = constants.SHAPE_SWIMLANE; // label style - style[mxgraph.mxConstants.STYLE_VERTICAL_ALIGN] = mxgraph.mxConstants.ALIGN_MIDDLE; - style[mxgraph.mxConstants.STYLE_ALIGN] = mxgraph.mxConstants.ALIGN_CENTER; - style[mxgraph.mxConstants.STYLE_SWIMLANE_LINE] = 0; // hide the line between the title region and the content area - style[mxgraph.mxConstants.STYLE_STARTSIZE] = StyleDefault.LANE_LABEL_SIZE; - style[mxgraph.mxConstants.STYLE_FILLCOLOR] = StyleDefault.LANE_LABEL_FILL_COLOR; + style[constants.STYLE_VERTICAL_ALIGN] = constants.ALIGN_MIDDLE; + style[constants.STYLE_ALIGN] = constants.ALIGN_CENTER; + style[constants.STYLE_SWIMLANE_LINE] = 0; // hide the line between the title region and the content area + style[constants.STYLE_STARTSIZE] = StyleDefault.LANE_LABEL_SIZE; + style[constants.STYLE_FILLCOLOR] = StyleDefault.LANE_LABEL_FILL_COLOR; this.graph.getStylesheet().putCellStyle(ShapeBpmnElementKind.LANE, style); } @@ -162,37 +163,37 @@ export class StyleConfigurator { private configureEventStyles(): void { ShapeUtil.eventKinds().forEach(kind => { const style: StyleMap = {}; - style[mxgraph.mxConstants.STYLE_SHAPE] = kind; - style[mxgraph.mxConstants.STYLE_PERIMETER] = mxgraph.mxPerimeter.EllipsePerimeter; - style[mxgraph.mxConstants.STYLE_STROKEWIDTH] = kind == ShapeBpmnElementKind.EVENT_END ? StyleDefault.STROKE_WIDTH_THICK : StyleDefault.STROKE_WIDTH_THIN; - style[mxgraph.mxConstants.STYLE_VERTICAL_LABEL_POSITION] = mxgraph.mxConstants.ALIGN_BOTTOM; + style[constants.STYLE_SHAPE] = kind; + style[constants.STYLE_PERIMETER] = mxgraph.mxPerimeter.EllipsePerimeter; + style[constants.STYLE_STROKEWIDTH] = kind == ShapeBpmnElementKind.EVENT_END ? StyleDefault.STROKE_WIDTH_THICK : StyleDefault.STROKE_WIDTH_THIN; + style[constants.STYLE_VERTICAL_LABEL_POSITION] = constants.ALIGN_BOTTOM; this.putCellStyle(kind, style); }); } private configureTextAnnotationStyle(): void { const style: StyleMap = {}; - style[mxgraph.mxConstants.STYLE_SHAPE] = ShapeBpmnElementKind.TEXT_ANNOTATION; - style[mxgraph.mxConstants.STYLE_VERTICAL_ALIGN] = mxgraph.mxConstants.ALIGN_MIDDLE; - style[mxgraph.mxConstants.STYLE_ALIGN] = mxgraph.mxConstants.ALIGN_LEFT; - style[mxgraph.mxConstants.STYLE_SPACING_LEFT] = 5; - style[mxgraph.mxConstants.STYLE_FILLCOLOR] = StyleDefault.TEXT_ANNOTATION_FILL_COLOR; - style[mxgraph.mxConstants.STYLE_STROKEWIDTH] = StyleDefault.STROKE_WIDTH_THIN; + style[constants.STYLE_SHAPE] = ShapeBpmnElementKind.TEXT_ANNOTATION; + style[constants.STYLE_VERTICAL_ALIGN] = constants.ALIGN_MIDDLE; + style[constants.STYLE_ALIGN] = constants.ALIGN_LEFT; + style[constants.STYLE_SPACING_LEFT] = 5; + style[constants.STYLE_FILLCOLOR] = StyleDefault.TEXT_ANNOTATION_FILL_COLOR; + style[constants.STYLE_STROKEWIDTH] = StyleDefault.STROKE_WIDTH_THIN; this.putCellStyle(ShapeBpmnElementKind.TEXT_ANNOTATION, style); } private configureGroupStyle(): void { const style: StyleMap = {}; - style[mxgraph.mxConstants.STYLE_ROUNDED] = true; - style[mxgraph.mxConstants.STYLE_ABSOLUTE_ARCSIZE] = true; - style[mxgraph.mxConstants.STYLE_ARCSIZE] = StyleDefault.SHAPE_ARC_SIZE; - style[mxgraph.mxConstants.STYLE_DASHED] = true; - style[mxgraph.mxConstants.STYLE_DASH_PATTERN] = '7 4 1 4'; - style[mxgraph.mxConstants.STYLE_STROKEWIDTH] = StyleDefault.STROKE_WIDTH_THIN; - style[mxgraph.mxConstants.STYLE_FILLCOLOR] = StyleDefault.GROUP_FILL_COLOR; + style[constants.STYLE_ROUNDED] = true; + style[constants.STYLE_ABSOLUTE_ARCSIZE] = true; + style[constants.STYLE_ARCSIZE] = StyleDefault.SHAPE_ARC_SIZE; + style[constants.STYLE_DASHED] = true; + style[constants.STYLE_DASH_PATTERN] = '7 4 1 4'; + style[constants.STYLE_STROKEWIDTH] = StyleDefault.STROKE_WIDTH_THIN; + style[constants.STYLE_FILLCOLOR] = StyleDefault.GROUP_FILL_COLOR; // Default label positioning - style[mxgraph.mxConstants.STYLE_ALIGN] = mxgraph.mxConstants.ALIGN_CENTER; - style[mxgraph.mxConstants.STYLE_VERTICAL_ALIGN] = mxgraph.mxConstants.ALIGN_TOP; + style[constants.STYLE_ALIGN] = constants.ALIGN_CENTER; + style[constants.STYLE_VERTICAL_ALIGN] = constants.ALIGN_TOP; this.putCellStyle(ShapeBpmnElementKind.GROUP, style); } @@ -200,11 +201,11 @@ export class StyleConfigurator { private configureActivityStyles(): void { ShapeUtil.activityKinds().forEach(kind => { const style: StyleMap = {}; - style[mxgraph.mxConstants.STYLE_SHAPE] = kind; - style[mxgraph.mxConstants.STYLE_VERTICAL_ALIGN] = mxgraph.mxConstants.ALIGN_MIDDLE; - style[mxgraph.mxConstants.STYLE_ABSOLUTE_ARCSIZE] = true; - style[mxgraph.mxConstants.STYLE_ARCSIZE] = StyleDefault.SHAPE_ARC_SIZE; - style[mxgraph.mxConstants.STYLE_STROKEWIDTH] = kind == ShapeBpmnElementKind.CALL_ACTIVITY ? StyleDefault.STROKE_WIDTH_THICK : StyleDefault.STROKE_WIDTH_THIN; + style[constants.STYLE_SHAPE] = kind; + style[constants.STYLE_VERTICAL_ALIGN] = constants.ALIGN_MIDDLE; + style[constants.STYLE_ABSOLUTE_ARCSIZE] = true; + style[constants.STYLE_ARCSIZE] = StyleDefault.SHAPE_ARC_SIZE; + style[constants.STYLE_STROKEWIDTH] = kind == ShapeBpmnElementKind.CALL_ACTIVITY ? StyleDefault.STROKE_WIDTH_THICK : StyleDefault.STROKE_WIDTH_THIN; this.putCellStyle(kind, style); }); } @@ -212,14 +213,14 @@ export class StyleConfigurator { private configureGatewayStyles(): void { ShapeUtil.gatewayKinds().forEach(kind => { const style: StyleMap = {}; - style[mxgraph.mxConstants.STYLE_SHAPE] = kind; - style[mxgraph.mxConstants.STYLE_PERIMETER] = mxgraph.mxPerimeter.RhombusPerimeter; - style[mxgraph.mxConstants.STYLE_STROKEWIDTH] = StyleDefault.STROKE_WIDTH_THIN; - style[mxgraph.mxConstants.STYLE_VERTICAL_ALIGN] = mxgraph.mxConstants.ALIGN_TOP; + style[constants.STYLE_SHAPE] = kind; + style[constants.STYLE_PERIMETER] = mxgraph.mxPerimeter.RhombusPerimeter; + style[constants.STYLE_STROKEWIDTH] = StyleDefault.STROKE_WIDTH_THIN; + style[constants.STYLE_VERTICAL_ALIGN] = constants.ALIGN_TOP; // Default label positioning - style[mxgraph.mxConstants.STYLE_LABEL_POSITION] = mxgraph.mxConstants.ALIGN_LEFT; - style[mxgraph.mxConstants.STYLE_VERTICAL_LABEL_POSITION] = mxgraph.mxConstants.ALIGN_TOP; + style[constants.STYLE_LABEL_POSITION] = constants.ALIGN_LEFT; + style[constants.STYLE_VERTICAL_LABEL_POSITION] = constants.ALIGN_TOP; this.putCellStyle(kind, style); }); @@ -227,28 +228,28 @@ export class StyleConfigurator { private configureDefaultEdgeStyle(): void { const style = this.getStylesheet().getDefaultEdgeStyle(); - style[mxgraph.mxConstants.STYLE_SHAPE] = BpmnStyleIdentifier.EDGE; - style[mxgraph.mxConstants.STYLE_ENDSIZE] = 12; - style[mxgraph.mxConstants.STYLE_STROKEWIDTH] = 1.5; - style[mxgraph.mxConstants.STYLE_ROUNDED] = 1; - style[mxgraph.mxConstants.STYLE_ARCSIZE] = 5; - style[mxgraph.mxConstants.STYLE_VERTICAL_ALIGN] = mxgraph.mxConstants.ALIGN_BOTTOM; + style[constants.STYLE_SHAPE] = BpmnStyleIdentifier.EDGE; + style[constants.STYLE_ENDSIZE] = 12; + style[constants.STYLE_STROKEWIDTH] = 1.5; + style[constants.STYLE_ROUNDED] = 1; + style[constants.STYLE_ARCSIZE] = 5; + style[constants.STYLE_VERTICAL_ALIGN] = constants.ALIGN_BOTTOM; - delete style[mxgraph.mxConstants.STYLE_ENDARROW]; + delete style[constants.STYLE_ENDARROW]; StyleConfigurator.configureCommonDefaultStyle(style); } private static configureCommonDefaultStyle(style: StyleMap): void { - style[mxgraph.mxConstants.STYLE_FONTFAMILY] = StyleDefault.DEFAULT_FONT_FAMILY; - style[mxgraph.mxConstants.STYLE_FONTSIZE] = StyleDefault.DEFAULT_FONT_SIZE; - style[mxgraph.mxConstants.STYLE_FONTCOLOR] = StyleDefault.DEFAULT_FONT_COLOR; - style[mxgraph.mxConstants.STYLE_FILLCOLOR] = StyleDefault.DEFAULT_FILL_COLOR; - style[mxgraph.mxConstants.STYLE_STROKECOLOR] = StyleDefault.DEFAULT_STROKE_COLOR; - style[mxgraph.mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = mxgraph.mxConstants.NONE; + style[constants.STYLE_FONTFAMILY] = StyleDefault.DEFAULT_FONT_FAMILY; + style[constants.STYLE_FONTSIZE] = StyleDefault.DEFAULT_FONT_SIZE; + style[constants.STYLE_FONTCOLOR] = StyleDefault.DEFAULT_FONT_COLOR; + style[constants.STYLE_FILLCOLOR] = StyleDefault.DEFAULT_FILL_COLOR; + style[constants.STYLE_STROKECOLOR] = StyleDefault.DEFAULT_STROKE_COLOR; + style[constants.STYLE_LABEL_BACKGROUNDCOLOR] = constants.NONE; // only works with html labels (enabled by GraphConfigurator) - style[mxgraph.mxConstants.STYLE_WHITE_SPACE] = 'wrap'; + style[constants.STYLE_WHITE_SPACE] = 'wrap'; } private configureEdgeStyles(styleKinds: T[], specificStyles: Map void>): void { diff --git a/src/component/mxgraph/overlay/custom-overlay.ts b/src/component/mxgraph/overlay/custom-overlay.ts index 77b2e40aaf..56adbd9a5e 100644 --- a/src/component/mxgraph/overlay/custom-overlay.ts +++ b/src/component/mxgraph/overlay/custom-overlay.ts @@ -14,7 +14,8 @@ * limitations under the License. */ import type { CellState } from '@maxgraph/core'; -import { CellOverlay, Point, Rectangle } from '@maxgraph/core'; +import { CellOverlay, Point, Rectangle, constants } from '@maxgraph/core'; + import type { OverlayStyle } from '../../registry'; export type VerticalAlignType = 'bottom' | 'middle' | 'top'; @@ -57,17 +58,17 @@ export class MaxGraphCustomOverlay extends CellOverlay { } else { pt = new Point(); - if (this.align == mxgraph.mxConstants.ALIGN_LEFT) { + if (this.align == constants.ALIGN_LEFT) { pt.x = state.x; - } else if (this.align == mxgraph.mxConstants.ALIGN_CENTER) { + } else if (this.align == constants.ALIGN_CENTER) { pt.x = state.x + state.width / 2; } else { pt.x = state.x + state.width; } - if (this.verticalAlign == mxgraph.mxConstants.ALIGN_TOP) { + if (this.verticalAlign == constants.ALIGN_TOP) { pt.y = state.y; - } else if (this.verticalAlign == mxgraph.mxConstants.ALIGN_MIDDLE) { + } else if (this.verticalAlign == constants.ALIGN_MIDDLE) { pt.y = state.y + state.height / 2; } else { pt.y = state.y + state.height; @@ -85,11 +86,11 @@ export class MaxGraphCustomOverlay extends CellOverlay { private computeEdgeBounds(state: CellState): Point { const pts = state.absolutePoints; // 1st point for start position - if (this.align == mxgraph.mxConstants.ALIGN_LEFT) { + if (this.align == constants.ALIGN_LEFT) { return pts[0]; } // middle point for middle position - else if (this.align == mxgraph.mxConstants.ALIGN_CENTER) { + else if (this.align == constants.ALIGN_CENTER) { if (pts.length % 2 == 1) { return pts[Math.floor(pts.length / 2)]; } else { diff --git a/src/component/mxgraph/renderer/StyleComputer.ts b/src/component/mxgraph/renderer/StyleComputer.ts index 2990b441b3..e54578eba9 100644 --- a/src/component/mxgraph/renderer/StyleComputer.ts +++ b/src/component/mxgraph/renderer/StyleComputer.ts @@ -14,6 +14,8 @@ * limitations under the License. */ +import { constants } from '@maxgraph/core'; + import Shape from '../../../model/bpmn/internal/shape/Shape'; import type { Edge } from '../../../model/bpmn/internal/edge/edge'; import type Bounds from '../../../model/bpmn/internal/Bounds'; @@ -64,9 +66,9 @@ export default class StyleComputer { } else if (bpmnElement instanceof ShapeBpmnActivity) { this.computeActivityShapeStyle(bpmnElement, styleValues); } else if (ShapeUtil.isPoolOrLane(bpmnElement.kind)) { - // mxgraph.mxConstants.STYLE_HORIZONTAL is for the label + // constants.STYLE_HORIZONTAL is for the label // In BPMN, isHorizontal is for the Shape - styleValues.set(mxgraph.mxConstants.STYLE_HORIZONTAL, shape.isHorizontal ? '0' : '1'); + styleValues.set(constants.STYLE_HORIZONTAL, shape.isHorizontal ? '0' : '1'); } else if (bpmnElement instanceof ShapeBpmnEventBasedGateway) { styleValues.set(BpmnStyleIdentifier.IS_INSTANTIATING, String(bpmnElement.instantiate)); styleValues.set(BpmnStyleIdentifier.EVENT_BASED_GATEWAY_KIND, String(bpmnElement.gatewayKind)); @@ -117,9 +119,9 @@ export default class StyleComputer { const font = bpmnCell.label?.font; if (font) { - styleValues.set(mxgraph.mxConstants.STYLE_FONTFAMILY, font.name); - styleValues.set(mxgraph.mxConstants.STYLE_FONTSIZE, font.size); - styleValues.set(mxgraph.mxConstants.STYLE_FONTSTYLE, StyleComputer.getFontStyleValue(font)); + styleValues.set(constants.STYLE_FONTFAMILY, font.name); + styleValues.set(constants.STYLE_FONTSIZE, font.size); + styleValues.set(constants.STYLE_FONTSTYLE, StyleComputer.getFontStyleValue(font)); } return styleValues; @@ -130,17 +132,17 @@ export default class StyleComputer { const bpmnElement = bpmnCell.bpmnElement; if (labelBounds) { - styleValues.set(mxgraph.mxConstants.STYLE_VERTICAL_ALIGN, mxgraph.mxConstants.ALIGN_TOP); + styleValues.set(constants.STYLE_VERTICAL_ALIGN, constants.ALIGN_TOP); if (bpmnCell.bpmnElement.kind != ShapeBpmnElementKind.TEXT_ANNOTATION) { - styleValues.set(mxgraph.mxConstants.STYLE_ALIGN, mxgraph.mxConstants.ALIGN_CENTER); + styleValues.set(constants.STYLE_ALIGN, constants.ALIGN_CENTER); } if (bpmnCell instanceof Shape) { // arbitrarily increase width to relax too small bounds (for instance for reference diagrams from miwg-test-suite) - styleValues.set(mxgraph.mxConstants.STYLE_LABEL_WIDTH, labelBounds.width + 1); + styleValues.set(constants.STYLE_LABEL_WIDTH, labelBounds.width + 1); // align settings - styleValues.set(mxgraph.mxConstants.STYLE_LABEL_POSITION, mxgraph.mxConstants.ALIGN_TOP); - styleValues.set(mxgraph.mxConstants.STYLE_VERTICAL_LABEL_POSITION, mxgraph.mxConstants.ALIGN_LEFT); + styleValues.set(constants.STYLE_LABEL_POSITION, constants.ALIGN_TOP); + styleValues.set(constants.STYLE_VERTICAL_LABEL_POSITION, constants.ALIGN_LEFT); } } // when no label bounds, adjust the default style dynamically @@ -150,7 +152,7 @@ export default class StyleComputer { (bpmnElement instanceof ShapeBpmnCallActivity && bpmnElement.callActivityKind === ShapeBpmnCallActivityKind.CALLING_PROCESS)) && !bpmnElement.markers.includes(ShapeBpmnMarkerKind.EXPAND) ) { - styleValues.set(mxgraph.mxConstants.STYLE_VERTICAL_ALIGN, mxgraph.mxConstants.ALIGN_TOP); + styleValues.set(constants.STYLE_VERTICAL_ALIGN, constants.ALIGN_TOP); } return styleValues; @@ -163,16 +165,16 @@ export default class StyleComputer { private static getFontStyleValue(font: Font): number { let value = 0; if (font.isBold) { - value += mxgraph.mxConstants.FONT_BOLD; + value += constants.FONT_BOLD; } if (font.isItalic) { - value += mxgraph.mxConstants.FONT_ITALIC; + value += constants.FONT_ITALIC; } if (font.isStrikeThrough) { - value += mxgraph.mxConstants.FONT_STRIKETHROUGH; + value += constants.FONT_STRIKETHROUGH; } if (font.isUnderline) { - value += mxgraph.mxConstants.FONT_UNDERLINE; + value += constants.FONT_UNDERLINE; } return value; } diff --git a/src/component/mxgraph/style/utils.ts b/src/component/mxgraph/style/utils.ts index a86fb00637..86bfdc784d 100644 --- a/src/component/mxgraph/style/utils.ts +++ b/src/component/mxgraph/style/utils.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { utils } from '@maxgraph/core'; +import { utils, constants } from '@maxgraph/core'; import type { GlobalTaskKind, MessageVisibleKind, ShapeBpmnSubProcessKind } from '../../../model/bpmn/internal'; import { ShapeBpmnEventBasedGatewayKind, ShapeBpmnEventDefinitionKind } from '../../../model/bpmn/internal'; @@ -75,19 +75,19 @@ export enum StyleDefault { */ export class StyleUtils { static getFillColor(style: any): string { - return utils.getValue(style, mxgraph.mxConstants.STYLE_FILLCOLOR, StyleDefault.DEFAULT_FILL_COLOR); + return utils.getValue(style, constants.STYLE_FILLCOLOR, StyleDefault.DEFAULT_FILL_COLOR); } static getStrokeColor(style: any): string { - return utils.getValue(style, mxgraph.mxConstants.STYLE_STROKECOLOR, StyleDefault.DEFAULT_STROKE_COLOR); + return utils.getValue(style, constants.STYLE_STROKECOLOR, StyleDefault.DEFAULT_STROKE_COLOR); } static getStrokeWidth(style: any): number { - return utils.getValue(style, mxgraph.mxConstants.STYLE_STROKEWIDTH, StyleDefault.STROKE_WIDTH_THIN); + return utils.getValue(style, constants.STYLE_STROKEWIDTH, StyleDefault.STROKE_WIDTH_THIN); } static getMargin(style: any): number { - return utils.getValue(style, mxgraph.mxConstants.STYLE_MARGIN, StyleDefault.DEFAULT_MARGIN); + return utils.getValue(style, constants.STYLE_MARGIN, StyleDefault.DEFAULT_MARGIN); } static getBpmnEventDefinitionKind(style: any): ShapeBpmnEventDefinitionKind { diff --git a/test/integration/matchers/matcher-utils.ts b/test/integration/matchers/matcher-utils.ts index 909efbe736..c90c5946a0 100644 --- a/test/integration/matchers/matcher-utils.ts +++ b/test/integration/matchers/matcher-utils.ts @@ -13,12 +13,15 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import type { ExpectedEdgeModelElement, ExpectedFont, ExpectedShapeModelElement } from '../helpers/model-expect'; -import { bpmnVisualization } from '../helpers/model-expect'; -import MatcherContext = jest.MatcherContext; -import CustomMatcherResult = jest.CustomMatcherResult; import type { StyleMap } from 'mxgraph'; import type { Cell, CellStyle, Geometry } from '@maxgraph/core'; +import { constants } from '@maxgraph/core'; + +import MatcherContext = jest.MatcherContext; +import CustomMatcherResult = jest.CustomMatcherResult; + +import type { ExpectedEdgeModelElement, ExpectedFont, ExpectedShapeModelElement } from '../helpers/model-expect'; +import { bpmnVisualization } from '../helpers/model-expect'; import type { MaxGraphCustomOverlay, MaxGraphCustomOverlayStyle } from '../../../src/component/mxgraph/overlay/custom-overlay'; export interface ExpectedStateStyle extends StyleMap { @@ -108,16 +111,16 @@ export function getFontStyleValue(expectedFont: ExpectedFont): number { let value = 0; if (expectedFont) { if (expectedFont.isBold) { - value += mxgraph.mxConstants.FONT_BOLD; + value += constants.FONT_BOLD; } if (expectedFont.isItalic) { - value += mxgraph.mxConstants.FONT_ITALIC; + value += constants.FONT_ITALIC; } if (expectedFont.isStrikeThrough) { - value += mxgraph.mxConstants.FONT_STRIKETHROUGH; + value += constants.FONT_STRIKETHROUGH; } if (expectedFont.isUnderline) { - value += mxgraph.mxConstants.FONT_UNDERLINE; + value += constants.FONT_UNDERLINE; } } return value ? value : undefined; diff --git a/test/integration/matchers/toBeEdge/index.ts b/test/integration/matchers/toBeEdge/index.ts index 025d1dad8a..f94986469b 100644 --- a/test/integration/matchers/toBeEdge/index.ts +++ b/test/integration/matchers/toBeEdge/index.ts @@ -14,6 +14,8 @@ * limitations under the License. */ +import { constants } from '@maxgraph/core'; + import type { ExpectedStateStyle, ExpectedCell } from '../matcher-utils'; import { buildCommonExpectedStateStyle, buildCellMatcher, buildReceivedCellWithCommonAttributes } from '../matcher-utils'; import MatcherContext = jest.MatcherContext; @@ -82,7 +84,7 @@ export function toBeSequenceFlow(this: MatcherContext, received: string, expecte } export function toBeMessageFlow(this: MatcherContext, received: string, expected: ExpectedEdgeModelElement): CustomMatcherResult { - return buildEdgeMatcher('toBeMessageFlow', this, received, { ...expected, kind: FlowKind.MESSAGE_FLOW, startArrow: mxgraph.mxConstants.ARROW_OVAL, endArrow: 'blockThin' }); + return buildEdgeMatcher('toBeMessageFlow', this, received, { ...expected, kind: FlowKind.MESSAGE_FLOW, startArrow: constants.ARROW_OVAL, endArrow: 'blockThin' }); } export function toBeAssociationFlow(this: MatcherContext, received: string, expected: ExpectedEdgeModelElement): CustomMatcherResult { diff --git a/test/integration/matchers/toBeShape/index.ts b/test/integration/matchers/toBeShape/index.ts index 78f023e99f..3d6ac7f569 100644 --- a/test/integration/matchers/toBeShape/index.ts +++ b/test/integration/matchers/toBeShape/index.ts @@ -13,6 +13,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import { constants } from '@maxgraph/core'; + import type { ExpectedCell, ExpectedStateStyle } from '../matcher-utils'; import { buildCellMatcher, buildCommonExpectedStateStyle, buildReceivedCellWithCommonAttributes } from '../matcher-utils'; import type { @@ -140,12 +142,12 @@ export function toBeShape(this: MatcherContext, received: string, expected: Expe export function toBePool(this: MatcherContext, received: string, expected: ExpectedShapeModelElement): CustomMatcherResult { const isHorizontal = 'isHorizontal' in expected ? expected.isHorizontal : true; - return buildShapeMatcher('toBePool', this, received, { ...expected, kind: ShapeBpmnElementKind.POOL, styleShape: mxgraph.mxConstants.SHAPE_SWIMLANE, isHorizontal }); + return buildShapeMatcher('toBePool', this, received, { ...expected, kind: ShapeBpmnElementKind.POOL, styleShape: constants.SHAPE_SWIMLANE, isHorizontal }); } export function toBeLane(this: MatcherContext, received: string, expected: ExpectedShapeModelElement): CustomMatcherResult { const isHorizontal = 'isHorizontal' in expected ? expected.isHorizontal : true; - return buildShapeMatcher('toBeLane', this, received, { ...expected, kind: ShapeBpmnElementKind.LANE, styleShape: mxgraph.mxConstants.SHAPE_SWIMLANE, isHorizontal }); + return buildShapeMatcher('toBeLane', this, received, { ...expected, kind: ShapeBpmnElementKind.LANE, styleShape: constants.SHAPE_SWIMLANE, isHorizontal }); } export function toBeCallActivity(this: MatcherContext, received: string, expected: ExpectedCallActivityModelElement): CustomMatcherResult { diff --git a/test/integration/mxGraph.model.bpmn.elements.test.ts b/test/integration/mxGraph.model.bpmn.elements.test.ts index 9497ac1403..35392f2316 100644 --- a/test/integration/mxGraph.model.bpmn.elements.test.ts +++ b/test/integration/mxGraph.model.bpmn.elements.test.ts @@ -14,7 +14,8 @@ * limitations under the License. */ -import { Point, Geometry } from '@maxgraph/core'; +import { Point, Geometry, constants } from '@maxgraph/core'; + import { MarkerIdentifier, MessageVisibleKind, @@ -1257,7 +1258,7 @@ describe('mxGraph model - BPMN elements', () => { }); expect('conditional_sequence_flow_from_activity_id').toBeSequenceFlow({ sequenceFlowKind: SequenceFlowKind.CONDITIONAL_FROM_ACTIVITY, - startArrow: mxgraph.mxConstants.ARROW_DIAMOND_THIN, + startArrow: constants.ARROW_DIAMOND_THIN, parentId: 'participant_1_id', verticalAlign: 'bottom', }); From 58ea481a56f315a3e1c74de453ddea13da0a5447 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Thu, 24 Nov 2022 11:48:13 +0100 Subject: [PATCH 039/132] Replace mxStyleMap by CellStateStyle --- .../mxgraph/config/StyleConfigurator.ts | 68 +++++++++++-------- test/integration/matchers/matcher-utils.ts | 4 +- 2 files changed, 40 insertions(+), 32 deletions(-) diff --git a/src/component/mxgraph/config/StyleConfigurator.ts b/src/component/mxgraph/config/StyleConfigurator.ts index 6d967f3fe8..45c1034b4d 100644 --- a/src/component/mxgraph/config/StyleConfigurator.ts +++ b/src/component/mxgraph/config/StyleConfigurator.ts @@ -17,8 +17,7 @@ import { AssociationDirectionKind, FlowKind, SequenceFlowKind, ShapeBpmnElementKind, ShapeUtil } from '../../../model/bpmn/internal'; import { BpmnStyleIdentifier, MarkerIdentifier, StyleDefault } from '../style'; import type { BpmnGraph } from '../BpmnGraph'; -import type { StyleMap } from 'mxgraph'; -import type { Stylesheet } from '@maxgraph/core'; +import type { Stylesheet, CellStateStyle } from '@maxgraph/core'; import { constants } from '@maxgraph/core'; /** @@ -33,13 +32,13 @@ export class StyleConfigurator { private specificFlowStyles = new MapWithDefault([ [ FlowKind.SEQUENCE_FLOW, - (style: StyleMap) => { + (style: CellStateStyle) => { style[constants.STYLE_ENDARROW] = constants.ARROW_BLOCK_THIN; }, ], [ FlowKind.MESSAGE_FLOW, - (style: StyleMap) => { + (style: CellStateStyle) => { style[constants.STYLE_DASHED] = true; style[constants.STYLE_DASH_PATTERN] = '8 5'; style[constants.STYLE_STARTARROW] = constants.ARROW_OVAL; @@ -53,7 +52,7 @@ export class StyleConfigurator { ], [ FlowKind.ASSOCIATION_FLOW, - (style: StyleMap) => { + (style: CellStateStyle) => { style[constants.STYLE_DASHED] = true; style[constants.STYLE_DASH_PATTERN] = '1 2'; style[constants.STYLE_ENDARROW] = constants.ARROW_OPEN_THIN; @@ -65,13 +64,13 @@ export class StyleConfigurator { private specificSequenceFlowStyles = new MapWithDefault([ [ SequenceFlowKind.DEFAULT, - (style: StyleMap) => { + (style: CellStateStyle) => { style[constants.STYLE_STARTARROW] = MarkerIdentifier.ARROW_DASH; }, ], [ SequenceFlowKind.CONDITIONAL_FROM_ACTIVITY, - (style: StyleMap) => { + (style: CellStateStyle) => { style[constants.STYLE_STARTARROW] = constants.ARROW_DIAMOND_THIN; style[constants.STYLE_STARTSIZE] = 18; style[constants.STYLE_STARTFILL] = true; @@ -82,21 +81,21 @@ export class StyleConfigurator { private specificAssociationFlowStyles = new MapWithDefault([ [ AssociationDirectionKind.NONE, - (style: StyleMap) => { + (style: CellStateStyle) => { style[constants.STYLE_STARTARROW] = undefined; style[constants.STYLE_ENDARROW] = undefined; }, ], [ AssociationDirectionKind.ONE, - (style: StyleMap) => { + (style: CellStateStyle) => { style[constants.STYLE_STARTARROW] = undefined; }, ], [ AssociationDirectionKind.BOTH, // eslint-disable-next-line @typescript-eslint/no-unused-vars -- prefix parameter name - common practice to acknowledge the fact that some parameter is unused (e.g. in TypeScript compiler) - (_style: StyleMap) => { + (_style: CellStateStyle) => { // the style is fully managed by the FlowKind.ASSOCIATION_FLOW style }, ], @@ -125,7 +124,7 @@ export class StyleConfigurator { return this.graph.getStylesheet(); } - private putCellStyle(name: ShapeBpmnElementKind, style: StyleMap): void { + private putCellStyle(name: ShapeBpmnElementKind, style: CellStateStyle): void { this.getStylesheet().putCellStyle(name, style); } @@ -134,20 +133,29 @@ export class StyleConfigurator { } private configurePoolStyle(): void { - const style: StyleMap = {}; - style[constants.STYLE_SHAPE] = constants.SHAPE_SWIMLANE; - - // label style - style[constants.STYLE_VERTICAL_ALIGN] = constants.ALIGN_MIDDLE; - style[constants.STYLE_ALIGN] = constants.ALIGN_CENTER; - style[constants.STYLE_STARTSIZE] = StyleDefault.POOL_LABEL_SIZE; - style[constants.STYLE_FILLCOLOR] = StyleDefault.POOL_LABEL_FILL_COLOR; + const style: CellStateStyle = { + shape: constants.SHAPE.SWIMLANE, + // label style + verticalAlign : constants.ALIGN.MIDDLE, + align: constants.ALIGN.CENTER, + startSize: StyleDefault.POOL_LABEL_SIZE, + fillColor: StyleDefault.POOL_LABEL_FILL_COLOR, + }; this.graph.getStylesheet().putCellStyle(ShapeBpmnElementKind.POOL, style); } private configureLaneStyle(): void { - const style: StyleMap = {}; + const style: CellStateStyle = { + shape: constants.SHAPE.SWIMLANE, + // label style + verticalAlign : constants.ALIGN.MIDDLE, + align: constants.ALIGN.CENTER, + startSize: StyleDefault.POOL_LABEL_SIZE, + fillColor: StyleDefault.POOL_LABEL_FILL_COLOR, + }; + + const style: CellStateStyle = {}; style[constants.STYLE_SHAPE] = constants.SHAPE_SWIMLANE; // label style @@ -162,7 +170,7 @@ export class StyleConfigurator { private configureEventStyles(): void { ShapeUtil.eventKinds().forEach(kind => { - const style: StyleMap = {}; + const style: CellStateStyle = {}; style[constants.STYLE_SHAPE] = kind; style[constants.STYLE_PERIMETER] = mxgraph.mxPerimeter.EllipsePerimeter; style[constants.STYLE_STROKEWIDTH] = kind == ShapeBpmnElementKind.EVENT_END ? StyleDefault.STROKE_WIDTH_THICK : StyleDefault.STROKE_WIDTH_THIN; @@ -172,7 +180,7 @@ export class StyleConfigurator { } private configureTextAnnotationStyle(): void { - const style: StyleMap = {}; + const style: CellStateStyle = {}; style[constants.STYLE_SHAPE] = ShapeBpmnElementKind.TEXT_ANNOTATION; style[constants.STYLE_VERTICAL_ALIGN] = constants.ALIGN_MIDDLE; style[constants.STYLE_ALIGN] = constants.ALIGN_LEFT; @@ -183,7 +191,7 @@ export class StyleConfigurator { } private configureGroupStyle(): void { - const style: StyleMap = {}; + const style: CellStateStyle = {}; style[constants.STYLE_ROUNDED] = true; style[constants.STYLE_ABSOLUTE_ARCSIZE] = true; style[constants.STYLE_ARCSIZE] = StyleDefault.SHAPE_ARC_SIZE; @@ -200,7 +208,7 @@ export class StyleConfigurator { private configureActivityStyles(): void { ShapeUtil.activityKinds().forEach(kind => { - const style: StyleMap = {}; + const style: CellStateStyle = {}; style[constants.STYLE_SHAPE] = kind; style[constants.STYLE_VERTICAL_ALIGN] = constants.ALIGN_MIDDLE; style[constants.STYLE_ABSOLUTE_ARCSIZE] = true; @@ -212,7 +220,7 @@ export class StyleConfigurator { private configureGatewayStyles(): void { ShapeUtil.gatewayKinds().forEach(kind => { - const style: StyleMap = {}; + const style: CellStateStyle = {}; style[constants.STYLE_SHAPE] = kind; style[constants.STYLE_PERIMETER] = mxgraph.mxPerimeter.RhombusPerimeter; style[constants.STYLE_STROKEWIDTH] = StyleDefault.STROKE_WIDTH_THIN; @@ -240,7 +248,7 @@ export class StyleConfigurator { StyleConfigurator.configureCommonDefaultStyle(style); } - private static configureCommonDefaultStyle(style: StyleMap): void { + private static configureCommonDefaultStyle(style: CellStateStyle): void { style[constants.STYLE_FONTFAMILY] = StyleDefault.DEFAULT_FONT_FAMILY; style[constants.STYLE_FONTSIZE] = StyleDefault.DEFAULT_FONT_SIZE; style[constants.STYLE_FONTCOLOR] = StyleDefault.DEFAULT_FONT_COLOR; @@ -252,9 +260,9 @@ export class StyleConfigurator { style[constants.STYLE_WHITE_SPACE] = 'wrap'; } - private configureEdgeStyles(styleKinds: T[], specificStyles: Map void>): void { + private configureEdgeStyles(styleKinds: T[], specificStyles: Map void>): void { styleKinds.forEach(kind => { - const style: StyleMap = {}; + const style: CellStateStyle = {}; specificStyles.get(kind)(style); this.graph.getStylesheet().putCellStyle(kind.toString(), style); }); @@ -267,8 +275,8 @@ export class StyleConfigurator { } } -class MapWithDefault extends Map void> { - override get(key: T): (style: StyleMap) => void { +class MapWithDefault extends Map void> { + override get(key: T): (style: CellStateStyle) => void { return ( super.get(key) ?? (() => { diff --git a/test/integration/matchers/matcher-utils.ts b/test/integration/matchers/matcher-utils.ts index c90c5946a0..30a690f6b3 100644 --- a/test/integration/matchers/matcher-utils.ts +++ b/test/integration/matchers/matcher-utils.ts @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import type { StyleMap } from 'mxgraph'; +import type { CellStateStyle } from 'mxgraph'; import type { Cell, CellStyle, Geometry } from '@maxgraph/core'; import { constants } from '@maxgraph/core'; @@ -24,7 +24,7 @@ import type { ExpectedEdgeModelElement, ExpectedFont, ExpectedShapeModelElement import { bpmnVisualization } from '../helpers/model-expect'; import type { MaxGraphCustomOverlay, MaxGraphCustomOverlayStyle } from '../../../src/component/mxgraph/overlay/custom-overlay'; -export interface ExpectedStateStyle extends StyleMap { +export interface ExpectedStateStyle extends CellStateStyle { verticalAlign?: string; align?: string; strokeWidth?: number; From b0430b9c238115c0269d17cf90405e7e5f773a99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Thu, 24 Nov 2022 17:48:10 +0100 Subject: [PATCH 040/132] Replace mxConstants by constants --- dev/ts/component/ThemedBpmnVisualization.ts | 36 ++-- .../mxgraph/config/ShapeConfigurator.ts | 12 +- .../mxgraph/config/StyleConfigurator.ts | 175 +++++++++--------- .../mxgraph/renderer/StyleComputer.ts | 8 +- src/component/mxgraph/style/utils.ts | 53 +++--- test/integration/helpers/model-expect.ts | 12 +- test/integration/matchers/matcher-utils.ts | 23 ++- test/integration/matchers/toBeEdge/index.ts | 11 +- test/integration/matchers/toBeShape/index.ts | 8 +- .../mxGraph.model.bpmn.elements.test.ts | 2 +- 10 files changed, 167 insertions(+), 173 deletions(-) diff --git a/dev/ts/component/ThemedBpmnVisualization.ts b/dev/ts/component/ThemedBpmnVisualization.ts index 23a6250610..919f13e337 100644 --- a/dev/ts/component/ThemedBpmnVisualization.ts +++ b/dev/ts/component/ThemedBpmnVisualization.ts @@ -139,43 +139,43 @@ export class ThemedBpmnVisualization extends BpmnVisualization { strokeColor = theme.defaultStrokeColor; break; } - const style = styleSheet.styles[kind]; - style['fillColor'] = fillColor; + const style = styleSheet.styles.get(kind); + style.fillColor = fillColor; style['strokeColor'] = strokeColor; }); // TASK ShapeUtil.taskKinds().forEach(kind => { - const style = styleSheet.styles[kind]; - style['fillColor'] = theme.taskAndCallActivityFillColor; + const style = styleSheet.styles.get(kind); + style.fillColor = theme.taskAndCallActivityFillColor; }); // CALL ACTIVITY - const callActivityStyle = styleSheet.styles[ShapeBpmnElementKind.CALL_ACTIVITY]; - callActivityStyle['fillColor'] = theme.taskAndCallActivityFillColor; + const callActivityStyle = styleSheet.styles.get(ShapeBpmnElementKind.CALL_ACTIVITY); + callActivityStyle.fillColor = theme.taskAndCallActivityFillColor; // TEXT ANNOTATION - const textAnnotationStyle = styleSheet.styles[ShapeBpmnElementKind.TEXT_ANNOTATION]; - textAnnotationStyle['fillColor'] = theme.textAnnotationFillColor ?? StyleDefault.TEXT_ANNOTATION_FILL_COLOR; + const textAnnotationStyle = styleSheet.styles.get(ShapeBpmnElementKind.TEXT_ANNOTATION); + textAnnotationStyle.fillColor = theme.textAnnotationFillColor ?? StyleDefault.TEXT_ANNOTATION_FILL_COLOR; // POOL - const poolStyle = styleSheet.styles[ShapeBpmnElementKind.POOL]; - poolStyle['fillColor'] = theme.poolFillColor; - poolStyle['swimlaneFillColor'] = theme.defaultFillColor; + const poolStyle = styleSheet.styles.get(ShapeBpmnElementKind.POOL); + poolStyle.fillColor = theme.poolFillColor; + poolStyle.swimlaneFillColor = theme.defaultFillColor; // LANE - const laneStyle = styleSheet.styles[ShapeBpmnElementKind.LANE]; - laneStyle['fillColor'] = theme.laneFillColor; + const laneStyle = styleSheet.styles.get(ShapeBpmnElementKind.LANE); + laneStyle.fillColor = theme.laneFillColor; // DEFAULTS const defaultVertexStyle = styleSheet.getDefaultVertexStyle(); defaultVertexStyle['fontColor'] = theme.defaultFontColor; - defaultVertexStyle['fillColor'] = theme.defaultFillColor; + defaultVertexStyle.fillColor = theme.defaultFillColor; defaultVertexStyle['strokeColor'] = theme.defaultStrokeColor; const defaultEdgeStyle = styleSheet.getDefaultEdgeStyle(); defaultEdgeStyle['fontColor'] = theme.defaultFontColor; - defaultEdgeStyle['fillColor'] = theme.defaultFillColor; + defaultEdgeStyle.fillColor = theme.defaultFillColor; defaultEdgeStyle['strokeColor'] = theme.flowColor ?? theme.defaultStrokeColor; // theme configuration completed @@ -188,9 +188,9 @@ export class ThemedBpmnVisualization extends BpmnVisualization { const stylesheet = this.graph.getStylesheet(); // directly access the 'styles' map to update values. Using stylesheet.getCellStyle returns a copy of the style - const seqFlowStyle = stylesheet.styles[FlowKind.SEQUENCE_FLOW]; - seqFlowStyle[constants.STYLE_STROKECOLOR] = color; - seqFlowStyle[constants.STYLE_FILLCOLOR] = color; + const seqFlowStyle = stylesheet.styles.get(FlowKind.SEQUENCE_FLOW); + seqFlowStyle.strokeColor = color; + seqFlowStyle.fillColor = color; logStartup('Sequence flows style updated'); } diff --git a/src/component/mxgraph/config/ShapeConfigurator.ts b/src/component/mxgraph/config/ShapeConfigurator.ts index 940684bae1..b27f48e81d 100644 --- a/src/component/mxgraph/config/ShapeConfigurator.ts +++ b/src/component/mxgraph/config/ShapeConfigurator.ts @@ -108,18 +108,18 @@ export default class ShapeConfigurator { // END OF Fix for issue #920 '; '; - if ((s.fontStyle & constants.FONT_BOLD) == constants.FONT_BOLD) { + if ((s.fontStyle & constants.FONT.BOLD) == constants.FONT.BOLD) { css += 'font-weight: bold; '; } - if ((s.fontStyle & constants.FONT_ITALIC) == constants.FONT_ITALIC) { + if ((s.fontStyle & constants.FONT.ITALIC) == constants.FONT.ITALIC) { css += 'font-style: italic; '; } const deco = []; - if ((s.fontStyle & constants.FONT_UNDERLINE) == constants.FONT_UNDERLINE) { + if ((s.fontStyle & constants.FONT.UNDERLINE) == constants.FONT.UNDERLINE) { deco.push('underline'); } - if ((s.fontStyle & constants.FONT_STRIKETHROUGH) == constants.FONT_STRIKETHROUGH) { + if ((s.fontStyle & constants.FONT.STRIKETHROUGH) == constants.FONT.STRIKETHROUGH) { deco.push('line-through'); } if (deco.length > 0) { @@ -152,8 +152,8 @@ export default class ShapeConfigurator { // 'this.state.cell.style' = the style applied to the cell: 1st element: style name = bpmn shape name const cell = this.state.cell; // dialect = strictHtml is set means that current node holds an html label - let allBpmnClassNames = computeAllBpmnClassNamesOfCell(cell, this.dialect === constants.DIALECT_STRICTHTML); - const extraCssClasses = this.state.style[BpmnStyleIdentifier.EXTRA_CSS_CLASSES]; + let allBpmnClassNames = computeAllBpmnClassNamesOfCell(cell, this.dialect === constants.DIALECT.STRICTHTML); + const extraCssClasses = this.state.style.bpmn.extra.css.classes; if (extraCssClasses) { allBpmnClassNames = allBpmnClassNames.concat(extraCssClasses); } diff --git a/src/component/mxgraph/config/StyleConfigurator.ts b/src/component/mxgraph/config/StyleConfigurator.ts index 45c1034b4d..c0b34ce104 100644 --- a/src/component/mxgraph/config/StyleConfigurator.ts +++ b/src/component/mxgraph/config/StyleConfigurator.ts @@ -33,31 +33,31 @@ export class StyleConfigurator { [ FlowKind.SEQUENCE_FLOW, (style: CellStateStyle) => { - style[constants.STYLE_ENDARROW] = constants.ARROW_BLOCK_THIN; + style.endArrow = constants.ARROW.BLOCK_THIN; }, ], [ FlowKind.MESSAGE_FLOW, (style: CellStateStyle) => { - style[constants.STYLE_DASHED] = true; - style[constants.STYLE_DASH_PATTERN] = '8 5'; - style[constants.STYLE_STARTARROW] = constants.ARROW_OVAL; - style[constants.STYLE_STARTSIZE] = 8; - style[constants.STYLE_STARTFILL] = true; - style[BpmnStyleIdentifier.EDGE_START_FILL_COLOR] = StyleDefault.MESSAGE_FLOW_MARKER_START_FILL_COLOR; - style[constants.STYLE_ENDARROW] = constants.ARROW_BLOCK_THIN; - style[constants.STYLE_ENDFILL] = true; - style[BpmnStyleIdentifier.EDGE_END_FILL_COLOR] = StyleDefault.MESSAGE_FLOW_MARKER_END_FILL_COLOR; + style.dashed = true; + style.dashPattern = '8 5'; + style.startArrow = constants.ARROW.OVAL; + style.startSize = 8; + style.startFill = true; + style.bpmn.edge.startFillColor = StyleDefault.MESSAGE_FLOW_MARKER_START_FILL_COLOR; + style.endArrow = constants.ARROW.BLOCK_THIN; + style.endFill = true; + style.bpmn.edge.endFillColor = StyleDefault.MESSAGE_FLOW_MARKER_END_FILL_COLOR; }, ], [ FlowKind.ASSOCIATION_FLOW, (style: CellStateStyle) => { - style[constants.STYLE_DASHED] = true; - style[constants.STYLE_DASH_PATTERN] = '1 2'; - style[constants.STYLE_ENDARROW] = constants.ARROW_OPEN_THIN; - style[constants.STYLE_STARTARROW] = constants.ARROW_OPEN_THIN; - style[constants.STYLE_STARTSIZE] = 12; + style.dashed = true; + style.dashPattern = '1 2'; + style.endArrow = constants.ARROW.OPEN_THIN; + style.startArrow = constants.ARROW.OPEN_THIN; + style.startSize = 12; }, ], ]); @@ -65,16 +65,16 @@ export class StyleConfigurator { [ SequenceFlowKind.DEFAULT, (style: CellStateStyle) => { - style[constants.STYLE_STARTARROW] = MarkerIdentifier.ARROW_DASH; + style.startArrow = MarkerIdentifier.ARROW_DASH; }, ], [ SequenceFlowKind.CONDITIONAL_FROM_ACTIVITY, (style: CellStateStyle) => { - style[constants.STYLE_STARTARROW] = constants.ARROW_DIAMOND_THIN; - style[constants.STYLE_STARTSIZE] = 18; - style[constants.STYLE_STARTFILL] = true; - style[BpmnStyleIdentifier.EDGE_START_FILL_COLOR] = StyleDefault.SEQUENCE_FLOW_CONDITIONAL_FROM_ACTIVITY_MARKER_FILL_COLOR; + style.startArrow = constants.ARROW.DIAMOND_THIN; + style.startSize = 18; + style.startFill = true; + style.bpmn.edge.startFillColor = StyleDefault.SEQUENCE_FLOW_CONDITIONAL_FROM_ACTIVITY_MARKER_FILL_COLOR; }, ], ]); @@ -82,14 +82,14 @@ export class StyleConfigurator { [ AssociationDirectionKind.NONE, (style: CellStateStyle) => { - style[constants.STYLE_STARTARROW] = undefined; - style[constants.STYLE_ENDARROW] = undefined; + style.startArrow = undefined; + style.endArrow = undefined; }, ], [ AssociationDirectionKind.ONE, (style: CellStateStyle) => { - style[constants.STYLE_STARTARROW] = undefined; + style.startArrow = undefined; }, ], [ @@ -151,113 +151,110 @@ export class StyleConfigurator { // label style verticalAlign : constants.ALIGN.MIDDLE, align: constants.ALIGN.CENTER, - startSize: StyleDefault.POOL_LABEL_SIZE, - fillColor: StyleDefault.POOL_LABEL_FILL_COLOR, + swimlaneLine: false, // hide the line between the title region and the content area + startSize: StyleDefault.LANE_LABEL_SIZE, + fillColor: StyleDefault.LANE_LABEL_FILL_COLOR, }; - const style: CellStateStyle = {}; - style[constants.STYLE_SHAPE] = constants.SHAPE_SWIMLANE; - - // label style - style[constants.STYLE_VERTICAL_ALIGN] = constants.ALIGN_MIDDLE; - style[constants.STYLE_ALIGN] = constants.ALIGN_CENTER; - style[constants.STYLE_SWIMLANE_LINE] = 0; // hide the line between the title region and the content area - style[constants.STYLE_STARTSIZE] = StyleDefault.LANE_LABEL_SIZE; - style[constants.STYLE_FILLCOLOR] = StyleDefault.LANE_LABEL_FILL_COLOR; - this.graph.getStylesheet().putCellStyle(ShapeBpmnElementKind.LANE, style); } private configureEventStyles(): void { ShapeUtil.eventKinds().forEach(kind => { - const style: CellStateStyle = {}; - style[constants.STYLE_SHAPE] = kind; - style[constants.STYLE_PERIMETER] = mxgraph.mxPerimeter.EllipsePerimeter; - style[constants.STYLE_STROKEWIDTH] = kind == ShapeBpmnElementKind.EVENT_END ? StyleDefault.STROKE_WIDTH_THICK : StyleDefault.STROKE_WIDTH_THIN; - style[constants.STYLE_VERTICAL_LABEL_POSITION] = constants.ALIGN_BOTTOM; + const style: CellStateStyle = { + shape: kind, + perimeter: mxgraph.mxPerimeter.EllipsePerimeter, + strokeWidth: kind == ShapeBpmnElementKind.EVENT_END ? StyleDefault.STROKE_WIDTH_THICK : StyleDefault.STROKE_WIDTH_THIN, + verticalLabelPosition: constants.ALIGN.BOTTOM, + }; this.putCellStyle(kind, style); }); } private configureTextAnnotationStyle(): void { - const style: CellStateStyle = {}; - style[constants.STYLE_SHAPE] = ShapeBpmnElementKind.TEXT_ANNOTATION; - style[constants.STYLE_VERTICAL_ALIGN] = constants.ALIGN_MIDDLE; - style[constants.STYLE_ALIGN] = constants.ALIGN_LEFT; - style[constants.STYLE_SPACING_LEFT] = 5; - style[constants.STYLE_FILLCOLOR] = StyleDefault.TEXT_ANNOTATION_FILL_COLOR; - style[constants.STYLE_STROKEWIDTH] = StyleDefault.STROKE_WIDTH_THIN; + const style: CellStateStyle = { + shape: ShapeBpmnElementKind.TEXT_ANNOTATION, + // label style + verticalAlign : constants.ALIGN.MIDDLE, + align: constants.ALIGN.LEFT, + spacingLeft: 5, + fillColor: StyleDefault.TEXT_ANNOTATION_FILL_COLOR, + strokeWidth: StyleDefault.STROKE_WIDTH_THIN, + }; this.putCellStyle(ShapeBpmnElementKind.TEXT_ANNOTATION, style); } private configureGroupStyle(): void { - const style: CellStateStyle = {}; - style[constants.STYLE_ROUNDED] = true; - style[constants.STYLE_ABSOLUTE_ARCSIZE] = true; - style[constants.STYLE_ARCSIZE] = StyleDefault.SHAPE_ARC_SIZE; - style[constants.STYLE_DASHED] = true; - style[constants.STYLE_DASH_PATTERN] = '7 4 1 4'; - style[constants.STYLE_STROKEWIDTH] = StyleDefault.STROKE_WIDTH_THIN; - style[constants.STYLE_FILLCOLOR] = StyleDefault.GROUP_FILL_COLOR; - // Default label positioning - style[constants.STYLE_ALIGN] = constants.ALIGN_CENTER; - style[constants.STYLE_VERTICAL_ALIGN] = constants.ALIGN_TOP; + const style: CellStateStyle = { + rounded:true, + absoluteArcSize: 1, + arcSize: StyleDefault.SHAPE_ARC_SIZE, + dashed: true, + dashPattern: '7 4 1 4', + strokeWidth: StyleDefault.STROKE_WIDTH_THIN, + fillColor: StyleDefault.GROUP_FILL_COLOR, + // Default label positioning + align: constants.ALIGN.CENTER, + verticalAlign: constants.ALIGN.TOP, + }; this.putCellStyle(ShapeBpmnElementKind.GROUP, style); } private configureActivityStyles(): void { ShapeUtil.activityKinds().forEach(kind => { - const style: CellStateStyle = {}; - style[constants.STYLE_SHAPE] = kind; - style[constants.STYLE_VERTICAL_ALIGN] = constants.ALIGN_MIDDLE; - style[constants.STYLE_ABSOLUTE_ARCSIZE] = true; - style[constants.STYLE_ARCSIZE] = StyleDefault.SHAPE_ARC_SIZE; - style[constants.STYLE_STROKEWIDTH] = kind == ShapeBpmnElementKind.CALL_ACTIVITY ? StyleDefault.STROKE_WIDTH_THICK : StyleDefault.STROKE_WIDTH_THIN; + const style: CellStateStyle = { + shape: kind, + absoluteArcSize: 1, + arcSize: StyleDefault.SHAPE_ARC_SIZE, + + // label style + verticalAlign: constants.ALIGN.MIDDLE, + strokeWidth: kind == ShapeBpmnElementKind.CALL_ACTIVITY ? StyleDefault.STROKE_WIDTH_THICK : StyleDefault.STROKE_WIDTH_THIN, + }; this.putCellStyle(kind, style); }); } private configureGatewayStyles(): void { ShapeUtil.gatewayKinds().forEach(kind => { - const style: CellStateStyle = {}; - style[constants.STYLE_SHAPE] = kind; - style[constants.STYLE_PERIMETER] = mxgraph.mxPerimeter.RhombusPerimeter; - style[constants.STYLE_STROKEWIDTH] = StyleDefault.STROKE_WIDTH_THIN; - style[constants.STYLE_VERTICAL_ALIGN] = constants.ALIGN_TOP; - - // Default label positioning - style[constants.STYLE_LABEL_POSITION] = constants.ALIGN_LEFT; - style[constants.STYLE_VERTICAL_LABEL_POSITION] = constants.ALIGN_TOP; - + const style: CellStateStyle = { + shape: kind, + perimeter: mxgraph.mxPerimeter.RhombusPerimeter, + verticalAlign: constants.ALIGN.TOP, + strokeWidth: StyleDefault.STROKE_WIDTH_THIN, + + // Default label positioning + labelPosition: constants.ALIGN.LEFT, + verticalLabelPosition: constants.ALIGN.TOP, + }; this.putCellStyle(kind, style); }); } private configureDefaultEdgeStyle(): void { const style = this.getStylesheet().getDefaultEdgeStyle(); - style[constants.STYLE_SHAPE] = BpmnStyleIdentifier.EDGE; - style[constants.STYLE_ENDSIZE] = 12; - style[constants.STYLE_STROKEWIDTH] = 1.5; - style[constants.STYLE_ROUNDED] = 1; - style[constants.STYLE_ARCSIZE] = 5; - style[constants.STYLE_VERTICAL_ALIGN] = constants.ALIGN_BOTTOM; - - delete style[constants.STYLE_ENDARROW]; + style.shape = BpmnStyleIdentifier.EDGE; + style.endSize = 12; + style.strokeWidth = 1.5; + style.rounded = true; + style.arcSize = 5; + style.verticalAlign = constants.ALIGN.BOTTOM; + style.endArrow = undefined; StyleConfigurator.configureCommonDefaultStyle(style); } private static configureCommonDefaultStyle(style: CellStateStyle): void { - style[constants.STYLE_FONTFAMILY] = StyleDefault.DEFAULT_FONT_FAMILY; - style[constants.STYLE_FONTSIZE] = StyleDefault.DEFAULT_FONT_SIZE; - style[constants.STYLE_FONTCOLOR] = StyleDefault.DEFAULT_FONT_COLOR; - style[constants.STYLE_FILLCOLOR] = StyleDefault.DEFAULT_FILL_COLOR; - style[constants.STYLE_STROKECOLOR] = StyleDefault.DEFAULT_STROKE_COLOR; - style[constants.STYLE_LABEL_BACKGROUNDCOLOR] = constants.NONE; + style.fontFamily = StyleDefault.DEFAULT_FONT_FAMILY; + style.fontSize = StyleDefault.DEFAULT_FONT_SIZE; + style.fontColor = StyleDefault.DEFAULT_FONT_COLOR; + style.fillColor = StyleDefault.DEFAULT_FILL_COLOR; + style.strokeColor = StyleDefault.DEFAULT_STROKE_COLOR; + style.labelBackgroundColor = constants.NONE; // only works with html labels (enabled by GraphConfigurator) - style[constants.STYLE_WHITE_SPACE] = 'wrap'; + style.whiteSpace = 'wrap'; } private configureEdgeStyles(styleKinds: T[], specificStyles: Map void>): void { diff --git a/src/component/mxgraph/renderer/StyleComputer.ts b/src/component/mxgraph/renderer/StyleComputer.ts index e54578eba9..1c14bf276b 100644 --- a/src/component/mxgraph/renderer/StyleComputer.ts +++ b/src/component/mxgraph/renderer/StyleComputer.ts @@ -165,16 +165,16 @@ export default class StyleComputer { private static getFontStyleValue(font: Font): number { let value = 0; if (font.isBold) { - value += constants.FONT_BOLD; + value += constants.FONT.BOLD; } if (font.isItalic) { - value += constants.FONT_ITALIC; + value += constants.FONT.ITALIC; } if (font.isStrikeThrough) { - value += constants.FONT_STRIKETHROUGH; + value += constants.FONT.STRIKETHROUGH; } if (font.isUnderline) { - value += constants.FONT_UNDERLINE; + value += constants.FONT.UNDERLINE; } return value; } diff --git a/src/component/mxgraph/style/utils.ts b/src/component/mxgraph/style/utils.ts index 86bfdc784d..8e9a8320fb 100644 --- a/src/component/mxgraph/style/utils.ts +++ b/src/component/mxgraph/style/utils.ts @@ -14,11 +14,10 @@ * limitations under the License. */ -import { utils, constants } from '@maxgraph/core'; +import type { CellStateStyle } from '@maxgraph/core'; import type { GlobalTaskKind, MessageVisibleKind, ShapeBpmnSubProcessKind } from '../../../model/bpmn/internal'; import { ShapeBpmnEventBasedGatewayKind, ShapeBpmnEventDefinitionKind } from '../../../model/bpmn/internal'; -import { BpmnStyleIdentifier } from './identifiers'; /** * Store all rendering defaults used by `bpmn-visualization`. @@ -66,7 +65,6 @@ export enum StyleDefault { MESSAGE_FLOW_MARKER_END_FILL_COLOR = 'White', } -/* eslint-disable @typescript-eslint/no-explicit-any,@typescript-eslint/explicit-module-boundary-types */ /** * **WARN**: You may use it to customize the BPMN Theme as suggested in the examples. But be aware that the way the default BPMN theme can be modified is subject to change. * @@ -74,52 +72,51 @@ export enum StyleDefault { * @experimental */ export class StyleUtils { - static getFillColor(style: any): string { - return utils.getValue(style, constants.STYLE_FILLCOLOR, StyleDefault.DEFAULT_FILL_COLOR); + static getFillColor(style: CellStateStyle): string { + return style.fillColor ?? StyleDefault.DEFAULT_FILL_COLOR; } - static getStrokeColor(style: any): string { - return utils.getValue(style, constants.STYLE_STROKECOLOR, StyleDefault.DEFAULT_STROKE_COLOR); + static getStrokeColor(style: CellStateStyle): string { + return style.strokeColor ?? StyleDefault.DEFAULT_STROKE_COLOR; } - static getStrokeWidth(style: any): number { - return utils.getValue(style, constants.STYLE_STROKEWIDTH, StyleDefault.STROKE_WIDTH_THIN); + static getStrokeWidth(style: CellStateStyle): number { + return style.strokeWidth ?? StyleDefault.STROKE_WIDTH_THIN; } - static getMargin(style: any): number { - return utils.getValue(style, constants.STYLE_MARGIN, StyleDefault.DEFAULT_MARGIN); + static getMargin(style: CellStateStyle): number { + return style.margin ?? StyleDefault.DEFAULT_MARGIN; } - static getBpmnEventDefinitionKind(style: any): ShapeBpmnEventDefinitionKind { - return utils.getValue(style, BpmnStyleIdentifier.EVENT_DEFINITION_KIND, ShapeBpmnEventDefinitionKind.NONE); + static getBpmnEventDefinitionKind(style: CellStateStyle): ShapeBpmnEventDefinitionKind { + return style.bpmn.eventDefinitionKind ?? ShapeBpmnEventDefinitionKind.NONE; } - static getBpmnSubProcessKind(style: any): ShapeBpmnSubProcessKind { - return utils.getValue(style, BpmnStyleIdentifier.SUB_PROCESS_KIND, undefined); + static getBpmnSubProcessKind(style: CellStateStyle): ShapeBpmnSubProcessKind { + return style.bpmn.subProcessKind; } - static getBpmnIsInterrupting(style: any): string { - return utils.getValue(style, BpmnStyleIdentifier.IS_INTERRUPTING, undefined); + static getBpmnIsInterrupting(style: CellStateStyle): string { + return style.bpmn.isInterrupting; } - static getBpmnMarkers(style: any): string { - return utils.getValue(style, BpmnStyleIdentifier.MARKERS, undefined); + static getBpmnMarkers(style: CellStateStyle): string { + return style.bpmn.markers; } - static getBpmnIsInstantiating(style: any): boolean { - return JSON.parse(utils.getValue(style, BpmnStyleIdentifier.IS_INSTANTIATING, false)); + static getBpmnIsInstantiating(style: CellStateStyle): boolean { + return style.bpmn.isInstantiating ?? false; } - static getBpmnIsInitiating(style: any): MessageVisibleKind { - return utils.getValue(style, BpmnStyleIdentifier.IS_INITIATING, undefined); + static getBpmnIsInitiating(style: CellStateStyle): MessageVisibleKind { + return style.bpmn.isInitiating; } - static getBpmnIsParallelEventBasedGateway(style: any): boolean { - return utils.getValue(style, BpmnStyleIdentifier.EVENT_BASED_GATEWAY_KIND, ShapeBpmnEventBasedGatewayKind.Exclusive) == ShapeBpmnEventBasedGatewayKind.Parallel; + static getBpmnIsParallelEventBasedGateway(style: CellStateStyle): boolean { + return (style.bpmn.gatewayKind ?? ShapeBpmnEventBasedGatewayKind.Exclusive) == ShapeBpmnEventBasedGatewayKind.Parallel } - static getBpmnGlobalTaskKind(style: any): GlobalTaskKind { - return utils.getValue(style, BpmnStyleIdentifier.GLOBAL_TASK_KIND, undefined); + static getBpmnGlobalTaskKind(style: CellStateStyle): GlobalTaskKind { + return style.bpmn.globalTaskKind; } } -/* eslint-enable @typescript-eslint/no-explicit-any,@typescript-eslint/explicit-module-boundary-types */ diff --git a/test/integration/helpers/model-expect.ts b/test/integration/helpers/model-expect.ts index 052c7e6a09..ef4459cd6b 100644 --- a/test/integration/helpers/model-expect.ts +++ b/test/integration/helpers/model-expect.ts @@ -50,7 +50,7 @@ import { toBeTask, toBeUserTask, } from '../matchers'; -import type { Cell, FilterFunction } from '@maxgraph/core'; +import type {ArrowType, Cell, FilterFunction, VAlignValue} from '@maxgraph/core'; import { Geometry } from '@maxgraph/core'; import type { ExpectedOverlay } from '../matchers/matcher-utils'; import { getCell } from '../matchers/matcher-utils'; @@ -160,9 +160,9 @@ export interface ExpectedEdgeModelElement { kind?: FlowKind; parentId?: string; font?: ExpectedFont; - startArrow?: string; - endArrow?: string; - verticalAlign?: string; + startArrow?: ArrowType; + endArrow?: ArrowType; + verticalAlign?: VAlignValue; messageVisibleKind?: MessageVisibleKind; overlays?: ExpectedOverlay[]; } @@ -194,9 +194,7 @@ const expectElementsInModel = (parentId: string, elementsNumber: number, filter: }; export const expectPoolsInModel = (pools: number): void => { - expectElementsInModel(undefined, pools, (cell: Cell): boolean => { - return cell.style?.startsWith(ShapeBpmnElementKind.POOL); - }); + expectElementsInModel(undefined, pools, (cell: Cell): boolean => !!cell.style[ShapeBpmnElementKind.POOL]); }; export const expectShapesInModel = (parentId: string, shapesNumber: number): void => { diff --git a/test/integration/matchers/matcher-utils.ts b/test/integration/matchers/matcher-utils.ts index 30a690f6b3..f34bcc8396 100644 --- a/test/integration/matchers/matcher-utils.ts +++ b/test/integration/matchers/matcher-utils.ts @@ -13,9 +13,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import type { CellStateStyle } from 'mxgraph'; -import type { Cell, CellStyle, Geometry } from '@maxgraph/core'; -import { constants } from '@maxgraph/core'; +import type { Cell, CellStyle, Geometry, AlignValue, VAlignValue, ArrowType, ShapeValue } from '@maxgraph/core'; +import { constants, CellStateStyle } from '@maxgraph/core'; import MatcherContext = jest.MatcherContext; import CustomMatcherResult = jest.CustomMatcherResult; @@ -25,8 +24,8 @@ import { bpmnVisualization } from '../helpers/model-expect'; import type { MaxGraphCustomOverlay, MaxGraphCustomOverlayStyle } from '../../../src/component/mxgraph/overlay/custom-overlay'; export interface ExpectedStateStyle extends CellStateStyle { - verticalAlign?: string; - align?: string; + verticalAlign?: VAlignValue; + align?: AlignValue; strokeWidth?: number; strokeColor: string; fillColor: string; @@ -34,10 +33,10 @@ export interface ExpectedStateStyle extends CellStateStyle { fontFamily: string; fontSize: number; fontStyle: number; - startArrow?: string; - endArrow?: string; + startArrow?: ArrowType; + endArrow?: ArrowType; endSize?: number; - shape?: string; + shape?: ShapeValue; horizontal?: boolean; } @@ -111,16 +110,16 @@ export function getFontStyleValue(expectedFont: ExpectedFont): number { let value = 0; if (expectedFont) { if (expectedFont.isBold) { - value += constants.FONT_BOLD; + value += constants.FONT.BOLD; } if (expectedFont.isItalic) { - value += constants.FONT_ITALIC; + value += constants.FONT.ITALIC; } if (expectedFont.isStrikeThrough) { - value += constants.FONT_STRIKETHROUGH; + value += constants.FONT.STRIKETHROUGH; } if (expectedFont.isUnderline) { - value += constants.FONT_UNDERLINE; + value += constants.FONT.UNDERLINE; } } return value ? value : undefined; diff --git a/test/integration/matchers/toBeEdge/index.ts b/test/integration/matchers/toBeEdge/index.ts index f94986469b..10ca7a689c 100644 --- a/test/integration/matchers/toBeEdge/index.ts +++ b/test/integration/matchers/toBeEdge/index.ts @@ -27,8 +27,8 @@ import { BpmnStyleIdentifier } from '../../../../src/component/mxgraph/style'; function buildExpectedStateStyle(expectedModel: ExpectedEdgeModelElement): ExpectedStateStyle { const expectedStateStyle = buildCommonExpectedStateStyle(expectedModel); - expectedStateStyle.verticalAlign = expectedModel.verticalAlign ? expectedModel.verticalAlign : 'top'; - expectedStateStyle.align = 'center'; + expectedStateStyle.verticalAlign = expectedModel.verticalAlign ? expectedModel.verticalAlign : constants.ALIGN.TOP; + expectedStateStyle.align = constants.ALIGN.CENTER; expectedStateStyle.strokeWidth = 1.5; expectedStateStyle.startArrow = expectedModel.startArrow; expectedStateStyle.endArrow = expectedModel.endArrow; @@ -65,7 +65,10 @@ function buildExpectedCell(id: string, expectedModel: ExpectedEdgeModelElement | expectedCell.children = [ { value: undefined, - style: `shape=${BpmnStyleIdentifier.MESSAGE_FLOW_ICON};${BpmnStyleIdentifier.IS_INITIATING}=${expectedModel.messageVisibleKind}`, + style: { + shape: BpmnStyleIdentifier.MESSAGE_FLOW_ICON, + bpmn: {isInitiating: expectedModel.messageVisibleKind,}, + }, id: `messageFlowIcon_of_${id}`, vertex: true, }, @@ -84,7 +87,7 @@ export function toBeSequenceFlow(this: MatcherContext, received: string, expecte } export function toBeMessageFlow(this: MatcherContext, received: string, expected: ExpectedEdgeModelElement): CustomMatcherResult { - return buildEdgeMatcher('toBeMessageFlow', this, received, { ...expected, kind: FlowKind.MESSAGE_FLOW, startArrow: constants.ARROW_OVAL, endArrow: 'blockThin' }); + return buildEdgeMatcher('toBeMessageFlow', this, received, { ...expected, kind: FlowKind.MESSAGE_FLOW, startArrow: constants.ARROW.OVAL, endArrow: 'blockThin' }); } export function toBeAssociationFlow(this: MatcherContext, received: string, expected: ExpectedEdgeModelElement): CustomMatcherResult { diff --git a/test/integration/matchers/toBeShape/index.ts b/test/integration/matchers/toBeShape/index.ts index 3d6ac7f569..6bc570a5bd 100644 --- a/test/integration/matchers/toBeShape/index.ts +++ b/test/integration/matchers/toBeShape/index.ts @@ -62,8 +62,8 @@ function expectedStrokeWidth(kind: ShapeBpmnElementKind): number { function buildExpectedStateStyle(expectedModel: ExpectedShapeModelElement): ExpectedStateStyle { const expectedStateStyle = buildCommonExpectedStateStyle(expectedModel); expectedStateStyle.shape = !expectedModel.styleShape ? expectedModel.kind : expectedModel.styleShape; - expectedStateStyle.verticalAlign = expectedModel.verticalAlign ? expectedModel.verticalAlign : 'middle'; - expectedStateStyle.align = expectedModel.align ? expectedModel.align : 'center'; + expectedStateStyle.verticalAlign = expectedModel.verticalAlign ? expectedModel.verticalAlign : constants.ALIGN.MIDDLE; + expectedStateStyle.align = expectedModel.align ? expectedModel.align : constants.ALIGN.CENTER; expectedStateStyle.strokeWidth = expectedStrokeWidth(expectedModel.kind); expectedStateStyle.fillColor = [ShapeBpmnElementKind.LANE, ShapeBpmnElementKind.POOL, ShapeBpmnElementKind.TEXT_ANNOTATION, ShapeBpmnElementKind.GROUP].includes( @@ -142,12 +142,12 @@ export function toBeShape(this: MatcherContext, received: string, expected: Expe export function toBePool(this: MatcherContext, received: string, expected: ExpectedShapeModelElement): CustomMatcherResult { const isHorizontal = 'isHorizontal' in expected ? expected.isHorizontal : true; - return buildShapeMatcher('toBePool', this, received, { ...expected, kind: ShapeBpmnElementKind.POOL, styleShape: constants.SHAPE_SWIMLANE, isHorizontal }); + return buildShapeMatcher('toBePool', this, received, { ...expected, kind: ShapeBpmnElementKind.POOL, styleShape: constants.SHAPE.SWIMLANE, isHorizontal }); } export function toBeLane(this: MatcherContext, received: string, expected: ExpectedShapeModelElement): CustomMatcherResult { const isHorizontal = 'isHorizontal' in expected ? expected.isHorizontal : true; - return buildShapeMatcher('toBeLane', this, received, { ...expected, kind: ShapeBpmnElementKind.LANE, styleShape: constants.SHAPE_SWIMLANE, isHorizontal }); + return buildShapeMatcher('toBeLane', this, received, { ...expected, kind: ShapeBpmnElementKind.LANE, styleShape: constants.SHAPE.SWIMLANE, isHorizontal }); } export function toBeCallActivity(this: MatcherContext, received: string, expected: ExpectedCallActivityModelElement): CustomMatcherResult { diff --git a/test/integration/mxGraph.model.bpmn.elements.test.ts b/test/integration/mxGraph.model.bpmn.elements.test.ts index 35392f2316..20071b1fc8 100644 --- a/test/integration/mxGraph.model.bpmn.elements.test.ts +++ b/test/integration/mxGraph.model.bpmn.elements.test.ts @@ -1258,7 +1258,7 @@ describe('mxGraph model - BPMN elements', () => { }); expect('conditional_sequence_flow_from_activity_id').toBeSequenceFlow({ sequenceFlowKind: SequenceFlowKind.CONDITIONAL_FROM_ACTIVITY, - startArrow: constants.ARROW_DIAMOND_THIN, + startArrow: constants.ARROW.DIAMOND_THIN, parentId: 'participant_1_id', verticalAlign: 'bottom', }); From 1e78a7466d24a33f8e81168c193ee3f4c21affca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Fri, 25 Nov 2022 15:15:39 +0100 Subject: [PATCH 041/132] Change the way to compute the style --- dev/ts/component/ThemedBpmnVisualization.ts | 2 +- src/component/mxgraph/BpmnRenderer.ts | 7 +- src/component/mxgraph/GraphCellUpdater.ts | 4 +- .../mxgraph/config/ShapeConfigurator.ts | 9 +- .../mxgraph/config/StyleConfigurator.ts | 56 +++---- .../mxgraph/renderer/StyleComputer.ts | 138 ++++++++++-------- src/component/mxgraph/renderer/style-utils.ts | 54 +++---- .../mxgraph/shape/activity-shapes.ts | 18 ++- src/component/mxgraph/shape/edges.ts | 8 +- src/component/mxgraph/shape/event-shapes.ts | 16 +- src/component/mxgraph/shape/flow-shapes.ts | 10 +- src/component/mxgraph/shape/gateway-shapes.ts | 12 +- src/component/mxgraph/style/identifiers.ts | 17 +-- src/component/mxgraph/style/utils.ts | 45 +----- test/integration/helpers/model-expect.ts | 3 +- test/integration/matchers/matcher-utils.ts | 15 +- test/integration/matchers/toBeEdge/index.ts | 6 +- .../mxgraph/renderer/StyleComputer.test.ts | 3 +- .../mxgraph/renderer/style-utils.test.ts | 4 +- 19 files changed, 200 insertions(+), 227 deletions(-) diff --git a/dev/ts/component/ThemedBpmnVisualization.ts b/dev/ts/component/ThemedBpmnVisualization.ts index 919f13e337..85055ef1d7 100644 --- a/dev/ts/component/ThemedBpmnVisualization.ts +++ b/dev/ts/component/ThemedBpmnVisualization.ts @@ -187,7 +187,7 @@ export class ThemedBpmnVisualization extends BpmnVisualization { const stylesheet = this.graph.getStylesheet(); - // directly access the 'styles' map to update values. Using stylesheet.getCellStyle returns a copy of the style + // directly access the 'styles' map to update values. Using stylesheet.getBPMNCellStyle returns a copy of the style const seqFlowStyle = stylesheet.styles.get(FlowKind.SEQUENCE_FLOW); seqFlowStyle.strokeColor = color; seqFlowStyle.fillColor = color; diff --git a/src/component/mxgraph/BpmnRenderer.ts b/src/component/mxgraph/BpmnRenderer.ts index 50216af79b..a22c82adf9 100644 --- a/src/component/mxgraph/BpmnRenderer.ts +++ b/src/component/mxgraph/BpmnRenderer.ts @@ -13,6 +13,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import type { Cell } from '@maxgraph/core'; +import { Point } from '@maxgraph/core'; import type { Edge, Waypoint } from '../../model/bpmn/internal/edge/edge'; import { MessageFlow } from '../../model/bpmn/internal/edge/flows'; @@ -21,12 +23,11 @@ import type ShapeBpmnElement from '../../model/bpmn/internal/shape/ShapeBpmnElem import type Bounds from '../../model/bpmn/internal/Bounds'; import { MessageVisibleKind, ShapeUtil } from '../../model/bpmn/internal'; import CoordinatesTranslator from './renderer/CoordinatesTranslator'; +import type { BPMNCellStyle } from './renderer/StyleComputer'; import StyleComputer from './renderer/StyleComputer'; import type { BpmnGraph } from './BpmnGraph'; import type { FitOptions } from '../options'; import type { RenderedModel } from '../registry/bpmn-model-registry'; -import type { Cell } from '@maxgraph/core'; -import { Point } from '@maxgraph/core'; /** * @internal @@ -126,7 +127,7 @@ export class BpmnRenderer { return this.graph.model.getCell(id); } - private insertVertex(parent: Cell, id: string | null, value: string, bounds: Bounds, labelBounds: Bounds, style?: string): Cell { + private insertVertex(parent: Cell, id: string | null, value: string, bounds: Bounds, labelBounds: Bounds, style?: BPMNCellStyle): Cell { const vertexCoordinates = this.coordinatesTranslator.computeRelativeCoordinates(parent, new Point(bounds.x, bounds.y)); const cell = this.graph.insertVertex(parent, id, value, vertexCoordinates.x, vertexCoordinates.y, bounds.width, bounds.height, style); diff --git a/src/component/mxgraph/GraphCellUpdater.ts b/src/component/mxgraph/GraphCellUpdater.ts index 3e6ba1324a..55ff7adb89 100644 --- a/src/component/mxgraph/GraphCellUpdater.ts +++ b/src/component/mxgraph/GraphCellUpdater.ts @@ -15,12 +15,12 @@ */ import type { BpmnGraph } from './BpmnGraph'; -import { BpmnStyleIdentifier } from './style'; import type { Overlay } from '../registry'; import { MaxGraphCustomOverlay } from './overlay/custom-overlay'; import { ensureIsArray } from '../helpers/array-utils'; import { OverlayConverter } from './overlay/OverlayConverter'; import { messageFowIconId } from './BpmnRenderer'; +import type { BPMNCellStyle } from './renderer/StyleComputer'; /** * @internal @@ -48,7 +48,7 @@ export default class GraphCellUpdater { } const view = this.graph.getView(); const state = view.getState(cell); - state.style[BpmnStyleIdentifier.EXTRA_CSS_CLASSES] = cssClasses; + (state.style as BPMNCellStyle).bpmn.extra.css.classes = cssClasses; state.shape.redraw(); // Ensure that label classes are also updated. When there is no label, state.text is null state.text?.redraw(); diff --git a/src/component/mxgraph/config/ShapeConfigurator.ts b/src/component/mxgraph/config/ShapeConfigurator.ts index b27f48e81d..13bc9714b1 100644 --- a/src/component/mxgraph/config/ShapeConfigurator.ts +++ b/src/component/mxgraph/config/ShapeConfigurator.ts @@ -34,11 +34,12 @@ import { } from '../shape/activity-shapes'; import { TextAnnotationShape } from '../shape/text-annotation-shapes'; import { MessageFlowIconShape } from '../shape/flow-shapes'; -import { BpmnStyleIdentifier } from '../style'; +import { BpmnShapeIdentifier } from '../style'; import { computeAllBpmnClassNamesOfCell } from '../renderer/style-utils'; import { MaxGraphCustomOverlay } from '../overlay/custom-overlay'; import { OverlayBadgeShape } from '../overlay/shapes'; import { BpmnConnector } from '../shape/edges'; +import { BPMNCellStyle } from '../renderer/StyleComputer'; /** * @internal @@ -80,8 +81,8 @@ export default class ShapeConfigurator { CellRenderer.registerShape(ShapeBpmnElementKind.TEXT_ANNOTATION, TextAnnotationShape); // shapes for flows - CellRenderer.registerShape(BpmnStyleIdentifier.EDGE, BpmnConnector); - CellRenderer.registerShape(BpmnStyleIdentifier.MESSAGE_FLOW_ICON, MessageFlowIconShape); + CellRenderer.registerShape(BpmnShapeIdentifier.EDGE, BpmnConnector); + CellRenderer.registerShape(BpmnShapeIdentifier.MESSAGE_FLOW_ICON, MessageFlowIconShape); } private initMxSvgCanvasPrototype(): void { @@ -153,7 +154,7 @@ export default class ShapeConfigurator { const cell = this.state.cell; // dialect = strictHtml is set means that current node holds an html label let allBpmnClassNames = computeAllBpmnClassNamesOfCell(cell, this.dialect === constants.DIALECT.STRICTHTML); - const extraCssClasses = this.state.style.bpmn.extra.css.classes; + const extraCssClasses = (this.state.style as BPMNCellStyle).bpmn.extra.css.classes; if (extraCssClasses) { allBpmnClassNames = allBpmnClassNames.concat(extraCssClasses); } diff --git a/src/component/mxgraph/config/StyleConfigurator.ts b/src/component/mxgraph/config/StyleConfigurator.ts index c0b34ce104..44a97b4930 100644 --- a/src/component/mxgraph/config/StyleConfigurator.ts +++ b/src/component/mxgraph/config/StyleConfigurator.ts @@ -14,11 +14,13 @@ * limitations under the License. */ +import type { Stylesheet } from '@maxgraph/core'; +import { constants } from '@maxgraph/core'; + import { AssociationDirectionKind, FlowKind, SequenceFlowKind, ShapeBpmnElementKind, ShapeUtil } from '../../../model/bpmn/internal'; -import { BpmnStyleIdentifier, MarkerIdentifier, StyleDefault } from '../style'; +import { BpmnShapeIdentifier, MarkerIdentifier, StyleDefault } from '../style'; import type { BpmnGraph } from '../BpmnGraph'; -import type { Stylesheet, CellStateStyle } from '@maxgraph/core'; -import { constants } from '@maxgraph/core'; +import type { BPMNCellStyle } from '../renderer/StyleComputer'; /** * Configure the styles used for BPMN rendering. @@ -32,13 +34,13 @@ export class StyleConfigurator { private specificFlowStyles = new MapWithDefault([ [ FlowKind.SEQUENCE_FLOW, - (style: CellStateStyle) => { + (style: BPMNCellStyle) => { style.endArrow = constants.ARROW.BLOCK_THIN; }, ], [ FlowKind.MESSAGE_FLOW, - (style: CellStateStyle) => { + (style: BPMNCellStyle) => { style.dashed = true; style.dashPattern = '8 5'; style.startArrow = constants.ARROW.OVAL; @@ -52,7 +54,7 @@ export class StyleConfigurator { ], [ FlowKind.ASSOCIATION_FLOW, - (style: CellStateStyle) => { + (style: BPMNCellStyle) => { style.dashed = true; style.dashPattern = '1 2'; style.endArrow = constants.ARROW.OPEN_THIN; @@ -64,13 +66,13 @@ export class StyleConfigurator { private specificSequenceFlowStyles = new MapWithDefault([ [ SequenceFlowKind.DEFAULT, - (style: CellStateStyle) => { + (style: BPMNCellStyle) => { style.startArrow = MarkerIdentifier.ARROW_DASH; }, ], [ SequenceFlowKind.CONDITIONAL_FROM_ACTIVITY, - (style: CellStateStyle) => { + (style: BPMNCellStyle) => { style.startArrow = constants.ARROW.DIAMOND_THIN; style.startSize = 18; style.startFill = true; @@ -81,21 +83,21 @@ export class StyleConfigurator { private specificAssociationFlowStyles = new MapWithDefault([ [ AssociationDirectionKind.NONE, - (style: CellStateStyle) => { + (style: BPMNCellStyle) => { style.startArrow = undefined; style.endArrow = undefined; }, ], [ AssociationDirectionKind.ONE, - (style: CellStateStyle) => { + (style: BPMNCellStyle) => { style.startArrow = undefined; }, ], [ AssociationDirectionKind.BOTH, // eslint-disable-next-line @typescript-eslint/no-unused-vars -- prefix parameter name - common practice to acknowledge the fact that some parameter is unused (e.g. in TypeScript compiler) - (_style: CellStateStyle) => { + (_style: BPMNCellStyle) => { // the style is fully managed by the FlowKind.ASSOCIATION_FLOW style }, ], @@ -124,16 +126,16 @@ export class StyleConfigurator { return this.graph.getStylesheet(); } - private putCellStyle(name: ShapeBpmnElementKind, style: CellStateStyle): void { + private putCellStyle(name: ShapeBpmnElementKind, style: BPMNCellStyle): void { this.getStylesheet().putCellStyle(name, style); } private configureDefaultVertexStyle(): void { - StyleConfigurator.configureCommonDefaultStyle(this.getStylesheet().getDefaultVertexStyle()); + StyleConfigurator.configureCommonDefaultStyle(this.getStylesheet().getDefaultVertexStyle() as BPMNCellStyle); } private configurePoolStyle(): void { - const style: CellStateStyle = { + const style: BPMNCellStyle = { shape: constants.SHAPE.SWIMLANE, // label style verticalAlign : constants.ALIGN.MIDDLE, @@ -146,7 +148,7 @@ export class StyleConfigurator { } private configureLaneStyle(): void { - const style: CellStateStyle = { + const style: BPMNCellStyle = { shape: constants.SHAPE.SWIMLANE, // label style verticalAlign : constants.ALIGN.MIDDLE, @@ -161,7 +163,7 @@ export class StyleConfigurator { private configureEventStyles(): void { ShapeUtil.eventKinds().forEach(kind => { - const style: CellStateStyle = { + const style: BPMNCellStyle = { shape: kind, perimeter: mxgraph.mxPerimeter.EllipsePerimeter, strokeWidth: kind == ShapeBpmnElementKind.EVENT_END ? StyleDefault.STROKE_WIDTH_THICK : StyleDefault.STROKE_WIDTH_THIN, @@ -172,7 +174,7 @@ export class StyleConfigurator { } private configureTextAnnotationStyle(): void { - const style: CellStateStyle = { + const style: BPMNCellStyle = { shape: ShapeBpmnElementKind.TEXT_ANNOTATION, // label style verticalAlign : constants.ALIGN.MIDDLE, @@ -185,7 +187,7 @@ export class StyleConfigurator { } private configureGroupStyle(): void { - const style: CellStateStyle = { + const style: BPMNCellStyle = { rounded:true, absoluteArcSize: 1, arcSize: StyleDefault.SHAPE_ARC_SIZE, @@ -203,7 +205,7 @@ export class StyleConfigurator { private configureActivityStyles(): void { ShapeUtil.activityKinds().forEach(kind => { - const style: CellStateStyle = { + const style: BPMNCellStyle = { shape: kind, absoluteArcSize: 1, arcSize: StyleDefault.SHAPE_ARC_SIZE, @@ -218,7 +220,7 @@ export class StyleConfigurator { private configureGatewayStyles(): void { ShapeUtil.gatewayKinds().forEach(kind => { - const style: CellStateStyle = { + const style: BPMNCellStyle = { shape: kind, perimeter: mxgraph.mxPerimeter.RhombusPerimeter, verticalAlign: constants.ALIGN.TOP, @@ -233,8 +235,8 @@ export class StyleConfigurator { } private configureDefaultEdgeStyle(): void { - const style = this.getStylesheet().getDefaultEdgeStyle(); - style.shape = BpmnStyleIdentifier.EDGE; + const style = this.getStylesheet().getDefaultEdgeStyle() as BPMNCellStyle; + style.shape = BpmnShapeIdentifier.EDGE; style.endSize = 12; style.strokeWidth = 1.5; style.rounded = true; @@ -245,7 +247,7 @@ export class StyleConfigurator { StyleConfigurator.configureCommonDefaultStyle(style); } - private static configureCommonDefaultStyle(style: CellStateStyle): void { + private static configureCommonDefaultStyle(style: BPMNCellStyle): void { style.fontFamily = StyleDefault.DEFAULT_FONT_FAMILY; style.fontSize = StyleDefault.DEFAULT_FONT_SIZE; style.fontColor = StyleDefault.DEFAULT_FONT_COLOR; @@ -257,9 +259,9 @@ export class StyleConfigurator { style.whiteSpace = 'wrap'; } - private configureEdgeStyles(styleKinds: T[], specificStyles: Map void>): void { + private configureEdgeStyles(styleKinds: T[], specificStyles: Map void>): void { styleKinds.forEach(kind => { - const style: CellStateStyle = {}; + const style: BPMNCellStyle = { bpmn:{} }; specificStyles.get(kind)(style); this.graph.getStylesheet().putCellStyle(kind.toString(), style); }); @@ -272,8 +274,8 @@ export class StyleConfigurator { } } -class MapWithDefault extends Map void> { - override get(key: T): (style: CellStateStyle) => void { +class MapWithDefault extends Map void> { + override get(key: T): (style: BPMNCellStyle) => void { return ( super.get(key) ?? (() => { diff --git a/src/component/mxgraph/renderer/StyleComputer.ts b/src/component/mxgraph/renderer/StyleComputer.ts index 1c14bf276b..23641189b2 100644 --- a/src/component/mxgraph/renderer/StyleComputer.ts +++ b/src/component/mxgraph/renderer/StyleComputer.ts @@ -15,6 +15,7 @@ */ import { constants } from '@maxgraph/core'; +import type { CellStyle, ShapeValue } from "@maxgraph/core"; import Shape from '../../../model/bpmn/internal/shape/Shape'; import type { Edge } from '../../../model/bpmn/internal/edge/edge'; @@ -28,121 +29,135 @@ import { ShapeBpmnStartEvent, ShapeBpmnSubProcess, } from '../../../model/bpmn/internal/shape/ShapeBpmnElement'; -import { BpmnStyleIdentifier } from '../style'; -import { ShapeBpmnCallActivityKind, ShapeBpmnElementKind, ShapeBpmnMarkerKind, ShapeUtil } from '../../../model/bpmn/internal'; +import { BpmnShapeIdentifier } from '../style'; +import type { FlowKind, ShapeBpmnEventBasedGatewayKind, ShapeBpmnEventDefinitionKind, ShapeBpmnSubProcessKind, GlobalTaskKind, SequenceFlowKind, AssociationDirectionKind } from '../../../model/bpmn/internal'; +import {MessageVisibleKind, ShapeBpmnCallActivityKind, ShapeBpmnElementKind, ShapeBpmnMarkerKind, ShapeUtil} from '../../../model/bpmn/internal'; import { AssociationFlow, SequenceFlow } from '../../../model/bpmn/internal/edge/flows'; import type { Font } from '../../../model/bpmn/internal/Label'; +export interface BPMNCellStyle extends Omit { + shape?: ShapeValue | string; + bpmn: { + kind?: ShapeBpmnElementKind | FlowKind; + isInstantiating?: boolean; + gatewayKind?: ShapeBpmnEventBasedGatewayKind; + eventDefinitionKind?: ShapeBpmnEventDefinitionKind; + isInterrupting?: boolean; + subProcessKind?: ShapeBpmnSubProcessKind; + globalTaskKind?: GlobalTaskKind; + markers?: ShapeBpmnMarkerKind[]; + sequenceFlowKind?: SequenceFlowKind; + associationDirectionKind?: AssociationDirectionKind; + isNonInitiating?: boolean; + extra?: { + css: { + classes: string[]; + } + }; + edge?: { + endFillColor?: string; + startFillColor?: string; + }; + } +} + /** * @internal */ export default class StyleComputer { - computeStyle(bpmnCell: Shape | Edge, labelBounds: Bounds): string { - const styles: string[] = [bpmnCell.bpmnElement.kind as string]; - - let shapeStyleValues; - if (bpmnCell instanceof Shape) { - shapeStyleValues = StyleComputer.computeShapeStyle(bpmnCell); - } else { - styles.push(...StyleComputer.computeEdgeStyle(bpmnCell)); - shapeStyleValues = new Map(); - } + computeStyle(bpmnCell: Shape | Edge, labelBounds: Bounds): BPMNCellStyle { + let style: BPMNCellStyle = { + bpmn: { kind: bpmnCell.bpmnElement.kind }, + ...(bpmnCell instanceof Shape ? StyleComputer.computeShapeStyle(bpmnCell) : StyleComputer.computeEdgeStyle(bpmnCell)) + }; const fontStyleValues = StyleComputer.computeFontStyleValues(bpmnCell); const labelStyleValues = StyleComputer.computeLabelStyleValues(bpmnCell, labelBounds); - return [] // - .concat([...styles]) - .concat([...shapeStyleValues, ...fontStyleValues, ...labelStyleValues].filter(([, v]) => v && v != 'undefined').map(([key, value]) => key + '=' + value)) - .join(';'); + return {...style, ...fontStyleValues, ...labelStyleValues}; } - private static computeShapeStyle(shape: Shape): Map { - const styleValues = new Map(); + private static computeShapeStyle(shape: Shape): BPMNCellStyle { + const style: BPMNCellStyle = { bpmn:{} }; const bpmnElement = shape.bpmnElement; if (bpmnElement instanceof ShapeBpmnEvent) { - this.computeEventShapeStyle(bpmnElement, styleValues); + this.computeEventShapeStyle(bpmnElement, style); } else if (bpmnElement instanceof ShapeBpmnActivity) { - this.computeActivityShapeStyle(bpmnElement, styleValues); + this.computeActivityShapeStyle(bpmnElement, style); } else if (ShapeUtil.isPoolOrLane(bpmnElement.kind)) { - // constants.STYLE_HORIZONTAL is for the label // In BPMN, isHorizontal is for the Shape - styleValues.set(constants.STYLE_HORIZONTAL, shape.isHorizontal ? '0' : '1'); + style.horizontal = shape.isHorizontal; } else if (bpmnElement instanceof ShapeBpmnEventBasedGateway) { - styleValues.set(BpmnStyleIdentifier.IS_INSTANTIATING, String(bpmnElement.instantiate)); - styleValues.set(BpmnStyleIdentifier.EVENT_BASED_GATEWAY_KIND, String(bpmnElement.gatewayKind)); + style.bpmn.isInstantiating = bpmnElement.instantiate; + style.bpmn.gatewayKind = bpmnElement.gatewayKind; } - return styleValues; + return style; } - private static computeEventShapeStyle(bpmnElement: ShapeBpmnEvent, styleValues: Map): void { - styleValues.set(BpmnStyleIdentifier.EVENT_DEFINITION_KIND, bpmnElement.eventDefinitionKind); + private static computeEventShapeStyle(bpmnElement: ShapeBpmnEvent, style: BPMNCellStyle): void { + style.bpmn.eventDefinitionKind = bpmnElement.eventDefinitionKind; if (bpmnElement instanceof ShapeBpmnBoundaryEvent || (bpmnElement instanceof ShapeBpmnStartEvent && bpmnElement.isInterrupting !== undefined)) { - styleValues.set(BpmnStyleIdentifier.IS_INTERRUPTING, String(bpmnElement.isInterrupting)); + style.bpmn.isInterrupting = bpmnElement.isInterrupting; } } - private static computeActivityShapeStyle(bpmnElement: ShapeBpmnActivity, styleValues: Map): void { + private static computeActivityShapeStyle(bpmnElement: ShapeBpmnActivity, style: BPMNCellStyle): void { if (bpmnElement instanceof ShapeBpmnSubProcess) { - styleValues.set(BpmnStyleIdentifier.SUB_PROCESS_KIND, bpmnElement.subProcessKind); + style.bpmn.subProcessKind = bpmnElement.subProcessKind; } else if (bpmnElement.kind === ShapeBpmnElementKind.TASK_RECEIVE) { - styleValues.set(BpmnStyleIdentifier.IS_INSTANTIATING, String(bpmnElement.instantiate)); + style.bpmn.isInstantiating = bpmnElement.instantiate; } else if (bpmnElement instanceof ShapeBpmnCallActivity) { - styleValues.set(BpmnStyleIdentifier.GLOBAL_TASK_KIND, bpmnElement.globalTaskKind); + style.bpmn.globalTaskKind = bpmnElement.globalTaskKind; } - const markers: ShapeBpmnMarkerKind[] = bpmnElement.markers; - if (markers.length > 0) { - styleValues.set(BpmnStyleIdentifier.MARKERS, markers.join(',')); - } + style.bpmn.markers = bpmnElement.markers; } - private static computeEdgeStyle(edge: Edge): string[] { - const styles: string[] = []; + private static computeEdgeStyle(edge: Edge): BPMNCellStyle { + const style: BPMNCellStyle = { bpmn:{} }; const bpmnElement = edge.bpmnElement; if (bpmnElement instanceof SequenceFlow) { - styles.push(bpmnElement.sequenceFlowKind); - } - if (bpmnElement instanceof AssociationFlow) { - styles.push(bpmnElement.associationDirectionKind); + style.bpmn.sequenceFlowKind = bpmnElement.sequenceFlowKind; + } else if (bpmnElement instanceof AssociationFlow) { + style.bpmn.associationDirectionKind = bpmnElement.associationDirectionKind; } - return styles; + return style; } - private static computeFontStyleValues(bpmnCell: Shape | Edge): Map { - const styleValues = new Map(); + private static computeFontStyleValues(bpmnCell: Shape | Edge): BPMNCellStyle { + const style: BPMNCellStyle = { bpmn:{} }; const font = bpmnCell.label?.font; if (font) { - styleValues.set(constants.STYLE_FONTFAMILY, font.name); - styleValues.set(constants.STYLE_FONTSIZE, font.size); - styleValues.set(constants.STYLE_FONTSTYLE, StyleComputer.getFontStyleValue(font)); + style.fontFamily = font.name; + style.fontSize = font.size; + style.fontStyle = StyleComputer.getFontStyleValue(font); } - return styleValues; + return style; } - private static computeLabelStyleValues(bpmnCell: Shape | Edge, labelBounds: Bounds): Map { - const styleValues = new Map(); + private static computeLabelStyleValues(bpmnCell: Shape | Edge, labelBounds: Bounds): BPMNCellStyle { + const style: BPMNCellStyle = { bpmn:{} }; const bpmnElement = bpmnCell.bpmnElement; if (labelBounds) { - styleValues.set(constants.STYLE_VERTICAL_ALIGN, constants.ALIGN_TOP); + style.verticalAlign = constants.ALIGN.TOP; if (bpmnCell.bpmnElement.kind != ShapeBpmnElementKind.TEXT_ANNOTATION) { - styleValues.set(constants.STYLE_ALIGN, constants.ALIGN_CENTER); + style.align = constants.ALIGN.CENTER; } if (bpmnCell instanceof Shape) { // arbitrarily increase width to relax too small bounds (for instance for reference diagrams from miwg-test-suite) - styleValues.set(constants.STYLE_LABEL_WIDTH, labelBounds.width + 1); + style.labelWidth = labelBounds.width + 1; // align settings - styleValues.set(constants.STYLE_LABEL_POSITION, constants.ALIGN_TOP); - styleValues.set(constants.STYLE_VERTICAL_LABEL_POSITION, constants.ALIGN_LEFT); + style.labelPosition = constants.ALIGN.LEFT; + style.verticalLabelPosition = constants.ALIGN.TOP; } } // when no label bounds, adjust the default style dynamically @@ -152,14 +167,17 @@ export default class StyleComputer { (bpmnElement instanceof ShapeBpmnCallActivity && bpmnElement.callActivityKind === ShapeBpmnCallActivityKind.CALLING_PROCESS)) && !bpmnElement.markers.includes(ShapeBpmnMarkerKind.EXPAND) ) { - styleValues.set(constants.STYLE_VERTICAL_ALIGN, constants.ALIGN_TOP); + style.verticalAlign = constants.ALIGN.TOP; } - return styleValues; + return style; } - computeMessageFlowIconStyle(edge: Edge): string { - return `shape=${BpmnStyleIdentifier.MESSAGE_FLOW_ICON};${BpmnStyleIdentifier.IS_INITIATING}=${edge.messageVisibleKind}`; + computeMessageFlowIconStyle(edge: Edge): BPMNCellStyle { + return { + shape: BpmnShapeIdentifier.MESSAGE_FLOW_ICON, + bpmn: { isNonInitiating: edge.messageVisibleKind === MessageVisibleKind.NON_INITIATING } + }; } private static getFontStyleValue(font: Font): number { diff --git a/src/component/mxgraph/renderer/style-utils.ts b/src/component/mxgraph/renderer/style-utils.ts index 9cbe6ab39b..bcd9abf40f 100644 --- a/src/component/mxgraph/renderer/style-utils.ts +++ b/src/component/mxgraph/renderer/style-utils.ts @@ -14,10 +14,10 @@ * limitations under the License. */ -import type { Cell, CellStyle } from '@maxgraph/core'; +import type { Cell } from '@maxgraph/core'; + import { FlowKind, ShapeUtil } from '../../../model/bpmn/internal'; -import { MessageVisibleKind } from '../../../model/bpmn/internal/edge/kinds'; -import { BpmnStyleIdentifier } from '../style/identifiers'; +import type { BPMNCellStyle } from './StyleComputer'; /** * Compute the all class names associated to a cell in a hyphen case form. @@ -27,7 +27,7 @@ import { BpmnStyleIdentifier } from '../style/identifiers'; * @internal */ export function computeAllBpmnClassNamesOfCell(cell: Cell, isLabel: boolean): string[] { - return computeAllBpmnClassNames(cell.style, isLabel); + return computeAllBpmnClassNames(cell.style as BPMNCellStyle, isLabel); } /** @@ -37,13 +37,11 @@ export function computeAllBpmnClassNamesOfCell(cell: Cell, isLabel: boolean): st * @param isLabel the boolean that indicates if class must be computed for label. * @internal exported for testing purpose */ -export function computeAllBpmnClassNames(style: CellStyle, isLabel: boolean): string[] { +export function computeAllBpmnClassNames(style: BPMNCellStyle, isLabel: boolean): string[] { const classes: string[] = []; - const styleElements = style.split(';'); - const pseudoBpmnElementKind = styleElements[0]; // shape=bpmn.message-flow-icon --> message-flow-icon - const bpmnElementKind = pseudoBpmnElementKind.replace(/shape=bpmn./g, ''); + const bpmnElementKind = style.bpmn.kind; const typeClasses = new Map(); typeClasses.set('bpmn-type-activity', ShapeUtil.isActivity(bpmnElementKind)); @@ -56,31 +54,21 @@ export function computeAllBpmnClassNames(style: CellStyle, isLabel: boolean): st classes.push(computeBpmnBaseClassName(bpmnElementKind)); - styleElements - .map(entry => { - const elements = entry.split('='); - return [elements[0], elements[1]]; - }) - .forEach(([key, value]) => { - switch (key) { - case BpmnStyleIdentifier.EVENT_DEFINITION_KIND: - classes.push(`bpmn-event-def-${value}`); - break; - case BpmnStyleIdentifier.EVENT_BASED_GATEWAY_KIND: - classes.push(`bpmn-gateway-kind-${value.toLowerCase()}`); - break; - case BpmnStyleIdentifier.IS_INITIATING: // message flow icon - classes.push(value == MessageVisibleKind.NON_INITIATING ? 'bpmn-icon-non-initiating' : 'bpmn-icon-initiating'); - break; - case BpmnStyleIdentifier.SUB_PROCESS_KIND: - classes.push(`bpmn-sub-process-${value.toLowerCase()}`); - break; - case BpmnStyleIdentifier.GLOBAL_TASK_KIND: - classes.push(computeBpmnBaseClassName(value)); - break; - } - }); - + if(style.bpmn.eventDefinitionKind) { + classes.push(`bpmn-event-def-${style.bpmn.eventDefinitionKind}`); + } + if(style.bpmn.gatewayKind) { + classes.push(`bpmn-gateway-kind-${style.bpmn.gatewayKind.toLowerCase()}`); + } + if(style.bpmn.isNonInitiating !== undefined) { // message flow icon + classes.push(style.bpmn.isNonInitiating ? 'bpmn-icon-non-initiating' : 'bpmn-icon-initiating'); + } + if(style.bpmn.subProcessKind) { + classes.push(`bpmn-sub-process-${style.bpmn.gatewayKind.toLowerCase()}`); + } + if(style.bpmn.globalTaskKind) { + classes.push(computeBpmnBaseClassName(style.bpmn.globalTaskKind)); + } if (isLabel) { classes.push('bpmn-label'); } diff --git a/src/component/mxgraph/shape/activity-shapes.ts b/src/component/mxgraph/shape/activity-shapes.ts index 5eb8a55e2d..43655ec18d 100644 --- a/src/component/mxgraph/shape/activity-shapes.ts +++ b/src/component/mxgraph/shape/activity-shapes.ts @@ -14,14 +14,16 @@ * limitations under the License. */ -import { StyleDefault, StyleUtils } from '../style'; +import type { AbstractCanvas2D } from '@maxgraph/core'; +import { RectangleShape } from '@maxgraph/core'; + +import { StyleDefault } from '../style'; import type { BpmnCanvas, PaintParameter, ShapeConfiguration } from './render'; import { IconPainterProvider } from './render'; import { buildPaintParameter } from './render/icon-painter'; import { ShapeBpmnElementKind, ShapeBpmnMarkerKind, ShapeBpmnSubProcessKind } from '../../../model/bpmn/internal'; import { orderActivityMarkers } from './render/utils'; -import type { AbstractCanvas2D } from '@maxgraph/core'; -import { RectangleShape } from '@maxgraph/core'; +import type { BPMNCellStyle } from '../renderer/StyleComputer'; function paintEnvelopeIcon(paintParameter: PaintParameter, isFilled: boolean): void { IconPainterProvider.get().paintEnvelopeIcon({ @@ -51,9 +53,9 @@ export abstract class BaseActivityShape extends RectangleShape { } protected paintMarkerIcons(paintParameter: PaintParameter): void { - const markers = StyleUtils.getBpmnMarkers(this.style); + const markers = (this.style as BPMNCellStyle).bpmn.markers; if (markers) { - orderActivityMarkers(markers.split(',')).forEach((marker, idx, allMarkers) => { + orderActivityMarkers(markers).forEach((marker, idx, allMarkers) => { paintParameter = { ...paintParameter, setIconOriginFunct: this.getMarkerIconOriginFunction(allMarkers.length, idx + 1), @@ -140,7 +142,7 @@ export class UserTaskShape extends BaseTaskShape { */ export class ReceiveTaskShape extends BaseTaskShape { protected paintTaskIcon(paintParameter: PaintParameter): void { - if (!StyleUtils.getBpmnIsInstantiating(this.style)) { + if (!(this.style as BPMNCellStyle).bpmn.isInstantiating) { paintEnvelopeIcon(paintParameter, false); return; } @@ -212,7 +214,7 @@ export class CallActivityShape extends BaseActivityShape { const paintParameter = buildPaintParameter({ canvas: c, x, y, width: w, height: h, shape: this }); - switch (StyleUtils.getBpmnGlobalTaskKind(this.style)) { + switch ((this.style as BPMNCellStyle).bpmn.globalTaskKind) { case ShapeBpmnElementKind.GLOBAL_TASK_MANUAL: this.iconPainter.paintHandIcon({ ...paintParameter, @@ -252,7 +254,7 @@ export class CallActivityShape extends BaseActivityShape { */ export class SubProcessShape extends BaseActivityShape { override paintBackground(c: AbstractCanvas2D, x: number, y: number, w: number, h: number): void { - const subProcessKind = StyleUtils.getBpmnSubProcessKind(this.style); + const subProcessKind = (this.style as BPMNCellStyle).bpmn.subProcessKind; c.save(); // ensure we can later restore the configuration if (subProcessKind === ShapeBpmnSubProcessKind.EVENT) { c.setDashed(true, false); diff --git a/src/component/mxgraph/shape/edges.ts b/src/component/mxgraph/shape/edges.ts index c3894f0f10..435db76359 100644 --- a/src/component/mxgraph/shape/edges.ts +++ b/src/component/mxgraph/shape/edges.ts @@ -16,7 +16,9 @@ import type { Point, AbstractCanvas2D } from "@maxgraph/core"; import { SvgCanvas2D, ConnectorShape, utils } from '@maxgraph/core'; -import { BpmnStyleIdentifier } from '../style'; + +import type { BPMNCellStyle } from "../renderer/StyleComputer"; +import { BpmnShapeIdentifier } from '../style'; export class BpmnConnector extends ConnectorShape { constructor(points: Point[], stroke: string, strokewidth?: number) { @@ -37,12 +39,12 @@ export class BpmnConnector extends ConnectorShape { c.setDashed(false, false); if (sourceMarker != null) { - c.setFillColor(utils.getValue(this.style, BpmnStyleIdentifier.EDGE_START_FILL_COLOR, this.stroke)); + c.setFillColor((this.style as BPMNCellStyle).bpmn.edge.startFillColor ?? this.stroke); sourceMarker(); } if (targetMarker != null) { - c.setFillColor(utils.getValue(this.style, BpmnStyleIdentifier.EDGE_END_FILL_COLOR, this.stroke)); + c.setFillColor((this.style as BPMNCellStyle).bpmn.edge.endFillColor ?? this.stroke); targetMarker(); } } diff --git a/src/component/mxgraph/shape/event-shapes.ts b/src/component/mxgraph/shape/event-shapes.ts index 8422a693b3..c924f4b8e6 100644 --- a/src/component/mxgraph/shape/event-shapes.ts +++ b/src/component/mxgraph/shape/event-shapes.ts @@ -14,13 +14,15 @@ * limitations under the License. */ +import type { AbstractCanvas2D } from '@maxgraph/core'; +import { EllipseShape } from '@maxgraph/core'; + import { ShapeBpmnEventDefinitionKind } from '../../../model/bpmn/internal'; import type { BpmnCanvas, PaintParameter } from './render'; import { IconPainterProvider } from './render'; import { buildPaintParameter } from './render/icon-painter'; -import { StyleDefault, StyleUtils } from '../style'; -import type { AbstractCanvas2D } from '@maxgraph/core'; -import { EllipseShape } from '@maxgraph/core'; +import { StyleDefault } from '../style'; +import type { BPMNCellStyle } from '../renderer/StyleComputer'; /** * @internal @@ -88,7 +90,7 @@ export class EventShape extends EllipseShape { override paintVertexShape(c: AbstractCanvas2D, x: number, y: number, w: number, h: number): void { const paintParameter = buildPaintParameter({ canvas: c, x, y, width: w, height: h, shape: this, isFilled: this.withFilledIcon }); - EventShape.setDashedOuterShapePattern(paintParameter, StyleUtils.getBpmnIsInterrupting(this.style)); + EventShape.setDashedOuterShapePattern(paintParameter, (this.style as BPMNCellStyle).bpmn.isInterrupting); this.paintOuterShape(paintParameter); EventShape.restoreOriginalOuterShapePattern(paintParameter); @@ -100,13 +102,13 @@ export class EventShape extends EllipseShape { } private paintInnerShape(paintParameter: PaintParameter): void { - const paintIcon = this.iconPainters.get(StyleUtils.getBpmnEventDefinitionKind(this.style)) || (() => this.iconPainter.paintEmptyIcon()); + const paintIcon = this.iconPainters.get((this.style as BPMNCellStyle).bpmn.eventDefinitionKind) || (() => this.iconPainter.paintEmptyIcon()); paintIcon(paintParameter); } - private static setDashedOuterShapePattern(paintParameter: PaintParameter, isInterrupting: string): void { + private static setDashedOuterShapePattern(paintParameter: PaintParameter, isInterrupting: boolean): void { paintParameter.canvas.save(); // ensure we can later restore the configuration - if (isInterrupting === 'false') { + if (!isInterrupting ) { paintParameter.canvas.setDashed(true, false); paintParameter.canvas.setDashPattern('3 2'); } diff --git a/src/component/mxgraph/shape/flow-shapes.ts b/src/component/mxgraph/shape/flow-shapes.ts index e462830546..027a8a88a2 100644 --- a/src/component/mxgraph/shape/flow-shapes.ts +++ b/src/component/mxgraph/shape/flow-shapes.ts @@ -14,13 +14,13 @@ * limitations under the License. */ -import { IconPainterProvider } from './render'; -import { buildPaintParameter } from './render/icon-painter'; -import { StyleUtils } from '../style'; -import { MessageVisibleKind } from '../../../model/bpmn/internal/edge/kinds'; import type { AbstractCanvas2D, Rectangle } from '@maxgraph/core'; import { RectangleShape } from '@maxgraph/core'; +import { IconPainterProvider } from './render'; +import { buildPaintParameter } from './render/icon-painter'; +import type { BPMNCellStyle } from '../renderer/StyleComputer'; + /** * @internal */ @@ -32,7 +32,7 @@ export class MessageFlowIconShape extends RectangleShape { } override paintVertexShape(c: AbstractCanvas2D, x: number, y: number, w: number, h: number): void { - const withFilledIcon = StyleUtils.getBpmnIsInitiating(this.style) === MessageVisibleKind.NON_INITIATING; + const withFilledIcon = (this.style as BPMNCellStyle).bpmn.isNonInitiating; const paintParameter = buildPaintParameter({ canvas: c, x, y, width: w, height: h, shape: this, ratioFromParent: 1, isFilled: withFilledIcon }); this.iconPainter.paintEnvelopeIcon(paintParameter); diff --git a/src/component/mxgraph/shape/gateway-shapes.ts b/src/component/mxgraph/shape/gateway-shapes.ts index 3c5f3f1550..3995b5399b 100644 --- a/src/component/mxgraph/shape/gateway-shapes.ts +++ b/src/component/mxgraph/shape/gateway-shapes.ts @@ -13,13 +13,15 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import type { AbstractCanvas2D } from '@maxgraph/core'; +import { RhombusShape } from '@maxgraph/core'; -import { StyleDefault, StyleUtils } from '../style'; +import {ShapeBpmnEventBasedGatewayKind} from "../../../model/bpmn/internal"; +import { StyleDefault } from '../style'; import type { PaintParameter } from './render'; import { IconPainterProvider } from './render'; import { buildPaintParameter } from './render/icon-painter'; -import type { AbstractCanvas2D } from '@maxgraph/core'; -import { RhombusShape } from '@maxgraph/core'; +import type { BPMNCellStyle } from "../renderer/StyleComputer"; abstract class GatewayShape extends RhombusShape { protected iconPainter = IconPainterProvider.get(); @@ -98,7 +100,7 @@ export class EventBasedGatewayShape extends GatewayShape { ...paintParameter, ratioFromParent: 0.55, }); - if (!StyleUtils.getBpmnIsInstantiating(this.style)) { + if (!(this.style as BPMNCellStyle).bpmn.isInstantiating) { this.iconPainter.paintCircleIcon({ ...paintParameter, ratioFromParent: 0.45, @@ -110,7 +112,7 @@ export class EventBasedGatewayShape extends GatewayShape { ...paintParameter, ratioFromParent: 0.3, }; - if (StyleUtils.getBpmnIsParallelEventBasedGateway(this.style)) { + if ((this.style as BPMNCellStyle).bpmn.gatewayKind == ShapeBpmnEventBasedGatewayKind.Parallel) { this.iconPainter.paintPlusCrossIcon(innerIconPaintParameter); } else { this.iconPainter.paintPentagon(innerIconPaintParameter); diff --git a/src/component/mxgraph/style/identifiers.ts b/src/component/mxgraph/style/identifiers.ts index 909c4a9006..7ea6199d13 100644 --- a/src/component/mxgraph/style/identifiers.ts +++ b/src/component/mxgraph/style/identifiers.ts @@ -22,26 +22,11 @@ * @category BPMN Theme * @experimental */ -export class BpmnStyleIdentifier { +export class BpmnShapeIdentifier { // edge static readonly EDGE = 'bpmn.edge'; - static readonly EDGE_START_FILL_COLOR = 'bpmn.edge.startFillColor'; - static readonly EDGE_END_FILL_COLOR = 'bpmn.edge.endFillColor'; - - // kind - static readonly EVENT_BASED_GATEWAY_KIND = 'bpmn.gatewayKind'; - static readonly EVENT_DEFINITION_KIND = 'bpmn.eventDefinitionKind'; - static readonly GLOBAL_TASK_KIND = 'bpmn.globalTaskKind'; - static readonly SUB_PROCESS_KIND = 'bpmn.subProcessKind'; - - // state - static readonly IS_INITIATING = 'bpmn.isInitiating'; - static readonly IS_INSTANTIATING = 'bpmn.isInstantiating'; - static readonly IS_INTERRUPTING = 'bpmn.isInterrupting'; // other identifiers - static readonly EXTRA_CSS_CLASSES = 'bpmn.extra.css.classes'; - static readonly MARKERS = 'bpmn.markers'; static readonly MESSAGE_FLOW_ICON = 'bpmn.messageFlowIcon'; } diff --git a/src/component/mxgraph/style/utils.ts b/src/component/mxgraph/style/utils.ts index 8e9a8320fb..a82491c98a 100644 --- a/src/component/mxgraph/style/utils.ts +++ b/src/component/mxgraph/style/utils.ts @@ -14,10 +14,7 @@ * limitations under the License. */ -import type { CellStateStyle } from '@maxgraph/core'; - -import type { GlobalTaskKind, MessageVisibleKind, ShapeBpmnSubProcessKind } from '../../../model/bpmn/internal'; -import { ShapeBpmnEventBasedGatewayKind, ShapeBpmnEventDefinitionKind } from '../../../model/bpmn/internal'; +import type { BPMNCellStyle } from '../renderer/StyleComputer'; /** * Store all rendering defaults used by `bpmn-visualization`. @@ -72,51 +69,19 @@ export enum StyleDefault { * @experimental */ export class StyleUtils { - static getFillColor(style: CellStateStyle): string { + static getFillColor(style: BPMNCellStyle): string { return style.fillColor ?? StyleDefault.DEFAULT_FILL_COLOR; } - static getStrokeColor(style: CellStateStyle): string { + static getStrokeColor(style: BPMNCellStyle): string { return style.strokeColor ?? StyleDefault.DEFAULT_STROKE_COLOR; } - static getStrokeWidth(style: CellStateStyle): number { + static getStrokeWidth(style: BPMNCellStyle): number { return style.strokeWidth ?? StyleDefault.STROKE_WIDTH_THIN; } - static getMargin(style: CellStateStyle): number { + static getMargin(style: BPMNCellStyle): number { return style.margin ?? StyleDefault.DEFAULT_MARGIN; } - - static getBpmnEventDefinitionKind(style: CellStateStyle): ShapeBpmnEventDefinitionKind { - return style.bpmn.eventDefinitionKind ?? ShapeBpmnEventDefinitionKind.NONE; - } - - static getBpmnSubProcessKind(style: CellStateStyle): ShapeBpmnSubProcessKind { - return style.bpmn.subProcessKind; - } - - static getBpmnIsInterrupting(style: CellStateStyle): string { - return style.bpmn.isInterrupting; - } - - static getBpmnMarkers(style: CellStateStyle): string { - return style.bpmn.markers; - } - - static getBpmnIsInstantiating(style: CellStateStyle): boolean { - return style.bpmn.isInstantiating ?? false; - } - - static getBpmnIsInitiating(style: CellStateStyle): MessageVisibleKind { - return style.bpmn.isInitiating; - } - - static getBpmnIsParallelEventBasedGateway(style: CellStateStyle): boolean { - return (style.bpmn.gatewayKind ?? ShapeBpmnEventBasedGatewayKind.Exclusive) == ShapeBpmnEventBasedGatewayKind.Parallel - } - - static getBpmnGlobalTaskKind(style: CellStateStyle): GlobalTaskKind { - return style.bpmn.globalTaskKind; - } } diff --git a/test/integration/helpers/model-expect.ts b/test/integration/helpers/model-expect.ts index ef4459cd6b..bc73e46b58 100644 --- a/test/integration/helpers/model-expect.ts +++ b/test/integration/helpers/model-expect.ts @@ -54,6 +54,7 @@ import type {ArrowType, Cell, FilterFunction, VAlignValue} from '@maxgraph/core' import { Geometry } from '@maxgraph/core'; import type { ExpectedOverlay } from '../matchers/matcher-utils'; import { getCell } from '../matchers/matcher-utils'; +import type { BPMNCellStyle } from '../../../src/component/mxgraph/renderer/StyleComputer'; declare global { // eslint-disable-next-line @typescript-eslint/no-namespace @@ -194,7 +195,7 @@ const expectElementsInModel = (parentId: string, elementsNumber: number, filter: }; export const expectPoolsInModel = (pools: number): void => { - expectElementsInModel(undefined, pools, (cell: Cell): boolean => !!cell.style[ShapeBpmnElementKind.POOL]); + expectElementsInModel(undefined, pools, (cell: Cell): boolean => (cell.style as BPMNCellStyle).bpmn.kind == ShapeBpmnElementKind.POOL); }; export const expectShapesInModel = (parentId: string, shapesNumber: number): void => { diff --git a/test/integration/matchers/matcher-utils.ts b/test/integration/matchers/matcher-utils.ts index f34bcc8396..177e53b3b5 100644 --- a/test/integration/matchers/matcher-utils.ts +++ b/test/integration/matchers/matcher-utils.ts @@ -13,8 +13,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import type { Cell, CellStyle, Geometry, AlignValue, VAlignValue, ArrowType, ShapeValue } from '@maxgraph/core'; -import { constants, CellStateStyle } from '@maxgraph/core'; +import type { Cell, Geometry, AlignValue, VAlignValue, ArrowType, ShapeValue } from '@maxgraph/core'; +import { constants } from '@maxgraph/core'; import MatcherContext = jest.MatcherContext; import CustomMatcherResult = jest.CustomMatcherResult; @@ -22,8 +22,9 @@ import CustomMatcherResult = jest.CustomMatcherResult; import type { ExpectedEdgeModelElement, ExpectedFont, ExpectedShapeModelElement } from '../helpers/model-expect'; import { bpmnVisualization } from '../helpers/model-expect'; import type { MaxGraphCustomOverlay, MaxGraphCustomOverlayStyle } from '../../../src/component/mxgraph/overlay/custom-overlay'; +import { BPMNCellStyle } from '../../../src/component/mxgraph/renderer/StyleComputer'; -export interface ExpectedStateStyle extends CellStateStyle { +export interface ExpectedStateStyle extends BPMNCellStyle { verticalAlign?: VAlignValue; align?: AlignValue; strokeWidth?: number; @@ -43,7 +44,7 @@ export interface ExpectedStateStyle extends CellStateStyle { export interface ExpectedCell { value?: string; geometry?: Geometry; - style?: CellStyle; + style?: BPMNCellStyle; id?: string; edge?: boolean; vertex?: boolean; @@ -135,6 +136,7 @@ export function buildCommonExpectedStateStyle(expectedModel: ExpectedEdgeModelEl fontSize: font?.size ? font.size : 11, fontColor: 'Black', fontStyle: getFontStyleValue(font), + bpmn: undefined }; } @@ -150,6 +152,7 @@ function buildReceivedStateStyle(cell: Cell): ExpectedStateStyle { fontSize: stateStyle.fontSize, fontColor: stateStyle.fontColor, fontStyle: stateStyle.fontStyle, + bpmn: undefined, }; if (cell.edge) { @@ -166,7 +169,7 @@ function buildReceivedStateStyle(cell: Cell): ExpectedStateStyle { export function buildReceivedCellWithCommonAttributes(cell: Cell): ExpectedCell { const receivedCell: ExpectedCell = { value: cell.value, - style: cell.style, + style: cell.style as BPMNCellStyle, id: cell.id, edge: cell.edge, vertex: cell.vertex, @@ -191,7 +194,7 @@ export function buildReceivedCellWithCommonAttributes(cell: Cell): ExpectedCell if (children && children[0]) { receivedCell.children = children.map((child: Cell) => ({ value: child.value, - style: child.style, + style: child.style as BPMNCellStyle, id: child.id, vertex: child.vertex, })); diff --git a/test/integration/matchers/toBeEdge/index.ts b/test/integration/matchers/toBeEdge/index.ts index 10ca7a689c..4f28bb5100 100644 --- a/test/integration/matchers/toBeEdge/index.ts +++ b/test/integration/matchers/toBeEdge/index.ts @@ -23,7 +23,7 @@ import CustomMatcherResult = jest.CustomMatcherResult; import { FlowKind, MessageVisibleKind } from '../../../../src/model/bpmn/internal'; import type { ExpectedEdgeModelElement, ExpectedSequenceFlowModelElement } from '../../helpers/model-expect'; import { getDefaultParentId } from '../../helpers/model-expect'; -import { BpmnStyleIdentifier } from '../../../../src/component/mxgraph/style'; +import { BpmnShapeIdentifier } from '../../../../src/component/mxgraph/style'; function buildExpectedStateStyle(expectedModel: ExpectedEdgeModelElement): ExpectedStateStyle { const expectedStateStyle = buildCommonExpectedStateStyle(expectedModel); @@ -66,8 +66,8 @@ function buildExpectedCell(id: string, expectedModel: ExpectedEdgeModelElement | { value: undefined, style: { - shape: BpmnStyleIdentifier.MESSAGE_FLOW_ICON, - bpmn: {isInitiating: expectedModel.messageVisibleKind,}, + shape: BpmnShapeIdentifier.MESSAGE_FLOW_ICON, + bpmn: { isNonInitiating: expectedModel.messageVisibleKind === MessageVisibleKind.NON_INITIATING }, }, id: `messageFlowIcon_of_${id}`, vertex: true, diff --git a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts index b71486cfec..9c6291cbe9 100644 --- a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts +++ b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts @@ -17,6 +17,7 @@ * limitations under the License. */ +import type { BPMNCellStyle } from '../../../../../src/component/mxgraph/renderer/StyleComputer'; import StyleComputer from '../../../../../src/component/mxgraph/renderer/StyleComputer'; import Shape from '../../../../../src/model/bpmn/internal/shape/Shape'; import ShapeBpmnElement, { @@ -121,7 +122,7 @@ describe('Style Computer', () => { const styleComputer = new StyleComputer(); // shortcut as the current computeStyle implementation requires to pass the BPMN label bounds as extra argument - function computeStyle(bpmnCell: Shape | Edge): string { + function computeStyle(bpmnCell: Shape | Edge): BPMNCellStyle { return styleComputer.computeStyle(bpmnCell, bpmnCell.label?.bounds); } diff --git a/test/unit/component/mxgraph/renderer/style-utils.test.ts b/test/unit/component/mxgraph/renderer/style-utils.test.ts index 7a00f7847f..e87fc4961b 100644 --- a/test/unit/component/mxgraph/renderer/style-utils.test.ts +++ b/test/unit/component/mxgraph/renderer/style-utils.test.ts @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import {CellStyle} from "@maxgraph/core"; +import type { BPMNCellStyle } from "../../../../../src/component/mxgraph/renderer/StyleComputer"; import { FlowKind, ShapeBpmnElementKind } from '../../../../../src/model/bpmn/internal'; import { computeBpmnBaseClassName, computeAllBpmnClassNames } from '../../../../../src/component/mxgraph/renderer/style-utils'; @@ -68,7 +68,7 @@ describe('compute all css class names based on style input', () => { ${'shape=bpmn.message-flow-icon'} | ${false} | ${['bpmn-message-flow-icon']} ${'shape=bpmn.message-flow-icon;bpmn.isInitiating=non_initiating'} | ${false} | ${['bpmn-message-flow-icon', 'bpmn-icon-non-initiating']} ${'shape=bpmn.message-flow-icon;bpmn.isInitiating=initiating'} | ${true} | ${['bpmn-message-flow-icon', 'bpmn-icon-initiating', 'bpmn-label']} - `('style="$style" / isLabel=$isLabel', ({ style, isLabel, expectedClassNames }: { style: CellStyle; isLabel: boolean; expectedClassNames: string[] }) => { + `('style="$style" / isLabel=$isLabel', ({ style, isLabel, expectedClassNames }: { style: BPMNCellStyle; isLabel: boolean; expectedClassNames: string[] }) => { expect(computeAllBpmnClassNames(style, isLabel)).toEqual(expectedClassNames); }); }); From 78a540694080c379100a84cf85ff6673074a6d08 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Fri, 25 Nov 2022 15:12:43 +0100 Subject: [PATCH 042/132] - Replace mxPerimeter.RhombusPerimeter by Perimeter.RhombusPerimeter - Replace mxPerimeter.EllipsePerimeter by Perimeter.EllipsePerimeter --- src/component/mxgraph/config/StyleConfigurator.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/component/mxgraph/config/StyleConfigurator.ts b/src/component/mxgraph/config/StyleConfigurator.ts index 44a97b4930..3285b89f20 100644 --- a/src/component/mxgraph/config/StyleConfigurator.ts +++ b/src/component/mxgraph/config/StyleConfigurator.ts @@ -15,7 +15,7 @@ */ import type { Stylesheet } from '@maxgraph/core'; -import { constants } from '@maxgraph/core'; +import { constants, Perimeter } from '@maxgraph/core'; import { AssociationDirectionKind, FlowKind, SequenceFlowKind, ShapeBpmnElementKind, ShapeUtil } from '../../../model/bpmn/internal'; import { BpmnShapeIdentifier, MarkerIdentifier, StyleDefault } from '../style'; @@ -165,7 +165,7 @@ export class StyleConfigurator { ShapeUtil.eventKinds().forEach(kind => { const style: BPMNCellStyle = { shape: kind, - perimeter: mxgraph.mxPerimeter.EllipsePerimeter, + perimeter: Perimeter.EllipsePerimeter, strokeWidth: kind == ShapeBpmnElementKind.EVENT_END ? StyleDefault.STROKE_WIDTH_THICK : StyleDefault.STROKE_WIDTH_THIN, verticalLabelPosition: constants.ALIGN.BOTTOM, }; @@ -222,7 +222,7 @@ export class StyleConfigurator { ShapeUtil.gatewayKinds().forEach(kind => { const style: BPMNCellStyle = { shape: kind, - perimeter: mxgraph.mxPerimeter.RhombusPerimeter, + perimeter: Perimeter.RhombusPerimeter, verticalAlign: constants.ALIGN.TOP, strokeWidth: StyleDefault.STROKE_WIDTH_THIN, From cf6b80fded8f014691e3b9c1609bbbae261ff557 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Fri, 25 Nov 2022 15:19:55 +0100 Subject: [PATCH 043/132] Remove StyleUtils --- .../mxgraph/shape/render/icon-painter.ts | 10 ++++---- src/component/mxgraph/style/utils.ts | 24 ------------------- 2 files changed, 5 insertions(+), 29 deletions(-) diff --git a/src/component/mxgraph/shape/render/icon-painter.ts b/src/component/mxgraph/shape/render/icon-painter.ts index f82e88966d..768de7098b 100644 --- a/src/component/mxgraph/shape/render/icon-painter.ts +++ b/src/component/mxgraph/shape/render/icon-painter.ts @@ -15,7 +15,7 @@ */ import { BpmnCanvas } from './BpmnCanvas'; -import { StyleUtils } from '../../style'; +import {StyleDefault, StyleUtils} from '../../style'; import type { IconStyleConfiguration, ShapeConfiguration, Size } from './render-types'; import type { Shape, AbstractCanvas2D } from '@maxgraph/core'; @@ -57,10 +57,10 @@ export function buildPaintParameter({ isFilled?: boolean; iconStrokeWidth?: number; }): PaintParameter { - const shapeStrokeWidth = shape.strokeWidth || StyleUtils.getStrokeWidth(shape.style); - const fillColor = shape.fill || StyleUtils.getFillColor(shape.style); - const strokeColor = shape.stroke || StyleUtils.getStrokeColor(shape.style); - const margin = StyleUtils.getMargin(shape.style); + const shapeStrokeWidth = shape.strokeWidth || shape.style.strokeWidth || StyleDefault.STROKE_WIDTH_THIN; + const fillColor = shape.fill || shape.style.fillColor || StyleDefault.DEFAULT_FILL_COLOR; + const strokeColor = shape.stroke || shape.style.strokeColor || StyleDefault.DEFAULT_STROKE_COLOR; + const margin = shape.style.margin ?? StyleDefault.DEFAULT_MARGIN; ratioFromParent ??= 0.25; isFilled ??= false; iconStrokeWidth ??= 0; diff --git a/src/component/mxgraph/style/utils.ts b/src/component/mxgraph/style/utils.ts index a82491c98a..be704989e6 100644 --- a/src/component/mxgraph/style/utils.ts +++ b/src/component/mxgraph/style/utils.ts @@ -14,7 +14,6 @@ * limitations under the License. */ -import type { BPMNCellStyle } from '../renderer/StyleComputer'; /** * Store all rendering defaults used by `bpmn-visualization`. @@ -62,26 +61,3 @@ export enum StyleDefault { MESSAGE_FLOW_MARKER_END_FILL_COLOR = 'White', } -/** - * **WARN**: You may use it to customize the BPMN Theme as suggested in the examples. But be aware that the way the default BPMN theme can be modified is subject to change. - * - * @category BPMN Theme - * @experimental - */ -export class StyleUtils { - static getFillColor(style: BPMNCellStyle): string { - return style.fillColor ?? StyleDefault.DEFAULT_FILL_COLOR; - } - - static getStrokeColor(style: BPMNCellStyle): string { - return style.strokeColor ?? StyleDefault.DEFAULT_STROKE_COLOR; - } - - static getStrokeWidth(style: BPMNCellStyle): number { - return style.strokeWidth ?? StyleDefault.STROKE_WIDTH_THIN; - } - - static getMargin(style: BPMNCellStyle): number { - return style.margin ?? StyleDefault.DEFAULT_MARGIN; - } -} From 7a15f735847778d01a938e62f0e3f9b8507e8bd3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Fri, 25 Nov 2022 15:22:14 +0100 Subject: [PATCH 044/132] Lint --- src/component/mxgraph/BpmnGraph.ts | 2 +- src/component/mxgraph/GraphConfigurator.ts | 3 +- .../mxgraph/config/ShapeConfigurator.ts | 2 +- .../mxgraph/config/StyleConfigurator.ts | 12 +++---- .../mxgraph/overlay/custom-overlay.ts | 7 +--- .../mxgraph/renderer/StyleComputer.ts | 34 ++++++++++++------- src/component/mxgraph/renderer/style-utils.ts | 11 +++--- src/component/mxgraph/shape/edges.ts | 8 ++--- src/component/mxgraph/shape/event-shapes.ts | 2 +- src/component/mxgraph/shape/gateway-shapes.ts | 4 +-- .../mxgraph/shape/render/icon-painter.ts | 2 +- src/component/mxgraph/style/utils.ts | 2 -- src/component/version.ts | 2 +- test/integration/helpers/model-expect.ts | 4 +-- test/integration/matchers/matcher-utils.ts | 4 +-- .../mxgraph/renderer/style-utils.test.ts | 2 +- 16 files changed, 52 insertions(+), 49 deletions(-) diff --git a/src/component/mxgraph/BpmnGraph.ts b/src/component/mxgraph/BpmnGraph.ts index 5ff3946812..0c3b6ae2e1 100644 --- a/src/component/mxgraph/BpmnGraph.ts +++ b/src/component/mxgraph/BpmnGraph.ts @@ -20,7 +20,7 @@ import { ensurePositiveValue, ensureValidZoomConfiguration } from '../helpers/va import debounce from 'lodash.debounce'; import throttle from 'lodash.throttle'; import type { CellState, Point } from '@maxgraph/core'; -import {eventUtils, GraphView, Graph, InternalEvent} from "@maxgraph/core"; +import { eventUtils, GraphView, Graph, InternalEvent } from '@maxgraph/core'; const zoomFactorIn = 1.25; const zoomFactorOut = 1 / zoomFactorIn; diff --git a/src/component/mxgraph/GraphConfigurator.ts b/src/component/mxgraph/GraphConfigurator.ts index 743aa8b8d3..072a4167ac 100644 --- a/src/component/mxgraph/GraphConfigurator.ts +++ b/src/component/mxgraph/GraphConfigurator.ts @@ -19,7 +19,8 @@ import ShapeConfigurator from './config/ShapeConfigurator'; import MarkerConfigurator from './config/MarkerConfigurator'; import type { GlobalOptions } from '../options'; import { BpmnGraph } from './BpmnGraph'; -import { eventUtils, InternalMouseEvent } from '@maxgraph/core'; +import type { InternalMouseEvent } from '@maxgraph/core'; +import { eventUtils } from '@maxgraph/core'; /** * Configure the BpmnMxGraph graph that can be used by the lib diff --git a/src/component/mxgraph/config/ShapeConfigurator.ts b/src/component/mxgraph/config/ShapeConfigurator.ts index 13bc9714b1..192dd1b164 100644 --- a/src/component/mxgraph/config/ShapeConfigurator.ts +++ b/src/component/mxgraph/config/ShapeConfigurator.ts @@ -39,7 +39,7 @@ import { computeAllBpmnClassNamesOfCell } from '../renderer/style-utils'; import { MaxGraphCustomOverlay } from '../overlay/custom-overlay'; import { OverlayBadgeShape } from '../overlay/shapes'; import { BpmnConnector } from '../shape/edges'; -import { BPMNCellStyle } from '../renderer/StyleComputer'; +import type { BPMNCellStyle } from '../renderer/StyleComputer'; /** * @internal diff --git a/src/component/mxgraph/config/StyleConfigurator.ts b/src/component/mxgraph/config/StyleConfigurator.ts index 3285b89f20..4ff221e887 100644 --- a/src/component/mxgraph/config/StyleConfigurator.ts +++ b/src/component/mxgraph/config/StyleConfigurator.ts @@ -91,7 +91,7 @@ export class StyleConfigurator { [ AssociationDirectionKind.ONE, (style: BPMNCellStyle) => { - style.startArrow = undefined; + style.startArrow = undefined; }, ], [ @@ -138,7 +138,7 @@ export class StyleConfigurator { const style: BPMNCellStyle = { shape: constants.SHAPE.SWIMLANE, // label style - verticalAlign : constants.ALIGN.MIDDLE, + verticalAlign: constants.ALIGN.MIDDLE, align: constants.ALIGN.CENTER, startSize: StyleDefault.POOL_LABEL_SIZE, fillColor: StyleDefault.POOL_LABEL_FILL_COLOR, @@ -151,7 +151,7 @@ export class StyleConfigurator { const style: BPMNCellStyle = { shape: constants.SHAPE.SWIMLANE, // label style - verticalAlign : constants.ALIGN.MIDDLE, + verticalAlign: constants.ALIGN.MIDDLE, align: constants.ALIGN.CENTER, swimlaneLine: false, // hide the line between the title region and the content area startSize: StyleDefault.LANE_LABEL_SIZE, @@ -177,7 +177,7 @@ export class StyleConfigurator { const style: BPMNCellStyle = { shape: ShapeBpmnElementKind.TEXT_ANNOTATION, // label style - verticalAlign : constants.ALIGN.MIDDLE, + verticalAlign: constants.ALIGN.MIDDLE, align: constants.ALIGN.LEFT, spacingLeft: 5, fillColor: StyleDefault.TEXT_ANNOTATION_FILL_COLOR, @@ -188,7 +188,7 @@ export class StyleConfigurator { private configureGroupStyle(): void { const style: BPMNCellStyle = { - rounded:true, + rounded: true, absoluteArcSize: 1, arcSize: StyleDefault.SHAPE_ARC_SIZE, dashed: true, @@ -261,7 +261,7 @@ export class StyleConfigurator { private configureEdgeStyles(styleKinds: T[], specificStyles: Map void>): void { styleKinds.forEach(kind => { - const style: BPMNCellStyle = { bpmn:{} }; + const style: BPMNCellStyle = { bpmn: {} }; specificStyles.get(kind)(style); this.graph.getStylesheet().putCellStyle(kind.toString(), style); }); diff --git a/src/component/mxgraph/overlay/custom-overlay.ts b/src/component/mxgraph/overlay/custom-overlay.ts index 56adbd9a5e..78865d46a6 100644 --- a/src/component/mxgraph/overlay/custom-overlay.ts +++ b/src/component/mxgraph/overlay/custom-overlay.ts @@ -75,12 +75,7 @@ export class MaxGraphCustomOverlay extends CellOverlay { } } - return new Rectangle( - Math.round(pt.x - (w * this.defaultOverlap - this.offset.x) * s), - Math.round(pt.y - (h * this.defaultOverlap - this.offset.y) * s), - w * s, - h * s, - ); + return new Rectangle(Math.round(pt.x - (w * this.defaultOverlap - this.offset.x) * s), Math.round(pt.y - (h * this.defaultOverlap - this.offset.y) * s), w * s, h * s); } private computeEdgeBounds(state: CellState): Point { diff --git a/src/component/mxgraph/renderer/StyleComputer.ts b/src/component/mxgraph/renderer/StyleComputer.ts index 23641189b2..9862179972 100644 --- a/src/component/mxgraph/renderer/StyleComputer.ts +++ b/src/component/mxgraph/renderer/StyleComputer.ts @@ -15,7 +15,7 @@ */ import { constants } from '@maxgraph/core'; -import type { CellStyle, ShapeValue } from "@maxgraph/core"; +import type { CellStyle, ShapeValue } from '@maxgraph/core'; import Shape from '../../../model/bpmn/internal/shape/Shape'; import type { Edge } from '../../../model/bpmn/internal/edge/edge'; @@ -30,8 +30,16 @@ import { ShapeBpmnSubProcess, } from '../../../model/bpmn/internal/shape/ShapeBpmnElement'; import { BpmnShapeIdentifier } from '../style'; -import type { FlowKind, ShapeBpmnEventBasedGatewayKind, ShapeBpmnEventDefinitionKind, ShapeBpmnSubProcessKind, GlobalTaskKind, SequenceFlowKind, AssociationDirectionKind } from '../../../model/bpmn/internal'; -import {MessageVisibleKind, ShapeBpmnCallActivityKind, ShapeBpmnElementKind, ShapeBpmnMarkerKind, ShapeUtil} from '../../../model/bpmn/internal'; +import type { + FlowKind, + ShapeBpmnEventBasedGatewayKind, + ShapeBpmnEventDefinitionKind, + ShapeBpmnSubProcessKind, + GlobalTaskKind, + SequenceFlowKind, + AssociationDirectionKind, +} from '../../../model/bpmn/internal'; +import { MessageVisibleKind, ShapeBpmnCallActivityKind, ShapeBpmnElementKind, ShapeBpmnMarkerKind, ShapeUtil } from '../../../model/bpmn/internal'; import { AssociationFlow, SequenceFlow } from '../../../model/bpmn/internal/edge/flows'; import type { Font } from '../../../model/bpmn/internal/Label'; @@ -52,13 +60,13 @@ export interface BPMNCellStyle extends Omit { extra?: { css: { classes: string[]; - } + }; }; edge?: { endFillColor?: string; startFillColor?: string; }; - } + }; } /** @@ -66,19 +74,19 @@ export interface BPMNCellStyle extends Omit { */ export default class StyleComputer { computeStyle(bpmnCell: Shape | Edge, labelBounds: Bounds): BPMNCellStyle { - let style: BPMNCellStyle = { + const style: BPMNCellStyle = { bpmn: { kind: bpmnCell.bpmnElement.kind }, - ...(bpmnCell instanceof Shape ? StyleComputer.computeShapeStyle(bpmnCell) : StyleComputer.computeEdgeStyle(bpmnCell)) + ...(bpmnCell instanceof Shape ? StyleComputer.computeShapeStyle(bpmnCell) : StyleComputer.computeEdgeStyle(bpmnCell)), }; const fontStyleValues = StyleComputer.computeFontStyleValues(bpmnCell); const labelStyleValues = StyleComputer.computeLabelStyleValues(bpmnCell, labelBounds); - return {...style, ...fontStyleValues, ...labelStyleValues}; + return { ...style, ...fontStyleValues, ...labelStyleValues }; } private static computeShapeStyle(shape: Shape): BPMNCellStyle { - const style: BPMNCellStyle = { bpmn:{} }; + const style: BPMNCellStyle = { bpmn: {} }; const bpmnElement = shape.bpmnElement; if (bpmnElement instanceof ShapeBpmnEvent) { @@ -117,7 +125,7 @@ export default class StyleComputer { } private static computeEdgeStyle(edge: Edge): BPMNCellStyle { - const style: BPMNCellStyle = { bpmn:{} }; + const style: BPMNCellStyle = { bpmn: {} }; const bpmnElement = edge.bpmnElement; if (bpmnElement instanceof SequenceFlow) { @@ -130,7 +138,7 @@ export default class StyleComputer { } private static computeFontStyleValues(bpmnCell: Shape | Edge): BPMNCellStyle { - const style: BPMNCellStyle = { bpmn:{} }; + const style: BPMNCellStyle = { bpmn: {} }; const font = bpmnCell.label?.font; if (font) { @@ -143,7 +151,7 @@ export default class StyleComputer { } private static computeLabelStyleValues(bpmnCell: Shape | Edge, labelBounds: Bounds): BPMNCellStyle { - const style: BPMNCellStyle = { bpmn:{} }; + const style: BPMNCellStyle = { bpmn: {} }; const bpmnElement = bpmnCell.bpmnElement; if (labelBounds) { @@ -176,7 +184,7 @@ export default class StyleComputer { computeMessageFlowIconStyle(edge: Edge): BPMNCellStyle { return { shape: BpmnShapeIdentifier.MESSAGE_FLOW_ICON, - bpmn: { isNonInitiating: edge.messageVisibleKind === MessageVisibleKind.NON_INITIATING } + bpmn: { isNonInitiating: edge.messageVisibleKind === MessageVisibleKind.NON_INITIATING }, }; } diff --git a/src/component/mxgraph/renderer/style-utils.ts b/src/component/mxgraph/renderer/style-utils.ts index bcd9abf40f..7d1b522082 100644 --- a/src/component/mxgraph/renderer/style-utils.ts +++ b/src/component/mxgraph/renderer/style-utils.ts @@ -54,19 +54,20 @@ export function computeAllBpmnClassNames(style: BPMNCellStyle, isLabel: boolean) classes.push(computeBpmnBaseClassName(bpmnElementKind)); - if(style.bpmn.eventDefinitionKind) { + if (style.bpmn.eventDefinitionKind) { classes.push(`bpmn-event-def-${style.bpmn.eventDefinitionKind}`); } - if(style.bpmn.gatewayKind) { + if (style.bpmn.gatewayKind) { classes.push(`bpmn-gateway-kind-${style.bpmn.gatewayKind.toLowerCase()}`); } - if(style.bpmn.isNonInitiating !== undefined) { // message flow icon + if (style.bpmn.isNonInitiating !== undefined) { + // message flow icon classes.push(style.bpmn.isNonInitiating ? 'bpmn-icon-non-initiating' : 'bpmn-icon-initiating'); } - if(style.bpmn.subProcessKind) { + if (style.bpmn.subProcessKind) { classes.push(`bpmn-sub-process-${style.bpmn.gatewayKind.toLowerCase()}`); } - if(style.bpmn.globalTaskKind) { + if (style.bpmn.globalTaskKind) { classes.push(computeBpmnBaseClassName(style.bpmn.globalTaskKind)); } if (isLabel) { diff --git a/src/component/mxgraph/shape/edges.ts b/src/component/mxgraph/shape/edges.ts index 435db76359..f67bb82dfd 100644 --- a/src/component/mxgraph/shape/edges.ts +++ b/src/component/mxgraph/shape/edges.ts @@ -14,10 +14,10 @@ * limitations under the License. */ -import type { Point, AbstractCanvas2D } from "@maxgraph/core"; +import type { Point, AbstractCanvas2D } from '@maxgraph/core'; import { SvgCanvas2D, ConnectorShape, utils } from '@maxgraph/core'; -import type { BPMNCellStyle } from "../renderer/StyleComputer"; +import type { BPMNCellStyle } from '../renderer/StyleComputer'; import { BpmnShapeIdentifier } from '../style'; export class BpmnConnector extends ConnectorShape { @@ -39,12 +39,12 @@ export class BpmnConnector extends ConnectorShape { c.setDashed(false, false); if (sourceMarker != null) { - c.setFillColor((this.style as BPMNCellStyle).bpmn.edge.startFillColor ?? this.stroke); + c.setFillColor((this.style as BPMNCellStyle).bpmn.edge.startFillColor ?? this.stroke); sourceMarker(); } if (targetMarker != null) { - c.setFillColor((this.style as BPMNCellStyle).bpmn.edge.endFillColor ?? this.stroke); + c.setFillColor((this.style as BPMNCellStyle).bpmn.edge.endFillColor ?? this.stroke); targetMarker(); } } diff --git a/src/component/mxgraph/shape/event-shapes.ts b/src/component/mxgraph/shape/event-shapes.ts index c924f4b8e6..54ef64b938 100644 --- a/src/component/mxgraph/shape/event-shapes.ts +++ b/src/component/mxgraph/shape/event-shapes.ts @@ -108,7 +108,7 @@ export class EventShape extends EllipseShape { private static setDashedOuterShapePattern(paintParameter: PaintParameter, isInterrupting: boolean): void { paintParameter.canvas.save(); // ensure we can later restore the configuration - if (!isInterrupting ) { + if (!isInterrupting) { paintParameter.canvas.setDashed(true, false); paintParameter.canvas.setDashPattern('3 2'); } diff --git a/src/component/mxgraph/shape/gateway-shapes.ts b/src/component/mxgraph/shape/gateway-shapes.ts index 3995b5399b..0936d18680 100644 --- a/src/component/mxgraph/shape/gateway-shapes.ts +++ b/src/component/mxgraph/shape/gateway-shapes.ts @@ -16,12 +16,12 @@ import type { AbstractCanvas2D } from '@maxgraph/core'; import { RhombusShape } from '@maxgraph/core'; -import {ShapeBpmnEventBasedGatewayKind} from "../../../model/bpmn/internal"; +import { ShapeBpmnEventBasedGatewayKind } from '../../../model/bpmn/internal'; import { StyleDefault } from '../style'; import type { PaintParameter } from './render'; import { IconPainterProvider } from './render'; import { buildPaintParameter } from './render/icon-painter'; -import type { BPMNCellStyle } from "../renderer/StyleComputer"; +import type { BPMNCellStyle } from '../renderer/StyleComputer'; abstract class GatewayShape extends RhombusShape { protected iconPainter = IconPainterProvider.get(); diff --git a/src/component/mxgraph/shape/render/icon-painter.ts b/src/component/mxgraph/shape/render/icon-painter.ts index 768de7098b..c988eb4fd9 100644 --- a/src/component/mxgraph/shape/render/icon-painter.ts +++ b/src/component/mxgraph/shape/render/icon-painter.ts @@ -15,7 +15,7 @@ */ import { BpmnCanvas } from './BpmnCanvas'; -import {StyleDefault, StyleUtils} from '../../style'; +import { StyleDefault, StyleUtils } from '../../style'; import type { IconStyleConfiguration, ShapeConfiguration, Size } from './render-types'; import type { Shape, AbstractCanvas2D } from '@maxgraph/core'; diff --git a/src/component/mxgraph/style/utils.ts b/src/component/mxgraph/style/utils.ts index be704989e6..d5df80a5c6 100644 --- a/src/component/mxgraph/style/utils.ts +++ b/src/component/mxgraph/style/utils.ts @@ -14,7 +14,6 @@ * limitations under the License. */ - /** * Store all rendering defaults used by `bpmn-visualization`. * @@ -60,4 +59,3 @@ export enum StyleDefault { MESSAGE_FLOW_MARKER_START_FILL_COLOR = 'White', MESSAGE_FLOW_MARKER_END_FILL_COLOR = 'White', } - diff --git a/src/component/version.ts b/src/component/version.ts index f3ead40d34..8ad83cbdf5 100644 --- a/src/component/version.ts +++ b/src/component/version.ts @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import {Client} from "@maxgraph/core"; +import { Client } from '@maxgraph/core'; // WARN: this constant is automatically updated at release time by the 'manage-version-in-files.mjs' script. // So, if you modify the name of this file or this constant, please update the script accordingly. diff --git a/test/integration/helpers/model-expect.ts b/test/integration/helpers/model-expect.ts index bc73e46b58..7aa7b22f38 100644 --- a/test/integration/helpers/model-expect.ts +++ b/test/integration/helpers/model-expect.ts @@ -50,8 +50,8 @@ import { toBeTask, toBeUserTask, } from '../matchers'; -import type {ArrowType, Cell, FilterFunction, VAlignValue} from '@maxgraph/core'; -import { Geometry } from '@maxgraph/core'; +import type { ArrowType, Cell, FilterFunction, VAlignValue } from '@maxgraph/core'; +import type { Geometry } from '@maxgraph/core'; import type { ExpectedOverlay } from '../matchers/matcher-utils'; import { getCell } from '../matchers/matcher-utils'; import type { BPMNCellStyle } from '../../../src/component/mxgraph/renderer/StyleComputer'; diff --git a/test/integration/matchers/matcher-utils.ts b/test/integration/matchers/matcher-utils.ts index 177e53b3b5..cb52c7c7c7 100644 --- a/test/integration/matchers/matcher-utils.ts +++ b/test/integration/matchers/matcher-utils.ts @@ -22,7 +22,7 @@ import CustomMatcherResult = jest.CustomMatcherResult; import type { ExpectedEdgeModelElement, ExpectedFont, ExpectedShapeModelElement } from '../helpers/model-expect'; import { bpmnVisualization } from '../helpers/model-expect'; import type { MaxGraphCustomOverlay, MaxGraphCustomOverlayStyle } from '../../../src/component/mxgraph/overlay/custom-overlay'; -import { BPMNCellStyle } from '../../../src/component/mxgraph/renderer/StyleComputer'; +import type { BPMNCellStyle } from '../../../src/component/mxgraph/renderer/StyleComputer'; export interface ExpectedStateStyle extends BPMNCellStyle { verticalAlign?: VAlignValue; @@ -136,7 +136,7 @@ export function buildCommonExpectedStateStyle(expectedModel: ExpectedEdgeModelEl fontSize: font?.size ? font.size : 11, fontColor: 'Black', fontStyle: getFontStyleValue(font), - bpmn: undefined + bpmn: undefined, }; } diff --git a/test/unit/component/mxgraph/renderer/style-utils.test.ts b/test/unit/component/mxgraph/renderer/style-utils.test.ts index e87fc4961b..19048d5a21 100644 --- a/test/unit/component/mxgraph/renderer/style-utils.test.ts +++ b/test/unit/component/mxgraph/renderer/style-utils.test.ts @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import type { BPMNCellStyle } from "../../../../../src/component/mxgraph/renderer/StyleComputer"; +import type { BPMNCellStyle } from '../../../../../src/component/mxgraph/renderer/StyleComputer'; import { FlowKind, ShapeBpmnElementKind } from '../../../../../src/model/bpmn/internal'; import { computeBpmnBaseClassName, computeAllBpmnClassNames } from '../../../../../src/component/mxgraph/renderer/style-utils'; From 9d668f2ba85261524876ae2b3f7afd81b2283c3e Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Thu, 1 Dec 2022 10:50:11 +0100 Subject: [PATCH 045/132] TMP disable the GH workflow running the e2e tests --- .github/workflows/test-e2e.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/test-e2e.yml b/.github/workflows/test-e2e.yml index f6cc24d51b..cb13f29b23 100644 --- a/.github/workflows/test-e2e.yml +++ b/.github/workflows/test-e2e.yml @@ -37,6 +37,7 @@ on: jobs: test_e2e: runs-on: ${{ matrix.os }} + if: runner.os == 'NOT_SUPPORTED' # TEMP disable e2e until the code compile and the JS doesn't generate runtime errors that block the dev server strategy: # we want to run the full build on all os: don't cancel running jobs even if one fails fail-fast: false From d52a9c27156780748b64d093c54c044c0ba87a8e Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Thu, 1 Dec 2022 10:57:44 +0100 Subject: [PATCH 046/132] Remove unused StyleUtils import (StyleUtils was removed earlier) --- src/component/mxgraph/shape/render/icon-painter.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/mxgraph/shape/render/icon-painter.ts b/src/component/mxgraph/shape/render/icon-painter.ts index c988eb4fd9..3653939bd2 100644 --- a/src/component/mxgraph/shape/render/icon-painter.ts +++ b/src/component/mxgraph/shape/render/icon-painter.ts @@ -15,7 +15,7 @@ */ import { BpmnCanvas } from './BpmnCanvas'; -import { StyleDefault, StyleUtils } from '../../style'; +import { StyleDefault } from '../../style'; import type { IconStyleConfiguration, ShapeConfiguration, Size } from './render-types'; import type { Shape, AbstractCanvas2D } from '@maxgraph/core'; From 1390ae170391c19e75f68daa2ba633d4b99e228a Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Thu, 1 Dec 2022 11:00:55 +0100 Subject: [PATCH 047/132] Use right imports for PAN event --- src/component/mxgraph/GraphConfigurator.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/component/mxgraph/GraphConfigurator.ts b/src/component/mxgraph/GraphConfigurator.ts index 072a4167ac..9b4d944541 100644 --- a/src/component/mxgraph/GraphConfigurator.ts +++ b/src/component/mxgraph/GraphConfigurator.ts @@ -20,7 +20,7 @@ import MarkerConfigurator from './config/MarkerConfigurator'; import type { GlobalOptions } from '../options'; import { BpmnGraph } from './BpmnGraph'; import type { InternalMouseEvent } from '@maxgraph/core'; -import { eventUtils } from '@maxgraph/core'; +import { eventUtils, InternalEvent } from '@maxgraph/core'; /** * Configure the BpmnMxGraph graph that can be used by the lib @@ -66,8 +66,8 @@ export default class GraphConfigurator { const panningHandler = this.graph.panningHandler; if (options?.navigation?.enabled) { // Pan configuration - panningHandler.addListener(eventUtils.PAN_START, this.getPanningHandler('grab')); - panningHandler.addListener(eventUtils.PAN_END, this.getPanningHandler('default')); + panningHandler.addListener(InternalEvent.PAN_START, this.getPanningHandler('grab')); + panningHandler.addListener(InternalEvent.PAN_END, this.getPanningHandler('default')); this.graph.panningHandler.usePopupTrigger = false; // only use the left button to trigger panning // Reimplement the function as we also want to trigger 'panning on cells' (ignoreCell to true) and only on left-click From 88bdefc316e9708b114280f8403a3bce89f07237 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Thu, 1 Dec 2022 11:50:22 +0100 Subject: [PATCH 048/132] Fix types --- .../mxgraph/config/StyleConfigurator.ts | 59 ++++++++++++------- .../mxgraph/renderer/StyleComputer.ts | 11 ++-- 2 files changed, 46 insertions(+), 24 deletions(-) diff --git a/src/component/mxgraph/config/StyleConfigurator.ts b/src/component/mxgraph/config/StyleConfigurator.ts index 4ff221e887..fbe62b6d07 100644 --- a/src/component/mxgraph/config/StyleConfigurator.ts +++ b/src/component/mxgraph/config/StyleConfigurator.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import type { Stylesheet } from '@maxgraph/core'; +import type { ArrowType, ShapeValue, Stylesheet } from '@maxgraph/core'; import { constants, Perimeter } from '@maxgraph/core'; import { AssociationDirectionKind, FlowKind, SequenceFlowKind, ShapeBpmnElementKind, ShapeUtil } from '../../../model/bpmn/internal'; @@ -67,7 +67,8 @@ export class StyleConfigurator { [ SequenceFlowKind.DEFAULT, (style: BPMNCellStyle) => { - style.startArrow = MarkerIdentifier.ARROW_DASH; + // TODO remove forcing type when maxGraph fixes its types + style.startArrow = MarkerIdentifier.ARROW_DASH; }, ], [ @@ -140,8 +141,10 @@ export class StyleConfigurator { // label style verticalAlign: constants.ALIGN.MIDDLE, align: constants.ALIGN.CENTER, - startSize: StyleDefault.POOL_LABEL_SIZE, - fillColor: StyleDefault.POOL_LABEL_FILL_COLOR, + // TODO find a way to not force cast + startSize: StyleDefault.POOL_LABEL_SIZE, + // TODO find a way to not force cast + fillColor: StyleDefault.POOL_LABEL_FILL_COLOR, }; this.graph.getStylesheet().putCellStyle(ShapeBpmnElementKind.POOL, style); @@ -154,8 +157,10 @@ export class StyleConfigurator { verticalAlign: constants.ALIGN.MIDDLE, align: constants.ALIGN.CENTER, swimlaneLine: false, // hide the line between the title region and the content area - startSize: StyleDefault.LANE_LABEL_SIZE, - fillColor: StyleDefault.LANE_LABEL_FILL_COLOR, + // TODO find a way to not force cast + startSize: StyleDefault.LANE_LABEL_SIZE, + // TODO find a way to not force cast + fillColor: StyleDefault.LANE_LABEL_FILL_COLOR, }; this.graph.getStylesheet().putCellStyle(ShapeBpmnElementKind.LANE, style); @@ -164,9 +169,11 @@ export class StyleConfigurator { private configureEventStyles(): void { ShapeUtil.eventKinds().forEach(kind => { const style: BPMNCellStyle = { - shape: kind, + // TODO remove forcing type when maxGraph fixes its types + shape: (kind), perimeter: Perimeter.EllipsePerimeter, - strokeWidth: kind == ShapeBpmnElementKind.EVENT_END ? StyleDefault.STROKE_WIDTH_THICK : StyleDefault.STROKE_WIDTH_THIN, + // TODO find a way to not force cast + strokeWidth: (kind == ShapeBpmnElementKind.EVENT_END ? StyleDefault.STROKE_WIDTH_THICK : StyleDefault.STROKE_WIDTH_THIN), verticalLabelPosition: constants.ALIGN.BOTTOM, }; this.putCellStyle(kind, style); @@ -175,13 +182,16 @@ export class StyleConfigurator { private configureTextAnnotationStyle(): void { const style: BPMNCellStyle = { - shape: ShapeBpmnElementKind.TEXT_ANNOTATION, + // TODO remove forcing type when maxGraph fixes its types + shape: (ShapeBpmnElementKind.TEXT_ANNOTATION), // label style verticalAlign: constants.ALIGN.MIDDLE, align: constants.ALIGN.LEFT, spacingLeft: 5, - fillColor: StyleDefault.TEXT_ANNOTATION_FILL_COLOR, - strokeWidth: StyleDefault.STROKE_WIDTH_THIN, + // TODO find a way to not force cast + fillColor: StyleDefault.TEXT_ANNOTATION_FILL_COLOR, + // TODO find a way to not force cast + strokeWidth: StyleDefault.STROKE_WIDTH_THIN, }; this.putCellStyle(ShapeBpmnElementKind.TEXT_ANNOTATION, style); } @@ -190,11 +200,14 @@ export class StyleConfigurator { const style: BPMNCellStyle = { rounded: true, absoluteArcSize: 1, - arcSize: StyleDefault.SHAPE_ARC_SIZE, + // TODO find a way to not force cast + arcSize: StyleDefault.SHAPE_ARC_SIZE, dashed: true, dashPattern: '7 4 1 4', - strokeWidth: StyleDefault.STROKE_WIDTH_THIN, - fillColor: StyleDefault.GROUP_FILL_COLOR, + // TODO find a way to not force cast + strokeWidth: StyleDefault.STROKE_WIDTH_THIN, + // TODO find a way to not force cast + fillColor: StyleDefault.GROUP_FILL_COLOR, // Default label positioning align: constants.ALIGN.CENTER, @@ -206,13 +219,16 @@ export class StyleConfigurator { private configureActivityStyles(): void { ShapeUtil.activityKinds().forEach(kind => { const style: BPMNCellStyle = { - shape: kind, + // TODO remove forcing type when maxGraph fixes its types + shape: (kind), absoluteArcSize: 1, - arcSize: StyleDefault.SHAPE_ARC_SIZE, + // TODO find a way to not force cast + arcSize: StyleDefault.SHAPE_ARC_SIZE, // label style verticalAlign: constants.ALIGN.MIDDLE, - strokeWidth: kind == ShapeBpmnElementKind.CALL_ACTIVITY ? StyleDefault.STROKE_WIDTH_THICK : StyleDefault.STROKE_WIDTH_THIN, + // TODO find a way to not force cast + strokeWidth: (kind == ShapeBpmnElementKind.CALL_ACTIVITY ? StyleDefault.STROKE_WIDTH_THICK : StyleDefault.STROKE_WIDTH_THIN), }; this.putCellStyle(kind, style); }); @@ -221,10 +237,12 @@ export class StyleConfigurator { private configureGatewayStyles(): void { ShapeUtil.gatewayKinds().forEach(kind => { const style: BPMNCellStyle = { - shape: kind, + // TODO remove forcing type when maxGraph fixes its types + shape: (kind), perimeter: Perimeter.RhombusPerimeter, verticalAlign: constants.ALIGN.TOP, - strokeWidth: StyleDefault.STROKE_WIDTH_THIN, + // TODO find a way to not force cast + strokeWidth: StyleDefault.STROKE_WIDTH_THIN, // Default label positioning labelPosition: constants.ALIGN.LEFT, @@ -236,7 +254,8 @@ export class StyleConfigurator { private configureDefaultEdgeStyle(): void { const style = this.getStylesheet().getDefaultEdgeStyle() as BPMNCellStyle; - style.shape = BpmnShapeIdentifier.EDGE; + // TODO remove forcing type when maxGraph fixes its types + style.shape = BpmnShapeIdentifier.EDGE; style.endSize = 12; style.strokeWidth = 1.5; style.rounded = true; diff --git a/src/component/mxgraph/renderer/StyleComputer.ts b/src/component/mxgraph/renderer/StyleComputer.ts index 9862179972..8632d7d4af 100644 --- a/src/component/mxgraph/renderer/StyleComputer.ts +++ b/src/component/mxgraph/renderer/StyleComputer.ts @@ -43,9 +43,11 @@ import { MessageVisibleKind, ShapeBpmnCallActivityKind, ShapeBpmnElementKind, Sh import { AssociationFlow, SequenceFlow } from '../../../model/bpmn/internal/edge/flows'; import type { Font } from '../../../model/bpmn/internal/Label'; -export interface BPMNCellStyle extends Omit { - shape?: ShapeValue | string; - bpmn: { +export interface BPMNCellStyle extends CellStyle { + // TODO the maxGraph@0.1.0 shape property is defined as 'ShapeValue'. It should be 'ShapeValue | string' + // Omit { + // shape?: ShapeValue | string; + bpmn?: { kind?: ShapeBpmnElementKind | FlowKind; isInstantiating?: boolean; gatewayKind?: ShapeBpmnEventBasedGatewayKind; @@ -183,7 +185,8 @@ export default class StyleComputer { computeMessageFlowIconStyle(edge: Edge): BPMNCellStyle { return { - shape: BpmnShapeIdentifier.MESSAGE_FLOW_ICON, + // TODO remove forcing type when maxGraph fixes its types + shape: BpmnShapeIdentifier.MESSAGE_FLOW_ICON, bpmn: { isNonInitiating: edge.messageVisibleKind === MessageVisibleKind.NON_INITIATING }, }; } From 5ecc585e76b3487194c1b71ec184c8c4cd056d69 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Thu, 1 Dec 2022 11:52:48 +0100 Subject: [PATCH 049/132] Fix usage of constants.ALIGN --- src/component/mxgraph/overlay/custom-overlay.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/component/mxgraph/overlay/custom-overlay.ts b/src/component/mxgraph/overlay/custom-overlay.ts index 78865d46a6..e9e52673e0 100644 --- a/src/component/mxgraph/overlay/custom-overlay.ts +++ b/src/component/mxgraph/overlay/custom-overlay.ts @@ -58,17 +58,17 @@ export class MaxGraphCustomOverlay extends CellOverlay { } else { pt = new Point(); - if (this.align == constants.ALIGN_LEFT) { + if (this.align == constants.ALIGN.LEFT) { pt.x = state.x; - } else if (this.align == constants.ALIGN_CENTER) { + } else if (this.align == constants.ALIGN.CENTER) { pt.x = state.x + state.width / 2; } else { pt.x = state.x + state.width; } - if (this.verticalAlign == constants.ALIGN_TOP) { + if (this.verticalAlign == constants.ALIGN.TOP) { pt.y = state.y; - } else if (this.verticalAlign == constants.ALIGN_MIDDLE) { + } else if (this.verticalAlign == constants.ALIGN.MIDDLE) { pt.y = state.y + state.height / 2; } else { pt.y = state.y + state.height; @@ -81,11 +81,11 @@ export class MaxGraphCustomOverlay extends CellOverlay { private computeEdgeBounds(state: CellState): Point { const pts = state.absolutePoints; // 1st point for start position - if (this.align == constants.ALIGN_LEFT) { + if (this.align == constants.ALIGN.LEFT) { return pts[0]; } // middle point for middle position - else if (this.align == constants.ALIGN_CENTER) { + else if (this.align == constants.ALIGN.CENTER) { if (pts.length % 2 == 1) { return pts[Math.floor(pts.length / 2)]; } else { From 6d35abbcc892d6b43fa6e5fa4c7193479918457e Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Thu, 1 Dec 2022 13:26:23 +0100 Subject: [PATCH 050/132] Partially fix SvgExporter (some types are wrong) --- dev/ts/component/SvgExporter.ts | 44 +++++++++++++++++++-------------- 1 file changed, 25 insertions(+), 19 deletions(-) diff --git a/dev/ts/component/SvgExporter.ts b/dev/ts/component/SvgExporter.ts index 01ddddf392..e2fdac736c 100644 --- a/dev/ts/component/SvgExporter.ts +++ b/dev/ts/component/SvgExporter.ts @@ -15,7 +15,7 @@ */ import type { Graph, AlignValue, VAlignValue, OverflowValue, TextDirectionValue } from '@maxgraph/core'; -import { Client, SvgCanvas2D, ImageExport, utils, constants } from '@maxgraph/core'; +import { Client, SvgCanvas2D, ImageExport, constants, xmlUtils, domUtils, stringUtils } from '@maxgraph/core'; interface SvgExportOptions { scale: number; @@ -46,7 +46,10 @@ export class SvgExporter { private doSvgExport(enableForeignObjectForLabel: boolean): string { const svgDocument = this.computeSvg({ scale: 1, border: 25, enableForeignObjectForLabel: enableForeignObjectForLabel }); - const svgAsString = utils.getXml(svgDocument); + // TODO fix type + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + const svgAsString = xmlUtils.getXml(svgDocument); return ` ${svgAsString} @@ -63,7 +66,7 @@ ${svgAsString} const viewScale = this.graph.view.scale; // Prepares SVG document that holds the output - const svgDoc = utils.createXmlDocument(); + const svgDoc = xmlUtils.createXmlDocument(); const root = svgDoc.createElementNS(constants.NS_SVG, 'svg'); const s = scale / viewScale; @@ -100,8 +103,8 @@ ${svgAsString} return svgDoc; } - createSvgCanvas(node: Element): SvgCanvas2D { - const canvas = new CanvasForExport(node); + createSvgCanvas(node: SVGElement): SvgCanvas2D { + const canvas = new CanvasForExport(node, true); // from the draw.io code, may not be needed here canvas.pointerEvents = true; return canvas; @@ -112,29 +115,25 @@ class CanvasForExport extends SvgCanvas2D { // Convert HTML entities private htmlConverter = document.createElement('div'); - constructor(node: Element) { - super(node); - } - override getAlternateText( - fo: Element, + fo: SVGForeignObjectElement, x: number, y: number, w: number, h: number, - str: string, + str: Element | string, // eslint-disable-next-line @typescript-eslint/no-unused-vars - align: string, + align: AlignValue, // eslint-disable-next-line @typescript-eslint/no-unused-vars - valign: string, + valign: VAlignValue, // eslint-disable-next-line @typescript-eslint/no-unused-vars - wrap: string, + wrap: boolean, // eslint-disable-next-line @typescript-eslint/no-unused-vars format: string, // eslint-disable-next-line @typescript-eslint/no-unused-vars - overflow: string, + overflow: OverflowValue, // eslint-disable-next-line @typescript-eslint/no-unused-vars - clip: string, + clip: boolean, // eslint-disable-next-line @typescript-eslint/no-unused-vars rotation: number, ): string { @@ -159,15 +158,22 @@ class CanvasForExport extends SvgCanvas2D { super.plainText(x, y, w, h, str, align, valign, wrap, overflow, clip, rotation, dir); } - private computeTruncatedText(str: string, w: number): string { + private computeTruncatedText(str: Element | string, w: number): string { // Assumes a max character width of 0.5em if (str == null || this.state.fontSize <= 0) { return ''; } + // TODO manage str when it is an Element (see maxGraph code) + if (str instanceof Element) { + str = str.innerHTML; + } try { this.htmlConverter.innerHTML = str; - str = utils.extractTextWithWhitespace(this.htmlConverter.childNodes); + // TODO fix types + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + str = domUtils.extractTextWithWhitespace(this.htmlConverter.childNodes); // Workaround for substring breaking double byte UTF const exp = Math.ceil((2 * w) / this.state.fontSize); @@ -192,7 +198,7 @@ class CanvasForExport extends SvgCanvas2D { // Uses result and adds ellipsis if more than 1 char remains if (result.length < str.length && str.length - result.length > 1) { - str = utils.trim(result.join('')) + '...'; + str = stringUtils.trim(result.join('')) + '...'; } } catch (e) { console.warn('Error while computing txt label', e); From 7f34578c2f168028e660d15d7298486d04803d27 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Thu, 1 Dec 2022 13:40:39 +0100 Subject: [PATCH 051/132] TMP disable the GH workflow running the e2e tests (fix condition) --- .github/workflows/test-e2e.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/test-e2e.yml b/.github/workflows/test-e2e.yml index cb13f29b23..b58a9f88c2 100644 --- a/.github/workflows/test-e2e.yml +++ b/.github/workflows/test-e2e.yml @@ -37,7 +37,7 @@ on: jobs: test_e2e: runs-on: ${{ matrix.os }} - if: runner.os == 'NOT_SUPPORTED' # TEMP disable e2e until the code compile and the JS doesn't generate runtime errors that block the dev server + if: github.event_name == 'NOT_SUPPORTED' # TEMP disable e2e until the code compile and the JS doesn't generate runtime errors that block the dev server strategy: # we want to run the full build on all os: don't cancel running jobs even if one fails fail-fast: false From 3346478b56ce06325b08eb96d9cef77dcecda58f Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Thu, 1 Dec 2022 13:53:36 +0100 Subject: [PATCH 052/132] Fix call to panningHandler --- src/component/mxgraph/GraphConfigurator.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/component/mxgraph/GraphConfigurator.ts b/src/component/mxgraph/GraphConfigurator.ts index 9b4d944541..6292659960 100644 --- a/src/component/mxgraph/GraphConfigurator.ts +++ b/src/component/mxgraph/GraphConfigurator.ts @@ -19,7 +19,7 @@ import ShapeConfigurator from './config/ShapeConfigurator'; import MarkerConfigurator from './config/MarkerConfigurator'; import type { GlobalOptions } from '../options'; import { BpmnGraph } from './BpmnGraph'; -import type { InternalMouseEvent } from '@maxgraph/core'; +import type { InternalMouseEvent, PanningHandler } from '@maxgraph/core'; import { eventUtils, InternalEvent } from '@maxgraph/core'; /** @@ -63,13 +63,16 @@ export default class GraphConfigurator { } private configureNavigationSupport(options: GlobalOptions): void { - const panningHandler = this.graph.panningHandler; + // TODO decide if we hide this maxGraph implementation details in BpmnGraph + // In theory, the panningHandler may not be available if its plugin is not registered. The maxGraph code sometimes check for availability. For now, the check is not needed as we know that we load it + const panningHandler = this.graph.getPlugin('PanningHandler'); + if (options?.navigation?.enabled) { // Pan configuration panningHandler.addListener(InternalEvent.PAN_START, this.getPanningHandler('grab')); panningHandler.addListener(InternalEvent.PAN_END, this.getPanningHandler('default')); - this.graph.panningHandler.usePopupTrigger = false; // only use the left button to trigger panning + panningHandler.usePopupTrigger = false; // only use the left button to trigger panning // Reimplement the function as we also want to trigger 'panning on cells' (ignoreCell to true) and only on left-click // The Graph standard implementation doesn't ignore right click in this case, so do it by ourselves panningHandler.isForcePanningEvent = (me: InternalMouseEvent): boolean => eventUtils.isLeftMouseButton(me.getEvent()) || eventUtils.isMultiTouchEvent(me.getEvent()); From cc948ce432721352b7adcf051a73f0b48b12746d Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Thu, 1 Dec 2022 13:57:11 +0100 Subject: [PATCH 053/132] BpmnGraph: fix createMouseWheelZoomListener --- src/component/mxgraph/BpmnGraph.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/component/mxgraph/BpmnGraph.ts b/src/component/mxgraph/BpmnGraph.ts index 0c3b6ae2e1..511f89bc50 100644 --- a/src/component/mxgraph/BpmnGraph.ts +++ b/src/component/mxgraph/BpmnGraph.ts @@ -159,14 +159,14 @@ export class BpmnGraph extends Graph { private createMouseWheelZoomListener(performScaling: boolean) { return (event: Event, up: boolean) => { - if (eventUtils.isConsumed(event)) { + if (!(event instanceof MouseEvent) || eventUtils.isConsumed(event)) { return; } - const evt = event as MouseEvent; + // only the ctrl key - const isZoomWheelEvent = evt.ctrlKey && !evt.altKey && !evt.shiftKey && !evt.metaKey; + const isZoomWheelEvent = event.ctrlKey && !event.altKey && !event.shiftKey && !event.metaKey; if (isZoomWheelEvent) { - this.manageMouseWheelZoomEvent(up, evt, performScaling); + this.manageMouseWheelZoomEvent(up, event, performScaling); } }; } From 79ed1cf075acec1fc959a0adfb6dc2417a3d0252 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Thu, 1 Dec 2022 14:01:39 +0100 Subject: [PATCH 054/132] WIP: fix mxconstants call use values of types instead --- .../mxgraph/config/StyleConfigurator.ts | 24 +++++++++---------- .../mxgraph/overlay/custom-overlay.ts | 6 ++--- .../mxgraph/renderer/StyleComputer.ts | 2 +- 3 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/component/mxgraph/config/StyleConfigurator.ts b/src/component/mxgraph/config/StyleConfigurator.ts index fbe62b6d07..e8c04659dc 100644 --- a/src/component/mxgraph/config/StyleConfigurator.ts +++ b/src/component/mxgraph/config/StyleConfigurator.ts @@ -35,7 +35,7 @@ export class StyleConfigurator { [ FlowKind.SEQUENCE_FLOW, (style: BPMNCellStyle) => { - style.endArrow = constants.ARROW.BLOCK_THIN; + style.endArrow = 'blockThin'; }, ], [ @@ -43,11 +43,11 @@ export class StyleConfigurator { (style: BPMNCellStyle) => { style.dashed = true; style.dashPattern = '8 5'; - style.startArrow = constants.ARROW.OVAL; + style.startArrow = 'oval'; style.startSize = 8; style.startFill = true; style.bpmn.edge.startFillColor = StyleDefault.MESSAGE_FLOW_MARKER_START_FILL_COLOR; - style.endArrow = constants.ARROW.BLOCK_THIN; + style.endArrow = 'blockThin'; style.endFill = true; style.bpmn.edge.endFillColor = StyleDefault.MESSAGE_FLOW_MARKER_END_FILL_COLOR; }, @@ -57,8 +57,8 @@ export class StyleConfigurator { (style: BPMNCellStyle) => { style.dashed = true; style.dashPattern = '1 2'; - style.endArrow = constants.ARROW.OPEN_THIN; - style.startArrow = constants.ARROW.OPEN_THIN; + style.endArrow = 'openThin'; + style.startArrow = 'openThin'; style.startSize = 12; }, ], @@ -139,8 +139,8 @@ export class StyleConfigurator { const style: BPMNCellStyle = { shape: constants.SHAPE.SWIMLANE, // label style - verticalAlign: constants.ALIGN.MIDDLE, - align: constants.ALIGN.CENTER, + verticalAlign: 'middle', + align: 'center', // TODO find a way to not force cast startSize: StyleDefault.POOL_LABEL_SIZE, // TODO find a way to not force cast @@ -154,8 +154,8 @@ export class StyleConfigurator { const style: BPMNCellStyle = { shape: constants.SHAPE.SWIMLANE, // label style - verticalAlign: constants.ALIGN.MIDDLE, - align: constants.ALIGN.CENTER, + verticalAlign: 'middle', + align: 'center', swimlaneLine: false, // hide the line between the title region and the content area // TODO find a way to not force cast startSize: StyleDefault.LANE_LABEL_SIZE, @@ -185,7 +185,7 @@ export class StyleConfigurator { // TODO remove forcing type when maxGraph fixes its types shape: (ShapeBpmnElementKind.TEXT_ANNOTATION), // label style - verticalAlign: constants.ALIGN.MIDDLE, + verticalAlign: 'middle', align: constants.ALIGN.LEFT, spacingLeft: 5, // TODO find a way to not force cast @@ -210,7 +210,7 @@ export class StyleConfigurator { fillColor: StyleDefault.GROUP_FILL_COLOR, // Default label positioning - align: constants.ALIGN.CENTER, + align: 'center', verticalAlign: constants.ALIGN.TOP, }; this.putCellStyle(ShapeBpmnElementKind.GROUP, style); @@ -226,7 +226,7 @@ export class StyleConfigurator { arcSize: StyleDefault.SHAPE_ARC_SIZE, // label style - verticalAlign: constants.ALIGN.MIDDLE, + verticalAlign: 'middle', // TODO find a way to not force cast strokeWidth: (kind == ShapeBpmnElementKind.CALL_ACTIVITY ? StyleDefault.STROKE_WIDTH_THICK : StyleDefault.STROKE_WIDTH_THIN), }; diff --git a/src/component/mxgraph/overlay/custom-overlay.ts b/src/component/mxgraph/overlay/custom-overlay.ts index e9e52673e0..a77e7b909b 100644 --- a/src/component/mxgraph/overlay/custom-overlay.ts +++ b/src/component/mxgraph/overlay/custom-overlay.ts @@ -60,7 +60,7 @@ export class MaxGraphCustomOverlay extends CellOverlay { if (this.align == constants.ALIGN.LEFT) { pt.x = state.x; - } else if (this.align == constants.ALIGN.CENTER) { + } else if (this.align == 'center') { pt.x = state.x + state.width / 2; } else { pt.x = state.x + state.width; @@ -68,7 +68,7 @@ export class MaxGraphCustomOverlay extends CellOverlay { if (this.verticalAlign == constants.ALIGN.TOP) { pt.y = state.y; - } else if (this.verticalAlign == constants.ALIGN.MIDDLE) { + } else if (this.verticalAlign == 'middle') { pt.y = state.y + state.height / 2; } else { pt.y = state.y + state.height; @@ -85,7 +85,7 @@ export class MaxGraphCustomOverlay extends CellOverlay { return pts[0]; } // middle point for middle position - else if (this.align == constants.ALIGN.CENTER) { + else if (this.align == 'center') { if (pts.length % 2 == 1) { return pts[Math.floor(pts.length / 2)]; } else { diff --git a/src/component/mxgraph/renderer/StyleComputer.ts b/src/component/mxgraph/renderer/StyleComputer.ts index 8632d7d4af..bb7a612f71 100644 --- a/src/component/mxgraph/renderer/StyleComputer.ts +++ b/src/component/mxgraph/renderer/StyleComputer.ts @@ -159,7 +159,7 @@ export default class StyleComputer { if (labelBounds) { style.verticalAlign = constants.ALIGN.TOP; if (bpmnCell.bpmnElement.kind != ShapeBpmnElementKind.TEXT_ANNOTATION) { - style.align = constants.ALIGN.CENTER; + style.align = 'center'; } if (bpmnCell instanceof Shape) { From b837f76924aa58e174d41c0bb6c0bf169f18437b Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Thu, 1 Dec 2022 14:56:07 +0100 Subject: [PATCH 055/132] fix maxGraph constants "ambient const enums" --- .../mxgraph/config/ShapeConfigurator.ts | 13 ++++++----- .../mxgraph/config/StyleConfigurator.ts | 22 ++++++++++--------- .../mxgraph/overlay/custom-overlay.ts | 6 ++--- .../mxgraph/renderer/StyleComputer.ts | 19 ++++++++-------- src/component/mxgraph/style/utils.ts | 9 ++++++++ 5 files changed, 40 insertions(+), 29 deletions(-) diff --git a/src/component/mxgraph/config/ShapeConfigurator.ts b/src/component/mxgraph/config/ShapeConfigurator.ts index 192dd1b164..5e8006976e 100644 --- a/src/component/mxgraph/config/ShapeConfigurator.ts +++ b/src/component/mxgraph/config/ShapeConfigurator.ts @@ -34,7 +34,7 @@ import { } from '../shape/activity-shapes'; import { TextAnnotationShape } from '../shape/text-annotation-shapes'; import { MessageFlowIconShape } from '../shape/flow-shapes'; -import { BpmnShapeIdentifier } from '../style'; +import { BpmnShapeIdentifier, FONT } from '../style'; import { computeAllBpmnClassNamesOfCell } from '../renderer/style-utils'; import { MaxGraphCustomOverlay } from '../overlay/custom-overlay'; import { OverlayBadgeShape } from '../overlay/shapes'; @@ -109,18 +109,18 @@ export default class ShapeConfigurator { // END OF Fix for issue #920 '; '; - if ((s.fontStyle & constants.FONT.BOLD) == constants.FONT.BOLD) { + if ((s.fontStyle & FONT.BOLD) == FONT.BOLD) { css += 'font-weight: bold; '; } - if ((s.fontStyle & constants.FONT.ITALIC) == constants.FONT.ITALIC) { + if ((s.fontStyle & FONT.ITALIC) == FONT.ITALIC) { css += 'font-style: italic; '; } const deco = []; - if ((s.fontStyle & constants.FONT.UNDERLINE) == constants.FONT.UNDERLINE) { + if ((s.fontStyle & FONT.UNDERLINE) == FONT.UNDERLINE) { deco.push('underline'); } - if ((s.fontStyle & constants.FONT.STRIKETHROUGH) == constants.FONT.STRIKETHROUGH) { + if ((s.fontStyle & FONT.STRIKETHROUGH) == FONT.STRIKETHROUGH) { deco.push('line-through'); } if (deco.length > 0) { @@ -153,7 +153,8 @@ export default class ShapeConfigurator { // 'this.state.cell.style' = the style applied to the cell: 1st element: style name = bpmn shape name const cell = this.state.cell; // dialect = strictHtml is set means that current node holds an html label - let allBpmnClassNames = computeAllBpmnClassNamesOfCell(cell, this.dialect === constants.DIALECT.STRICTHTML); + // TODO maxGraph "TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided."constants.DIALECT.STRICTHTML + let allBpmnClassNames = computeAllBpmnClassNamesOfCell(cell, this.dialect === 'strictHtml'); const extraCssClasses = (this.state.style as BPMNCellStyle).bpmn.extra.css.classes; if (extraCssClasses) { allBpmnClassNames = allBpmnClassNames.concat(extraCssClasses); diff --git a/src/component/mxgraph/config/StyleConfigurator.ts b/src/component/mxgraph/config/StyleConfigurator.ts index e8c04659dc..07d8645d4b 100644 --- a/src/component/mxgraph/config/StyleConfigurator.ts +++ b/src/component/mxgraph/config/StyleConfigurator.ts @@ -74,7 +74,7 @@ export class StyleConfigurator { [ SequenceFlowKind.CONDITIONAL_FROM_ACTIVITY, (style: BPMNCellStyle) => { - style.startArrow = constants.ARROW.DIAMOND_THIN; + style.startArrow = 'diamondThin'; style.startSize = 18; style.startFill = true; style.bpmn.edge.startFillColor = StyleDefault.SEQUENCE_FLOW_CONDITIONAL_FROM_ACTIVITY_MARKER_FILL_COLOR; @@ -137,7 +137,8 @@ export class StyleConfigurator { private configurePoolStyle(): void { const style: BPMNCellStyle = { - shape: constants.SHAPE.SWIMLANE, + // TODO maxgraph "TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided." constants.SHAPE.SWIMLANE + shape: 'swimlane', // label style verticalAlign: 'middle', align: 'center', @@ -152,7 +153,8 @@ export class StyleConfigurator { private configureLaneStyle(): void { const style: BPMNCellStyle = { - shape: constants.SHAPE.SWIMLANE, + // TODO maxgraph "TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided." constants.SHAPE.SWIMLANE + shape: 'swimlane', // label style verticalAlign: 'middle', align: 'center', @@ -174,7 +176,7 @@ export class StyleConfigurator { perimeter: Perimeter.EllipsePerimeter, // TODO find a way to not force cast strokeWidth: (kind == ShapeBpmnElementKind.EVENT_END ? StyleDefault.STROKE_WIDTH_THICK : StyleDefault.STROKE_WIDTH_THIN), - verticalLabelPosition: constants.ALIGN.BOTTOM, + verticalLabelPosition: 'bottom', }; this.putCellStyle(kind, style); }); @@ -186,7 +188,7 @@ export class StyleConfigurator { shape: (ShapeBpmnElementKind.TEXT_ANNOTATION), // label style verticalAlign: 'middle', - align: constants.ALIGN.LEFT, + align: 'left', spacingLeft: 5, // TODO find a way to not force cast fillColor: StyleDefault.TEXT_ANNOTATION_FILL_COLOR, @@ -211,7 +213,7 @@ export class StyleConfigurator { // Default label positioning align: 'center', - verticalAlign: constants.ALIGN.TOP, + verticalAlign: 'top', }; this.putCellStyle(ShapeBpmnElementKind.GROUP, style); } @@ -240,13 +242,13 @@ export class StyleConfigurator { // TODO remove forcing type when maxGraph fixes its types shape: (kind), perimeter: Perimeter.RhombusPerimeter, - verticalAlign: constants.ALIGN.TOP, + verticalAlign: 'top', // TODO find a way to not force cast strokeWidth: StyleDefault.STROKE_WIDTH_THIN, // Default label positioning - labelPosition: constants.ALIGN.LEFT, - verticalLabelPosition: constants.ALIGN.TOP, + labelPosition: 'left', + verticalLabelPosition: 'top', }; this.putCellStyle(kind, style); }); @@ -260,7 +262,7 @@ export class StyleConfigurator { style.strokeWidth = 1.5; style.rounded = true; style.arcSize = 5; - style.verticalAlign = constants.ALIGN.BOTTOM; + style.verticalAlign = 'bottom'; style.endArrow = undefined; StyleConfigurator.configureCommonDefaultStyle(style); diff --git a/src/component/mxgraph/overlay/custom-overlay.ts b/src/component/mxgraph/overlay/custom-overlay.ts index a77e7b909b..9f29f09402 100644 --- a/src/component/mxgraph/overlay/custom-overlay.ts +++ b/src/component/mxgraph/overlay/custom-overlay.ts @@ -58,7 +58,7 @@ export class MaxGraphCustomOverlay extends CellOverlay { } else { pt = new Point(); - if (this.align == constants.ALIGN.LEFT) { + if (this.align == 'left') { pt.x = state.x; } else if (this.align == 'center') { pt.x = state.x + state.width / 2; @@ -66,7 +66,7 @@ export class MaxGraphCustomOverlay extends CellOverlay { pt.x = state.x + state.width; } - if (this.verticalAlign == constants.ALIGN.TOP) { + if (this.verticalAlign == 'top') { pt.y = state.y; } else if (this.verticalAlign == 'middle') { pt.y = state.y + state.height / 2; @@ -81,7 +81,7 @@ export class MaxGraphCustomOverlay extends CellOverlay { private computeEdgeBounds(state: CellState): Point { const pts = state.absolutePoints; // 1st point for start position - if (this.align == constants.ALIGN.LEFT) { + if (this.align == 'left') { return pts[0]; } // middle point for middle position diff --git a/src/component/mxgraph/renderer/StyleComputer.ts b/src/component/mxgraph/renderer/StyleComputer.ts index bb7a612f71..0ab333469e 100644 --- a/src/component/mxgraph/renderer/StyleComputer.ts +++ b/src/component/mxgraph/renderer/StyleComputer.ts @@ -14,7 +14,6 @@ * limitations under the License. */ -import { constants } from '@maxgraph/core'; import type { CellStyle, ShapeValue } from '@maxgraph/core'; import Shape from '../../../model/bpmn/internal/shape/Shape'; @@ -29,7 +28,7 @@ import { ShapeBpmnStartEvent, ShapeBpmnSubProcess, } from '../../../model/bpmn/internal/shape/ShapeBpmnElement'; -import { BpmnShapeIdentifier } from '../style'; +import { BpmnShapeIdentifier, FONT } from '../style'; import type { FlowKind, ShapeBpmnEventBasedGatewayKind, @@ -157,7 +156,7 @@ export default class StyleComputer { const bpmnElement = bpmnCell.bpmnElement; if (labelBounds) { - style.verticalAlign = constants.ALIGN.TOP; + style.verticalAlign = 'top'; if (bpmnCell.bpmnElement.kind != ShapeBpmnElementKind.TEXT_ANNOTATION) { style.align = 'center'; } @@ -166,8 +165,8 @@ export default class StyleComputer { // arbitrarily increase width to relax too small bounds (for instance for reference diagrams from miwg-test-suite) style.labelWidth = labelBounds.width + 1; // align settings - style.labelPosition = constants.ALIGN.LEFT; - style.verticalLabelPosition = constants.ALIGN.TOP; + style.labelPosition = 'left'; + style.verticalLabelPosition = 'top'; } } // when no label bounds, adjust the default style dynamically @@ -177,7 +176,7 @@ export default class StyleComputer { (bpmnElement instanceof ShapeBpmnCallActivity && bpmnElement.callActivityKind === ShapeBpmnCallActivityKind.CALLING_PROCESS)) && !bpmnElement.markers.includes(ShapeBpmnMarkerKind.EXPAND) ) { - style.verticalAlign = constants.ALIGN.TOP; + style.verticalAlign = 'top'; } return style; @@ -194,16 +193,16 @@ export default class StyleComputer { private static getFontStyleValue(font: Font): number { let value = 0; if (font.isBold) { - value += constants.FONT.BOLD; + value += FONT.BOLD; } if (font.isItalic) { - value += constants.FONT.ITALIC; + value += FONT.ITALIC; } if (font.isStrikeThrough) { - value += constants.FONT.STRIKETHROUGH; + value += FONT.STRIKETHROUGH; } if (font.isUnderline) { - value += constants.FONT.UNDERLINE; + value += FONT.UNDERLINE; } return value; } diff --git a/src/component/mxgraph/style/utils.ts b/src/component/mxgraph/style/utils.ts index d5df80a5c6..cda293eeda 100644 --- a/src/component/mxgraph/style/utils.ts +++ b/src/component/mxgraph/style/utils.ts @@ -59,3 +59,12 @@ export enum StyleDefault { MESSAGE_FLOW_MARKER_START_FILL_COLOR = 'White', MESSAGE_FLOW_MARKER_END_FILL_COLOR = 'White', } + +// TODO maxGraph "TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided." constants.FONT +// TODO remove duplicated from maxGraph +export enum FONT { + BOLD = 1, + ITALIC = 2, + UNDERLINE = 4, + STRIKETHROUGH = 8, +} From 68caecdfbac8387896e817e4b283faa707b47e28 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Thu, 1 Dec 2022 15:06:09 +0100 Subject: [PATCH 056/132] BpmnGraph: update declaration of methods overriding Graph to match maxGraph types --- src/component/mxgraph/BpmnGraph.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/component/mxgraph/BpmnGraph.ts b/src/component/mxgraph/BpmnGraph.ts index 511f89bc50..6921b3f344 100644 --- a/src/component/mxgraph/BpmnGraph.ts +++ b/src/component/mxgraph/BpmnGraph.ts @@ -65,28 +65,28 @@ export class BpmnGraph extends Graph { * Overridden to manage `currentZoomLevel` * @internal */ - override zoomActual(): void { + override zoomActual = (): void => { super.zoomActual(); this.setCurrentZoomLevel(); - } + }; /** * Overridden to manage `currentZoomLevel` * @internal */ - override zoomIn(): void { + override zoomIn = (): void => { super.zoomIn(); this.setCurrentZoomLevel(); - } + }; /** * Overridden to manage `currentZoomLevel` * @internal */ - override zoomOut(): void { + override zoomOut = (): void => { super.zoomOut(); this.setCurrentZoomLevel(); - } + }; /** * @internal From ec11f1cd67e0f1dcf243264a9cce2f0b4412a11c Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Thu, 1 Dec 2022 15:09:22 +0100 Subject: [PATCH 057/132] integration test: restore maxGraph-config.ts --- test/integration/config/maxGraph-config.ts | 21 +++++++++++++++++++++ test/integration/jest.config.js | 2 +- 2 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 test/integration/config/maxGraph-config.ts diff --git a/test/integration/config/maxGraph-config.ts b/test/integration/config/maxGraph-config.ts new file mode 100644 index 0000000000..32115f170b --- /dev/null +++ b/test/integration/config/maxGraph-config.ts @@ -0,0 +1,21 @@ +/** + * Copyright 2021 Bonitasoft S.A. + * + * 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 { Client } from '@maxgraph/core'; + +// Force usage of ForeignObject +// By default, maxGraph detects no ForeignObject support when running tests in jsdom environment +Client.NO_FO = false; diff --git a/test/integration/jest.config.js b/test/integration/jest.config.js index 3c73618941..3b795b5c3f 100644 --- a/test/integration/jest.config.js +++ b/test/integration/jest.config.js @@ -33,7 +33,7 @@ module.exports = { coverageReporters: ['lcov', 'text-summary'], coverageDirectory: 'build/test-report/integration', setupFilesAfterEnv: [ - './test/integration/config/mxgraph-config.ts', + './test/integration/config/maxGraph-config.ts', // put at the latest place to see logs that could be displayed by setup files './test/integration/config/hide-console-warnings.js', ], From 36db19b6a68af8217e9c408547a1b4af3a817cb0 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Thu, 1 Dec 2022 15:41:08 +0100 Subject: [PATCH 058/132] lint --- dev/ts/component/ThemedBpmnVisualization.ts | 1 - src/component/mxgraph/overlay/custom-overlay.ts | 2 +- src/component/mxgraph/renderer/CoordinatesTranslator.ts | 1 - src/component/mxgraph/shape/edges.ts | 3 +-- 4 files changed, 2 insertions(+), 5 deletions(-) diff --git a/dev/ts/component/ThemedBpmnVisualization.ts b/dev/ts/component/ThemedBpmnVisualization.ts index 85055ef1d7..6aa8d48e2c 100644 --- a/dev/ts/component/ThemedBpmnVisualization.ts +++ b/dev/ts/component/ThemedBpmnVisualization.ts @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { constants } from '@maxgraph/core'; import { BpmnVisualization, FlowKind, ShapeBpmnElementKind, ShapeUtil, StyleConfigurator, StyleDefault } from '../../../src/bpmn-visualization'; import { logStartup } from '../utils/internal-helpers'; diff --git a/src/component/mxgraph/overlay/custom-overlay.ts b/src/component/mxgraph/overlay/custom-overlay.ts index 9f29f09402..23a1d60f90 100644 --- a/src/component/mxgraph/overlay/custom-overlay.ts +++ b/src/component/mxgraph/overlay/custom-overlay.ts @@ -14,7 +14,7 @@ * limitations under the License. */ import type { CellState } from '@maxgraph/core'; -import { CellOverlay, Point, Rectangle, constants } from '@maxgraph/core'; +import { CellOverlay, Point, Rectangle } from '@maxgraph/core'; import type { OverlayStyle } from '../../registry'; diff --git a/src/component/mxgraph/renderer/CoordinatesTranslator.ts b/src/component/mxgraph/renderer/CoordinatesTranslator.ts index 31bbf1275e..7fd34178d6 100644 --- a/src/component/mxgraph/renderer/CoordinatesTranslator.ts +++ b/src/component/mxgraph/renderer/CoordinatesTranslator.ts @@ -43,7 +43,6 @@ export default class CoordinatesTranslator { // This implementation is taken from the example described in the documentation of mxgraph#getTranslateForRoot (4.1.1) // The translation is generally negative private getTranslateForRoot(cell: Cell): Point { - const model = this.graph.model; const offset = new Point(0, 0); while (cell != null) { diff --git a/src/component/mxgraph/shape/edges.ts b/src/component/mxgraph/shape/edges.ts index f67bb82dfd..b188a8f947 100644 --- a/src/component/mxgraph/shape/edges.ts +++ b/src/component/mxgraph/shape/edges.ts @@ -15,10 +15,9 @@ */ import type { Point, AbstractCanvas2D } from '@maxgraph/core'; -import { SvgCanvas2D, ConnectorShape, utils } from '@maxgraph/core'; +import { SvgCanvas2D, ConnectorShape } from '@maxgraph/core'; import type { BPMNCellStyle } from '../renderer/StyleComputer'; -import { BpmnShapeIdentifier } from '../style'; export class BpmnConnector extends ConnectorShape { constructor(points: Point[], stroke: string, strokewidth?: number) { From 93487f194049264e8355332a9a364c7e65afe287 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Thu, 1 Dec 2022 15:44:36 +0100 Subject: [PATCH 059/132] TMP ts-ignore for CellRenderer.registerShape --- .../mxgraph/config/ShapeConfigurator.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/component/mxgraph/config/ShapeConfigurator.ts b/src/component/mxgraph/config/ShapeConfigurator.ts index 5e8006976e..5c0ca423cb 100644 --- a/src/component/mxgraph/config/ShapeConfigurator.ts +++ b/src/component/mxgraph/config/ShapeConfigurator.ts @@ -60,10 +60,20 @@ export default class ShapeConfigurator { CellRenderer.registerShape(ShapeBpmnElementKind.EVENT_INTERMEDIATE_CATCH, IntermediateEventShape); CellRenderer.registerShape(ShapeBpmnElementKind.EVENT_BOUNDARY, IntermediateEventShape); // gateways + // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- TODO fix CellRenderer.registerShape call + // @ts-ignore CellRenderer.registerShape(ShapeBpmnElementKind.GATEWAY_COMPLEX, ComplexGatewayShape); + // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- TODO fix CellRenderer.registerShape call + // @ts-ignore CellRenderer.registerShape(ShapeBpmnElementKind.GATEWAY_EVENT_BASED, EventBasedGatewayShape); + // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- TODO fix CellRenderer.registerShape call + // @ts-ignore CellRenderer.registerShape(ShapeBpmnElementKind.GATEWAY_EXCLUSIVE, ExclusiveGatewayShape); + // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- TODO fix CellRenderer.registerShape call + // @ts-ignore CellRenderer.registerShape(ShapeBpmnElementKind.GATEWAY_INCLUSIVE, InclusiveGatewayShape); + // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- TODO fix CellRenderer.registerShape call + // @ts-ignore CellRenderer.registerShape(ShapeBpmnElementKind.GATEWAY_PARALLEL, ParallelGatewayShape); // activities CellRenderer.registerShape(ShapeBpmnElementKind.SUB_PROCESS, SubProcessShape); @@ -78,10 +88,16 @@ export default class ShapeConfigurator { CellRenderer.registerShape(ShapeBpmnElementKind.TASK_SCRIPT, ScriptTaskShape); CellRenderer.registerShape(ShapeBpmnElementKind.TASK_BUSINESS_RULE, BusinessRuleTaskShape); // artifacts + // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- TODO fix CellRenderer.registerShape call + // @ts-ignore CellRenderer.registerShape(ShapeBpmnElementKind.TEXT_ANNOTATION, TextAnnotationShape); // shapes for flows + // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- TODO fix CellRenderer.registerShape call + // @ts-ignore CellRenderer.registerShape(BpmnShapeIdentifier.EDGE, BpmnConnector); + // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- TODO fix CellRenderer.registerShape call + // @ts-ignore CellRenderer.registerShape(BpmnShapeIdentifier.MESSAGE_FLOW_ICON, MessageFlowIconShape); } From c6bf02f887a175b4a40a0304b850f4eb23aed5ce Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Thu, 1 Dec 2022 16:05:57 +0100 Subject: [PATCH 060/132] style-utils.test.ts: adapt inputs --- .../mxgraph/renderer/style-utils.test.ts | 48 +++++++++---------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/test/unit/component/mxgraph/renderer/style-utils.test.ts b/test/unit/component/mxgraph/renderer/style-utils.test.ts index 19048d5a21..e14b180bfa 100644 --- a/test/unit/component/mxgraph/renderer/style-utils.test.ts +++ b/test/unit/component/mxgraph/renderer/style-utils.test.ts @@ -44,30 +44,30 @@ describe('compute base css class names of BPMN elements', () => { describe('compute all css class names based on style input', () => { it.each` - style | isLabel | expectedClassNames - ${ShapeBpmnElementKind.LANE} | ${true} | ${['bpmn-type-container', 'bpmn-lane', 'bpmn-label']} - ${ShapeBpmnElementKind.POOL} | ${false} | ${['bpmn-type-container', 'bpmn-pool']} - ${ShapeBpmnElementKind.CALL_ACTIVITY} | ${false} | ${['bpmn-type-activity', 'bpmn-call-activity']} - ${'callActivity;bpmn.globalTaskKind=globalTask'} | ${false} | ${['bpmn-type-activity', 'bpmn-call-activity', 'bpmn-global-task']} - ${'callActivity;bpmn.globalTaskKind=globalManualTask'} | ${true} | ${['bpmn-type-activity', 'bpmn-call-activity', 'bpmn-global-manual-task', 'bpmn-label']} - ${ShapeBpmnElementKind.EVENT_BOUNDARY} | ${true} | ${['bpmn-type-event', 'bpmn-boundary-event', 'bpmn-label']} - ${'boundaryEvent;bpmn.eventDefinitionKind=cancel;bpmn.isInterrupting=true'} | ${true} | ${['bpmn-type-event', 'bpmn-boundary-event', 'bpmn-event-def-cancel', 'bpmn-label']} - ${ShapeBpmnElementKind.EVENT_INTERMEDIATE_THROW} | ${false} | ${['bpmn-type-event', 'bpmn-intermediate-throw-event']} - ${'startEvent;bpmn.eventDefinitionKind=timer;bpmn.isInterrupting=false;fontStyle=2'} | ${false} | ${['bpmn-type-event', 'bpmn-start-event', 'bpmn-event-def-timer']} - ${ShapeBpmnElementKind.GATEWAY_EVENT_BASED} | ${true} | ${['bpmn-type-gateway', 'bpmn-event-based-gateway', 'bpmn-label']} - ${'eventBasedGateway;bpmn.isInstantiating=true;bpmn.gatewayKind=Parallel'} | ${false} | ${['bpmn-type-gateway', 'bpmn-event-based-gateway', 'bpmn-gateway-kind-parallel']} - ${ShapeBpmnElementKind.GATEWAY_EXCLUSIVE} | ${true} | ${['bpmn-type-gateway', 'bpmn-exclusive-gateway', 'bpmn-label']} - ${ShapeBpmnElementKind.TASK} | ${true} | ${['bpmn-type-activity', 'bpmn-type-task', 'bpmn-task', 'bpmn-label']} - ${ShapeBpmnElementKind.TASK_BUSINESS_RULE} | ${false} | ${['bpmn-type-activity', 'bpmn-type-task', 'bpmn-business-rule-task']} - ${ShapeBpmnElementKind.SUB_PROCESS} | ${false} | ${['bpmn-type-activity', 'bpmn-sub-process']} - ${'subProcess;bpmn.subProcessKind=embedded'} | ${false} | ${['bpmn-type-activity', 'bpmn-sub-process', 'bpmn-sub-process-embedded']} - ${'subProcess;bpmn.subProcessKind=event'} | ${true} | ${['bpmn-type-activity', 'bpmn-sub-process', 'bpmn-sub-process-event', 'bpmn-label']} - ${FlowKind.ASSOCIATION_FLOW} | ${true} | ${['bpmn-type-flow', 'bpmn-association', 'bpmn-label']} - ${FlowKind.MESSAGE_FLOW} | ${false} | ${['bpmn-type-flow', 'bpmn-message-flow']} - ${'sequenceFlow;default;fontStyle=4'} | ${false} | ${['bpmn-type-flow', 'bpmn-sequence-flow']} - ${'shape=bpmn.message-flow-icon'} | ${false} | ${['bpmn-message-flow-icon']} - ${'shape=bpmn.message-flow-icon;bpmn.isInitiating=non_initiating'} | ${false} | ${['bpmn-message-flow-icon', 'bpmn-icon-non-initiating']} - ${'shape=bpmn.message-flow-icon;bpmn.isInitiating=initiating'} | ${true} | ${['bpmn-message-flow-icon', 'bpmn-icon-initiating', 'bpmn-label']} + style | isLabel | expectedClassNames + ${{ bpmn: { kind: ShapeBpmnElementKind.LANE } }} | ${true} | ${['bpmn-type-container', 'bpmn-lane', 'bpmn-label']} + ${{ bpmn: { kind: ShapeBpmnElementKind.POOL } }} | ${false} | ${['bpmn-type-container', 'bpmn-pool']} + ${{ bpmn: { kind: ShapeBpmnElementKind.CALL_ACTIVITY } }} | ${false} | ${['bpmn-type-activity', 'bpmn-call-activity']} + ${{ bpmn: { kind: ShapeBpmnElementKind.CALL_ACTIVITY, globalTaskKind: ShapeBpmnElementKind.GLOBAL_TASK } }} | ${false} | ${['bpmn-type-activity', 'bpmn-call-activity', 'bpmn-global-task']} + ${{ bpmn: { kind: ShapeBpmnElementKind.CALL_ACTIVITY, globalTaskKind: ShapeBpmnElementKind.GLOBAL_TASK_MANUAL } }} | ${false} | ${['bpmn-type-activity', 'bpmn-call-activity', 'bpmn-global-task']} + ${ShapeBpmnElementKind.EVENT_BOUNDARY} | ${true} | ${['bpmn-type-event', 'bpmn-boundary-event', 'bpmn-label']} + ${'boundaryEvent;bpmn.eventDefinitionKind=cancel;bpmn.isInterrupting=true'} | ${true} | ${['bpmn-type-event', 'bpmn-boundary-event', 'bpmn-event-def-cancel', 'bpmn-label']} + ${ShapeBpmnElementKind.EVENT_INTERMEDIATE_THROW} | ${false} | ${['bpmn-type-event', 'bpmn-intermediate-throw-event']} + ${'startEvent;bpmn.eventDefinitionKind=timer;bpmn.isInterrupting=false;fontStyle=2'} | ${false} | ${['bpmn-type-event', 'bpmn-start-event', 'bpmn-event-def-timer']} + ${ShapeBpmnElementKind.GATEWAY_EVENT_BASED} | ${true} | ${['bpmn-type-gateway', 'bpmn-event-based-gateway', 'bpmn-label']} + ${'eventBasedGateway;bpmn.isInstantiating=true;bpmn.gatewayKind=Parallel'} | ${false} | ${['bpmn-type-gateway', 'bpmn-event-based-gateway', 'bpmn-gateway-kind-parallel']} + ${ShapeBpmnElementKind.GATEWAY_EXCLUSIVE} | ${true} | ${['bpmn-type-gateway', 'bpmn-exclusive-gateway', 'bpmn-label']} + ${ShapeBpmnElementKind.TASK} | ${true} | ${['bpmn-type-activity', 'bpmn-type-task', 'bpmn-task', 'bpmn-label']} + ${ShapeBpmnElementKind.TASK_BUSINESS_RULE} | ${false} | ${['bpmn-type-activity', 'bpmn-type-task', 'bpmn-business-rule-task']} + ${ShapeBpmnElementKind.SUB_PROCESS} | ${false} | ${['bpmn-type-activity', 'bpmn-sub-process']} + ${'subProcess;bpmn.subProcessKind=embedded'} | ${false} | ${['bpmn-type-activity', 'bpmn-sub-process', 'bpmn-sub-process-embedded']} + ${'subProcess;bpmn.subProcessKind=event'} | ${true} | ${['bpmn-type-activity', 'bpmn-sub-process', 'bpmn-sub-process-event', 'bpmn-label']} + ${FlowKind.ASSOCIATION_FLOW} | ${true} | ${['bpmn-type-flow', 'bpmn-association', 'bpmn-label']} + ${FlowKind.MESSAGE_FLOW} | ${false} | ${['bpmn-type-flow', 'bpmn-message-flow']} + ${'sequenceFlow;default;fontStyle=4'} | ${false} | ${['bpmn-type-flow', 'bpmn-sequence-flow']} + ${'shape=bpmn.message-flow-icon'} | ${false} | ${['bpmn-message-flow-icon']} + ${'shape=bpmn.message-flow-icon;bpmn.isInitiating=non_initiating'} | ${false} | ${['bpmn-message-flow-icon', 'bpmn-icon-non-initiating']} + ${'shape=bpmn.message-flow-icon;bpmn.isInitiating=initiating'} | ${true} | ${['bpmn-message-flow-icon', 'bpmn-icon-initiating', 'bpmn-label']} `('style="$style" / isLabel=$isLabel', ({ style, isLabel, expectedClassNames }: { style: BPMNCellStyle; isLabel: boolean; expectedClassNames: string[] }) => { expect(computeAllBpmnClassNames(style, isLabel)).toEqual(expectedClassNames); }); From 2aed67af8ee31069d6a9bb16d6783545ce4efa88 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Thu, 1 Dec 2022 16:45:05 +0100 Subject: [PATCH 061/132] WIP: styles --- src/component/mxgraph/renderer/StyleComputer.ts | 3 +++ src/component/mxgraph/renderer/style-utils.ts | 1 - 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/component/mxgraph/renderer/StyleComputer.ts b/src/component/mxgraph/renderer/StyleComputer.ts index 0ab333469e..6638c73550 100644 --- a/src/component/mxgraph/renderer/StyleComputer.ts +++ b/src/component/mxgraph/renderer/StyleComputer.ts @@ -46,7 +46,9 @@ export interface BPMNCellStyle extends CellStyle { // TODO the maxGraph@0.1.0 shape property is defined as 'ShapeValue'. It should be 'ShapeValue | string' // Omit { // shape?: ShapeValue | string; + // TODO make bpmn mandatory? bpmn?: { + // TODO make kind mandatory? kind?: ShapeBpmnElementKind | FlowKind; isInstantiating?: boolean; gatewayKind?: ShapeBpmnEventBasedGatewayKind; @@ -95,6 +97,7 @@ export default class StyleComputer { } else if (bpmnElement instanceof ShapeBpmnActivity) { this.computeActivityShapeStyle(bpmnElement, style); } else if (ShapeUtil.isPoolOrLane(bpmnElement.kind)) { + // style.horizontal is for the label // In BPMN, isHorizontal is for the Shape style.horizontal = shape.isHorizontal; } else if (bpmnElement instanceof ShapeBpmnEventBasedGateway) { diff --git a/src/component/mxgraph/renderer/style-utils.ts b/src/component/mxgraph/renderer/style-utils.ts index 7d1b522082..8ef141fca0 100644 --- a/src/component/mxgraph/renderer/style-utils.ts +++ b/src/component/mxgraph/renderer/style-utils.ts @@ -40,7 +40,6 @@ export function computeAllBpmnClassNamesOfCell(cell: Cell, isLabel: boolean): st export function computeAllBpmnClassNames(style: BPMNCellStyle, isLabel: boolean): string[] { const classes: string[] = []; - // shape=bpmn.message-flow-icon --> message-flow-icon const bpmnElementKind = style.bpmn.kind; const typeClasses = new Map(); From 54de0c8c561d68021a3a737d70b2d9010c8b5eea Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Thu, 1 Dec 2022 17:10:56 +0100 Subject: [PATCH 062/132] WIP: styles --- .../mxgraph/renderer/StyleComputer.ts | 37 ++++++++++++------- src/component/mxgraph/renderer/style-utils.ts | 1 + 2 files changed, 25 insertions(+), 13 deletions(-) diff --git a/src/component/mxgraph/renderer/StyleComputer.ts b/src/component/mxgraph/renderer/StyleComputer.ts index 6638c73550..5c448d65c3 100644 --- a/src/component/mxgraph/renderer/StyleComputer.ts +++ b/src/component/mxgraph/renderer/StyleComputer.ts @@ -77,15 +77,23 @@ export interface BPMNCellStyle extends CellStyle { */ export default class StyleComputer { computeStyle(bpmnCell: Shape | Edge, labelBounds: Bounds): BPMNCellStyle { - const style: BPMNCellStyle = { + let style: BPMNCellStyle = { bpmn: { kind: bpmnCell.bpmnElement.kind }, - ...(bpmnCell instanceof Shape ? StyleComputer.computeShapeStyle(bpmnCell) : StyleComputer.computeEdgeStyle(bpmnCell)), }; + const baseStyleNames: string[] = [bpmnCell.bpmnElement.kind as string]; + + if (bpmnCell instanceof Shape) { + // TODO find a better way for the merge + style = { ...style, ...StyleComputer.computeShapeStyle(bpmnCell) }; + } else { + baseStyleNames.push(...StyleComputer.computeEdgeBaseStyleNames(bpmnCell)); + } + const fontStyleValues = StyleComputer.computeFontStyleValues(bpmnCell); const labelStyleValues = StyleComputer.computeLabelStyleValues(bpmnCell, labelBounds); - return { ...style, ...fontStyleValues, ...labelStyleValues }; + return { baseStyleNames: baseStyleNames, ...style, ...fontStyleValues, ...labelStyleValues }; } private static computeShapeStyle(shape: Shape): BPMNCellStyle { @@ -128,21 +136,24 @@ export default class StyleComputer { style.bpmn.markers = bpmnElement.markers; } - private static computeEdgeStyle(edge: Edge): BPMNCellStyle { - const style: BPMNCellStyle = { bpmn: {} }; + // TODO switch from static method to function + // This applies to the current implementation and to all static methods of this class + private static computeEdgeBaseStyleNames(edge: Edge): string[] { + const styles: string[] = []; const bpmnElement = edge.bpmnElement; if (bpmnElement instanceof SequenceFlow) { - style.bpmn.sequenceFlowKind = bpmnElement.sequenceFlowKind; - } else if (bpmnElement instanceof AssociationFlow) { - style.bpmn.associationDirectionKind = bpmnElement.associationDirectionKind; + styles.push(bpmnElement.sequenceFlowKind); + } + if (bpmnElement instanceof AssociationFlow) { + styles.push(bpmnElement.associationDirectionKind); } - return style; + return styles; } - private static computeFontStyleValues(bpmnCell: Shape | Edge): BPMNCellStyle { - const style: BPMNCellStyle = { bpmn: {} }; + private static computeFontStyleValues(bpmnCell: Shape | Edge): CellStyle { + const style: CellStyle = {}; const font = bpmnCell.label?.font; if (font) { @@ -154,8 +165,8 @@ export default class StyleComputer { return style; } - private static computeLabelStyleValues(bpmnCell: Shape | Edge, labelBounds: Bounds): BPMNCellStyle { - const style: BPMNCellStyle = { bpmn: {} }; + private static computeLabelStyleValues(bpmnCell: Shape | Edge, labelBounds: Bounds): CellStyle { + const style: CellStyle = {}; const bpmnElement = bpmnCell.bpmnElement; if (labelBounds) { diff --git a/src/component/mxgraph/renderer/style-utils.ts b/src/component/mxgraph/renderer/style-utils.ts index 8ef141fca0..8dc84318de 100644 --- a/src/component/mxgraph/renderer/style-utils.ts +++ b/src/component/mxgraph/renderer/style-utils.ts @@ -40,6 +40,7 @@ export function computeAllBpmnClassNamesOfCell(cell: Cell, isLabel: boolean): st export function computeAllBpmnClassNames(style: BPMNCellStyle, isLabel: boolean): string[] { const classes: string[] = []; + // TODO style.bpmn.kind could be omit by considering the first element of style.baseStyleNames (this would restore the previous behavior) const bpmnElementKind = style.bpmn.kind; const typeClasses = new Map(); From eb044f2982d147aba7ce9bcee88b99656b609a4f Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Thu, 1 Dec 2022 17:18:07 +0100 Subject: [PATCH 063/132] WIP: styles test --- .../mxgraph/renderer/style-utils.test.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/test/unit/component/mxgraph/renderer/style-utils.test.ts b/test/unit/component/mxgraph/renderer/style-utils.test.ts index e14b180bfa..08321c136c 100644 --- a/test/unit/component/mxgraph/renderer/style-utils.test.ts +++ b/test/unit/component/mxgraph/renderer/style-utils.test.ts @@ -50,20 +50,20 @@ describe('compute all css class names based on style input', () => { ${{ bpmn: { kind: ShapeBpmnElementKind.CALL_ACTIVITY } }} | ${false} | ${['bpmn-type-activity', 'bpmn-call-activity']} ${{ bpmn: { kind: ShapeBpmnElementKind.CALL_ACTIVITY, globalTaskKind: ShapeBpmnElementKind.GLOBAL_TASK } }} | ${false} | ${['bpmn-type-activity', 'bpmn-call-activity', 'bpmn-global-task']} ${{ bpmn: { kind: ShapeBpmnElementKind.CALL_ACTIVITY, globalTaskKind: ShapeBpmnElementKind.GLOBAL_TASK_MANUAL } }} | ${false} | ${['bpmn-type-activity', 'bpmn-call-activity', 'bpmn-global-task']} - ${ShapeBpmnElementKind.EVENT_BOUNDARY} | ${true} | ${['bpmn-type-event', 'bpmn-boundary-event', 'bpmn-label']} + ${{ bpmn: { kind: ShapeBpmnElementKind.EVENT_BOUNDARY } }} | ${true} | ${['bpmn-type-event', 'bpmn-boundary-event', 'bpmn-label']} ${'boundaryEvent;bpmn.eventDefinitionKind=cancel;bpmn.isInterrupting=true'} | ${true} | ${['bpmn-type-event', 'bpmn-boundary-event', 'bpmn-event-def-cancel', 'bpmn-label']} - ${ShapeBpmnElementKind.EVENT_INTERMEDIATE_THROW} | ${false} | ${['bpmn-type-event', 'bpmn-intermediate-throw-event']} + ${{ bpmn: { kind: ShapeBpmnElementKind.EVENT_INTERMEDIATE_THROW } }} | ${false} | ${['bpmn-type-event', 'bpmn-intermediate-throw-event']} ${'startEvent;bpmn.eventDefinitionKind=timer;bpmn.isInterrupting=false;fontStyle=2'} | ${false} | ${['bpmn-type-event', 'bpmn-start-event', 'bpmn-event-def-timer']} - ${ShapeBpmnElementKind.GATEWAY_EVENT_BASED} | ${true} | ${['bpmn-type-gateway', 'bpmn-event-based-gateway', 'bpmn-label']} + ${{ bpmn: { kind: ShapeBpmnElementKind.GATEWAY_EVENT_BASED } }} | ${true} | ${['bpmn-type-gateway', 'bpmn-event-based-gateway', 'bpmn-label']} ${'eventBasedGateway;bpmn.isInstantiating=true;bpmn.gatewayKind=Parallel'} | ${false} | ${['bpmn-type-gateway', 'bpmn-event-based-gateway', 'bpmn-gateway-kind-parallel']} - ${ShapeBpmnElementKind.GATEWAY_EXCLUSIVE} | ${true} | ${['bpmn-type-gateway', 'bpmn-exclusive-gateway', 'bpmn-label']} - ${ShapeBpmnElementKind.TASK} | ${true} | ${['bpmn-type-activity', 'bpmn-type-task', 'bpmn-task', 'bpmn-label']} - ${ShapeBpmnElementKind.TASK_BUSINESS_RULE} | ${false} | ${['bpmn-type-activity', 'bpmn-type-task', 'bpmn-business-rule-task']} - ${ShapeBpmnElementKind.SUB_PROCESS} | ${false} | ${['bpmn-type-activity', 'bpmn-sub-process']} + ${{ bpmn: { kind: ShapeBpmnElementKind.GATEWAY_EXCLUSIVE } }} | ${true} | ${['bpmn-type-gateway', 'bpmn-exclusive-gateway', 'bpmn-label']} + ${{ bpmn: { kind: ShapeBpmnElementKind.TASK } }} | ${true} | ${['bpmn-type-activity', 'bpmn-type-task', 'bpmn-task', 'bpmn-label']} + ${{ bpmn: { kind: ShapeBpmnElementKind.TASK_BUSINESS_RULE } }} | ${false} | ${['bpmn-type-activity', 'bpmn-type-task', 'bpmn-business-rule-task']} + ${{ bpmn: { kind: ShapeBpmnElementKind.SUB_PROCESS } }} | ${false} | ${['bpmn-type-activity', 'bpmn-sub-process']} ${'subProcess;bpmn.subProcessKind=embedded'} | ${false} | ${['bpmn-type-activity', 'bpmn-sub-process', 'bpmn-sub-process-embedded']} ${'subProcess;bpmn.subProcessKind=event'} | ${true} | ${['bpmn-type-activity', 'bpmn-sub-process', 'bpmn-sub-process-event', 'bpmn-label']} - ${FlowKind.ASSOCIATION_FLOW} | ${true} | ${['bpmn-type-flow', 'bpmn-association', 'bpmn-label']} - ${FlowKind.MESSAGE_FLOW} | ${false} | ${['bpmn-type-flow', 'bpmn-message-flow']} + ${{ bpmn: { kind: FlowKind.ASSOCIATION_FLOW } }} | ${true} | ${['bpmn-type-flow', 'bpmn-association', 'bpmn-label']} + ${{ bpmn: { kind: FlowKind.MESSAGE_FLOW } }} | ${false} | ${['bpmn-type-flow', 'bpmn-message-flow']} ${'sequenceFlow;default;fontStyle=4'} | ${false} | ${['bpmn-type-flow', 'bpmn-sequence-flow']} ${'shape=bpmn.message-flow-icon'} | ${false} | ${['bpmn-message-flow-icon']} ${'shape=bpmn.message-flow-icon;bpmn.isInitiating=non_initiating'} | ${false} | ${['bpmn-message-flow-icon', 'bpmn-icon-non-initiating']} From 6cff2a39910edd8d2a82c8de804ca53a9a1c84b8 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Thu, 1 Dec 2022 17:22:13 +0100 Subject: [PATCH 064/132] WIP: styles fix execution errors --- src/component/mxgraph/config/ShapeConfigurator.ts | 2 +- src/component/mxgraph/config/StyleConfigurator.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/component/mxgraph/config/ShapeConfigurator.ts b/src/component/mxgraph/config/ShapeConfigurator.ts index 5c0ca423cb..b644ba164f 100644 --- a/src/component/mxgraph/config/ShapeConfigurator.ts +++ b/src/component/mxgraph/config/ShapeConfigurator.ts @@ -171,7 +171,7 @@ export default class ShapeConfigurator { // dialect = strictHtml is set means that current node holds an html label // TODO maxGraph "TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided."constants.DIALECT.STRICTHTML let allBpmnClassNames = computeAllBpmnClassNamesOfCell(cell, this.dialect === 'strictHtml'); - const extraCssClasses = (this.state.style as BPMNCellStyle).bpmn.extra.css.classes; + const extraCssClasses = (this.state.style as BPMNCellStyle).bpmn?.extra?.css?.classes; if (extraCssClasses) { allBpmnClassNames = allBpmnClassNames.concat(extraCssClasses); } diff --git a/src/component/mxgraph/config/StyleConfigurator.ts b/src/component/mxgraph/config/StyleConfigurator.ts index 07d8645d4b..f194bd78c3 100644 --- a/src/component/mxgraph/config/StyleConfigurator.ts +++ b/src/component/mxgraph/config/StyleConfigurator.ts @@ -282,7 +282,7 @@ export class StyleConfigurator { private configureEdgeStyles(styleKinds: T[], specificStyles: Map void>): void { styleKinds.forEach(kind => { - const style: BPMNCellStyle = { bpmn: {} }; + const style: BPMNCellStyle = { bpmn: { edge: {} } }; specificStyles.get(kind)(style); this.graph.getStylesheet().putCellStyle(kind.toString(), style); }); From e8bd60987bf3da43ec9aa80ae7083f29f20db68d Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Thu, 1 Dec 2022 17:43:32 +0100 Subject: [PATCH 065/132] WIP: fix styles to display icon and labels --- .../mxgraph/renderer/StyleComputer.ts | 19 +++++++++++++------ src/component/mxgraph/renderer/style-utils.ts | 6 ++++++ 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/src/component/mxgraph/renderer/StyleComputer.ts b/src/component/mxgraph/renderer/StyleComputer.ts index 5c448d65c3..fe1fa3c531 100644 --- a/src/component/mxgraph/renderer/StyleComputer.ts +++ b/src/component/mxgraph/renderer/StyleComputer.ts @@ -77,7 +77,9 @@ export interface BPMNCellStyle extends CellStyle { */ export default class StyleComputer { computeStyle(bpmnCell: Shape | Edge, labelBounds: Bounds): BPMNCellStyle { - let style: BPMNCellStyle = { + // eslint-disable-next-line no-console + console.info('computeStyle - bpmnCell', bpmnCell); + const style: BPMNCellStyle = { bpmn: { kind: bpmnCell.bpmnElement.kind }, }; @@ -85,7 +87,8 @@ export default class StyleComputer { if (bpmnCell instanceof Shape) { // TODO find a better way for the merge - style = { ...style, ...StyleComputer.computeShapeStyle(bpmnCell) }; + StyleComputer.enrichStyleWithShapeInfo(style, bpmnCell); + // style = { ...style, ...StyleComputer.computeShapeStyle(bpmnCell) }; } else { baseStyleNames.push(...StyleComputer.computeEdgeBaseStyleNames(bpmnCell)); } @@ -93,11 +96,15 @@ export default class StyleComputer { const fontStyleValues = StyleComputer.computeFontStyleValues(bpmnCell); const labelStyleValues = StyleComputer.computeLabelStyleValues(bpmnCell, labelBounds); - return { baseStyleNames: baseStyleNames, ...style, ...fontStyleValues, ...labelStyleValues }; + const returnedStyle = { baseStyleNames: baseStyleNames, ...style, ...fontStyleValues, ...labelStyleValues }; + // eslint-disable-next-line no-console + console.info('computeStyle - return', returnedStyle); + return returnedStyle; } - private static computeShapeStyle(shape: Shape): BPMNCellStyle { - const style: BPMNCellStyle = { bpmn: {} }; + private static enrichStyleWithShapeInfo(style: BPMNCellStyle, shape: Shape): void { + // private static computeShapeStyle(shape: Shape): BPMNCellStyle { + // const style: BPMNCellStyle = { bpmn: {} }; const bpmnElement = shape.bpmnElement; if (bpmnElement instanceof ShapeBpmnEvent) { @@ -113,7 +120,7 @@ export default class StyleComputer { style.bpmn.gatewayKind = bpmnElement.gatewayKind; } - return style; + // return style; } private static computeEventShapeStyle(bpmnElement: ShapeBpmnEvent, style: BPMNCellStyle): void { diff --git a/src/component/mxgraph/renderer/style-utils.ts b/src/component/mxgraph/renderer/style-utils.ts index 8dc84318de..3db4044b49 100644 --- a/src/component/mxgraph/renderer/style-utils.ts +++ b/src/component/mxgraph/renderer/style-utils.ts @@ -42,6 +42,10 @@ export function computeAllBpmnClassNames(style: BPMNCellStyle, isLabel: boolean) // TODO style.bpmn.kind could be omit by considering the first element of style.baseStyleNames (this would restore the previous behavior) const bpmnElementKind = style.bpmn.kind; + // eslint-disable-next-line no-console + console.info('computeAllBpmnClassNames - style', style); + // eslint-disable-next-line no-console + console.info('computeAllBpmnClassNames - bpmnElementKind', bpmnElementKind); const typeClasses = new Map(); typeClasses.set('bpmn-type-activity', ShapeUtil.isActivity(bpmnElementKind)); @@ -73,6 +77,8 @@ export function computeAllBpmnClassNames(style: BPMNCellStyle, isLabel: boolean) if (isLabel) { classes.push('bpmn-label'); } + // eslint-disable-next-line no-console + console.info('computeAllBpmnClassNames - return', classes); return classes; } From 7e947f80fc8346f61cf59c0cbf7cf68857cbd0a7 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Thu, 1 Dec 2022 18:04:58 +0100 Subject: [PATCH 066/132] WIP: add console info to debug 'strokeColor' set to 'none' --- src/component/mxgraph/config/ShapeConfigurator.ts | 3 +++ src/component/mxgraph/config/StyleConfigurator.ts | 7 +++++++ 2 files changed, 10 insertions(+) diff --git a/src/component/mxgraph/config/ShapeConfigurator.ts b/src/component/mxgraph/config/ShapeConfigurator.ts index b644ba164f..41f9b6bbd9 100644 --- a/src/component/mxgraph/config/ShapeConfigurator.ts +++ b/src/component/mxgraph/config/ShapeConfigurator.ts @@ -99,6 +99,9 @@ export default class ShapeConfigurator { // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- TODO fix CellRenderer.registerShape call // @ts-ignore CellRenderer.registerShape(BpmnShapeIdentifier.MESSAGE_FLOW_ICON, MessageFlowIconShape); + + // eslint-disable-next-line no-console + console.info('ShapeConfigurator.registerShapes: CellRenderer.defaultShapes', CellRenderer.defaultShapes); } private initMxSvgCanvasPrototype(): void { diff --git a/src/component/mxgraph/config/StyleConfigurator.ts b/src/component/mxgraph/config/StyleConfigurator.ts index f194bd78c3..eaf7205034 100644 --- a/src/component/mxgraph/config/StyleConfigurator.ts +++ b/src/component/mxgraph/config/StyleConfigurator.ts @@ -31,6 +31,8 @@ import type { BPMNCellStyle } from '../renderer/StyleComputer'; * @experimental */ export class StyleConfigurator { + // TODO in StyleConfigurator, we don't need to use BPMNCellStyle, CellStyle is enough + private specificFlowStyles = new MapWithDefault([ [ FlowKind.SEQUENCE_FLOW, @@ -133,6 +135,9 @@ export class StyleConfigurator { private configureDefaultVertexStyle(): void { StyleConfigurator.configureCommonDefaultStyle(this.getStylesheet().getDefaultVertexStyle() as BPMNCellStyle); + + // eslint-disable-next-line no-console + console.info('StyleConfigurator: configureDefaultVertexStyle', this.getStylesheet().getDefaultVertexStyle()); } private configurePoolStyle(): void { @@ -266,6 +271,8 @@ export class StyleConfigurator { style.endArrow = undefined; StyleConfigurator.configureCommonDefaultStyle(style); + // eslint-disable-next-line no-console + console.info('StyleConfigurator: configureDefaultEdgeStyle', style); } private static configureCommonDefaultStyle(style: BPMNCellStyle): void { From 19250c8df489b85aad24a11275dd035e031e6b96 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Thu, 1 Dec 2022 18:14:37 +0100 Subject: [PATCH 067/132] fix tests in style-utils.ts computeAllBpmnClassNames --- src/component/mxgraph/renderer/style-utils.ts | 2 +- .../mxgraph/renderer/style-utils.test.ts | 60 ++++++++++--------- 2 files changed, 33 insertions(+), 29 deletions(-) diff --git a/src/component/mxgraph/renderer/style-utils.ts b/src/component/mxgraph/renderer/style-utils.ts index 3db4044b49..1dac837bed 100644 --- a/src/component/mxgraph/renderer/style-utils.ts +++ b/src/component/mxgraph/renderer/style-utils.ts @@ -69,7 +69,7 @@ export function computeAllBpmnClassNames(style: BPMNCellStyle, isLabel: boolean) classes.push(style.bpmn.isNonInitiating ? 'bpmn-icon-non-initiating' : 'bpmn-icon-initiating'); } if (style.bpmn.subProcessKind) { - classes.push(`bpmn-sub-process-${style.bpmn.gatewayKind.toLowerCase()}`); + classes.push(`bpmn-sub-process-${style.bpmn.subProcessKind.toLowerCase()}`); } if (style.bpmn.globalTaskKind) { classes.push(computeBpmnBaseClassName(style.bpmn.globalTaskKind)); diff --git a/test/unit/component/mxgraph/renderer/style-utils.test.ts b/test/unit/component/mxgraph/renderer/style-utils.test.ts index 08321c136c..89c471597d 100644 --- a/test/unit/component/mxgraph/renderer/style-utils.test.ts +++ b/test/unit/component/mxgraph/renderer/style-utils.test.ts @@ -14,7 +14,7 @@ * limitations under the License. */ import type { BPMNCellStyle } from '../../../../../src/component/mxgraph/renderer/StyleComputer'; -import { FlowKind, ShapeBpmnElementKind } from '../../../../../src/model/bpmn/internal'; +import { FlowKind, ShapeBpmnElementKind, ShapeBpmnEventBasedGatewayKind, ShapeBpmnEventDefinitionKind, ShapeBpmnSubProcessKind } from '../../../../../src/model/bpmn/internal'; import { computeBpmnBaseClassName, computeAllBpmnClassNames } from '../../../../../src/component/mxgraph/renderer/style-utils'; describe('compute base css class names of BPMN elements', () => { @@ -44,31 +44,35 @@ describe('compute base css class names of BPMN elements', () => { describe('compute all css class names based on style input', () => { it.each` - style | isLabel | expectedClassNames - ${{ bpmn: { kind: ShapeBpmnElementKind.LANE } }} | ${true} | ${['bpmn-type-container', 'bpmn-lane', 'bpmn-label']} - ${{ bpmn: { kind: ShapeBpmnElementKind.POOL } }} | ${false} | ${['bpmn-type-container', 'bpmn-pool']} - ${{ bpmn: { kind: ShapeBpmnElementKind.CALL_ACTIVITY } }} | ${false} | ${['bpmn-type-activity', 'bpmn-call-activity']} - ${{ bpmn: { kind: ShapeBpmnElementKind.CALL_ACTIVITY, globalTaskKind: ShapeBpmnElementKind.GLOBAL_TASK } }} | ${false} | ${['bpmn-type-activity', 'bpmn-call-activity', 'bpmn-global-task']} - ${{ bpmn: { kind: ShapeBpmnElementKind.CALL_ACTIVITY, globalTaskKind: ShapeBpmnElementKind.GLOBAL_TASK_MANUAL } }} | ${false} | ${['bpmn-type-activity', 'bpmn-call-activity', 'bpmn-global-task']} - ${{ bpmn: { kind: ShapeBpmnElementKind.EVENT_BOUNDARY } }} | ${true} | ${['bpmn-type-event', 'bpmn-boundary-event', 'bpmn-label']} - ${'boundaryEvent;bpmn.eventDefinitionKind=cancel;bpmn.isInterrupting=true'} | ${true} | ${['bpmn-type-event', 'bpmn-boundary-event', 'bpmn-event-def-cancel', 'bpmn-label']} - ${{ bpmn: { kind: ShapeBpmnElementKind.EVENT_INTERMEDIATE_THROW } }} | ${false} | ${['bpmn-type-event', 'bpmn-intermediate-throw-event']} - ${'startEvent;bpmn.eventDefinitionKind=timer;bpmn.isInterrupting=false;fontStyle=2'} | ${false} | ${['bpmn-type-event', 'bpmn-start-event', 'bpmn-event-def-timer']} - ${{ bpmn: { kind: ShapeBpmnElementKind.GATEWAY_EVENT_BASED } }} | ${true} | ${['bpmn-type-gateway', 'bpmn-event-based-gateway', 'bpmn-label']} - ${'eventBasedGateway;bpmn.isInstantiating=true;bpmn.gatewayKind=Parallel'} | ${false} | ${['bpmn-type-gateway', 'bpmn-event-based-gateway', 'bpmn-gateway-kind-parallel']} - ${{ bpmn: { kind: ShapeBpmnElementKind.GATEWAY_EXCLUSIVE } }} | ${true} | ${['bpmn-type-gateway', 'bpmn-exclusive-gateway', 'bpmn-label']} - ${{ bpmn: { kind: ShapeBpmnElementKind.TASK } }} | ${true} | ${['bpmn-type-activity', 'bpmn-type-task', 'bpmn-task', 'bpmn-label']} - ${{ bpmn: { kind: ShapeBpmnElementKind.TASK_BUSINESS_RULE } }} | ${false} | ${['bpmn-type-activity', 'bpmn-type-task', 'bpmn-business-rule-task']} - ${{ bpmn: { kind: ShapeBpmnElementKind.SUB_PROCESS } }} | ${false} | ${['bpmn-type-activity', 'bpmn-sub-process']} - ${'subProcess;bpmn.subProcessKind=embedded'} | ${false} | ${['bpmn-type-activity', 'bpmn-sub-process', 'bpmn-sub-process-embedded']} - ${'subProcess;bpmn.subProcessKind=event'} | ${true} | ${['bpmn-type-activity', 'bpmn-sub-process', 'bpmn-sub-process-event', 'bpmn-label']} - ${{ bpmn: { kind: FlowKind.ASSOCIATION_FLOW } }} | ${true} | ${['bpmn-type-flow', 'bpmn-association', 'bpmn-label']} - ${{ bpmn: { kind: FlowKind.MESSAGE_FLOW } }} | ${false} | ${['bpmn-type-flow', 'bpmn-message-flow']} - ${'sequenceFlow;default;fontStyle=4'} | ${false} | ${['bpmn-type-flow', 'bpmn-sequence-flow']} - ${'shape=bpmn.message-flow-icon'} | ${false} | ${['bpmn-message-flow-icon']} - ${'shape=bpmn.message-flow-icon;bpmn.isInitiating=non_initiating'} | ${false} | ${['bpmn-message-flow-icon', 'bpmn-icon-non-initiating']} - ${'shape=bpmn.message-flow-icon;bpmn.isInitiating=initiating'} | ${true} | ${['bpmn-message-flow-icon', 'bpmn-icon-initiating', 'bpmn-label']} - `('style="$style" / isLabel=$isLabel', ({ style, isLabel, expectedClassNames }: { style: BPMNCellStyle; isLabel: boolean; expectedClassNames: string[] }) => { - expect(computeAllBpmnClassNames(style, isLabel)).toEqual(expectedClassNames); - }); + style | isLabel | expectedClassNames + ${{ bpmn: { kind: ShapeBpmnElementKind.LANE } }} | ${true} | ${['bpmn-type-container', 'bpmn-lane', 'bpmn-label']} + ${{ bpmn: { kind: ShapeBpmnElementKind.POOL } }} | ${false} | ${['bpmn-type-container', 'bpmn-pool']} + ${{ bpmn: { kind: ShapeBpmnElementKind.CALL_ACTIVITY } }} | ${false} | ${['bpmn-type-activity', 'bpmn-call-activity']} + ${{ bpmn: { kind: ShapeBpmnElementKind.CALL_ACTIVITY, globalTaskKind: ShapeBpmnElementKind.GLOBAL_TASK } }} | ${false} | ${['bpmn-type-activity', 'bpmn-call-activity', 'bpmn-global-task']} + ${{ bpmn: { kind: ShapeBpmnElementKind.CALL_ACTIVITY, globalTaskKind: ShapeBpmnElementKind.GLOBAL_TASK_MANUAL } }} | ${true} | ${['bpmn-type-activity', 'bpmn-call-activity', 'bpmn-global-manual-task', 'bpmn-label']} + ${{ bpmn: { kind: ShapeBpmnElementKind.EVENT_BOUNDARY } }} | ${true} | ${['bpmn-type-event', 'bpmn-boundary-event', 'bpmn-label']} + ${'boundaryEvent;bpmn.eventDefinitionKind=cancel;bpmn.isInterrupting=true'} | ${true} | ${['bpmn-type-event', 'bpmn-boundary-event', 'bpmn-event-def-cancel', 'bpmn-label']} + ${{ bpmn: { kind: ShapeBpmnElementKind.EVENT_INTERMEDIATE_THROW } }} | ${false} | ${['bpmn-type-event', 'bpmn-intermediate-throw-event']} + ${{ bpmn: { kind: ShapeBpmnElementKind.EVENT_START, eventDefinitionKind: ShapeBpmnEventDefinitionKind.TIMER, isInterrupting: false }, fontStyle: 2 }} | ${false} | ${['bpmn-type-event', 'bpmn-start-event', 'bpmn-event-def-timer']} + ${{ bpmn: { kind: ShapeBpmnElementKind.GATEWAY_EVENT_BASED } }} | ${true} | ${['bpmn-type-gateway', 'bpmn-event-based-gateway', 'bpmn-label']} + ${{ bpmn: { kind: ShapeBpmnElementKind.GATEWAY_EVENT_BASED, isInstantiating: true, gatewayKind: ShapeBpmnEventBasedGatewayKind.Parallel } }} | ${false} | ${['bpmn-type-gateway', 'bpmn-event-based-gateway', 'bpmn-gateway-kind-parallel']} + ${{ bpmn: { kind: ShapeBpmnElementKind.GATEWAY_EXCLUSIVE } }} | ${true} | ${['bpmn-type-gateway', 'bpmn-exclusive-gateway', 'bpmn-label']} + ${{ bpmn: { kind: ShapeBpmnElementKind.TASK } }} | ${true} | ${['bpmn-type-activity', 'bpmn-type-task', 'bpmn-task', 'bpmn-label']} + ${{ bpmn: { kind: ShapeBpmnElementKind.TASK_BUSINESS_RULE } }} | ${false} | ${['bpmn-type-activity', 'bpmn-type-task', 'bpmn-business-rule-task']} + ${{ bpmn: { kind: ShapeBpmnElementKind.SUB_PROCESS } }} | ${false} | ${['bpmn-type-activity', 'bpmn-sub-process']} + ${{ bpmn: { kind: ShapeBpmnElementKind.SUB_PROCESS, subProcessKind: ShapeBpmnSubProcessKind.EMBEDDED } }} | ${false} | ${['bpmn-type-activity', 'bpmn-sub-process', 'bpmn-sub-process-embedded']} + ${{ bpmn: { kind: ShapeBpmnElementKind.SUB_PROCESS, subProcessKind: ShapeBpmnSubProcessKind.EVENT } }} | ${true} | ${['bpmn-type-activity', 'bpmn-sub-process', 'bpmn-sub-process-event', 'bpmn-label']} + ${{ bpmn: { kind: FlowKind.ASSOCIATION_FLOW } }} | ${true} | ${['bpmn-type-flow', 'bpmn-association', 'bpmn-label']} + ${{ bpmn: { kind: FlowKind.MESSAGE_FLOW } }} | ${false} | ${['bpmn-type-flow', 'bpmn-message-flow']} + ${'sequenceFlow;default;fontStyle=4'} | ${false} | ${['bpmn-type-flow', 'bpmn-sequence-flow']} + ${'shape=bpmn.message-flow-icon'} | ${false} | ${['bpmn-message-flow-icon']} + ${'shape=bpmn.message-flow-icon;bpmn.isInitiating=non_initiating'} | ${false} | ${['bpmn-message-flow-icon', 'bpmn-icon-non-initiating']} + ${'shape=bpmn.message-flow-icon;bpmn.isInitiating=initiating'} | ${true} | ${['bpmn-message-flow-icon', 'bpmn-icon-initiating', 'bpmn-label']} + `( + // TODO find a way to correctly display the style object + 'style="$style" / isLabel=$isLabel', + ({ style, isLabel, expectedClassNames }: { style: BPMNCellStyle; isLabel: boolean; expectedClassNames: string[] }) => { + expect(computeAllBpmnClassNames(style, isLabel)).toEqual(expectedClassNames); + }, + ); }); From e004ae7482bcac257e9b5ca79fdcd05d57bb0b78 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Thu, 1 Dec 2022 18:19:02 +0100 Subject: [PATCH 068/132] Add TODO about BPMNCellStyle --- src/component/mxgraph/renderer/StyleComputer.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/component/mxgraph/renderer/StyleComputer.ts b/src/component/mxgraph/renderer/StyleComputer.ts index fe1fa3c531..e7876d72de 100644 --- a/src/component/mxgraph/renderer/StyleComputer.ts +++ b/src/component/mxgraph/renderer/StyleComputer.ts @@ -42,6 +42,7 @@ import { MessageVisibleKind, ShapeBpmnCallActivityKind, ShapeBpmnElementKind, Sh import { AssociationFlow, SequenceFlow } from '../../../model/bpmn/internal/edge/flows'; import type { Font } from '../../../model/bpmn/internal/Label'; +// TODO this type should probably be part of the API export interface BPMNCellStyle extends CellStyle { // TODO the maxGraph@0.1.0 shape property is defined as 'ShapeValue'. It should be 'ShapeValue | string' // Omit { From b98134cf4ec879f4977767e56593057df996a87e Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Fri, 2 Dec 2022 10:43:03 +0100 Subject: [PATCH 069/132] Fix the demo build (remove ref to mxgraph in the vite config) --- vite.config.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/vite.config.js b/vite.config.js index 53fa67f935..fb128a58c0 100644 --- a/vite.config.js +++ b/vite.config.js @@ -42,13 +42,14 @@ export default defineConfig(({ mode }) => { entryFileNames: `dev/public/assets/[name].js`, chunkFileNames: `dev/public/assets/[name].js`, assetFileNames: `dev/public/assets/[name].[ext]`, + // TODO test the splitVendorChunkPlugin (see https://vitejs.dev/guide/build.html#chunking-strategy) manualChunks: { - // put mxgraph code in a dedicated file. As it is eol, it doesn't change from release to release, so it reduces the changes when uploading the demo to the examples repository - mxgraph: ['mxgraph'], + // put maxGraph code in a dedicated file. As it is eol, it doesn't change from release to release, so it reduces the changes when uploading the demo to the examples repository + maxGraph: ['@maxgraph/core'], }, }, }, - chunkSizeWarningLimit: 820, // mxgraph + chunkSizeWarningLimit: 555, // maxGraph }, preview: { port: 10002, From db888580f7b3e8d5d9d2861def3eb6ac94d12383 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Fri, 2 Dec 2022 12:11:46 +0100 Subject: [PATCH 070/132] wip fix StyleComputer.test.ts --- .../mxgraph/renderer/StyleComputer.test.ts | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts index 9c6291cbe9..0f86c35665 100644 --- a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts +++ b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts @@ -129,13 +129,14 @@ describe('Style Computer', () => { describe('compute style - shape label', () => { it('compute style of shape with no label', () => { const shape = new Shape('id', newShapeBpmnElement(ShapeBpmnElementKind.TASK_USER)); - expect(computeStyle(shape)).toBe('userTask'); + expect(computeStyle(shape)).toStrictEqual({ baseStyleNames: ['userTask'], bpmn: { kind: ShapeBpmnElementKind.TASK_USER } }); }); it('compute style of shape with a no font label', () => { const shape = new Shape('id', newShapeBpmnElement(ShapeBpmnElementKind.EVENT_END), undefined, new Label(undefined, undefined)); - expect(computeStyle(shape)).toBe('endEvent'); + expect(computeStyle(shape)).toStrictEqual({ baseStyleNames: ['endEvent'], bpmn: { kind: ShapeBpmnElementKind.EVENT_END } }); }); + it('compute style of shape with label including bold font', () => { const shape = new Shape( 'id', @@ -143,7 +144,13 @@ describe('Style Computer', () => { undefined, new Label(toFont({ name: 'Courier', size: 9, isBold: true }), undefined), ); - expect(computeStyle(shape)).toBe('exclusiveGateway;fontFamily=Courier;fontSize=9;fontStyle=1'); + expect(computeStyle(shape)).toStrictEqual({ + baseStyleNames: ['exclusiveGateway'], + fontFamily: 'Courier', + fontSize: 9, + fontStyle: 1, + bpmn: { kind: ShapeBpmnElementKind.GATEWAY_EXCLUSIVE }, + }); }); it('compute style of shape with label including italic font', () => { From 5fd3ccddbb5b7abb4cd25a81ee545ad3b68074f5 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Fri, 2 Dec 2022 12:41:49 +0100 Subject: [PATCH 071/132] wip fix StyleComputer.test.ts --- .../mxgraph/renderer/StyleComputer.ts | 9 +++-- .../mxgraph/renderer/StyleComputer.test.ts | 36 +++++++++++++++++-- 2 files changed, 39 insertions(+), 6 deletions(-) diff --git a/src/component/mxgraph/renderer/StyleComputer.ts b/src/component/mxgraph/renderer/StyleComputer.ts index e7876d72de..8cb7fed172 100644 --- a/src/component/mxgraph/renderer/StyleComputer.ts +++ b/src/component/mxgraph/renderer/StyleComputer.ts @@ -42,7 +42,8 @@ import { MessageVisibleKind, ShapeBpmnCallActivityKind, ShapeBpmnElementKind, Sh import { AssociationFlow, SequenceFlow } from '../../../model/bpmn/internal/edge/flows'; import type { Font } from '../../../model/bpmn/internal/Label'; -// TODO this type should probably be part of the API +// TODO this type should probably be part of the API (so it should be exported) +// TODO decide where th export interface BPMNCellStyle extends CellStyle { // TODO the maxGraph@0.1.0 shape property is defined as 'ShapeValue'. It should be 'ShapeValue | string' // Omit { @@ -165,8 +166,8 @@ export default class StyleComputer { const font = bpmnCell.label?.font; if (font) { - style.fontFamily = font.name; - style.fontSize = font.size; + font.name && (style.fontFamily = font.name); + font.size && (style.fontSize = font.size); style.fontStyle = StyleComputer.getFontStyleValue(font); } @@ -187,8 +188,10 @@ export default class StyleComputer { // arbitrarily increase width to relax too small bounds (for instance for reference diagrams from miwg-test-suite) style.labelWidth = labelBounds.width + 1; // align settings + // FIXME this is a breaking change comparing to mxGraph, the position are inverted style.labelPosition = 'left'; style.verticalLabelPosition = 'top'; + // end of fixme } } // when no label bounds, adjust the default style dynamically diff --git a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts index 0f86c35665..7507109c8f 100644 --- a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts +++ b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts @@ -155,17 +155,47 @@ describe('Style Computer', () => { it('compute style of shape with label including italic font', () => { const shape = new Shape('id', newShapeBpmnElement(ShapeBpmnElementKind.EVENT_INTERMEDIATE_CATCH), undefined, new Label(toFont({ name: 'Arial', isItalic: true }), undefined)); - expect(computeStyle(shape)).toBe('intermediateCatchEvent;fontFamily=Arial;fontStyle=2'); + expect(computeStyle(shape)).toStrictEqual({ + baseStyleNames: ['intermediateCatchEvent'], + fontFamily: 'Arial', + fontStyle: 2, + bpmn: { kind: ShapeBpmnElementKind.EVENT_INTERMEDIATE_CATCH }, + }); }); it('compute style of shape with label including bold/italic font', () => { const shape = new Shape('id', newShapeBpmnElement(ShapeBpmnElementKind.EVENT_INTERMEDIATE_THROW), undefined, new Label(toFont({ isBold: true, isItalic: true }), undefined)); - expect(computeStyle(shape)).toBe('intermediateThrowEvent;fontStyle=3'); + expect(computeStyle(shape)).toStrictEqual({ + baseStyleNames: ['intermediateThrowEvent'], + fontStyle: 3, + bpmn: { kind: ShapeBpmnElementKind.EVENT_INTERMEDIATE_THROW }, + }); + }); + + it('compute style of shape with label including font family only', () => { + const shape = new Shape('id', newShapeBpmnElement(ShapeBpmnElementKind.TASK_SCRIPT), undefined, new Label(toFont({ name: 'Roboto' }), undefined)); + expect(computeStyle(shape)).toStrictEqual({ + baseStyleNames: ['scriptTask'], + fontFamily: 'Roboto', + fontStyle: 0, // TODO decide if we set the fontStyle property to 0 or if we omit it + bpmn: { kind: ShapeBpmnElementKind.TASK_SCRIPT }, + }); }); it('compute style of shape with label bounds', () => { const shape = new Shape('id', newShapeBpmnElement(ShapeBpmnElementKind.CALL_ACTIVITY), undefined, new Label(undefined, new Bounds(40, 200, 80, 140))); - expect(computeStyle(shape)).toBe('callActivity;verticalAlign=top;align=center;labelWidth=81;labelPosition=top;verticalLabelPosition=left'); + expect(computeStyle(shape)).toStrictEqual({ + baseStyleNames: ['callActivity'], + align: 'center', + verticalAlign: 'top', + labelWidth: 81, + // FIXME this is a breaking change comparing to mxGraph, the position are inverted + // expect(computeStyle(shape)).toBe('callActivity;verticalAlign=top;align=center;labelWidth=81;labelPosition=top;verticalLabelPosition=left'); + labelPosition: 'left', + verticalLabelPosition: 'top', + // end of fixme + bpmn: { kind: ShapeBpmnElementKind.CALL_ACTIVITY }, + }); }); }); From 21219670d60587988c451dbe64502f9faec2c4f5 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Fri, 2 Dec 2022 14:11:43 +0100 Subject: [PATCH 072/132] update FIXME --- src/component/mxgraph/renderer/StyleComputer.ts | 2 +- test/unit/component/mxgraph/renderer/StyleComputer.test.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/component/mxgraph/renderer/StyleComputer.ts b/src/component/mxgraph/renderer/StyleComputer.ts index 8cb7fed172..fa53a730f2 100644 --- a/src/component/mxgraph/renderer/StyleComputer.ts +++ b/src/component/mxgraph/renderer/StyleComputer.ts @@ -188,7 +188,7 @@ export default class StyleComputer { // arbitrarily increase width to relax too small bounds (for instance for reference diagrams from miwg-test-suite) style.labelWidth = labelBounds.width + 1; // align settings - // FIXME this is a breaking change comparing to mxGraph, the position are inverted + // FIXME values were inverted in the mxGraph implementation, this was probably wrong as they were set like this in StyleConfigurator style.labelPosition = 'left'; style.verticalLabelPosition = 'top'; // end of fixme diff --git a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts index 7507109c8f..cec1f5e628 100644 --- a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts +++ b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts @@ -189,7 +189,7 @@ describe('Style Computer', () => { align: 'center', verticalAlign: 'top', labelWidth: 81, - // FIXME this is a breaking change comparing to mxGraph, the position are inverted + // FIXME values were inverted in the mxGraph implementation, this was probably wrong as they were set like this in StyleConfigurator // expect(computeStyle(shape)).toBe('callActivity;verticalAlign=top;align=center;labelWidth=81;labelPosition=top;verticalLabelPosition=left'); labelPosition: 'left', verticalLabelPosition: 'top', From b7becce5403699f25dd9befaea51026b5c236ed3 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Fri, 2 Dec 2022 14:20:26 +0100 Subject: [PATCH 073/132] wip fix StyleComputer.test.ts --- .../component/mxgraph/renderer/StyleComputer.test.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts index cec1f5e628..d4e28007e1 100644 --- a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts +++ b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts @@ -32,6 +32,7 @@ import ShapeBpmnElement, { import type { BpmnEventKind, GlobalTaskKind } from '../../../../../src/bpmn-visualization'; import { AssociationDirectionKind, + FlowKind, MessageVisibleKind, SequenceFlowKind, ShapeBpmnCallActivityKind, @@ -202,12 +203,18 @@ describe('Style Computer', () => { describe('compute style - edge label', () => { it('compute style of edge with no label', () => { const edge = new Edge('id', newSequenceFlow(SequenceFlowKind.CONDITIONAL_FROM_GATEWAY)); - expect(computeStyle(edge)).toBe('sequenceFlow;conditional_from_gateway'); + expect(computeStyle(edge)).toStrictEqual({ + baseStyleNames: ['sequenceFlow', 'conditional_from_gateway'], + bpmn: { kind: FlowKind.SEQUENCE_FLOW }, + }); }); it('compute style of edge with a no font label', () => { const edge = new Edge('id', newSequenceFlow(SequenceFlowKind.NORMAL), undefined, new Label(undefined, undefined)); - expect(computeStyle(edge)).toBe('sequenceFlow;normal'); + expect(computeStyle(edge)).toStrictEqual({ + baseStyleNames: ['sequenceFlow', 'normal'], + bpmn: { kind: FlowKind.SEQUENCE_FLOW }, + }); }); it('compute style of edge with label including strike-through font', () => { From 4e5501d521d0ddbaef3f10c2f5f2fdad8d721cf8 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Fri, 2 Dec 2022 14:45:53 +0100 Subject: [PATCH 074/132] wip fix StyleComputer.test.ts --- .../mxgraph/renderer/StyleComputer.test.ts | 28 ++++++++++++++++--- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts index d4e28007e1..a27920d506 100644 --- a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts +++ b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts @@ -219,12 +219,21 @@ describe('Style Computer', () => { it('compute style of edge with label including strike-through font', () => { const edge = new Edge('id', newSequenceFlow(SequenceFlowKind.CONDITIONAL_FROM_ACTIVITY), undefined, new Label(toFont({ size: 14.2, isStrikeThrough: true }), undefined)); - expect(computeStyle(edge)).toBe('sequenceFlow;conditional_from_activity;fontSize=14.2;fontStyle=8'); + expect(computeStyle(edge)).toStrictEqual({ + baseStyleNames: ['sequenceFlow', 'conditional_from_activity'], + fontSize: 14.2, + fontStyle: 8, + bpmn: { kind: FlowKind.SEQUENCE_FLOW }, + }); }); it('compute style of edge with label including underline font', () => { const edge = new Edge('id', newSequenceFlow(SequenceFlowKind.DEFAULT), undefined, new Label(toFont({ isUnderline: true }), undefined)); - expect(computeStyle(edge)).toBe('sequenceFlow;default;fontStyle=4'); + expect(computeStyle(edge)).toStrictEqual({ + baseStyleNames: ['sequenceFlow', 'default'], + fontStyle: 4, + bpmn: { kind: FlowKind.SEQUENCE_FLOW }, + }); }); it('compute style of edge with label including bold/italic/strike-through/underline font', () => { @@ -234,12 +243,23 @@ describe('Style Computer', () => { undefined, new Label(toFont({ isBold: true, isItalic: true, isStrikeThrough: true, isUnderline: true }), undefined), ); - expect(computeStyle(edge)).toBe('sequenceFlow;normal;fontStyle=15'); + expect(computeStyle(edge)).toStrictEqual({ + baseStyleNames: ['sequenceFlow', 'normal'], + fontStyle: 15, + bpmn: { kind: FlowKind.SEQUENCE_FLOW }, + }); }); it('compute style of edge with label bounds', () => { const edge = new Edge('id', newSequenceFlow(SequenceFlowKind.NORMAL), undefined, new Label(toFont({ name: 'Helvetica' }), new Bounds(20, 20, 30, 120))); - expect(computeStyle(edge)).toBe('sequenceFlow;normal;fontFamily=Helvetica;verticalAlign=top;align=center'); + expect(computeStyle(edge)).toStrictEqual({ + baseStyleNames: ['sequenceFlow', 'normal'], + fontFamily: 'Helvetica', + align: 'center', + verticalAlign: 'top', + fontStyle: 0, // TODO decide if we set the fontStyle property to 0 or if we omit it + bpmn: { kind: FlowKind.SEQUENCE_FLOW }, + }); }); }); From 0ea263d133b7f379b6e5892970fd429dadb58a42 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Fri, 2 Dec 2022 14:51:00 +0100 Subject: [PATCH 075/132] wip fix StyleComputer.test.ts --- .../mxgraph/renderer/StyleComputer.test.ts | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts index a27920d506..6941bf8ebc 100644 --- a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts +++ b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts @@ -268,18 +268,24 @@ describe('Style Computer', () => { [SequenceFlowKind.CONDITIONAL_FROM_ACTIVITY, 'conditional_from_activity'], [SequenceFlowKind.DEFAULT, 'default'], [SequenceFlowKind.NORMAL, 'normal'], - ])('compute style - sequence flows: %s', (kind, expected) => { + ])('compute style - sequence flows: %s', (kind: SequenceFlowKind, expected: string) => { const edge = new Edge('id', newSequenceFlow(kind)); - expect(computeStyle(edge)).toBe(`sequenceFlow;${expected}`); + expect(computeStyle(edge)).toStrictEqual({ + baseStyleNames: ['sequenceFlow', expected], + bpmn: { kind: FlowKind.SEQUENCE_FLOW }, + }); }); it.each([ [AssociationDirectionKind.NONE, 'None'], [AssociationDirectionKind.ONE, 'One'], [AssociationDirectionKind.BOTH, 'Both'], - ])('compute style - association flows: %s', (kind, expected) => { + ])('compute style - association flows: %s', (kind: AssociationDirectionKind, expected: string) => { const edge = new Edge('id', newAssociationFlow(kind)); - expect(computeStyle(edge)).toBe(`association;${expected}`); + expect(computeStyle(edge)).toStrictEqual({ + baseStyleNames: ['association', expected], + bpmn: { kind: FlowKind.ASSOCIATION_FLOW }, + }); }); it.each([ From 523112716a0c0460263c54ee278ff9f2aff0b4ee Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Fri, 2 Dec 2022 14:53:29 +0100 Subject: [PATCH 076/132] update FIXME --- src/component/mxgraph/renderer/StyleComputer.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/component/mxgraph/renderer/StyleComputer.ts b/src/component/mxgraph/renderer/StyleComputer.ts index fa53a730f2..081ceba459 100644 --- a/src/component/mxgraph/renderer/StyleComputer.ts +++ b/src/component/mxgraph/renderer/StyleComputer.ts @@ -61,7 +61,7 @@ export interface BPMNCellStyle extends CellStyle { markers?: ShapeBpmnMarkerKind[]; sequenceFlowKind?: SequenceFlowKind; associationDirectionKind?: AssociationDirectionKind; - isNonInitiating?: boolean; + isNonInitiating?: boolean; // TODO why not isInitiating extra?: { css: { classes: string[]; @@ -189,6 +189,8 @@ export default class StyleComputer { style.labelWidth = labelBounds.width + 1; // align settings // FIXME values were inverted in the mxGraph implementation, this was probably wrong as they were set like this in StyleConfigurator + // styleValues.set(mxgraph.mxConstants.STYLE_LABEL_POSITION, mxgraph.mxConstants.ALIGN_TOP); + // styleValues.set(mxgraph.mxConstants.STYLE_VERTICAL_LABEL_POSITION, mxgraph.mxConstants.ALIGN_LEFT); style.labelPosition = 'left'; style.verticalLabelPosition = 'top'; // end of fixme From 614be6ff3dbdb135d4d237596f1a91dc48039ebf Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Fri, 2 Dec 2022 15:22:41 +0100 Subject: [PATCH 077/132] StyleComputer: add TODO --- src/component/mxgraph/renderer/StyleComputer.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/component/mxgraph/renderer/StyleComputer.ts b/src/component/mxgraph/renderer/StyleComputer.ts index 081ceba459..1afb2c06ab 100644 --- a/src/component/mxgraph/renderer/StyleComputer.ts +++ b/src/component/mxgraph/renderer/StyleComputer.ts @@ -50,6 +50,7 @@ export interface BPMNCellStyle extends CellStyle { // shape?: ShapeValue | string; // TODO make bpmn mandatory? bpmn?: { + // TODO sort properties in alphabetical order for clarity (and as done in maxGraph CellStyle) and provide documentation about each property // TODO make kind mandatory? kind?: ShapeBpmnElementKind | FlowKind; isInstantiating?: boolean; @@ -61,7 +62,7 @@ export interface BPMNCellStyle extends CellStyle { markers?: ShapeBpmnMarkerKind[]; sequenceFlowKind?: SequenceFlowKind; associationDirectionKind?: AssociationDirectionKind; - isNonInitiating?: boolean; // TODO why not isInitiating + isNonInitiating?: boolean; // TODO why not 'isInitiating' for consistency with other boolean value? Negate doesn't make things easier to understand extra?: { css: { classes: string[]; From 37fa21dc991d2477b2b38f71c126ce67e4a71b44 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Fri, 2 Dec 2022 15:35:01 +0100 Subject: [PATCH 078/132] wip fix StyleComputer.test.ts --- .../mxgraph/renderer/StyleComputer.test.ts | 27 ++++++++++++++----- 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts index 6941bf8ebc..02b6489bfd 100644 --- a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts +++ b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts @@ -289,24 +289,39 @@ describe('Style Computer', () => { }); it.each([ - [MessageVisibleKind.NON_INITIATING, 'non_initiating'], - [MessageVisibleKind.INITIATING, 'initiating'], - ])('compute style - message flow icon: %s', (messageVisibleKind, expected) => { + [MessageVisibleKind.NON_INITIATING, true], + [MessageVisibleKind.INITIATING, false], + ])('compute style - message flow icon: %s', (messageVisibleKind: MessageVisibleKind, expected: boolean) => { const edge = new Edge('id', newMessageFlow(), undefined, undefined, messageVisibleKind); - expect(styleComputer.computeMessageFlowIconStyle(edge)).toBe(`shape=bpmn.messageFlowIcon;bpmn.isInitiating=${expected}`); + // TODO cas to (waiting for "maxGraph fixes its types") + expect(styleComputer.computeMessageFlowIconStyle(edge)).toStrictEqual({ + shape: 'bpmn.messageFlowIcon', + bpmn: { isNonInitiating: expected }, + }); }); describe('compute style - events kind', () => { it('intermediate catch conditional', () => { const shape = newShape(newShapeBpmnEvent(ShapeBpmnElementKind.EVENT_INTERMEDIATE_CATCH, ShapeBpmnEventDefinitionKind.CONDITIONAL), newLabel({ name: 'Ubuntu' })); - expect(computeStyle(shape)).toBe('intermediateCatchEvent;bpmn.eventDefinitionKind=conditional;fontFamily=Ubuntu'); + expect(computeStyle(shape)).toStrictEqual({ + baseStyleNames: ['intermediateCatchEvent'], + fontFamily: 'Ubuntu', + fontStyle: 0, // TODO decide if we set the fontStyle property to 0 or if we omit it + bpmn: { kind: ShapeBpmnElementKind.EVENT_INTERMEDIATE_CATCH, eventDefinitionKind: ShapeBpmnEventDefinitionKind.CONDITIONAL }, + }); }); it('start signal', () => { const shape = newShape(newShapeBpmnEvent(ShapeBpmnElementKind.EVENT_START, ShapeBpmnEventDefinitionKind.SIGNAL), newLabel({ isBold: true })); - expect(computeStyle(shape)).toBe('startEvent;bpmn.eventDefinitionKind=signal;fontStyle=1'); + // expect(computeStyle(shape)).toBe('startEvent;bpmn.eventDefinitionKind=signal;fontStyle=1'); + expect(computeStyle(shape)).toStrictEqual({ + baseStyleNames: ['startEvent'], + fontStyle: 1, + bpmn: { kind: ShapeBpmnElementKind.EVENT_START, eventDefinitionKind: ShapeBpmnEventDefinitionKind.SIGNAL }, + }); }); }); + describe('compute style - boundary events', () => { it('interrupting message', () => { const shape = newShape(newShapeBpmnBoundaryEvent(ShapeBpmnEventDefinitionKind.MESSAGE, true), newLabel({ name: 'Arial' })); From c6aec3c4bcb7f95124e00d9cbee9038833c5f79e Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Fri, 2 Dec 2022 16:32:56 +0100 Subject: [PATCH 079/132] wip fix StyleComputer.test.ts - pool/lane horizontal --- src/component/mxgraph/renderer/StyleComputer.ts | 4 +++- .../mxgraph/renderer/StyleComputer.test.ts | 15 +++++++++++---- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/component/mxgraph/renderer/StyleComputer.ts b/src/component/mxgraph/renderer/StyleComputer.ts index 1afb2c06ab..fbb19673b6 100644 --- a/src/component/mxgraph/renderer/StyleComputer.ts +++ b/src/component/mxgraph/renderer/StyleComputer.ts @@ -117,7 +117,9 @@ export default class StyleComputer { } else if (ShapeUtil.isPoolOrLane(bpmnElement.kind)) { // style.horizontal is for the label // In BPMN, isHorizontal is for the Shape - style.horizontal = shape.isHorizontal; + // FIXME maxGraph seems inverting horizontal and vertical + // so inverting condition for now + style.horizontal = shape.isHorizontal == undefined || !shape.isHorizontal; } else if (bpmnElement instanceof ShapeBpmnEventBasedGateway) { style.bpmn.isInstantiating = bpmnElement.instantiate; style.bpmn.gatewayKind = bpmnElement.gatewayKind; diff --git a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts index 02b6489bfd..9f0b16968a 100644 --- a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts +++ b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts @@ -458,11 +458,18 @@ describe('Style Computer', () => { describe('compute style - pool references a Process', () => { it.each([ - ['vertical', false, '1'], - ['horizontal', true, '0'], - ])('%s pool references a Process', (title, isHorizontal: boolean, expected: string) => { + ['vertical', false, false], + ['horizontal', true, true], + ['undefined', undefined, undefined], + // TODO undefined + ])('%s pool references a Process', (title: string, isHorizontal: boolean, expectedStyleIsHorizontal: boolean) => { const shape = newShape(newShapeBpmnElement(ShapeBpmnElementKind.POOL), undefined, isHorizontal); - expect(computeStyle(shape)).toBe(`pool;horizontal=${expected}`); + // expect(computeStyle(shape)).toBe(`pool;horizontal=${expectedStyleIsHorizontal}`); + expect(computeStyle(shape)).toStrictEqual({ + baseStyleNames: ['pool'], + horizontal: expectedStyleIsHorizontal, + bpmn: { kind: ShapeBpmnElementKind.POOL }, + }); }); }); From 8be028abff71e3c44da0672a7b53121d66c6598c Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Fri, 2 Dec 2022 18:11:25 +0100 Subject: [PATCH 080/132] event-shapes.ts: fix how we manage isInterrupting (it can be 'undefined') --- src/component/mxgraph/shape/event-shapes.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/component/mxgraph/shape/event-shapes.ts b/src/component/mxgraph/shape/event-shapes.ts index 54ef64b938..5bb5eddbfd 100644 --- a/src/component/mxgraph/shape/event-shapes.ts +++ b/src/component/mxgraph/shape/event-shapes.ts @@ -108,7 +108,8 @@ export class EventShape extends EllipseShape { private static setDashedOuterShapePattern(paintParameter: PaintParameter, isInterrupting: boolean): void { paintParameter.canvas.save(); // ensure we can later restore the configuration - if (!isInterrupting) { + // TODO maxGraph migration: 'isInterrupting' can be undefined whereas it wasn't with mxGraph + if (isInterrupting === false) { paintParameter.canvas.setDashed(true, false); paintParameter.canvas.setDashPattern('3 2'); } From 3e59ff6276358252e5b8e8bd1461f5cf57c697b9 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Fri, 2 Dec 2022 18:53:20 +0100 Subject: [PATCH 081/132] demo theme: use property to set style --- dev/ts/component/ThemedBpmnVisualization.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/dev/ts/component/ThemedBpmnVisualization.ts b/dev/ts/component/ThemedBpmnVisualization.ts index 6aa8d48e2c..e14626eb77 100644 --- a/dev/ts/component/ThemedBpmnVisualization.ts +++ b/dev/ts/component/ThemedBpmnVisualization.ts @@ -140,7 +140,7 @@ export class ThemedBpmnVisualization extends BpmnVisualization { } const style = styleSheet.styles.get(kind); style.fillColor = fillColor; - style['strokeColor'] = strokeColor; + style.strokeColor = strokeColor; }); // TASK @@ -168,14 +168,14 @@ export class ThemedBpmnVisualization extends BpmnVisualization { // DEFAULTS const defaultVertexStyle = styleSheet.getDefaultVertexStyle(); - defaultVertexStyle['fontColor'] = theme.defaultFontColor; + defaultVertexStyle.fontColor = theme.defaultFontColor; defaultVertexStyle.fillColor = theme.defaultFillColor; - defaultVertexStyle['strokeColor'] = theme.defaultStrokeColor; + defaultVertexStyle.strokeColor = theme.defaultStrokeColor; const defaultEdgeStyle = styleSheet.getDefaultEdgeStyle(); - defaultEdgeStyle['fontColor'] = theme.defaultFontColor; + defaultEdgeStyle.fontColor = theme.defaultFontColor; defaultEdgeStyle.fillColor = theme.defaultFillColor; - defaultEdgeStyle['strokeColor'] = theme.flowColor ?? theme.defaultStrokeColor; + defaultEdgeStyle.strokeColor = theme.flowColor ?? theme.defaultStrokeColor; // theme configuration completed return true; From 679a9bfd557ae310ba60994d1bff563958a6648b Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Fri, 2 Dec 2022 18:53:40 +0100 Subject: [PATCH 082/132] wip fix StyleComputer.test.ts - pool/lane horizontal --- .../unit/component/mxgraph/renderer/StyleComputer.test.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts index 9f0b16968a..16890a3068 100644 --- a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts +++ b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts @@ -457,14 +457,14 @@ describe('Style Computer', () => { }); describe('compute style - pool references a Process', () => { + // TODO all expected values are inverted (see implementation) it.each([ - ['vertical', false, false], - ['horizontal', true, true], - ['undefined', undefined, undefined], + ['vertical', false, true], + ['horizontal', true, false], + ['undefined', undefined, true], // TODO undefined ])('%s pool references a Process', (title: string, isHorizontal: boolean, expectedStyleIsHorizontal: boolean) => { const shape = newShape(newShapeBpmnElement(ShapeBpmnElementKind.POOL), undefined, isHorizontal); - // expect(computeStyle(shape)).toBe(`pool;horizontal=${expectedStyleIsHorizontal}`); expect(computeStyle(shape)).toStrictEqual({ baseStyleNames: ['pool'], horizontal: expectedStyleIsHorizontal, From 9253df4e248ebf008053c730c6e445d33ef2b7a5 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Fri, 2 Dec 2022 18:56:23 +0100 Subject: [PATCH 083/132] wip fix StyleComputer.test.ts - pool/lane horizontal --- .../mxgraph/renderer/StyleComputer.test.ts | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts index 16890a3068..2903ef74aa 100644 --- a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts +++ b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts @@ -474,12 +474,18 @@ describe('Style Computer', () => { }); describe('compute style - lane', () => { + // TODO all expected values are inverted (see implementation) it.each([ - ['vertical', false, '1'], - ['horizontal', true, '0'], - ])('%s lane', (title, isHorizontal: boolean, expected: string) => { + ['vertical', false, true], + ['horizontal', true, false], + ['undefined', undefined, true], + ])('%s lane', (title: string, isHorizontal: boolean, expectedStyleIsHorizontal: boolean) => { const shape = newShape(newShapeBpmnElement(ShapeBpmnElementKind.LANE), undefined, isHorizontal); - expect(computeStyle(shape)).toBe(`lane;horizontal=${expected}`); + expect(computeStyle(shape)).toStrictEqual({ + baseStyleNames: ['lane'], + horizontal: expectedStyleIsHorizontal, + bpmn: { kind: ShapeBpmnElementKind.LANE }, + }); }); }); From 674bc9670c06e6d6fdf8a223063edd715c4d9b96 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Fri, 2 Dec 2022 19:11:07 +0100 Subject: [PATCH 084/132] wip fix StyleComputer.test.ts --- .../mxgraph/renderer/StyleComputer.test.ts | 22 ++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts index 2903ef74aa..5359568677 100644 --- a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts +++ b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts @@ -313,7 +313,6 @@ describe('Style Computer', () => { it('start signal', () => { const shape = newShape(newShapeBpmnEvent(ShapeBpmnElementKind.EVENT_START, ShapeBpmnEventDefinitionKind.SIGNAL), newLabel({ isBold: true })); - // expect(computeStyle(shape)).toBe('startEvent;bpmn.eventDefinitionKind=signal;fontStyle=1'); expect(computeStyle(shape)).toStrictEqual({ baseStyleNames: ['startEvent'], fontStyle: 1, @@ -325,17 +324,30 @@ describe('Style Computer', () => { describe('compute style - boundary events', () => { it('interrupting message', () => { const shape = newShape(newShapeBpmnBoundaryEvent(ShapeBpmnEventDefinitionKind.MESSAGE, true), newLabel({ name: 'Arial' })); - expect(computeStyle(shape)).toBe('boundaryEvent;bpmn.eventDefinitionKind=message;bpmn.isInterrupting=true;fontFamily=Arial'); + expect(computeStyle(shape)).toStrictEqual({ + baseStyleNames: ['boundaryEvent'], + fontFamily: 'Arial', + fontStyle: 0, // TODO decide if we set the fontStyle property to 0 or if we omit it + bpmn: { kind: ShapeBpmnElementKind.EVENT_BOUNDARY, eventDefinitionKind: ShapeBpmnEventDefinitionKind.MESSAGE, isInterrupting: true }, + }); }); it('non interrupting timer', () => { const shape = newShape(newShapeBpmnBoundaryEvent(ShapeBpmnEventDefinitionKind.TIMER, false), newLabel({ isItalic: true })); - expect(computeStyle(shape)).toBe('boundaryEvent;bpmn.eventDefinitionKind=timer;bpmn.isInterrupting=false;fontStyle=2'); + expect(computeStyle(shape)).toStrictEqual({ + baseStyleNames: ['boundaryEvent'], + fontStyle: 2, + bpmn: { kind: ShapeBpmnElementKind.EVENT_BOUNDARY, eventDefinitionKind: ShapeBpmnEventDefinitionKind.TIMER, isInterrupting: false }, + }); }); it('cancel with undefined interrupting value', () => { const shape = newShape(newShapeBpmnBoundaryEvent(ShapeBpmnEventDefinitionKind.CANCEL, undefined), newLabel({ isStrikeThrough: true })); - expect(computeStyle(shape)).toBe('boundaryEvent;bpmn.eventDefinitionKind=cancel;bpmn.isInterrupting=true;fontStyle=8'); + expect(computeStyle(shape)).toStrictEqual({ + baseStyleNames: ['boundaryEvent'], + fontStyle: 8, + bpmn: { kind: ShapeBpmnElementKind.EVENT_BOUNDARY, eventDefinitionKind: ShapeBpmnEventDefinitionKind.CANCEL, isInterrupting: true }, + }); }); }); @@ -383,7 +395,7 @@ describe('Style Computer', () => { describe.each([ ['expanded', []], ['collapsed', [ShapeBpmnMarkerKind.EXPAND]], - ])(`compute style - %s call activities`, (expandKind, markers: ShapeBpmnMarkerKind[]) => { + ])(`compute style - %s call activities`, (expandKind: string, markers: ShapeBpmnMarkerKind[]) => { it(`${expandKind} call activity without label bounds`, () => { const shape = newShape(newShapeBpmnCallActivityCallingProcess(markers), newLabel({ name: 'Arial' })); const additionalMarkerStyle = markers.includes(ShapeBpmnMarkerKind.EXPAND) ? ';bpmn.markers=expand' : ''; From aba824d322b1fceb39e143d9416aa31f1b62e7ac Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sat, 3 Dec 2022 11:27:54 +0100 Subject: [PATCH 085/132] wip fix StyleComputer.test.ts --- .../mxgraph/renderer/StyleComputer.test.ts | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts index 5359568677..bad5c3e2e9 100644 --- a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts +++ b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts @@ -354,17 +354,30 @@ describe('Style Computer', () => { describe('compute style - event sub-process start event', () => { it('interrupting message', () => { const shape = newShape(newShapeBpmnStartEvent(ShapeBpmnEventDefinitionKind.MESSAGE, true), newLabel({ name: 'Arial' })); - expect(computeStyle(shape)).toBe('startEvent;bpmn.eventDefinitionKind=message;bpmn.isInterrupting=true;fontFamily=Arial'); + expect(computeStyle(shape)).toStrictEqual({ + baseStyleNames: ['startEvent'], + fontFamily: 'Arial', + fontStyle: 0, // TODO decide if we set the fontStyle property to 0 or if we omit it + bpmn: { kind: ShapeBpmnElementKind.EVENT_START, eventDefinitionKind: ShapeBpmnEventDefinitionKind.MESSAGE, isInterrupting: true }, + }); }); it('non interrupting timer', () => { const shape = newShape(newShapeBpmnStartEvent(ShapeBpmnEventDefinitionKind.TIMER, false), newLabel({ isItalic: true })); - expect(computeStyle(shape)).toBe('startEvent;bpmn.eventDefinitionKind=timer;bpmn.isInterrupting=false;fontStyle=2'); + expect(computeStyle(shape)).toStrictEqual({ + baseStyleNames: ['startEvent'], + fontStyle: 2, + bpmn: { kind: ShapeBpmnElementKind.EVENT_START, eventDefinitionKind: ShapeBpmnEventDefinitionKind.TIMER, isInterrupting: false }, + }); }); it('cancel with undefined interrupting value', () => { const shape = newShape(newShapeBpmnStartEvent(ShapeBpmnEventDefinitionKind.CANCEL, undefined), newLabel({ isStrikeThrough: true })); - expect(computeStyle(shape)).toBe('startEvent;bpmn.eventDefinitionKind=cancel;fontStyle=8'); + expect(computeStyle(shape)).toStrictEqual({ + baseStyleNames: ['startEvent'], + fontStyle: 8, + bpmn: { kind: ShapeBpmnElementKind.EVENT_START, eventDefinitionKind: ShapeBpmnEventDefinitionKind.CANCEL }, + }); }); }); From 230553c032ebcb914659fbb97b82f227e80b3b72 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sat, 3 Dec 2022 11:57:51 +0100 Subject: [PATCH 086/132] wip fix StyleComputer.test.ts --- .../mxgraph/renderer/StyleComputer.test.ts | 32 +++++++++++++++---- 1 file changed, 25 insertions(+), 7 deletions(-) diff --git a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts index bad5c3e2e9..5ee7d14a6f 100644 --- a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts +++ b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts @@ -119,6 +119,8 @@ function newAssociationFlow(kind: AssociationDirectionKind): AssociationFlow { return new AssociationFlow('id', 'name', undefined, undefined, kind); } +// TODO order properties alphabetically in expected style + describe('Style Computer', () => { const styleComputer = new StyleComputer(); @@ -388,17 +390,33 @@ describe('Style Computer', () => { ])(`compute style - %s sub-processes`, (expandKind, markers: ShapeBpmnMarkerKind[]) => { it(`${expandKind} embedded sub-process without label bounds`, () => { const shape = newShape(newShapeBpmnSubProcess(ShapeBpmnSubProcessKind.EMBEDDED, markers), newLabel({ name: 'Arial' })); - const additionalMarkerStyle = markers.includes(ShapeBpmnMarkerKind.EXPAND) ? ';bpmn.markers=expand' : ''; - const additionalTerminalStyle = !markers.includes(ShapeBpmnMarkerKind.EXPAND) ? ';verticalAlign=top' : ''; - expect(computeStyle(shape)).toBe(`subProcess;bpmn.subProcessKind=embedded${additionalMarkerStyle};fontFamily=Arial${additionalTerminalStyle}`); + const expectedStyle = { + baseStyleNames: ['subProcess'], + bpmn: { kind: ShapeBpmnElementKind.SUB_PROCESS, subProcessKind: ShapeBpmnSubProcessKind.EMBEDDED, markers }, + fontFamily: 'Arial', + fontStyle: 0, // TODO decide if we set the fontStyle property to 0 or if we omit it + }; + !markers.includes(ShapeBpmnMarkerKind.EXPAND) && (expectedStyle.verticalAlign = 'top'); + expect(computeStyle(shape)).toStrictEqual(expectedStyle); }); it(`${expandKind} embedded sub-process with label bounds`, () => { const shape = newShape(newShapeBpmnSubProcess(ShapeBpmnSubProcessKind.EMBEDDED, markers), newLabel({ name: 'sans-serif' }, new Bounds(20, 20, 300, 200))); - const additionalMarkerStyle = markers.includes(ShapeBpmnMarkerKind.EXPAND) ? ';bpmn.markers=expand' : ''; - expect(computeStyle(shape)).toBe( - `subProcess;bpmn.subProcessKind=embedded${additionalMarkerStyle};fontFamily=sans-serif;verticalAlign=top;align=center;labelWidth=301;labelPosition=top;verticalLabelPosition=left`, - ); + const expectedStyle = { + align: 'center', + baseStyleNames: ['subProcess'], + bpmn: { kind: ShapeBpmnElementKind.SUB_PROCESS, subProcessKind: ShapeBpmnSubProcessKind.EMBEDDED, markers }, + fontFamily: 'sans-serif', + fontStyle: 0, // TODO decide if we set the fontStyle property to 0 or if we omit it + labelWidth: 301, + verticalAlign: 'top', + // FIXME values were inverted in the mxGraph implementation, this was probably wrong as they were set like this in StyleConfigurator + // `subProcess;bpmn.subProcessKind=embedded${additionalMarkerStyle};fontFamily=sans-serif;verticalAlign=top;align=center;labelWidth=301;labelPosition=top;verticalLabelPosition=left`, + labelPosition: 'left', + verticalLabelPosition: 'top', + // end of fixme + }; + expect(computeStyle(shape)).toStrictEqual(expectedStyle); }); }); }); From f5974602484590816d3b3844d0d2f98d08c447c8 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sat, 3 Dec 2022 12:05:39 +0100 Subject: [PATCH 087/132] wip StyleComputer.test.ts - add missing types in signatures --- .../mxgraph/renderer/StyleComputer.test.ts | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts index 5ee7d14a6f..b10b03bc04 100644 --- a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts +++ b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts @@ -295,7 +295,7 @@ describe('Style Computer', () => { [MessageVisibleKind.INITIATING, false], ])('compute style - message flow icon: %s', (messageVisibleKind: MessageVisibleKind, expected: boolean) => { const edge = new Edge('id', newMessageFlow(), undefined, undefined, messageVisibleKind); - // TODO cas to (waiting for "maxGraph fixes its types") + // TODO cast to (waiting for "maxGraph fixes its types") expect(styleComputer.computeMessageFlowIconStyle(edge)).toStrictEqual({ shape: 'bpmn.messageFlowIcon', bpmn: { isNonInitiating: expected }, @@ -387,7 +387,7 @@ describe('Style Computer', () => { describe.each([ ['expanded', []], ['collapsed', [ShapeBpmnMarkerKind.EXPAND]], - ])(`compute style - %s sub-processes`, (expandKind, markers: ShapeBpmnMarkerKind[]) => { + ])(`compute style - %s sub-processes`, (expandKind: string, markers: ShapeBpmnMarkerKind[]) => { it(`${expandKind} embedded sub-process without label bounds`, () => { const shape = newShape(newShapeBpmnSubProcess(ShapeBpmnSubProcessKind.EMBEDDED, markers), newLabel({ name: 'Arial' })); const expectedStyle = { @@ -592,10 +592,13 @@ describe('Style Computer', () => { ${true} | ${undefined} ${true} | ${'Exclusive'} ${true} | ${'Parallel'} - `('event-based gateway when instantiate: $instantiate for gatewayKind: $gatewayKind', ({ instantiate, gatewayKind }) => { - const shape = newShape(newShapeBpmnEventBasedGateway(instantiate, gatewayKind), newLabel({ name: 'Arial' })); - gatewayKind ??= ShapeBpmnEventBasedGatewayKind.None; - expect(computeStyle(shape)).toBe(`eventBasedGateway;bpmn.isInstantiating=${!!instantiate};bpmn.gatewayKind=${gatewayKind};fontFamily=Arial`); - }); + `( + 'event-based gateway when instantiate: $instantiate for gatewayKind: $gatewayKind', + ({ instantiate, gatewayKind }: { instantiate: boolean; gatewayKind: ShapeBpmnEventBasedGatewayKind }) => { + const shape = newShape(newShapeBpmnEventBasedGateway(instantiate, gatewayKind), newLabel({ name: 'Arial' })); + gatewayKind ??= ShapeBpmnEventBasedGatewayKind.None; + expect(computeStyle(shape)).toBe(`eventBasedGateway;bpmn.isInstantiating=${!!instantiate};bpmn.gatewayKind=${gatewayKind};fontFamily=Arial`); + }, + ); }); }); From 785eb5058bef00a594081df4326fd4f31492f9ce Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sat, 3 Dec 2022 16:44:15 +0100 Subject: [PATCH 088/132] wip fix StyleComputer.test.ts --- .../mxgraph/renderer/StyleComputer.test.ts | 38 +++++++++++++++---- 1 file changed, 31 insertions(+), 7 deletions(-) diff --git a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts index b10b03bc04..78cf35df91 100644 --- a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts +++ b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts @@ -429,17 +429,41 @@ describe('Style Computer', () => { ])(`compute style - %s call activities`, (expandKind: string, markers: ShapeBpmnMarkerKind[]) => { it(`${expandKind} call activity without label bounds`, () => { const shape = newShape(newShapeBpmnCallActivityCallingProcess(markers), newLabel({ name: 'Arial' })); - const additionalMarkerStyle = markers.includes(ShapeBpmnMarkerKind.EXPAND) ? ';bpmn.markers=expand' : ''; - const additionalTerminalStyle = !markers.includes(ShapeBpmnMarkerKind.EXPAND) ? ';verticalAlign=top' : ''; - expect(computeStyle(shape)).toBe(`callActivity${additionalMarkerStyle};fontFamily=Arial${additionalTerminalStyle}`); + const expectedStyle = { + baseStyleNames: ['callActivity'], + bpmn: { + kind: ShapeBpmnElementKind.CALL_ACTIVITY, + globalTaskKind: undefined, // TODO decide if we set globalTaskKind to undefined or if we omit the property + markers, + }, + fontFamily: 'Arial', + fontStyle: 0, // TODO decide if we set the fontStyle property to 0 or if we omit it + }; + !markers.includes(ShapeBpmnMarkerKind.EXPAND) && (expectedStyle.verticalAlign = 'top'); + expect(computeStyle(shape)).toStrictEqual(expectedStyle); }); it(`${expandKind} call activity with label bounds`, () => { const shape = newShape(newShapeBpmnCallActivityCallingProcess(markers), newLabel({ name: 'sans-serif' }, new Bounds(20, 20, 300, 200))); - const additionalMarkerStyle = markers.includes(ShapeBpmnMarkerKind.EXPAND) ? ';bpmn.markers=expand' : ''; - expect(computeStyle(shape)).toBe( - `callActivity${additionalMarkerStyle};fontFamily=sans-serif;verticalAlign=top;align=center;labelWidth=301;labelPosition=top;verticalLabelPosition=left`, - ); + const expectedStyle = { + align: 'center', + baseStyleNames: ['callActivity'], + bpmn: { + kind: ShapeBpmnElementKind.CALL_ACTIVITY, + globalTaskKind: undefined, // TODO decide if we set globalTaskKind to undefined or if we omit the property + markers, + }, + fontFamily: 'sans-serif', + fontStyle: 0, // TODO decide if we set the fontStyle property to 0 or if we omit it + labelWidth: 301, + verticalAlign: 'top', + // FIXME values were inverted in the mxGraph implementation, this was probably wrong as they were set like this in StyleConfigurator + // `callActivity${additionalMarkerStyle};fontFamily=sans-serif;verticalAlign=top;align=center;labelWidth=301;labelPosition=top;verticalLabelPosition=left`, + labelPosition: 'left', + verticalLabelPosition: 'top', + // end of fixme + }; + expect(computeStyle(shape)).toStrictEqual(expectedStyle); }); }); }); From a47b3e2ebd1e6015ff13f26dcb97aea98702c9f4 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sat, 3 Dec 2022 16:50:58 +0100 Subject: [PATCH 089/132] wip fix StyleComputer.test.ts --- .../mxgraph/renderer/StyleComputer.test.ts | 40 ++++++++++++++----- 1 file changed, 30 insertions(+), 10 deletions(-) diff --git a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts index 78cf35df91..e97a7eb390 100644 --- a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts +++ b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts @@ -402,7 +402,7 @@ describe('Style Computer', () => { it(`${expandKind} embedded sub-process with label bounds`, () => { const shape = newShape(newShapeBpmnSubProcess(ShapeBpmnSubProcessKind.EMBEDDED, markers), newLabel({ name: 'sans-serif' }, new Bounds(20, 20, 300, 200))); - const expectedStyle = { + expect(computeStyle(shape)).toStrictEqual({ align: 'center', baseStyleNames: ['subProcess'], bpmn: { kind: ShapeBpmnElementKind.SUB_PROCESS, subProcessKind: ShapeBpmnSubProcessKind.EMBEDDED, markers }, @@ -415,8 +415,7 @@ describe('Style Computer', () => { labelPosition: 'left', verticalLabelPosition: 'top', // end of fixme - }; - expect(computeStyle(shape)).toStrictEqual(expectedStyle); + }); }); }); }); @@ -445,7 +444,7 @@ describe('Style Computer', () => { it(`${expandKind} call activity with label bounds`, () => { const shape = newShape(newShapeBpmnCallActivityCallingProcess(markers), newLabel({ name: 'sans-serif' }, new Bounds(20, 20, 300, 200))); - const expectedStyle = { + expect(computeStyle(shape)).toStrictEqual({ align: 'center', baseStyleNames: ['callActivity'], bpmn: { @@ -462,8 +461,7 @@ describe('Style Computer', () => { labelPosition: 'left', verticalLabelPosition: 'top', // end of fixme - }; - expect(computeStyle(shape)).toStrictEqual(expectedStyle); + }); }); }); }); @@ -478,14 +476,36 @@ describe('Style Computer', () => { ])(`compute style - call activities calling %s`, (globalTaskKind: GlobalTaskKind) => { it(`call activity calling ${globalTaskKind} without label bounds`, () => { const shape = newShape(newShapeBpmnCallActivityCallingGlobalTask(globalTaskKind), newLabel({ name: 'Arial' })); - expect(computeStyle(shape)).toBe(`callActivity;bpmn.globalTaskKind=${globalTaskKind};fontFamily=Arial`); + // expect(computeStyle(shape)).toBe(`callActivity;bpmn.globalTaskKind=${globalTaskKind};fontFamily=Arial`); + const expectedStyle = { + baseStyleNames: ['callActivity'], + bpmn: { kind: ShapeBpmnElementKind.CALL_ACTIVITY, globalTaskKind: globalTaskKind, markers: [] }, + fontFamily: 'Arial', + fontStyle: 0, // TODO decide if we set the fontStyle property to 0 or if we omit it + }; + expect(computeStyle(shape)).toStrictEqual(expectedStyle); }); it(`call activity calling ${globalTaskKind} with label bounds`, () => { const shape = newShape(newShapeBpmnCallActivityCallingGlobalTask(globalTaskKind), newLabel({ name: 'sans-serif' }, new Bounds(20, 20, 300, 200))); - expect(computeStyle(shape)).toBe( - `callActivity;bpmn.globalTaskKind=${globalTaskKind};fontFamily=sans-serif;verticalAlign=top;align=center;labelWidth=301;labelPosition=top;verticalLabelPosition=left`, - ); + expect(computeStyle(shape)).toStrictEqual({ + align: 'center', + baseStyleNames: ['callActivity'], + bpmn: { + globalTaskKind: globalTaskKind, + kind: ShapeBpmnElementKind.CALL_ACTIVITY, + markers: [], + }, + fontFamily: 'sans-serif', + fontStyle: 0, // TODO decide if we set the fontStyle property to 0 or if we omit it + labelWidth: 301, + verticalAlign: 'top', + // FIXME values were inverted in the mxGraph implementation, this was probably wrong as they were set like this in StyleConfigurator + // `callActivity;bpmn.globalTaskKind=${globalTaskKind};fontFamily=sans-serif;verticalAlign=top;align=center;labelWidth=301;labelPosition=top;verticalLabelPosition=left`, + labelPosition: 'left', + verticalLabelPosition: 'top', + // end of fixme + }); }); }); }); From 18b0a953bd022ff69e7ebd859ba997c8ae4811e7 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sat, 3 Dec 2022 16:59:00 +0100 Subject: [PATCH 090/132] wip fix StyleComputer.test.ts --- test/unit/component/mxgraph/renderer/StyleComputer.test.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts index e97a7eb390..58b36a46b9 100644 --- a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts +++ b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts @@ -517,7 +517,12 @@ describe('Style Computer', () => { ['instantiating', true], ])('%s receive task', (instantiatingKind: string, instantiate: boolean) => { const shape = newShape(newShapeBpmnActivity(ShapeBpmnElementKind.TASK_RECEIVE, undefined, instantiate), newLabel({ name: 'Arial' })); - expect(computeStyle(shape)).toBe(`receiveTask;bpmn.isInstantiating=${instantiate};fontFamily=Arial`); + expect(computeStyle(shape)).toStrictEqual({ + baseStyleNames: ['receiveTask'], + bpmn: { kind: ShapeBpmnElementKind.TASK_RECEIVE, isInstantiating: instantiate, markers: [] }, + fontFamily: 'Arial', + fontStyle: 0, // TODO decide if we set the fontStyle property to 0 or if we omit it + }); }); }); From 00d43a66c5c1c17ba5392da0cd03d138bd0c6bcb Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sat, 3 Dec 2022 17:12:50 +0100 Subject: [PATCH 091/132] wip fix StyleComputer.test.ts --- .../mxgraph/renderer/StyleComputer.test.ts | 27 +++++++++++++++---- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts index 58b36a46b9..e87c86df32 100644 --- a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts +++ b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts @@ -529,7 +529,10 @@ describe('Style Computer', () => { describe('compute style - text annotation', () => { it('without label', () => { const shape = newShape(newShapeBpmnElement(ShapeBpmnElementKind.TEXT_ANNOTATION)); - expect(computeStyle(shape)).toBe('textAnnotation'); + expect(computeStyle(shape)).toStrictEqual({ + baseStyleNames: ['textAnnotation'], + bpmn: { kind: ShapeBpmnElementKind.TEXT_ANNOTATION }, + }); }); it('with label bounds', () => { const shape = newShape(newShapeBpmnElement(ShapeBpmnElementKind.TEXT_ANNOTATION), newLabel({ name: 'Segoe UI' }, new Bounds(50, 50, 100, 100))); @@ -540,7 +543,10 @@ describe('Style Computer', () => { describe('compute style - group', () => { it('without label', () => { const shape = newShape(newShapeBpmnElement(ShapeBpmnElementKind.GROUP)); - expect(computeStyle(shape)).toBe('group'); + expect(computeStyle(shape)).toStrictEqual({ + baseStyleNames: ['group'], + bpmn: { kind: ShapeBpmnElementKind.GROUP }, + }); }); it('with label bounds', () => { const shape = newShape(newShapeBpmnElement(ShapeBpmnElementKind.GROUP), newLabel({ name: 'Roboto' }, new Bounds(50, 50, 100, 100))); @@ -601,8 +607,14 @@ describe('Style Computer', () => { (markerKind: ShapeBpmnMarkerKind) => { it(`${bpmnKind} with ${markerKind} marker`, () => { const shape = newShape(newShapeBpmnActivity(bpmnKind, [markerKind]), newLabel({ name: 'Arial' })); - const additionalReceiveTaskStyle = bpmnKind === ShapeBpmnElementKind.TASK_RECEIVE ? ';bpmn.isInstantiating=false' : ''; - expect(computeStyle(shape)).toBe(`${bpmnKind}${additionalReceiveTaskStyle};bpmn.markers=${markerKind};fontFamily=Arial`); + const expectedStyle = { + baseStyleNames: [bpmnKind], + bpmn: { kind: bpmnKind, markers: [markerKind] }, + fontFamily: 'Arial', + fontStyle: 0, // TODO decide if we set the fontStyle property to 0 or if we omit it + }; + bpmnKind === ShapeBpmnElementKind.TASK_RECEIVE && (expectedStyle.bpmn.isInstantiating = false); + expect(computeStyle(shape)).toStrictEqual(expectedStyle); }); if (bpmnKind == ShapeBpmnElementKind.SUB_PROCESS) { @@ -646,7 +658,12 @@ describe('Style Computer', () => { ({ instantiate, gatewayKind }: { instantiate: boolean; gatewayKind: ShapeBpmnEventBasedGatewayKind }) => { const shape = newShape(newShapeBpmnEventBasedGateway(instantiate, gatewayKind), newLabel({ name: 'Arial' })); gatewayKind ??= ShapeBpmnEventBasedGatewayKind.None; - expect(computeStyle(shape)).toBe(`eventBasedGateway;bpmn.isInstantiating=${!!instantiate};bpmn.gatewayKind=${gatewayKind};fontFamily=Arial`); + expect(computeStyle(shape)).toStrictEqual({ + baseStyleNames: ['eventBasedGateway'], + bpmn: { kind: ShapeBpmnElementKind.GATEWAY_EVENT_BASED, gatewayKind, isInstantiating: !!instantiate }, + fontFamily: 'Arial', + fontStyle: 0, // TODO decide if we set the fontStyle property to 0 or if we omit it + }); }, ); }); From 239710f792942f6eef87060c71ea1c99dde90a9e Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sat, 3 Dec 2022 17:17:39 +0100 Subject: [PATCH 092/132] wip fix StyleComputer.test.ts --- .../component/mxgraph/renderer/StyleComputer.test.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts index e87c86df32..315146f938 100644 --- a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts +++ b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts @@ -620,7 +620,10 @@ describe('Style Computer', () => { if (bpmnKind == ShapeBpmnElementKind.SUB_PROCESS) { it(`${bpmnKind} with Loop & Expand (collapsed) markers`, () => { const shape = newShape(newShapeBpmnSubProcess(ShapeBpmnSubProcessKind.EMBEDDED, [markerKind, ShapeBpmnMarkerKind.EXPAND])); - expect(computeStyle(shape)).toBe(`subProcess;bpmn.subProcessKind=embedded;bpmn.markers=${markerKind},expand`); + expect(computeStyle(shape)).toStrictEqual({ + baseStyleNames: ['subProcess'], + bpmn: { kind: ShapeBpmnElementKind.SUB_PROCESS, markers: [markerKind, ShapeBpmnMarkerKind.EXPAND], subProcessKind: ShapeBpmnSubProcessKind.EMBEDDED }, + }); }); } @@ -628,6 +631,10 @@ describe('Style Computer', () => { it(`${bpmnKind} calling process with ${markerKind} & Expand (collapsed) markers`, () => { const shape = newShape(newShapeBpmnCallActivityCallingProcess([markerKind, ShapeBpmnMarkerKind.EXPAND])); expect(computeStyle(shape)).toBe(`callActivity;bpmn.markers=${markerKind},expand`); + expect(computeStyle(shape)).toStrictEqual({ + baseStyleNames: ['callActivity'], + bpmn: { kind: ShapeBpmnElementKind.CALL_ACTIVITY, markers: [markerKind, ShapeBpmnMarkerKind.EXPAND] }, + }); }); it.each([ From 47f7252cd730a42ac2b3b4b34117743fb21c06a2 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sat, 3 Dec 2022 17:22:42 +0100 Subject: [PATCH 093/132] wip fix StyleComputer.test.ts --- .../mxgraph/renderer/StyleComputer.test.ts | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts index 315146f938..800232e4e0 100644 --- a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts +++ b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts @@ -630,10 +630,13 @@ describe('Style Computer', () => { if (bpmnKind == ShapeBpmnElementKind.CALL_ACTIVITY) { it(`${bpmnKind} calling process with ${markerKind} & Expand (collapsed) markers`, () => { const shape = newShape(newShapeBpmnCallActivityCallingProcess([markerKind, ShapeBpmnMarkerKind.EXPAND])); - expect(computeStyle(shape)).toBe(`callActivity;bpmn.markers=${markerKind},expand`); expect(computeStyle(shape)).toStrictEqual({ baseStyleNames: ['callActivity'], - bpmn: { kind: ShapeBpmnElementKind.CALL_ACTIVITY, markers: [markerKind, ShapeBpmnMarkerKind.EXPAND] }, + bpmn: { + kind: ShapeBpmnElementKind.CALL_ACTIVITY, + globalTaskKind: undefined, // TODO decide if we omit the globalTaskKind property when not set + markers: [markerKind, ShapeBpmnMarkerKind.EXPAND], + }, }); }); @@ -645,7 +648,14 @@ describe('Style Computer', () => { [ShapeBpmnElementKind.GLOBAL_TASK_BUSINESS_RULE as GlobalTaskKind], ])(`${bpmnKind} calling global task with ${markerKind} marker`, (globalTaskKind: GlobalTaskKind) => { const shape = newShape(newShapeBpmnCallActivityCallingGlobalTask(globalTaskKind, [markerKind])); - expect(computeStyle(shape)).toBe(`callActivity;bpmn.globalTaskKind=${globalTaskKind};bpmn.markers=${markerKind}`); + expect(computeStyle(shape)).toStrictEqual({ + baseStyleNames: ['callActivity'], + bpmn: { + kind: ShapeBpmnElementKind.CALL_ACTIVITY, + globalTaskKind, + markers: [markerKind], + }, + }); }); } }, From 46e217cb24215c54d7fb613c016d4898df2623f6 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sat, 3 Dec 2022 17:27:10 +0100 Subject: [PATCH 094/132] wip fix StyleComputer.test.ts --- .../mxgraph/renderer/StyleComputer.test.ts | 33 +++++++++++++++++-- 1 file changed, 31 insertions(+), 2 deletions(-) diff --git a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts index 800232e4e0..7c28acc00f 100644 --- a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts +++ b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts @@ -536,7 +536,21 @@ describe('Style Computer', () => { }); it('with label bounds', () => { const shape = newShape(newShapeBpmnElement(ShapeBpmnElementKind.TEXT_ANNOTATION), newLabel({ name: 'Segoe UI' }, new Bounds(50, 50, 100, 100))); - expect(computeStyle(shape)).toBe('textAnnotation;fontFamily=Segoe UI;verticalAlign=top;labelWidth=101;labelPosition=top;verticalLabelPosition=left'); + expect(computeStyle(shape)).toStrictEqual({ + baseStyleNames: ['textAnnotation'], + bpmn: { + kind: ShapeBpmnElementKind.TEXT_ANNOTATION, + }, + fontFamily: 'Segoe UI', + fontStyle: 0, // TODO decide if we set the fontStyle property to 0 or if we omit it + labelWidth: 101, + verticalAlign: 'top', + // FIXME values were inverted in the mxGraph implementation, this was probably wrong as they were set like this in StyleConfigurator + // 'textAnnotation;fontFamily=Segoe UI;verticalAlign=top;labelWidth=101;labelPosition=top;verticalLabelPosition=left' + labelPosition: 'left', + verticalLabelPosition: 'top', + // end of fixme + }); }); }); @@ -550,7 +564,22 @@ describe('Style Computer', () => { }); it('with label bounds', () => { const shape = newShape(newShapeBpmnElement(ShapeBpmnElementKind.GROUP), newLabel({ name: 'Roboto' }, new Bounds(50, 50, 100, 100))); - expect(computeStyle(shape)).toBe('group;fontFamily=Roboto;verticalAlign=top;align=center;labelWidth=101;labelPosition=top;verticalLabelPosition=left'); + expect(computeStyle(shape)).toStrictEqual({ + align: 'center', + baseStyleNames: ['group'], + bpmn: { + kind: ShapeBpmnElementKind.GROUP, + }, + fontFamily: 'Roboto', + fontStyle: 0, // TODO decide if we set the fontStyle property to 0 or if we omit it + labelWidth: 101, + verticalAlign: 'top', + // FIXME values were inverted in the mxGraph implementation, this was probably wrong as they were set like this in StyleConfigurator + // 'group;fontFamily=Roboto;verticalAlign=top;align=center;labelWidth=101;labelPosition=top;verticalLabelPosition=left' + labelPosition: 'left', + verticalLabelPosition: 'top', + // end of fixme + }); }); }); From 52c396fbb4ec965f67d6c785f4df817c467c60f1 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sat, 3 Dec 2022 17:40:59 +0100 Subject: [PATCH 095/132] wip fix style-utils.test.ts --- src/component/mxgraph/renderer/style-utils.ts | 13 +++++++------ .../component/mxgraph/renderer/style-utils.test.ts | 6 +++--- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/component/mxgraph/renderer/style-utils.ts b/src/component/mxgraph/renderer/style-utils.ts index 1dac837bed..8bacebde80 100644 --- a/src/component/mxgraph/renderer/style-utils.ts +++ b/src/component/mxgraph/renderer/style-utils.ts @@ -41,7 +41,8 @@ export function computeAllBpmnClassNames(style: BPMNCellStyle, isLabel: boolean) const classes: string[] = []; // TODO style.bpmn.kind could be omit by considering the first element of style.baseStyleNames (this would restore the previous behavior) - const bpmnElementKind = style.bpmn.kind; + // if kind is not set, check shape: bpmn.message-flow-icon --> message-flow-icon + const bpmnElementKind = style.bpmn?.kind ?? style.shape?.replace(/bpmn./g, ''); // eslint-disable-next-line no-console console.info('computeAllBpmnClassNames - style', style); // eslint-disable-next-line no-console @@ -58,20 +59,20 @@ export function computeAllBpmnClassNames(style: BPMNCellStyle, isLabel: boolean) classes.push(computeBpmnBaseClassName(bpmnElementKind)); - if (style.bpmn.eventDefinitionKind) { + if (style.bpmn?.eventDefinitionKind) { classes.push(`bpmn-event-def-${style.bpmn.eventDefinitionKind}`); } - if (style.bpmn.gatewayKind) { + if (style.bpmn?.gatewayKind) { classes.push(`bpmn-gateway-kind-${style.bpmn.gatewayKind.toLowerCase()}`); } - if (style.bpmn.isNonInitiating !== undefined) { + if (style.bpmn?.isNonInitiating !== undefined) { // message flow icon classes.push(style.bpmn.isNonInitiating ? 'bpmn-icon-non-initiating' : 'bpmn-icon-initiating'); } - if (style.bpmn.subProcessKind) { + if (style.bpmn?.subProcessKind) { classes.push(`bpmn-sub-process-${style.bpmn.subProcessKind.toLowerCase()}`); } - if (style.bpmn.globalTaskKind) { + if (style.bpmn?.globalTaskKind) { classes.push(computeBpmnBaseClassName(style.bpmn.globalTaskKind)); } if (isLabel) { diff --git a/test/unit/component/mxgraph/renderer/style-utils.test.ts b/test/unit/component/mxgraph/renderer/style-utils.test.ts index 89c471597d..13ef2ae7ad 100644 --- a/test/unit/component/mxgraph/renderer/style-utils.test.ts +++ b/test/unit/component/mxgraph/renderer/style-utils.test.ts @@ -51,7 +51,7 @@ describe('compute all css class names based on style input', () => { ${{ bpmn: { kind: ShapeBpmnElementKind.CALL_ACTIVITY, globalTaskKind: ShapeBpmnElementKind.GLOBAL_TASK } }} | ${false} | ${['bpmn-type-activity', 'bpmn-call-activity', 'bpmn-global-task']} ${{ bpmn: { kind: ShapeBpmnElementKind.CALL_ACTIVITY, globalTaskKind: ShapeBpmnElementKind.GLOBAL_TASK_MANUAL } }} | ${true} | ${['bpmn-type-activity', 'bpmn-call-activity', 'bpmn-global-manual-task', 'bpmn-label']} ${{ bpmn: { kind: ShapeBpmnElementKind.EVENT_BOUNDARY } }} | ${true} | ${['bpmn-type-event', 'bpmn-boundary-event', 'bpmn-label']} - ${'boundaryEvent;bpmn.eventDefinitionKind=cancel;bpmn.isInterrupting=true'} | ${true} | ${['bpmn-type-event', 'bpmn-boundary-event', 'bpmn-event-def-cancel', 'bpmn-label']} + ${{ bpmn: { kind: ShapeBpmnElementKind.EVENT_BOUNDARY, eventDefinitionKind: ShapeBpmnEventDefinitionKind.CANCEL } }} | ${true} | ${['bpmn-type-event', 'bpmn-boundary-event', 'bpmn-event-def-cancel', 'bpmn-label']} ${{ bpmn: { kind: ShapeBpmnElementKind.EVENT_INTERMEDIATE_THROW } }} | ${false} | ${['bpmn-type-event', 'bpmn-intermediate-throw-event']} ${{ bpmn: { kind: ShapeBpmnElementKind.EVENT_START, eventDefinitionKind: ShapeBpmnEventDefinitionKind.TIMER, isInterrupting: false }, fontStyle: 2 }} | ${false} | ${['bpmn-type-event', 'bpmn-start-event', 'bpmn-event-def-timer']} ${{ bpmn: { kind: ShapeBpmnElementKind.GATEWAY_EVENT_BASED } }} | ${true} | ${['bpmn-type-gateway', 'bpmn-event-based-gateway', 'bpmn-label']} @@ -64,8 +64,8 @@ describe('compute all css class names based on style input', () => { ${{ bpmn: { kind: ShapeBpmnElementKind.SUB_PROCESS, subProcessKind: ShapeBpmnSubProcessKind.EVENT } }} | ${true} | ${['bpmn-type-activity', 'bpmn-sub-process', 'bpmn-sub-process-event', 'bpmn-label']} ${{ bpmn: { kind: FlowKind.ASSOCIATION_FLOW } }} | ${true} | ${['bpmn-type-flow', 'bpmn-association', 'bpmn-label']} ${{ bpmn: { kind: FlowKind.MESSAGE_FLOW } }} | ${false} | ${['bpmn-type-flow', 'bpmn-message-flow']} - ${'sequenceFlow;default;fontStyle=4'} | ${false} | ${['bpmn-type-flow', 'bpmn-sequence-flow']} - ${'shape=bpmn.message-flow-icon'} | ${false} | ${['bpmn-message-flow-icon']} + ${{ bpmn: { kind: FlowKind.SEQUENCE_FLOW } }} | ${false} | ${['bpmn-type-flow', 'bpmn-sequence-flow']} + ${{ shape: 'bpmn.message-flow-icon' }} | ${false} | ${['bpmn-message-flow-icon']} ${'shape=bpmn.message-flow-icon;bpmn.isInitiating=non_initiating'} | ${false} | ${['bpmn-message-flow-icon', 'bpmn-icon-non-initiating']} ${'shape=bpmn.message-flow-icon;bpmn.isInitiating=initiating'} | ${true} | ${['bpmn-message-flow-icon', 'bpmn-icon-initiating', 'bpmn-label']} `( From 0481c5c345ef2c92496b91f6ef9f5f28fe2292cb Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sat, 3 Dec 2022 17:44:24 +0100 Subject: [PATCH 096/132] wip fix style-utils.test.ts --- test/unit/component/mxgraph/renderer/style-utils.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/unit/component/mxgraph/renderer/style-utils.test.ts b/test/unit/component/mxgraph/renderer/style-utils.test.ts index 13ef2ae7ad..5ff62d33ea 100644 --- a/test/unit/component/mxgraph/renderer/style-utils.test.ts +++ b/test/unit/component/mxgraph/renderer/style-utils.test.ts @@ -66,8 +66,8 @@ describe('compute all css class names based on style input', () => { ${{ bpmn: { kind: FlowKind.MESSAGE_FLOW } }} | ${false} | ${['bpmn-type-flow', 'bpmn-message-flow']} ${{ bpmn: { kind: FlowKind.SEQUENCE_FLOW } }} | ${false} | ${['bpmn-type-flow', 'bpmn-sequence-flow']} ${{ shape: 'bpmn.message-flow-icon' }} | ${false} | ${['bpmn-message-flow-icon']} - ${'shape=bpmn.message-flow-icon;bpmn.isInitiating=non_initiating'} | ${false} | ${['bpmn-message-flow-icon', 'bpmn-icon-non-initiating']} - ${'shape=bpmn.message-flow-icon;bpmn.isInitiating=initiating'} | ${true} | ${['bpmn-message-flow-icon', 'bpmn-icon-initiating', 'bpmn-label']} + ${{ bpmn: { isNonInitiating: true }, shape: 'bpmn.message-flow-icon' }} | ${false} | ${['bpmn-message-flow-icon', 'bpmn-icon-non-initiating']} + ${{ bpmn: { isNonInitiating: false }, shape: 'bpmn.message-flow-icon' }} | ${true} | ${['bpmn-message-flow-icon', 'bpmn-icon-initiating', 'bpmn-label']} `( // TODO find a way to correctly display the style object 'style="$style" / isLabel=$isLabel', From 8374b01bcd1febc59411b63ce6557c01c6df5051 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sat, 3 Dec 2022 17:50:12 +0100 Subject: [PATCH 097/132] integration test: fix types errors --- test/integration/matchers/toBeEdge/index.ts | 11 ++++++----- test/integration/matchers/toBeShape/index.ts | 2 +- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/test/integration/matchers/toBeEdge/index.ts b/test/integration/matchers/toBeEdge/index.ts index 4f28bb5100..aeac9bfd3b 100644 --- a/test/integration/matchers/toBeEdge/index.ts +++ b/test/integration/matchers/toBeEdge/index.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { constants } from '@maxgraph/core'; +import type { ShapeValue } from '@maxgraph/core'; import type { ExpectedStateStyle, ExpectedCell } from '../matcher-utils'; import { buildCommonExpectedStateStyle, buildCellMatcher, buildReceivedCellWithCommonAttributes } from '../matcher-utils'; @@ -27,8 +27,8 @@ import { BpmnShapeIdentifier } from '../../../../src/component/mxgraph/style'; function buildExpectedStateStyle(expectedModel: ExpectedEdgeModelElement): ExpectedStateStyle { const expectedStateStyle = buildCommonExpectedStateStyle(expectedModel); - expectedStateStyle.verticalAlign = expectedModel.verticalAlign ? expectedModel.verticalAlign : constants.ALIGN.TOP; - expectedStateStyle.align = constants.ALIGN.CENTER; + expectedStateStyle.verticalAlign = expectedModel.verticalAlign ? expectedModel.verticalAlign : 'top'; + expectedStateStyle.align = 'center'; expectedStateStyle.strokeWidth = 1.5; expectedStateStyle.startArrow = expectedModel.startArrow; expectedStateStyle.endArrow = expectedModel.endArrow; @@ -66,7 +66,8 @@ function buildExpectedCell(id: string, expectedModel: ExpectedEdgeModelElement | { value: undefined, style: { - shape: BpmnShapeIdentifier.MESSAGE_FLOW_ICON, + // TODO remove forcing type when maxGraph fixes its types + shape: BpmnShapeIdentifier.MESSAGE_FLOW_ICON, bpmn: { isNonInitiating: expectedModel.messageVisibleKind === MessageVisibleKind.NON_INITIATING }, }, id: `messageFlowIcon_of_${id}`, @@ -87,7 +88,7 @@ export function toBeSequenceFlow(this: MatcherContext, received: string, expecte } export function toBeMessageFlow(this: MatcherContext, received: string, expected: ExpectedEdgeModelElement): CustomMatcherResult { - return buildEdgeMatcher('toBeMessageFlow', this, received, { ...expected, kind: FlowKind.MESSAGE_FLOW, startArrow: constants.ARROW.OVAL, endArrow: 'blockThin' }); + return buildEdgeMatcher('toBeMessageFlow', this, received, { ...expected, kind: FlowKind.MESSAGE_FLOW, startArrow: 'oval', endArrow: 'blockThin' }); } export function toBeAssociationFlow(this: MatcherContext, received: string, expected: ExpectedEdgeModelElement): CustomMatcherResult { diff --git a/test/integration/matchers/toBeShape/index.ts b/test/integration/matchers/toBeShape/index.ts index 6bc570a5bd..de3c293185 100644 --- a/test/integration/matchers/toBeShape/index.ts +++ b/test/integration/matchers/toBeShape/index.ts @@ -63,7 +63,7 @@ function buildExpectedStateStyle(expectedModel: ExpectedShapeModelElement): Expe const expectedStateStyle = buildCommonExpectedStateStyle(expectedModel); expectedStateStyle.shape = !expectedModel.styleShape ? expectedModel.kind : expectedModel.styleShape; expectedStateStyle.verticalAlign = expectedModel.verticalAlign ? expectedModel.verticalAlign : constants.ALIGN.MIDDLE; - expectedStateStyle.align = expectedModel.align ? expectedModel.align : constants.ALIGN.CENTER; + expectedStateStyle.align = expectedModel.align ? expectedModel.align : 'center'; expectedStateStyle.strokeWidth = expectedStrokeWidth(expectedModel.kind); expectedStateStyle.fillColor = [ShapeBpmnElementKind.LANE, ShapeBpmnElementKind.POOL, ShapeBpmnElementKind.TEXT_ANNOTATION, ShapeBpmnElementKind.GROUP].includes( From cb99e4013b0363f28aeb5c041b6031c17481aad9 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sat, 3 Dec 2022 17:57:29 +0100 Subject: [PATCH 098/132] StyleConfigurator: fix typo in TODO --- src/component/mxgraph/config/StyleConfigurator.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/component/mxgraph/config/StyleConfigurator.ts b/src/component/mxgraph/config/StyleConfigurator.ts index eaf7205034..a82d02f7fc 100644 --- a/src/component/mxgraph/config/StyleConfigurator.ts +++ b/src/component/mxgraph/config/StyleConfigurator.ts @@ -142,7 +142,7 @@ export class StyleConfigurator { private configurePoolStyle(): void { const style: BPMNCellStyle = { - // TODO maxgraph "TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided." constants.SHAPE.SWIMLANE + // TODO maxGraph "TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided." constants.SHAPE.SWIMLANE shape: 'swimlane', // label style verticalAlign: 'middle', @@ -158,7 +158,7 @@ export class StyleConfigurator { private configureLaneStyle(): void { const style: BPMNCellStyle = { - // TODO maxgraph "TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided." constants.SHAPE.SWIMLANE + // TODO maxGraph "TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided." constants.SHAPE.SWIMLANE shape: 'swimlane', // label style verticalAlign: 'middle', From 67f329a7ed318318ca67c894c1f653052e4bac27 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sat, 3 Dec 2022 17:58:10 +0100 Subject: [PATCH 099/132] integration test: fix types errors --- test/integration/matchers/matcher-utils.ts | 10 +++++----- test/integration/matchers/toBeShape/index.ts | 8 +++++--- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/test/integration/matchers/matcher-utils.ts b/test/integration/matchers/matcher-utils.ts index cb52c7c7c7..ceb7142864 100644 --- a/test/integration/matchers/matcher-utils.ts +++ b/test/integration/matchers/matcher-utils.ts @@ -14,13 +14,13 @@ * limitations under the License. */ import type { Cell, Geometry, AlignValue, VAlignValue, ArrowType, ShapeValue } from '@maxgraph/core'; -import { constants } from '@maxgraph/core'; import MatcherContext = jest.MatcherContext; import CustomMatcherResult = jest.CustomMatcherResult; import type { ExpectedEdgeModelElement, ExpectedFont, ExpectedShapeModelElement } from '../helpers/model-expect'; import { bpmnVisualization } from '../helpers/model-expect'; +import { FONT } from '../../../src/bpmn-visualization'; import type { MaxGraphCustomOverlay, MaxGraphCustomOverlayStyle } from '../../../src/component/mxgraph/overlay/custom-overlay'; import type { BPMNCellStyle } from '../../../src/component/mxgraph/renderer/StyleComputer'; @@ -111,16 +111,16 @@ export function getFontStyleValue(expectedFont: ExpectedFont): number { let value = 0; if (expectedFont) { if (expectedFont.isBold) { - value += constants.FONT.BOLD; + value += FONT.BOLD; } if (expectedFont.isItalic) { - value += constants.FONT.ITALIC; + value += FONT.ITALIC; } if (expectedFont.isStrikeThrough) { - value += constants.FONT.STRIKETHROUGH; + value += FONT.STRIKETHROUGH; } if (expectedFont.isUnderline) { - value += constants.FONT.UNDERLINE; + value += FONT.UNDERLINE; } } return value ? value : undefined; diff --git a/test/integration/matchers/toBeShape/index.ts b/test/integration/matchers/toBeShape/index.ts index de3c293185..e0d32adc93 100644 --- a/test/integration/matchers/toBeShape/index.ts +++ b/test/integration/matchers/toBeShape/index.ts @@ -62,7 +62,7 @@ function expectedStrokeWidth(kind: ShapeBpmnElementKind): number { function buildExpectedStateStyle(expectedModel: ExpectedShapeModelElement): ExpectedStateStyle { const expectedStateStyle = buildCommonExpectedStateStyle(expectedModel); expectedStateStyle.shape = !expectedModel.styleShape ? expectedModel.kind : expectedModel.styleShape; - expectedStateStyle.verticalAlign = expectedModel.verticalAlign ? expectedModel.verticalAlign : constants.ALIGN.MIDDLE; + expectedStateStyle.verticalAlign = expectedModel.verticalAlign ? expectedModel.verticalAlign : 'middle'; expectedStateStyle.align = expectedModel.align ? expectedModel.align : 'center'; expectedStateStyle.strokeWidth = expectedStrokeWidth(expectedModel.kind); @@ -142,12 +142,14 @@ export function toBeShape(this: MatcherContext, received: string, expected: Expe export function toBePool(this: MatcherContext, received: string, expected: ExpectedShapeModelElement): CustomMatcherResult { const isHorizontal = 'isHorizontal' in expected ? expected.isHorizontal : true; - return buildShapeMatcher('toBePool', this, received, { ...expected, kind: ShapeBpmnElementKind.POOL, styleShape: constants.SHAPE.SWIMLANE, isHorizontal }); + // TODO maxGraph "TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided." constants.SHAPE.SWIMLANE + return buildShapeMatcher('toBePool', this, received, { ...expected, kind: ShapeBpmnElementKind.POOL, styleShape: 'swimlane', isHorizontal }); } export function toBeLane(this: MatcherContext, received: string, expected: ExpectedShapeModelElement): CustomMatcherResult { const isHorizontal = 'isHorizontal' in expected ? expected.isHorizontal : true; - return buildShapeMatcher('toBeLane', this, received, { ...expected, kind: ShapeBpmnElementKind.LANE, styleShape: constants.SHAPE.SWIMLANE, isHorizontal }); + // TODO maxGraph "TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided." constants.SHAPE.SWIMLANE + return buildShapeMatcher('toBeLane', this, received, { ...expected, kind: ShapeBpmnElementKind.LANE, styleShape: 'swimlane', isHorizontal }); } export function toBeCallActivity(this: MatcherContext, received: string, expected: ExpectedCallActivityModelElement): CustomMatcherResult { From d3d99609a837504472bfe725537211a3a7188b61 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sat, 3 Dec 2022 18:03:30 +0100 Subject: [PATCH 100/132] integration test: fix types errors --- test/integration/helpers/model-expect.ts | 6 +++--- test/integration/matchers/toBeShape/index.ts | 4 +++- test/integration/mxGraph.model.bpmn.elements.test.ts | 6 ++++-- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/test/integration/helpers/model-expect.ts b/test/integration/helpers/model-expect.ts index 7aa7b22f38..ec6c188b96 100644 --- a/test/integration/helpers/model-expect.ts +++ b/test/integration/helpers/model-expect.ts @@ -50,7 +50,7 @@ import { toBeTask, toBeUserTask, } from '../matchers'; -import type { ArrowType, Cell, FilterFunction, VAlignValue } from '@maxgraph/core'; +import type { AlignValue, ArrowType, Cell, FilterFunction, VAlignValue } from '@maxgraph/core'; import type { Geometry } from '@maxgraph/core'; import type { ExpectedOverlay } from '../matchers/matcher-utils'; import { getCell } from '../matchers/matcher-utils'; @@ -136,8 +136,8 @@ export interface ExpectedShapeModelElement { parentId?: string; /** Only needed when the BPMN shape doesn't exist yet (use an arbitrary shape until the final render is implemented) */ styleShape?: string; - verticalAlign?: string; - align?: string; + verticalAlign?: VAlignValue; + align?: AlignValue; markers?: ShapeBpmnMarkerKind[]; isInstantiating?: boolean; isHorizontal?: boolean; diff --git a/test/integration/matchers/toBeShape/index.ts b/test/integration/matchers/toBeShape/index.ts index e0d32adc93..49aabe2656 100644 --- a/test/integration/matchers/toBeShape/index.ts +++ b/test/integration/matchers/toBeShape/index.ts @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import type { ShapeValue } from '@maxgraph/core'; import { constants } from '@maxgraph/core'; import type { ExpectedCell, ExpectedStateStyle } from '../matcher-utils'; @@ -61,7 +62,8 @@ function expectedStrokeWidth(kind: ShapeBpmnElementKind): number { function buildExpectedStateStyle(expectedModel: ExpectedShapeModelElement): ExpectedStateStyle { const expectedStateStyle = buildCommonExpectedStateStyle(expectedModel); - expectedStateStyle.shape = !expectedModel.styleShape ? expectedModel.kind : expectedModel.styleShape; + // TODO remove forcing type when maxGraph fixes its types + expectedStateStyle.shape = ((!expectedModel.styleShape ? expectedModel.kind : expectedModel.styleShape)); expectedStateStyle.verticalAlign = expectedModel.verticalAlign ? expectedModel.verticalAlign : 'middle'; expectedStateStyle.align = expectedModel.align ? expectedModel.align : 'center'; expectedStateStyle.strokeWidth = expectedStrokeWidth(expectedModel.kind); diff --git a/test/integration/mxGraph.model.bpmn.elements.test.ts b/test/integration/mxGraph.model.bpmn.elements.test.ts index 20071b1fc8..cb74ab8771 100644 --- a/test/integration/mxGraph.model.bpmn.elements.test.ts +++ b/test/integration/mxGraph.model.bpmn.elements.test.ts @@ -14,6 +14,7 @@ * limitations under the License. */ +import type { ArrowType } from '@maxgraph/core'; import { Point, Geometry, constants } from '@maxgraph/core'; import { @@ -1247,7 +1248,8 @@ describe('mxGraph model - BPMN elements', () => { it('sequence flows', async () => { expect('default_sequence_flow_id').toBeSequenceFlow({ sequenceFlowKind: SequenceFlowKind.DEFAULT, - startArrow: MarkerIdentifier.ARROW_DASH, + // TODO remove forcing type when maxGraph fixes its types + startArrow: (MarkerIdentifier.ARROW_DASH), parentId: 'participant_1_id', font: expectedBoldFont, }); @@ -1258,7 +1260,7 @@ describe('mxGraph model - BPMN elements', () => { }); expect('conditional_sequence_flow_from_activity_id').toBeSequenceFlow({ sequenceFlowKind: SequenceFlowKind.CONDITIONAL_FROM_ACTIVITY, - startArrow: constants.ARROW.DIAMOND_THIN, + startArrow: 'diamondThin', parentId: 'participant_1_id', verticalAlign: 'bottom', }); From fd5c047359180981b995a30d4057333e2b58d324 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sat, 3 Dec 2022 18:17:42 +0100 Subject: [PATCH 101/132] integration test: make dom.css.classes.test.ts test pass --- src/component/mxgraph/GraphCellUpdater.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/component/mxgraph/GraphCellUpdater.ts b/src/component/mxgraph/GraphCellUpdater.ts index 55ff7adb89..00752b0ab8 100644 --- a/src/component/mxgraph/GraphCellUpdater.ts +++ b/src/component/mxgraph/GraphCellUpdater.ts @@ -48,7 +48,10 @@ export default class GraphCellUpdater { } const view = this.graph.getView(); const state = view.getState(cell); - (state.style as BPMNCellStyle).bpmn.extra.css.classes = cssClasses; + // TODO improve logic + const style = state.style as BPMNCellStyle; + !style.bpmn.extra && (style.bpmn.extra = { css: { classes: undefined } }); + style.bpmn.extra.css.classes = cssClasses; state.shape.redraw(); // Ensure that label classes are also updated. When there is no label, state.text is null state.text?.redraw(); From 53c7fbee42461a9aae592a33a3ac1a5e3650e55a Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sat, 3 Dec 2022 18:25:27 +0100 Subject: [PATCH 102/132] integration test: make dom.overlays.test.ts pass --- src/component/mxgraph/overlay/custom-overlay.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/mxgraph/overlay/custom-overlay.ts b/src/component/mxgraph/overlay/custom-overlay.ts index 23a1d60f90..3bbf86aec6 100644 --- a/src/component/mxgraph/overlay/custom-overlay.ts +++ b/src/component/mxgraph/overlay/custom-overlay.ts @@ -37,7 +37,7 @@ export class MaxGraphCustomOverlay extends CellOverlay { readonly style: MaxGraphCustomOverlayStyle; constructor(public label: string, options: MaxGraphCustomOverlayOptions) { - super(null, '', options.position.horizontalAlign, options.position.verticalAlign, null, 'default'); + super(null, '', options.position.horizontalAlign, options.position.verticalAlign, new Point(), 'default'); this.style = options.style; } From cced7fd91708c6362d153bd042e71c34de1df77e Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sat, 3 Dec 2022 18:59:14 +0100 Subject: [PATCH 103/132] integration test: make BpmnVisualization.test.ts pass --- src/component/mxgraph/BpmnGraph.ts | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/component/mxgraph/BpmnGraph.ts b/src/component/mxgraph/BpmnGraph.ts index 6921b3f344..bb5e059461 100644 --- a/src/component/mxgraph/BpmnGraph.ts +++ b/src/component/mxgraph/BpmnGraph.ts @@ -20,7 +20,7 @@ import { ensurePositiveValue, ensureValidZoomConfiguration } from '../helpers/va import debounce from 'lodash.debounce'; import throttle from 'lodash.throttle'; import type { CellState, Point } from '@maxgraph/core'; -import { eventUtils, GraphView, Graph, InternalEvent } from '@maxgraph/core'; +import { eventUtils, Graph, GraphView, InternalEvent } from '@maxgraph/core'; const zoomFactorIn = 1.25; const zoomFactorOut = 1 / zoomFactorIn; @@ -124,17 +124,24 @@ export class BpmnGraph extends Graph { const clientHeight = this.container.clientHeight - margin; const width = bounds.width / this.view.scale; const height = bounds.height / this.view.scale; - const scale = Math.min(maxScale, Math.min(clientWidth / width, clientHeight / height)); + let scale = Math.min(maxScale, Math.min(clientWidth / width, clientHeight / height)); this.setCurrentZoomLevel(scale); + // TODO improve implementation (the following is to make integration tests pass) + scale == 0 && (scale = 1); this.view.scaleAndTranslate( scale, - (margin + clientWidth - width * scale) / (2 * scale) - bounds.x / this.view.scale, - (margin + clientHeight - height * scale) / (2 * scale) - bounds.y / this.view.scale, + this.NaNToZero((margin + clientWidth - width * scale) / (2 * scale) - bounds.x / this.view.scale), + this.NaNToZero((margin + clientHeight - height * scale) / (2 * scale) - bounds.y / this.view.scale), ); } } + // TODO move somewhere else + find a better name + should be a util function + private NaNToZero(value: number): number { + return Number.isNaN(value) ? 0 : value; + } + /** * @internal */ From 3a373a06d2f2223c6100c40acf343a7528e43b3d Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Mon, 5 Dec 2022 10:38:42 +0100 Subject: [PATCH 104/132] remove console.info --- src/component/mxgraph/config/ShapeConfigurator.ts | 3 --- src/component/mxgraph/config/StyleConfigurator.ts | 5 ----- src/component/mxgraph/renderer/StyleComputer.ts | 13 ++++--------- src/component/mxgraph/renderer/style-utils.ts | 6 ------ 4 files changed, 4 insertions(+), 23 deletions(-) diff --git a/src/component/mxgraph/config/ShapeConfigurator.ts b/src/component/mxgraph/config/ShapeConfigurator.ts index 41f9b6bbd9..b644ba164f 100644 --- a/src/component/mxgraph/config/ShapeConfigurator.ts +++ b/src/component/mxgraph/config/ShapeConfigurator.ts @@ -99,9 +99,6 @@ export default class ShapeConfigurator { // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- TODO fix CellRenderer.registerShape call // @ts-ignore CellRenderer.registerShape(BpmnShapeIdentifier.MESSAGE_FLOW_ICON, MessageFlowIconShape); - - // eslint-disable-next-line no-console - console.info('ShapeConfigurator.registerShapes: CellRenderer.defaultShapes', CellRenderer.defaultShapes); } private initMxSvgCanvasPrototype(): void { diff --git a/src/component/mxgraph/config/StyleConfigurator.ts b/src/component/mxgraph/config/StyleConfigurator.ts index a82d02f7fc..7e79edb7c5 100644 --- a/src/component/mxgraph/config/StyleConfigurator.ts +++ b/src/component/mxgraph/config/StyleConfigurator.ts @@ -135,9 +135,6 @@ export class StyleConfigurator { private configureDefaultVertexStyle(): void { StyleConfigurator.configureCommonDefaultStyle(this.getStylesheet().getDefaultVertexStyle() as BPMNCellStyle); - - // eslint-disable-next-line no-console - console.info('StyleConfigurator: configureDefaultVertexStyle', this.getStylesheet().getDefaultVertexStyle()); } private configurePoolStyle(): void { @@ -271,8 +268,6 @@ export class StyleConfigurator { style.endArrow = undefined; StyleConfigurator.configureCommonDefaultStyle(style); - // eslint-disable-next-line no-console - console.info('StyleConfigurator: configureDefaultEdgeStyle', style); } private static configureCommonDefaultStyle(style: BPMNCellStyle): void { diff --git a/src/component/mxgraph/renderer/StyleComputer.ts b/src/component/mxgraph/renderer/StyleComputer.ts index fbb19673b6..8c8c59b6a8 100644 --- a/src/component/mxgraph/renderer/StyleComputer.ts +++ b/src/component/mxgraph/renderer/StyleComputer.ts @@ -30,13 +30,13 @@ import { } from '../../../model/bpmn/internal/shape/ShapeBpmnElement'; import { BpmnShapeIdentifier, FONT } from '../style'; import type { + AssociationDirectionKind, FlowKind, + GlobalTaskKind, + SequenceFlowKind, ShapeBpmnEventBasedGatewayKind, ShapeBpmnEventDefinitionKind, ShapeBpmnSubProcessKind, - GlobalTaskKind, - SequenceFlowKind, - AssociationDirectionKind, } from '../../../model/bpmn/internal'; import { MessageVisibleKind, ShapeBpmnCallActivityKind, ShapeBpmnElementKind, ShapeBpmnMarkerKind, ShapeUtil } from '../../../model/bpmn/internal'; import { AssociationFlow, SequenceFlow } from '../../../model/bpmn/internal/edge/flows'; @@ -80,8 +80,6 @@ export interface BPMNCellStyle extends CellStyle { */ export default class StyleComputer { computeStyle(bpmnCell: Shape | Edge, labelBounds: Bounds): BPMNCellStyle { - // eslint-disable-next-line no-console - console.info('computeStyle - bpmnCell', bpmnCell); const style: BPMNCellStyle = { bpmn: { kind: bpmnCell.bpmnElement.kind }, }; @@ -99,10 +97,7 @@ export default class StyleComputer { const fontStyleValues = StyleComputer.computeFontStyleValues(bpmnCell); const labelStyleValues = StyleComputer.computeLabelStyleValues(bpmnCell, labelBounds); - const returnedStyle = { baseStyleNames: baseStyleNames, ...style, ...fontStyleValues, ...labelStyleValues }; - // eslint-disable-next-line no-console - console.info('computeStyle - return', returnedStyle); - return returnedStyle; + return { baseStyleNames: baseStyleNames, ...style, ...fontStyleValues, ...labelStyleValues }; } private static enrichStyleWithShapeInfo(style: BPMNCellStyle, shape: Shape): void { diff --git a/src/component/mxgraph/renderer/style-utils.ts b/src/component/mxgraph/renderer/style-utils.ts index 8bacebde80..adf0539ade 100644 --- a/src/component/mxgraph/renderer/style-utils.ts +++ b/src/component/mxgraph/renderer/style-utils.ts @@ -43,10 +43,6 @@ export function computeAllBpmnClassNames(style: BPMNCellStyle, isLabel: boolean) // TODO style.bpmn.kind could be omit by considering the first element of style.baseStyleNames (this would restore the previous behavior) // if kind is not set, check shape: bpmn.message-flow-icon --> message-flow-icon const bpmnElementKind = style.bpmn?.kind ?? style.shape?.replace(/bpmn./g, ''); - // eslint-disable-next-line no-console - console.info('computeAllBpmnClassNames - style', style); - // eslint-disable-next-line no-console - console.info('computeAllBpmnClassNames - bpmnElementKind', bpmnElementKind); const typeClasses = new Map(); typeClasses.set('bpmn-type-activity', ShapeUtil.isActivity(bpmnElementKind)); @@ -78,8 +74,6 @@ export function computeAllBpmnClassNames(style: BPMNCellStyle, isLabel: boolean) if (isLabel) { classes.push('bpmn-label'); } - // eslint-disable-next-line no-console - console.info('computeAllBpmnClassNames - return', classes); return classes; } From a26421409e65bfcaa7d08da610eb7b5a9267df5e Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Mon, 5 Dec 2022 11:03:08 +0100 Subject: [PATCH 105/132] fix lint warnings --- test/integration/matchers/toBeShape/index.ts | 1 - test/integration/mxGraph.model.bpmn.elements.test.ts | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/test/integration/matchers/toBeShape/index.ts b/test/integration/matchers/toBeShape/index.ts index 49aabe2656..451291e8a1 100644 --- a/test/integration/matchers/toBeShape/index.ts +++ b/test/integration/matchers/toBeShape/index.ts @@ -14,7 +14,6 @@ * limitations under the License. */ import type { ShapeValue } from '@maxgraph/core'; -import { constants } from '@maxgraph/core'; import type { ExpectedCell, ExpectedStateStyle } from '../matcher-utils'; import { buildCellMatcher, buildCommonExpectedStateStyle, buildReceivedCellWithCommonAttributes } from '../matcher-utils'; diff --git a/test/integration/mxGraph.model.bpmn.elements.test.ts b/test/integration/mxGraph.model.bpmn.elements.test.ts index cb74ab8771..6bbaae7889 100644 --- a/test/integration/mxGraph.model.bpmn.elements.test.ts +++ b/test/integration/mxGraph.model.bpmn.elements.test.ts @@ -15,7 +15,7 @@ */ import type { ArrowType } from '@maxgraph/core'; -import { Point, Geometry, constants } from '@maxgraph/core'; +import { Point, Geometry } from '@maxgraph/core'; import { MarkerIdentifier, From a6347c696b6cddfbc661405d8cc7b9cef2e1089f Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Tue, 6 Dec 2022 19:43:19 +0100 Subject: [PATCH 106/132] StyleComputer.ts: TODO about isNonInitiating (logic, need) --- src/component/mxgraph/renderer/StyleComputer.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/component/mxgraph/renderer/StyleComputer.ts b/src/component/mxgraph/renderer/StyleComputer.ts index 8c8c59b6a8..8a4a1746dd 100644 --- a/src/component/mxgraph/renderer/StyleComputer.ts +++ b/src/component/mxgraph/renderer/StyleComputer.ts @@ -62,6 +62,7 @@ export interface BPMNCellStyle extends CellStyle { markers?: ShapeBpmnMarkerKind[]; sequenceFlowKind?: SequenceFlowKind; associationDirectionKind?: AssociationDirectionKind; + // TODO isNonInitiating: previously we add a string, this introduces extra changes. If we want to keep this, do it in the master branch isNonInitiating?: boolean; // TODO why not 'isInitiating' for consistency with other boolean value? Negate doesn't make things easier to understand extra?: { css: { From d282c5ada4420788711d06a942b78fe684d206f1 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Tue, 6 Dec 2022 08:50:38 +0100 Subject: [PATCH 107/132] StyleComputer.ts lane/pool orientation: no issue with maxGraph, the issue came from the migration --- src/component/mxgraph/renderer/StyleComputer.ts | 6 ++---- test/unit/component/mxgraph/renderer/StyleComputer.test.ts | 7 ++----- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/src/component/mxgraph/renderer/StyleComputer.ts b/src/component/mxgraph/renderer/StyleComputer.ts index 8a4a1746dd..3a1c477693 100644 --- a/src/component/mxgraph/renderer/StyleComputer.ts +++ b/src/component/mxgraph/renderer/StyleComputer.ts @@ -111,11 +111,9 @@ export default class StyleComputer { } else if (bpmnElement instanceof ShapeBpmnActivity) { this.computeActivityShapeStyle(bpmnElement, style); } else if (ShapeUtil.isPoolOrLane(bpmnElement.kind)) { - // style.horizontal is for the label + // maxGraph 'style.horizontal' is for the label // In BPMN, isHorizontal is for the Shape - // FIXME maxGraph seems inverting horizontal and vertical - // so inverting condition for now - style.horizontal = shape.isHorizontal == undefined || !shape.isHorizontal; + style.horizontal = !(shape.isHorizontal ?? true); } else if (bpmnElement instanceof ShapeBpmnEventBasedGateway) { style.bpmn.isInstantiating = bpmnElement.instantiate; style.bpmn.gatewayKind = bpmnElement.gatewayKind; diff --git a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts index 7c28acc00f..2e744249f3 100644 --- a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts +++ b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts @@ -584,12 +584,10 @@ describe('Style Computer', () => { }); describe('compute style - pool references a Process', () => { - // TODO all expected values are inverted (see implementation) it.each([ ['vertical', false, true], ['horizontal', true, false], - ['undefined', undefined, true], - // TODO undefined + ['undefined', undefined, false], ])('%s pool references a Process', (title: string, isHorizontal: boolean, expectedStyleIsHorizontal: boolean) => { const shape = newShape(newShapeBpmnElement(ShapeBpmnElementKind.POOL), undefined, isHorizontal); expect(computeStyle(shape)).toStrictEqual({ @@ -601,11 +599,10 @@ describe('Style Computer', () => { }); describe('compute style - lane', () => { - // TODO all expected values are inverted (see implementation) it.each([ ['vertical', false, true], ['horizontal', true, false], - ['undefined', undefined, true], + ['undefined', undefined, false], ])('%s lane', (title: string, isHorizontal: boolean, expectedStyleIsHorizontal: boolean) => { const shape = newShape(newShapeBpmnElement(ShapeBpmnElementKind.LANE), undefined, isHorizontal); expect(computeStyle(shape)).toStrictEqual({ From eb951f78901197f3326871ee93162d82a8b7b25c Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Tue, 6 Dec 2022 11:59:32 +0100 Subject: [PATCH 108/132] edge shapes: prevent from accessing properties of undefined object --- src/component/mxgraph/config/StyleConfigurator.ts | 1 + src/component/mxgraph/shape/edges.ts | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/component/mxgraph/config/StyleConfigurator.ts b/src/component/mxgraph/config/StyleConfigurator.ts index 7e79edb7c5..3b8bfc5074 100644 --- a/src/component/mxgraph/config/StyleConfigurator.ts +++ b/src/component/mxgraph/config/StyleConfigurator.ts @@ -284,6 +284,7 @@ export class StyleConfigurator { private configureEdgeStyles(styleKinds: T[], specificStyles: Map void>): void { styleKinds.forEach(kind => { + // TODO review if we need to set bpmn.edge (this is not enough for edge.ts) const style: BPMNCellStyle = { bpmn: { edge: {} } }; specificStyles.get(kind)(style); this.graph.getStylesheet().putCellStyle(kind.toString(), style); diff --git a/src/component/mxgraph/shape/edges.ts b/src/component/mxgraph/shape/edges.ts index b188a8f947..961f1b9bda 100644 --- a/src/component/mxgraph/shape/edges.ts +++ b/src/component/mxgraph/shape/edges.ts @@ -38,12 +38,12 @@ export class BpmnConnector extends ConnectorShape { c.setDashed(false, false); if (sourceMarker != null) { - c.setFillColor((this.style as BPMNCellStyle).bpmn.edge.startFillColor ?? this.stroke); + c.setFillColor((this.style as BPMNCellStyle).bpmn?.edge?.startFillColor ?? this.stroke); sourceMarker(); } if (targetMarker != null) { - c.setFillColor((this.style as BPMNCellStyle).bpmn.edge.endFillColor ?? this.stroke); + c.setFillColor((this.style as BPMNCellStyle).bpmn?.edge?.endFillColor ?? this.stroke); targetMarker(); } } From 77ab028c3fc8c9300a1face49dbe5df53ac634cf Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Tue, 6 Dec 2022 12:00:30 +0100 Subject: [PATCH 109/132] EXTRA maxgraph@0.1.0 fix: style computation is buggy (missing elements in accumulation) --- src/component/mxgraph/BpmnGraph.ts | 45 ++++++++++++++++++++++++++++-- 1 file changed, 43 insertions(+), 2 deletions(-) diff --git a/src/component/mxgraph/BpmnGraph.ts b/src/component/mxgraph/BpmnGraph.ts index bb5e059461..5fadf2ad82 100644 --- a/src/component/mxgraph/BpmnGraph.ts +++ b/src/component/mxgraph/BpmnGraph.ts @@ -19,8 +19,8 @@ import { FitType } from '../options'; import { ensurePositiveValue, ensureValidZoomConfiguration } from '../helpers/validators'; import debounce from 'lodash.debounce'; import throttle from 'lodash.throttle'; -import type { CellState, Point } from '@maxgraph/core'; -import { eventUtils, Graph, GraphView, InternalEvent } from '@maxgraph/core'; +import type { CellState, CellStateStyle, CellStyle, Point } from '@maxgraph/core'; +import { eventUtils, Graph, GraphView, InternalEvent, Stylesheet } from '@maxgraph/core'; const zoomFactorIn = 1.25; const zoomFactorOut = 1 / zoomFactorIn; @@ -211,6 +211,11 @@ export class BpmnGraph extends Graph { const factor = scale / this.view.scale; return [factor, scale]; } + + // TODO temp to fix maxGraph style merge issue (should be fixed in maxGraph@0.2.0) + override createStylesheet(): Stylesheet { + return new BpmnStylesheet(); + } } class BpmnGraphView extends GraphView { @@ -226,3 +231,39 @@ class BpmnGraphView extends GraphView { return source ? pts[1] : pts[pts.length - 2]; } } + +// TODO temp to fix maxGraph style merge issue (should be fixed in maxGraph@0.2.0) +class BpmnStylesheet extends Stylesheet { + override getCellStyle(cellStyle: CellStyle, defaultStyle: CellStateStyle): CellStateStyle { + let style: CellStateStyle; + + if (cellStyle.baseStyleNames && cellStyle.baseStyleNames.length > 0) { + // creates style with the given baseStyleNames. (merges from left to right) + style = cellStyle.baseStyleNames.reduce( + (acc, styleName) => { + return (acc = { + ...acc, + ...this.styles.get(styleName), + }); + }, + // here is the change + // {}, + { ...defaultStyle }, + // END of here is the change + ); + } else if (cellStyle.baseStyleNames && cellStyle.baseStyleNames.length === 0) { + // baseStyleNames is explicitly an empty array, so don't use any default styles. + style = {}; + } else { + style = { ...defaultStyle }; + } + + // Merges cellStyle into style + style = { + ...style, + ...cellStyle, + }; + + return style; + } +} From d7439e2818fba10050f72aae6fa42d6e3f0206d5 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Tue, 6 Dec 2022 19:37:54 +0100 Subject: [PATCH 110/132] EXTRA IT: explain the 'isHorizontal' mxGraph/maxGraph semantic in model-expect.ts --- test/integration/helpers/model-expect.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/test/integration/helpers/model-expect.ts b/test/integration/helpers/model-expect.ts index ec6c188b96..1b21db1dc3 100644 --- a/test/integration/helpers/model-expect.ts +++ b/test/integration/helpers/model-expect.ts @@ -140,6 +140,10 @@ export interface ExpectedShapeModelElement { align?: AlignValue; markers?: ShapeBpmnMarkerKind[]; isInstantiating?: boolean; + /** This is the value in the maxGraph model, not what is from the BPMN Shape. This applies to the maxGraph labels so the value is inverted comparing to the BPMN model. + * - Horizontal pool/lane --> false (the label is vertical) + * - Vertical pool/lane --> true (the label is horizontal) + * */ isHorizontal?: boolean; overlays?: ExpectedOverlay[]; } From e6b3dfff2417e8b03ea78574df7b8e77fc1a4949 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Tue, 6 Dec 2022 19:42:54 +0100 Subject: [PATCH 111/132] WIP model integration tests: adapt for maxGraph - tasks - gateways - call activities - unset label of shape - pool and lanes - edges - position defined as 'not a number' in bpmn diagram matcher-utils: adjust received overlays computation (set to 'undefined' to not change the 'expect model' in all tests) isHorizontal management: maybe an issue in the test utils code in the 'master' branch --- test/integration/helpers/model-expect.ts | 13 ++- test/integration/matchers/matcher-utils.ts | 32 +++---- test/integration/matchers/toBeEdge/index.ts | 48 ++++++---- test/integration/matchers/toBeShape/index.ts | 89 ++++++++++++++----- .../mxGraph.model.bpmn.elements.test.ts | 52 ++++++----- 5 files changed, 150 insertions(+), 84 deletions(-) diff --git a/test/integration/helpers/model-expect.ts b/test/integration/helpers/model-expect.ts index 1b21db1dc3..b0615e2f54 100644 --- a/test/integration/helpers/model-expect.ts +++ b/test/integration/helpers/model-expect.ts @@ -15,6 +15,7 @@ */ import type { + AssociationDirectionKind, FlowKind, MessageVisibleKind, SequenceFlowKind, @@ -22,6 +23,7 @@ import type { ShapeBpmnEventDefinitionKind, ShapeBpmnMarkerKind, ShapeBpmnSubProcessKind, + GlobalTaskKind, } from '../../../src/bpmn-visualization'; import { BpmnVisualization, ShapeBpmnElementKind } from '../../../src/bpmn-visualization'; import { @@ -50,7 +52,7 @@ import { toBeTask, toBeUserTask, } from '../matchers'; -import type { AlignValue, ArrowType, Cell, FilterFunction, VAlignValue } from '@maxgraph/core'; +import type { AlignValue, ArrowType, Cell, FilterFunction, ShapeValue, VAlignValue } from '@maxgraph/core'; import type { Geometry } from '@maxgraph/core'; import type { ExpectedOverlay } from '../matchers/matcher-utils'; import { getCell } from '../matchers/matcher-utils'; @@ -135,7 +137,7 @@ export interface ExpectedShapeModelElement { font?: ExpectedFont; parentId?: string; /** Only needed when the BPMN shape doesn't exist yet (use an arbitrary shape until the final render is implemented) */ - styleShape?: string; + styleShape?: ShapeValue | string; verticalAlign?: VAlignValue; align?: AlignValue; markers?: ShapeBpmnMarkerKind[]; @@ -157,7 +159,8 @@ export interface ExpectedSubProcessModelElement extends ExpectedShapeModelElemen } export interface ExpectedCallActivityModelElement extends ExpectedShapeModelElement { - globalTaskKind?: ShapeBpmnElementKind; + // TODO wrong type in the master branch. ShapeBpmnElementKind --> GlobalTaskKind + globalTaskKind?: GlobalTaskKind; } export interface ExpectedEdgeModelElement { @@ -176,6 +179,10 @@ export interface ExpectedSequenceFlowModelElement extends ExpectedEdgeModelEleme sequenceFlowKind?: SequenceFlowKind; } +export interface ExpectedAssociationFlowModelElement extends ExpectedEdgeModelElement { + associationDirectionKind?: AssociationDirectionKind; +} + export interface ExpectedBoundaryEventModelElement extends ExpectedEventModelElement { isInterrupting?: boolean; } diff --git a/test/integration/matchers/matcher-utils.ts b/test/integration/matchers/matcher-utils.ts index ceb7142864..26b96664a4 100644 --- a/test/integration/matchers/matcher-utils.ts +++ b/test/integration/matchers/matcher-utils.ts @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import type { Cell, Geometry, AlignValue, VAlignValue, ArrowType, ShapeValue } from '@maxgraph/core'; +import type { Cell, Geometry } from '@maxgraph/core'; import MatcherContext = jest.MatcherContext; import CustomMatcherResult = jest.CustomMatcherResult; @@ -24,22 +24,8 @@ import { FONT } from '../../../src/bpmn-visualization'; import type { MaxGraphCustomOverlay, MaxGraphCustomOverlayStyle } from '../../../src/component/mxgraph/overlay/custom-overlay'; import type { BPMNCellStyle } from '../../../src/component/mxgraph/renderer/StyleComputer'; -export interface ExpectedStateStyle extends BPMNCellStyle { - verticalAlign?: VAlignValue; - align?: AlignValue; - strokeWidth?: number; - strokeColor: string; - fillColor: string; - fontColor: string; - fontFamily: string; - fontSize: number; - fontStyle: number; - startArrow?: ArrowType; - endArrow?: ArrowType; - endSize?: number; - shape?: ShapeValue; - horizontal?: boolean; -} +// TODO remove this type +export type ExpectedStateStyle = BPMNCellStyle; export interface ExpectedCell { value?: string; @@ -129,6 +115,7 @@ export function getFontStyleValue(expectedFont: ExpectedFont): number { export function buildCommonExpectedStateStyle(expectedModel: ExpectedEdgeModelElement | ExpectedShapeModelElement): ExpectedStateStyle { const font = expectedModel.font; + // Here are the default values as defined in StyleDefault return { strokeColor: 'Black', fillColor: 'White', @@ -136,12 +123,15 @@ export function buildCommonExpectedStateStyle(expectedModel: ExpectedEdgeModelEl fontSize: font?.size ? font.size : 11, fontColor: 'Black', fontStyle: getFontStyleValue(font), - bpmn: undefined, + // TODO set basic information when removing the custom processing in buildReceivedStateStyle + // bpmn: { xxxx }, }; } function buildReceivedStateStyle(cell: Cell): ExpectedStateStyle { const stateStyle = bpmnVisualization.graph.getCellStyle(cell); + // TODO why building ExpectedStateStyle now maxGraph manage style in object. We should use 'stateStyle' directly (and remove this function) + // TODO rename into 'receivedStateStyle' (in master branch) const expectedStateStyle: ExpectedStateStyle = { verticalAlign: stateStyle.verticalAlign, align: stateStyle.align, @@ -152,7 +142,6 @@ function buildReceivedStateStyle(cell: Cell): ExpectedStateStyle { fontSize: stateStyle.fontSize, fontColor: stateStyle.fontColor, fontStyle: stateStyle.fontStyle, - bpmn: undefined, }; if (cell.edge) { @@ -161,7 +150,7 @@ function buildReceivedStateStyle(cell: Cell): ExpectedStateStyle { expectedStateStyle.endSize = stateStyle.endSize; } else { expectedStateStyle.shape = stateStyle.shape; - expectedStateStyle.horizontal = stateStyle.horizontal; + stateStyle.horizontal && (expectedStateStyle.horizontal = stateStyle.horizontal); } return expectedStateStyle; } @@ -177,8 +166,9 @@ export function buildReceivedCellWithCommonAttributes(cell: Cell): ExpectedCell state: { style: buildReceivedStateStyle(cell) }, }; + // the maxGraph API returns an empty array when there is no overlays const cellOverlays = bpmnVisualization.graph.getCellOverlays(cell) as MaxGraphCustomOverlay[]; - if (cellOverlays) { + if (cellOverlays.length > 0) { receivedCell.overlays = cellOverlays.map(cellOverlay => ({ label: cellOverlay.label, horizontalAlign: cellOverlay.align, diff --git a/test/integration/matchers/toBeEdge/index.ts b/test/integration/matchers/toBeEdge/index.ts index aeac9bfd3b..68e9e15a50 100644 --- a/test/integration/matchers/toBeEdge/index.ts +++ b/test/integration/matchers/toBeEdge/index.ts @@ -16,14 +16,15 @@ import type { ShapeValue } from '@maxgraph/core'; -import type { ExpectedStateStyle, ExpectedCell } from '../matcher-utils'; -import { buildCommonExpectedStateStyle, buildCellMatcher, buildReceivedCellWithCommonAttributes } from '../matcher-utils'; -import MatcherContext = jest.MatcherContext; -import CustomMatcherResult = jest.CustomMatcherResult; -import { FlowKind, MessageVisibleKind } from '../../../../src/model/bpmn/internal'; -import type { ExpectedEdgeModelElement, ExpectedSequenceFlowModelElement } from '../../helpers/model-expect'; +import type { ExpectedCell, ExpectedStateStyle } from '../matcher-utils'; +import { buildCellMatcher, buildCommonExpectedStateStyle, buildReceivedCellWithCommonAttributes } from '../matcher-utils'; +import { AssociationDirectionKind, FlowKind, MessageVisibleKind, SequenceFlowKind } from '../../../../src/model/bpmn/internal'; +import type { ExpectedAssociationFlowModelElement, ExpectedEdgeModelElement, ExpectedSequenceFlowModelElement } from '../../helpers/model-expect'; import { getDefaultParentId } from '../../helpers/model-expect'; import { BpmnShapeIdentifier } from '../../../../src/component/mxgraph/style'; +import type { BPMNCellStyle } from '../../../../src/component/mxgraph/renderer/StyleComputer'; +import MatcherContext = jest.MatcherContext; +import CustomMatcherResult = jest.CustomMatcherResult; function buildExpectedStateStyle(expectedModel: ExpectedEdgeModelElement): ExpectedStateStyle { const expectedStateStyle = buildCommonExpectedStateStyle(expectedModel); @@ -37,24 +38,36 @@ function buildExpectedStateStyle(expectedModel: ExpectedEdgeModelElement): Expec return expectedStateStyle; } -function buildExpectedStyle(expectedModel: ExpectedEdgeModelElement | ExpectedSequenceFlowModelElement): string { - let expectedStyle: string = expectedModel.kind; +function buildExpectedStyle(expectedModel: ExpectedEdgeModelElement | ExpectedSequenceFlowModelElement | ExpectedAssociationFlowModelElement): BPMNCellStyle { + const style: BPMNCellStyle = { bpmn: {} }; + // TODO share with edge + // let expectedStyle: string = expectedModel.kind; + style.baseStyleNames = [expectedModel.kind]; + style.bpmn.kind = expectedModel.kind; + + // let expectedStyle: string = expectedModel.kind; if ('sequenceFlowKind' in expectedModel) { - expectedStyle = expectedStyle + `;${(expectedModel as ExpectedSequenceFlowModelElement).sequenceFlowKind}`; + // expectedStyle = expectedStyle + `;${(expectedModel as ExpectedSequenceFlowModelElement).sequenceFlowKind}`; + style.baseStyleNames.push((expectedModel as ExpectedSequenceFlowModelElement).sequenceFlowKind); + } + if ('associationDirectionKind' in expectedModel) { + style.baseStyleNames.push((expectedModel as ExpectedAssociationFlowModelElement).associationDirectionKind); } - return expectedStyle + '.*'; + + // return expectedStyle + '.*'; + return style; } function buildExpectedCell(id: string, expectedModel: ExpectedEdgeModelElement | ExpectedSequenceFlowModelElement): ExpectedCell { + // TODO refactor, duplication with buildExpectedCell in shape matchers const parentId = expectedModel.parentId; - const styleRegexp = buildExpectedStyle(expectedModel); const expectedCell: ExpectedCell = { id, - value: expectedModel.label, - style: expect.stringMatching(styleRegexp), + value: expectedModel.label ?? null, // maxGraph now set to 'null', mxGraph set to 'undefined' + style: expect.objectContaining(buildExpectedStyle(expectedModel)), edge: true, vertex: false, - parent: { id: parentId ? parentId : getDefaultParentId() }, + parent: { id: parentId ? parentId : getDefaultParentId() }, // TODO use ?? instead (in master branch) state: { style: buildExpectedStateStyle(expectedModel), }, @@ -64,10 +77,11 @@ function buildExpectedCell(id: string, expectedModel: ExpectedEdgeModelElement | if (expectedModel.messageVisibleKind && expectedModel.messageVisibleKind !== MessageVisibleKind.NONE) { expectedCell.children = [ { - value: undefined, + value: null, // maxGraph now set to 'null', mxGraph set to 'undefined' style: { // TODO remove forcing type when maxGraph fixes its types shape: BpmnShapeIdentifier.MESSAGE_FLOW_ICON, + // TODO duplicated logic to compute the 'isNonInitiating' property. Update the expectedModel to store a boolean instead of a string bpmn: { isNonInitiating: expectedModel.messageVisibleKind === MessageVisibleKind.NON_INITIATING }, }, id: `messageFlowIcon_of_${id}`, @@ -84,6 +98,7 @@ function buildEdgeMatcher(matcherName: string, matcherContext: MatcherContext, r } export function toBeSequenceFlow(this: MatcherContext, received: string, expected: ExpectedSequenceFlowModelElement): CustomMatcherResult { + expected.sequenceFlowKind ??= SequenceFlowKind.NORMAL; return buildEdgeMatcher('toBeSequenceFlow', this, received, { ...expected, kind: FlowKind.SEQUENCE_FLOW, endArrow: 'blockThin' }); } @@ -91,6 +106,7 @@ export function toBeMessageFlow(this: MatcherContext, received: string, expected return buildEdgeMatcher('toBeMessageFlow', this, received, { ...expected, kind: FlowKind.MESSAGE_FLOW, startArrow: 'oval', endArrow: 'blockThin' }); } -export function toBeAssociationFlow(this: MatcherContext, received: string, expected: ExpectedEdgeModelElement): CustomMatcherResult { +export function toBeAssociationFlow(this: MatcherContext, received: string, expected: ExpectedAssociationFlowModelElement): CustomMatcherResult { + expected.associationDirectionKind ??= AssociationDirectionKind.NONE; return buildEdgeMatcher('toBeAssociationFlow', this, received, { ...expected, kind: FlowKind.ASSOCIATION_FLOW }); } diff --git a/test/integration/matchers/toBeShape/index.ts b/test/integration/matchers/toBeShape/index.ts index 451291e8a1..630f8bd3cb 100644 --- a/test/integration/matchers/toBeShape/index.ts +++ b/test/integration/matchers/toBeShape/index.ts @@ -27,9 +27,10 @@ import type { ExpectedSubProcessModelElement, } from '../../helpers/model-expect'; import { getDefaultParentId } from '../../helpers/model-expect'; -import { ShapeBpmnElementKind } from '../../../../src/model/bpmn/internal'; +import { ShapeBpmnElementKind, ShapeBpmnEventBasedGatewayKind } from '../../../../src/model/bpmn/internal'; import MatcherContext = jest.MatcherContext; import CustomMatcherResult = jest.CustomMatcherResult; +import type { BPMNCellStyle } from '../../../../src/component/mxgraph/renderer/StyleComputer'; function expectedStrokeWidth(kind: ShapeBpmnElementKind): number { return [ @@ -80,6 +81,10 @@ function buildExpectedStateStyle(expectedModel: ExpectedShapeModelElement): Expe return expectedStateStyle; } +/** + * Here we don't check all properties + * @param expectedModel + */ function buildExpectedStyle( expectedModel: | ExpectedShapeModelElement @@ -89,40 +94,55 @@ function buildExpectedStyle( | ExpectedBoundaryEventModelElement | ExpectedEventBasedGatewayModelElement | ExpectedCallActivityModelElement, -): string { - let expectedStyle: string = expectedModel.kind; +): BPMNCellStyle { + const style: BPMNCellStyle = { bpmn: {} }; + // TODO share with edge + // let expectedStyle: string = expectedModel.kind; + style.baseStyleNames = [expectedModel.kind]; + style.bpmn.kind = expectedModel.kind; + if ('eventDefinitionKind' in expectedModel) { - expectedStyle = expectedStyle + `.*bpmn.eventDefinitionKind=${expectedModel.eventDefinitionKind}`; + // expectedStyle = expectedStyle + `.*bpmn.eventDefinitionKind=${expectedModel.eventDefinitionKind}`; + style.bpmn.eventDefinitionKind = expectedModel.eventDefinitionKind; } if ('subProcessKind' in expectedModel) { - expectedStyle = expectedStyle + `.*bpmn.subProcessKind=${expectedModel.subProcessKind}`; + // expectedStyle = expectedStyle + `.*bpmn.subProcessKind=${expectedModel.subProcessKind}`; + style.bpmn.subProcessKind = expectedModel.subProcessKind; } if ('globalTaskKind' in expectedModel) { - expectedStyle = expectedStyle + `.*bpmn.globalTaskKind=${expectedModel.globalTaskKind}`; + // expectedStyle = expectedStyle + `.*bpmn.globalTaskKind=${expectedModel.globalTaskKind}`; + style.bpmn.globalTaskKind = expectedModel.globalTaskKind; } if (expectedModel.isInstantiating !== undefined) { - expectedStyle = expectedStyle + `.*bpmn.isInstantiating=${expectedModel.isInstantiating}`; + // expectedStyle = expectedStyle + `.*bpmn.isInstantiating=${expectedModel.isInstantiating}`; + style.bpmn.isInstantiating = expectedModel.isInstantiating; } - if (expectedModel.markers?.length > 0) { - expectedStyle = expectedStyle + `.*bpmn.markers=${expectedModel.markers.join(',')}`; + // if (expectedModel.markers?.length > 0) { + // expectedStyle = expectedStyle + `.*bpmn.markers=${expectedModel.markers.join(',')}`; + // } + if (expectedModel.markers) { + style.bpmn.markers = expectedModel.markers; } if ('isInterrupting' in expectedModel) { - expectedStyle = expectedStyle + `.*bpmn.isInterrupting=${expectedModel.isInterrupting}`; + // expectedStyle = expectedStyle + `.*bpmn.isInterrupting=${expectedModel.isInterrupting}`; + style.bpmn.isInterrupting = expectedModel.isInterrupting; } if ('gatewayKind' in expectedModel) { - expectedStyle = expectedStyle + `.*bpmn.gatewayKind=${expectedModel.gatewayKind}`; + // expectedStyle = expectedStyle + `.*bpmn.gatewayKind=${expectedModel.gatewayKind}`; + style.bpmn.gatewayKind = expectedModel.gatewayKind; } - return expectedStyle + '.*'; + // return expectedStyle + '.*'; + + return style; } function buildExpectedCell(id: string, expectedModel: ExpectedShapeModelElement): ExpectedCell { + // TODO refactor, duplication with buildExpectedCell in edge matchers const parentId = expectedModel.parentId; - const styleRegexp = buildExpectedStyle(expectedModel); - return { id, - value: expectedModel.label, - style: expect.stringMatching(styleRegexp), + value: expectedModel.label ?? null, // maxGraph now set to 'null', mxGraph set to 'undefined' + style: expect.objectContaining(buildExpectedStyle(expectedModel)), edge: false, vertex: true, parent: { id: parentId ? parentId : getDefaultParentId() }, @@ -141,55 +161,79 @@ export function toBeShape(this: MatcherContext, received: string, expected: Expe return buildShapeMatcher('toBeShape', this, received, expected); } -export function toBePool(this: MatcherContext, received: string, expected: ExpectedShapeModelElement): CustomMatcherResult { - const isHorizontal = 'isHorizontal' in expected ? expected.isHorizontal : true; +function buildContainerMatcher(matcherName: string, matcherContext: MatcherContext, received: string, expected: ExpectedShapeModelElement): CustomMatcherResult { + // const isHorizontal = 'isHorizontal' in expected ? expected.isHorizontal : false; + 'isHorizontal' in expected && (expected.isHorizontal = expected.isHorizontal); + // TODO maxGraph "TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided." constants.SHAPE.SWIMLANE - return buildShapeMatcher('toBePool', this, received, { ...expected, kind: ShapeBpmnElementKind.POOL, styleShape: 'swimlane', isHorizontal }); + return buildShapeMatcher(matcherName, matcherContext, received, { ...expected, styleShape: 'swimlane' }); +} + +export function toBePool(this: MatcherContext, received: string, expected: ExpectedShapeModelElement): CustomMatcherResult { + return buildContainerMatcher('toBePool', this, received, { ...expected, kind: ShapeBpmnElementKind.POOL }); } export function toBeLane(this: MatcherContext, received: string, expected: ExpectedShapeModelElement): CustomMatcherResult { - const isHorizontal = 'isHorizontal' in expected ? expected.isHorizontal : true; - // TODO maxGraph "TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided." constants.SHAPE.SWIMLANE - return buildShapeMatcher('toBeLane', this, received, { ...expected, kind: ShapeBpmnElementKind.LANE, styleShape: 'swimlane', isHorizontal }); + return buildContainerMatcher('toBeLane', this, received, { ...expected, kind: ShapeBpmnElementKind.LANE }); } export function toBeCallActivity(this: MatcherContext, received: string, expected: ExpectedCallActivityModelElement): CustomMatcherResult { + // TODO introduce common code for activity kinds + expected.markers ??= []; return buildShapeMatcher('toBeCallActivity', this, received, { ...expected, kind: ShapeBpmnElementKind.CALL_ACTIVITY }); } export function toBeSubProcess(this: MatcherContext, received: string, expected: ExpectedSubProcessModelElement): CustomMatcherResult { + // TODO introduce common code for activity kinds + expected.markers ??= []; return buildShapeMatcher('toBeSubProcess', this, received, { ...expected, kind: ShapeBpmnElementKind.SUB_PROCESS }); } export function toBeTask(this: MatcherContext, received: string, expected: ExpectedShapeModelElement): CustomMatcherResult { + // TODO introduce common code for activity kinds + expected.markers ??= []; return buildShapeMatcher('toBeTask', this, received, { ...expected, kind: ShapeBpmnElementKind.TASK }); } export function toBeServiceTask(this: MatcherContext, received: string, expected: ExpectedShapeModelElement): CustomMatcherResult { + // TODO introduce common code for activity kinds + expected.markers ??= []; return buildShapeMatcher('toBeServiceTask', this, received, { ...expected, kind: ShapeBpmnElementKind.TASK_SERVICE }); } export function toBeUserTask(this: MatcherContext, received: string, expected: ExpectedShapeModelElement): CustomMatcherResult { + // TODO introduce common code for activity kinds + expected.markers ??= []; return buildShapeMatcher('toBeUserTask', this, received, { ...expected, kind: ShapeBpmnElementKind.TASK_USER }); } export function toBeReceiveTask(this: MatcherContext, received: string, expected: ExpectedShapeModelElement): CustomMatcherResult { + // TODO introduce common code for activity kinds + expected.markers ??= []; return buildShapeMatcher('toBeReceiveTask', this, received, { ...expected, kind: ShapeBpmnElementKind.TASK_RECEIVE }); } export function toBeSendTask(this: MatcherContext, received: string, expected: ExpectedShapeModelElement): CustomMatcherResult { + // TODO introduce common code for activity kinds + expected.markers ??= []; return buildShapeMatcher('toBeSendTask', this, received, { ...expected, kind: ShapeBpmnElementKind.TASK_SEND }); } export function toBeManualTask(this: MatcherContext, received: string, expected: ExpectedShapeModelElement): CustomMatcherResult { + // TODO introduce common code for activity kinds + expected.markers ??= []; return buildShapeMatcher('toBeManualTask', this, received, { ...expected, kind: ShapeBpmnElementKind.TASK_MANUAL }); } export function toBeScriptTask(this: MatcherContext, received: string, expected: ExpectedShapeModelElement): CustomMatcherResult { + // TODO introduce common code for activity kinds + expected.markers ??= []; return buildShapeMatcher('toBeScriptTask', this, received, { ...expected, kind: ShapeBpmnElementKind.TASK_SCRIPT }); } export function toBeBusinessRuleTask(this: MatcherContext, received: string, expected: ExpectedShapeModelElement): CustomMatcherResult { + // TODO introduce common code for activity kinds + expected.markers ??= []; return buildShapeMatcher('toBeBusinessRuleTask', this, received, { ...expected, kind: ShapeBpmnElementKind.TASK_BUSINESS_RULE }); } @@ -218,5 +262,6 @@ export function toBeBoundaryEvent(this: MatcherContext, received: string, expect } export function toBeEventBasedGateway(this: MatcherContext, received: string, expected: ExpectedEventBasedGatewayModelElement): CustomMatcherResult { + expected.gatewayKind ??= ShapeBpmnEventBasedGatewayKind.None; return buildShapeMatcher('toBeEventBasedGateway', this, received, { ...expected, kind: ShapeBpmnElementKind.GATEWAY_EVENT_BASED }); } diff --git a/test/integration/mxGraph.model.bpmn.elements.test.ts b/test/integration/mxGraph.model.bpmn.elements.test.ts index 6bbaae7889..a02e066403 100644 --- a/test/integration/mxGraph.model.bpmn.elements.test.ts +++ b/test/integration/mxGraph.model.bpmn.elements.test.ts @@ -47,7 +47,8 @@ describe('mxGraph model - BPMN elements', () => { }; describe('BPMN containers', () => { - const minimalPoolModelElement: ExpectedShapeModelElement = { isHorizontal: true }; + // TODO change isHorizontal value for maxGraph, but the logic is probably wrong in 'master' (convert integer into boolean) + const minimalPoolModelElement: ExpectedShapeModelElement = {}; it('pool', async () => { expect('participant_1_id').toBePool({ ...minimalPoolModelElement, label: 'Pool 1' }); expect('participant_2_id').toBePool(minimalPoolModelElement); @@ -600,23 +601,22 @@ describe('mxGraph model - BPMN elements', () => { }); it('Elements in expanded subprocess', async () => { - expect('start_event_in_sub_process_id').toBeShape({ - kind: ShapeBpmnElementKind.EVENT_START, + expect('start_event_in_sub_process_id').toBeStartEvent({ + eventDefinitionKind: ShapeBpmnEventDefinitionKind.NONE, label: 'Start Event In Sub-Process', parentId: 'expanded_embedded_sub_process_id', - verticalAlign: 'top', }); - expect('task_in_sub_process_id').toBeShape({ + expect('task_in_sub_process_id').toBeTask({ kind: ShapeBpmnElementKind.TASK, label: 'Task In Sub-Process', parentId: 'expanded_embedded_sub_process_id', verticalAlign: 'middle', }); - expect('end_event_in_sub_process_id').toBeShape({ - kind: ShapeBpmnElementKind.EVENT_END, + expect('end_event_in_sub_process_id').toBeEndEvent({ + eventDefinitionKind: ShapeBpmnEventDefinitionKind.NONE, label: 'End Event In Sub-Process', parentId: 'expanded_embedded_sub_process_id', - verticalAlign: 'top', + verticalAlign: 'bottom', }); expect('sequence_flow_in_sub_process_1_id').toBeSequenceFlow({ parentId: 'expanded_embedded_sub_process_id', @@ -822,6 +822,7 @@ describe('mxGraph model - BPMN elements', () => { it('Collapsed', async () => { expect('collapsed_call_activity_id').toBeCallActivity({ label: 'Collapsed Call Activity', + markers: [ShapeBpmnMarkerKind.EXPAND], parentId: 'participant_1_id', verticalAlign: 'top', }); @@ -1432,7 +1433,8 @@ describe('mxGraph model - BPMN elements', () => { bpmnVisualization.load(readFileSync('../fixtures/bpmn/model-vertical-pool-lanes-sub_lanes.bpmn')); // pool - const minimalPoolModelElement: ExpectedShapeModelElement = { isHorizontal: false }; + // TODO change isHorizontal value for maxGraph, but the logic is probably wrong in 'master' (convert integer into boolean) + const minimalPoolModelElement: ExpectedShapeModelElement = { isHorizontal: true }; expect('Participant_Vertical_With_Lanes').toBePool({ ...minimalPoolModelElement, label: 'Vertical Pool With Lanes' }); // lane @@ -1476,19 +1478,25 @@ describe('mxGraph model - BPMN elements', () => { }); it('Parse a diagram with numbers not parsable as number', () => { - bpmnVisualization.load(readFileSync('../fixtures/bpmn/xml-parsing/special/simple-start-task-end_numbers_not_parsable_as_number.bpmn')); - - expect('Activity_1').toBeCellWithParentAndGeometry({ - parentId: defaultParentId, - geometry: new Geometry( - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore malformed source, conversion result - 'not_a_number0', // from 'not_a_number' - 'not a number too0', // from 'not a number too' - -100, - -80, - ), - }); + // TODO change in maxGraph, throw 'Error: Invalid x supplied'. bpmn-visualization should handle it + // capture the error and rethrow it with a convenient + // OR validate the values during parsing + + expect(() => bpmnVisualization.load(readFileSync('../fixtures/bpmn/xml-parsing/special/simple-start-task-end_numbers_not_parsable_as_number.bpmn'))).toThrow( + `Invalid x supplied.`, + ); + // bpmnVisualization.load(readFileSync('../fixtures/bpmn/xml-parsing/special/simple-start-task-end_numbers_not_parsable_as_number.bpmn')); + // expect('Activity_1').toBeCellWithParentAndGeometry({ + // parentId: defaultParentId, + // geometry: new Geometry( + // // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // // @ts-ignore malformed source, conversion result + // 'not_a_number0', // from 'not_a_number' + // 'not a number too0', // from 'not a number too' + // -100, + // -80, + // ), + // }); }); }); From fda5072a84d0f8b16cb6d6079f0ffe13a5ba5f13 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Tue, 6 Dec 2022 19:03:27 +0100 Subject: [PATCH 112/132] WIP model integration tests: adapt for maxGraph - filter descendants (behaviour change?) --- test/integration/helpers/model-expect.ts | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/test/integration/helpers/model-expect.ts b/test/integration/helpers/model-expect.ts index b0615e2f54..c387b61e9f 100644 --- a/test/integration/helpers/model-expect.ts +++ b/test/integration/helpers/model-expect.ts @@ -17,13 +17,13 @@ import type { AssociationDirectionKind, FlowKind, + GlobalTaskKind, MessageVisibleKind, SequenceFlowKind, ShapeBpmnEventBasedGatewayKind, ShapeBpmnEventDefinitionKind, ShapeBpmnMarkerKind, ShapeBpmnSubProcessKind, - GlobalTaskKind, } from '../../../src/bpmn-visualization'; import { BpmnVisualization, ShapeBpmnElementKind } from '../../../src/bpmn-visualization'; import { @@ -52,8 +52,7 @@ import { toBeTask, toBeUserTask, } from '../matchers'; -import type { AlignValue, ArrowType, Cell, FilterFunction, ShapeValue, VAlignValue } from '@maxgraph/core'; -import type { Geometry } from '@maxgraph/core'; +import type { AlignValue, ArrowType, Cell, FilterFunction, Geometry, ShapeValue, VAlignValue } from '@maxgraph/core'; import type { ExpectedOverlay } from '../matchers/matcher-utils'; import { getCell } from '../matchers/matcher-utils'; import type { BPMNCellStyle } from '../../../src/component/mxgraph/renderer/StyleComputer'; @@ -200,13 +199,19 @@ const defaultParent = bpmnVisualization.graph.getDefaultParent(); export const getDefaultParentId = (): string => defaultParent.id; const expectElementsInModel = (parentId: string, elementsNumber: number, filter: FilterFunction): void => { - const model = bpmnVisualization.graph.model; - const descendants = model.filterCells([getCell(parentId)], filter); + // TODO see if we can move the logic to getCell + const parentCell = parentId ? getCell(parentId) : defaultParent; + const descendants = parentCell.filterDescendants(filter); expect(descendants).toHaveLength(elementsNumber); }; export const expectPoolsInModel = (pools: number): void => { - expectElementsInModel(undefined, pools, (cell: Cell): boolean => (cell.style as BPMNCellStyle).bpmn.kind == ShapeBpmnElementKind.POOL); + expectElementsInModel(undefined, pools, (cell: Cell): boolean => { + // console.info('@@cell', cell); + return cell != defaultParent && (cell.style as BPMNCellStyle).bpmn.kind == ShapeBpmnElementKind.POOL; + }); + // TODO maxGraph why cell can be undefined here? + // expectElementsInModel(undefined, pools, (cell: Cell): boolean => (cell?.style as BPMNCellStyle)?.bpmn?.kind == ShapeBpmnElementKind.POOL); }; export const expectShapesInModel = (parentId: string, shapesNumber: number): void => { From 9868946c9e15989afb7f173ca97c3c00877095f9 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Tue, 6 Dec 2022 19:17:10 +0100 Subject: [PATCH 113/132] WIP model integration tests: adapt for maxGraph - pool (check parentId) --- .../mxGraph.model.bpmn.elements.test.ts | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/test/integration/mxGraph.model.bpmn.elements.test.ts b/test/integration/mxGraph.model.bpmn.elements.test.ts index a02e066403..7940174ec9 100644 --- a/test/integration/mxGraph.model.bpmn.elements.test.ts +++ b/test/integration/mxGraph.model.bpmn.elements.test.ts @@ -29,7 +29,15 @@ import { } from '../../src/bpmn-visualization'; import { readFileSync } from '../helpers/file-helper'; import type { ExpectedShapeModelElement } from './helpers/model-expect'; -import { bpmnVisualization, expectEdgesInModel, expectPoolsInModel, expectTotalEdgesInModel, expectShapesInModel, expectTotalShapesInModel } from './helpers/model-expect'; +import { + bpmnVisualization, + expectEdgesInModel, + expectPoolsInModel, + expectTotalEdgesInModel, + expectShapesInModel, + expectTotalShapesInModel, + getDefaultParentId, +} from './helpers/model-expect'; describe('mxGraph model - BPMN elements', () => { describe('BPMN elements should be available in the mxGraph model', () => { @@ -48,7 +56,9 @@ describe('mxGraph model - BPMN elements', () => { describe('BPMN containers', () => { // TODO change isHorizontal value for maxGraph, but the logic is probably wrong in 'master' (convert integer into boolean) - const minimalPoolModelElement: ExpectedShapeModelElement = {}; + const minimalPoolModelElement: ExpectedShapeModelElement = { + parentId: getDefaultParentId(), + }; it('pool', async () => { expect('participant_1_id').toBePool({ ...minimalPoolModelElement, label: 'Pool 1' }); expect('participant_2_id').toBePool(minimalPoolModelElement); @@ -1434,7 +1444,7 @@ describe('mxGraph model - BPMN elements', () => { // pool // TODO change isHorizontal value for maxGraph, but the logic is probably wrong in 'master' (convert integer into boolean) - const minimalPoolModelElement: ExpectedShapeModelElement = { isHorizontal: true }; + const minimalPoolModelElement: ExpectedShapeModelElement = { isHorizontal: true, parentId: getDefaultParentId() }; expect('Participant_Vertical_With_Lanes').toBePool({ ...minimalPoolModelElement, label: 'Vertical Pool With Lanes' }); // lane From 66e5168f34e593013ff347aa084fce75669050f6 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Tue, 6 Dec 2022 20:28:29 +0100 Subject: [PATCH 114/132] EXTRA: workaround to fix overlays position (bug in maxgraph@0.1.0) --- src/component/mxgraph/overlay/custom-overlay.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/component/mxgraph/overlay/custom-overlay.ts b/src/component/mxgraph/overlay/custom-overlay.ts index 3bbf86aec6..3c5d38eaa3 100644 --- a/src/component/mxgraph/overlay/custom-overlay.ts +++ b/src/component/mxgraph/overlay/custom-overlay.ts @@ -38,6 +38,10 @@ export class MaxGraphCustomOverlay extends CellOverlay { constructor(public label: string, options: MaxGraphCustomOverlayOptions) { super(null, '', options.position.horizontalAlign, options.position.verticalAlign, new Point(), 'default'); + // FIXME maxgraph@0.1.0 constructor doesn't set some properties + this.align = options.position.horizontalAlign; + this.verticalAlign = options.position.verticalAlign; + // end of fixme this.style = options.style; } From 2f4577b0c13b0b900d79df3246d54302e50def35 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Wed, 7 Dec 2022 19:16:16 +0100 Subject: [PATCH 115/132] fix remaining failing integration tests maxGraph parent-child relationship changed in the model. No more parentId related to unknown elements. Ref are done with object, no more with string that could previously ref not exsting elements. Don't cache the defaultParent objet. It changes at every load in maxGraph --- test/integration/helpers/model-expect.ts | 12 ++++-------- test/integration/mxGraph.model.bpmn.elements.test.ts | 12 ++++++++---- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/test/integration/helpers/model-expect.ts b/test/integration/helpers/model-expect.ts index c387b61e9f..c76031ea03 100644 --- a/test/integration/helpers/model-expect.ts +++ b/test/integration/helpers/model-expect.ts @@ -194,24 +194,20 @@ export interface ExpectedEventBasedGatewayModelElement extends ExpectedShapeMode } export const bpmnVisualization = new BpmnVisualization(null); -const defaultParent = bpmnVisualization.graph.getDefaultParent(); +const getDefaultParent = (): Cell => bpmnVisualization.graph.getDefaultParent(); -export const getDefaultParentId = (): string => defaultParent.id; +export const getDefaultParentId = (): string => getDefaultParent().id; const expectElementsInModel = (parentId: string, elementsNumber: number, filter: FilterFunction): void => { - // TODO see if we can move the logic to getCell - const parentCell = parentId ? getCell(parentId) : defaultParent; + const parentCell = parentId ? getCell(parentId) : getDefaultParent(); const descendants = parentCell.filterDescendants(filter); expect(descendants).toHaveLength(elementsNumber); }; export const expectPoolsInModel = (pools: number): void => { expectElementsInModel(undefined, pools, (cell: Cell): boolean => { - // console.info('@@cell', cell); - return cell != defaultParent && (cell.style as BPMNCellStyle).bpmn.kind == ShapeBpmnElementKind.POOL; + return cell != getDefaultParent() && (cell.style as BPMNCellStyle).bpmn.kind == ShapeBpmnElementKind.POOL; }); - // TODO maxGraph why cell can be undefined here? - // expectElementsInModel(undefined, pools, (cell: Cell): boolean => (cell?.style as BPMNCellStyle)?.bpmn?.kind == ShapeBpmnElementKind.POOL); }; export const expectShapesInModel = (parentId: string, shapesNumber: number): void => { diff --git a/test/integration/mxGraph.model.bpmn.elements.test.ts b/test/integration/mxGraph.model.bpmn.elements.test.ts index 7940174ec9..ec3a753aa4 100644 --- a/test/integration/mxGraph.model.bpmn.elements.test.ts +++ b/test/integration/mxGraph.model.bpmn.elements.test.ts @@ -1315,13 +1315,15 @@ describe('mxGraph model - BPMN elements', () => { verticalAlign: 'middle', }); expect('task_1').toBeTask({ parentId: '1' }); - expectShapesInModel('participant_1', 3); + // TODO change in maxGraph, no more ref to not existing element in the model which references elements with object, no more by id + // expectShapesInModel('participant_1', 3); // the children of the pool expectTotalShapesInModel(3); // only check one sequence flow in details expect('sequence_flow_1').toBeSequenceFlow({ parentId: '1', verticalAlign: 'bottom' }); - expectEdgesInModel('participant_1', 2); + // TODO change in maxGraph, no more ref to not existing element in the model which references elements with object, no more by id + // expectEdgesInModel('participant_1', 2); expectTotalEdgesInModel(2); }); }); @@ -1569,13 +1571,15 @@ describe('mxGraph model - BPMN elements', () => { verticalAlign: 'middle', }); expect('task_1').toBeTask({ parentId: '1' }); - expectShapesInModel('participant_1', 3); + // TODO change in maxGraph, no more ref to not existing element in the model which references elements with object, no more by id + // expectShapesInModel('participant_1', 3); // the children of the pool expectTotalShapesInModel(3); // only check one sequence flow in details expect('sequence_flow_1').toBeSequenceFlow({ parentId: '1', verticalAlign: 'bottom' }); - expectEdgesInModel('participant_1', 2); + // TODO change in maxGraph, no more ref to not existing element in the model which references elements with object, no more by id + // expectEdgesInModel('participant_1', 2); expectTotalEdgesInModel(2); }); }); From de48d9d5c124fa65707b6ff5a6a5cd90ac3b92d6 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Fri, 9 Dec 2022 17:55:03 +0100 Subject: [PATCH 116/132] IT model elements: remove extra added property to check (useless as ignored) --- test/integration/mxGraph.model.bpmn.elements.test.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/test/integration/mxGraph.model.bpmn.elements.test.ts b/test/integration/mxGraph.model.bpmn.elements.test.ts index ec3a753aa4..6bbc2ac74c 100644 --- a/test/integration/mxGraph.model.bpmn.elements.test.ts +++ b/test/integration/mxGraph.model.bpmn.elements.test.ts @@ -626,7 +626,6 @@ describe('mxGraph model - BPMN elements', () => { eventDefinitionKind: ShapeBpmnEventDefinitionKind.NONE, label: 'End Event In Sub-Process', parentId: 'expanded_embedded_sub_process_id', - verticalAlign: 'bottom', }); expect('sequence_flow_in_sub_process_1_id').toBeSequenceFlow({ parentId: 'expanded_embedded_sub_process_id', From f12e7a665ee57f12e063d637036039117399956c Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sun, 4 Jun 2023 22:02:18 +0200 Subject: [PATCH 117/132] docs: revert "remove mxGraph reference in the documentation" This is too early, we will do it if we actually migrate to maxGraph --- docs/contributors/mxgraph-integration.md | 30 ++++++++++++------------ 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/docs/contributors/mxgraph-integration.md b/docs/contributors/mxgraph-integration.md index 390a5fc380..7175c68255 100644 --- a/docs/contributors/mxgraph-integration.md +++ b/docs/contributors/mxgraph-integration.md @@ -34,18 +34,18 @@ layer is required. See `BpmnRenderer` for more details. ## BPMN Elements rendering and style -Each BPMN Element is transformed into a `mxGraph` [Cell](https://jgraph.github.io/mxgraph/docs/manual.html#3.1.3.4) and then inserted into the `mxGraph` model: +Each BPMN Element is transformed into a `mxGraph` [mxCell](https://jgraph.github.io/mxgraph/docs/manual.html#3.1.3.4) and then inserted into the `mxGraph` model: - `vertex` for BPMN Shapes - `edge` for BPMN Edges At insertion, a style is passed to configure how the BPMN Element is rendered. -The [style](https://jgraph.github.io/mxgraph/docs/js-api/files/view/Stylesheet-js.html) (see also the [mxGraph manual](https://jgraph.github.io/mxgraph/docs/manual.html#3.1.3.1)) -is defined and registered in `StyleConfigurator`. In particular, it refers to the name of a [Shape](https://jgraph.github.io/mxgraph/docs/js-api/files/shape/Shape-js.html) +The [style](https://jgraph.github.io/mxgraph/docs/js-api/files/view/mxStylesheet-js.html) (see also the [mxGraph manual](https://jgraph.github.io/mxgraph/docs/manual.html#3.1.3.1)) +is defined and registered in `StyleConfigurator`. In particular, it refers to the name of a [mxShape](https://jgraph.github.io/mxgraph/docs/js-api/files/shape/mxShape-js.html) used for the rendering. -The `Shape` can be a standard `mxGraph` class or a custom BPMN `Shape` defined by the `bpmn-visualization`. The custom `Shapes` are registered by `ShapeConfigurator` -which associates the `Shape` name (used in style definition) with the `Shape` class to be used. +The `mxShape` can be a standard `mxGraph` class or a custom BPMN `mxShape` defined by the `bpmn-visualization`. The custom `mxShapes` are registered by `ShapeConfigurator` +which associates the `mxShape` name (used in style definition) with the `mxShape` class to be used. For more details, see [BPMN Support - How To](./bpmn-support-how-to.md). @@ -103,7 +103,7 @@ the time. ### Shape The `mxGraph` integration uses the following to set the label bounds -- the `vertex Cell` geometry offset, see +- the `vertex mxCell` geometry offset, see for more details - x and y position relative to the shape `vertex` itself - as for the shape `vertex` position, a coordinate transformation layer is required. @@ -113,23 +113,23 @@ for more details #### Overview -The mxGraph integration uses the `edge Cell` geometry to set the label bounds +The mxGraph integration uses the `edge mxCell` geometry to set the label bounds - absolute geometry - offset x and y: position related to the center of the edge and as for the Shape Position, a coordinate transformation layer is required. - the center depends on the 2 terminal waypoints - if the waypoints are not available, no position is set and the label is placed on the edge center - width and height: for word wrapping. -see [Geometry](https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/model/Geometry.js#L60) +see [mxGeometry](https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/model/mxGeometry.js#L60) #### mxGraph Details -The label position is related to the 'center' of the edge, see [Geometry](https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/model/Geometry.js#L35) -for more details. The definition of 'center' differs whether the `Geometry` is `relative` or not: +The label position is related to the 'center' of the edge, see [mxGeometry](https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/model/mxGeometry.js#L35) +for more details. The definition of 'center' differs whether the `mxGeometry` is `relative` or not: - if relative, it is the center along the line - if absolute, it is derived from the terminal points -This is explained in [GraphView.updateEdgeLabelOffset](https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/view/GraphView.js#L2187) +This is explained in [mxGraphView.updateEdgeLabelOffset](https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/view/mxGraphView.js#L2187) - center between the two endpoints if the geometry is absolute - the relative distance between the center along the line, and the absolute orthogonal distance if the geometry is relative. @@ -139,11 +139,11 @@ to see various positioning methods in action. ## Overlays -We are hacking CellOverlays which originally only supports image shape. This lets us use custom shapes. +We are hacking mxCellOverlays which originally only supports image shape. This lets us use custom shapes. Customization main points -- `MxGraphCustomOverlay`: add extra configuration and behavior to CellOverlay -- customized `CellRenderer`: change the overlays rendering code to transform `MxGraphCustomOverlay` into specific shapes +- `MxGraphCustomOverlay`: add extra configuration and behavior to mxCellOverlay +- customized `mxCellRenderer`: change the overlays rendering code to transform `MxGraphCustomOverlay` into specific shapes according to its configuration. More details are available in [#955](https://github.com/process-analytics/bpmn-visualization-js/issues/955). @@ -151,7 +151,7 @@ More details are available in [#955](https://github.com/process-analytics/bpmn-v ## Custom CSS classes added to svg node generated by mxGraph -In `ShapeConfigurator`, we customize the Shape rendering code to add extra CSS classes depending on BPMN Element kinds. +In `ShapeConfigurator`, we customize the mxShape rendering code to add extra CSS classes depending on BPMN Element kinds. It allows styling to be managed with external CSS classes and it is also used for element identification and selection. More details are available in [#942](https://github.com/process-analytics/bpmn-visualization-js/issues/942). From 9960731b620654052a828981d31fe9682bfb840d Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sun, 4 Jun 2023 22:14:48 +0200 Subject: [PATCH 118/132] Revert "Update comment" - restore mxGraph in comments This reverts commit cfc224ae --- src/component/BpmnVisualization.ts | 2 +- src/component/mxgraph/style/identifiers.ts | 2 +- src/component/registry/query-selectors.ts | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/component/BpmnVisualization.ts b/src/component/BpmnVisualization.ts index 3fbc69841e..3e3c294061 100644 --- a/src/component/BpmnVisualization.ts +++ b/src/component/BpmnVisualization.ts @@ -68,7 +68,7 @@ export class BpmnVisualization { private readonly bpmnModelRegistry: BpmnModelRegistry; constructor(options: GlobalOptions) { - // maxgraph configuration + // mxgraph configuration const configurator = new GraphConfigurator(htmlElement(options?.container)); this.graph = configurator.configure(options); // other configurations diff --git a/src/component/mxgraph/style/identifiers.ts b/src/component/mxgraph/style/identifiers.ts index 7ea6199d13..cdabe614e5 100644 --- a/src/component/mxgraph/style/identifiers.ts +++ b/src/component/mxgraph/style/identifiers.ts @@ -15,7 +15,7 @@ */ /** - * Define BPMN specific keys used in maxgraph styles. Use constants defined in this class instead of hard coded string values. + * Define BPMN specific keys used in mxGraph styles. Use constants defined in this class instead of hard coded string values. * * **WARN**: You may use it to customize the BPMN Theme as suggested in the examples. But be aware that the way the default BPMN theme can be modified is subject to change. * diff --git a/src/component/registry/query-selectors.ts b/src/component/registry/query-selectors.ts index a71d06da3b..d70e169966 100644 --- a/src/component/registry/query-selectors.ts +++ b/src/component/registry/query-selectors.ts @@ -15,7 +15,7 @@ */ /** - * Once maxgraph is initialized at BpmnVisualization construction, prior loading a BPMN diagram, the DOM looks like: + * Once mxGraph is initialized at BpmnVisualization construction, prior loading a BPMN diagram, the DOM looks like: * ```html *
* @@ -28,7 +28,7 @@ * *
* ``` - * maxgraph generates the following SVG groups (see https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/view/GraphView.js#L2862) + * mxGraph generates the following SVG groups (see https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/view/GraphView.js#L2862) * - 1st: for background image * - 2nd: elements of the graph (shapes and edges) * - 3rd: overlays From 5a273123fe06d1b7ce61cf3ae1f45b139c45ebbc Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sun, 4 Jun 2023 22:18:44 +0200 Subject: [PATCH 119/132] restore the "BpmnStyleIdentifier" to reduce the number of changes in the code We only want to see the technical impacts of the migration to maxGraph here --- src/component/mxgraph/config/ShapeConfigurator.ts | 6 +++--- src/component/mxgraph/config/StyleConfigurator.ts | 4 ++-- src/component/mxgraph/renderer/StyleComputer.ts | 4 ++-- src/component/mxgraph/style/identifiers.ts | 3 ++- test/integration/matchers/toBeEdge/index.ts | 4 ++-- 5 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/component/mxgraph/config/ShapeConfigurator.ts b/src/component/mxgraph/config/ShapeConfigurator.ts index b644ba164f..1c6648b966 100644 --- a/src/component/mxgraph/config/ShapeConfigurator.ts +++ b/src/component/mxgraph/config/ShapeConfigurator.ts @@ -34,7 +34,7 @@ import { } from '../shape/activity-shapes'; import { TextAnnotationShape } from '../shape/text-annotation-shapes'; import { MessageFlowIconShape } from '../shape/flow-shapes'; -import { BpmnShapeIdentifier, FONT } from '../style'; +import { BpmnStyleIdentifier, FONT } from '../style'; import { computeAllBpmnClassNamesOfCell } from '../renderer/style-utils'; import { MaxGraphCustomOverlay } from '../overlay/custom-overlay'; import { OverlayBadgeShape } from '../overlay/shapes'; @@ -95,10 +95,10 @@ export default class ShapeConfigurator { // shapes for flows // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- TODO fix CellRenderer.registerShape call // @ts-ignore - CellRenderer.registerShape(BpmnShapeIdentifier.EDGE, BpmnConnector); + CellRenderer.registerShape(BpmnStyleIdentifier.EDGE, BpmnConnector); // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- TODO fix CellRenderer.registerShape call // @ts-ignore - CellRenderer.registerShape(BpmnShapeIdentifier.MESSAGE_FLOW_ICON, MessageFlowIconShape); + CellRenderer.registerShape(BpmnStyleIdentifier.MESSAGE_FLOW_ICON, MessageFlowIconShape); } private initMxSvgCanvasPrototype(): void { diff --git a/src/component/mxgraph/config/StyleConfigurator.ts b/src/component/mxgraph/config/StyleConfigurator.ts index 3b8bfc5074..2b5c0a0e10 100644 --- a/src/component/mxgraph/config/StyleConfigurator.ts +++ b/src/component/mxgraph/config/StyleConfigurator.ts @@ -18,7 +18,7 @@ import type { ArrowType, ShapeValue, Stylesheet } from '@maxgraph/core'; import { constants, Perimeter } from '@maxgraph/core'; import { AssociationDirectionKind, FlowKind, SequenceFlowKind, ShapeBpmnElementKind, ShapeUtil } from '../../../model/bpmn/internal'; -import { BpmnShapeIdentifier, MarkerIdentifier, StyleDefault } from '../style'; +import { BpmnStyleIdentifier, MarkerIdentifier, StyleDefault } from '../style'; import type { BpmnGraph } from '../BpmnGraph'; import type { BPMNCellStyle } from '../renderer/StyleComputer'; @@ -259,7 +259,7 @@ export class StyleConfigurator { private configureDefaultEdgeStyle(): void { const style = this.getStylesheet().getDefaultEdgeStyle() as BPMNCellStyle; // TODO remove forcing type when maxGraph fixes its types - style.shape = BpmnShapeIdentifier.EDGE; + style.shape = BpmnStyleIdentifier.EDGE; style.endSize = 12; style.strokeWidth = 1.5; style.rounded = true; diff --git a/src/component/mxgraph/renderer/StyleComputer.ts b/src/component/mxgraph/renderer/StyleComputer.ts index 3a1c477693..b3723e03d8 100644 --- a/src/component/mxgraph/renderer/StyleComputer.ts +++ b/src/component/mxgraph/renderer/StyleComputer.ts @@ -28,7 +28,7 @@ import { ShapeBpmnStartEvent, ShapeBpmnSubProcess, } from '../../../model/bpmn/internal/shape/ShapeBpmnElement'; -import { BpmnShapeIdentifier, FONT } from '../style'; +import { BpmnStyleIdentifier, FONT } from '../style'; import type { AssociationDirectionKind, FlowKind, @@ -209,7 +209,7 @@ export default class StyleComputer { computeMessageFlowIconStyle(edge: Edge): BPMNCellStyle { return { // TODO remove forcing type when maxGraph fixes its types - shape: BpmnShapeIdentifier.MESSAGE_FLOW_ICON, + shape: BpmnStyleIdentifier.MESSAGE_FLOW_ICON, bpmn: { isNonInitiating: edge.messageVisibleKind === MessageVisibleKind.NON_INITIATING }, }; } diff --git a/src/component/mxgraph/style/identifiers.ts b/src/component/mxgraph/style/identifiers.ts index cdabe614e5..68873ef750 100644 --- a/src/component/mxgraph/style/identifiers.ts +++ b/src/component/mxgraph/style/identifiers.ts @@ -22,7 +22,8 @@ * @category BPMN Theme * @experimental */ -export class BpmnShapeIdentifier { +// TODO may be renamed into BpmnShapeIdentifier after the maxGraph migration +export class BpmnStyleIdentifier { // edge static readonly EDGE = 'bpmn.edge'; diff --git a/test/integration/matchers/toBeEdge/index.ts b/test/integration/matchers/toBeEdge/index.ts index 68e9e15a50..1c3929f0b9 100644 --- a/test/integration/matchers/toBeEdge/index.ts +++ b/test/integration/matchers/toBeEdge/index.ts @@ -21,7 +21,7 @@ import { buildCellMatcher, buildCommonExpectedStateStyle, buildReceivedCellWithC import { AssociationDirectionKind, FlowKind, MessageVisibleKind, SequenceFlowKind } from '../../../../src/model/bpmn/internal'; import type { ExpectedAssociationFlowModelElement, ExpectedEdgeModelElement, ExpectedSequenceFlowModelElement } from '../../helpers/model-expect'; import { getDefaultParentId } from '../../helpers/model-expect'; -import { BpmnShapeIdentifier } from '../../../../src/component/mxgraph/style'; +import { BpmnStyleIdentifier } from '../../../../src/component/mxgraph/style'; import type { BPMNCellStyle } from '../../../../src/component/mxgraph/renderer/StyleComputer'; import MatcherContext = jest.MatcherContext; import CustomMatcherResult = jest.CustomMatcherResult; @@ -80,7 +80,7 @@ function buildExpectedCell(id: string, expectedModel: ExpectedEdgeModelElement | value: null, // maxGraph now set to 'null', mxGraph set to 'undefined' style: { // TODO remove forcing type when maxGraph fixes its types - shape: BpmnShapeIdentifier.MESSAGE_FLOW_ICON, + shape: BpmnStyleIdentifier.MESSAGE_FLOW_ICON, // TODO duplicated logic to compute the 'isNonInitiating' property. Update the expectedModel to store a boolean instead of a string bpmn: { isNonInitiating: expectedModel.messageVisibleKind === MessageVisibleKind.NON_INITIATING }, }, From 29bff4ab7f27841f10137ba70e26e8409d9e787a Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sun, 4 Jun 2023 22:27:48 +0200 Subject: [PATCH 120/132] StyleComputer: remove extra mxGraph to maxGraph change in comments We only want to see the technical impacts of the migration to maxGraph here Comment will be updated while or after doing the actual migration --- src/component/mxgraph/renderer/StyleComputer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/mxgraph/renderer/StyleComputer.ts b/src/component/mxgraph/renderer/StyleComputer.ts index b3723e03d8..551c787874 100644 --- a/src/component/mxgraph/renderer/StyleComputer.ts +++ b/src/component/mxgraph/renderer/StyleComputer.ts @@ -111,7 +111,7 @@ export default class StyleComputer { } else if (bpmnElement instanceof ShapeBpmnActivity) { this.computeActivityShapeStyle(bpmnElement, style); } else if (ShapeUtil.isPoolOrLane(bpmnElement.kind)) { - // maxGraph 'style.horizontal' is for the label + // 'style.horizontal' is for the label // In BPMN, isHorizontal is for the Shape style.horizontal = !(shape.isHorizontal ?? true); } else if (bpmnElement instanceof ShapeBpmnEventBasedGateway) { From 7490fa962aeaa7ef28d1e6fab53132c4e36f3835 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sun, 4 Jun 2023 22:30:29 +0200 Subject: [PATCH 121/132] Revert "Rename MxGraphCustomOverlay in MaxGraphCustomOverlay" We only want to see the technical impacts of the migration to maxGraph here Comment will be updated while or after doing the actual migration This reverts commit 7b1d7619 --- src/component/mxgraph/GraphCellUpdater.ts | 4 ++-- .../mxgraph/config/ShapeConfigurator.ts | 4 ++-- .../mxgraph/overlay/OverlayConverter.ts | 18 +++++++++--------- .../mxgraph/overlay/custom-overlay.ts | 16 ++++++++-------- src/component/mxgraph/overlay/shapes.ts | 4 ++-- test/integration/matchers/matcher-utils.ts | 6 +++--- .../mxgraph/overlay/OverlayConverter.test.ts | 6 +++--- 7 files changed, 29 insertions(+), 29 deletions(-) diff --git a/src/component/mxgraph/GraphCellUpdater.ts b/src/component/mxgraph/GraphCellUpdater.ts index 00752b0ab8..edacd7975b 100644 --- a/src/component/mxgraph/GraphCellUpdater.ts +++ b/src/component/mxgraph/GraphCellUpdater.ts @@ -16,7 +16,7 @@ import type { BpmnGraph } from './BpmnGraph'; import type { Overlay } from '../registry'; -import { MaxGraphCustomOverlay } from './overlay/custom-overlay'; +import { MxGraphCustomOverlay } from './overlay/custom-overlay'; import { ensureIsArray } from '../helpers/array-utils'; import { OverlayConverter } from './overlay/OverlayConverter'; import { messageFowIconId } from './BpmnRenderer'; @@ -63,7 +63,7 @@ export default class GraphCellUpdater { return; } ensureIsArray(overlays).forEach(overlay => { - const bpmnOverlay = new MaxGraphCustomOverlay(overlay.label, this.overlayConverter.convert(overlay)); + const bpmnOverlay = new MxGraphCustomOverlay(overlay.label, this.overlayConverter.convert(overlay)); this.graph.addCellOverlay(cell, bpmnOverlay); }); } diff --git a/src/component/mxgraph/config/ShapeConfigurator.ts b/src/component/mxgraph/config/ShapeConfigurator.ts index 1c6648b966..d1d7d74b2b 100644 --- a/src/component/mxgraph/config/ShapeConfigurator.ts +++ b/src/component/mxgraph/config/ShapeConfigurator.ts @@ -36,7 +36,7 @@ import { TextAnnotationShape } from '../shape/text-annotation-shapes'; import { MessageFlowIconShape } from '../shape/flow-shapes'; import { BpmnStyleIdentifier, FONT } from '../style'; import { computeAllBpmnClassNamesOfCell } from '../renderer/style-utils'; -import { MaxGraphCustomOverlay } from '../overlay/custom-overlay'; +import { MxGraphCustomOverlay } from '../overlay/custom-overlay'; import { OverlayBadgeShape } from '../overlay/shapes'; import { BpmnConnector } from '../shape/edges'; import type { BPMNCellStyle } from '../renderer/StyleComputer'; @@ -212,7 +212,7 @@ export default class ShapeConfigurator { let overlayShape: Shape; // START bpmn-visualization CUSTOMIZATION - if (currentOverlay instanceof MaxGraphCustomOverlay) { + if (currentOverlay instanceof MxGraphCustomOverlay) { overlayShape = new OverlayBadgeShape(currentOverlay.label, new Rectangle(0, 0, 0, 0), currentOverlay.style); } else { overlayShape = new ImageShape(new Rectangle(0, 0, 0, 0), currentOverlay.image.src); diff --git a/src/component/mxgraph/overlay/OverlayConverter.ts b/src/component/mxgraph/overlay/OverlayConverter.ts index 163825bb52..409c167184 100644 --- a/src/component/mxgraph/overlay/OverlayConverter.ts +++ b/src/component/mxgraph/overlay/OverlayConverter.ts @@ -15,10 +15,10 @@ */ import type { Overlay, OverlayFont, OverlayPosition, OverlayFill, OverlayStroke } from '../../registry'; import { StyleDefault } from '../style'; -import type { MaxGraphCustomOverlayOptions, MaxGraphCustomOverlayPosition, MaxGraphCustomOverlayStyle } from './custom-overlay'; +import type { MxGraphCustomOverlayOptions, MxGraphCustomOverlayPosition, MxGraphCustomOverlayStyle } from './custom-overlay'; export class OverlayConverter { - private overlayPositions: Map = new Map([ + private overlayPositions: Map = new Map([ // Edge ['start', { horizontalAlign: 'left', verticalAlign: 'top' }], ['middle', { horizontalAlign: 'center', verticalAlign: 'top' }], @@ -34,17 +34,17 @@ export class OverlayConverter { ['middle-right', { horizontalAlign: 'right', verticalAlign: 'middle' }], ]); - convert(overlay: Overlay): MaxGraphCustomOverlayOptions { + convert(overlay: Overlay): MxGraphCustomOverlayOptions { const position = this.convertPosition(overlay); const style = OverlayConverter.convertStyle(overlay); return { position, style }; } - private convertPosition(overlay: Overlay): MaxGraphCustomOverlayPosition { + private convertPosition(overlay: Overlay): MxGraphCustomOverlayPosition { return this.overlayPositions.get(overlay.position); } - private static convertStyle(overlay: Overlay): MaxGraphCustomOverlayStyle { + private static convertStyle(overlay: Overlay): MxGraphCustomOverlayStyle { // recompute the style at each call to ensure we consider default changes that could occur after lib initialization const defaultStyle = { fill: { color: StyleDefault.DEFAULT_OVERLAY_FILL_COLOR.valueOf(), opacity: StyleDefault.DEFAULT_OVERLAY_FILL_OPACITY.valueOf() }, @@ -53,7 +53,7 @@ export class OverlayConverter { }; const style = overlay.style; - const convertedStyle = { ...defaultStyle }; + const convertedStyle = { ...defaultStyle }; if (!style) { return convertedStyle; } @@ -65,21 +65,21 @@ export class OverlayConverter { return convertedStyle; } - private static convertFill(convertedStyle: MaxGraphCustomOverlayStyle, apiFill: OverlayFill): void { + private static convertFill(convertedStyle: MxGraphCustomOverlayStyle, apiFill: OverlayFill): void { if (apiFill) { convertedStyle.fill.color = apiFill.color ?? convertedStyle.fill.color; convertedStyle.fill.opacity = apiFill.opacity ?? convertedStyle.fill.opacity; } } - private static convertStroke(convertedStyle: MaxGraphCustomOverlayStyle, apiStroke: OverlayStroke): void { + private static convertStroke(convertedStyle: MxGraphCustomOverlayStyle, apiStroke: OverlayStroke): void { if (apiStroke) { convertedStyle.stroke.color = apiStroke.color ?? convertedStyle.stroke.color; convertedStyle.stroke.width = apiStroke.width ?? convertedStyle.stroke.width; } } - private static convertFont(convertedStyle: MaxGraphCustomOverlayStyle, apiFont: OverlayFont): void { + private static convertFont(convertedStyle: MxGraphCustomOverlayStyle, apiFont: OverlayFont): void { if (apiFont) { convertedStyle.font.color = apiFont.color ?? convertedStyle.font.color; convertedStyle.font.size = apiFont.size ?? convertedStyle.font.size; diff --git a/src/component/mxgraph/overlay/custom-overlay.ts b/src/component/mxgraph/overlay/custom-overlay.ts index 3c5d38eaa3..8bcc667e62 100644 --- a/src/component/mxgraph/overlay/custom-overlay.ts +++ b/src/component/mxgraph/overlay/custom-overlay.ts @@ -21,22 +21,22 @@ import type { OverlayStyle } from '../../registry'; export type VerticalAlignType = 'bottom' | 'middle' | 'top'; export type HorizontalAlignType = 'left' | 'center' | 'right'; -export interface MaxGraphCustomOverlayOptions { - position: MaxGraphCustomOverlayPosition; - style: MaxGraphCustomOverlayStyle; +export interface MxGraphCustomOverlayOptions { + position: MxGraphCustomOverlayPosition; + style: MxGraphCustomOverlayStyle; } -export interface MaxGraphCustomOverlayPosition { +export interface MxGraphCustomOverlayPosition { horizontalAlign?: HorizontalAlignType; verticalAlign?: VerticalAlignType; } -export type MaxGraphCustomOverlayStyle = Required; +export type MxGraphCustomOverlayStyle = Required; -export class MaxGraphCustomOverlay extends CellOverlay { - readonly style: MaxGraphCustomOverlayStyle; +export class MxGraphCustomOverlay extends CellOverlay { + readonly style: MxGraphCustomOverlayStyle; - constructor(public label: string, options: MaxGraphCustomOverlayOptions) { + constructor(public label: string, options: MxGraphCustomOverlayOptions) { super(null, '', options.position.horizontalAlign, options.position.verticalAlign, new Point(), 'default'); // FIXME maxgraph@0.1.0 constructor doesn't set some properties this.align = options.position.horizontalAlign; diff --git a/src/component/mxgraph/overlay/shapes.ts b/src/component/mxgraph/overlay/shapes.ts index 1a94f3e7f3..d9140e5293 100644 --- a/src/component/mxgraph/overlay/shapes.ts +++ b/src/component/mxgraph/overlay/shapes.ts @@ -15,10 +15,10 @@ */ import type { Rectangle } from '@maxgraph/core'; import { TextShape } from '@maxgraph/core'; -import type { MaxGraphCustomOverlayStyle } from './custom-overlay'; +import type { MxGraphCustomOverlayStyle } from './custom-overlay'; export class OverlayBadgeShape extends TextShape { - constructor(value: string, bounds: Rectangle, style: MaxGraphCustomOverlayStyle) { + constructor(value: string, bounds: Rectangle, style: MxGraphCustomOverlayStyle) { super( value, bounds, diff --git a/test/integration/matchers/matcher-utils.ts b/test/integration/matchers/matcher-utils.ts index 26b96664a4..b833190638 100644 --- a/test/integration/matchers/matcher-utils.ts +++ b/test/integration/matchers/matcher-utils.ts @@ -21,7 +21,7 @@ import CustomMatcherResult = jest.CustomMatcherResult; import type { ExpectedEdgeModelElement, ExpectedFont, ExpectedShapeModelElement } from '../helpers/model-expect'; import { bpmnVisualization } from '../helpers/model-expect'; import { FONT } from '../../../src/bpmn-visualization'; -import type { MaxGraphCustomOverlay, MaxGraphCustomOverlayStyle } from '../../../src/component/mxgraph/overlay/custom-overlay'; +import type { MxGraphCustomOverlay, MxGraphCustomOverlayStyle } from '../../../src/component/mxgraph/overlay/custom-overlay'; import type { BPMNCellStyle } from '../../../src/component/mxgraph/renderer/StyleComputer'; // TODO remove this type @@ -46,7 +46,7 @@ export interface ExpectedOverlay { label?: string; horizontalAlign?: string; verticalAlign?: string; - style?: MaxGraphCustomOverlayStyle; + style?: MxGraphCustomOverlayStyle; } export const EXPECTED_LABEL = 'Expected in the mxGraph model'; @@ -167,7 +167,7 @@ export function buildReceivedCellWithCommonAttributes(cell: Cell): ExpectedCell }; // the maxGraph API returns an empty array when there is no overlays - const cellOverlays = bpmnVisualization.graph.getCellOverlays(cell) as MaxGraphCustomOverlay[]; + const cellOverlays = bpmnVisualization.graph.getCellOverlays(cell) as MxGraphCustomOverlay[]; if (cellOverlays.length > 0) { receivedCell.overlays = cellOverlays.map(cellOverlay => ({ label: cellOverlay.label, diff --git a/test/unit/component/mxgraph/overlay/OverlayConverter.test.ts b/test/unit/component/mxgraph/overlay/OverlayConverter.test.ts index 5d2f103faa..f638e67793 100644 --- a/test/unit/component/mxgraph/overlay/OverlayConverter.test.ts +++ b/test/unit/component/mxgraph/overlay/OverlayConverter.test.ts @@ -17,7 +17,7 @@ * limitations under the License. */ import { OverlayConverter } from '../../../../../src/component/mxgraph/overlay/OverlayConverter'; -import type { MaxGraphCustomOverlayPosition } from '../../../../../src/component/mxgraph/overlay/custom-overlay'; +import type { MxGraphCustomOverlayPosition } from '../../../../../src/component/mxgraph/overlay/custom-overlay'; import type { Overlay, OverlayPosition } from '../../../../../src/bpmn-visualization'; import { StyleDefault } from '../../../../../src/bpmn-visualization'; @@ -39,9 +39,9 @@ describe('overlay converter', () => { [undefined, undefined], [null, undefined], ]; - it.each(positionParameters as [[OverlayPosition, MaxGraphCustomOverlayPosition]])( + it.each(positionParameters as [[OverlayPosition, MxGraphCustomOverlayPosition]])( 'convert API overlay position %s to mxGraph overlay position %s', - (apiPosition: OverlayPosition, mxGraphPosition: MaxGraphCustomOverlayPosition) => { + (apiPosition: OverlayPosition, mxGraphPosition: MxGraphCustomOverlayPosition) => { const overlay: Overlay = { position: apiPosition }; const result = overlayConverter.convert(overlay); From 603fdf14d7c4209ea9ab4e1565155232b1f74f07 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sun, 4 Jun 2023 22:34:20 +0200 Subject: [PATCH 122/132] test: restore the filename of the mxgraph config We only want to see the technical impacts of the migration to maxGraph here Comment will be updated while or after doing the actual migration --- .../config/{maxGraph-config.ts => mxgraph-config.ts} | 2 +- test/integration/jest.config.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) rename test/integration/config/{maxGraph-config.ts => mxgraph-config.ts} (87%) diff --git a/test/integration/config/maxGraph-config.ts b/test/integration/config/mxgraph-config.ts similarity index 87% rename from test/integration/config/maxGraph-config.ts rename to test/integration/config/mxgraph-config.ts index 32115f170b..7cb9dc5723 100644 --- a/test/integration/config/maxGraph-config.ts +++ b/test/integration/config/mxgraph-config.ts @@ -17,5 +17,5 @@ import { Client } from '@maxgraph/core'; // Force usage of ForeignObject -// By default, maxGraph detects no ForeignObject support when running tests in jsdom environment +// By default, mxGraph detects no ForeignObject support when running tests in jsdom environment Client.NO_FO = false; diff --git a/test/integration/jest.config.js b/test/integration/jest.config.js index 3b795b5c3f..3c73618941 100644 --- a/test/integration/jest.config.js +++ b/test/integration/jest.config.js @@ -33,7 +33,7 @@ module.exports = { coverageReporters: ['lcov', 'text-summary'], coverageDirectory: 'build/test-report/integration', setupFilesAfterEnv: [ - './test/integration/config/maxGraph-config.ts', + './test/integration/config/mxgraph-config.ts', // put at the latest place to see logs that could be displayed by setup files './test/integration/config/hide-console-warnings.js', ], From 29bb2f0896164aa18e67af4532e33b1146c12b60 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sun, 4 Jun 2023 22:36:50 +0200 Subject: [PATCH 123/132] test: remove ref to maxGraph in a comment We only want to see the technical impacts of the migration to maxGraph here Comment will be updated while or after doing the actual migration --- test/integration/helpers/model-expect.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/integration/helpers/model-expect.ts b/test/integration/helpers/model-expect.ts index c76031ea03..44180f564f 100644 --- a/test/integration/helpers/model-expect.ts +++ b/test/integration/helpers/model-expect.ts @@ -141,7 +141,7 @@ export interface ExpectedShapeModelElement { align?: AlignValue; markers?: ShapeBpmnMarkerKind[]; isInstantiating?: boolean; - /** This is the value in the maxGraph model, not what is from the BPMN Shape. This applies to the maxGraph labels so the value is inverted comparing to the BPMN model. + /** This is the value in the mxGraph model, not what is from the BPMN Shape. This applies to the labels so the value is inverted comparing to the BPMN model. * - Horizontal pool/lane --> false (the label is vertical) * - Vertical pool/lane --> true (the label is horizontal) * */ From ca24bc44066504b9e605c05addf6db2d944e178e Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sun, 4 Jun 2023 23:25:07 +0200 Subject: [PATCH 124/132] Revert variable rename in GraphCellUpdater.ts (mxCell to cell) We only want to see the technical impacts of the migration to maxGraph here Comment/variables will be updated while or after doing the actual migration --- src/component/mxgraph/GraphCellUpdater.ts | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/component/mxgraph/GraphCellUpdater.ts b/src/component/mxgraph/GraphCellUpdater.ts index edacd7975b..ff4263aed3 100644 --- a/src/component/mxgraph/GraphCellUpdater.ts +++ b/src/component/mxgraph/GraphCellUpdater.ts @@ -37,17 +37,17 @@ export default class GraphCellUpdater { updateAndRefreshCssClassesOfCell(bpmnElementId: string, cssClasses: string[]): void { this.updateAndRefreshCssClassesOfElement(bpmnElementId, cssClasses); - // special case: message flow icon is stored in a dedicated Cell, so it must be kept in sync + // special case: message flow icon is stored in a dedicated mxCell, so it must be kept in sync this.updateAndRefreshCssClassesOfElement(messageFowIconId(bpmnElementId), cssClasses); } private updateAndRefreshCssClassesOfElement(elementId: string, cssClasses: string[]): void { - const cell = this.graph.model.getCell(elementId); - if (!cell) { + const mxCell = this.graph.model.getCell(elementId); + if (!mxCell) { return; } const view = this.graph.getView(); - const state = view.getState(cell); + const state = view.getState(mxCell); // TODO improve logic const style = state.style as BPMNCellStyle; !style.bpmn.extra && (style.bpmn.extra = { css: { classes: undefined } }); @@ -58,21 +58,21 @@ export default class GraphCellUpdater { } addOverlays(bpmnElementId: string, overlays: Overlay | Overlay[]): void { - const cell = this.graph.model.getCell(bpmnElementId); - if (!cell) { + const mxCell = this.graph.model.getCell(bpmnElementId); + if (!mxCell) { return; } ensureIsArray(overlays).forEach(overlay => { const bpmnOverlay = new MxGraphCustomOverlay(overlay.label, this.overlayConverter.convert(overlay)); - this.graph.addCellOverlay(cell, bpmnOverlay); + this.graph.addCellOverlay(mxCell, bpmnOverlay); }); } removeAllOverlays(bpmnElementId: string): void { - const cell = this.graph.model.getCell(bpmnElementId); - if (!cell) { + const mxCell = this.graph.model.getCell(bpmnElementId); + if (!mxCell) { return; } - this.graph.removeCellOverlays(cell); + this.graph.removeCellOverlays(mxCell); } } From 46fde05dbcef8b88410ca03487c1377a7f4e1ce9 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sun, 4 Jun 2023 23:26:39 +0200 Subject: [PATCH 125/132] Revert comment update in GraphConfigurator.ts (mxCell to cell) We only want to see the technical impacts of the migration to maxGraph here Comment/variables will be updated while or after doing the actual migration --- src/component/mxgraph/GraphConfigurator.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/mxgraph/GraphConfigurator.ts b/src/component/mxgraph/GraphConfigurator.ts index 6292659960..16dab4a93c 100644 --- a/src/component/mxgraph/GraphConfigurator.ts +++ b/src/component/mxgraph/GraphConfigurator.ts @@ -57,7 +57,7 @@ export default class GraphConfigurator { this.graph.setConstrainChildren(false); this.graph.setExtendParents(false); - // Disable folding for container Cell (pool, lane, sub process, call activity) because we don't need it. + // Disable folding for container mxCell (pool, lane, sub process, call activity) because we don't need it. // This also prevents requesting unavailable images (see #185) as we don't override BpmnMxGraph folding default images. this.graph.foldingEnabled = false; } From 59e2e49622037e20b8a77a17adc2493b3050ec77 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sun, 4 Jun 2023 23:28:26 +0200 Subject: [PATCH 126/132] Revert comment update in ShapeConfigurator.ts (mxShape to Shape) We only want to see the technical impacts of the migration to maxGraph here Comment/variables will be updated while or after doing the actual migration --- src/component/mxgraph/config/ShapeConfigurator.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/mxgraph/config/ShapeConfigurator.ts b/src/component/mxgraph/config/ShapeConfigurator.ts index d1d7d74b2b..b58f76f1c3 100644 --- a/src/component/mxgraph/config/ShapeConfigurator.ts +++ b/src/component/mxgraph/config/ShapeConfigurator.ts @@ -148,7 +148,7 @@ export default class ShapeConfigurator { } private initMxShapePrototype(): void { - // The following is copied from the mxgraph Shape implementation then converted to TypeScript and enriched for bpmn-visualization + // The following is copied from the mxgraph mxShape implementation then converted to TypeScript and enriched for bpmn-visualization // It is needed for adding the custom attributes that permits identification of the BPMN elements in the DOM Shape.prototype.createSvgCanvas = function () { const canvas = new SvgCanvas2D(this.node, false); From 901bb51d551733435fc169bdebe305e3309c57df Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sun, 4 Jun 2023 23:30:51 +0200 Subject: [PATCH 127/132] Revert comment update in custom-overlay.ts We only want to see the technical impacts of the migration to maxGraph here Comment/variables will be updated while or after doing the actual migration --- src/component/mxgraph/overlay/custom-overlay.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/component/mxgraph/overlay/custom-overlay.ts b/src/component/mxgraph/overlay/custom-overlay.ts index 8bcc667e62..851c799f5a 100644 --- a/src/component/mxgraph/overlay/custom-overlay.ts +++ b/src/component/mxgraph/overlay/custom-overlay.ts @@ -45,7 +45,8 @@ export class MxGraphCustomOverlay extends CellOverlay { this.style = options.style; } - // Based on original method from CellOverlay (CellOverlay.prototype.getBounds) + // TODO maxGraph actual migration: update comment and check code migration + // Based on original method from mxCellOverlay (mxCellOverlay.prototype.getBounds) override getBounds(state: CellState): Rectangle { override getBounds(state: CellState): Rectangle { const isEdge = state.cell.isEdge(); const s = state.view.scale; From c2e45ca3463838a51b991520412cf1099ea00f95 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sun, 4 Jun 2023 23:32:58 +0200 Subject: [PATCH 128/132] Revert comment update in CoordinatesTranslator.ts We only want to see the technical impacts of the migration to maxGraph here Comment/variables will be updated while or after doing the actual migration --- src/component/mxgraph/renderer/CoordinatesTranslator.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/component/mxgraph/renderer/CoordinatesTranslator.ts b/src/component/mxgraph/renderer/CoordinatesTranslator.ts index 7fd34178d6..c2cae03416 100644 --- a/src/component/mxgraph/renderer/CoordinatesTranslator.ts +++ b/src/component/mxgraph/renderer/CoordinatesTranslator.ts @@ -36,7 +36,7 @@ export default class CoordinatesTranslator { return new Point(relativeX, relativeY); } - // Returns the translation to be applied to a cell whose Geometry x and y values are expressed with absolute coordinates + // Returns the translation to be applied to a cell whose mxGeometry x and y values are expressed with absolute coordinates // (i.e related to the graph default parent) you want to assign as parent to the cell passed as argument of this function. // That way, you will be able to express the cell coordinates as relative to its parent cell. // @@ -58,10 +58,10 @@ export default class CoordinatesTranslator { } /** - * Compute the center of the provided `Cell` for absolute geometry: this is the center point of a segment whose edges - * are the terminal points of the Cell geometry points. Returns `undefined` if the 2 terminal points are not available. + * Compute the center of the provided `mxCell` for absolute geometry: this is the center point of a segment whose edges + * are the terminal points of the mxCell geometry points. Returns `undefined` if the 2 terminal points are not available. * - * The center coordinates are given in the same referential as the `Cell`, so relative to its parent. + * The center coordinates are given in the same referential as the `mxCell`, so relative to its parent. */ computeEdgeCenter(mxEdge: Cell): Point { const points: Point[] = mxEdge.geometry.points; From ed7373eae079c18f810a5b9cc15cf13324f1be19 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sun, 4 Jun 2023 23:37:09 +0200 Subject: [PATCH 129/132] Revert comment update in query-selectors.ts We only want to see the technical impacts of the migration to maxGraph here Comment/variables will be updated while or after doing the actual migration --- src/component/registry/query-selectors.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/registry/query-selectors.ts b/src/component/registry/query-selectors.ts index d70e169966..4171878c94 100644 --- a/src/component/registry/query-selectors.ts +++ b/src/component/registry/query-selectors.ts @@ -28,7 +28,7 @@ * * * ``` - * mxGraph generates the following SVG groups (see https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/view/GraphView.js#L2862) + * mxGraph generates the following SVG groups (see https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/view/mxGraphView.js#L2862) * - 1st: for background image * - 2nd: elements of the graph (shapes and edges) * - 3rd: overlays From e322f0d87b446bd3ab00e81a9c75dafaf5028081 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sun, 4 Jun 2023 23:43:04 +0200 Subject: [PATCH 130/132] Revert comment update in style-utils.ts We only want to see the technical impacts of the migration to maxGraph here Comment/variables will be updated while or after doing the actual migration --- src/component/mxgraph/renderer/style-utils.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/component/mxgraph/renderer/style-utils.ts b/src/component/mxgraph/renderer/style-utils.ts index adf0539ade..7b6406b2fc 100644 --- a/src/component/mxgraph/renderer/style-utils.ts +++ b/src/component/mxgraph/renderer/style-utils.ts @@ -22,7 +22,7 @@ import type { BPMNCellStyle } from './StyleComputer'; /** * Compute the all class names associated to a cell in a hyphen case form. * - * @param cell the `Cell` related to the BPMN element. + * @param cell the `mxCell` related to the BPMN element. * @param isLabel the boolean that indicates if class must be computed for label. * @internal */ @@ -33,7 +33,7 @@ export function computeAllBpmnClassNamesOfCell(cell: Cell, isLabel: boolean): st /** * Compute the all class names associated to a given bpmn element in a hyphen case form. * - * @param style the part of the Cell style related to a {@link BpmnElementKind}. Message flow icon is a special case, as it is not related to `BpmnElementKind`. + * @param style the part of the mxCell style related to a {@link BpmnElementKind}. Message flow icon is a special case, as it is not related to `BpmnElementKind`. * @param isLabel the boolean that indicates if class must be computed for label. * @internal exported for testing purpose */ From 0610b333b8b657032944e75a4dd9e82a24bf3e30 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sun, 4 Jun 2023 23:49:52 +0200 Subject: [PATCH 131/132] Revert comment update in icon-painter.ts We only want to see the technical impacts of the migration to maxGraph here Comment/variables will be updated while or after doing the actual migration --- src/component/mxgraph/shape/render/icon-painter.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/mxgraph/shape/render/icon-painter.ts b/src/component/mxgraph/shape/render/icon-painter.ts index 3653939bd2..cb24e4d408 100644 --- a/src/component/mxgraph/shape/render/icon-painter.ts +++ b/src/component/mxgraph/shape/render/icon-painter.ts @@ -90,7 +90,7 @@ export class IconPainter { /** * Utility paint icon methods to easily instantiate a {@link BpmnCanvas} from a {@link PaintParameter}. * - * @param canvas mxgraph `AbstractCanvas2D` in charge of performing the paint operations. + * @param canvas mxgraph `mxAbstractCanvas2D` in charge of performing the paint operations. * @param ratioFromParent the actual size of the icon will be computed from the shape dimensions using this ratio. * @param setIconOriginFunct called function to set the origin of the icon. Generally, it calls a method of {@link BpmnCanvas}. * @param shapeConfig dimension and style of the shape where the icon is painted. From a70e3555474a3065ca5ba01bc597c4a797b70263 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Wed, 7 Jun 2023 06:56:53 +0200 Subject: [PATCH 132/132] BpmnConnector: todo about future integration in maxGraph --- src/component/mxgraph/shape/edges.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/component/mxgraph/shape/edges.ts b/src/component/mxgraph/shape/edges.ts index 961f1b9bda..95b747a8e2 100644 --- a/src/component/mxgraph/shape/edges.ts +++ b/src/component/mxgraph/shape/edges.ts @@ -19,6 +19,7 @@ import { SvgCanvas2D, ConnectorShape } from '@maxgraph/core'; import type { BPMNCellStyle } from '../renderer/StyleComputer'; +// TODO maxGraph migration - use out of the box support provided by https://github.com/maxGraph/maxGraph/issues/201 export class BpmnConnector extends ConnectorShape { constructor(points: Point[], stroke: string, strokewidth?: number) { super(points, stroke, strokewidth);