camunda-bpmn-js 0.24.1 → 1.0.0

package/dist/camunda-cloud-modeler.development.js

@@ -22147,6 +22147,9 @@
 
 	};
 
+	Overlays.prototype.isShown = function() {
+	  return this._overlayRoot.style.display !== 'none';
+	};
 
 	Overlays.prototype.show = function() {
 	  setVisible$1(this._overlayRoot);
@@ -28053,7 +28056,9 @@
 
 
 	/**
-	 * Trigger context pad action.
+	 * Trigger context pad via DOM event.
+	 *
+	 * The entry to trigger is determined by the target element.
 	 *
 	 * @param  {string} action
 	 * @param  {Event} event
@@ -28061,10 +28066,7 @@
 	 */
 	ContextPad.prototype.trigger = function(action, event, autoActivate) {
 
-	  var target = this._current.target,
-	      entries = this._current.entries,
-	      entry,
-	      handler,
+	  var entry,
 	      originalEvent,
 	      button = event.delegateTarget || event.target;
 
@@ -28072,19 +28074,45 @@
 	    return event.preventDefault();
 	  }
 
-	  entry = entries[attr$1(button, 'data-action')];
-	  handler = entry.action;
-
+	  entry = attr$1(button, 'data-action');
 	  originalEvent = event.originalEvent || event;
 
+	  return this.triggerEntry(entry, action, originalEvent, autoActivate);
+	};
+
+	/**
+	 * Trigger context pad entry entry.
+	 *
+	 * @param {string} entryId
+	 * @param {string} action
+	 * @param {Event} event
+	 * @param {boolean} [autoActivate=false]
+	 */
+	ContextPad.prototype.triggerEntry = function(entryId, action, event, autoActivate) {
+
+	  if (!this.isShown()) {
+	    return;
+	  }
+
+	  var target = this._current.target,
+	      entries = this._current.entries;
+
+	  var entry = entries[entryId];
+
+	  if (!entry) {
+	    return;
+	  }
+
+	  var handler = entry.action;
+
 	  // simple action (via callback function)
 	  if (isFunction(handler)) {
 	    if (action === 'click') {
-	      return handler(originalEvent, target, autoActivate);
+	      return handler(event, target, autoActivate);
 	    }
 	  } else {
 	    if (handler[action]) {
-	      return handler[action](originalEvent, target, autoActivate);
+	      return handler[action](event, target, autoActivate);
 	    }
 	  }
 
@@ -28285,6 +28313,16 @@
 	};
 
 
+	/**
+	 * Check if pad is open and not hidden.
+	 *
+	 * @return {boolean}
+	 */
+	ContextPad.prototype.isShown = function() {
+	  return this.isOpen() && this._overlays.isShown();
+	};
+
+
 	/**
 	 * Get contex pad position.
 	 *
@@ -39927,6 +39965,7 @@
 	  var directEditing = injector.get('directEditing', false);
 	  var searchPad = injector.get('searchPad', false);
 	  var modeling = injector.get('modeling', false);
+	  var contextPad = injector.get('contextPad', false);
 
 	  // (2) check components and register actions
 
@@ -40050,6 +40089,12 @@
 	    });
 	  }
 
+	  if (selection && contextPad) {
+	    this._registerAction('replaceElement', function(event) {
+	      contextPad.triggerEntry('replace', 'click', event);
+	    });
+	  }
+
 	};
 
 	var EditorActionsModule = {
@@ -41168,6 +41213,23 @@
 	    }
 	  });
 
+	  // activate replace element
+	  // R
+	  addListener('replaceElement', function(context) {
+
+	    var event = context.keyEvent;
+
+	    if (keyboard.hasModifier(event)) {
+	      return;
+	    }
+
+	    if (keyboard.isKey([ 'r', 'R' ], event)) {
+	      editorActions.trigger('replaceElement', event);
+
+	      return true;
+	    }
+	  });
+
 	};
 
 	var KeyboardModule = {
@@ -102076,6 +102138,124 @@
 	  bpmnRules: [ 'type', CustomRules ]
 	};
 
+	/**
+	 * A replace menu provider that allows to replace elements with
+	 * element templates.
+	 */
+	function ElementTemplatesReplaceProvider(popupMenu, translate, elementTemplates) {
+
+	  this._popupMenu = popupMenu;
+	  this._translate = translate;
+	  this._elementTemplates = elementTemplates;
+
+	  this.register();
+	}
+
+	ElementTemplatesReplaceProvider.$inject = [
+	  'popupMenu',
+	  'translate',
+	  'elementTemplates'
+	];
+
+	/**
+	 * Register replace menu provider in the popup menu
+	 */
+	ElementTemplatesReplaceProvider.prototype.register = function() {
+	  this._popupMenu.registerProvider('bpmn-replace', this);
+	};
+
+	/**
+	 * Adds the element templates to the replace menu.
+	 * @param {djs.model.Base} element
+	 *
+	 * @returns {Object}
+	 */
+	ElementTemplatesReplaceProvider.prototype.getPopupMenuEntries = function(element) {
+
+	  return (entries) => {
+
+	    // convert our entries into something sortable
+	    let entrySet = Object.entries(entries);
+
+	    // add template entries
+	    entrySet = [ ...entrySet, ...this.getTemplateEntries(element) ];
+
+	    // convert back to object
+	    return entrySet.reduce((entries, [ key, value ]) => {
+	      entries[key] = value;
+
+	      return entries;
+	    }, {});
+	  };
+	};
+
+	/**
+	 * Get all element templates that can be used to replace the given element.
+	 *
+	 * @param {djs.model.Base} element
+	 *
+	 * @return {Array<Object>} a list of element templates as menu entries
+	 */
+	ElementTemplatesReplaceProvider.prototype.getTemplateEntries = function(element) {
+
+	  const templates = this._getMatchingTemplates(element);
+	  return templates.map(template => {
+
+	    const {
+	      icon = {},
+	      category,
+	    } = template;
+
+	    const entryId = `replace.template-${template.id}`;
+
+	    const defaultGroup = {
+	      id: 'templates',
+	      name: this._translate('Templates')
+	    };
+
+	    return [ entryId, {
+	      label: template.name,
+	      description: template.description,
+	      documentationRef: template.documentationRef,
+	      imageUrl: icon.contents,
+	      group: category || defaultGroup,
+	      action: () => {
+	        this._elementTemplates.applyTemplate(element, template);
+	      }
+	    } ];
+	  });
+	};
+
+	/**
+	 * Returns the templates that can the element can be replaced with.
+	 *
+	 * @param  {djs.model.Base} element
+	 *
+	 * @return {Array<ElementTemplate>}
+	 */
+	ElementTemplatesReplaceProvider.prototype._getMatchingTemplates = function(element) {
+	  return this._elementTemplates.getLatest().filter(template => {
+	    return isAny(element, template.appliesTo) && !isTemplateApplied(element, template);
+	  });
+	};
+
+
+	// helpers ////////////
+	function isTemplateApplied(element, template) {
+	  const businessObject = getBusinessObject$1(element);
+
+	  if (businessObject) {
+	    return businessObject.get('zeebe:modelerTemplate') === template.id;
+	  }
+
+	  return false;
+	}
+
+	var replaceModule = {
+	  __init__: [ 'elementTemplatesProvider' ],
+	  elementTemplatesProvider: [ 'type', ElementTemplatesReplaceProvider ]
+	};
+
 	const ALL_OPTIONS = Object.values(replaceOptions);
 
 	function getReplaceOptionGroups() {
@@ -102084,23 +102264,18 @@
 
 	/**
 	 * A replace menu provider that allows to replace elements with
-	 * element templates.
+	 * templates applied with the correspondent plain element.
 	 */
-	function ElementTemplatesReplaceProvider(config, popupMenu, translate, elementTemplates) {
+	function UnlinkTemplateReplaceProvider(popupMenu, translate, elementTemplates) {
 
 	  this._popupMenu = popupMenu;
 	  this._translate = translate;
 	  this._elementTemplates = elementTemplates;
 
-	  const enabled = config && config.enabled;
-
-	  if (enabled) {
-	    this.register();
-	  }
+	  this.register();
 	}
 
-	ElementTemplatesReplaceProvider.$inject = [
-	  'config.elementTemplatesReplaceProvider',
+	UnlinkTemplateReplaceProvider.$inject = [
 	  'popupMenu',
 	  'translate',
 	  'elementTemplates'
@@ -102109,7 +102284,7 @@
 	/**
 	 * Register replace menu provider in the popup menu
 	 */
-	ElementTemplatesReplaceProvider.prototype.register = function() {
+	UnlinkTemplateReplaceProvider.prototype.register = function() {
 	  this._popupMenu.registerProvider('bpmn-replace', this);
 	};
 
@@ -102119,7 +102294,7 @@
 	 *
 	 * @returns {Object}
 	 */
-	ElementTemplatesReplaceProvider.prototype.getPopupMenuEntries = function(element) {
+	UnlinkTemplateReplaceProvider.prototype.getPopupMenuEntries = function(element) {
 
 	  return (entries) => {
 
@@ -102129,12 +102304,9 @@
 	    if (this._elementTemplates.get(element)) {
 
 	      // add unlink template option
-	      this._addPlainElementEntry(element, entrySet);
+	      this.addPlainElementEntry(element, entrySet, this._translate, this._elementTemplates);
 	    }
 
-	    // add template entries
-	    entrySet = [ ...entrySet, ...this.getTemplateEntries(element) ];
-
 	    // convert back to object
 	    return entrySet.reduce((entries, [ key, value ]) => {
 	      entries[key] = value;
@@ -102144,15 +102316,16 @@
 	  };
 	};
 
+
 	/**
 	 * Adds the option to replace with plain element (unlink template).
 	 *
 	 * @param {djs.model.Base} element
 	 * @param {Array<Object>} entries
 	 */
-	ElementTemplatesReplaceProvider.prototype._addPlainElementEntry = function(element, entries) {
+	UnlinkTemplateReplaceProvider.prototype.addPlainElementEntry = function(element, entries, translate, elementTemplates) {
 
-	  const replaceOption = this._getPlainEntry(element, entries);
+	  const replaceOption = this.getPlainEntry(element, entries, translate, elementTemplates);
 
 	  if (!replaceOption) {
 	    return;
@@ -102175,7 +102348,7 @@
 	 *
 	 * @returns {Array<Object, number>}
 	 */
-	ElementTemplatesReplaceProvider.prototype._getPlainEntry = function(element, entries) {
+	UnlinkTemplateReplaceProvider.prototype.getPlainEntry = function(element, entries, translate, elementTemplates) {
 
 	  const {
 	    options,
@@ -102190,9 +102363,9 @@
 	  const entry = {
 	    id: 'replace-unlink-element-template',
 	    action: () => {
-	      this._elementTemplates.applyTemplate(element, null);
+	      elementTemplates.applyTemplate(element, null);
 	    },
-	    label: this._translate(option.label),
+	    label: translate(option.label),
 	    className: option.className
 	  };
 
@@ -102223,66 +102396,34 @@
 	  ];
 	};
 
+
 	/**
-	 * Get all element templates that can be used to replace the given element.
-	 *
-	 * @param {djs.model.Base} element
+	 * @param {ModdleElement} element
 	 *
-	 * @return {Array<Object>} a list of element templates as menu entries
+	 * @return { { options: Array<any>, option: any, optionIndex: number } | null }
 	 */
-	ElementTemplatesReplaceProvider.prototype.getTemplateEntries = function(element) {
-
-	  const templates = this._getMatchingTemplates(element);
-	  return templates.map(template => {
-
-	    const {
-	      icon = {},
-	      category,
-	    } = template;
-
-	    const entryId = `replace.template-${template.id}`;
-
-	    const defaultGroup = {
-	      id: 'templates',
-	      name: this._translate('Templates')
-	    };
+	function findReplaceOptions(element) {
 
-	    return [ entryId, {
-	      name: template.name,
-	      description: template.description,
-	      documentationRef: template.documentationRef,
-	      imageUrl: icon.contents,
-	      group: category || defaultGroup,
-	      action: () => {
-	        this._elementTemplates.applyTemplate(element, template);
-	      }
-	    } ];
-	  });
-	};
+	  const isSameType = (element, option) => option.target && !isDifferentType(element)(option);
 
-	/**
-	 * Returns the templates that can the element can be replaced with.
-	 *
-	 * @param  {djs.model.Base} element
-	 *
-	 * @return {Array<ElementTemplate>}
-	 */
-	ElementTemplatesReplaceProvider.prototype._getMatchingTemplates = function(element) {
-	  return this._elementTemplates.getLatest().filter(template => {
-	    return isAny(element, template.appliesTo) && !isTemplateApplied(element, template);
-	  });
-	};
+	  return getReplaceOptionGroups().reduce((result, options) => {
 
+	    if (result) {
+	      return result;
+	    }
 
-	// helpers ////////////
-	function isTemplateApplied(element, template) {
-	  const businessObject = getBusinessObject$1(element);
+	    const optionIndex = options.findIndex(option => isSameType(element, option));
 
-	  if (businessObject) {
-	    return businessObject.get('zeebe:modelerTemplate') === template.id;
-	  }
+	    if (optionIndex === -1) {
+	      return;
+	    }
 
-	  return false;
+	    return {
+	      options,
+	      option: options[optionIndex],
+	      optionIndex
+	    };
+	  }, null);
 	}
 
 	function getOptionIndex(options, index, entries) {
@@ -102297,38 +102438,190 @@
 	  );
 	}
 
-	/**
-	 * @param {ModdleElement} element
-	 *
-	 * @return { { options: Array<any>, option: any, optionIndex: number } | null }
-	 */
-	function findReplaceOptions(element) {
+	var sharedReplaceModule = {
+	  __init__: [
+	    'unlinkTemplateReplaceProvider'
+	  ],
+	  unlinkTemplateReplaceProvider: [ 'type', UnlinkTemplateReplaceProvider ]
+	};
 
-	  const isSameType = (element, option) => option.target && !isDifferentType(element)(option);
+	const colorImageSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22"><path d="m12.5 5.5.3-.4 3.6-3.6c.5-.5 1.3-.5 1.7 0l1 1c.5.4.5 1.2 0 1.7l-3.6 3.6-.4.2v.2c0 1.4.6 2 1 2.7v.6l-1.7 1.6c-.2.2-.4.2-.6 0L7.3 6.6a.4.4 0 0 1 0-.6l.3-.3.5-.5.8-.8c.2-.2.4-.1.6 0 .9.5 1.5 1.1 3 1.1zm-9.9 6 4.2-4.2 6.3 6.3-4.2 4.2c-.3.3-.9.3-1.2 0l-.8-.8-.9-.8-2.3-2.9" /></svg>';
+
+	const colorImageUrl = 'data:image/svg+xml;utf8,' + encodeURIComponent(colorImageSvg);
+
+
+	function ColorContextPadProvider(contextPad, popupMenu, canvas, translate) {
+
+	  this._contextPad = contextPad;
+	  this._popupMenu = popupMenu;
+	  this._canvas = canvas;
+	  this._translate = translate;
+
+	  contextPad.registerProvider(this);
+	}
+
+
+	ColorContextPadProvider.$inject = [
+	  'contextPad',
+	  'popupMenu',
+	  'canvas',
+	  'translate'
+	];
+
+
+	ColorContextPadProvider.prototype.getContextPadEntries = function(element) {
+	  return this._createPopupAction([ element ]);
+	};
+
+
+	ColorContextPadProvider.prototype.getMultiElementContextPadEntries = function(elements) {
+
+	  return this._createPopupAction(elements);
+	};
+
+	ColorContextPadProvider.prototype._createPopupAction = function(elements) {
+
+	  const canvas = this._canvas;
+	  const translate = this._translate;
+	  const contextPad = this._contextPad;
+	  const popupMenu = this._popupMenu;
+
+	  return {
+	    'set-color': {
+	      group: 'edit',
+	      className: 'bpmn-icon-color',
+	      title: translate('Set Color'),
+	      imageUrl: colorImageUrl,
+	      action: {
+	        click: (event, element) => {
+
+	          // get start popup draw start position
+	          var position = {
+	            ...getStartPosition(canvas, contextPad, elements),
+	            cursor: {
+	              x: event.x,
+	              y: event.y
+	            }
+	          };
+
+	          // open new color-picker popup
+	          popupMenu.open(elements, 'color-picker', position);
+	        }
+	      }
+	    }
+	  };
+
+	};
+
+
+	// helpers //////////////////////
+
+	function getStartPosition(canvas, contextPad, elements) {
+
+	  var Y_OFFSET = 5;
+
+	  var diagramContainer = canvas.getContainer(),
+	      pad = contextPad.getPad(elements).html;
+
+	  var diagramRect = diagramContainer.getBoundingClientRect(),
+	      padRect = pad.getBoundingClientRect();
+
+	  var top = padRect.top - diagramRect.top;
+	  var left = padRect.left - diagramRect.left;
+
+	  var pos = {
+	    x: left,
+	    y: top + padRect.height + Y_OFFSET
+	  };
+
+	  return pos;
+	}
 
-	  return getReplaceOptionGroups().reduce((result, options) => {
+	const COLORS = [ {
+	  label: 'Default',
+	  fill: undefined,
+	  stroke: undefined
+	}, {
+	  label: 'Blue',
+	  fill: '#BBDEFB',
+	  stroke: '#0D4372'
+	}, {
+	  label: 'Orange',
+	  fill: '#FFE0B2',
+	  stroke: '#6B3C00'
+	}, {
+	  label: 'Green',
+	  fill: '#C8E6C9',
+	  stroke: '#205022'
+	}, {
+	  label: 'Red',
+	  fill: '#FFCDD2',
+	  stroke: '#831311'
+	}, {
+	  label: 'Purple',
+	  fill: '#E1BEE7',
+	  stroke: '#5B176D'
+	} ];
 
-	    if (result) {
-	      return result;
-	    }
 
-	    const optionIndex = options.findIndex(option => isSameType(element, option));
+	function ColorPopupProvider(config, popupMenu, modeling, translate) {
+	  this._popupMenu = popupMenu;
+	  this._modeling = modeling;
+	  this._translate = translate;
 
-	    if (optionIndex === -1) {
-	      return;
-	    }
+	  this._colors = config && config.colors || COLORS;
+
+	  this._popupMenu.registerProvider('color-picker', this);
+	}
+
+
+	ColorPopupProvider.$inject = [
+	  'config.colorPicker',
+	  'popupMenu',
+	  'modeling',
+	  'translate'
+	];
+
+
+	ColorPopupProvider.prototype.getEntries = function(elements) {
+	  var self = this;
+
+	  var colorIcon = domify$1(`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="100%">
+      <rect rx="2" x="1" y="1" width="22" height="22" fill="var(--fill-color)" stroke="var(--stroke-color)"></rect>
+    </svg>
+  `);
+
+	  var entries = this._colors.map(function(color) {
+
+	    colorIcon.style.setProperty('--fill-color', color.fill || 'white');
+	    colorIcon.style.setProperty('--stroke-color', color.stroke || 'rgb(34, 36, 42)');
 
 	    return {
-	      options,
-	      option: options[optionIndex],
-	      optionIndex
+	      title: self._translate(color.label),
+	      id: color.label.toLowerCase() + '-color',
+	      imageUrl: `data:image/svg+xml;utf8,${ encodeURIComponent(colorIcon.outerHTML) }`,
+	      action: createAction(self._modeling, elements, color)
 	    };
-	  }, null);
+	  });
+
+	  return entries;
+	};
+
+
+	function createAction(modeling, element, color) {
+	  return function() {
+	    modeling.setColor(element, color);
+	  };
 	}
 
-	var replaceModule = {
-	  __init__: [ 'elementTemplatesProvider' ],
-	  elementTemplatesProvider: [ 'type', ElementTemplatesReplaceProvider ]
+	var colorPickerModule = {
+	  __init__: [
+	    'colorContextPadProvider',
+	    'colorPopupProvider'
+	  ],
+	  colorContextPadProvider: [ 'type', ColorContextPadProvider ],
+	  colorPopupProvider: [ 'type', ColorPopupProvider ]
 	};
 
 	function getModelerTemplateIcon(element) {
@@ -102872,7 +103165,9 @@
 	  rulesModule,
 	  zeebePropertiesProviderModule,
 	  index$1,
-	  replaceModule
+	  replaceModule,
+	  sharedReplaceModule,
+	  colorPickerModule
 	];
 
 	Modeler.prototype._modules = [].concat(