feat(create): hide preview without hover

This fixes the case where moving outside the canvas indicates drop would be allowed while it's not. Related to camunda/camunda-modeler#1481
bpmn-io · Sep 6, 2019 · c52518d · c52518d
1 parent 73c7a43
commit c52518d
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 7 deletions.
diff --git a/lib/features/create/CreatePreview.js b/lib/features/create/CreatePreview.js
@@ -26,10 +26,6 @@ export default function CreatePreview(
 
     svgAttr(dragGroup, styles.cls('djs-drag-group', [ 'no-events' ]));
 
-    var defaultLayer = canvas.getDefaultLayer();
-
-    svgAppend(defaultLayer, dragGroup);
-
     var childrenGfx = svgCreate('g');
 
     elements.forEach(function(element) {
@@ -58,7 +54,8 @@ export default function CreatePreview(
 
   eventBus.on('create.move', LOW_PRIORITY, function(event) {
 
-    var context = event.context,
+    var hover = event.hover,
+        context = event.context,
         elements = context.elements,
         dragGroup = context.dragGroup;
 
@@ -67,7 +64,19 @@ export default function CreatePreview(
       dragGroup = context.dragGroup = createDragGroup(elements);
     }
 
-    translate(dragGroup, event.x, event.y);
+    var defaultLayer;
+
+    if (hover) {
+      if (!dragGroup.parentNode) {
+        defaultLayer = canvas.getDefaultLayer();
+
+        svgAppend(defaultLayer, dragGroup);
+      }
+
+      translate(dragGroup, event.x, event.y);
+    } else {
+      svgRemove(dragGroup);
+    }
   });
 
   eventBus.on('create.cleanup', function(event) {

diff --git a/test/spec/features/create/CreatePreviewSpec.js b/test/spec/features/create/CreatePreviewSpec.js
@@ -16,6 +16,8 @@ import rulesModule from './rules';
 
 import { queryAll as domQueryAll } from 'min-dom';
 
+import { attr as svgAttr } from 'tiny-svg';
+
 var testModules = [
   createModule,
   rulesModule,
@@ -133,6 +135,89 @@ describe('features/create - CreatePreviewSpec', function() {
       expect(dragGroup.parentNode).not.to.exist;
     }));
 
+
+    it('should update preview', inject(function(canvas, create, dragging) {
+
+      // given
+      var rootElement = canvas.getRootElement(),
+          rootElementGfx = canvas.getGraphics(rootElement);
+
+      create.start(canvasEvent({ x: 0, y: 0 }), newElements);
+
+      dragging.hover({ element: rootElement, gfx: rootElementGfx });
+
+      // when
+      dragging.move(canvasEvent({ x: 100, y: 100 }));
+
+      var context = dragging.context(),
+          dragGroup = context.data.context.dragGroup;
+
+      expect(dragGroup.parentNode).to.exist;
+
+      expect(getPositionFromMatrix(svgAttr(dragGroup, 'transform'))).to.eql({
+        x: 100,
+        y: 100
+      });
+
+      // when
+      dragging.move(canvasEvent({ x: 200, y: 200 }));
+
+      expect(dragGroup.parentNode).to.exist;
+
+      expect(getPositionFromMatrix(svgAttr(dragGroup, 'transform'))).to.eql({
+        x: 200,
+        y: 200
+      });
+    }));
+
+
+    it('should NOT update preview if no hover', inject(function(canvas, create, dragging) {
+
+      // given
+      var rootElement = canvas.getRootElement(),
+          rootElementGfx = canvas.getGraphics(rootElement);
+
+      create.start(canvasEvent({ x: 0, y: 0 }), newElements);
+
+      dragging.hover({ element: rootElement, gfx: rootElementGfx });
+
+      // when
+      dragging.move(canvasEvent({ x: 100, y: 100 }));
+
+      var context = dragging.context(),
+          dragGroup = context.data.context.dragGroup;
+
+      expect(dragGroup.parentNode).to.exist;
+
+      expect(getPositionFromMatrix(svgAttr(dragGroup, 'transform'))).to.eql({
+        x: 100,
+        y: 100
+      });
+
+      // when
+      dragging.out();
+
+      dragging.move(canvasEvent({ x: 200, y: 200 }));
+
+      expect(dragGroup.parentNode).not.to.exist;
+
+      expect(getPositionFromMatrix(svgAttr(dragGroup, 'transform'))).to.eql({
+        x: 100,
+        y: 100
+      });
+    }));
+
   });
 
-});
+});
+
+// helpers //////////
+
+function getPositionFromMatrix(transformMatrix) {
+  var entries = transformMatrix.replace('matrix(', '').replace(')', '').split(' ');
+
+  return {
+    x: parseInt(entries[4]),
+    y: parseInt(entries[5])
+  };
+}