feat(connect): add connect-not-ok style for frames

bpmn-io · May 2, 2019 · 9d81e48 · 9d81e48
1 parent b6ba4d9
commit 9d81e48
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 10 deletions.
diff --git a/assets/diagram-js.css b/assets/diagram-js.css
@@ -65,6 +65,7 @@ svg.new-parent {
   stroke: rgba(255, 116, 0, 0.7) !important;
 }
 
+.djs-frame.connect-not-ok .djs-visual > :nth-child(1),
 .djs-frame.drop-not-ok .djs-visual > :nth-child(1) {
   stroke-width: 3px !important;
   stroke: #E56283 /* light-red */ !important;

diff --git a/test/spec/features/connect/ConnectSpec.js b/test/spec/features/connect/ConnectSpec.js
@@ -5,6 +5,10 @@ import {
   inject
 } from 'test/TestHelper';
 
+import {
+  classes as svgClasses
+} from 'tiny-svg';
+
 import { createCanvasEvent as canvasEvent } from '../../../util/MockEvents';
 
 import modelingModule from 'lib/features/modeling';
@@ -27,7 +31,7 @@ describe('features/connect', function() {
   }));
 
 
-  var rootShape, shape1, shape2, shape1child;
+  var rootShape, shape1, shape2, shape1child, shapeFrame;
 
   beforeEach(inject(function(elementFactory, canvas) {
 
@@ -58,6 +62,15 @@ describe('features/connect', function() {
     });
 
     canvas.addShape(shape1child, shape1);
+
+
+    shapeFrame = elementFactory.createShape({
+      id: 'frame',
+      x: 450, y: 300, width: 100, height: 100,
+      isFrame: true
+    });
+
+    canvas.addShape(shapeFrame, rootShape);
   }));
 
 
@@ -208,25 +221,42 @@ describe('features/connect', function() {
     }));
 
 
-    it('should remove markers', inject(
+    it('should add "connect-not-ok" marker to frame', inject(
       function(connect, dragging, canvas, elementRegistry) {
 
         // when
-        connect.start(canvasEvent({ x: 0, y: 0 }), shape1);
+        connect.start(canvasEvent({ x: 250, y: 250 }), shape1);
 
-        dragging.move(canvasEvent({ x: 40, y: 30 }));
+        dragging.move(canvasEvent({ x: 550, y: 150 }));
 
-        dragging.hover(canvasEvent({ x: 10, y: 10 }, { element: shape2 }));
+        dragging.hover(canvasEvent({ x: 550, y: 150 }, { element: shapeFrame }));
 
-        var hasMarker = canvas.hasMarker(shape2, 'connect-ok');
+        // then
+        var targetGfx = elementRegistry.getGraphics(shapeFrame);
 
-        dragging.end();
-
-        expect(canvas.hasMarker(shape2, 'connect-ok')).to.be.false;
-        expect(canvas.hasMarker(shape2, 'connect-ok')).not.to.eql(hasMarker);
+        expect(svgClasses(targetGfx).has('djs-frame')).to.equal(true);
+        expect(canvas.hasMarker(shapeFrame, 'connect-not-ok')).to.be.true;
       }
     ));
 
+
+    it('should remove markers', inject(function(connect, dragging, canvas) {
+
+      // when
+      connect.start(canvasEvent({ x: 0, y: 0 }), shape1);
+
+      dragging.move(canvasEvent({ x: 40, y: 30 }));
+
+      dragging.hover(canvasEvent({ x: 10, y: 10 }, { element: shape2 }));
+
+      var hasMarker = canvas.hasMarker(shape2, 'connect-ok');
+
+      dragging.end();
+
+      expect(canvas.hasMarker(shape2, 'connect-ok')).to.be.false;
+      expect(canvas.hasMarker(shape2, 'connect-ok')).not.to.eql(hasMarker);
+    }));
+
   });
 
 });
diff --git a/test/spec/features/connect/rules/ConnectRules.js b/test/spec/features/connect/rules/ConnectRules.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 ConnectRules(eventBus) {
   RuleProvider.call(this, eventBus);
 }
@@ -17,6 +21,10 @@ ConnectRules.prototype.init = function() {
     var source = context.source,
         target = context.target;
 
+    if (isFrameElement(target)) {
+      return false;
+    }
+
     if (source && target && source.parent === target.parent) {
       return { type: 'test:Connection' };
     }