AutoPlace on Custom Element didnt work

Developers
1

Hi together,

I’m currently having trouble adding a custom element to my application.

I’ve looked at the examples but can’t really get any further with my problem.

The aim is to create a new element with an image as a shape that I can use like all other elements.

For this I wrote a renderer, a palette and a context pad, as well as a moddle extension. But if I want to create the element now, the following happens:

unhandled error in event listener TypeError: Cannot read properties of undefined (reading ‘x’)
at eval (AutoPlaceBehavior.js:28:19)
at Array.forEach ()

So i debugged the code to watch out, what is wrong. The AutoPlaceBehavior Function is calling to another Funktion named getNewShapePosition and this returns an undefined.

My custom type looks like this:

“types”: [
{
“name”: “NewElement”,
“superClass”: [ “Element” ],
“extends”: [
“bpmn:ExtensionElements”
],
“properties”: [
{
“name”: “DescriptionText”,
“isAttr”: true,
“type”: “String”
},
{
“name”: “lastChecked”,
“isAttr”: true,
“type”: “String”
},
{
“name”: “nextCheck”,
“isAttr”: true,
“type”: “String”
},
{
“name”: “comments”,
“isMany”: true,
“type”: “Comment”
}
]
},
]

My Renderer like this:
export default class NewRenderer extends BaseRenderer {

constructor(eventBus) {
    super(eventBus, 1500);
}

canRender(element) {
    return is(element, "em:Erlenmeyer");
}

drawShape(parent, shape) {
    var icon = svgCreate("image", {
        x: 50,
        y: 50,
        width: shape.width,
        height: shape.height,
        href: '/url/to/image',
    });

    svgAppend(parent, icon);

    return icon;
}

}

NewRenderer.$inject = [“eventBus”];

So can u guys tell me what i did wrong? I can’t figure out what I’m doing wrong.

2

It appears you are also trying to add a meta-model extension. Since there are a lot of customisations being added, could you please share a CodeSandbox so we can better understand what the issue might be?