feat: create/append anything

example/app.js

@@ -30,6 +30,8 @@ const TEMPLATES = [ ...EMAIL_TEMPLATES, ...REST_TEMPLATES ];
 
 const url = new URL(window.location.href);
 
+const appendAnything = url.searchParams.has('aa');
+
 const persistent = url.searchParams.has('p');
 const presentationMode = url.searchParams.has('pm');
 
@@ -71,6 +73,9 @@ const modeler = new BpmnModeler({
   keyboard: {
     bindTo: document
   },
+  connectorsExtension: {
+    appendAnything
+  },
   propertiesPanel: {
     parent: '#properties-panel'
   },

example/style.css

@@ -8,6 +8,15 @@
   --font-family: var(--font-family);
 }
 
+.djs-palette .separator {
+  margin: 5px;
+  padding-top: 10px;
+}
+
+.djs-palette .entry:before {
+  vertical-align: initial;
+}
+
 html, body, #canvas {
   width: 100%;
   height: 100%;

src/ConnectorKeyboardBindings.js

@@ -43,10 +43,18 @@ ConnectorKeyboardBindings.prototype.registerKeyboardBindings = function(keyboard
       return true;
     }
 
+    if (keyboard.isKey(['n', 'N'], event)) {
+      connectorsExtension.createAnything(mouseEvent);
+
+      return true;
+    }
+
     if (keyboard.isKey(['a', 'A'], event)) {
 
       if (selection.get().length === 1) {
         connectorsExtension.appendAnything(mouseEvent, selection.get()[0]);
+      } else {
+        connectorsExtension.createAnything(mouseEvent);
       }
 
       return true;

src/ConnectorsExtension.js

@@ -1,11 +1,26 @@
-const appendSvg = `
+const appendConnectorSvg = `
 <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M15.8125 11.0069C14.7767 11.0079 13.7689 11.343 12.9388 11.9625L10.0375 9.06127C10.6643 8.2372 11.0026 7.22976 11 6.19439C11.0056 3.96215 9.47542 2.01909 7.30408 1.50118C5.13274 0.983268 2.89029 2.02648 1.88772 4.02092C0.885144 6.01536 1.38567 8.43742 3.09667 9.87109C4.80766 11.3048 7.27994 11.3737 9.06813 10.0375L11.9625 12.9388C10.6267 14.7264 10.6952 17.1979 12.1278 18.9089C13.5605 20.6199 15.9814 21.1216 17.976 20.1207C19.9706 19.1199 21.0155 16.8791 20.5 14.7079C19.9846 12.5366 18.0441 11.0045 15.8125 11.0069ZM2.75001 6.19439C2.75001 4.29591 4.28903 2.75689 6.18751 2.75689C8.08599 2.75689 9.62501 4.29591 9.62501 6.19439C9.62501 8.09287 8.08599 9.63189 6.18751 9.63189C4.28903 9.63189 2.75001 8.09287 2.75001 6.19439Z" fill="#22242A"/>
 </svg>
 `;
 
+const appendConnectorImageUrl = 'data:image/svg+xml;utf8,' + encodeURIComponent(appendConnectorSvg);
+
+const appendSvg = `
+<svg width="22" height="22" viewBox="0 0 5.82 5.82" xmlns="http://www.w3.org/2000/svg">
+  <path d="m1.86 5.12-.72-.53 1.17-1.5c-.61-.16-1.22-.32-1.83-.5l.28-.85 1.78.65L2.46.5h.9l-.08 1.9 1.78-.66.28.86-1.83.5 1.17 1.49-.72.53-1.05-1.58-1.05 1.58Z" />
+</svg>
+`;
+
 const appendImageUrl = 'data:image/svg+xml;utf8,' + encodeURIComponent(appendSvg);
 
+const createSvg = `
+<svg width="46" height="46" viewBox="-1 -1 7.82 7.82" xmlns="http://www.w3.org/2000/svg">
+  <path d="m1.86 5.12-.72-.53 1.17-1.5c-.61-.16-1.22-.32-1.83-.5l.28-.85 1.78.65L2.46.5h.9l-.08 1.9 1.78-.66.28.86-1.83.5 1.17 1.49-.72.53-1.05-1.58-1.05 1.58Z" />
+</svg>
+`;
+
+const createImageUrl = 'data:image/svg+xml;utf8,' + encodeURIComponent(createSvg);
 
 // workaround for
 // https://github.com/camunda/camunda-bpmn-js/issues/87
@@ -17,32 +32,45 @@ export default function ConnectorsExtension(
     injector, create,
     contextPad, translate,
     elementTemplatesLoader,
-    replaceMenu, appendMenu) {
+    replaceMenu, appendMenu,
+    createMenu, palette) {
 
   this._create = create;
   this._contextPad = contextPad;
   this._translate = translate;
   this._elementTemplatesLoader = elementTemplatesLoader;
   this._replaceMenu = replaceMenu;
   this._appendMenu = appendMenu;
+  this._createMenu = createMenu;
 
   this._autoPlace = injector.get('autoPlace', false);
 
+  this._config = config;
+
   contextPad.registerProvider(LOWER_PRIORITY, this);
+
+  if (this._isAppendAnything()) {
+    palette.registerProvider(LOWER_PRIORITY, this);
+  }
 }
 
 ConnectorsExtension.$inject = [
-  'config.connectorExtension',
+  'config.connectorsExtension',
   'injector', 'create',
   'contextPad', 'translate',
   'elementTemplatesLoader',
-  'replaceMenu', 'appendMenu'
+  'replaceMenu', 'appendMenu',
+  'createMenu', 'palette'
 ];
 
 ConnectorsExtension.prototype.loadTemplates = function(templates) {
   this._elementTemplatesLoader.setTemplates(templates);
 };
 
+ConnectorsExtension.prototype._isAppendAnything = function() {
+  return this._config && this._config.appendAnything;
+};
+
 ConnectorsExtension.prototype._getReplaceMenuPosition = function(element) {
 
   var Y_OFFSET = 5;
@@ -139,6 +167,26 @@ ConnectorsExtension.prototype.replaceAnything = function(event, element) {
     }
   });
 };
+
+ConnectorsExtension.prototype.createAnything = function(event) {
+  return this._createMenu.open(event).then(result => {
+
+    const {
+      event: _event,
+      newElement
+    } = result;
+
+    this._create.start(
+      _event instanceof MouseEvent ? _event : event,
+      newElement
+    );
+  }).catch(error => {
+    if (error !== 'user-canceled') {
+      console.error('create-anything :: error', error);
+    }
+  });
+};
+
 ConnectorsExtension.prototype.getContextPadEntries = function(element) {
 
   const replaceMenu = this._replaceMenu;
@@ -183,8 +231,8 @@ ConnectorsExtension.prototype.getContextPadEntries = function(element) {
 
       entries['append-anything'] = {
         group: 'model',
-        imageUrl: appendImageUrl,
-        title: translate('Append connector'),
+        imageUrl: this._isAppendAnything() ? appendImageUrl : appendConnectorImageUrl,
+        title: translate(this._isAppendAnything() ? 'Append anything' : 'Append connector'),
         action: {
           click: (event, element) => {
             this.appendAnything(event, element);
@@ -195,4 +243,20 @@ ConnectorsExtension.prototype.getContextPadEntries = function(element) {
 
     return entries;
   };
+};
+
+ConnectorsExtension.prototype.getPaletteEntries = function() {
+
+  return {
+    'create-anything': {
+      group: 'tools',
+      imageUrl: createImageUrl,
+      title: this._translate('Create anything'),
+      action: {
+        click: (event) => {
+          this.createAnything(event);
+        }
+      }
+    }
+  };
 };

src/append-menu/AppendMenu.js

@@ -12,25 +12,65 @@ import {
 
 import clsx from 'clsx';
 
+import {
+  CREATE_OPTIONS
+} from '../create-menu/CreateOptions';
+
+
+export default function AppendMenu(
+    config,
+    elementTemplates, elementFactory,
+    injector, changeMenu) {
+
+  this._config = config;
 
-export default function AppendMenu(elementTemplates, injector, changeMenu) {
   this._elementTemplates = elementTemplates;
+  this._elementFactory = elementFactory;
   this._injector = injector;
   this._changeMenu = changeMenu;
 }
 
 AppendMenu.$inject = [
+  'config.connectorsExtension',
   'elementTemplates',
+  'elementFactory',
   'injector',
   'changeMenu'
 ];
 
+AppendMenu.prototype._isAppendAnything = function() {
+  return this._config && this._config.appendAnything;
+};
+
 AppendMenu.prototype._getMatchingTemplates = function() {
   return this._elementTemplates.getAll().filter(template => {
     return template.appliesTo.includes('bpmn:Task') || template.appliesTo.includes('bpmn:ServiceTask');
   });
 };
 
+AppendMenu.prototype._getDefaultEntries = function() {
+
+  return this._isAppendAnything() ? CREATE_OPTIONS.map(option => {
+
+    const {
+      actionName,
+      className,
+      label,
+      target
+    } = option;
+
+    return {
+      label,
+      id: `create-${actionName}`,
+      className,
+      action: () => {
+        return this._elementFactory.create('shape', { ...target });
+      }
+    };
+  }) : [];
+
+};
+
 AppendMenu.prototype._getTemplateEntries = function(element) {
 
   const templates = this._getMatchingTemplates();
@@ -56,14 +96,17 @@ AppendMenu.prototype._getTemplateEntries = function(element) {
 
 AppendMenu.prototype._getContext = function(element) {
 
-  const templateEntries = this._getTemplateEntries(element);
+  const defaultEntries = this._getDefaultEntries();
+
+  const templateEntries = this._getTemplateEntries();
 
   return {
     entries: [
+      ...defaultEntries,
       ...templateEntries
     ],
     empty: !(
-      templateEntries.length
+      templateEntries.length + defaultEntries.length
     )
   };
 };
@@ -91,6 +134,7 @@ AppendMenu.prototype.open = function(element, position) {
     <${AppendMenuComponent}
       entries=${ entries }
       onClose=${ onClose }
+      title=${ this._isAppendAnything() ? 'Append anything' : 'Append connector' }
     />
   `;
 
@@ -116,7 +160,8 @@ function AppendMenuComponent(props) {
 
   const {
     onClose,
-    entries
+    entries,
+    title
   } = props;
 
   const onSelect = (event, entry, dragstart=false) => {
@@ -244,7 +289,7 @@ function AppendMenuComponent(props) {
   return html`
     <div class="cmd-change-menu__header">
       <h3 class="cmd-change-menu__title">
-        Append a connector
+        ${ title }
       </h3>
     </div>