Angular + JointJS

[Maurice Laboureur]

Hello,

I try to use JointJS on a page with Angular. The Hello-World-Example looks like http://screencast.com/t/yQY6v8w54R (I added a green stroke around the rectangle and made the font red; see http://screencast.com/t/XKOELBO607qR for exact source code). The size of the rectangle is not set properly!

Does anyone know, where the problem lies? -Without angular, I mean on a normal page, everything works fine.

Regards

[Maurice Laboureur]

After further inspection, I found the following: http://screencast.com/t/F0UAB2gd

Confirms my suspicions about problems in setting the rectangle size. Any ideas?

Regards

[Maurice Laboureur]

Ah, what might be of interest... I'm using:

JointJS 0.7 (most current one)

Angular 1.1.5

Am Montag, 18. November 2013 23:10:59 UTC+1 schrieb Maurice Laboureur:

[dave]

Hi Maurice,

Interesting. We use Angular v1.1.5 with JointJS 0.7 without problems. Can you put the code to jsFiddle.net? I'll look at it.

[Maurice Laboureur]

Thank you dave for your offer. Last night, I updated to Angular 1.2.1 (most current one) and still the same problem. The whole project is a group project with Play Framework 2.1.0. I try to extract a running piece of code to reproduce the problem.

[Maurice Laboureur]

So, I made further "progress".

I put my code into a (Page-) controller that is loaded dynamically, and my container-div into the corresponding (Page-)Content.html. If I move the container to the static index.html, everything works (and looks) fine.

@Dave: I'm sorry, I could not reproduce the problem on jsFiddle. The "Getting Started" example runs there like it should. Maybe because I'm not skilled enough to create a quick dynamic page with angular there. Do you put the SVGs on a dynamic part of your page? If so, where do you initialize the graph and the paper, and where is the graph.addCell()?

Regards

Am Dienstag, 19. November 2013 09:45:43 UTC+1 schrieb dave:

[Maurice Laboureur]

Here a picture to show what I mean. I created two paper to visualize the same graph: http://screencast.com/t/ptq5178UV

Am Dienstag, 19. November 2013 09:45:43 UTC+1 schrieb dave:

[Maurice Laboureur]

I could narrow the problem a little bit further: It's because of the Tabs I'm using on the dynamic page. I first set a timer to delay the execution of the code that creates my graph. If I switch fast enough (within the timer delay) to the tab where the graph is shown, everything looks fine. Switching the tabs, so that the tab with the graph is shown initially, confirmed my findings. But "just switching tabs" is still no solution!

[dave]

Hi Maurice, could it be that you create the paper on a container that is not in the live DOM yet? Note that browsers don't give elements a dimension till their in the RenderTree (similar to DOM tree but contains only elements that are to be rendered on the screen, also associates CSS styles and other information with elements).

[dave]

This would explain why you get Infinity in the transform attribute for scale. This is because the resize() method of ElementView (in joint.dia.element.js file) contains this:

        var scalable = V(this.$('.scalable')[0]);

        if (!scalable) {

            // If there is no scalable elements, than there is nothing to resize.

            return;

        }

        var scalableBbox = scalable.bbox(true);

        

        scalable.attr('transform', 'scale(' + (size.width / scalableBbox.width) + ',' + (size.height / scalableBbox.height) + ')');

What happens I think is that the scalalbe.bbox(true) returns { x: 0, y: 0, width: 0, height: 0 }. This causes a division by 0 which leads to the Infinity that you observed.

[Maurice Laboureur]

Yeah, we're on the right trail ;-)

I try to develop a solution and post it here. Maybe I should change the topic to "JointJS + Angular not shown tab"...

Thanks again for your tips, dave.

[Aidan Reel]

Hi

 

From your code snippets the creation sequence is not clear to me.

 

I am using typescript, angular and jointjs and this is my structure/sequence, the comparison might help.

 

I have an angular controller for the div that will contain the graph (call it mainView).

 

<div id="mainView" ng-controller="PatchBay.NodeGraphController">

 

 

I have an angular service (JointJsEditor) that contains the editor behaviour and this service is injected into the NodeGraphController.

 

So when NodeGraphController gets created JointJsEditor gets created before it.

 

In the constructor for JointJsEditor I call a createGraphView method,

 

this.graphView = new joint.dia.Paper({

                el: $('#mainView'),

                width: $('#mainView').width(),

                height: $('#mainView').height(),

                gridSize: 1,

                model: this.graphModel

            });

 

which creates an instance of Paper having a reference to $(‘#mainview’) passed to el.

 

Regards

 

Aidan

--
 
---
You received this message because you are subscribed to the Google Groups "JointJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jointjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Maurice Laboureur]

Thank you dave and Aidan for your help and hints,

I finally figured out a solution that works fine for me:

Short recap... rectangles were of size zero, because the graph was drawn while the holding tab is not visible. Solution is straight forward: Draw graph, when not before tab is opened and thus svg becomes visible.

I first defined a method that is executed when the tab is selected: http://screencast.com/t/5zNUE81huL

This method is then defined in the controller: http://screencast.com/t/x5BMcvByM

Within this method, the data is fetched, the graph and paper are initialized, and everything is drawn to the graph .

Maybe this helps the next ones with a similar problem.

Regards

Maurice

Am Montag, 18. November 2013 23:10:59 UTC+1 schrieb Maurice Laboureur: