Error: Invalid value for <svg> attribute width="-Infinity"

[Chi Shiek]

I'm getting this error repeated a few times (jsPlumb v 1.6.4 and angular), when I have a tab with the diagram hidden behind another tab.

If the tab with the diagram is in the foreground there is no problem. Yes there is a background task that periodically updates the data... 

Error: Invalid value for <svg> attribute height="-Infinity" jquery.jsPlumb-1.6.4.js:9382

_attr jquery.jsPlumb-1.6.4.js:9382

paint jquery.jsPlumb-1.6.4.js:9578

jsPlumbUtil.extend.paint jquery.jsPlumb-1.6.4.js:6065

(anonymous function) jquery.jsPlumb-1.6.4.js:877

redraw jquery.jsPlumb-1.6.4.js:6704

_draw jquery.jsPlumb-1.6.4.js:2428

repaintEverything jquery.jsPlumb-1.6.4.js:4369

setSuspendDrawing jquery.jsPlumb-1.6.4.js:4520

_setActive services.js:776

Error: Invalid value for <svg> attribute width="-Infinity" jquery.jsPlumb-1.6.4.js:9382

Error: Invalid value for <svg> attribute height="-Infinity" jquery.jsPlumb-1.6.4.js:9382

...

I'm thinking that the simplest solution seems to be to 'suspend' all jsPlumb repaint activities when the tab is hidden - is this a reasonable thing to do? 

Or is there some better way of handling this more 'automatically' ?

[Simon Porritt]

Yes this is happening because jsPlumb looks for the offsetLeft/offsetTop properties of elements, and they are not set if the element is not visible. I would suggest using the `setSuspendDrawing` method to control this.

[Prasanna Grande]

Hi,

I am using latest vanilla jsplumb dom.jsPlumb-1.7.5.js,with angularjs, while connecting the elements using makeSource and makeTargets always gets error "Invalid value for <svg> attribute width="-Infinity".

i have taken code from github https://github.com/mrquincle/jsplumb-example and replaced with latest jsplumb and did setContainer('container') in angular/example.js

Kindly let me know how to resolve it

[Philippe Lhoste]

On Thursday, 28 May 2015 12:22:49 UTC+2, Prasanna Grande wrote:

Hi,

I am using latest vanilla jsplumb dom.jsPlumb-1.7.5.js,with angularjs, while connecting the elements using makeSource and makeTargets always gets error "Invalid value for <svg> attribute width="-Infinity".

i have taken code from github https://github.com/mrquincle/jsplumb-example and replaced with latest jsplumb and did setContainer('container') in angular/example.js

Kindly let me know how to resolve it

In our AngularJS application, I set $scope.nodes to a list of nodes (HTML divs) rendered via an ng-repeat. But if I create the jsPlumb connections in the same init function, it fails because Angular hadn't the time to render the divs.
So I just create a timeout promise to wait some 250 ms (rather arbitrary, adjust as will, perhaps even 0 is OK) before calling my jsPllumb initialization function.

            $scope.diagramNodes = _.map(options.graphData.nodes, function(node)
            {
              // Create a node
            }

            var promise = $timeout(function()
            {
                $timeout.cancel(promise);
                $scope.diagramInstance = JsPlumbService.renderDiagram(
                    $scope.containerId, $scope.diagramId,
                    options.graphData, options.styles, options.diagramOptions);
                $scope.isLoaded = true;
            }, 250);
            // End of the "displayDiagram" function

[Peter Hodges]

$timeout(fn, 0) will be fine as it forces the function to be executed during the next digest cycle.

[Prasanna Grande]

Hi,

i didn't get, where i need to add this block of code

  var promise = $timeout(function()
            {
                $timeout.cancel(promise);
                $scope.diagramInstance = JsPlumbService.renderDiagram(
                    $scope.containerId, $scope.diagramId,
                    options.graphData, options.styles, options.diagramOptions);
                $scope.isLoaded = true;
            }, 250);

Thanks

G.LakshmiPrasanna

[Prasanna Grande]

Hi Peter,

I am creating the nodes and connectors dynamically, while drawing connectors, it wont draw properly, again if i do drag then the connectors connects properly. Please run the sample to see the problem and tell me how to resolve it

[Abhishek Soni]

I observed the same and the reason for this is <svg> because at the time your application load both of the source and target coordinate for svg are overlapping, thereby svg can not see the other end point and which leads to width and height set infinity. solution for this is either you can remove stop source and target point overlapping also i used `anchors:["Right", "Left"],` which most of the time helped me overcome the error 

On Wednesday, September 10, 2014 at 9:42:35 AM UTC+5:30, Chi Shiek wrote: