clientio / joint Goto Github PK
View Code? Open in Web Editor NEWA proven SVG-based JavaScript diagramming library powering exceptional UIs
Home Page: https://jointjs.com
License: Mozilla Public License 2.0
A proven SVG-based JavaScript diagramming library powering exceptional UIs
Home Page: https://jointjs.com
License: Mozilla Public License 2.0
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
Probably needs some improvement of how properties of diagrams elements are stored.
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.
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
when connection contains more vertices constituting an arc,
label location gets too far from the connection line.
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,
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;
}
}
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
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.
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
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
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/
this allows to create relation labels on both sides of a connection:
.---------. 1 n .--------. | | --------------------------| | `---------/ `-------/
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.
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 that
y="0.8"for **all**
` node. Because of this line of code
This is very very annoying.
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.
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();
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.
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, 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
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.
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.
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,
can i make a click on any object,
can i assign an id on any object,
can i use htm markup on a label?
Padding is useful when styling label box.
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>
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'));
}
},
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": []}
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.
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.
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,
JointJS breaks scaling functionality of Raphael.FreeTransform
To reproduce:
Here is a use case showing how embedded links fail when parent is translated: http://jsfiddle.net/tm93R/.
This is how it should work:
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');
},
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;
};
code that process labelBoxAttrs is missing in Joint>>processOptions() method.
Size is hardcoded for all arrows in joint.arrows.js, therefore, changing size attribute of those arrows doesn't have any effect.
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
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,
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,
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
});
Title says all.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.