Hi I am currently trying to get familiar with the new v06 and reading the getting started documentation.
I have two mointor attached to the computer but use only one of them for viewing the documentation.
However the browser does assume I have the space of the two monitors and cuts of a large portion of the text. Since it is not using scroll bars the docu is very hard to read.

Frank

I try to use joint with jquery , backbonejs and underscordjs separately
underscorejs 1.5.2
backbonejs 1.1.0
jquery 1.8.3

after looking on underscorejs library, i can see tat merge funtion is not present.

for now i use joint full version

SORRY THIS IS NOT A ISSUE,

i need other library for this method
http://lodash.com/

Joint.findPos() does not provide the correct mouse position relative to the canvas in firefox.
I wrote a simple work-around/fix:

Joint.findPos = function(el){
var p = point(0, 0);
if (!el.offsetParent){
// firefox (supposing el is Raphael canvas element)
el = el.parentNode;
}
while (el) {
p.offset(el.offsetLeft, el.offsetTop);
el = el.offsetParent;
}

return p;

};

Existing functions to change the z-index of an object are only "toFront" and "toBack". An additional two functions are needed to move objects one layer up and down at a time. For consistency the "toFront" and "toBack" should be renamed to "moveTop" and "moveBottom".

moveUp: function() {

    if (this.collection) {

        this.set('z', this.get('z') + 1);

        console.log(this.get('z'));
    }
},

moveDown: function() {

    if (this.collection) {

        this.set('z', this.get('z') - 1);

        console.log(this.get('z'));
    }
},

the Element.toBack() method (joint.dia.js) contains the lines:

for (var i = this.inner.length - 1; i <= 0; --i)
this.inner[i].toBack();

but should be:

for (var i = this.inner.length - 1; i >= 0; --i)
this.inner[i].toBack();

JointJS breaks scaling functionality of Raphael.FreeTransform

DEMO

To reproduce:

1. try to rescale the object
2. remove joint.min.js from the external resource
3. try to rescale the object again

this allows to create relation labels on both sides of a connection:

.---------.  1                   n    .--------.
|         | --------------------------|        |
`---------/                           `-------/

Title says all.

In a custom element view, I have a <text x="10" y="100">in the markup. however, after displaying the element, I see in the DOM thaty="0.8"for **all**` node. Because of this line of code

This is very very annoying.

Hello,

i found a mysterious behaviour of Joint.
If the x positions of vertices equals the arrow's x position, the vertices loose their effect.

Just try:

Joint.paper("test", 800, 400);

Joint({x: 230, y: 30}, {x: 60, y: 90}, {
    startArrow: {
        type: "none"
    },
    endArrow: {
        type: "basic"
    }
}).setVertices(["230 50", "60 50"]);

This will cause a nearly diagonal arrow. If you change the vertices' x position by 1 pixel...

Joint.paper("test", 800, 400);

Joint({x: 230, y: 30}, {x: 60, y: 90}, {
    startArrow: {
        type: "none"
    },
    endArrow: {
        type: "basic"
    }
}).setVertices(["231 50", "61 50"]);

...the arrow will be displayed with those vertices.

Regards,
Ruben

Here is a use case showing how embedded links fail when parent is translated: http://jsfiddle.net/tm93R/.

This is how it should work:

• If a link is not embedded into a parent and the parent moves (gets translated), the link vertices should stay at the same position as they were.
• If a link is embedded into a parent and the parent moves, the link vertices follow the translation.

in demo http://www.jointjs.com/demos/pn.js ,

how to put label on pn?

e2.joint(p2, pn.arrow).register(all);

And, how to change the position of the label ?

var e1 = pn.Event.create({rect: {x: 45, y: 250, width: 50, height: 7}, label: "e1"});

thank you

Probably needs some improvement of how properties of diagrams elements are stored.

Taking the example from this link and replacing joint and DirectedGraph with the 0.7.0 version (0.6.0 works fine):
http://www.daviddurman.com/automatic-graph-layout-with-jointjs-and-dagre.html

Firefox can layout the graph below but Chrome (31.0.1650.63) freezes, seemingly somewhere in the event handling code...

{"004408": ["004412", "004411", "004413"], "004409": ["004415", "004414"], "004406": ["004410", "004408"], "004407": ["004408", "004409"], "004405": ["004406", "004407"], "003302": [], "003311": [], "003291": [], "003307": [], "003308": [], "003309": [], "003298": [], "003299": [], "003296": [], "003297": [], "003306": [], "003295": [], "003292": ["003298", "003299", "003297", "003296", "003295"], "003293": [], "003290": [], "003303": [], "003285": [], "004415": ["003285"], "004414": ["003290", "003292", "003294", "003286", "003287", "003293", "003289", "003288", "003291"], "004416": [], "004411": ["003313", "003314", "003316", "003312", "003315"], "004410": ["004416"], "004413": ["003303", "003306", "003304", "003305", "003307", "003301", "003302", "003308", "003300"], "004412": ["003309", "003310", "003311"], "003304": [], "003305": [], "003294": [], "003310": [], "003300": [], "003301": [], "003289": [], "003288": [], "003313": [], "003312": [], "003287": [], "003286": [], "003316": [], "003315": [], "003314": []}

Hi,

The issue can be reproduced on you example http://www.jointjs.com/demos/run.html?unit=uml.statechart

I am using IE9 (tested in IE8 compatibility mode as well). Open the developer tools (F12) and write the following in the console:

s1.wrapper.dblclick(function () { alert('dblclick'); });

Test the dblclick on the "state1" element. It should not work in IE.

s1.wrapper.dblclick(function () { alert('dblclick'); });

Now write the following:

s1.draggable(false);

Test the dblclick on the "state1" element. It will work.

I don't think this is a Raphael issue because doing the same on the Raphael example (http://raphaeljs.com/playground.html) works in IE:

paper.circle(320, 240, 60).animate({fill: "#223fa3", stroke: "#000", "stroke-width": 80, "stroke-opacity": 0.5}, 2000).dblclick(function () { alert('dblclick'); });

P.S. Fantastic library :D

Hi
I created a graph two elements. Both are embeded into a group. The two elements are connected via an joint with one vertice. If I now move the group .The elements move and so do the endpoints of the connection. However the vertices do not move.

Now I tried to also add the connection to the group and hoped that then the vertices will move too.. However now the group and the elements move to strange places and will no longer follow the mouse at all.

Hi,

all other browsers show following diagram correctly. IE8 only displays about 5-6 actions...

var procedure = uml.State.create({
rect: {x: 0, y: 0, width: 360, height: 120},
label: 'PUBLIC: majorProgrammingSession',
attrs: {
fill: "90-#000-lightgray:1-#fff"
},
actions: {
inner: [
"inParam", "FL_Progress:= otx:Float", "inParam", "I_StartTime:= otx:Integer", "inParam", "CC_ECUForFlashing:= diag:ComChannel", "inParam", "L_FS_FlashSessions:= otx:List = null", "inParam", "L_B_ActiveLogicalLinks:= otx:List = null", "inParam", "BO_UseCompression:= otx:Boolean", "", "", "variable", "S_Step:= otx:String", "variable", "B_Response:= otx:ByteField", "variable", "DG_Service:= diag:DiagService", "variable", "B_Start_Programming:= otx:ByteField = 1002", "variable", "eraseMemPdu:= otx:ByteField = 3101FF00", "variable", "L_B_flashDataListToTransfer:= otx:List = null", "variable", "i:= otx:Integer = 0", "variable", "B_CheckRoutine:= otx:ByteField", "variable", "B_Signature:= otx:ByteField", "variable", "B_CRC:= otx:ByteField", "variable", "S_StartTime:= otx:String", "variable", "I_TimetoProgramm:= otx:Integer", "variable", "BO_IsZKB:= otx:Boolean", "variable", "S_DllPath:= otx:String", "variable", "B_VariantVersion:= otx:ByteField", "variable", "B_SWIL1:= otx:ByteField = 00", "variable", "B_SWIL2:= otx:ByteField = 00", "variable", "B_SWILStartAdress1:= otx:ByteField", "variable", "B_SWILStartAdress2:= otx:ByteField", "variable", "B_BootloaderByte:= otx:ByteField", "variable", "S_SecurityClass:= otx:String", "variable", "S_StatusProduction:= otx:String", "variable", "S_Revision:= otx:String", "variable", "FS_ActualFlashSession:= flas:FlashSession", "variable", "B_ActiveLogicalBlock:= otx:ByteField", "variable", "B_TesterID:= otx:ByteField = 0002EA35", "variable", "B_SWIL1CRC:= otx:ByteField", "variable", "B_SWIL2CRC:= otx:ByteField", "variable", "B_SWIL1Signature:= otx:ByteField", "variable", "B_SWIL2Signature:= otx:ByteField", "variable", "B_SWIL1Laenge:= otx:ByteField", "variable", "B_SWIL2Laenge:= otx:ByteField", "variable", "I_BlockSequenceCounter:= otx:Integer"

        ]
    },
    shadow: false

});

Love the library, hoping to use it with my current architecture which uses Browserify, however I'm finding it difficult to accomplish. An example is that index.js does not include Paper in the exported object.

Is there something I am missing? Is there are particular way to use JointJS with Browserify?

Thanks in advance!
Andy

sh build.sh
-e Build ID: build-1324223288
-e Sun 18 Dec 2011 10:48:08 EST
-e
-e Creating standalone package (joint.all.min.js)...
du: illegal option -- b
usage: du [-H | -L | -P] [-a | -s | -d depth] [-c] [-h | -k | -m | -g] [-x] [-I mask] [file ...]
-e Size before minification: 0 B
-e Size after minification: 123315 B

du: illegal option -- b
usage: du [-H | -L | -P] [-a | -s | -d depth] [-c] [-h | -k | -m | -g] [-x] [-I mask] [file ...]
-e Minifying src/joint.js: 0 B => 25913 B
du: illegal option -- b
usage: du [-H | -L | -P] [-a | -s | -d depth] [-c] [-h | -k | -m | -g] [-x] [-I mask] [file ...]
-e Minifying src/joint.dia.js: 0 B => 13134 B
du: illegal option -- b
usage: du [-H | -L | -P] [-a | -s | -d depth] [-c] [-h | -k | -m | -g] [-x] [-I mask] [file ...]
-e Minifying src/joint.dia.uml.js: 0 B => 5627 B
du: illegal option -- b
usage: du [-H | -L | -P] [-a | -s | -d depth] [-c] [-h | -k | -m | -g] [-x] [-I mask] [file ...]
-e Minifying src/joint.dia.fsa.js: 0 B => 1411 B
du: illegal option -- b
usage: du [-H | -L | -P] [-a | -s | -d depth] [-c] [-h | -k | -m | -g] [-x] [-I mask] [file ...]
-e Minifying src/joint.dia.pn.js: 0 B => 2286 B
du: illegal option -- b
usage: du [-H | -L | -P] [-a | -s | -d depth] [-c] [-h | -k | -m | -g] [-x] [-I mask] [file ...]
-e Minifying src/joint.dia.devs.js: 0 B => 2281 B
du: illegal option -- b
usage: du [-H | -L | -P] [-a | -s | -d depth] [-c] [-h | -k | -m | -g] [-x] [-I mask] [file ...]
-e Minifying src/joint.dia.cdm.js: 0 B => 3479 B
du: illegal option -- b
usage: du [-H | -L | -P] [-a | -s | -d depth] [-c] [-h | -k | -m | -g] [-x] [-I mask] [file ...]
-e Minifying src/joint.dia.erd.js: 0 B => 3351 B
du: illegal option -- b
usage: du [-H | -L | -P] [-a | -s | -d depth] [-c] [-h | -k | -m | -g] [-x] [-I mask] [file ...]
-e Minifying src/joint.dia.org.js: 0 B => 1536 B
du: illegal option -- b
usage: du [-H | -L | -P] [-a | -s | -d depth] [-c] [-h | -k | -m | -g] [-x] [-I mask] [file ...]
-e Minifying src/joint.arrows.js: 0 B => 5884 B
du: illegal option -- b
usage: du [-H | -L | -P] [-a | -s | -d depth] [-c] [-h | -k | -m | -g] [-x] [-I mask] [file ...]
-e Minifying src/joint.dia.serializer.js: 0 B => 2229 B
-e
Building api reference...

Hi! I'm getting an error while loading joint.js on the page inside node-webkit application:
"Uncaught TypeError: Cannot call method 'bind' of undefined", joint.nojquery.js:8233
It appears at version 0.7.0. Version 0.6.4 works fine.

hi, the error happens when I try to visulize the Entity-relationship diagram on Internet Explorer 8 and it can be reproduced on your example: http://www.jointjs.com/demos/run.html?unit=erd
On diagram appears only the object named "Entity"
It seems to be an error(incompatibility) on raphael.js: Invalid argument
No problem on Firerfox

Connection can be broken properly only at the beginning or at the end. To be able to break it at its arbitrary point, length along the connection path to a required vertex must be computed, compared with other vertices' length and placed to an appropriate position in _conVertices array.

1. Create two elements in the paper and link them together.
2. el1. set('z', 1); el2.set('z', 3); link.set('z', 2)
3. o = JSON.stringify(graph.toJSON()); graph.clear(); graph.fromJSON(JSON.parse(o))

TypeError: Cannot call method 'bbox' of undefined.

This is because when the link view is created in paper.resetCells(), its target is not yet in the paper.

joint.dia.Paper.pointerup()
should forward the mouse position just like pointerdown and pointermove do.
Thus it ought to become

pointerup: function(evt) {

    evt.preventDefault();
    evt = this.normalizeEvent(evt);

    if (this.sourceView) {

     ///////////////////////////////////////////////////////////////////
     //  OLD
     //    this.sourceView.pointerup(evt);
     ////////////
     // NEW
      var localPoint = this.snapToGrid({ x: evt.clientX, y: evt.clientY });
        this.sourceView.pointerup(evt, localPoint.x, localPoint.y);

        delete this.sourceView;
    }
}

It would be nice to be able to select an area of the diagram (with a lasso or ctrl-click or whatever) and be able to move it as a whole rather than the individual pieces.

When viewing Finite State Machines in Internet Explorer 9 the page breaks with the following error:

SCRIPT65535: Unexpected call to method or property access. 
joint.js, line 15384 character 9

Where line 15384 is

var connectionLength = connectionElement.getTotalLength();

hi,
can i make a click on any object,
can i assign an id on any object,
can i use htm markup on a label?

Size is hardcoded for all arrows in joint.arrows.js, therefore, changing size attribute of those arrows doesn't have any effect.

I just took latest release of joint.all.min.js.

I create a very basic sample but I have errors in Javascript console of Chrome.

In firefox, I have error: a is null

Here is sample page code (based on demos code):

<html>
<head>
<link type="text/css" href="/css/manband.css" rel="stylesheet"/>
<script src="/js/joint.all.min.js" type="text/javascript"></script>
<script>
</script>
<title>Main</title>
</head>
<body>
<div id="header">
<h1>Main</h1>
</div>
<div id="content">
 <script>
var erd = Joint.dia.erd;
Joint.paper("diagram",1000,400);

var e1 = erd.Entity.create({
  rect: { x: 220, y: 70, width: 100, height: 60 },
  label: "Entity"
 });
var e2 = erd.Entity.create({
  rect: { x: 520, y: 70, width: 100, height: 60 },
  label: "Weak Entity",
  weak: true
});

var r1 = erd.Relationship.create({
  rect: { x: 400, y: 72, width: 55, height: 55 },
  label: "Relationship"
});

var a1 = erd.Attribute.create({
  ellipse: { x: 90, y: 30, rx: 50, ry: 20 },
   label: "primary",
  primaryKey: true
});
var a2 = erd.Attribute.create({
  ellipse: { x: 90, y: 80, rx: 50, ry: 20 },
  label: "multivalued",
  multivalued: true
});
 var a3 = erd.Attribute.create({
  ellipse: { x: 90, y: 130, rx: 50, ry: 20 },
  label: "derived",
  derived: true
});
var a4 = erd.Attribute.create({
   ellipse: { x: 90, y: 180, rx: 50, ry: 20 },
   label: "normal"
});

a1.joint(e1, erd.arrow);
a2.joint(e1, erd.arrow);
a3.joint(e1, erd.arrow);
a4.joint(e1, erd.arrow);

e1.joint(r1, erd.toMany);
r1.joint(e2, erd.oneTo);

</script>
<div id="diagram" style="width:1000px; height: 400px"></div>


</div>
<div id="footer">
</div>
</body>
</html>

Hi,

I'm starting to use your library but I can't find some clear and complete tutorial on how to use it.
I probably miss it.
Do you know where I can find some documentation and samples ?

Thnak you very much,

Hi,
Would you be interested in combining jointjs with an MVC framework such as backbone?
Creating a diagram modeling application without a proper model behind the diagram gets pretty complicated if you want to allow edits, saving to db , etc.

If you've already accomplished such a thing, would you be willing to share an example?

Best,
LiorZ

Hi ,
I integrated raphaeljs 2.1 with joint and implemented a zoom in/out feature as well as dragging ability of the paper.
You can see a demo here: http://www.youtube.com/watch?v=R6nqgnDN_FU

If you're interested in that feature, I can organize the code a bit an make a pull request.

LiorZ

Hi,

I am using JointJS 0.7 and some time when i select a rectangle in the paper, the selected object is not detached and remains attached to the mouse pointer. The Chrome console show the error enclosed:

Uncaught illegal access at 21832 joint.js

code that process labelBoxAttrs is missing in Joint>>processOptions() method.

i created a recursive node like this:

s1.joint(s1,fsa.arrow); 

at first everything was fine, but i got some problem when i dragged
the end joint from this recursive node to a nonrecursive node.
when i drag the recursive node to other position the joint just stay
in its place, the joint only moves to the place it should be when i
pass the mouse over it.
its worse when a delete the node with liquidate . the joint stays
until i pass the mouse over it.
And if i click on the nonrecursive node that was connected to the
joint above, the diagram goes crazy, mi node moves far away and
firebug shows an error mesage many times until i stop moving the
mouse:

pathArray[0] is undefined   (Raphael.js  line 648) 
  if(pathArray[0][0]=="M") { 

when i drag the end of the joint
from the recursive node to another node, the recursive node's joint
array becomes empty but the joint.startObject still pointing to the
recursive node.

There are some indentation issue in the source code, that makes the code not very readable. Most of time, indentation is made with spaces, but some times it is made with tabs (and some times on the same line!). And because a tab is equal to 4 spaces in my editor, indentation is broken. (no, I don't want to change the tab setting).

Only one type of character should be chosen for the indentation, not a mix with spaces and tabs.

The automatic layout plugin does not fully work if I have multiple edges connecting two nodes. For example, if I have an element A connected to an element B twice, the resulting graph shows one (darker) link connecting A and B. I can manually separate the links, but for my purposes these links have labels and are not being displayed properly.

Hey David,
I am using JointJS to implement a diagram editor for my final dissertation, nice work on JointJS by the way :)

Currently, in my editor, the paper keeps the shadow of any object that I delete. I tried unsuccessfully to find a solution for this issue but now I think that this can be a bug. (You will find a screenshot illustrating this situation in your email).
Can you help me out?

Best Regards,
Diogo Azevedo

Given two objects A and B. If A is embedded into B success. If B is then embedded into A a too much recursion error occurs.

Existing Code:

embed: function(cell) {

    this.trigger('batch:start');

    var cellId = cell.id;

    cell.set('parent', this.id);

    this.set('embeds', _.uniq((this.get('embeds') || []).concat([cellId])));

    this.trigger('batch:stop');
},

Proposed fix:

embed: function(cell) {

    this.trigger('batch:start');

    var cellId = cell.id;

    var parentCellId = this.get('parent');

    if(parentCellId == cellId) {

        console.log("Cannot embed twice");

    } else {

        cell.set('parent', this.id);

        this.set('embeds', _.uniq((this.get('embeds') || []).concat([cellId])));

    }

    this.trigger('batch:stop');
},

The type of the uml EndState ought to be uml.EndState and not fsa.EndState.

joint.shapes.uml.EndState = joint.shapes.basic.Generic.extend({

markup: '<g class="rotatable"><g class="scalable"><circle class="outer"/><circle class="inner"/></g></g>',

defaults: joint.util.deepSupplement({

    type: 'fsa.EndState',         <<<<<<<<<<<<<<<<<<<<<<<<
    size: { width: 20, height: 20 },
    attrs: {
        'circle.outer': {
            transform: 'translate(10, 10)',
            r: 10,

when connection contains more vertices constituting an arc,
label location gets too far from the connection line.

When using joint.layout.DirectedGraph, I get the following error on line 20574 of joint.all.js (in both the latest release and the latest git version of the file):

Uncaught TypeError: Object [object global] has no method '_prepareData'

This is due to the fact that "this" seems to be pointing to Window, rather than the joint.layout.DirectedGraph object.

_prepareData could easily be inlined to solve this problem and the resulting code would still be readable.

DirectedGraph layouting does not take paper size into account. I currently have a 600x300 paper, but the DirectedGraph layout algorithm lays my objects out vertically, causing them to fall off the paper. Rather than rendering vertically, it would be ideal if the layout algorithm could use the empty horizontal space as well.

Padding is useful when styling label box.

when I instanced a basic shape without position parameters and put in my graph the shape is there and is showing but getting error when trying move it.

simple example:

circle =new  joint.shapes.basic.Circle

graph.addCell(circle)

and the debugger is point to pointermove funciont joint.dia.element.js:439

        this.model.translate(
        g.snapToGrid(position.x, grid) - position.x + g.snapToGrid(x - this._dx, grid),
        g.snapToGrid(position.y, grid) - position.y + g.snapToGrid(y - this._dy, grid)
        );
        }

Well, if the paper shows the shape then there is a position. I was wondering if we need a default position for those elements.

Ty for your attention.

Hello,

i defined a test diagram:
var procedure = uml.State.create({
rect : {
x : 160,
y : 0,
width : 150,
height : 120
},
label : 'Lorem Ipsum and whatever',
attrs : {
fill : "90-#000-lightgray:1-#fff"
},
shadow : false
});

Though the actions-attributes are missing the great almighty IE shows the 'entry' and 'exit' action.
Even commenting it out or adding an empty action ("entry: "") doesn't prevent the IE to show these actions...

Regards,
Ruben