diff --git a/lib/features/distribute-elements/DistributeElementsContextPadProvider.js b/lib/features/distribute-elements/DistributeElementsContextPadProvider.js new file mode 100644 index 0000000000..0e0d6057d4 --- /dev/null +++ b/lib/features/distribute-elements/DistributeElementsContextPadProvider.js @@ -0,0 +1,68 @@ +import ICONS from './DistributeElementsIcons'; + +import { assign } from 'min-dash'; + +var LOW_PRIORITY = 900; + +/** + * A provider for distribute elements context pad + */ +export default function DistributeElementsContextPadProvider(contextPad, distributeElements, translate) { + + contextPad.registerProvider(LOW_PRIORITY, this); + + this._contextPad = contextPad; + + this._distributeElements = distributeElements; + this._translate = translate; +} + +DistributeElementsContextPadProvider.$inject = [ + 'contextPad', + 'distributeElements', + 'translate' +]; + +DistributeElementsContextPadProvider.prototype.getMultiElementContextPadEntries = function(elements) { + var actions = {}; + + if (this._isAllowed(elements)) { + assign(actions, this._getEntries(elements)); + } + + return actions; +}; + +DistributeElementsContextPadProvider.prototype._isAllowed = function(elements) { + return true; +}; + +DistributeElementsContextPadProvider.prototype._getEntries = function(elements) { + var distributeElements = this._distributeElements, + translate = this._translate; + + var entries = { + 'distribute-elements-horizontally': { + group: 'distribute', + title: translate('Distribute elements horizontally'), + imageUrl: ICONS['horizontal'], + action: { + click: function(event, elements) { + distributeElements.trigger(elements, 'horizontal'); + } + } + }, + 'distribute-elements-vertically': { + group: 'distribute', + title: translate('Distribute elements vertically'), + imageUrl: ICONS['vertical'], + action: { + click: function(event, elements) { + distributeElements.trigger(elements, 'vertical'); + } + } + }, + }; + + return entries; +}; diff --git a/lib/features/distribute-elements/DistributeElementsIcons.js b/lib/features/distribute-elements/DistributeElementsIcons.js new file mode 100644 index 0000000000..774d9ebbf2 --- /dev/null +++ b/lib/features/distribute-elements/DistributeElementsIcons.js @@ -0,0 +1,10 @@ +/** + * To change the icons, call `encodeURIComponent` with modified SVG, + * and add `data:image/svg+xml;utf8,` in the beginning of the string. + */ +var icons = { + horizontal: '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%22M73%20661v1022h438V661H73z%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%22M438%20369h1168%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%22M803%20661v730h438V661H803zM1533%20661v1022h438V661h-438z%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%22M511%20442v146M1022%20442v146M1533%20442v146%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%3C%2Fsvg%3E', + vertical: '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%3A%23fff%3Bfill-opacity%3A1%3Bstroke%3A%23282828%3Bstroke-width%3A146%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%20d%3D%22M73%20661v1022h438V661H73z%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%22M438%20369h1168%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%22M803%20661v730h438V661H803zM1533%20661v1022h438V661h-438z%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%22M511%20442v146M1022%20442v146M1533%20442v146%22%20transform%3D%22rotate(-90%201022%201026)%22%2F%3E%3C%2Fsvg%3E', +}; + +export default icons; diff --git a/lib/features/distribute-elements/index.js b/lib/features/distribute-elements/index.js index d6ec22c8dc..f65a8fac21 100644 --- a/lib/features/distribute-elements/index.js +++ b/lib/features/distribute-elements/index.js @@ -1,12 +1,19 @@ import DistributeElementsModule from 'diagram-js/lib/features/distribute-elements'; +import ContextPadModule from 'diagram-js/lib/features/context-pad'; import BpmnDistributeElements from './BpmnDistributeElements'; +import DistributeElementsContextPadProvider from './DistributeElementsContextPadProvider'; export default { __depends__: [ + ContextPadModule, DistributeElementsModule ], - __init__: [ 'bpmnDistributeElements' ], - bpmnDistributeElements: [ 'type', BpmnDistributeElements ] + __init__: [ + 'bpmnDistributeElements', + 'distributeElementsContextPadProvider' + ], + bpmnDistributeElements: [ 'type', BpmnDistributeElements ], + distributeElementsContextPadProvider: [ 'type', DistributeElementsContextPadProvider ] };