From 116127553560f6928dc38cd34b6ffff9e2ca3cc3 Mon Sep 17 00:00:00 2001 From: Martin Stamm Date: Mon, 27 May 2024 14:15:24 +0200 Subject: [PATCH 1/2] feat(preview-support): add copied marker as part of visual closes #904 --- assets/diagram-js.css | 14 +++---- .../complex-preview/ComplexPreview.js | 2 - .../preview-support/PreviewSupport.js | 38 ++++++------------- .../complex-preview/ComplexPreviewSpec.js | 17 ++++++++- .../renderer/MarkerRenderer.js | 2 +- 5 files changed, 35 insertions(+), 38 deletions(-) diff --git a/assets/diagram-js.css b/assets/diagram-js.css index 879fad69e..9dfd124e1 100644 --- a/assets/diagram-js.css +++ b/assets/diagram-js.css @@ -272,17 +272,17 @@ svg.new-parent { stroke: none !important; } -marker.djs-dragger circle, -marker.djs-dragger path, -marker.djs-dragger polygon, -marker.djs-dragger polyline, -marker.djs-dragger rect { +.djs-dragger marker circle, +.djs-dragger marker path, +.djs-dragger marker polygon, +.djs-dragger marker polyline, +.djs-dragger marker rect { fill: var(--element-dragger-color) !important; stroke: none !important; } -marker.djs-dragger text, -marker.djs-dragger tspan { +.djs-dragger marker text, +.djs-dragger marker tspan { fill: none !important; stroke: var(--element-dragger-color) !important; } diff --git a/lib/features/complex-preview/ComplexPreview.js b/lib/features/complex-preview/ComplexPreview.js index b93e74c27..9f31b8139 100644 --- a/lib/features/complex-preview/ComplexPreview.js +++ b/lib/features/complex-preview/ComplexPreview.js @@ -131,8 +131,6 @@ export default class ComplexPreview { this._markers.forEach(([ element, marker ]) => this._canvas.removeMarker(element, marker)); this._markers = []; - - this._previewSupport.cleanUp(); } show() { diff --git a/lib/features/preview-support/PreviewSupport.js b/lib/features/preview-support/PreviewSupport.js index 889e4c64e..935cd1081 100644 --- a/lib/features/preview-support/PreviewSupport.js +++ b/lib/features/preview-support/PreviewSupport.js @@ -1,14 +1,9 @@ -import { - forEach -} from 'min-dash'; - import { append as svgAppend, attr as svgAttr, classes as svgClasses, clone as svgClone, create as svgCreate, - remove as svgRemove } from 'tiny-svg'; import { query as domQuery } from 'min-dom'; @@ -57,12 +52,6 @@ export default function PreviewSupport(elementRegistry, eventBus, canvas, styles this._styles = styles; this._clonedMarkers = {}; - - var self = this; - - eventBus.on('drag.cleanup', function() { - self.cleanUp(); - }); } PreviewSupport.$inject = [ @@ -72,15 +61,9 @@ PreviewSupport.$inject = [ 'styles' ]; -PreviewSupport.prototype.cleanUp = function() { - var self = this; - - forEach(self._clonedMarkers, function(clonedMarker) { - svgRemove(clonedMarker); - }); - - self._clonedMarkers = {}; -}; +// Markers are cleaned up with visuals, keep stub for compatibility +// cf. https://github.com/camunda/camunda-modeler/issues/4307 +PreviewSupport.prototype.cleanUp = function() {}; /** * Returns graphics of an element. @@ -154,7 +137,7 @@ PreviewSupport.prototype.addFrame = function(shape, group) { * @param {SVGElement} gfx * @param {string} [className="djs-dragger"] */ -PreviewSupport.prototype._cloneMarkers = function(gfx, className = 'djs-dragger') { +PreviewSupport.prototype._cloneMarkers = function(gfx, className = 'djs-dragger', rootGfx = gfx) { var self = this; if (gfx.childNodes) { @@ -163,7 +146,7 @@ PreviewSupport.prototype._cloneMarkers = function(gfx, className = 'djs-dragger' for (var i = 0; i < gfx.childNodes.length; i++) { // recursively clone markers of child nodes - self._cloneMarkers(gfx.childNodes[ i ], className); + self._cloneMarkers(gfx.childNodes[ i ], className, rootGfx); } } @@ -175,7 +158,8 @@ PreviewSupport.prototype._cloneMarkers = function(gfx, className = 'djs-dragger' if (svgAttr(gfx, markerType)) { var marker = getMarker(gfx, markerType, self._canvas.getContainer()); - self._cloneMarker(gfx, marker, markerType, className); + // Only clone marker if it is already present on the DOM + marker && self._cloneMarker(rootGfx, gfx, marker, markerType, className); } }); }; @@ -188,11 +172,13 @@ PreviewSupport.prototype._cloneMarkers = function(gfx, className = 'djs-dragger' * @param {string} markerType * @param {string} [className="djs-dragger"] */ -PreviewSupport.prototype._cloneMarker = function(gfx, marker, markerType, className = 'djs-dragger') { +PreviewSupport.prototype._cloneMarker = function(parentGfx, gfx, marker, markerType, className = 'djs-dragger') { var markerId = marker.id + '-' + className; var clonedMarker = this._clonedMarkers[ markerId ]; + parentGfx = parentGfx || this._canvas._svg; + if (!clonedMarker) { clonedMarker = svgClone(marker); @@ -204,12 +190,12 @@ PreviewSupport.prototype._cloneMarker = function(gfx, marker, markerType, classN this._clonedMarkers[ markerId ] = clonedMarker; - var defs = domQuery('defs', this._canvas._svg); + var defs = domQuery(':scope > defs', parentGfx); if (!defs) { defs = svgCreate('defs'); - svgAppend(this._canvas._svg, defs); + svgAppend(parentGfx, defs); } svgAppend(defs, clonedMarker); diff --git a/test/spec/features/complex-preview/ComplexPreviewSpec.js b/test/spec/features/complex-preview/ComplexPreviewSpec.js index e509dff0c..095d9ad54 100644 --- a/test/spec/features/complex-preview/ComplexPreviewSpec.js +++ b/test/spec/features/complex-preview/ComplexPreviewSpec.js @@ -226,8 +226,19 @@ describe('features/complex-preview', function() { // given complexPreview.create({ - created: [ - newShape + moved: [ + { + element: shape1, + delta: { x: 100, y: 100 } + }, + { + element: shape2, + delta: { x: 100, y: 100 } + }, + { + element: connection, + delta: { x: 100, y: 100 } + } ] }); @@ -240,6 +251,8 @@ describe('features/complex-preview', function() { expect(layer).to.exist; expect(layer.childNodes).to.have.length(0); + expect(domQuery('marker#marker-start-djs-dragging-clone', canvas.getContainer())).not.to.exist; + expect(domQuery('marker#marker-end-djs-dragging-clone', canvas.getContainer())).not.to.exist; })); }); diff --git a/test/spec/features/preview-support/renderer/MarkerRenderer.js b/test/spec/features/preview-support/renderer/MarkerRenderer.js index 95b6d3bf2..871766c4d 100644 --- a/test/spec/features/preview-support/renderer/MarkerRenderer.js +++ b/test/spec/features/preview-support/renderer/MarkerRenderer.js @@ -99,7 +99,7 @@ MarkerRenderer.prototype.addMarker = function(gfx, markerType) { svgAppend(marker, circle); - defs = domQuery('defs', this._canvas._svg); + defs = domQuery(':scope > defs', this._canvas._svg); if (!defs) { defs = svgCreate('defs'); From 0f12ab6aa7b0d283af5191ddaad09a8a56ae873c Mon Sep 17 00:00:00 2001 From: Martin Stamm Date: Tue, 28 May 2024 10:39:58 +0200 Subject: [PATCH 2/2] chore(preview-support): add deprecation warning for PreviewSupport#cleanup --- lib/features/preview-support/PreviewSupport.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/features/preview-support/PreviewSupport.js b/lib/features/preview-support/PreviewSupport.js index 935cd1081..ffc17c8af 100644 --- a/lib/features/preview-support/PreviewSupport.js +++ b/lib/features/preview-support/PreviewSupport.js @@ -63,7 +63,9 @@ PreviewSupport.$inject = [ // Markers are cleaned up with visuals, keep stub for compatibility // cf. https://github.com/camunda/camunda-modeler/issues/4307 -PreviewSupport.prototype.cleanUp = function() {}; +PreviewSupport.prototype.cleanUp = function() { + console.warn('PreviewSupport#cleanUp is deprecated and will be removed in future versions. You do not need to manually clean up previews anymore. cf. https://github.com/bpmn-io/diagram-js/pull/906'); +}; /** * Returns graphics of an element.