feat(create-pad): show entries after delay

camunda · May 16, 2024 · 928e112 · 928e112
1 parent 4069ea2
commit 928e112
Show file tree

Hide file tree

Showing 3 changed files with 141 additions and 10 deletions.
diff --git a/assets/create-pad.css b/assets/create-pad.css
@@ -13,7 +13,7 @@
     display: none;
   }
 
-  &:hover {
+  &.hover {
     z-index: 150;
 
     .djs-create-pad-icon {

diff --git a/lib/common/createPad/CreatePad.js b/lib/common/createPad/CreatePad.js
@@ -29,7 +29,8 @@ const ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="4 4 24 24">
   <polygon fill="white" points="17,15 17,10 15,10 15,15 10,15 10,17 15,17 15,22 17,22 17,17 22,17 22,15 "/>
 </svg>`;
 
-const HOVER_TIMEOUT_MS = 300;
+const MOUSE_ENTER_TIMEOUT_MS = 200;
+const ENTRY_MOUSE_ENTER_TIMEOUT_MS = 300;
 
 export default class CreatePad {
   constructor(canvas, eventBus) {
@@ -113,10 +114,20 @@ export default class CreatePad {
 
     if (this._mouseEnterTimeout) {
       clearTimeout(this._mouseEnterTimeout);
+
+      this._mouseEnterTimeout = null;
     }
 
-    if (this._mouseLeaveCallback) {
-      this._mouseLeaveCallback();
+    if (this._entryMouseEnterTimeout) {
+      clearTimeout(this._entryMouseEnterTimeout);
+
+      this._entryMouseEnterTimeout = null;
+    }
+
+    if (this._entryMouseLeaveCallback) {
+      this._entryMouseLeaveCallback();
+
+      this._entryMouseLeaveCallback = null;
     }
 
     this._container.innerHTML = '';
@@ -234,6 +245,20 @@ export default class CreatePad {
 
     html.appendChild(entriesHtml);
 
+    html.addEventListener('mouseenter', () => {
+      this._mouseEnterTimeout = setTimeout(() => {
+        html.classList.add('hover');
+      }, MOUSE_ENTER_TIMEOUT_MS);
+
+      html.addEventListener('mouseleave', () => {
+        clearTimeout(this._mouseEnterTimeout);
+
+        this._mouseEnterTimeout = null;
+
+        html.classList.remove('hover');
+      });
+    });
+
     return html;
   }
 
@@ -269,16 +294,20 @@ export default class CreatePad {
 
       if (action.hover) {
         html.addEventListener('mouseenter', (event) => {
-          this._mouseEnterTimeout = setTimeout(() => {
-            this._mouseLeaveCallback = action.hover(event, target);
-          }, HOVER_TIMEOUT_MS);
+          this._entryMouseEnterTimeout = setTimeout(() => {
+            this._entryMouseLeaveCallback = action.hover(event, target);
+          }, ENTRY_MOUSE_ENTER_TIMEOUT_MS);
         });
 
         html.addEventListener('mouseleave', (event) => {
-          clearTimeout(this._mouseEnterTimeout);
+          clearTimeout(this._entryMouseEnterTimeout);
+
+          this._entryMouseEnterTimeout = null;
+
+          if (this._entryMouseLeaveCallback) {
+            this._entryMouseLeaveCallback(event, target);
 
-          if (this._mouseLeaveCallback) {
-            this._mouseLeaveCallback(event, target);
+            this._entryMouseLeaveCallback = null;
           }
         });
       }

diff --git a/test/spec/common/createPad/CreatePad.spec.js b/test/spec/common/createPad/CreatePad.spec.js
@@ -66,6 +66,108 @@ describe('<CreatePad>', function() {
   });
 
 
+  describe('open on hover', function() {
+
+    beforeEach(bootstrapModeler(diagramXML, {
+      additionalModules: [
+        createCustomCreatePadModule()
+      ]
+    }));
+
+    let clock;
+
+    beforeEach(function() {
+      clock = sinon.useFakeTimers();
+    });
+
+    afterEach(function() {
+      clock.restore();
+    });
+
+
+    it('should open on mouseenter after 200ms delay', inject(function(canvas, customCreatePad, elementRegistry) {
+
+      // given
+      const task = elementRegistry.get('Task_1');
+
+      customCreatePad.open(task);
+
+      const html = canvas.getContainer().querySelector('.djs-create-pad');
+
+      expect(html).to.exist;
+
+      html.dispatchEvent(new MouseEvent('mouseenter'));
+
+      expect(html.classList.contains('hover')).to.be.false;
+
+      clock.tick(100);
+
+      expect(html.classList.contains('hover')).to.be.false;
+
+      // when
+      clock.tick(100);
+
+      // then
+      expect(html.classList.contains('hover')).to.be.true;
+    }));
+
+
+    it('should close on mouseleave', inject(function(canvas, customCreatePad, elementRegistry) {
+
+      // given
+      const task = elementRegistry.get('Task_1');
+
+      customCreatePad.open(task);
+
+      const html = canvas.getContainer().querySelector('.djs-create-pad');
+
+      expect(html).to.exist;
+
+      html.dispatchEvent(new MouseEvent('mouseenter'));
+
+      expect(html.classList.contains('hover')).to.be.false;
+
+      clock.tick(200);
+
+      expect(html.classList.contains('hover')).to.be.true;
+
+      // when
+      html.dispatchEvent(new MouseEvent('mouseleave'));
+
+      // then
+      expect(html.classList.contains('hover')).to.be.false;
+    }));
+
+
+    it('should not open on mouseenter after 200ms delay if closed', inject(function(canvas, customCreatePad, elementRegistry) {
+
+      // given
+      const task = elementRegistry.get('Task_1');
+
+      customCreatePad.open(task);
+
+      const html = canvas.getContainer().querySelector('.djs-create-pad');
+
+      expect(html).to.exist;
+
+      html.dispatchEvent(new MouseEvent('mouseenter'));
+
+      expect(html.classList.contains('hover')).to.be.false;
+
+      clock.tick(100);
+
+      expect(html.classList.contains('hover')).to.be.false;
+
+      // when
+      customCreatePad.close();
+
+      // then
+      expect(customCreatePad._mouseEnterTimeout).to.be.null;
+    }));
+
+  });
+
+
   describe('getHtml', function() {
 
     beforeEach(bootstrapModeler(diagramXML, {