fix(context-pad): remove append preview on context pad close

Closes #2150
bpmn-io · Apr 29, 2024 · 407a191 · 407a191
1 parent b790594
commit 407a191
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 4 deletions.
diff --git a/lib/features/context-pad/ContextPadProvider.js b/lib/features/context-pad/ContextPadProvider.js
@@ -110,6 +110,10 @@ export default function ContextPadProvider(
       entries.replace.action.click(event, shape);
     }
   });
+
+  eventBus.on('contextPad.close', function() {
+    appendPreview.cleanUp();
+  });
 }
 
 ContextPadProvider.$inject = [
@@ -244,16 +248,12 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
       create.start(event, shape, {
         source: element
       });
-
-      appendPreview.cleanUp();
     }
 
     var append = autoPlace ? function(_, element) {
       var shape = elementFactory.createShape(assign({ type: type }, options));
 
       autoPlace.append(element, shape);
-
-      appendPreview.cleanUp();
     } : appendStart;
 
     var previewAppend = autoPlace ? function(_, element) {

diff --git a/test/spec/features/context-pad/ContextPadProviderSpec.js b/test/spec/features/context-pad/ContextPadProviderSpec.js
@@ -737,6 +737,29 @@ describe('features - context-pad', function() {
       expect(domQueryAll('.djs-dragger', canvas.getLayer('complex-preview'))).to.have.length(2);
     }));
 
+
+    it('should remove append preview on close', inject(function(canvas, elementRegistry, contextPad) {
+
+      // given
+      var element = elementRegistry.get('Task_1');
+
+      contextPad.open(element);
+
+      // mock event
+      var event = padEvent('append.gateway');
+
+      contextPad.trigger('hover', event);
+
+      expect(canvas.getLayer('complex-preview')).to.exist;
+      expect(domQueryAll('.djs-dragger', canvas.getLayer('complex-preview'))).to.have.length(2);
+
+      // when
+      contextPad.close();
+
+      // then
+      expect(domQueryAll('.djs-dragger', canvas.getLayer('complex-preview'))).to.have.length(0);
+    }));
+
   });
 
 });