Issue in editing/dragging loaded diagram

Developers Modeler
1

Hi.i am facing this big issue of not able to edit the loaded bpmn diagram on the canvas.The current scenario is that my diagram contains both custom components/svgs + xml(bpmn file) on the canvas.When saving the diagram i am saving both the json file and bpmn file separately.When loading the diagram i am importing both the files i am using the importXML function and then adding the addCustomElements from the json file.
What is happening that most of the times after the diagram is loaded,then dragging/clicking the element i got error on the console which meant that the element is undefined.This happens most of the time.BUT some times i can EDIT the loaded diagram,add changes and every thing works fine.
Basically what i seeking a method in which after loading,i can get the rootElement/main Element by which i can verify that the whole diagram is loaded properly.I am attaching the screen shot of the bug.
Any help in this regard is highly appreciated

thankserror

2

Hi @abdur91
For your problem first add custom element to bpmn engine and next load file, also please share more code/source to get better answer.

3

sure.here is the code

ngOnInit(): void 
  {
    $(document).ready(function()
    {
      $(".dropLink").attr("data-toggle", "dropdown");
    });
    console.log(">>>in ng On init function <<<")
    this.modeler = new CustomModeler({
      container: '#canvas',
       keyboard: {
        bindTo: document
      },
      width: '100%',
      height: '600px',
      additionalModules: 
      [
        CustomPalette,
        {[InjectionNames.bpmnPropertiesProvider]: ['type', OriginalPropertiesProvider.propertiesProvider[1]]},
        {[InjectionNames.propertiesProvider]: ['type', CustomPropsProvider]},
        { moveCanvas: [ 'value', '' ]},
        { zoomScroll: [ 'value', '' ]}
      ],
      propertiesPanel: {
        parent: '#properties'
      },
      moddleExtension: {
        custom: customModdle
      }
    });
     
    this.loadJsonFile();
    this.loadFile();
  }
loadJsonFile():void{
     this.importJson.importJson(this.jsonFilePath).subscribe(
        res => 
        {
          console.log(">>>success in importing json file <<<");
          this.customElements = res
        },
        error => 
        {
        });
  }
  loadFile(): void 
  {

    const url = 'assets/bpmn/initial.bpmn';
    this.http.get(url, 
    {
      headers: {observe: 'response'}, responseType: 'text'
    }).subscribe(res =>{
         this.modeler.importXML(res,success=>
         {
            if(this.modeler)
            {
              this.modeler.addCustomElements(this.customElements)
            }
          });  
       },
      error => 
      {
      });
  }
4

I am doing the same.First i am loading the custom-shapes(json file) and then i am adding it in modeler after importing it

5

First check importJson worked successfully, I think customelement maybe null because observable function not filled this variable.

6

actually it is working fine as it is successfully importing the json file