Hej there,
I’m currently working with a somewhat customized bpmn-js-modeller.
I encounter the following behaviour after enabling two more custom modules:
CustomModeling.js
import Modeling from 'bpmn-js/lib/features/modeling/Modeling';
import inherits from 'inherits';
export default function CustomModeling(eventBus, elementFactory, commandStack, bpmnRules) {
Modeling.call(this, eventBus, elementFactory, commandStack, bpmnRules);
}
inherits(CustomModeling, Modeling);
CustomModeling.$inject = [
'eventBus',
'elementFactory',
'commandStack',
'bpmnRules'
];
CustomModeling.prototype.getHandlers = function() {
var handlers = Modeling.prototype.getHandlers.call(this);
return handlers;
};
During testing, I removed all other functionality within this module to provide an minimal amount of customisation.
CustomElementFactory.js
import {
assign
} from 'min-dash';
import inherits from 'inherits';
import BpmnElementFactory from 'bpmn-js/lib/features/modeling/ElementFactory';
import {
DEFAULT_LABEL_SIZE
} from 'bpmn-js/lib/util/LabelUtil';
/**
* A custom factory that knows how to create BPMN _and_ custom elements.
*/
export default function CustomElementFactory(bpmnFactory, moddle) {
BpmnElementFactory.call(this, bpmnFactory, moddle);
var self = this;
/**
* Create a diagram-js element with the given type (any of shape, connection, label).
*
* @param {String} elementType
* @param {Object} attrs
*
* @return {djs.model.Base}
*/
this.create = function(elementType, attrs) {
if (elementType === 'label') {
return self.baseCreate(elementType, assign({ type: 'label'}, DEFAULT_LABEL_SIZE, attrs));
}
/*
I removed some of the custom code without it affecting the behaviour
*/
return self.createBpmnElement(elementType, attrs);
};
}
inherits(CustomElementFactory, BpmnElementFactory);
CustomElementFactory.$inject = [
'bpmnFactory',
'moddle'
];
CustomElementFactory.prototype._getCustomElementSize = function(type) {
console.error('_getCustomElementSize');
var shapes = {
__default: { width: 100, height: 80 },
'custom:CallActivity': { width: 100, height: 80 },
'custom:CallActivityExt': { width: 40, height: 40 },
'custom:SubProcess': { width: 350, height: 200 }
};
return shapes[type] || shapes.__default;
};
Experienced Behaviour
Starting with an Event (Image 1)
When adding a label to any Event (Start, End, Intermediate, Boundary … ) the parent Event (e.g. StartEvent )get’s resized (taking effect when saving/reloading). (Images 2 - Before, 3 - After)
The new StartEvent size is equal to its Label size (position changes as well).
If I change the label size, the StartEventsize is than later “updated” as well. (Images 4 & 5)
Show Images
(1) Initial“Imagine an Image with a StartProcess and a Task” (can’t upload more than 2 images)
(2) add a Label (before saving/reloading)
“Imagine that Image with a Label added to the StartProcess” (can’t upload more than 2 images)
(3) Label after saving/reloading
(4) Change Label size
“Image the label beeing resized” (can’t upload more than 2 images)
(5) Resized (after save/reload)
Troubleshootings
As mentioned above I tried to get rid of any custom code, while still beeing able to reproduce the issue.
If - hower - I change my modelerFeatures/index.js as described below, the issue doesn’t exist anymore.
modelerFeatures/index.js
import CustomElementFactory from './CustomElementFactory';
import CustomRenderer from '../navigatedViewerFeatures/CustomRenderer';
import CustomPalette from './CustomPalette';
import CustomRules from '../navigatedViewerFeatures/CustomRules';
import GradientColorContextPadProvider from './GradientColorContextPadProvider';
import SolidColorContextPadProvider from './SolidColorContextPadProvider';
import GradientColorPopupProvider from './GradientColorPopupProvider';
import SolidColorPopupProvider from './SolidColorPopupProvider';
import CustomLabelBehavior from './CustomLabelBehavior';
import CustomLabelEditingProvider from './CustomLabelEditingProvider';
import CustomUpdateLabelHandler from './CustomUpdateLabelHandler';
import CustomModeling from './CustomModeling';
import CustomBpmnImporter from '../navigatedViewerFeatures/CustomBpmnImporter';
import ConnectionLineTypeContextPadProvider from './ConnectionLineTypeContextPadProvider';
import ConnectionLineTypePopupProvider from './ConnectionLineTypePopupProvider';
import LabelStyleContextPadProvider from './LabelStyleContextPadProvider';
import LabelSizeContextPadProvider from './LabelSizeContextPadProvider';
import LabelStylePopupProvider from './LabelStylePopupProvider';
import LabelSizePopupProvider from './LabelSizePopupProvider';
import CustomUpdater from './CustomUpdater';
export default {
__init__: [
'modeling', // Commenting this out: Labels working fine
'elementFactory', // Commenting this out: Labels working fine
'customRenderer',
'paletteProvider',
'customRules',
'gradientColorContextPadProvider',
'solidColorContextPadProvider',
'connectionLineTypeContextPadProvider',
'labelStyleContextPadProvider',
'labelSizeContextPadProvider',
'gradientColorPopupProvider',
'solidColorPopupProvider',
'connectionLineTypePopupProvider',
'labelStylePopupProvider',
'labelSizePopupProvider',
'labelBehavior',
'labelEditingProvider',
// 'updateLabelHandler',
'bpmnImporter',
'customUpdater',
],
modeling: [ 'type', CustomModeling ], // Commenting this out: Labels working fine
elementFactory: [ 'type', CustomElementFactory ], // Commenting this out: Labels working fine
customRenderer: [ 'type', CustomRenderer ],
paletteProvider: [ 'type', CustomPalette ],
customRules: [ 'type', CustomRules ],
gradientColorContextPadProvider: [ 'type', GradientColorContextPadProvider ],
solidColorContextPadProvider: [ 'type', SolidColorContextPadProvider ],
connectionLineTypeContextPadProvider: [ 'type', ConnectionLineTypeContextPadProvider],
labelStyleContextPadProvider: [ 'type', LabelStyleContextPadProvider],
labelSizeContextPadProvider: [ 'type', LabelSizeContextPadProvider],
gradientColorPopupProvider: [ 'type', GradientColorPopupProvider ],
solidColorPopupProvider: [ 'type', SolidColorPopupProvider ],
connectionLineTypePopupProvider: [ 'type', ConnectionLineTypePopupProvider],
labelStylePopupProvider: [ 'type', LabelStylePopupProvider],
labelSizePopupProvider: [ 'type', LabelSizePopupProvider],
labelBehavior: [ 'type', CustomLabelBehavior ],
// updateLabelHandler: [ 'type', CustomUpdateLabelHandler ],
bpmnImporter: [ 'type', CustomBpmnImporter],
// labelEditingProvider: [ 'type', CustomLabelEditingProvider ],
customUpdater: [ 'type', CustomUpdater ],
};
I can’t see an easy way to provide you with more detailed information … so my hope is you could point me to places where I might can investigate further.
I noticed, that the dc:Bounds of the StartEvent changes / gets an update… but I can’t get to a point where I could do more with the information …
At this point: any though or idea is very much appreciated!
Thanks in advance!
