feat(Create): add frame-drop-not-ok marker

bpmn-io · Apr 30, 2019 · 7b5b0df · 7b5b0df
1 parent bddf75d
commit 7b5b0df
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 2 deletions.
diff --git a/lib/features/create/Create.js b/lib/features/create/Create.js
@@ -3,7 +3,8 @@ var LOW_PRIORITY = 750;
 var MARKER_OK = 'drop-ok',
     MARKER_NOT_OK = 'drop-not-ok',
     MARKER_ATTACH = 'attach-ok',
-    MARKER_NEW_PARENT = 'new-parent';
+    MARKER_NEW_PARENT = 'new-parent',
+    MARKER_FRAME_NOT_OK = 'frame-drop-not-ok';
 
 import {
   append as svgAppend,
@@ -17,6 +18,10 @@ import {
   translate
 } from '../../util/SvgTransformUtil';
 
+import {
+  isFrameElement
+} from '../../util/Elements';
+
 
 /**
  * Adds the ability to create new shapes via drag and drop.
@@ -120,7 +125,9 @@ export default function Create(
   /** set drop marker on an element */
   function setMarker(element, marker) {
 
-    [ MARKER_ATTACH, MARKER_OK, MARKER_NOT_OK, MARKER_NEW_PARENT ].forEach(function(m) {
+    [
+      MARKER_ATTACH, MARKER_OK, MARKER_NOT_OK, MARKER_NEW_PARENT, MARKER_FRAME_NOT_OK
+    ].forEach(function(m) {
 
       if (m === marker) {
         canvas.addMarker(element, m);
@@ -185,6 +192,8 @@ export default function Create(
 
       if (canExecute && canExecute.attach) {
         setMarker(hover, MARKER_ATTACH);
+      } else if (!canExecute && isFrameElement(hover)) {
+        setMarker(hover, MARKER_FRAME_NOT_OK);
       } else {
         setMarker(hover, canExecute ? MARKER_NEW_PARENT : MARKER_NOT_OK);
       }

diff --git a/test/spec/features/create/CreateSpec.js b/test/spec/features/create/CreateSpec.js
@@ -40,6 +40,7 @@ describe('features/create - Create', function() {
       parentShape,
       hostShape,
       childShape,
+      frameShape,
       newShape;
 
   beforeEach(inject(function(elementFactory, canvas) {
@@ -75,6 +76,15 @@ describe('features/create - Create', function() {
     canvas.addShape(childShape, rootShape);
 
 
+    frameShape = elementFactory.createShape({
+      id: 'frameShape',
+      x: 400, y: 50, width: 100, height: 100,
+      frameOnly: true
+    });
+
+    canvas.addShape(frameShape, rootShape);
+
+
     newShape = elementFactory.createShape({
       id: 'newShape',
       x: 0, y: 0, width: 50, height: 50
@@ -264,6 +274,21 @@ describe('features/create - Create', function() {
     }));
 
 
+    it('should add "frame-drop-not-ok" marker', inject(function(canvas, create, elementRegistry, dragging) {
+      // given
+      var targetGfx = elementRegistry.getGraphics('frameShape');
+
+      // when
+      create.start(canvasEvent({ x: 0, y: 0 }), newShape);
+
+      dragging.move(canvasEvent({ x: 50, y: 25 }));
+      dragging.hover({ element: frameShape, gfx: targetGfx });
+      dragging.move(canvasEvent({ x: 50, y: 50 }));
+
+      expect(canvas.hasMarker(frameShape, 'frame-drop-not-ok')).to.be.true;
+    }));
+
+
     it('should add "attach-ok" marker', inject(function(canvas, create, elementRegistry, dragging) {
       // given
       var hostGfx = elementRegistry.getGraphics('hostShape');