Skip to content

Commit

Permalink
fix: register appendElement action with improved context pad
Browse files Browse the repository at this point in the history
Closes #4349
  • Loading branch information
barmac committed Jun 27, 2024
1 parent 3915c9f commit e92d5a6
Show file tree
Hide file tree
Showing 7 changed files with 359 additions and 2 deletions.
2 changes: 1 addition & 1 deletion client/src/app/tabs/bpmn/modeler/BpmnModeler.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
@@ -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' ];
19 changes: 19 additions & 0 deletions client/src/app/tabs/bpmn/modeler/features/improved-canvas/index.js
Original file line number Diff line number Diff line change
@@ -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 ]
};
2 changes: 1 addition & 1 deletion client/src/app/tabs/cloud-bpmn/modeler/BpmnModeler.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
151 changes: 151 additions & 0 deletions client/test/bpmn-io-modelers/bpmn/BpmnModelerSpec.js
Original file line number Diff line number Diff line change
@@ -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);
}
151 changes: 151 additions & 0 deletions client/test/bpmn-io-modelers/bpmn/CloudBpmnModelerSpec.js
Original file line number Diff line number Diff line change
@@ -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);
}
13 changes: 13 additions & 0 deletions client/test/bpmn-io-modelers/bpmn/diagram.bpmn
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit e92d5a6

Please sign in to comment.