From 571551f66cca6a35fd10be8665bf340a0f0139e6 Mon Sep 17 00:00:00 2001
From: Philipp Fromme <philipp.fromme@camunda.com>
Date: Mon, 29 Jan 2024 15:31:08 +0100
Subject: [PATCH] feat: keep selection but hide during selecting

---
 assets/diagram-js.css                          |  6 ++++++
 lib/features/lasso-tool/LassoTool.js           |  6 ++++++
 test/spec/features/lasso-tool/LassoToolSpec.js | 13 ++++++++++++-
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/assets/diagram-js.css b/assets/diagram-js.css
index ada938d74..492d1d6ba 100644
--- a/assets/diagram-js.css
+++ b/assets/diagram-js.css
@@ -191,6 +191,12 @@ svg.new-parent {
   pointer-events: none;
 }
 
+.djs-lasso-selection .djs-outline,
+.djs-lasso-selection .djs-selection-outline,
+.djs-lasso-selection .djs-context-pad {
+  display: none !important;
+}
+
 /**
  * Resize styles
  */
diff --git a/lib/features/lasso-tool/LassoTool.js b/lib/features/lasso-tool/LassoTool.js
index aff04ecf3..2352c716c 100644
--- a/lib/features/lasso-tool/LassoTool.js
+++ b/lib/features/lasso-tool/LassoTool.js
@@ -27,6 +27,8 @@ import {
 
 var LASSO_TOOL_CURSOR = 'crosshair';
 
+var LASSO_TOOL_SELECTING_CLS = 'djs-lasso-selection';
+
 /**
  * @param {EventBus} eventBus
  * @param {Canvas} canvas
@@ -130,6 +132,8 @@ export default function LassoTool(
 
     context.bbox = toBBox(event);
     visuals.create(context);
+
+    canvas.addMarker(canvas.getRootElement(), LASSO_TOOL_SELECTING_CLS);
   });
 
   eventBus.on('lasso.move', function(event) {
@@ -145,6 +149,8 @@ export default function LassoTool(
     var context = event.context;
 
     visuals.remove(context);
+
+    canvas.removeMarker(canvas.getRootElement(), LASSO_TOOL_SELECTING_CLS);
   });
 
 
diff --git a/test/spec/features/lasso-tool/LassoToolSpec.js b/test/spec/features/lasso-tool/LassoToolSpec.js
index 35115b53a..bff0e5382 100755
--- a/test/spec/features/lasso-tool/LassoToolSpec.js
+++ b/test/spec/features/lasso-tool/LassoToolSpec.js
@@ -178,7 +178,18 @@ describe('features/lasso-tool', function() {
       dragging.move(canvasEvent({ x: 200, y: 300 }));
 
       // then
-      expect(canvas._svg.querySelector('.djs-lasso-overlay')).to.exist;
+      expect(canvas.getContainer().querySelector('.djs-lasso-overlay')).to.exist;
+    }));
+
+
+    it('should indicate selecting', inject(function(lassoTool, canvas, dragging) {
+
+      // when
+      lassoTool.activateLasso(canvasEvent({ x: 100, y: 100 }));
+      dragging.move(canvasEvent({ x: 200, y: 300 }));
+
+      // then
+      expect(canvas.getContainer().querySelector('.djs-lasso-selection')).to.exist;
     }));
 
   });