From 05a461c522d95b969d32c8e5ad527ae76df33e75 Mon Sep 17 00:00:00 2001 From: Maciej Barelkowski Date: Fri, 10 Jun 2022 08:54:57 +0200 Subject: [PATCH] feat: add alignment buttons for multi-element context pad Related to #1680 --- lib/Modeler.js | 2 +- .../AlignElementsContextPadProvider.js | 72 ++++++++++++ .../align-elements/AlignElementsIcons.js | 14 +++ lib/features/align-elements/index.js | 13 +++ .../resources/align-bottom-tool.svg | 1 + .../align-horizontal-center-tool.svg | 1 + .../resources/align-left-tool.svg | 1 + .../resources/align-right-tool.svg | 1 + .../resources/align-top-tool.svg | 1 + .../resources/align-vertical-center-tool.svg | 1 + .../context-pad/ContextPadProvider.js | 12 ++ .../distribute-horizontally-tool.svg | 1 + .../resources/distribute-vertically-tool.svg | 1 + .../align-elements/BpmnAlignElementsSpec.js | 105 +++++++++++++++++- .../context-pad/ContextPadProviderSpec.js | 79 ++++++------- 15 files changed, 264 insertions(+), 41 deletions(-) create mode 100644 lib/features/align-elements/AlignElementsContextPadProvider.js create mode 100644 lib/features/align-elements/AlignElementsIcons.js create mode 100644 lib/features/align-elements/index.js create mode 100644 lib/features/align-elements/resources/align-bottom-tool.svg create mode 100644 lib/features/align-elements/resources/align-horizontal-center-tool.svg create mode 100644 lib/features/align-elements/resources/align-left-tool.svg create mode 100644 lib/features/align-elements/resources/align-right-tool.svg create mode 100644 lib/features/align-elements/resources/align-top-tool.svg create mode 100644 lib/features/align-elements/resources/align-vertical-center-tool.svg create mode 100644 lib/features/distribute-elements/resources/distribute-horizontally-tool.svg create mode 100644 lib/features/distribute-elements/resources/distribute-vertically-tool.svg diff --git a/lib/Modeler.js b/lib/Modeler.js index 717232ba98..7aedb9de40 100644 --- a/lib/Modeler.js +++ b/lib/Modeler.js @@ -10,7 +10,7 @@ import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'; import TouchModule from 'diagram-js/lib/navigation/touch'; import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll'; -import AlignElementsModule from 'diagram-js/lib/features/align-elements'; +import AlignElementsModule from './features/align-elements'; import AutoPlaceModule from './features/auto-place'; import AutoResizeModule from './features/auto-resize'; import AutoScrollModule from 'diagram-js/lib/features/auto-scroll'; diff --git a/lib/features/align-elements/AlignElementsContextPadProvider.js b/lib/features/align-elements/AlignElementsContextPadProvider.js new file mode 100644 index 0000000000..721bd87f40 --- /dev/null +++ b/lib/features/align-elements/AlignElementsContextPadProvider.js @@ -0,0 +1,72 @@ +import ICONS from './AlignElementsIcons'; + +import { + assign, + forEach +} from 'min-dash'; + +var ALIGNMENT_OPTIONS = [ + 'left', + 'center', + 'right', + 'top', + 'middle', + 'bottom' +]; + +var LOW_PRIORITY = 900; + +/** + * A provider for align elements context pad + */ +export default function AlignElementsContextPadProvider(contextPad, alignElements, translate) { + + contextPad.registerProvider(LOW_PRIORITY, this); + + this._contextPad = contextPad; + + this._alignElements = alignElements; + this._translate = translate; +} + +AlignElementsContextPadProvider.$inject = [ + 'contextPad', + 'alignElements', + 'translate' +]; + +AlignElementsContextPadProvider.prototype.getMultiElementContextPadEntries = function(elements) { + var actions = {}; + + if (this._isAllowed(elements)) { + assign(actions, this._getEntries(elements)); + } + + return actions; +}; + +AlignElementsContextPadProvider.prototype._isAllowed = function(elements) { + return true; +}; + +AlignElementsContextPadProvider.prototype._getEntries = function(elements) { + var alignElements = this._alignElements, + translate = this._translate; + + var entries = {}; + + forEach(ALIGNMENT_OPTIONS, function(alignment) { + entries['align-elements-' + alignment] = { + group: 'align', + title: translate('Align elements ' + alignment), + imageUrl: ICONS[alignment], + action: { + click: function(event, elements) { + alignElements.trigger(elements, alignment); + } + } + }; + }); + + return entries; +}; diff --git a/lib/features/align-elements/AlignElementsIcons.js b/lib/features/align-elements/AlignElementsIcons.js new file mode 100644 index 0000000000..c76abb57d4 --- /dev/null +++ b/lib/features/align-elements/AlignElementsIcons.js @@ -0,0 +1,14 @@ +/** + * To change the icons, call `encodeURIComponent` with modified SVG, + * and add `data:image/svg+xml;utf8,` in the beginning of the string. + */ +var icons = { + bottom: 'data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%222048%22%20height%3D%222048%22%3E%3Cpath%20d%3D%22M0%20442v1314h2044V442h-584v1168h-146V880H730v730H584V442H0zm146%20146h292v1022H146V588zm1460%200h292v1022h-292V588zm-730%20438h292v584H876v-584z%22%20style%3D%22color%3A%23000%3Bfont-style%3Anormal%3Bfont-variant%3Anormal%3Bfont-weight%3A400%3Bfont-stretch%3Anormal%3Bfont-size%3Amedium%3Bline-height%3Anormal%3Bfont-family%3Asans-serif%3Btext-indent%3A0%3Btext-align%3Astart%3Btext-decoration%3Anone%3Btext-decoration-line%3Anone%3Btext-decoration-style%3Asolid%3Btext-decoration-color%3A%23000%3Bletter-spacing%3Anormal%3Bword-spacing%3Anormal%3Btext-transform%3Anone%3Bdirection%3Altr%3Bblock-progression%3Atb%3Bwriting-mode%3Alr-tb%3Bbaseline-shift%3Abaseline%3Btext-anchor%3Astart%3Bwhite-space%3Anormal%3Bclip-rule%3Anonzero%3Bdisplay%3Ainline%3Boverflow%3Avisible%3Bvisibility%3Avisible%3Bopacity%3A1%3Bisolation%3Aauto%3Bmix-blend-mode%3Anormal%3Bcolor-interpolation%3AsRGB%3Bcolor-interpolation-filters%3AlinearRGB%3Bsolid-color%3A%23000%3Bsolid-opacity%3A1%3Bfill%3A%23282828%3Bfill-opacity%3A1%3Bfill-rule%3Aevenodd%3Bstroke%3Anone%3Bstroke-width%3A146.00001526%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-dashoffset%3A0%3Bstroke-opacity%3A1%3Bcolor-rendering%3Aauto%3Bimage-rendering%3Aauto%3Bshape-rendering%3Aauto%3Btext-rendering%3Aauto%3Benable-background%3Aaccumulate%22%2F%3E%3C%2Fsvg%3E', + center: 'data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%222048%22%20width%3D%222048%22%3E%3Cpath%20d%3D%22M1027.973%201318v146%22%20style%3D%22fill%3Anone%3Bfill-rule%3Aevenodd%3Bstroke%3A%23282828%3Bstroke-width%3A146%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-dashoffset%3A0%3Bstroke-opacity%3A1%22%2F%3E%3Cpath%20d%3D%22M365%20515h1314V77H365v438zM657%201245h730V807H657v438z%22%20style%3D%22fill%3A%23fff%3Bfill-opacity%3A1%3Bstroke%3A%23282828%3Bstroke-width%3A146%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%2F%3E%3Cpath%20d%3D%22M1022%20588v146%22%20style%3D%22fill%3Anone%3Bfill-rule%3Aevenodd%3Bstroke%3A%23282828%3Bstroke-width%3A146%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-dashoffset%3A0%3Bstroke-opacity%3A1%22%2F%3E%3Cpath%20d%3D%22M365%201975h1314v-438H365v438z%22%20style%3D%22fill%3A%23fff%3Bfill-opacity%3A1%3Bstroke%3A%23282828%3Bstroke-width%3A146%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%2F%3E%3C%2Fsvg%3E', + left: 'data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%222048%22%20width%3D%222048%22%3E%3Cpath%20style%3D%22fill%3Anone%3Bfill-rule%3Aevenodd%3Bstroke%3A%23282828%3Bstroke-width%3A146.00001526%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-dashoffset%3A0%3Bstroke-opacity%3A1%22%20d%3D%22M0%201537h2044%22%20transform%3D%22rotate(90%20949%20953)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23fff%3Bfill-opacity%3A1%3Bstroke%3A%23282828%3Bstroke-width%3A146%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%20d%3D%22M511%20369v1168H73V369h438zM1241%20807v730H803V807h438zM1971%20369v1168h-438V369h438z%22%20transform%3D%22rotate(90%20949%20953)%22%2F%3E%3C%2Fsvg%3E', + right: 'data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%222048%22%20width%3D%222048%22%3E%3Cpath%20d%3D%22M1679%204v2044%22%20style%3D%22fill%3Anone%3Bfill-rule%3Aevenodd%3Bstroke%3A%23282828%3Bstroke-width%3A146.00001526%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-dashoffset%3A0%3Bstroke-opacity%3A1%22%2F%3E%3Cpath%20d%3D%22M511%20515h1168V77H511v438zM949%201245h730V807H949v438zM511%201975h1168v-438H511v438z%22%20style%3D%22fill%3A%23fff%3Bfill-opacity%3A1%3Bstroke%3A%23282828%3Bstroke-width%3A146%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%2F%3E%3C%2Fsvg%3E', + top: 'data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%222048%22%20width%3D%222048%22%3E%3Cpath%20style%3D%22fill%3Anone%3Bfill-rule%3Aevenodd%3Bstroke%3A%23282828%3Bstroke-width%3A146.00001526%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-dashoffset%3A0%3Bstroke-opacity%3A1%22%20d%3D%22M0%201537h2044%22%20transform%3D%22matrix(1%200%200%20-1%200%201906)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23fff%3Bfill-opacity%3A1%3Bstroke%3A%23282828%3Bstroke-width%3A146%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%20d%3D%22M511%20369v1168H73V369h438zM1241%20807v730H803V807h438zM1971%20369v1168h-438V369h438z%22%20transform%3D%22matrix(1%200%200%20-1%200%201906)%22%2F%3E%3C%2Fsvg%3E', + middle: 'data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%222048%22%20width%3D%222048%22%3E%3Cpath%20style%3D%22fill%3Anone%3Bfill-rule%3Aevenodd%3Bstroke%3A%23282828%3Bstroke-width%3A146%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-dashoffset%3A0%3Bstroke-opacity%3A1%22%20d%3D%22M1027.973%201318v146%22%20transform%3D%22rotate(90%201022%201026)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23fff%3Bfill-opacity%3A1%3Bstroke%3A%23282828%3Bstroke-width%3A146%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%20d%3D%22M365%20515h1314V77H365v438zM657%201245h730V807H657v438z%22%20transform%3D%22rotate(90%201022%201026)%22%2F%3E%3Cpath%20style%3D%22fill%3Anone%3Bfill-rule%3Aevenodd%3Bstroke%3A%23282828%3Bstroke-width%3A146%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-dashoffset%3A0%3Bstroke-opacity%3A1%22%20d%3D%22M1022%20588v146%22%20transform%3D%22rotate(90%201022%201026)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23fff%3Bfill-opacity%3A1%3Bstroke%3A%23282828%3Bstroke-width%3A146%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%20d%3D%22M365%201975h1314v-438H365v438z%22%20transform%3D%22rotate(90%201022%201026)%22%2F%3E%3C%2Fsvg%3E' +}; + +export default icons; diff --git a/lib/features/align-elements/index.js b/lib/features/align-elements/index.js new file mode 100644 index 0000000000..a2816feb87 --- /dev/null +++ b/lib/features/align-elements/index.js @@ -0,0 +1,13 @@ +import AlignElementsModule from 'diagram-js/lib/features/align-elements'; +import ContextPadModule from 'diagram-js/lib/features/context-pad'; + +import AlignElementsContextPadProvider from './AlignElementsContextPadProvider'; + +export default { + __depends__: [ + AlignElementsModule, + ContextPadModule + ], + __init__: [ 'alignElementsContextPadProvider' ], + alignElementsContextPadProvider: [ 'type', AlignElementsContextPadProvider ] +}; \ No newline at end of file diff --git a/lib/features/align-elements/resources/align-bottom-tool.svg b/lib/features/align-elements/resources/align-bottom-tool.svg new file mode 100644 index 0000000000..d313c50b90 --- /dev/null +++ b/lib/features/align-elements/resources/align-bottom-tool.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/lib/features/align-elements/resources/align-horizontal-center-tool.svg b/lib/features/align-elements/resources/align-horizontal-center-tool.svg new file mode 100644 index 0000000000..09916ff924 --- /dev/null +++ b/lib/features/align-elements/resources/align-horizontal-center-tool.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/lib/features/align-elements/resources/align-left-tool.svg b/lib/features/align-elements/resources/align-left-tool.svg new file mode 100644 index 0000000000..7c3ee230b7 --- /dev/null +++ b/lib/features/align-elements/resources/align-left-tool.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/lib/features/align-elements/resources/align-right-tool.svg b/lib/features/align-elements/resources/align-right-tool.svg new file mode 100644 index 0000000000..bca83378e3 --- /dev/null +++ b/lib/features/align-elements/resources/align-right-tool.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/lib/features/align-elements/resources/align-top-tool.svg b/lib/features/align-elements/resources/align-top-tool.svg new file mode 100644 index 0000000000..15f9142c8b --- /dev/null +++ b/lib/features/align-elements/resources/align-top-tool.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/lib/features/align-elements/resources/align-vertical-center-tool.svg b/lib/features/align-elements/resources/align-vertical-center-tool.svg new file mode 100644 index 0000000000..babe902617 --- /dev/null +++ b/lib/features/align-elements/resources/align-vertical-center-tool.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/lib/features/context-pad/ContextPadProvider.js b/lib/features/context-pad/ContextPadProvider.js index f055f546db..6bbd9acb0e 100644 --- a/lib/features/context-pad/ContextPadProvider.js +++ b/lib/features/context-pad/ContextPadProvider.js @@ -107,6 +107,10 @@ ContextPadProvider.prototype.getMultiElementContextPadEntries = function(element }); } + if (this._isDistributionAllowed(elements)) { + assign(actions, this._getDistributionEntries(elements)); + } + return actions; }; @@ -129,6 +133,14 @@ ContextPadProvider.prototype._isDeleteAllowed = function(elements) { return baseAllowed; }; +ContextPadProvider.prototype._isDistributionAllowed = function(elements) { + return true; +}; + +ContextPadProvider.prototype._getDistributionEntries = function(elements) { + return {}; +}; + ContextPadProvider.prototype.getContextPadEntries = function(element) { var contextPad = this._contextPad, modeling = this._modeling, diff --git a/lib/features/distribute-elements/resources/distribute-horizontally-tool.svg b/lib/features/distribute-elements/resources/distribute-horizontally-tool.svg new file mode 100644 index 0000000000..6ded9bfa04 --- /dev/null +++ b/lib/features/distribute-elements/resources/distribute-horizontally-tool.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/lib/features/distribute-elements/resources/distribute-vertically-tool.svg b/lib/features/distribute-elements/resources/distribute-vertically-tool.svg new file mode 100644 index 0000000000..f2c8c5ff73 --- /dev/null +++ b/lib/features/distribute-elements/resources/distribute-vertically-tool.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/test/spec/features/align-elements/BpmnAlignElementsSpec.js b/test/spec/features/align-elements/BpmnAlignElementsSpec.js index d903003a83..b93ea353f0 100644 --- a/test/spec/features/align-elements/BpmnAlignElementsSpec.js +++ b/test/spec/features/align-elements/BpmnAlignElementsSpec.js @@ -3,19 +3,113 @@ import { inject } from 'test/TestHelper'; -import alignElementsModule from 'diagram-js/lib/features/align-elements'; +import alignElementsModule from 'lib/features/align-elements'; import modelingModule from 'lib/features/modeling'; import coreModule from 'lib/core'; +import contextPadModule from 'lib/features/context-pad'; + +import { + forEach +} from 'min-dash'; + +import { + query as domQuery +} from 'min-dom'; describe('features/align-elements', function() { - var testModules = [ alignElementsModule, modelingModule, coreModule ]; + var testModules = [ alignElementsModule, modelingModule, coreModule, contextPadModule ]; var basicXML = require('../../../fixtures/bpmn/align-elements.bpmn'); beforeEach(bootstrapModeler(basicXML, { modules: testModules })); + + describe('context pad provider', function() { + + var alignEntries; + + beforeEach(inject(function(contextPad) { + alignEntries = function(target) { + var entries = []; + + forEach([ + 'align-elements-left', + 'align-elements-center', + 'align-elements-right', + 'align-elements-top', + 'align-elements-middle', + 'align-elements-bottom' + ], function(actionName) { + var entry = padEntry(contextPad.getPad(target).html, actionName); + + if (entry) { + entries.push(entry); + } + }); + + return entries; + }; + })); + + + it('should NOT provide alignment entries for single element', inject( + function(elementRegistry, contextPad) { + + // given + var task = elementRegistry.get('Task_lane'); + + // when + contextPad.open(task); + + // then + expect(alignEntries(task)).to.have.lengthOf(0); + } + )); + + + it('should provide alignment entries for multiple elements', inject( + function(elementRegistry, contextPad) { + + // given + var taskBoundEvt = elementRegistry.get('Task_boundary_evt'), + task = elementRegistry.get('Task_lane'), + subProcess = elementRegistry.get('SubProcess_lane'), + endEvent = elementRegistry.get('EndEvent_lane'), + elements = [ taskBoundEvt, task, subProcess, endEvent ]; + + // when + contextPad.open(elements); + + // then + expect(alignEntries(elements)).to.have.lengthOf(6); + } + )); + + + it('should provide entries after the delete icon', inject( + function(elementRegistry, contextPad) { + + // given + var taskBoundEvt = elementRegistry.get('Task_boundary_evt'), + task = elementRegistry.get('Task_lane'), + subProcess = elementRegistry.get('SubProcess_lane'), + endEvent = elementRegistry.get('EndEvent_lane'), + elements = [ taskBoundEvt, task, subProcess, endEvent ]; + + // when + contextPad.open(elements); + + // then + var pad = contextPad.getPad(elements).html; + + expect(domQuery('[data-group="edit"] ~ [data-group="align"]', pad)).to.exist; + } + )); + }); + + describe('integration', function() { it('should align to the left', inject(function(elementRegistry, alignElements) { @@ -134,3 +228,10 @@ describe('features/align-elements', function() { }); }); + + +// helper ////////////////////////////////////////////////////////////////////// + +function padEntry(element, name) { + return domQuery('[data-action="' + name + '"]', element); +} diff --git a/test/spec/features/context-pad/ContextPadProviderSpec.js b/test/spec/features/context-pad/ContextPadProviderSpec.js index c17c7e518b..1b457535ab 100644 --- a/test/spec/features/context-pad/ContextPadProviderSpec.js +++ b/test/spec/features/context-pad/ContextPadProviderSpec.js @@ -168,59 +168,62 @@ describe('features - context-pad', function() { describe('multi-element', function() { - it('should add delete action by default', inject( - function(elementRegistry, contextPad) { + describe('delete action', function() { - // given - var event = elementRegistry.get('StartEvent_1'), - task = elementRegistry.get('Task_1'); + it('should add delete action by default', inject( + function(elementRegistry, contextPad) { - // when - contextPad.open([ event, task ]); + // given + var event = elementRegistry.get('StartEvent_1'), + task = elementRegistry.get('Task_1'); - // then - expect(deleteAction([ event, task ])).to.exist; - } - )); + // when + contextPad.open([ event, task ]); + // then + expect(deleteAction([ event, task ])).to.exist; + } + )); - it('should NOT add delete action when rule returns false', inject( - function(elementRegistry, contextPad, customRules) { - // given - customRules.addRule('elements.delete', 1500, function() { - return false; - }); + it('should NOT add delete action when rule returns false', inject( + function(elementRegistry, contextPad, customRules) { - var event = elementRegistry.get('StartEvent_1'), - task = elementRegistry.get('Task_1'); + // given + customRules.addRule('elements.delete', 1500, function() { + return false; + }); - // when - contextPad.open([ event, task ]); + var event = elementRegistry.get('StartEvent_1'), + task = elementRegistry.get('Task_1'); - // then - expect(deleteAction([ event, task ])).not.to.exist; - } - )); + // when + contextPad.open([ event, task ]); + // then + expect(deleteAction([ event, task ])).not.to.exist; + } + )); - it('should trigger batch delete', inject( - function(elementRegistry, contextPad, customRules) { - // given - var event = elementRegistry.get('StartEvent_1'), - task = elementRegistry.get('Task_1'); + it('should trigger batch delete', inject( + function(elementRegistry, contextPad, customRules) { - contextPad.open([ event, task ]); + // given + var event = elementRegistry.get('StartEvent_1'), + task = elementRegistry.get('Task_1'); - // when - contextPad.trigger('click', padEvent('delete')); + contextPad.open([ event, task ]); - // then - expect(elementRegistry.get('StartEvent_1')).not.to.exist; - expect(elementRegistry.get('Task_1')).not.to.exist; - } - )); + // when + contextPad.trigger('click', padEvent('delete')); + + // then + expect(elementRegistry.get('StartEvent_1')).not.to.exist; + expect(elementRegistry.get('Task_1')).not.to.exist; + } + )); + }); });