camunda-bpmn-js 1.3.0 → 1.4.0

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

@@ -17671,7 +17671,11 @@
           ...shapeStyle({
             fill: fill,
             stroke: stroke,
-            strokeWidth: 1
+            strokeWidth: 1,
+
+            // fix for safari / chrome / firefox bug not correctly
+            // resetting stroke dash array
+            strokeDasharray: [ 10000, 1 ]
           })
         });
 
@@ -17687,7 +17691,11 @@
           ...shapeStyle({
             fill: fill,
             stroke: stroke,
-            strokeWidth: 1
+            strokeWidth: 1,
+
+            // fix for safari / chrome / firefox bug not correctly
+            // resetting stroke dash array
+            strokeDasharray: [ 10000, 1 ]
           })
         });
 
@@ -17703,7 +17711,11 @@
           ...lineStyle({
             fill: 'none',
             stroke: stroke,
-            strokeWidth: 1.5
+            strokeWidth: 1.5,
+
+            // fix for safari / chrome / firefox bug not correctly
+            // resetting stroke dash array
+            strokeDasharray: [ 10000, 1 ]
           })
         });
 
@@ -17720,7 +17732,11 @@
           ...lineStyle({
             fill: 'none',
             stroke: stroke,
-            strokeWidth: 1.5
+            strokeWidth: 1.5,
+
+            // fix for safari / chrome / firefox bug not correctly
+            // resetting stroke dash array
+            strokeDasharray: [ 10000, 1 ]
           })
         });
 
@@ -20968,7 +20984,7 @@
     return isPrimaryButton(event) || isAuxiliaryButton(event);
   }
 
-  var LOW_PRIORITY$t = 500;
+  var LOW_PRIORITY$u = 500;
 
 
   /**
@@ -21163,7 +21179,7 @@
     eventBus.on([
       'shape.changed',
       'connection.changed'
-    ], LOW_PRIORITY$t, function(event) {
+    ], LOW_PRIORITY$u, function(event) {
 
       var element = event.element,
           gfx = event.gfx;
@@ -21171,7 +21187,7 @@
       eventBus.fire('interactionEvents.updateHit', { element: element, gfx: gfx });
     });
 
-    eventBus.on('interactionEvents.createHit', LOW_PRIORITY$t, function(event) {
+    eventBus.on('interactionEvents.createHit', LOW_PRIORITY$u, function(event) {
       var element = event.element,
           gfx = event.gfx;
 
@@ -21448,7 +21464,7 @@
     interactionEvents: [ 'type', InteractionEvents ]
   };
 
-  var LOW_PRIORITY$s = 500;
+  var LOW_PRIORITY$t = 500;
 
 
   /**
@@ -21487,7 +21503,7 @@
 
     // A low priortity is necessary, because outlines of labels have to be updated
     // after the label bounds have been updated in the renderer.
-    eventBus.on([ 'shape.added', 'shape.changed' ], LOW_PRIORITY$s, function(event) {
+    eventBus.on([ 'shape.added', 'shape.changed' ], LOW_PRIORITY$t, function(event) {
       var element = event.element,
           gfx = event.gfx;
 
@@ -21933,7 +21949,7 @@
   // document wide unique overlay ids
   var ids$2 = new IdGenerator('ov');
 
-  var LOW_PRIORITY$r = 500;
+  var LOW_PRIORITY$s = 500;
 
 
   /**
@@ -22505,7 +22521,7 @@
 
     // move integration
 
-    eventBus.on('element.changed', LOW_PRIORITY$r, function(e) {
+    eventBus.on('element.changed', LOW_PRIORITY$s, function(e) {
       var element = e.element;
 
       var container = self._getOverlayContainer(element, true);
@@ -23465,7 +23481,7 @@
     return true;
   }
 
-  var LOW_PRIORITY$q = 250;
+  var LOW_PRIORITY$r = 250;
   var ARROW_DOWN_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.81801948,3.50735931 L10.4996894,9.1896894 L10.5,4 L12,4 L12,12 L4,12 L4,10.5 L9.6896894,10.4996894 L3.75735931,4.56801948 C3.46446609,4.27512627 3.46446609,3.80025253 3.75735931,3.50735931 C4.05025253,3.21446609 4.52512627,3.21446609 4.81801948,3.50735931 Z"/></svg>';
 
   var EMPTY_MARKER = 'bjs-drilldown-empty';
@@ -23482,7 +23498,7 @@
 
     var self = this;
 
-    this.executed('shape.toggleCollapse', LOW_PRIORITY$q, function(context) {
+    this.executed('shape.toggleCollapse', LOW_PRIORITY$r, function(context) {
       var shape = context.shape;
 
       // Add overlay to the collapsed shape
@@ -23494,7 +23510,7 @@
     }, true);
 
 
-    this.reverted('shape.toggleCollapse', LOW_PRIORITY$q, function(context) {
+    this.reverted('shape.toggleCollapse', LOW_PRIORITY$r, function(context) {
       var shape = context.shape;
 
       // Add overlay to the collapsed shape
@@ -23506,7 +23522,7 @@
     }, true);
 
 
-    this.executed([ 'shape.create', 'shape.move', 'shape.delete' ], LOW_PRIORITY$q,
+    this.executed([ 'shape.create', 'shape.move', 'shape.delete' ], LOW_PRIORITY$r,
       function(context) {
         var oldParent = context.oldParent,
             newParent = context.newParent || context.parent,
@@ -23523,7 +23539,7 @@
       }, true);
 
 
-    this.reverted([ 'shape.create', 'shape.move', 'shape.delete' ], LOW_PRIORITY$q,
+    this.reverted([ 'shape.create', 'shape.move', 'shape.delete' ], LOW_PRIORITY$r,
       function(context) {
         var oldParent = context.oldParent,
             newParent = context.newParent || context.parent,
@@ -23976,7 +23992,7 @@
     return target && (matches(target, 'input, textarea') || target.contentEditable === 'true');
   }
 
-  var LOW_PRIORITY$p = 500;
+  var LOW_PRIORITY$q = 500;
 
 
   /**
@@ -23992,7 +24008,7 @@
 
     var self = this;
 
-    eventBus.on('editorActions.init', LOW_PRIORITY$p, function(event) {
+    eventBus.on('editorActions.init', LOW_PRIORITY$q, function(event) {
 
       var editorActions = event.editorActions;
 
@@ -29473,14 +29489,14 @@
 
   var ICONS$1 = icons$1;
 
-  var LOW_PRIORITY$o = 900;
+  var LOW_PRIORITY$p = 900;
 
   /**
    * A provider for align elements context pad button
    */
   function AlignElementsContextPadProvider(contextPad, popupMenu, translate, canvas) {
 
-    contextPad.registerProvider(LOW_PRIORITY$o, this);
+    contextPad.registerProvider(LOW_PRIORITY$p, this);
 
     this._contextPad = contextPad;
     this._popupMenu = popupMenu;
@@ -30034,7 +30050,7 @@
     return true;
   }
 
-  var LOW_PRIORITY$n = 100;
+  var LOW_PRIORITY$o = 100;
 
 
   /**
@@ -30046,7 +30062,7 @@
    */
   function AutoPlace$1(eventBus, modeling, canvas) {
 
-    eventBus.on('autoPlace', LOW_PRIORITY$n, function(context) {
+    eventBus.on('autoPlace', LOW_PRIORITY$o, function(context) {
       var shape = context.shape,
           source = context.source;
 
@@ -33758,7 +33774,7 @@
   }
 
   var HIGH_PRIORITY$n = 1100,
-      LOW_PRIORITY$m = 900;
+      LOW_PRIORITY$n = 900;
 
   var MARKER_OK$3 = 'connect-ok',
       MARKER_NOT_OK$3 = 'connect-not-ok';
@@ -33802,7 +33818,7 @@
       });
     });
 
-    eventBus.on('connect.hover', LOW_PRIORITY$m, function(event) {
+    eventBus.on('connect.hover', LOW_PRIORITY$n, function(event) {
       var context = event.context,
           hover = event.hover,
           canExecute = context.canExecute;
@@ -35360,7 +35376,7 @@
     return !!element.labelTarget;
   }
 
-  var LOW_PRIORITY$l = 750;
+  var LOW_PRIORITY$m = 750;
 
 
   function CreatePreview(
@@ -35405,7 +35421,7 @@
       return dragGroup;
     }
 
-    eventBus.on('create.move', LOW_PRIORITY$l, function(event) {
+    eventBus.on('create.move', LOW_PRIORITY$m, function(event) {
 
       var hover = event.hover,
           context = event.context,
@@ -36187,7 +36203,7 @@
     });
   }
 
-  var LOW_PRIORITY$k = 750;
+  var LOW_PRIORITY$l = 750;
 
 
   function BpmnCopyPaste(bpmnFactory, eventBus, moddleCopy) {
@@ -36198,7 +36214,7 @@
       return moddleCopy.copyElement(bo, targetBo, null, clone);
     }
 
-    eventBus.on('copyPaste.copyElement', LOW_PRIORITY$k, function(context) {
+    eventBus.on('copyPaste.copyElement', LOW_PRIORITY$l, function(context) {
       var descriptor = context.descriptor,
           element = context.element,
           businessObject = getBusinessObject$1(element);
@@ -36295,7 +36311,7 @@
 
     // copy + paste processRef with participant
 
-    eventBus.on('copyPaste.copyElement', LOW_PRIORITY$k, function(context) {
+    eventBus.on('copyPaste.copyElement', LOW_PRIORITY$l, function(context) {
       var descriptor = context.descriptor,
           element = context.element;
 
@@ -36321,7 +36337,7 @@
 
     // resolve references
 
-    eventBus.on('copyPaste.pasteElement', LOW_PRIORITY$k, function(context) {
+    eventBus.on('copyPaste.pasteElement', LOW_PRIORITY$l, function(context) {
       var cache = context.cache,
           descriptor = context.descriptor;
 
@@ -40600,12 +40616,13 @@
    * A palette provider for the create elements menu.
    */
   function CreatePaletteProvider(palette, translate, popupMenu, canvas, mouse) {
+
     this._translate = translate;
     this._popupMenu = popupMenu;
     this._canvas = canvas;
     this._mouse = mouse;
 
-    palette.registerProvider(this);
+    palette.registerProvider(800,this);
   }
 
   CreatePaletteProvider.$inject = [
@@ -40618,8 +40635,7 @@
 
 
   CreatePaletteProvider.prototype.getPaletteEntries = function(element) {
-    const actions = {},
-          translate = this._translate,
+    const translate = this._translate,
           popupMenu = this._popupMenu,
           canvas = this._canvas,
           mouse = this._mouse;
@@ -40642,7 +40658,7 @@
       };
     };
 
-    assign$1(actions, {
+    return {
       'create': {
         group: 'create',
         imageUrl: createIcon,
@@ -40660,10 +40676,8 @@
             });
           }
         }
-      },
-    });
-
-    return actions;
+      }
+    };
   };
 
   /**
@@ -40691,16 +40705,23 @@
     var selection = this._injector.get('selection', false);
     var contextPad = this._injector.get('contextPad', false);
     var palette = this._injector.get('palette', false);
+    var popupMenu = this._injector.get('popupMenu', false);
 
     const actions = {};
 
     // append
-    if (selection && contextPad) {
+    if (selection && contextPad && palette && popupMenu && palette) {
       assign$1(actions, {
         'appendElement': function(event) {
-          contextPad.triggerEntry('append', 'click', event);
-        } }
-      );
+          const selected = selection && selection.get();
+
+          if (selected.length == 1 && !popupMenu.isEmpty(selected[0], 'bpmn-append')) {
+            contextPad.triggerEntry('append', 'click', event);
+          } else {
+            palette.triggerEntry('create', 'click', event);
+          }
+        }
+      });
     }
 
     // create
@@ -40726,7 +40747,6 @@
     this._injector = injector;
     this._keyboard = this._injector.get('keyboard', false);
     this._editorActions = this._injector.get('editorActions', false);
-    this._selection = this._injector.get('selection', false);
 
     if (this._keyboard) {
       this._injector.invoke(KeyboardBindings, this);
@@ -40750,7 +40770,6 @@
 
     var keyboard = this._keyboard;
     var editorActions = this._editorActions;
-    var selection = this._selection;
 
     // inherit default bindings
     KeyboardBindings.prototype.registerBindings.call(this, keyboard, editorActions);
@@ -40781,12 +40800,7 @@
 
       if (keyboard && keyboard.isKey([ 'a', 'A' ], event)) {
 
-        if (selection && selection.get().length == 1) {
-          editorActions && editorActions.trigger('appendElement', event);
-        } else {
-          editorActions && editorActions.trigger('createElement', event);
-        }
-
+        editorActions && editorActions.trigger('appendElement', event);
         return true;
       }
     });
@@ -40818,7 +40832,8 @@
       create,
       autoPlace,
       rules,
-      mouse
+      mouse,
+      translate
   ) {
     this._elementFactory = elementFactory;
     this._popupMenu = popupMenu;
@@ -40827,6 +40842,7 @@
     this._rules = rules;
     this._create = create;
     this._mouse = mouse;
+    this._translate = translate;
 
     this.register();
   }
@@ -40837,7 +40853,8 @@
     'create',
     'autoPlace',
     'rules',
-    'mouse'
+    'mouse',
+    'translate'
   ];
 
   /**
@@ -40856,6 +40873,8 @@
    */
   AppendMenuProvider.prototype.getPopupMenuEntries = function(element) {
     const rules = this._rules;
+    const translate = this._translate;
+
     const entries = {};
 
     if (!rules.allowed('shape.append', { element: element })) {
@@ -40879,10 +40898,13 @@
       } = option;
 
       entries[`append-${actionName}`] = {
-        label,
+        label: label && translate(label),
         className,
         description,
-        group,
+        group: group && {
+          ...group,
+          name: translate(group.name)
+        },
         search,
         rank,
         action: this._createEntryAction(element, target)
@@ -40950,7 +40972,9 @@
         event = mouse.getLastMoveEvent();
       }
 
-      return create.start(event, newElement);
+      return create.start(event, newElement, {
+        source: element
+      });
     };
 
     return {
@@ -40984,16 +41008,18 @@
     return true;
   };
 
+  var LOW_PRIORITY$k = 900;
+
   /**
    * A provider for align elements context pad button
    */
   function AppendContextPadProvider(contextPad, popupMenu, translate, canvas) {
+    contextPad.registerProvider(LOW_PRIORITY$k, this);
+
     this._contextPad = contextPad;
     this._popupMenu = popupMenu;
     this._translate = translate;
     this._canvas = canvas;
-
-    contextPad.registerProvider(this);
   }
 
   AppendContextPadProvider.$inject = [
@@ -41010,7 +41036,7 @@
 
     if (!popupMenu.isEmpty(element, 'bpmn-append')) {
 
-      // Replace menu entry
+      // append menu entry
       return {
         'append': {
           group: 'model',
@@ -43842,7 +43868,7 @@
 
     function activateDirectEdit(element, force) {
       if (force ||
-          isAny(element, [ 'bpmn:Task', 'bpmn:TextAnnotation' ]) ||
+          isAny(element, [ 'bpmn:Task', 'bpmn:TextAnnotation', 'bpmn:Participant' ]) ||
           isCollapsedSubProcess(element)) {
 
         directEditing.activate(element);
@@ -104990,6 +105016,288 @@
     colorPopupProvider: [ 'type', ColorPopupProvider ]
   };
 
+  /**
+   * A popup menu provider that allows to append elements with
+   * element templates.
+   */
+  function ElementTemplatesAppendProvider(
+      popupMenu, translate, elementTemplates,
+      autoPlace, create, mouse, rules) {
+
+    this._popupMenu = popupMenu;
+    this._translate = translate;
+    this._elementTemplates = elementTemplates;
+    this._autoPlace = autoPlace;
+    this._create = create;
+    this._mouse = mouse;
+    this._rules = rules;
+
+    this.register();
+  }
+
+  ElementTemplatesAppendProvider.$inject = [
+    'popupMenu',
+    'translate',
+    'elementTemplates',
+    'autoPlace',
+    'create',
+    'move',
+    'rules'
+  ];
+
+  /**
+   * Register append menu provider in the popup menu
+   */
+  ElementTemplatesAppendProvider.prototype.register = function() {
+    this._popupMenu.registerProvider('bpmn-append', this);
+  };
+
+  /**
+   * Adds the element templates to the append menu.
+   * @param {djs.model.Base} element
+   *
+   * @returns {Object}
+   */
+  ElementTemplatesAppendProvider.prototype.getPopupMenuEntries = function(element) {
+    return (entries) => {
+
+      if (!this._rules.allowed('shape.append', { element: element })) {
+        return [];
+      }
+
+      const filteredTemplates = this._filterTemplates(this._elementTemplates.getLatest());
+
+      // add template entries
+      assign$1(entries, this.getTemplateEntries(element, filteredTemplates));
+
+      return entries;
+    };
+  };
+
+  /**
+   * Get all element templates.
+   *
+   * @param {djs.model.Base} element
+   *
+   * @return {Object} element templates as menu entries
+   */
+  ElementTemplatesAppendProvider.prototype.getTemplateEntries = function(element, templates) {
+
+    const templateEntries = {};
+
+    templates.map(template => {
+
+      const {
+        icon = {},
+        category,
+      } = template;
+
+      const entryId = `append.template-${template.id}`;
+
+      const defaultGroup = {
+        id: 'templates',
+        name: this._translate('Templates')
+      };
+
+      templateEntries[entryId] = {
+        label: template.name,
+        description: template.description,
+        documentationRef: template.documentationRef,
+        imageUrl: icon.contents,
+        group: category || defaultGroup,
+        action: this._getEntryAction(element, template)
+      };
+    });
+
+    return templateEntries;
+  };
+
+  /**
+   * Filter out templates from the options.
+   *
+   * @param {Array<Object>} templates
+   *
+   * @returns {Array<Object>}
+   */
+  ElementTemplatesAppendProvider.prototype._filterTemplates = function(templates) {
+    return templates.filter(template => {
+      const {
+        appliesTo,
+        elementType
+      } = template;
+
+      const type = (elementType && elementType.value) || appliesTo[0];
+
+      // elements that can not be appended
+      if ([
+        'bpmn:StartEvent',
+        'bpmn:Participant'
+      ].includes(type)) {
+        return false;
+      }
+
+      // sequence flow templates are supported
+      // but connections are not appendable
+      if ('bpmn:SequenceFlow' === type) {
+        return false;
+      }
+
+      return true;
+    });
+  };
+
+  /**
+   * Create an action for a given template.
+   *
+   * @param {djs.model.Base} element
+   * @param {Object} template
+   *
+   * @returns {Object}
+   */
+  ElementTemplatesAppendProvider.prototype._getEntryAction = function(element, template) {
+    return {
+
+      click: () => {
+        const newElement = this._elementTemplates.createElement(template);
+        this._autoPlace.append(element, newElement);
+      },
+
+      dragstart: (event) => {
+        const newElement = this._elementTemplates.createElement(template);
+
+        if (event instanceof KeyboardEvent) {
+          event = this._mouse.getLastMoveEvent();
+        }
+
+        this._create.start(event, newElement, {
+          source: element
+        });
+      }
+    };
+  };
+
+  /**
+   * A popup menu provider that allows to create elements with
+   * element templates.
+   */
+  function ElementTemplatesCreateProvider(
+      popupMenu, translate, elementTemplates,
+      mouse, create) {
+
+    this._popupMenu = popupMenu;
+    this._translate = translate;
+    this._elementTemplates = elementTemplates;
+    this._mouse = mouse;
+    this._create = create;
+
+    this.register();
+  }
+
+  ElementTemplatesCreateProvider.$inject = [
+    'popupMenu',
+    'translate',
+    'elementTemplates',
+    'mouse',
+    'create'
+  ];
+
+  /**
+   * Register create menu provider in the popup menu
+   */
+  ElementTemplatesCreateProvider.prototype.register = function() {
+    this._popupMenu.registerProvider('bpmn-create', this);
+  };
+
+  /**
+   * Adds the element templates to the create menu.
+   * @param {djs.model.Base} element
+   *
+   * @returns {Object}
+   */
+  ElementTemplatesCreateProvider.prototype.getPopupMenuEntries = function(element) {
+    return (entries) => {
+
+      // add template entries
+      assign$1(entries, this.getTemplateEntries(element));
+
+      return entries;
+    };
+  };
+
+  /**
+   * Get all element templates.
+   *
+   * @param {djs.model.Base} element
+   *
+   * @return {Array<Object>} a list of element templates as menu entries
+   */
+  ElementTemplatesCreateProvider.prototype.getTemplateEntries = function() {
+
+    const templates = this._elementTemplates.getLatest();
+    const templateEntries = {};
+
+    templates.map(template => {
+
+      const {
+        icon = {},
+        category,
+      } = template;
+
+      const entryId = `create.template-${template.id}`;
+
+      const defaultGroup = {
+        id: 'templates',
+        name: this._translate('Templates')
+      };
+
+      templateEntries[entryId] = {
+        label: template.name,
+        description: template.description,
+        documentationRef: template.documentationRef,
+        imageUrl: icon.contents,
+        group: category || defaultGroup,
+        action: {
+          click: this._getEntryAction(template),
+          dragstart: this._getEntryAction(template)
+        }
+      };
+    });
+
+    return templateEntries;
+  };
+
+
+  ElementTemplatesCreateProvider.prototype._getEntryAction = function(template) {
+    const create = this._create;
+    const popupMenu = this._popupMenu;
+    const elementTemplates = this._elementTemplates;
+    const mouse = this._mouse;
+
+    return (event) => {
+
+      popupMenu.close();
+
+      // create the new element
+      let newElement = elementTemplates.createElement(template);
+
+      // use last mouse event if triggered via keyboard
+      if (event instanceof KeyboardEvent) {
+        event = mouse.getLastMoveEvent();
+      }
+
+      return create.start(event, newElement);
+    };
+  };
+
+  var createAppendElementTemplatesModule = {
+    __init__: [
+      'elementTemplatesAppendProvider',
+      'elementTemplatesCreateProvider'
+    ],
+    elementTemplatesAppendProvider: [ 'type', ElementTemplatesAppendProvider ],
+    elementTemplatesCreateProvider: [ 'type', ElementTemplatesCreateProvider ]
+  };
+
   var inherits_browser = {exports: {}};
 
   if (typeof Object.create === 'function') {
@@ -105571,6 +105879,7 @@
     rulesModule,
     zeebePropertiesProviderModule,
     index$1,
+    createAppendElementTemplatesModule,
     replaceModule,
     sharedReplaceModule,
     colorPickerModule