feat(client): be able to enable new context pad through flag

camunda · May 31, 2024 · 352dc1d · 352dc1d
1 parent 978f29d
commit 352dc1d
Show file tree

Hide file tree

Showing 12 changed files with 230 additions and 29 deletions.
diff --git a/client/src/app/tabs/bpmn/BpmnEditor.less b/client/src/app/tabs/bpmn/BpmnEditor.less
@@ -21,6 +21,15 @@
     --bjs-font-family: var(--font-family);
   }
 
+  /* @camunda/improved-canvas restets */
+  .djs-container.bio-improved-canvas {
+    background-color: var(--color-white);
+  }
+
+  .bio-improved-canvas defs pattern circle {
+    fill: #ccc !important;
+  }
+
   .djs-minimap {
 
     .toggle {

diff --git a/client/src/app/tabs/bpmn/__tests__/BpmnEditorSpec.js b/client/src/app/tabs/bpmn/__tests__/BpmnEditorSpec.js
@@ -54,6 +54,8 @@ import {
 
 import { SlotFillRoot } from '../../../slot-fill';
 
+import Flags, { ENABLE_NEW_CONTEXT_PAD } from '../../../../util/Flags';
+
 const { spy } = sinon;
 
 
@@ -2091,6 +2093,43 @@ describe('<BpmnEditor>', function() {
 
   });
 
+
+  describe('new context pad', function() {
+
+    beforeEach(function() {
+      Flags.reset();
+    });
+
+
+    it('should disable new context pad by default', async function() {
+
+      // when
+      const { instance } = await renderEditor(diagramXML);
+
+      // then
+      expect(instance).to.exist;
+      expect(instance.getModeler().additionalModules).to.exist;
+      expect(instance.getModeler().additionalModules).to.have.length(0);
+    });
+
+
+    it('should enable new context pad if enabled through flag', async function() {
+
+      // when
+      Flags.init({
+        [ ENABLE_NEW_CONTEXT_PAD ]: true
+      });
+
+      const { instance } = await renderEditor(diagramXML);
+
+      // then
+      expect(instance).to.exist;
+      expect(instance.getModeler().additionalModules).to.exist;
+      expect(instance.getModeler().additionalModules).to.have.length(1);
+    });
+
+  });
+
 });
 
 

diff --git a/client/src/app/tabs/bpmn/modeler/BpmnModeler.js b/client/src/app/tabs/bpmn/modeler/BpmnModeler.js
@@ -18,8 +18,6 @@ import handToolOnSpaceModule from './features/hand-tool-on-space';
 import propertiesPanelKeyboardBindingsModule from './features/properties-panel-keyboard-bindings';
 import lintingAnnotationsModule from '@camunda/linting/modeler';
 
-import Flags, { DISABLE_ADJUST_ORIGIN } from '../../../../util/Flags';
-
 import { BpmnJSTracking as bpmnJSTracking } from 'bpmn-js-tracking';
 
 import contextPadTracking from 'bpmn-js-tracking/lib/features/context-pad';
@@ -28,22 +26,40 @@ import modelingTracking from 'bpmn-js-tracking/lib/features/modeling';
 import popupMenuTracking from 'bpmn-js-tracking/lib/features/popup-menu';
 import paletteTracking from 'bpmn-js-tracking/lib/features/palette';
 
+import { BpmnImprovedCanvasModule } from '@camunda/improved-canvas';
+
+import Flags, {
+  DISABLE_ADJUST_ORIGIN,
+  ENABLE_NEW_CONTEXT_PAD
+} from '../../../../util/Flags';
 
 export default class PlatformBpmnModeler extends BpmnModeler {
 
   constructor(options = {}) {
 
-    const {
-      moddleExtensions,
+    let {
+      additionalModules = [],
+      moddleExtensions = {},
       ...otherOptions
     } = options;
 
+    if (Flags.get(ENABLE_NEW_CONTEXT_PAD, false)) {
+      additionalModules = [
+        ...additionalModules,
+        {
+          __depends__: [ BpmnImprovedCanvasModule ],
+          resourceLinkingContextPadProvider: [ 'value', null ],
+          resourceLinkingRules: [ 'value', null ],
+          showComments: [ 'value', null ]
+        }
+      ];
+    }
+
     super({
       ...otherOptions,
-      disableAdjustOrigin: Flags.get(DISABLE_ADJUST_ORIGIN),
-      moddleExtensions: {
-        ...(moddleExtensions || {})
-      }
+      additionalModules,
+      moddleExtensions,
+      disableAdjustOrigin: Flags.get(DISABLE_ADJUST_ORIGIN)
     });
   }
 }

diff --git a/client/src/app/tabs/cloud-bpmn/BpmnEditor.less b/client/src/app/tabs/cloud-bpmn/BpmnEditor.less
@@ -16,11 +16,19 @@
     }
   }
 
-
   .bjs-container {
     --bjs-font-family: var(--font-family);
   }
 
+  /* @camunda/improved-canvas restets */
+  .djs-container.bio-improved-canvas {
+    background-color: var(--color-white);
+  }
+
+  .bio-improved-canvas defs pattern circle {
+    fill: #ccc !important;
+  }
+
   .djs-minimap {
 
     .toggle {

diff --git a/client/src/app/tabs/cloud-bpmn/__tests__/BpmnEditorSpec.js b/client/src/app/tabs/cloud-bpmn/__tests__/BpmnEditorSpec.js
@@ -52,6 +52,8 @@ import {
 
 import { SlotFillRoot } from '../../../slot-fill';
 
+import Flags, { ENABLE_NEW_CONTEXT_PAD } from '../../../../util/Flags';
+
 const { spy } = sinon;
 
 
@@ -2012,6 +2014,43 @@ describe('cloud-bpmn - <BpmnEditor>', function() {
 
   });
 
+
+  describe('new context pad', function() {
+
+    beforeEach(function() {
+      Flags.reset();
+    });
+
+
+    it('should disable new context pad by default', async function() {
+
+      // when
+      const { instance } = await renderEditor(diagramXML);
+
+      // then
+      expect(instance).to.exist;
+      expect(instance.getModeler().additionalModules).to.exist;
+      expect(instance.getModeler().additionalModules).to.have.length(0);
+    });
+
+
+    it('should enable new context pad if enabled through flag', async function() {
+
+      // when
+      Flags.init({
+        [ ENABLE_NEW_CONTEXT_PAD ]: true
+      });
+
+      const { instance } = await renderEditor(diagramXML);
+
+      // then
+      expect(instance).to.exist;
+      expect(instance.getModeler().additionalModules).to.exist;
+      expect(instance.getModeler().additionalModules).to.have.length(1);
+    });
+
+  });
+
 });
 
 

diff --git a/client/src/app/tabs/cloud-bpmn/modeler/BpmnModeler.js b/client/src/app/tabs/cloud-bpmn/modeler/BpmnModeler.js
@@ -27,23 +27,40 @@ import modelingTracking from 'bpmn-js-tracking/lib/features/modeling';
 import popupMenuTracking from 'bpmn-js-tracking/lib/features/popup-menu';
 import paletteTracking from 'bpmn-js-tracking/lib/features/palette';
 
+import { BpmnImprovedCanvasModule } from '@camunda/improved-canvas';
+
 import Flags, {
-  DISABLE_ADJUST_ORIGIN
+  DISABLE_ADJUST_ORIGIN,
+  ENABLE_NEW_CONTEXT_PAD
 } from '../../../../util/Flags';
 
 
 export default class CloudBpmnModeler extends BpmnModeler {
 
   constructor(options = {}) {
 
-    const {
-      moddleExtensions,
+    let {
+      additionalModules = [],
+      moddleExtensions = {},
       ...otherOptions
     } = options;
 
+    if (Flags.get(ENABLE_NEW_CONTEXT_PAD, false)) {
+      additionalModules = [
+        ...additionalModules,
+        {
+          __depends__: [ BpmnImprovedCanvasModule ],
+          resourceLinkingContextPadProvider: [ 'value', null ],
+          resourceLinkingRules: [ 'value', null ],
+          showComments: [ 'value', null ]
+        }
+      ];
+    }
+
     super({
       ...otherOptions,
-      moddleExtensions: moddleExtensions || {},
+      additionalModules,
+      moddleExtensions,
       disableAdjustOrigin: Flags.get(DISABLE_ADJUST_ORIGIN)
     });
   }

diff --git a/client/src/app/tabs/cloud-dmn/modeler/DmnModeler.js b/client/src/app/tabs/cloud-dmn/modeler/DmnModeler.js
@@ -18,14 +18,19 @@ import completeDirectEditingModule from '../../bpmn/modeler/features/complete-di
 import propertiesPanelKeyboardBindingsModule from '../../bpmn/modeler/features/properties-panel-keyboard-bindings';
 import decisionTableKeyboardModule from '../../dmn/modeler/features/decision-table-keyboard';
 
-import Flags, { DISABLE_ADJUST_ORIGIN } from '../../../../util/Flags';
+import Flags, {
+  DISABLE_ADJUST_ORIGIN,
+  ENABLE_NEW_CONTEXT_PAD
+} from '../../../../util/Flags';
 
 import openDrgElementModule from '../../dmn/modeler/features/overview/open-drg-element';
 import overviewRendererModule from '../../dmn/modeler/features/overview/overview-renderer';
 
 import executionPlatformModule from '@camunda/execution-platform';
 import modelerModdle from 'modeler-moddle/resources/dmn-modeler.json';
 
+import { DmnImprovedCanvasModule } from '@camunda/improved-canvas';
+
 const NOOP_MODULE = [ 'value', null ];
 
 const poweredByModule = {
@@ -44,18 +49,22 @@ export default class CamundaDmnModeler extends DmnModeler {
 
     const {
       moddleExtensions = {},
-      drd: drdConfig,
+      drd,
       decisionTable,
       literalExpression,
       exporter,
       overview,
       ...otherOptions
     } = options;
 
-    const drd = {
-      ...drdConfig,
-      disableAdjustOrigin: Flags.get(DISABLE_ADJUST_ORIGIN)
-    };
+    let additionalModules = [];
+
+    if (Flags.get(ENABLE_NEW_CONTEXT_PAD, false)) {
+      additionalModules = [
+        ...additionalModules,
+        DmnImprovedCanvasModule
+      ];
+    }
 
     super({
       ...otherOptions,
@@ -66,9 +75,13 @@ export default class CamundaDmnModeler extends DmnModeler {
           viewDrd: NOOP_MODULE
         }
       ]),
-      drd: mergeModules(drd, [
+      drd: mergeModules({
+        ...drd,
+        disableAdjustOrigin: Flags.get(DISABLE_ADJUST_ORIGIN)
+      }, [
         propertiesPanelKeyboardBindingsModule,
-        executionPlatformModule
+        executionPlatformModule,
+        ...additionalModules
       ]),
       decisionTable: mergeModules(decisionTable, [
         decisionTableKeyboardModule,

diff --git a/client/src/app/tabs/dmn/DmnEditor.less b/client/src/app/tabs/dmn/DmnEditor.less
@@ -9,6 +9,15 @@
     --drd-font-family-monospace: var(--font-family-monospace);
   }
 
+  /* @camunda/improved-canvas restets */
+  .djs-container.bio-improved-canvas {
+    background-color: var(--color-white);
+  }
+
+  .bio-improved-canvas defs pattern circle {
+    fill: #ccc !important;
+  }
+
   .dmn-decision-table-container {
     --decision-table-font-family: var(--font-family);
   }

diff --git a/client/src/app/tabs/dmn/modeler/DmnModeler.js b/client/src/app/tabs/dmn/modeler/DmnModeler.js
@@ -18,14 +18,19 @@ import completeDirectEditingModule from '../../bpmn/modeler/features/complete-di
 import propertiesPanelKeyboardBindingsModule from '../../bpmn/modeler/features/properties-panel-keyboard-bindings';
 import decisionTableKeyboardModule from './features/decision-table-keyboard';
 
-import Flags, { DISABLE_ADJUST_ORIGIN } from '../../../../util/Flags';
+import Flags, {
+  DISABLE_ADJUST_ORIGIN,
+  ENABLE_NEW_CONTEXT_PAD
+} from '../../../../util/Flags';
 
 import openDrgElementModule from './features/overview/open-drg-element';
 import overviewRendererModule from './features/overview/overview-renderer';
 
 import executionPlatformModule from '@camunda/execution-platform';
 import modelerModdle from 'modeler-moddle/resources/dmn-modeler.json';
 
+import { DmnImprovedCanvasModule } from '@camunda/improved-canvas';
+
 const NOOP_MODULE = [ 'value', null ];
 
 const poweredByModule = {
@@ -44,18 +49,22 @@ export default class CamundaDmnModeler extends DmnModeler {
 
     const {
       moddleExtensions = {},
-      drd: drdConfig,
+      drd,
       decisionTable,
       literalExpression,
       exporter,
       overview,
       ...otherOptions
     } = options;
 
-    const drd = {
-      ...drdConfig,
-      disableAdjustOrigin: Flags.get(DISABLE_ADJUST_ORIGIN)
-    };
+    let additionalModules = [];
+
+    if (Flags.get(ENABLE_NEW_CONTEXT_PAD, false)) {
+      additionalModules = [
+        ...additionalModules,
+        DmnImprovedCanvasModule
+      ];
+    }
 
     super({
       ...otherOptions,
@@ -66,9 +75,13 @@ export default class CamundaDmnModeler extends DmnModeler {
           viewDrd: NOOP_MODULE
         }
       ]),
-      drd: mergeModules(drd, [
+      drd: mergeModules({
+        ...drd,
+        disableAdjustOrigin: Flags.get(DISABLE_ADJUST_ORIGIN)
+      }, [
         propertiesPanelKeyboardBindingsModule,
-        executionPlatformModule
+        executionPlatformModule,
+        ...additionalModules
       ]),
       decisionTable: mergeModules(decisionTable, [
         decisionTableKeyboardModule,

diff --git a/client/src/util/Flags.js b/client/src/util/Flags.js
@@ -50,4 +50,5 @@ export const CLOUD_ENGINE_VERSION = 'c8-engine-version';
 export const PLATFORM_ENGINE_VERSION = 'c7-engine-version';
 export const DISABLE_HTTL_HINT = 'disable-httl-hint';
 export const DEFAULT_HTTL = 'default-httl';
+export const ENABLE_NEW_CONTEXT_PAD = 'enable-new-context-pad';