drawingObject becomes undefined

Hi there - I think I have discovered another bug in the diagrams component.

In the bpmn sample project, after I double click and add text to a connector, I can no longer drag another connector from a node.

Please see my attached zip that contains a video and project.

From what I can tell,

this.selectedItem.diagram.drawingObject

becomes undefined after I type the label. As a result this fails:

public userHandleClick(args:UserHandleEventsArgs){
        switch(args.element.name)
        {
            case 'Delete':
                this.selectedItem.diagram.remove();
                break;
            case 'Clone':
                this.selectedItem.diagram.paste( this.selectedItem.diagram.selectedItems.selectedObjects);
               break;
            case 'Draw':
                this.selectedItem.diagram.drawingObject.shape = { type:'Bpmn',sequence:'Normal'};
                (this.selectedItem.diagram.drawingObject as Connector).type =  (this.selectedItem.diagram.drawingObject as Connector).type? (this.selectedItem.diagram.drawingObject as Connector).type:'Orthogonal';
                (this.selectedItem.diagram.drawingObject as Connector).sourceID = this.drawingNode.id;
                this.selectedItem.diagram.dataBind();
                break;
        }
    };


I can come up with a workaround but perhaps I'm missing something, or maybe it really is a bug.


Attachment: bpmnAug15a_846f4b3f.zip

1 Reply

BM Balasubramanian Manikandan Syncfusion Team August 16, 2023 04:37 PM UTC

We have addressed the problem you encountered while attempting to draw the connector in the 'userhandle' after adding an annotation for the previous connector. We have made adjustments to the sample to meet your needs. In this updated sample, during the 'selectionChange' event, we assigned the type 'orthogonal' to the drawing object. This ensures that each time you draw a connector, the drawing object will not be set to 'undefined'. Please refer to the code example and sample provided below:


Code Snippet

public selectionChange(args: ISelectionChangeEventArgs): void{

  if(args.state === 'Changed'){

….

..

.

      if(args.newValue.length>0 && (args.newValue[0] as Connector).type === undefined){

          this.diagram.selectedItems = { constraints: SelectorConstraints.All|SelectorConstraints.UserHandle, userHandles: this.handles as UserHandleModel[] };

          if(this.diagram.selectedItems.nodes.length>0){

              this.drawingNode = this.diagram.selectedItems.nodes[this.diagram.selectedItems.nodes.length-1];

              this.drawingObject = { type : 'Orthogonal'};

          }

      }

      else{

        this.diagram.selectedItems = { constraints:SelectorConstraints.All&~SelectorConstraints.UserHandle };

      }

  }


Sample

https://stackblitz.com/edit/angular-9uc3wb-ujdbgh?file=app.component.html


Loader.
Up arrow icon