Swimlane doesn't respond well on binding update

[Ashish]

Hi,

Below is code that show how I draw swimlane . I am getting error when I update nodes property.

<ejs-diagram

                id="diagram"

                width="100%"

                height="100%"

                :nodes="nodes"

                :constraints="constraints"

                :connectors="connectors"

                :selectedItems="selectedItems"

                :getCustomTool="getCustomTool"

                :selectionChange="selectionChange"

              />

get nodes() {

    return [this.flowSteps[0], this.sideSteps[0]];

  }

This is the line when It makes issue. currentWorkflow variable contains json from server and linked with flowStep & sideSteps.

this.currentWorkflow?.sideSteps?.push(step);

These are the error I get in console and diagram gets distorted.

[Vue warn]: Error in callback for watcher "nodes": "TypeError: swimLaneNode is undefined" found in ---> <DiagramComponent> <ElCol> <ElContainer> at packages/container/src/main.vue <ElRow> <ElContainer> at packages/container/src/main.vue... (1 recursive calls) <WorkFlowsEdit> at src/views/workflows/pages/edit.vue <AppMain> at src/layout/components/AppMain.vue <Layout> at src/layout/index.vue <App> at src/App.vue <Root>

TypeError: "swimLaneNode is undefined"

[Sivakumar Sekar]

Hi Ashish, 

We have added a sample link for your reference. We cannot reproduce the reported issue at our end. So please share with us more details of your requirements i.e. provide a simple sample with issue replication steps or a video demonstration of the reported issue. This will be helpful to use to serve you better. 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/forums1707611708484336  

Regards, 

Sivakumar   

[Ashish]

Hi Sivakumar,

I tried your sample, Its rendering fine. To implement my requirement I added a button which should update the "nodes" property but It seems like not working. In below example, It should remove a node with text "Consumer learns \n of product" but its not. See below code and screenshot after click.

<button @click="onUpdate">Update</button>

onUpdate(){

      this.nodes[0].shape.lanes[0].children = this.nodes[0].shape.lanes[0].children.filter(c=>c.id!="node1");

}

If I able to update it then hopefully, We will able to reproduce the issue.

Regards

[Sivakumar Sekar]

Hi Ashish, 

On analysis of the shared query. we suspect that you would like to remove the nodes from the swimlane. By using the diagram.getObject method, we can able to get the node or connector from the diagram. To remove a node or connector, we have to use  diagram.remove method to remove it from the diagram as shown in the below code.  

onUpdate(){ 

      diagram.remove(diagram.getObject(this.nodes[0].shape.lanes[0].children[0].id)); 

} 

Regards,  

Sivakumar    

[Ashish]

Hi Sivakumar, Thanks for you help.

Requirement is not just limited to delete. We also want to make some updates in nodes. As you suggesting to use diagram instance, It will be an extra overhead where we will be required to maintain diagram instance along with properties bind to it which I have been doing for last couple of months but now Its getting more complicated and problematic. 

Is their any correct where we just do update in nodes properties and diagram observe & apply those changes ?

Thanks !

[Ashish]

Here is git repository with minimal issue reproduce.

https://github.com/ashishgehlot/swimlaneIssue

[Aravind Ravi]

Hi Ashish,

On analyzing the provided query, we suspect that you need to modify the nodes that are present in the swimlane dynamically. By default, in the diagram, we can able to modify the node’s properties after getting that node from the diagram instance. We cannot able to directly access the node from its collection and modify it. By using the getObject public API method, we can able to get the node from the diagram. Without using the diagram instance we cannot able to change node appearance. This is the default behavior of the diagram control. So please use the getObject method to get the node from the diagram and modify its appearance/position/size. Please refer to the code snippet for how to get a node from the diagram and change its color

var node = diagram.getObject(‘node1’);

node.style.fill = “red”;

Regards

Aravind Ravi