fix: register appendElement action with improved context pad

Closes #4349

client/src/app/tabs/bpmn/modeler/BpmnModeler.js

@@ -26,7 +26,7 @@ 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 { BpmnImprovedCanvasModule } from './features/improved-canvas';
 
 import Flags, {
   DISABLE_ADJUST_ORIGIN,

client/src/app/tabs/bpmn/modeler/features/improved-canvas/EditorActions.js

@@ -0,0 +1,23 @@
+/**
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information regarding copyright
+ * ownership.
+ *
+ * Camunda licenses this file to you under the MIT; you may not use this file
+ * except in compliance with the MIT License.
+ */
+
+/**
+ *
+ * @param {import('diagram-js/lib/features/editor-actions/EditorActions').default} editorActions
+ */
+export function EditorActions(editorActions) {
+  editorActions.register({
+    appendElement: function(...args) {
+      return editorActions.trigger('appendCreatePad', ...args);
+    }
+  });
+}
+
+EditorActions.$inject = [ 'editorActions' ];

client/src/app/tabs/bpmn/modeler/features/improved-canvas/index.js

@@ -0,0 +1,19 @@
+/**
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information regarding copyright
+ * ownership.
+ *
+ * Camunda licenses this file to you under the MIT; you may not use this file
+ * except in compliance with the MIT License.
+ */
+
+import { EditorActions } from './EditorActions';
+
+import { BpmnImprovedCanvasModule as ImprovedCanvas } from '@camunda/improved-canvas';
+
+export const BpmnImprovedCanvasModule = {
+  __depends__: [ ImprovedCanvas ],
+  __init__: [ 'improvedCanvasEditorActionsAdapter' ],
+  improvedCanvasEditorActionsAdapter: [ 'type', EditorActions ]
+};

client/src/app/tabs/cloud-bpmn/modeler/BpmnModeler.js

@@ -27,7 +27,7 @@ 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 { BpmnImprovedCanvasModule } from '../../bpmn/modeler/features/improved-canvas';
 
 import Flags, {
   DISABLE_ADJUST_ORIGIN,

client/test/bpmn-io-modelers/bpmn/BpmnModelerSpec.js

@@ -0,0 +1,151 @@
+/**
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information regarding copyright
+ * ownership.
+ *
+ * Camunda licenses this file to you under the MIT; you may not use this file
+ * except in compliance with the MIT License.
+ */
+
+import TestContainer from 'mocha-test-container-support';
+
+import BpmnModeler from '../../../src/app/tabs/bpmn/modeler/BpmnModeler';
+
+import diagramXML from './diagram.bpmn';
+
+import Flags, { ENABLE_NEW_CONTEXT_PAD } from '../../../src/util/Flags';
+
+const DEFAULT_OPTIONS = {
+  exporter: {
+    name: 'my-tool',
+    version: '120-beta.100'
+  }
+};
+
+
+inlineCSS(require('camunda-bpmn-js/dist/assets/camunda-platform-modeler.css'));
+
+inlineCSS(`
+  .test-content-container {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .modeler-container {
+    height: 100%;
+  }
+`);
+
+
+describe('BpmnModeler', function() {
+
+  this.timeout(10000);
+
+  let modelerContainer;
+
+  beforeEach(function() {
+    modelerContainer = document.createElement('div');
+    modelerContainer.classList.add('modeler-container');
+
+    const container = TestContainer.get(this);
+
+    container.appendChild(modelerContainer);
+  });
+
+
+  it('should bootstrap', async function() {
+
+    // when
+    const modeler = await createModeler({
+      container: modelerContainer
+    });
+
+    // then
+    expect(modeler).to.exist;
+  });
+
+
+  describe('new context pad', function() {
+
+    beforeEach(function() {
+      Flags.reset();
+    });
+
+
+    it('should disable new context pad by default', async function() {
+
+      // when
+      const modeler = await createModeler();
+
+      // then
+      expect(modeler.get('improvedCanvas', false)).not.to.exist;
+    });
+
+
+    it('should enable new context pad if enabled through flag', async function() {
+
+      // when
+      Flags.init({
+        [ ENABLE_NEW_CONTEXT_PAD ]: true
+      });
+
+      const modeler = await createModeler();
+
+      // then
+      expect(modeler.get('improvedCanvas', false)).to.exist;
+    });
+
+
+    it('should not fail when append element is triggered', async function() {
+
+      // when
+      Flags.init({
+        [ ENABLE_NEW_CONTEXT_PAD ]: true
+      });
+
+      const modeler = await createModeler();
+
+      // then
+      const editorActions = modeler.get('editorActions'),
+            event = new KeyboardEvent('keydown', { target: modelerContainer });
+
+      expect(() => editorActions.trigger('appendElement', event)).not.to.throw();
+    });
+
+  });
+
+});
+
+// helpers //////////
+
+/**
+ * Create modeler and wait for modeler and overview import to finish before returning modeler.
+ *
+ * @param {Object} [options]
+ *
+ * @returns {Object}
+ */
+async function createModeler(options = {}) {
+  const modeler = new BpmnModeler({
+    ...DEFAULT_OPTIONS,
+    ...options
+  });
+
+  return modeler.importXML(diagramXML).then(() => modeler);
+}
+
+function inlineCSS(css) {
+  var head = document.head || document.getElementsByTagName('head')[ 0 ],
+      style = document.createElement('style');
+
+  style.type = 'text/css';
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+
+  head.appendChild(style);
+}

client/test/bpmn-io-modelers/bpmn/CloudBpmnModelerSpec.js

@@ -0,0 +1,151 @@
+/**
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information regarding copyright
+ * ownership.
+ *
+ * Camunda licenses this file to you under the MIT; you may not use this file
+ * except in compliance with the MIT License.
+ */
+
+import TestContainer from 'mocha-test-container-support';
+
+import BpmnModeler from '../../../src/app/tabs/cloud-bpmn/modeler/BpmnModeler';
+
+import diagramXML from './diagram.bpmn';
+
+import Flags, { ENABLE_NEW_CONTEXT_PAD } from '../../../src/util/Flags';
+
+const DEFAULT_OPTIONS = {
+  exporter: {
+    name: 'my-tool',
+    version: '120-beta.100'
+  }
+};
+
+
+inlineCSS(require('camunda-bpmn-js/dist/assets/camunda-platform-modeler.css'));
+
+inlineCSS(`
+  .test-content-container {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .modeler-container {
+    height: 100%;
+  }
+`);
+
+
+describe('BpmnModeler', function() {
+
+  this.timeout(10000);
+
+  let modelerContainer;
+
+  beforeEach(function() {
+    modelerContainer = document.createElement('div');
+    modelerContainer.classList.add('modeler-container');
+
+    const container = TestContainer.get(this);
+
+    container.appendChild(modelerContainer);
+  });
+
+
+  it('should bootstrap', async function() {
+
+    // when
+    const modeler = await createModeler({
+      container: modelerContainer
+    });
+
+    // then
+    expect(modeler).to.exist;
+  });
+
+
+  describe('new context pad', function() {
+
+    beforeEach(function() {
+      Flags.reset();
+    });
+
+
+    it('should disable new context pad by default', async function() {
+
+      // when
+      const modeler = await createModeler();
+
+      // then
+      expect(modeler.get('improvedCanvas', false)).not.to.exist;
+    });
+
+
+    it('should enable new context pad if enabled through flag', async function() {
+
+      // when
+      Flags.init({
+        [ ENABLE_NEW_CONTEXT_PAD ]: true
+      });
+
+      const modeler = await createModeler();
+
+      // then
+      expect(modeler.get('improvedCanvas', false)).to.exist;
+    });
+
+
+    it('should not fail when append element is triggered', async function() {
+
+      // when
+      Flags.init({
+        [ ENABLE_NEW_CONTEXT_PAD ]: true
+      });
+
+      const modeler = await createModeler();
+
+      // then
+      const editorActions = modeler.get('editorActions'),
+            event = new KeyboardEvent('keydown', { target: modelerContainer });
+
+      expect(() => editorActions.trigger('appendElement', event)).not.to.throw();
+    });
+
+  });
+
+});
+
+// helpers //////////
+
+/**
+ * Create modeler and wait for modeler and overview import to finish before returning modeler.
+ *
+ * @param {Object} [options]
+ *
+ * @returns {Object}
+ */
+async function createModeler(options = {}) {
+  const modeler = new BpmnModeler({
+    ...DEFAULT_OPTIONS,
+    ...options
+  });
+
+  return modeler.importXML(diagramXML).then(() => modeler);
+}
+
+function inlineCSS(css) {
+  var head = document.head || document.getElementsByTagName('head')[ 0 ],
+      style = document.createElement('style');
+
+  style.type = 'text/css';
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+
+  head.appendChild(style);
+}

client/test/bpmn-io-modelers/bpmn/diagram.bpmn

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" id="Definitions_1ay94r9" targetNamespace="http://bpmn.io/schema/bpmn" xmlns:zeebe="http://camunda.org/schema/zeebe/1.0" xmlns:modeler="http://camunda.org/schema/modeler/1.0" exporter="Camunda Modeler" exporterVersion="5.23.0" modeler:executionPlatform="Camunda Cloud" modeler:executionPlatformVersion="8.5.0">
+  <bpmn:process id="Process_1dpp0pu" isExecutable="true">
+    <bpmn:startEvent id="StartEvent_1" />
+  </bpmn:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1dpp0pu">
+      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
+        <dc:Bounds x="179" y="159" width="36" height="36" />
+      </bpmndi:BPMNShape>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>