feat(feel-popup): fire dragging events

Closes #289
bpmn-io · Sep 26, 2023 · d6feb96 · d6feb96
1 parent 0694e2f
commit d6feb96
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,8 @@ All notable changes to [`@bpmn-io/properties-panel`](https://github.com/bpmn-io/
 ___Note:__ Yet to be released changes appear here._
 
 * `FEAT`: improve FEEL popup lifecycle events ([#294](https://github.com/bpmn-io/properties-panel/pull/294))
+* `FEAT`: add drag trap to popup component ([#289](https://github.com/bpmn-io/properties-panel/issues/289))
+* `FEAT`: allow listen to `feelPopup.dragstart`, `feelPopup.dragover` and `feelPopup.dragend` events ([#299](https://github.com/bpmn-io/properties-panel/pull/292))
 
 ## 3.7.1
 

diff --git a/src/components/Popup.js b/src/components/Popup.js
@@ -4,8 +4,6 @@ import { useEffect, useRef } from 'preact/hooks';
 
 import classNames from 'classnames';
 
-import { isFunction } from 'min-dash';
-
 import * as focusTrap from 'focus-trap';
 
 import { DragIcon } from './icons';
@@ -24,7 +22,6 @@ const noop = () => {};
  * @param {HTMLElement} [props.container]
  * @param {string} [props.className]
  * @param {boolean} [props.delayInitialFocus]
- * @param {Function} [props.emit]
  * @param {{x: number, y: number}} [props.position]
  * @param {number} [props.width]
  * @param {number} [props.height]
@@ -142,7 +139,7 @@ function Title(props) {
     children,
     className,
     draggable,
-    emit,
+    emit = () => {},
     title,
     ...rest
   } = props;
@@ -174,7 +171,7 @@ function Title(props) {
     popupParent.style.left = newPosition.x + 'px';
 
     // notify interested parties
-    isFunction(emit) && emit('dragover', { newPosition, delta });
+    emit('dragover', { newPosition, delta });
   };
 
   const onMoveStart = (event) => {
@@ -194,14 +191,14 @@ function Title(props) {
     };
 
     // notify interested parties
-    isFunction(emit) && emit('dragstart');
+    emit('dragstart');
   };
 
   const onMoveEnd = () => {
     context.current.newPosition = null;
 
     // notify interested parties
-    isFunction(emit) && emit('dragend');
+    emit('dragend');
   };
 
   return (

diff --git a/src/components/entries/FEEL/FeelPopup.js b/src/components/entries/FEEL/FeelPopup.js
@@ -183,6 +183,7 @@ function FeelPopupComponent(props) {
     <Popup
       container={ container }
       className="bio-properties-panel-feel-popup"
+      emit={ emit }
       position={ position }
       title={ title }
       onClose={ onClose }
@@ -198,6 +199,7 @@ function FeelPopupComponent(props) {
     >
       <Popup.Title
         title={ title }
+        emit={ emit }
         draggable />
       <Popup.Body>
         <div

diff --git a/test/spec/components/FeelPopup.spec.js b/test/spec/components/FeelPopup.spec.js
@@ -158,6 +158,42 @@ describe('<FeelPopup>', function() {
 
   describe('events', function() {
 
+    function expectDraggingEvent(event) {
+
+      it('should listen on <' + event + '>', async function() {
+
+        // given
+        const eventBus = new EventBus();
+
+        const spy = sinon.spy();
+
+        eventBus.on(event, spy);
+
+        createFeelPopup({ popupContainer: container, eventBus }, container);
+
+        // assume
+        expect(getFeelEditor(container)).to.not.exist;
+
+        // when
+        await act(() => {
+          eventBus.fire('feelPopup._open');
+        });
+
+        const header = domQuery('.bio-properties-panel-popup__header', container);
+        const dragger = domQuery('.bio-properties-panel-popup__drag-handle', header);
+        const draggerBounds = dragger.getBoundingClientRect();
+
+        // when
+        startDragging(dragger);
+        moveDragging(dragger, { clientX: draggerBounds.x + 20, clientY: draggerBounds.y });
+        endDragging(dragger);
+
+        // then
+        expect(spy).to.have.been.calledOnce;
+      });
+    }
+
+
     it('should listen on <feelPopup.opened>', async function() {
 
       // given
@@ -255,6 +291,15 @@ describe('<FeelPopup>', function() {
     });
 
 
+    expectDraggingEvent('feelPopup.dragstart');
+
+
+    expectDraggingEvent('feelPopup.dragover');
+
+
+    expectDraggingEvent('feelPopup.dragend');
+
+
     it('<feelPopup.open>', async function() {
 
       // given
@@ -703,4 +748,42 @@ function getFeelEditor(container) {
 
 function getFeelersEditor(container) {
   return domQuery('.bio-properties-panel-feelers-editor-container', container);
+}
+
+function dispatchEvent(element, type, options = {}) {
+  const event = document.createEvent('Event');
+
+  event.initEvent(type, true, true);
+
+  Object.keys(options).forEach(key => event[ key ] = options[ key ]);
+
+  element.dispatchEvent(event);
+}
+
+function startDragging(node, position) {
+  if (!position) {
+    const bounds = node.getBoundingClientRect();
+    position = {
+      clientX: bounds.x,
+      clientY: bounds.y
+    };
+  }
+
+  dispatchEvent(node, 'dragstart', position);
+}
+
+function moveDragging(node, position) {
+  if (!position) {
+    const bounds = node.getBoundingClientRect();
+    position = {
+      clientX: bounds.x + 20,
+      clientY: bounds.y + 20
+    };
+  }
+
+  dispatchEvent(node, 'dragover', position);
+}
+
+function endDragging(node) {
+  dispatchEvent(node, 'dragend');
 }