feat(styles): add drop-not-ok style for frame elements

assets/diagram-js.css

@@ -65,6 +65,11 @@ svg.new-parent {
   stroke: rgba(255, 116, 0, 0.7) !important;
 }
 
+.djs-frame.drop-not-ok .djs-visual > :nth-child(1) {
+  stroke-width: 3px !important;
+  stroke: #E56283 /* light-red */ !important;
+  fill: none !important;
+}
 
 /**
 * Selection box style

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,
+      isFrame: true
+    });
+
+    canvas.addShape(frameShape, rootShape);
+
+
     newShape = elementFactory.createShape({
       id: 'newShape',
       x: 0, y: 0, width: 50, height: 50
@@ -264,6 +274,22 @@ describe('features/create - Create', function() {
     }));
 
 
+    it('should add "drop-not-ok" marker to frame', 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(svgClasses(targetGfx).has('djs-frame')).to.be.true;
+      expect(canvas.hasMarker(frameShape, 'drop-not-ok')).to.be.true;
+    }));
+
+
     it('should add "attach-ok" marker', inject(function(canvas, create, elementRegistry, dragging) {
       // given
       var hostGfx = elementRegistry.getGraphics('hostShape');

test/spec/features/move/MovePreviewSpec.js

@@ -270,6 +270,48 @@ describe('features/move - MovePreview', function() {
   });
 
 
+  describe('frame elements', function() {
+
+    var frameShape;
+
+    beforeEach(inject(function(elementFactory, canvas) {
+
+      frameShape = elementFactory.createShape({
+        id: 'frameShape',
+        x: 450, y: 50, width: 400, height: 200,
+        isFrame: true
+      });
+
+      canvas.addShape(frameShape, rootShape);
+    }));
+
+    it('should indicate drop not allowed', inject(function(move, dragging, elementRegistry) {
+
+      // given
+      move.start(canvasEvent({ x: 10, y: 10 }), childShape);
+
+      var targetGfx = elementRegistry.getGraphics(frameShape);
+
+      // when
+      dragging.move(canvasEvent({ x: 300, y: 20 }));
+      dragging.hover(canvasEvent({ x: 300, y: 20 }, {
+        element: frameShape,
+        gfx: elementRegistry.getGraphics(childShape)
+      }));
+
+      dragging.move(canvasEvent({ x: 300, y: 22 }));
+
+      // then
+      var ctx = dragging.context();
+      expect(ctx.data.context.canExecute).to.equal(false);
+
+      expect(svgClasses(targetGfx).has('djs-frame')).to.equal(true);
+      expect(svgClasses(targetGfx).has('drop-not-ok')).to.equal(true);
+    }));
+
+  });
+
+
   describe('connections', function() {
 
     var host, attacher, parentShape2, shape, connectionA, connectionB;

test/spec/features/move/rules/MoveRules.js

@@ -2,6 +2,10 @@ import inherits from 'inherits';
 
 import RuleProvider from 'lib/features/rules/RuleProvider';
 
+import {
+  isFrameElement
+} from 'lib/util/Elements';
+
 export default function MoveRules(eventBus) {
   RuleProvider.call(this, eventBus);
 }
@@ -17,6 +21,11 @@ MoveRules.prototype.init = function() {
     var target = context.target,
         shapes = context.shapes;
 
+    // not allowed to move on frame elements
+    if (isFrameElement(target)) {
+      return false;
+    }
+
     // check that we do not accidently try to drop elements
     // onto themselves or children of themselves
     while (target) {