diff --git a/assets/diagram-js.css b/assets/diagram-js.css index dd30705ba..d5bddae72 100644 --- a/assets/diagram-js.css +++ b/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 */ diff --git a/lib/features/attach-support/AttachSupport.js b/lib/features/attach-support/AttachSupport.js index 3fca67a4b..2b0975d87 100644 --- a/lib/features/attach-support/AttachSupport.js +++ b/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' ]; diff --git a/test/spec/features/attach-support/AttachSupportSpec.js b/test/spec/features/attach-support/AttachSupportSpec.js index 831bf8474..1bfd5e526 100644 --- a/test/spec/features/attach-support/AttachSupportSpec.js +++ b/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);