feat: use drag.* events to set drop target styles

src/components/PlaygroundComponent.css

@@ -220,7 +220,7 @@
 }
 
 @media only screen and (min-width: 1650px) {
-  .cfp-root:not(.cfp-open-preview) .gu-unselectable .fjs-children.fjs-drop-container-vertical  {
+  .cfp-root:not(.cfp-open-preview).cfp-dragging .fjs-children.fjs-drop-container-vertical  {
     border-color: var(--drag-container-border-color);
   }
 }

src/components/PlaygroundComponent.js

@@ -64,6 +64,8 @@ export function PlaygroundComponent(props) {
   const resultContainerRef = useRef(null);
   const propertiesContainerRef = useRef(null);
 
+  const rootRef = useRef(null);
+
   // (1) initialize playground orchestrator
   useEffect(() => {
     playgroundRef.current = new FormPlayground({
@@ -195,10 +197,45 @@ export function PlaygroundComponent(props) {
     return setContainersLayout(containers, false);
   };
 
-  // (5) render
+  // (5) listen on dragging events to provide drop feedback
+  useEffect(() => {
+
+    const bindDropTargetListeners = () => {
+      const editor = playgroundRef.current.getEditor();
+      editor.on('drag.hover', function(event) {
+
+        const { container } = event;
+
+        if (
+          container.classList.contains('fjs-drop-container-horizontal') ||
+          container.classList.contains('fjs-drop-container-vertical')
+        ) {
+          rootRef.current.classList.add('cfp-dragging');
+        }
+      });
+
+      editor.on('drag.out', function(event) {
+        rootRef.current.classList.remove('cfp-dragging');
+      });
+    };
+
+    const playground = playgroundRef.current;
+
+    if (playground) {
+      playground.on('formPlayground.rendered', bindDropTargetListeners);
+    }
+
+    return () => {
+      if (playground) {
+        playground.off('formPlayground.rendered', bindDropTargetListeners);
+      }
+    };
+  });
+
+  // (6) render
   return html`
     <${LayoutContext.Provider} value=${ layoutContext }>
-    <div class="${classNames('cfp-root', { 'cfp-open-preview': previewOpen })}">
+    <div ref=${rootRef} class="${classNames('cfp-root', { 'cfp-open-preview': previewOpen })}">
       <div class="cfp-palette" ref=${ paletteContainerRef }></div>
       <div class="cfp-left">
         <${CollapsiblePanel} idx="${ FORM_DEFINITION_IDX }" title="Form Definition">

test/spec/CamundaFormPlayground.spec.js

@@ -344,4 +344,61 @@ describe('CamundaFormPlayground', function() {
 
   });
 
+
+  describe('dragging behavior', function() {
+
+    let playground;
+
+    beforeEach(async function() {
+      await waitFor(async () => {
+        playground = await createCamundaFormPlayground({
+          container,
+          schema
+        });
+      });
+    });
+
+    it('should add drop target styles on <drag.hover>', async function() {
+
+      // given
+      const formEditor = playground.getEditor();
+      formEditor.get('eventBus').fire('formEditor.rendered');
+
+      // when
+      formEditor.get('eventBus').fire('drag.hover', {
+        container: domQuery('.fjs-drop-container-horizontal', container)
+      });
+
+      // then
+      const root = domQuery('.cfp-root', container);
+
+      expect(root.classList.contains('cfp-dragging')).to.be.true;
+    });
+
+
+    it('should remove drop target styles on <drag.out>', async function() {
+
+      // given
+      const formEditor = playground.getEditor();
+      formEditor.get('eventBus').fire('formEditor.rendered');
+
+      // when
+      formEditor.get('eventBus').fire('drag.hover', {
+        container: domQuery('.fjs-drop-container-horizontal', container)
+      });
+
+      const root = domQuery('.cfp-root', container);
+
+      // assume
+      expect(root.classList.contains('cfp-dragging')).to.be.true;
+
+      // and when
+      formEditor.get('eventBus').fire('drag.out');
+
+      // then
+      expect(root.classList.contains('cfp-dragging')).to.be.false;
+    });
+
+  });
+
 });