diff --git a/CHANGELOG.md b/CHANGELOG.md index 65c7fd5f6..4dce05719 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,10 @@ All notable changes to [diagram-js](https://github.com/bpmn-io/diagram-js) are d _**Note:** Yet to be released changes appear here._ +## 12.7.1 + +* `FIX`: revert selection outline removal for connections ([#820](https://github.com/bpmn-io/diagram-js/pull/820)) + ## 12.7.0 * `FEAT`: support `imageHtml` option for popup menu header entries ([#819](https://github.com/bpmn-io/diagram-js/pull/819)) diff --git a/lib/features/outline/Outline.js b/lib/features/outline/Outline.js index b4d6a743d..837712955 100644 --- a/lib/features/outline/Outline.js +++ b/lib/features/outline/Outline.js @@ -1,3 +1,5 @@ +import { getBBox } from '../../util/Elements'; + var LOW_PRIORITY = 500; import { @@ -75,6 +77,19 @@ export default function Outline(eventBus, styles) { } }); + eventBus.on([ 'connection.added', 'connection.changed' ], function(event) { + var element = event.element, + gfx = event.gfx; + + var outline = domQuery('.djs-outline', gfx); + + if (!outline) { + outline = createOutline(gfx, element); + svgAppend(gfx, outline); + } + + self.updateConnectionOutline(outline, element); + }); } @@ -106,6 +121,25 @@ Outline.prototype.updateShapeOutline = function(outline, element) { } }; +/** + * Updates the outline of a connection respecting the bounding box of + * the connection and an outline offset. + * Register an outline provider with the given priority. + * + * @param {SVGElement} outline + * @param {Element} connection + **/ +Outline.prototype.updateConnectionOutline = function(outline, connection) { + var bbox = getBBox(connection); + + svgAttr(outline, { + x: bbox.x - this.offset, + y: bbox.y - this.offset, + width: bbox.width + this.offset * 2, + height: bbox.height + this.offset * 2 + }); +}; + /** * Register an outline provider with the given priority. * diff --git a/test/spec/features/outline/OutlineSpec.js b/test/spec/features/outline/OutlineSpec.js index 8466ab922..893d76b4e 100755 --- a/test/spec/features/outline/OutlineSpec.js +++ b/test/spec/features/outline/OutlineSpec.js @@ -51,7 +51,7 @@ describe('features/outline/Outline', function() { })); - it('should not add outline to connection', inject(function(selection, canvas, elementRegistry) { + it('should add outline to connection', inject(function(selection, canvas, elementRegistry) { // given var connection = canvas.addConnection({ id: 'select1', waypoints: [ { x: 25, y: 25 }, { x: 115, y: 115 } ] }); @@ -63,7 +63,7 @@ describe('features/outline/Outline', function() { var gfx = elementRegistry.getGraphics(connection); var outline = domQuery('.djs-outline', gfx); - expect(outline).to.not.exist; + expect(outline).to.exist; expect(svgClasses(gfx).has('selected')).to.be.true; // Outline class is set }));