feat(preview-support): add copied marker as part of visual

closes #904

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;
 }

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() {

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);

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;
   }));
 
 });

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');