camunda-bpmn-js 0.24.1 → 1.0.0

package/dist/camunda-platform-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.
 	 *
@@ -37810,6 +37848,25 @@
 	  }
 	];
 
+	var replaceOptions = /*#__PURE__*/Object.freeze({
+		__proto__: null,
+		START_EVENT: START_EVENT,
+		START_EVENT_SUB_PROCESS: START_EVENT_SUB_PROCESS,
+		INTERMEDIATE_EVENT: INTERMEDIATE_EVENT,
+		END_EVENT: END_EVENT,
+		GATEWAY: GATEWAY,
+		SUBPROCESS_EXPANDED: SUBPROCESS_EXPANDED,
+		TRANSACTION: TRANSACTION,
+		EVENT_SUB_PROCESS: EVENT_SUB_PROCESS,
+		TASK: TASK,
+		DATA_OBJECT_REFERENCE: DATA_OBJECT_REFERENCE,
+		DATA_STORE_REFERENCE: DATA_STORE_REFERENCE,
+		BOUNDARY_EVENT: BOUNDARY_EVENT,
+		EVENT_SUB_PROCESS_START_EVENT: EVENT_SUB_PROCESS_START_EVENT,
+		SEQUENCE_FLOW: SEQUENCE_FLOW,
+		PARTICIPANT: PARTICIPANT
+	});
+
 	/**
 	 * This module is an element agnostic replace menu provider for the popup menu.
 	 */
@@ -39908,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
 
@@ -40031,6 +40089,12 @@
 	    });
 	  }
 
+	  if (selection && contextPad) {
+	    this._registerAction('replaceElement', function(event) {
+	      contextPad.triggerEntry('replace', 'click', event);
+	    });
+	  }
+
 	};
 
 	var EditorActionsModule = {
@@ -41149,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 = {
@@ -109902,6 +109983,374 @@
 	  camunda: camundaModdle
 	};
 
+	const ALL_OPTIONS = Object.values(replaceOptions);
+
+	function getReplaceOptionGroups() {
+	  return ALL_OPTIONS;
+	}
+
+	/**
+	 * A replace menu provider that allows to replace elements with
+	 * templates applied with the correspondent plain element.
+	 */
+	function UnlinkTemplateReplaceProvider(popupMenu, translate, elementTemplates) {
+
+	  this._popupMenu = popupMenu;
+	  this._translate = translate;
+	  this._elementTemplates = elementTemplates;
+
+	  this.register();
+	}
+
+	UnlinkTemplateReplaceProvider.$inject = [
+	  'popupMenu',
+	  'translate',
+	  'elementTemplates'
+	];
+
+	/**
+	 * Register replace menu provider in the popup menu
+	 */
+	UnlinkTemplateReplaceProvider.prototype.register = function() {
+	  this._popupMenu.registerProvider('bpmn-replace', this);
+	};
+
+	/**
+	 * Adds the element templates to the replace menu.
+	 * @param {djs.model.Base} element
+	 *
+	 * @returns {Object}
+	 */
+	UnlinkTemplateReplaceProvider.prototype.getPopupMenuEntries = function(element) {
+
+	  return (entries) => {
+
+	    // convert our entries into something sortable
+	    let entrySet = Object.entries(entries);
+
+	    if (this._elementTemplates.get(element)) {
+
+	      // add unlink template option
+	      this.addPlainElementEntry(element, entrySet, this._translate, this._elementTemplates);
+	    }
+
+	    // convert back to object
+	    return entrySet.reduce((entries, [ key, value ]) => {
+	      entries[key] = value;
+
+	      return entries;
+	    }, {});
+	  };
+	};
+
+
+	/**
+	 * Adds the option to replace with plain element (unlink template).
+	 *
+	 * @param {djs.model.Base} element
+	 * @param {Array<Object>} entries
+	 */
+	UnlinkTemplateReplaceProvider.prototype.addPlainElementEntry = function(element, entries, translate, elementTemplates) {
+
+	  const replaceOption = this.getPlainEntry(element, entries, translate, elementTemplates);
+
+	  if (!replaceOption) {
+	    return;
+	  }
+
+	  const [
+	    insertIndex,
+	    entry
+	  ] = replaceOption;
+
+	  // insert unlink entry
+	  entries.splice(insertIndex, 0, [ entry.id, entry ]);
+	};
+
+	/**
+	 * Returns the option to replace with plain element and the index where it should be inserted.
+	 *
+	 * @param {djs.model.Base} element
+	 * @param {Array<Object>} entries
+	 *
+	 * @returns {Array<Object, number>}
+	 */
+	UnlinkTemplateReplaceProvider.prototype.getPlainEntry = function(element, entries, translate, elementTemplates) {
+
+	  const {
+	    options,
+	    option,
+	    optionIndex
+	  } = findReplaceOptions(element) || { };
+
+	  if (!options) {
+	    return null;
+	  }
+
+	  const entry = {
+	    id: 'replace-unlink-element-template',
+	    action: () => {
+	      elementTemplates.applyTemplate(element, null);
+	    },
+	    label: translate(option.label),
+	    className: option.className
+	  };
+
+	  // insert after previous option, if it exists
+	  const previousIndex = getOptionIndex(options, optionIndex - 1, entries);
+
+	  if (previousIndex) {
+	    return [
+	      previousIndex + 1,
+	      entry
+	    ];
+	  }
+
+	  // insert before next option, if it exists
+	  const nextIndex = getOptionIndex(options, optionIndex + 1, entries);
+
+	  if (nextIndex) {
+	    return [
+	      nextIndex,
+	      entry
+	    ];
+	  }
+
+	  // fallback to insert at start
+	  return [
+	    0,
+	    entry
+	  ];
+	};
+
+
+	/**
+	 * @param {ModdleElement} element
+	 *
+	 * @return { { options: Array<any>, option: any, optionIndex: number } | null }
+	 */
+	function findReplaceOptions(element) {
+
+	  const isSameType = (element, option) => option.target && !isDifferentType(element)(option);
+
+	  return getReplaceOptionGroups().reduce((result, options) => {
+
+	    if (result) {
+	      return result;
+	    }
+
+	    const optionIndex = options.findIndex(option => isSameType(element, option));
+
+	    if (optionIndex === -1) {
+	      return;
+	    }
+
+	    return {
+	      options,
+	      option: options[optionIndex],
+	      optionIndex
+	    };
+	  }, null);
+	}
+
+	function getOptionIndex(options, index, entries) {
+	  const option = options[index];
+
+	  if (!option) {
+	    return false;
+	  }
+
+	  return entries.findIndex(
+	    ([ key ]) => key === option.actionName
+	  );
+	}
+
+	var sharedReplaceModule = {
+	  __init__: [
+	    'unlinkTemplateReplaceProvider'
+	  ],
+	  unlinkTemplateReplaceProvider: [ 'type', UnlinkTemplateReplaceProvider ]
+	};
+
+	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;
+	}
+
+	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'
+	} ];
+
+
+	function ColorPopupProvider(config, popupMenu, modeling, translate) {
+	  this._popupMenu = popupMenu;
+	  this._modeling = modeling;
+	  this._translate = translate;
+
+	  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 {
+	      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)
+	    };
+	  });
+
+	  return entries;
+	};
+
+
+	function createAction(modeling, element, color) {
+	  return function() {
+	    modeling.setColor(element, color);
+	  };
+	}
+
+	var colorPickerModule = {
+	  __init__: [
+	    'colorContextPadProvider',
+	    'colorPopupProvider'
+	  ],
+	  colorContextPadProvider: [ 'type', ColorContextPadProvider ],
+	  colorPopupProvider: [ 'type', ColorPopupProvider ]
+	};
+
 	/**
 	 *
 	 * @param {Object} options
@@ -109924,7 +110373,9 @@
 	Modeler.prototype._camundaPlatformModules = [
 	  behaviorsModule,
 	  camundaPlatformPropertiesProviderModule,
-	  index
+	  index,
+	  sharedReplaceModule,
+	  colorPickerModule
 	];
 
 	Modeler.prototype._modules = [].concat(