Error using virtualization

[raphael chancey]

I tried enabling virtualization and the diagram keeps throwing an error.. 

here is the error..

(anonymous function)

node_modules/@syncfusion/ej2-diagrams/src/diagram/rendering/svg-renderer.js:124

121 | 'id': id,
122 | 'x': options.x.toString(),
123 | 'y': options.y.toString(),
> 124 | 'width': options.width.toString(),
| ^ 125 | 'height': options.height.toString(),
126 | 'visibility': options.visible ? 'visible' : 'hidden',
127 | 'transform': 'rotate(' + options.angle + ',' + (options.x + options.width * options.pivotX) + ',' + (options.y + options.height * options.pivotY) + ')',View compiled

(anonymous function)

node_modules/@syncfusion/ej2-diagrams/src/diagram/rendering/renderer.js:1093

1090 | options.y = options.y + (options.height - this.groupElement.actualSize.height) / 2;
1091 | }
1092 |
> 1093 | this.renderer.drawRectangle(canvas, options, this.diagramId, undefined, undefined, parentSvg);
| ^ 1094 | this.renderer.drawText(canvas, options, parentSvg, ariaLabel, this.diagramId, element.isExport && Math.min(element.exportScaleValue.x || element.exportScaleValue.y), this.groupElement);
1095 |
1096 | if (this.isSvgMode) {View compiled

(anonymous function)

node_modules/@syncfusion/ej2-diagrams/src/diagram/rendering/renderer.js:164

161 | } else if (element instanceof PathElement) {
162 | this.renderPathElement(element, canvas, transform, parentSvg, fromPalette);
163 | } else if (element instanceof TextElement) {
> 164 | this.renderTextElement(element, canvas, transform, parentSvg, fromPalette);
| ^ 165 | } else if (element instanceof DiagramNativeElement) {
166 | this.renderNativeElement(element, canvas, transform, parentSvg, fromPalette);
167 | } else if (element instanceof DiagramHtmlElement) {View compiled

(anonymous function)

node_modules/@syncfusion/ej2-diagrams/src/diagram/rendering/renderer.js:1279

1276 | child.flip = group.flip;
1277 | }
1278 |
> 1279 | this.renderElement(child, parentG || canvas, htmlLayer, transform, parentSvg, true, fromPalette, indexValue);
| ^ 1280 |
1281 | if (child instanceof TextElement && parentG && !(group.elementActions & ElementAction.ElementIsGroup)) {
1282 | flip = child.flip && child.flip !== 'None' ? child.flip : group.flip;View compiled

here is the code.. 

<DiagramComponent

id="diagram"

ref={diagram => (diagramInstance = diagram)}

constraints={DiagramConstraints.Default | DiagramConstraints.Virtualization}

width={1000} height={1000}

nodes={nodes}

connectors={connectors}

layout={{

type: 'HierarchicalTree',

// orientation: 'LeftToRight',

horizontalSpacing: 110,

verticalSpacing: 110,

}}

getNodeDefaults={(node) => {

node.height = 100;

node.width = 140;

// node.offsetX = 1000;

return node;

}}

click={(e) => { self.diagramSelected(e) }}

//Sets the default values of connector

getConnectorDefaults={(obj) => {

obj.type = "Bezier";

obj.style.strokeColor = "#6f409f";

obj.style.strokeWidth = 2;

obj.targetDecorator = {

style: {

strokeColor: "#6f409f",

fill: "#6f409f"

}

};

}}

>

[Shyam G]

Hi Raphael, 

 

We have created a layout sample and enabled virtualization and it is working fine at our end. Could you please check in the below sample? Still if you face any issues, please share us more details such as modify the below sample. 

 

Sample: https://stackblitz.com/edit/react-yphtud-kznvcn?file=index.js 

 

Regards, 

Shyam G 

[raphael chancey]

Ok... so the issue I am seeing is related to the other issue I posted.. if I take this example and add a button and then add a node programmatically.. I get the exact same: 

Error occurred:

undefined is not an object (evaluating 'e.width.toString')

So somehow adding a node programmatically with constraints enabled seems to be causing some internal issue.. can you just add a node programmatically and see what you get?

Also.. what would be nice is a simple example of adding two new nodes and then connecting them by finding the nodes by their  Id.. that is what I do.. this way I can see your best practice to find node.. I have been using diagramInstance.getNodeObject since getObject seems to take a name but nodes don't have name.. so not sure the best way to find nodes to create the source and target. 

[Shyam G]

Hi Raphael, 

 

We have logged “Exception raised while adding node at runtime by enabling virtualization” as a defect. The fix for this issue is estimated to be available on 27^th November, 2019. 

 

You can track the status of the issue from the below feedback link. 

 

https://www.syncfusion.com/feedback/10071/exception-raised-while-adding-node-at-runtime-by-enabling-virtualization 

 

Regards, 

Shyam G 

[Shyam G]

Hi Raphael,  

  

Reported Issue : Exception raised while adding node at runtime by enabling virtualization. 

  

We are glad to announce that our patch release (v17.3.29) is rolled out successfully and In that release, we have added the fix for reported issue.      

       

Please upgrade to the latest version packages to resolve this issue.       

https://www.npmjs.com/package/@syncfusion/ej2-diagrams    

 

Regards,  

Shyam G