diff --git a/docs/contributors/mxgraph-integration.md b/docs/contributors/mxgraph-integration.md index df350029a6..7175c68255 100644 --- a/docs/contributors/mxgraph-integration.md +++ b/docs/contributors/mxgraph-integration.md @@ -120,16 +120,16 @@ The mxGraph integration uses the `edge mxCell` 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.1.1/javascript/src/js/model/mxGeometry.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 [mxGeometry](https://github.com/jgraph/mxgraph/blob/v4.1.1/javascript/src/js/model/mxGeometry.js#L35) +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 [mxGraphView.updateEdgeLabelOffset](https://github.com/jgraph/mxgraph/blob/v4.1.1/javascript/src/js/view/mxGraphView.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. diff --git a/docs/contributors/mxgraph-version-bump.md b/docs/contributors/mxgraph-version-bump.md index 99bdec05e4..d3fb3075ad 100644 --- a/docs/contributors/mxgraph-version-bump.md +++ b/docs/contributors/mxgraph-version-bump.md @@ -2,7 +2,7 @@ ## Minimal check list -- check the mxGraph changelog to see what could impact the lib: https://github.com/jgraph/mxgraph/blob/master/ChangeLog +- check the [mxGraph changelog](https://github.com/jgraph/mxgraph/blob/master/ChangeLog) to see what could impact the lib - review issues list, in particular in the [BPMN Rendering Improvements milestone](https://github.com/process-analytics/bpmn-visualization-js/milestone/14) which could be impacted or fixed by the version bump - apply the version bump - review the overridden mxgraph code, generally, we redefine prototype, so search for the `prototype` string diff --git a/package-lock.json b/package-lock.json index 11d0464905..0bff76ee83 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "fast-xml-parser": "4.0.7", "lodash.debounce": "^4.0.8", "lodash.throttle": "^4.1.1", - "mxgraph": "4.1.0", + "mxgraph": "4.2.2", "strnum": "1.0.5" }, "devDependencies": { @@ -8207,8 +8207,10 @@ "license": "MIT" }, "node_modules/mxgraph": { - "version": "4.1.0", - "license": "Apache-2.0" + "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.1", @@ -17718,7 +17720,9 @@ "dev": true }, "mxgraph": { - "version": "4.1.0" + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/mxgraph/-/mxgraph-4.2.2.tgz", + "integrity": "sha512-FrJc5AxzXSqiQNF+8CyJk6VxuKO4UVPgw32FZuFZ3X9W+JqOAQBTokZhh0ZkEqGpEOyp3z778ssmBTvdrTAdqw==" }, "nanoid": { "version": "3.3.1", diff --git a/package.json b/package.json index 4a27b591fd..08eb5092ec 100644 --- a/package.json +++ b/package.json @@ -90,7 +90,7 @@ "fast-xml-parser": "4.0.7", "lodash.debounce": "^4.0.8", "lodash.throttle": "^4.1.1", - "mxgraph": "4.1.0", + "mxgraph": "4.2.2", "strnum": "1.0.5" }, "devDependencies": { diff --git a/src/component/mxgraph/config/ShapeConfigurator.ts b/src/component/mxgraph/config/ShapeConfigurator.ts index bf20301026..2034eae794 100644 --- a/src/component/mxgraph/config/ShapeConfigurator.ts +++ b/src/component/mxgraph/config/ShapeConfigurator.ts @@ -135,8 +135,6 @@ export default class ShapeConfigurator { const canvas = new mxgraph.mxSvgCanvas2D(this.node, false); canvas.strokeTolerance = this.pointerEvents ? this.svgStrokeTolerance : 0; canvas.pointerEventsValue = this.svgPointerEvents; - // When bumping mxgraph to 4.1.1, remove this commented code. It has been removed in mxgraph@4.1.1 - //((canvas as unknown) as mxgraph.mxSvgCanvas2D).blockImagePointerEvents = isFF; const off = this.getSvgScreenOffset(); if (off != 0) { diff --git a/test/e2e/__image_snapshots__/bpmn/flows.message.02.labels.and.complex.paths-snap.png b/test/e2e/__image_snapshots__/bpmn/flows.message.02.labels.and.complex.paths-snap.png index 9bf78d5829..1fde4f0724 100644 Binary files a/test/e2e/__image_snapshots__/bpmn/flows.message.02.labels.and.complex.paths-snap.png and b/test/e2e/__image_snapshots__/bpmn/flows.message.02.labels.and.complex.paths-snap.png differ diff --git a/test/e2e/__image_snapshots__/bpmn/group.01.in.process.with.label-snap.png b/test/e2e/__image_snapshots__/bpmn/group.01.in.process.with.label-snap.png index ba4cf419ef..46191ce3bb 100644 Binary files a/test/e2e/__image_snapshots__/bpmn/group.01.in.process.with.label-snap.png and b/test/e2e/__image_snapshots__/bpmn/group.01.in.process.with.label-snap.png differ diff --git a/test/e2e/__image_snapshots__/bpmn/group.02.in.collaboration.with.label-snap.png b/test/e2e/__image_snapshots__/bpmn/group.02.in.collaboration.with.label-snap.png index c0780d3a8e..5baa806305 100644 Binary files a/test/e2e/__image_snapshots__/bpmn/group.02.in.collaboration.with.label-snap.png and b/test/e2e/__image_snapshots__/bpmn/group.02.in.collaboration.with.label-snap.png differ diff --git a/test/e2e/__image_snapshots__/bpmn/labels.01.general-snap.png b/test/e2e/__image_snapshots__/bpmn/labels.01.general-snap.png index f595739e75..b266b43892 100644 Binary files a/test/e2e/__image_snapshots__/bpmn/labels.01.general-snap.png and b/test/e2e/__image_snapshots__/bpmn/labels.01.general-snap.png differ diff --git a/test/e2e/__image_snapshots__/bpmn/labels.02.position.and.line.breaks-snap.png b/test/e2e/__image_snapshots__/bpmn/labels.02.position.and.line.breaks-snap.png index edadf20468..51aabc9686 100644 Binary files a/test/e2e/__image_snapshots__/bpmn/labels.02.position.and.line.breaks-snap.png and b/test/e2e/__image_snapshots__/bpmn/labels.02.position.and.line.breaks-snap.png differ diff --git a/test/e2e/__image_snapshots__/bpmn/labels.03.default.position-snap.png b/test/e2e/__image_snapshots__/bpmn/labels.03.default.position-snap.png index 5889016127..2feb12ec70 100644 Binary files a/test/e2e/__image_snapshots__/bpmn/labels.03.default.position-snap.png and b/test/e2e/__image_snapshots__/bpmn/labels.03.default.position-snap.png differ diff --git a/test/e2e/__image_snapshots__/bpmn/labels.04.fonts-snap.png b/test/e2e/__image_snapshots__/bpmn/labels.04.fonts-snap.png index 4f1d105ebd..0e60d2b72f 100644 Binary files a/test/e2e/__image_snapshots__/bpmn/labels.04.fonts-snap.png and b/test/e2e/__image_snapshots__/bpmn/labels.04.fonts-snap.png differ diff --git a/test/e2e/__image_snapshots__/bpmn/pools.01.labels.and.lanes-snap.png b/test/e2e/__image_snapshots__/bpmn/pools.01.labels.and.lanes-snap.png index be5ab3a32f..1a5c915683 100644 Binary files a/test/e2e/__image_snapshots__/bpmn/pools.01.labels.and.lanes-snap.png and b/test/e2e/__image_snapshots__/bpmn/pools.01.labels.and.lanes-snap.png differ diff --git a/test/e2e/__image_snapshots__/bpmn/pools.02.vertical.with.lanes-snap.png b/test/e2e/__image_snapshots__/bpmn/pools.02.vertical.with.lanes-snap.png index c9a930b18c..4f0d58c246 100644 Binary files a/test/e2e/__image_snapshots__/bpmn/pools.02.vertical.with.lanes-snap.png and b/test/e2e/__image_snapshots__/bpmn/pools.02.vertical.with.lanes-snap.png differ diff --git a/test/e2e/__image_snapshots__/bpmn/pools.03.black.box-snap.png b/test/e2e/__image_snapshots__/bpmn/pools.03.black.box-snap.png index c4d84243b7..fec60f9c83 100644 Binary files a/test/e2e/__image_snapshots__/bpmn/pools.03.black.box-snap.png and b/test/e2e/__image_snapshots__/bpmn/pools.03.black.box-snap.png differ diff --git a/test/e2e/__image_snapshots__/fit/type-Center/margin-0/with.outside.labels-snap.png b/test/e2e/__image_snapshots__/fit/type-Center/margin-0/with.outside.labels-snap.png index 13afb18f6c..2929e0f6fa 100644 Binary files a/test/e2e/__image_snapshots__/fit/type-Center/margin-0/with.outside.labels-snap.png and b/test/e2e/__image_snapshots__/fit/type-Center/margin-0/with.outside.labels-snap.png differ diff --git a/test/e2e/__image_snapshots__/fit/type-Horizontal/margin-0/with.outside.labels-snap.png b/test/e2e/__image_snapshots__/fit/type-Horizontal/margin-0/with.outside.labels-snap.png index 8c0ad8ee0a..2c13c5ca64 100644 Binary files a/test/e2e/__image_snapshots__/fit/type-Horizontal/margin-0/with.outside.labels-snap.png and b/test/e2e/__image_snapshots__/fit/type-Horizontal/margin-0/with.outside.labels-snap.png differ diff --git a/test/e2e/__image_snapshots__/fit/type-HorizontalVertical/margin-0/with.outside.labels-snap.png b/test/e2e/__image_snapshots__/fit/type-HorizontalVertical/margin-0/with.outside.labels-snap.png index 8c0ad8ee0a..2c13c5ca64 100644 Binary files a/test/e2e/__image_snapshots__/fit/type-HorizontalVertical/margin-0/with.outside.labels-snap.png and b/test/e2e/__image_snapshots__/fit/type-HorizontalVertical/margin-0/with.outside.labels-snap.png differ diff --git a/test/e2e/__image_snapshots__/fit/type-None/margin-0/with.outside.labels-snap.png b/test/e2e/__image_snapshots__/fit/type-None/margin-0/with.outside.labels-snap.png index 60fda34e96..196ad022ad 100644 Binary files a/test/e2e/__image_snapshots__/fit/type-None/margin-0/with.outside.labels-snap.png and b/test/e2e/__image_snapshots__/fit/type-None/margin-0/with.outside.labels-snap.png differ diff --git a/test/e2e/__image_snapshots__/fit/type-Vertical/margin-0/with.outside.labels-snap.png b/test/e2e/__image_snapshots__/fit/type-Vertical/margin-0/with.outside.labels-snap.png index dfeaa6d4cc..1c5ad0e8ab 100644 Binary files a/test/e2e/__image_snapshots__/fit/type-Vertical/margin-0/with.outside.labels-snap.png and b/test/e2e/__image_snapshots__/fit/type-Vertical/margin-0/with.outside.labels-snap.png differ diff --git a/test/e2e/bpmn.rendering.test.ts b/test/e2e/bpmn.rendering.test.ts index 5264c08a76..e25feedc94 100644 --- a/test/e2e/bpmn.rendering.test.ts +++ b/test/e2e/bpmn.rendering.test.ts @@ -34,75 +34,74 @@ class ImageSnapshotThresholds extends MultiBrowserImageSnapshotThresholds { [ 'flows.message.02.labels.and.complex.paths', { - macos: 0.05 / 100, // 0.042940114894829406% - windows: 0.13 / 100, // 0.12414788622622241% + macos: 0.05 / 100, // 0.04335117590119619% + windows: 0.13 / 100, // 0.12203782032372823% }, ], [ 'group.01.in.process.with.label', { - macos: 0.0002, // 0.017014812909055266% - windows: 0.0003, // 0.026260389475118995% + macos: 0.02 / 100, // 0.01749142091445055% + windows: 0.03 / 100, // 0.028794961672506947% }, ], [ 'group.02.in.collaboration.with.label', { - macos: 0.0002, // 0.011733173038031008% - windows: 0.0004, // 0.030760508478666626% + macos: 0.02 / 100, // 0.01128137033959975% + windows: 0.04 / 100, // 0.03137680045437463% }, ], [ 'labels.01.general', { - linux: 0.0005 / 100, // 0.0004690507665716659% - macos: 0.63 / 100, // 0.6225356945699145% - windows: 0.48 / 100, // 0.4794467924774448% + linux: 0.0005 / 100, // 0.00046159344679885805% + macos: 0.55 / 100, // 0.5443537069607207% + windows: 0.43 / 100, // 0.4279840696306825% }, ], [ 'labels.02.position.and.line.breaks', { - linux: 0.0089, // 0.8846259528850542% - windows: 0.082, // 0.8197899179969159% + linux: 0.009 / 100, // 0.008114783064627762% + macos: 0.92 / 100, // 0.9143424811214107% + windows: 0.59 / 100, // 0.5844660139573077% }, ], [ 'labels.03.default.position', { - linux: 0.0009 / 100, // 0.0008448953993434039% - macos: 0.47 / 100, // 0.46761316449689394% - windows: 0.32 / 100, // 0.31624569609181025% + linux: 0.002 / 100, // 0.0013799735258945844% + macos: 0.36 / 100, // 0.35527645122680473% + windows: 0.32 / 100, // 0.3125578154609565% }, ], [ 'labels.04.fonts', { - macos: 0.19 / 100, // 0.18334725431882193% - windows: 0.22 / 100, // 0.21293572507528058% + macos: 0.18 / 100, // 0.17224316335068268% + windows: 0.21 / 100, // 0.2083830906789208% }, ], [ 'pools.01.labels.and.lanes', { - macos: 0.13 / 100, // 0.1232401834606045% - windows: 0.25 / 100, // 0.20513086293463267% + macos: 0.09 / 100, // 0.08291308761130267% + windows: 0.23 / 100, // 0.21990738071808735% }, ], [ 'pools.02.vertical.with.lanes', { - linux: 0.0014, // 0.13132100299135807% - macos: 0.0015, // 0.14776609441433664% - windows: 0.002, // 0.1182792778311903% + macos: 0.13 / 100, // 0.12482014769641389% + windows: 0.14 / 100, // 0.13308164928160784% }, ], [ 'pools.03.black.box', { - linux: 0.0017, // 0.16083207782319198% - macos: 0.0018, // 0.17300897532621654% - windows: 0.0026, // 0.25283466417285183% + macos: 0.095 / 100, // 0.0935782032063015% + windows: 0.12 / 100, // 0.1184446265753869% }, ], // tests without labels @@ -132,84 +131,81 @@ class ImageSnapshotThresholds extends MultiBrowserImageSnapshotThresholds { [ 'flows.message.02.labels.and.complex.paths', { - linux: 0.09 / 100, // 0.0833293935339152% - macos: 0.13 / 100, // 0.12587692325856104% - windows: 0.71 / 100, // 0.7024096538645774% + linux: 0.09 / 100, // 0.08377044926310973% + macos: 0.13 / 100, // 0.12624011437493143% + windows: 0.73 / 100, // 0.7275118149390969% }, ], [ 'group.01.in.process.with.label', { - macos: 0.0002, // 0.017539672871980105% - windows: 0.0022, // 0.21161062086058058% + windows: 0.2 / 100, // 0.19944779635067134% }, ], [ 'group.02.in.collaboration.with.label', { - macos: 0.0002, // 0.015546117401621373% - windows: 0.0019, // 0.18223382519321207% + windows: 0.24 / 100, // 0.23009823201961543% }, ], [ 'labels.01.general', { // high values due to font rendering discrepancies with chromium rendering - linux: 2 / 100, // 1.99314755236637% - macos: 2.35 / 100, // 2.342807360599164% + linux: 2.06 / 100, // 2.0563192299700384% + macos: 2.35 / 100, // 2.34547842662729% // very high threshold - windows: 13.53, // 13.521318196938303% + windows: 13.42 / 10, // 13.418682820755645% }, ], [ 'labels.02.position.and.line.breaks', { // TODO possible rendering issue so high threshold value - linux: 0.031, // 3.08975009972805% - macos: 0.025, // 2.478877395928847% + linux: 2.54 / 100, // 2.5316594800931735% + macos: 3.22 / 100, // 3.213605890318172% // very high threshold - windows: 0.156, // 15.594367802739583% + windows: 15.75 / 100, // 15.741601399131824% }, ], [ 'labels.03.default.position', { - linux: 0.41 / 100, // 0.40701080345780793% - macos: 0.82 / 100, // 0.8111318088812269% - // // TODO possible rendering issue so high threshold value - windows: 2.73, // 2.722838502156999% + linux: 0.64 / 100, // 0.6356854597329709% + macos: 0.9 / 100, // 0.8910384426042195% + // TODO possible rendering issue so high threshold value + windows: 2.35 / 100, // 2.3456231064214905% }, ], [ 'labels.04.fonts', { // high values due to font rendering discrepancies with chromium rendering - linux: 1.46 / 100, // 1.4556545630196482% - macos: 0.91 / 100, // 0.904039586436256% - windows: 1.73, // 1.7261364524240324% + linux: 1.43 / 100, // 1.4296226221777508% + macos: 0.88 / 100, // 0.8747774724672697% + windows: 1.68 / 100, // 1.6735128438225666% }, ], [ 'pools.01.labels.and.lanes', { - macos: 0.13 / 100, // 0.1272045431662927% - windows: 0.59 / 100, // 0.5809316243215457% + macos: 0.09 / 100, // 0.08552532456441721% + windows: 0.56 / 100, // 0.5571042176931162% }, ], [ 'pools.02.vertical.with.lanes', { - linux: 0.0003, // 0.024310386980885834% - macos: 0.0015, // 0.14753246729929392% - windows: 0.0072, // 0.7100461008680559% + macos: 0.13 / 100, // 0.1257657147324509% + windows: 0.75 / 100, // 0.7432204108300144% }, ], [ 'pools.03.black.box', { - linux: 0.0023, // 0.22636282955619252% - macos: 0.0022, // 0.21007470164219333% - windows: 0.0059, // 0.5856398049701173% + linux: 0.08 / 100, // 0.07283646777227482% + macos: 0.14 / 100, // 0.13474247576623632% + windows: 0.66 / 100, // 0.6566433292574891% }, ], // tests without labels @@ -245,51 +241,51 @@ class ImageSnapshotThresholds extends MultiBrowserImageSnapshotThresholds { [ 'flows.message.02.labels.and.complex.paths', { - macos: 0.41 / 100, // 0.40016434760490327% + macos: 0.41 / 100, // 0.40487233108913445% }, ], [ 'labels.01.general', { // TODO possible rendering issue so high threshold value - macos: 2.61 / 100, // 2.606652827219813% + macos: 2.51 / 100, // 2.5042273857533215% }, ], [ 'labels.02.position.and.line.breaks', { // TODO possible rendering issue so high threshold value - macos: 0.059, // 5.875189976297179% + macos: 6.11 / 100, // 6.105183205727094% }, ], [ 'labels.03.default.position', { - macos: 0.85 / 100, // 0.843063100064223% + macos: 0.64 / 100, // 0.6346061558805904% }, ], [ 'labels.04.fonts', { - macos: 0.63 / 100, // 0.6255817109336315% + macos: 0.61 / 100, // 0.6044319789370367% }, ], [ 'pools.01.labels.and.lanes', { - macos: 0.25 / 100, // 0.2428126684001386% + macos: 0.21 / 100, // 0.20749068678074245% }, ], [ 'pools.02.vertical.with.lanes', { - macos: 0.0026, // 0.24229404068003557% + macos: 0.24 / 100, // 0.23336351480325318% }, ], [ 'pools.03.black.box', { - macos: 0.0023, // 0.2242640286478026% + macos: 0.36 / 100, // 0.3576987596416892% }, ], // tests without labels diff --git a/test/e2e/diagram.navigation.fit.test.ts b/test/e2e/diagram.navigation.fit.test.ts index b2150d3082..f37b52e836 100644 --- a/test/e2e/diagram.navigation.fit.test.ts +++ b/test/e2e/diagram.navigation.fit.test.ts @@ -72,8 +72,8 @@ class ImageSnapshotThresholds extends MultiBrowserImageSnapshotThresholds { [ 'with.outside.labels', { - macos: 0.22 / 100, // max 0.2180969169471081% - windows: 0.43 / 100, // max 0.4256540822626942% + macos: 0.22 / 100, // max 0.21306736217683309% + windows: 0.39 / 100, // max 0.38276450047973753% }, ], ]); @@ -108,10 +108,10 @@ class ImageSnapshotThresholds extends MultiBrowserImageSnapshotThresholds { [ 'with.outside.labels', { - linux: 0.93 / 100, // max 0.9255094914218498% - macos: 1.08 / 100, // max 1.077067332010262% - // // TODO possible rendering issue so high threshold value - windows: 3.75 / 100, // max 3.742055324464577% + linux: 0.92 / 100, // max 0.915127526507431% + macos: 1.09 / 100, // max 1.0850265173179108% + // TODO possible rendering issue so high threshold value + windows: 3.75 / 100, // max 3.748766658101066% }, ], ]); @@ -140,7 +140,7 @@ class ImageSnapshotThresholds extends MultiBrowserImageSnapshotThresholds { [ 'with.outside.labels', { - macos: 1.04 / 100, // max is 1.0389324185017814% + macos: 1.07 / 100, // max is 1.0614921567171032% }, ], ]); diff --git a/test/integration/dom.css.classes.test.ts b/test/integration/dom.css.classes.test.ts index 75aac25cef..de3a0a9523 100644 --- a/test/integration/dom.css.classes.test.ts +++ b/test/integration/dom.css.classes.test.ts @@ -138,7 +138,7 @@ describe('Bpmn Elements registry - CSS class management', () => { htmlElementLookup.expectMessageFlow('MessageFlow_2_msgVisibilityKind_initiating', { hasIcon: true, isInitiatingIcon: true }); htmlElementLookup.expectMessageFlow('MessageFlow_3_msgVisibilityKind_non_initiating', { hasIcon: true, isInitiatingIcon: false }); - // // add several classes to several message flows + // add several classes to several message flows const additionalClasses = ['class1', 'class2']; bpmnVisualization.bpmnElementsRegistry.addCssClasses( ['MessageFlow_1', 'MessageFlow_2_msgVisibilityKind_initiating', 'MessageFlow_3_msgVisibilityKind_non_initiating'],