Append custom shapes

Developers Modeler
1

Hi everyone!

I’m trying to create my custom shape from context panel other custom shape and i have an error:

unhandled error in event listener TypeError: Cannot read properties of undefined (reading 'x')
    at GridSnappingAutoPlaceBehavior.js:26:1
    at Array.forEach (<anonymous>)
    at GridSnappingAutoPlaceBehavior.js:23:1
    at invokeFunction (EventBus.js:540:1)
    at ./node_modules/diagram-js/lib/core/EventBus.js.EventBus._invokeListener (EventBus.js:390:1)
    at ./node_modules/diagram-js/lib/core/EventBus.js.EventBus._invokeListeners (EventBus.js:366:1)
    at ./node_modules/diagram-js/lib/core/EventBus.js.EventBus.fire (EventBus.js:314:1)
    at AutoPlace.append (AutoPlace.js:47:1)
    at Object.appendAutomationCondition [as click] (CustomContextPadProvider.js:123:1)
    at ./node_modules/diagram-js/lib/features/context-pad/ContextPad.js.ContextPad.triggerEntry (ContextPad.js:222:1)

also i tried to send x and y when create custom shape, but have the same result.
my custom panel pad code: https://codesandbox.io/s/compassionate-payne-0dvudh?file=/modules/CustomContextPadProvider.js

How can i fix it?

2

Hi @komi,

the Codesandbox you linked does not work for me. Can you please check that the CodeSandbox works and shows the correct Project?

It is possible that Codesandbox already fired the DOMContentLoaded event before adding your Script. As you already import the JS file at the bottom of your html, you should be safe to just remove the event listener.

Cheers

3

Just to confirm, readyState is already set to complete before adding the event listener:

console.log(document.readyState); // complete

document.addEventListener("DOMContentLoaded", async () => {
   // ...