feat(feel-popup): fire dragging events

bpmn-io · Sep 25, 2023 · 0f5bf41 · 0f5bf41
1 parent 9c027f2
commit 0f5bf41
Show file tree

Hide file tree

Showing 2 changed files with 147 additions and 0 deletions.
diff --git a/src/components/entries/FEEL/FeelPopup.js b/src/components/entries/FEEL/FeelPopup.js
@@ -107,6 +107,7 @@ export default function FEELPopupRoot(props) {
           onClose={ handleClose }
           container={ popupContainer }
           sourceElement={ sourceElement }
+          emit={ emit }
           { ...popupConfig } />
       )}
       { props.children }
@@ -117,6 +118,7 @@ export default function FEELPopupRoot(props) {
 function FeelPopupComponent(props) {
   const {
     container,
+    emit,
     id,
     hostLanguage,
     onInput,
@@ -166,6 +168,7 @@ function FeelPopupComponent(props) {
     <Popup
       container={ container }
       className="bio-properties-panel-feel-popup"
+      emit={ emit }
       position={ position }
       title={ title }
       onClose={ onClose }
@@ -180,6 +183,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
@@ -210,6 +210,111 @@ describe('<FeelPopup>', function() {
     });
 
 
+    it('should listen on <feelPopup.dragstart>', async function() {
+
+      // given
+      const container = document.createElement('div');
+
+      const eventBus = new EventBus();
+
+      const spy = sinon.spy();
+
+      eventBus.on('feelPopup.dragstart', spy);
+
+      createFeelPopup({ popupContainer: container, eventBus }, container);
+
+      // assume
+      expect(getFeelEditor(document.body)).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);
+
+      // when
+      startDragging(dragger);
+      endDragging(dragger);
+
+      // then
+      expect(spy).to.have.been.calledOnce;
+    });
+
+
+    it('should listen on <feelPopup.dragover>', async function() {
+
+      // given
+      const eventBus = new EventBus();
+
+      const spy = sinon.spy();
+
+      eventBus.on('feelPopup.dragover', 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
+      await act(() => {
+        startDragging(dragger);
+        moveDragging(dragger, { clientX: draggerBounds.x + 20, clientY: draggerBounds.y });
+      });
+
+      // then
+      expect(spy).to.have.been.calledOnce;
+    });
+
+
+    it('should listen on <feelPopup.dragend>', async function() {
+
+      // given
+      const eventBus = new EventBus();
+
+      const spy = sinon.spy();
+
+      eventBus.on('feelPopup.dragend', 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();
+
+      debugger;
+
+      // when
+      await act(() => {
+        startDragging(dragger);
+        moveDragging(dragger, { clientX: draggerBounds.x + 20, clientY: draggerBounds.y });
+        endDragging(dragger);
+      });
+
+
+      // then
+      expect(spy).to.have.been.calledOnce;
+    });
+
+
     it('<feelPopup.open>', async function() {
 
       // given
@@ -654,4 +759,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');
 }