camunda-bpmn-js 4.6.3 → 4.7.0

package/LICENSE

@@ -1,21 +1,21 @@
-The MIT License (MIT)
-
-Copyright (c) 2021-present Camunda Services GmbH
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+The MIT License (MIT)
+
+Copyright (c) 2021-present Camunda Services GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.

package/README.md

@@ -1,88 +1,88 @@
-# camunda-bpmn-js
-
-[![CI](https://github.com/camunda/camunda-bpmn-js/workflows/CI/badge.svg)](https://github.com/camunda/camunda-bpmn-js/actions?query=workflow%3ACI)
-
-Embeddable Camunda modeling distributions based on [bpmn-js](https://github.com/bpmn-io/bpmn-js).
-
-## Usage
-
-This project is designed to deliver different BPMN modeling distributions. Instead of creating custom Modeler implementations based on [bpmn-js](https://github.com/bpmn-io/bpmn-js), choose one of the existing packages to mirror the modeling experience of [Camunda's modeling](https://github.com/camunda/camunda-modeler/) products.
-
-Use a pre-packaged distribution
-
-```html
-<link rel="stylesheet" href="https://unpkg.com/camunda-bpmn-js@0.1.0/dist/assets/camunda-platform-modeler.css" />
-
-<script src="https://unpkg.com/camunda-bpmn-js@0.1.0/dist/camunda-platform-modeler.development.js"></script>
-```
-
-or install it via npm
-
-```js
-import BpmnModeler from 'camunda-bpmn-js/lib/camunda-platform/Modeler';
-
-import 'camunda-bpmn-js/dist/assets/camunda-platform-modeler.css';
-```
-
-into your web-application.
-
-```js
-var bpmnModeler = new BpmnModeler({
-  container: '#canvas',
-  propertiesPanel: {
-    parent: '#properties'
-  }
-});
-
-try {
-
-  await bpmnModeler.importXML(someDiagram);
-
-  console.log('success!');
-  bpmnModeler.get('canvas').zoom('fit-viewport');
-} catch (err) {
-
-  console.error('something went wrong:', err);
-}
-```
-
-Checkout [the docs](./docs/DISTRIBUTIONS.md) to learn more about the available distributions.
-
-## Build and Run
-
-Prepare the project by installing all dependencies:
-
-```sh
-npm install
-```
-
-Then, depending on your use-case, you may run any of the following commands:
-
-```sh
-# build the library and run all tests
-npm run all
-
-# spin up a single local camunda platform modeler instance
-npm run start:platform
-
-# run the full development setup
-npm run dev
-```
-
-## Related
-
-camunda-bpmn-js builds on top of a few powerful tools:
-
-* [bpmn-js](https://github.com/bpmn-io/bpmn-js): View and edit BPMN 2.0 diagrams in the browser
-* [diagram-js](https://github.com/bpmn-io/diagram-js): Diagram rendering and editing toolkit
-* [bpmn-js-properties-panel](https://github.com/bpmn-io/bpmn-js-properties-panel): A panel for (technical) properties editing
-* [bpmn-js-element-templates](https://github.com/bpmn-io/bpmn-js-element-templates): Domain specific editing for bpmn-js
-* [bpmn-js-create-append-anything](bpmn-js-create-append-anything): A create/append anything extension for bpmn-js
-* [bpmn-moddle](https://github.com/bpmn-io/bpmn-moddle): A BPMN 2.0 diagram reader/writer with extensions for [Camunda 7](https://github.com/camunda/camunda-bpmn-moddle) and [Camunda 8](https://github.com/camunda/zeebe-bpmn-moddle)
-* [camunda-bpmn-js-behaviors](https://github.com/camunda/camunda-bpmn-js-behaviors): Camunda specific behaviors for bpmn-js
-
-## License
-
-MIT
-
-Uses [bpmn-js](https://github.com/bpmn-io/bpmn-js) licensed under the bpmn.io license.
+# camunda-bpmn-js
+
+[![CI](https://github.com/camunda/camunda-bpmn-js/workflows/CI/badge.svg)](https://github.com/camunda/camunda-bpmn-js/actions?query=workflow%3ACI)
+
+Embeddable Camunda modeling distributions based on [bpmn-js](https://github.com/bpmn-io/bpmn-js).
+
+## Usage
+
+This project is designed to deliver different BPMN modeling distributions. Instead of creating custom Modeler implementations based on [bpmn-js](https://github.com/bpmn-io/bpmn-js), choose one of the existing packages to mirror the modeling experience of [Camunda's modeling](https://github.com/camunda/camunda-modeler/) products.
+
+Use a pre-packaged distribution
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/camunda-bpmn-js@0.1.0/dist/assets/camunda-platform-modeler.css" />
+
+<script src="https://unpkg.com/camunda-bpmn-js@0.1.0/dist/camunda-platform-modeler.development.js"></script>
+```
+
+or install it via npm
+
+```js
+import BpmnModeler from 'camunda-bpmn-js/lib/camunda-platform/Modeler';
+
+import 'camunda-bpmn-js/dist/assets/camunda-platform-modeler.css';
+```
+
+into your web-application.
+
+```js
+var bpmnModeler = new BpmnModeler({
+  container: '#canvas',
+  propertiesPanel: {
+    parent: '#properties'
+  }
+});
+
+try {
+
+  await bpmnModeler.importXML(someDiagram);
+
+  console.log('success!');
+  bpmnModeler.get('canvas').zoom('fit-viewport');
+} catch (err) {
+
+  console.error('something went wrong:', err);
+}
+```
+
+Checkout [the docs](./docs/DISTRIBUTIONS.md) to learn more about the available distributions.
+
+## Build and Run
+
+Prepare the project by installing all dependencies:
+
+```sh
+npm install
+```
+
+Then, depending on your use-case, you may run any of the following commands:
+
+```sh
+# build the library and run all tests
+npm run all
+
+# spin up a single local camunda platform modeler instance
+npm run start:platform
+
+# run the full development setup
+npm run dev
+```
+
+## Related
+
+camunda-bpmn-js builds on top of a few powerful tools:
+
+* [bpmn-js](https://github.com/bpmn-io/bpmn-js): View and edit BPMN 2.0 diagrams in the browser
+* [diagram-js](https://github.com/bpmn-io/diagram-js): Diagram rendering and editing toolkit
+* [bpmn-js-properties-panel](https://github.com/bpmn-io/bpmn-js-properties-panel): A panel for (technical) properties editing
+* [bpmn-js-element-templates](https://github.com/bpmn-io/bpmn-js-element-templates): Domain specific editing for bpmn-js
+* [bpmn-js-create-append-anything](bpmn-js-create-append-anything): A create/append anything extension for bpmn-js
+* [bpmn-moddle](https://github.com/bpmn-io/bpmn-moddle): A BPMN 2.0 diagram reader/writer with extensions for [Camunda 7](https://github.com/camunda/camunda-bpmn-moddle) and [Camunda 8](https://github.com/camunda/zeebe-bpmn-moddle)
+* [camunda-bpmn-js-behaviors](https://github.com/camunda/camunda-bpmn-js-behaviors): Camunda specific behaviors for bpmn-js
+
+## License
+
+MIT
+
+Uses [bpmn-js](https://github.com/bpmn-io/bpmn-js) licensed under the bpmn.io license.

package/dist/assets/base-modeler.css

@@ -1,6 +1,6 @@
-@import './diagram-js.css';
-@import './bpmn-js.css';
-@import './bpmn-font/css/bpmn-embedded.css';
-@import './diagram-js-minimap.css';
-@import './properties-panel.css';
+@import './diagram-js.css';
+@import './bpmn-js.css';
+@import './bpmn-font/css/bpmn-embedded.css';
+@import './diagram-js-minimap.css';
+@import './properties-panel.css';
 @import './color-picker.css';

package/dist/assets/base-navigated-viewer.css

@@ -1,2 +1,2 @@
-@import './diagram-js.css';
+@import './diagram-js.css';
 @import './bpmn-js.css';

package/dist/assets/base-viewer.css

@@ -1,2 +1,2 @@
-@import './diagram-js.css';
+@import './diagram-js.css';
 @import './bpmn-js.css';

package/dist/assets/camunda-cloud-modeler.css

@@ -1,3 +1,3 @@
-@import './base-modeler.css';
-@import './element-templates.css';
+@import './base-modeler.css';
+@import './element-templates.css';
 @import './element-template-chooser.css';

package/dist/assets/camunda-platform-modeler.css

@@ -1,2 +1,2 @@
-@import './base-modeler.css';
+@import './base-modeler.css';
 @import './element-templates.css';

package/dist/assets/diagram-js.css

@@ -59,6 +59,7 @@
   --popup-font-size: 14px;
   --popup-header-entry-selected-color: var(--color-blue-205-100-50);
   --popup-header-font-weight: bolder;
+  --popup-header-group-divider-color: var(--color-grey-225-10-75);
   --popup-background-color: var(--color-white);
   --popup-border-color: transparent;
   --popup-shadow-color: var(--color-black-opacity-30);
@@ -568,6 +569,29 @@ marker.djs-dragger tspan {
   color: inherit;
 }
 
+.djs-popup-header-group {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.djs-popup-header-group .entry {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.djs-popup-header-group + .djs-popup-header-group:before {
+  content: '';
+  width: 1px;
+  height: 20px;
+  background: var(--popup-header-group-divider-color);
+  margin: 0 5px;
+}
+
 .djs-popup-search {
   margin: 10px 12px;
 }

package/dist/base-modeler.development.js

@@ -28233,6 +28233,94 @@
 
   function r$2(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r$2(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r$2(e))&&(n&&(n+=" "),n+=t);return n}
 
+  /**
+   * @typedef {import('./PopupMenuProvider').PopupMenuHeaderEntry} PopupMenuHeaderEntry
+   */
+
+  /**
+   * Component that renders a popup menu header.
+   *
+   * @param {Object} props
+   * @param {PopupMenuHeaderEntry[]} props.headerEntries
+   * @param {PopupMenuHeaderEntry} props.selectedEntry
+   * @param {(event: MouseEvent, entry: PopupMenuHeaderEntry) => void} props.onSelect
+   * @param {(entry: PopupMenuHeaderEntry | null) => void} props.setSelectedEntry
+   * @param {string} props.title
+   */
+  function PopupMenuHeader(props) {
+    const {
+      headerEntries,
+      onSelect,
+      selectedEntry,
+      setSelectedEntry,
+      title
+    } = props;
+
+    const groups = F$3(() => groupEntries$1(headerEntries), [ headerEntries ]);
+
+    return m$3`
+    <div class="djs-popup-header">
+      <h3 class="djs-popup-title" title=${ title }>${ title }</h3>
+      ${ groups.map((group) => m$3`
+        <ul key=${ group.id } class="djs-popup-header-group" data-header-group=${ group.id }>
+
+          ${ group.entries.map(entry => m$3`
+            <li key=${ entry.id }>
+              <${ entry.action ? 'button' : 'span' }
+                class=${ getHeaderClasses(entry, entry === selectedEntry) }
+                onClick=${ event => entry.action && onSelect(event, entry) }
+                title=${ entry.title || entry.label }
+                data-id=${ entry.id }
+                onMouseEnter=${ () => entry.action && setSelectedEntry(entry) }
+                onMouseLeave=${ () => entry.action && setSelectedEntry(null) }
+                onFocus=${ () => entry.action && setSelectedEntry(entry) }
+                onBlur=${ () => entry.action && setSelectedEntry(null) }
+              >
+                ${(entry.imageUrl && m$3`<img class="djs-popup-entry-icon" src=${ entry.imageUrl } alt="" />`) ||
+                (entry.imageHtml && m$3`<div class="djs-popup-entry-icon" dangerouslySetInnerHTML=${ { __html: entry.imageHtml } } />`)}
+                ${ entry.label ? m$3`
+                  <span class="djs-popup-label">${ entry.label }</span>
+                ` : null }
+              </${ entry.action ? 'button' : 'span' }>
+            </li>
+          `) }
+        </ul>
+      `) }
+    </div>
+  `;
+  }
+
+
+  // helpers
+  function groupEntries$1(entries) {
+    return entries.reduce((groups, entry) => {
+      const groupId = entry.group || 'default';
+
+      const group = groups.find(group => group.id === groupId);
+
+      if (group) {
+        group.entries.push(entry);
+      } else {
+        groups.push({
+          id: groupId,
+          entries: [ entry ]
+        });
+      }
+
+      return groups;
+    }, []);
+  }
+
+  function getHeaderClasses(entry, selected) {
+    return clsx(
+      'entry',
+      entry.className,
+      entry.active ? 'active' : '',
+      entry.disabled ? 'disabled' : '',
+      selected ? 'selected' : ''
+    );
+  }
+
   /**
    * @typedef {import('./PopupMenuProvider').PopupMenuEntry} PopupMenuEntry
    */
@@ -28430,6 +28518,7 @@
    *
    * @param {Object} props
    * @param {() => void} props.onClose
+   * @param {() => void} props.onSelect
    * @param {(element: HTMLElement) => Point} props.position
    * @param {string} props.className
    * @param {PopupMenuEntry[]} props.entries
@@ -28580,28 +28669,13 @@
       scale=${ scale }
     >
       ${ displayHeader && m$3`
-        <div class="djs-popup-header">
-          <h3 class="djs-popup-title" title=${ title }>${ title }</h3>
-          ${ headerEntries.map(entry => m$3`
-            <${ entry.action ? 'button' : 'span' }
-              class=${ getHeaderClasses(entry, entry === selectedEntry) }
-              onClick=${ event => onSelect(event, entry) }
-              title=${ entry.title || entry.label }
-              data-id=${ entry.id }
-              onMouseEnter=${ () => setSelectedEntry(entry) }
-              onMouseLeave=${ () => setSelectedEntry(null) }
-              onFocus=${ () => setSelectedEntry(entry) }
-              onBlur=${ () => setSelectedEntry(null) }
-            >
-            ${(entry.imageUrl && m$3`<img class="djs-popup-entry-icon" src=${ entry.imageUrl } alt="" />`) ||
-            (entry.imageHtml && m$3`<div class="djs-popup-entry-icon" dangerouslySetInnerHTML=${ { __html: entry.imageHtml } } />`)}
-
-              ${ entry.label ? m$3`
-                <span class="djs-popup-label">${ entry.label }</span>
-              ` : null }
-            </${ entry.action ? 'button' : 'span' }>
-          `) }
-        </div>
+        <${PopupMenuHeader}
+          headerEntries=${ headerEntries }
+          onSelect=${ onSelect }
+          selectedEntry=${ selectedEntry }
+          setSelectedEntry=${ setSelectedEntry }
+          title=${ title }
+        />
       ` }
       ${ originalEntries.length > 0 && m$3`
         <div class="djs-popup-body">
@@ -28724,16 +28798,6 @@
       width: `${props.width}px`,
       'transform-origin': 'top left'
     };
-  }
-
-  function getHeaderClasses(entry, selected) {
-    return clsx(
-      'entry',
-      entry.className,
-      entry.active ? 'active' : '',
-      entry.disabled ? 'disabled' : '',
-      selected ? 'selected' : ''
-    );
   }
 
   /**
@@ -110083,54 +110147,54 @@
     bpmnPropertiesProvider: ['type', BpmnPropertiesProvider]
   };
 
-  /**
-   * @typedef {import('bpmn-js/lib/BaseViewer').BaseViewerOptions} BaseViewerOptions
-   *
-   * @typedef {import('didi').ModuleDeclaration} ModuleDeclaration
-   */
-
-  /**
-   *
-   * @param {BaseViewerOptions} options
-   */
-  function Modeler(options = {}) {
-    Modeler$1.call(this, options);
-  }
-
-  e$5(Modeler, Modeler$1);
-
-  /**
-   * @param { {
-   *  disableAdjustOrigin?: boolean;
-   *  disableGrid?: boolean;
-   * } } [options]
-   *
-   * @returns {ModuleDeclaration[]}
-   */
-  Modeler.prototype.getModules = function(options = {}) {
-    const modules = Modeler$1.prototype.getModules.call(this, options);
-
-    return [
-      ...modules,
-      options.disableAdjustOrigin
-        ? diagramOriginModule
-        : alignToOriginModule,
-      options.disableGrid
-        ? {}
-        : index$4
-    ];
-  };
-
-  Modeler.prototype._extensionModules = [
-    index$5,
-    ExecutableFixModule,
-    index$3,
-    index$2
-  ];
-
-  Modeler.prototype._modules = [].concat(
-    Modeler$1.prototype._modules,
-    Modeler.prototype._extensionModules
+  /**
+   * @typedef {import('bpmn-js/lib/BaseViewer').BaseViewerOptions} BaseViewerOptions
+   *
+   * @typedef {import('didi').ModuleDeclaration} ModuleDeclaration
+   */
+
+  /**
+   *
+   * @param {BaseViewerOptions} options
+   */
+  function Modeler(options = {}) {
+    Modeler$1.call(this, options);
+  }
+
+  e$5(Modeler, Modeler$1);
+
+  /**
+   * @param { {
+   *  disableAdjustOrigin?: boolean;
+   *  disableGrid?: boolean;
+   * } } [options]
+   *
+   * @returns {ModuleDeclaration[]}
+   */
+  Modeler.prototype.getModules = function(options = {}) {
+    const modules = Modeler$1.prototype.getModules.call(this, options);
+
+    return [
+      ...modules,
+      options.disableAdjustOrigin
+        ? diagramOriginModule
+        : alignToOriginModule,
+      options.disableGrid
+        ? {}
+        : index$4
+    ];
+  };
+
+  Modeler.prototype._extensionModules = [
+    index$5,
+    ExecutableFixModule,
+    index$3,
+    index$2
+  ];
+
+  Modeler.prototype._modules = [].concat(
+    Modeler$1.prototype._modules,
+    Modeler.prototype._extensionModules
   );
 
   return Modeler;