camunda-bpmn-js 0.24.0 → 1.0.0

package/dist/assets/color-picker.css

@@ -0,0 +1,10 @@
+/* COLOR PICKER */
+
+.djs-popup.color-picker .entry {
+    margin: 0;
+}
+
+.djs-popup.color-picker .djs-popup-group {
+  display: grid;
+  grid: auto-flow / 1fr 1fr 1fr;
+}

package/dist/assets/diagram-js.css

@@ -54,8 +54,9 @@
   --palette-background-color: var(--color-grey-225-10-97);
   --palette-border-color: var(--color-grey-225-10-75);
 
+  --popup-font-size: 14px;
   --popup-header-entry-selected-color: var(--color-blue-205-100-50);
-  --popup-header-separator-color: var(--color-grey-225-10-75);
+  --popup-header-font-weight: bolder;
   --popup-background-color: var(--color-white);
   --popup-border-color: var(--color-grey-225-10-75);
   --popup-shadow-color: var(--color-grey-225-10-80);
@@ -536,12 +537,13 @@ marker.djs-dragger tspan {
   box-shadow: 0px 2px 10px var(--popup-shadow-color);
   min-width: 120px;
   outline: none;
+  font-size: var(--popup-font-size);
 }
 
 .djs-popup-search input {
   width: 100%;
   box-sizing: border-box;
-  font-size: 14px;
+  font-size: var(--popup-font-size);
   padding: 3px 6px;
   border-radius: 2px;
   border: solid 1px var(--popup-search-border-color);
@@ -562,7 +564,6 @@ marker.djs-dragger tspan {
 }
 
 .djs-popup-header .entry {
-  font-size: 19.5px;
   border-radius: 2px;
 }
 
@@ -579,11 +580,10 @@ marker.djs-dragger tspan {
 }
 
 .djs-popup-title {
-  font-size: 14px;
-  font-weight: 500;
+  font-size: var(--popup-font-size);
+  font-weight: var(--popup-header-font-weight);
   flex: 1;
   margin: 0;
-  width: max-content;
 }
 
 .djs-popup-search {
@@ -620,19 +620,26 @@ marker.djs-dragger tspan {
   padding: 5px 7px;
   cursor: default;
   border-radius: 4px;
-  font-size: 14px;
 }
 
 .djs-popup-body .entry-header {
-  font-weight: 500;
+  font-weight: var(--popup-header-font-weight);
   color: var(--popup-entry-title-color);
   padding-left: 0;
 }
 
+.djs-popup [class*="icon"] .djs-popup-label,
+.djs-popup-label:not(:first-child) {
+  margin-left: .5em;
+}
+
+.djs-popup [class*="icon"]:before,
 .djs-popup-entry-icon {
-  width: 16px;
-  margin-right: 0.5rem;
-  margin-bottom: -0.2rem;
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  font-size: 1.4em;
+  vertical-align: middle;
 }
 
 .djs-popup-body .entry-header:not(:first-child) {
@@ -666,10 +673,15 @@ marker.djs-dragger tspan {
   color: var(--popup-description-color);
 }
 
-.djs-popup-entry-name,
+.djs-popup-label,
 .djs-popup-entry-description {
   line-height: 1.4em;
-  display: block;
+}
+
+.djs-popup-title,
+.djs-popup-label,
+.djs-popup-entry-description,
+.djs-popup .entry-header {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -686,15 +698,6 @@ marker.djs-dragger tspan {
   overflow: hidden;
 }
 
-.djs-popup-entry-name[class^="bpmn-icon-"]:before,
-.djs-popup-entry-name[class*=" bpmn-icon-"]:before,
-.djs-popup-entry-icon {
-  display: inline-block;
-  font-size: 1.4em;
-  vertical-align: middle;
-  margin-right: 0.5rem;
-}
-
 .djs-popup-body {
   flex-direction: column;
   width: auto;
@@ -711,13 +714,12 @@ marker.djs-dragger tspan {
 
 .djs-popup *::-webkit-scrollbar-track {
   box-shadow: none;
-  background: transparent1;
+  background: transparent;
   margin: 0;
   padding: 5px;
 }
 
 .djs-popup-no-results {
-  font-size: 14px;
   padding: 0 12px 12px 12px;
   color: var(--popup-no-results-color);
 }

package/dist/base-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.
 	 *
@@ -28364,14 +28402,11 @@
 	    onClick
 	  } = props;
 
-	  const createImage = imageUrl => {
-	    return m$2`<img src=${ imageUrl } class="djs-popup-entry-icon" />`;
-	  };
-
 	  return m$2`
     <li
       class=${ clsx('entry', { selected }) }
       data-id=${ entry.id }
+      title=${ entry.title || entry.label }
       onClick=${ onClick }
       onMouseEnter=${ onMouseEnter }
       onMouseLeave=${ onMouseLeave }
@@ -28379,10 +28414,16 @@
       <div class="djs-popup-entry-content">
         <span
           class=${ clsx('djs-popup-entry-name', entry.className) }
-          title=${ entry.label || entry.name }
         >
-          ${ entry.imageUrl ? createImage(entry.imageUrl) : null }
-          ${ entry.label || entry.name }
+          ${ entry.imageUrl ? m$2`
+            <img class="djs-popup-entry-icon" src=${ entry.imageUrl } />
+          ` : null }
+
+          ${ entry.label ? m$2`
+            <span class="djs-popup-label">
+              ${ entry.label }
+            </span>
+          ` : null }
         </span>
         ${ entry.description && m$2`
           <span
@@ -28452,7 +28493,7 @@
     <div class="djs-popup-results" ref=${ resultsRef }>
       ${ groups.map(group => m$2`
         ${ group.name && m$2`
-          <div key=${ group.id } class="entry-header">
+          <div key=${ group.id } class="entry-header" title=${ group.name }>
             ${ group.name }
           </div>
         ` }
@@ -28538,7 +28579,9 @@
 	    width,
 	    scale,
 	    search,
-	    entries: originalEntries
+	    entries: originalEntries,
+	    onOpened,
+	    onClosed
 	  } = props;
 
 	  const searchable = F$2(() => {
@@ -28556,6 +28599,14 @@
 	  const [ entries, setEntries ] = p$3(originalEntries);
 	  const [ selectedEntry, setSelectedEntry ] = p$3(entries[0]);
 
+	  h$2(() => {
+	    onOpened();
+
+	    return () => {
+	      onClosed();
+	    };
+	  }, []);
+
 	  const updateEntries = T$3((newEntries) => {
 
 	    // select first entry if non is selected
@@ -28578,10 +28629,8 @@
 	      }
 
 	      const search = [
-	        entry.name,
 	        entry.description || '',
-	        entry.label || '',
-	        entry.id || ''
+	        entry.label || ''
 	      ]
 	        .join('---')
 	        .toLowerCase();
@@ -28680,18 +28729,23 @@
     >
       ${ displayHeader && m$2`
         <div class="djs-popup-header">
-          <h3 class="djs-popup-title">${ title }</h3>
+          <h3 class="djs-popup-title" title=${ title }>${ title }</h3>
           ${ headerEntries.map(entry => m$2`
             <span
               class=${ getHeaderClasses(entry, entry === selectedEntry) }
               onClick=${ event => onSelect(event, entry) }
-              title=${ entry.title }
+              title=${ entry.title || entry.label }
               data-id=${ entry.id }
               onMouseEnter=${ () => setSelectedEntry(entry) }
               onMouseLeave=${ () => setSelectedEntry(null) }
             >
-              ${ entry.imageUrl ? m$2`<img src=${ entry.imageUrl } />` : null }
-              ${ entry.label ? entry.label : null }
+              ${ entry.imageUrl ? m$2`
+                <img class="djs-popup-entry-icon" src=${ entry.imageUrl } />
+              ` : null }
+
+              ${ entry.label ? m$2`
+                <span class="djs-popup-label">${ entry.label }</span>
+              ` : null }
             </span>
           `) }
         </div>
@@ -28911,6 +28965,8 @@
         entries=${ entriesArray }
         headerEntries=${ headerEntriesArray }
         scale=${ scale }
+        onOpened=${ this._onOpened.bind(this) }
+        onClosed=${ this._onClosed.bind(this) }
         ...${{ ...options }}
       />
     `,
@@ -29014,6 +29070,14 @@
 	  this._eventBus.fire(`popupMenu.${ event }`, payload);
 	};
 
+	PopupMenu.prototype._onOpened = function() {
+	  this._emit('opened');
+	};
+
+	PopupMenu.prototype._onClosed = function() {
+	  this._emit('closed');
+	};
+
 	PopupMenu.prototype._createContainer = function(config) {
 
 	  let parent = config && config.parent || 'body';
@@ -29145,7 +29209,7 @@
 	 *
 	 * @example
 	 * const popupMenuProvider = {
-	 *   getPopupMenuEntries: function(element) {
+	 *   getPopupMenuEntries(element) {
 	 *     return {
 	 *       'entry-1': {
 	 *         label: 'My Entry',
@@ -29156,6 +29220,22 @@
 	 * };
 	 *
 	 * popupMenu.registerProvider('myMenuID', popupMenuProvider);
+	 *
+	 * @example
+	 * const replacingPopupMenuProvider = {
+	 *   getPopupMenuEntries(element) {
+	 *     return (entries) => {
+	 *       const {
+	 *         someEntry,
+	 *         ...remainingEntries
+	 *       } = entries;
+	 *
+	 *       return remainingEntries;
+	 *     };
+	 *   }
+	 * };
+	 *
+	 * popupMenu.registerProvider('myMenuID', replacingPopupMenuProvider);
 	 */
 	PopupMenu.prototype.registerProvider = function(id, priority, provider) {
 	  if (!provider) {
@@ -36913,7 +36993,9 @@
 	    );
 
 	    var isTriggeredByEventEqual = (
-	      businessObject.triggeredByEvent === target.triggeredByEvent
+
+	      // coherse to <false>
+	      !!target.triggeredByEvent === !!businessObject.triggeredByEvent
 	    );
 
 	    var isExpandedEqual = (
@@ -37329,6 +37411,15 @@
 	];
 
 	var TRANSACTION = [
+	  {
+	    label: 'Transaction',
+	    actionName: 'replace-with-transaction',
+	    className: 'bpmn-icon-transaction',
+	    target: {
+	      type: 'bpmn:Transaction',
+	      isExpanded: true
+	    }
+	  },
 	  {
 	    label: 'Sub Process',
 	    actionName: 'replace-with-subprocess',
@@ -37350,26 +37441,7 @@
 	  }
 	];
 
-	var EVENT_SUB_PROCESS = [
-	  {
-	    label: 'Sub Process',
-	    actionName: 'replace-with-subprocess',
-	    className: 'bpmn-icon-subprocess-expanded',
-	    target: {
-	      type: 'bpmn:SubProcess',
-	      isExpanded: true
-	    }
-	  },
-	  {
-	    label: 'Transaction',
-	    actionName: 'replace-with-transaction',
-	    className: 'bpmn-icon-transaction',
-	    target: {
-	      type: 'bpmn:Transaction',
-	      isExpanded: true
-	    }
-	  }
-	];
+	var EVENT_SUB_PROCESS = TRANSACTION;
 
 	var TASK = [
 	  {
@@ -39874,6 +39946,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
 
@@ -39997,6 +40070,12 @@
 	    });
 	  }
 
+	  if (selection && contextPad) {
+	    this._registerAction('replaceElement', function(event) {
+	      contextPad.triggerEntry('replace', 'click', event);
+	    });
+	  }
+
 	};
 
 	var EditorActionsModule = {
@@ -41115,6 +41194,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 = {