Make hosts sticky for valid attachments

assets/diagram-js.css

@@ -176,6 +176,10 @@ marker.djs-dragger text {
   pointer-events: none;
 }
 
+.djs-element.attach-ok .djs-hit {
+  stroke-width: 60px !important;
+}
+
 /**
  * all pointer events for hit shape
  */

lib/features/attach-support/AttachSupport.js

@@ -17,10 +17,13 @@ import { getNewAttachShapeDelta } from '../../util/AttachUtil';
 
 import inherits from 'inherits';
 
+import CommandInterceptor from '../../command/CommandInterceptor';
+
+
 var LOW_PRIORITY = 251,
     HIGH_PRIORITY = 1401;
 
-import CommandInterceptor from '../../command/CommandInterceptor';
+var MARKER_ATTACH = 'attach-ok';
 
 
 /**
@@ -34,10 +37,11 @@ import CommandInterceptor from '../../command/CommandInterceptor';
  *
  * @param {didi.Injector} injector
  * @param {EventBus} eventBus
+ * @param {Canvas} canvas
  * @param {Rules} rules
  * @param {Modeling} modeling
  */
-export default function AttachSupport(injector, eventBus, rules, modeling) {
+export default function AttachSupport(injector, eventBus, canvas, rules, modeling) {
 
   CommandInterceptor.call(this, eventBus);
 
@@ -73,6 +77,30 @@ export default function AttachSupport(injector, eventBus, rules, modeling) {
     });
   });
 
+  // add attach-ok marker to current host
+  movePreview && eventBus.on('shape.move.start', function(event) {
+    var context = event.context,
+        shapes = context.shapes;
+
+    if (shapes.length !== 1) {
+      return;
+    }
+
+    var shape = shapes[0];
+
+    var host = shape.host;
+
+    if (host) {
+      canvas.addMarker(host, MARKER_ATTACH);
+
+      eventBus.once([
+        'shape.move.out',
+        'shape.move.cleanup'
+      ], function() {
+        canvas.removeMarker(host, MARKER_ATTACH);
+      });
+    }
+  });
 
   // add all attachers to move closure
   this.preExecuted('elements.move', HIGH_PRIORITY, function(e) {
@@ -95,7 +123,7 @@ export default function AttachSupport(injector, eventBus, rules, modeling) {
         attachers;
 
     // we only support attachment / detachment of one element
-    if (shapes.length > 1) {
+    if (shapes.length !== 1) {
       return;
     }
 
@@ -267,6 +295,7 @@ inherits(AttachSupport, CommandInterceptor);
 AttachSupport.$inject = [
   'injector',
   'eventBus',
+  'canvas',
   'rules',
   'modeling'
 ];

test/spec/features/attach-support/AttachSupportSpec.js

@@ -1267,6 +1267,19 @@ describe('features/attach-support', function() {
     }));
 
 
+    it('should add attachment marker on start', inject(function(move, dragging, elementRegistry) {
+      // given
+      var hostGfx = elementRegistry.getGraphics(host);
+
+      // when
+      move.start(canvasEvent({ x: 800, y: 100 }), attacher);
+      dragging.move(canvasEvent({ x: 750, y: 100 }));
+
+      // then
+      expect(svgClasses(hostGfx).has('attach-ok')).to.be.true;
+    }));
+
+
     it('should remove attachment marker', inject(function(move, dragging, elementRegistry) {
       // given
       var hostGfx = elementRegistry.getGraphics(host);