feat(popup-menu): add non-interrupting toggle

bpmn-io · Nov 2, 2023 · 9c71556 · 9c71556
1 parent 29f135f
commit 9c71556
Show file tree

Hide file tree

Showing 3 changed files with 226 additions and 28 deletions.
diff --git a/lib/features/popup-menu/ReplaceMenuProvider.js b/lib/features/popup-menu/ReplaceMenuProvider.js
@@ -19,6 +19,8 @@ import {
 } from 'min-dash';
 
 import * as replaceOptions from '../replace/ReplaceOptions';
+import { canBeNonInterrupting, getInterruptingProperty } from '../modeling/behavior/util/NonInterruptingUtil';
+import Icons from './util/Icons';
 
 /**
  * @typedef {import('../modeling/BpmnFactory').default} BpmnFactory
@@ -315,6 +317,13 @@ ReplaceMenuProvider.prototype.getPopupMenuHeaderEntries = function(target) {
     };
   }
 
+  if (canBeNonInterrupting(target)) {
+    headerEntries = {
+      ...headerEntries,
+      ...this._getNonInterruptingHeaderEntries(target)
+    };
+  }
+
   return headerEntries;
 };
 
@@ -643,3 +652,29 @@ ReplaceMenuProvider.prototype._getAdHocHeaderEntries = function(element) {
     }
   };
 };
+
+
+ReplaceMenuProvider.prototype._getNonInterruptingHeaderEntries = function(element) {
+  const translate = this._translate;
+  const businessObject = getBusinessObject(element);
+  const self = this;
+
+  const interruptingProperty = getInterruptingProperty(element);
+
+  const icon = is(element, 'bpmn:BoundaryEvent') ? Icons['intermediate-event-non-interrupting'] : Icons['start-event-non-interrupting'];
+
+  const isNonInterrupting = !businessObject[interruptingProperty];
+
+  return {
+    'toggle-non-interrupting': {
+      imageHtml: icon,
+      title: translate('Toggle Non-Interrupting'),
+      active: isNonInterrupting,
+      action: function() {
+        self._modeling.updateProperties(element, {
+          [interruptingProperty]: !!isNonInterrupting
+        });
+      }
+    }
+  };
+};
diff --git a/lib/features/popup-menu/util/Icons.js b/lib/features/popup-menu/util/Icons.js
@@ -0,0 +1,15 @@
+export default {
+  'start-event-non-interrupting': `
+  <svg viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg">
+    <g transform="translate(0 995.64)">
+      <path d="m1899 28.357c21.545 567.43-598.38 1023.5-1133.6 835.92-548.09-147.21-801.57-873.95-463.59-1330 302.62-480.3 1071.7-507.54 1407.6-49.847 122.14 153.12 190.07 348.07 189.59 543.91z" fill="none" stroke="currentColor" stroke-dasharray="418.310422, 361.2328165" stroke-linecap="round" stroke-width="100"/>
+    </g>
+  </svg>`,
+  'intermediate-event-non-interrupting': `
+  <svg viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg">
+     <g transform="translate(0 995.64)" fill="none" stroke="currentColor" stroke-linecap="round">
+        <circle cx="1024" cy="28.357" r="875" stroke-dasharray="418.310422, 361.2328165" stroke-width="100"/>
+        <circle cx="1024" cy="28.357" r="685" stroke-dasharray="348.31044857,261.23283643" stroke-dashoffset="500" stroke-width="100"/>
+     </g>
+  </svg>`
+};