Changing a default property inside the doBinding of the DataSourceModel doesn't work

Question

Hi,My function for setting default shapes of nodes looks like this :     nodeDefaults(obj: NodeModel): NodeModel {        obj.width = 50;        obj.height = 50;        obj.shape = { type: 'HTML' };        obj.ports = [            {                id: 'portRight',                offset: {                    x: 1.05,                    y: 0.5,                },                visibility: PortVisibility.Hidden,            },            {                id: 'portLeft',                offset: {                    x: -0.05,                    y: 0.5,                },                visibility: PortVisibility.Hidden,            },        ];        obj.constraints = NodeConstraints.Default & ~NodeConstraints.Drag;        return obj;    }And then I bind my datasource this way :        this.dataSource = {            id: 'id',            parentId: 'parentsIds',            dataSource: new DataManager(formattedGraphNodes),            // binds the external data with node            doBinding: (nodeModel: NodeModel, data: GraphNode, diagram: Diagram) => {                if (data.id === 'test') {                    nodeModel.height = 150;                    nodeModel.width = 150;                }                nodeModel.annotations = [                    {                        content: data.data?.name,                        offset: {                            x: 0.5,                            y: 1.15,                        },                        style: {                            textWrapping: 'NoWrap',                        },                        constraints: AnnotationConstraints.ReadOnly,                    },                ];                nodeModel.style = { fill: data.color + '', strokeWidth: 1 };            },        };The node with id test, which I verified is present in the data that I use, has the same size as all the other nodes.All other properties that are not set by defaults are workings, like annotations or the style.What do I have to do for it to be the size I want ? Is the only choice to not set a default size and do an ugly else inside de doBinding ?Regards,Théo Armengou

Aravind Ravi · Accepted Answer

Hi Theo,We have created a sample to change the specific node height
and width. Instead of changing the node height and width in doBinding method,
change its height and width in getNodeDefaults method. At the time of every
node render node defaults call back method gets trigger. In node defaults
method change whether the node’s data ID is test or not. If it is test means then
change its height or width. Please refer to the below code snippet and sample

public nodeDefaults(obj: NodeModel): NodeModel {
      obj.width = 75;
      obj.height = 50;
  // Change the node width as 100 if
  data is Diagram
      if ((obj.data as
  any).Name === 'Diagram') {
        obj.width =
  100;
        obj.height =
  100;
      }
      obj.style = {
        fill:
  '#659be5',
        strokeColor:
  'none',
        color:
  'white',
        strokeWidth:
  2,
      };
   
      return obj;
    }

Sample: https://stackblitz.com/edit/angular-tfgij5?file=app.component.html,app.component.tsRegardsAravind Ravi

Unknown · Answer

Hi,Thanks for the solution, still I find it weird that you have to do custom modifications for specific node in a function called "getNodeDefaults"...What's the use of nodeBinding then ? Because if we can access the data of each node in node default, annotations can be configured inside nodeDefaults Regards,Théo Armengou

Aravind Ravi · Answer

Hi Theo,We have created a sample to bind the height and width of the
nodemodel from external data. Diagram can be populated based on the
user-defined JSON data (Local Data) by mapping the relevant data source fields.
By using the DataManager we can able to bind the diagram from an external
datasource. In the datasource’s doBinding bind the height and width of external
data to the node’s height and width. Please refer to the below code snippet and
sample

public Data: any = [
      {
        Name:
  'Diagram',
        fillColor:
  '#916DAF',
        height:
  150,
        width:
  150,
      },
      {
        Name:
  'Layout',
        Category:
  'Diagram',
        height:
  100,
        width:
  100,
      },
      {
        Name:
  'Tree Layout',
        Category:
  'Layout',
        height:
  75,
        width:
  75,
      },
      {
        Name:
  'Organizational Chart',
        Category:
  'Layout',
        height:
  75,
        width:
  75,
      },
  ];
   
  public
  data: Object = {
      //sets
  the fields to bind
      id:
  'Name',
      parentId:
  'Category',
      dataSource:
  new DataManager(this.Data),
      //binds
  the data with the nodes
      doBinding:
  (nodeModel: NodeModel, data: object, diagram: Diagram) => {
  // Bind
  the height and width to node
        nodeModel.height
  = (data as any).height;
        nodeModel.width
  = (data as any).width;
      },
    };

Sample: https://stackblitz.com/edit/angular-frx78tRegardsAravind Ravi

Unknown · Answer

Hi,I understood you can do that but what I was talking about is the fact that nodeDefaults override custom bindings from doBinding when it should be the other way around.But anyway, I got my answer thanks a lot !Regards,Théo Armengou

Aravind Ravi · Answer

Hi Theo,Welcome. Please get back to us if you need any further
assistance.RegardsAravind Ravi