Stack Overflow
Stack Overflow

Questions tagged [jointjs]

JointJS is a JavaScript library for creating fully interactive diagrams and graphs.

JointJS is a JavaScript library for creating diagrams and graphs. The diagrams can be fully interactive. The JointJS API is suitable both for implementing a diagramming tool as well as simply for publishing diagrams.

Resources

Related tags

607 questions
19
votes
3 answers

Javascript Diagram Library

I'm looking for a good JavaScript Diagram library for a project, can be commercial. Mandatory Requirements: Highlight connected lines and components when clicking a component (or hovering) Ability to switch the image of a component (to represent…
sangress
  • 599
  • 5
  • 11
15
votes
2 answers

JointJS: make link label movable over the link itself

For the links - in a JointJS diagram - I tried to implement this tutorial (http://jointjs.com/tutorial/constraint-move-to-circle) to move the labels on the link, but I don't understand where to put the ConstraintElementView. I would like to make…
user3142695
  • 15,844
  • 47
  • 176
  • 332
13
votes
4 answers

How can I keep jointjs cells from overflowing the paper?

I'm using jointjs to make diagrams which will be user-editable. The user may drag them around and relocate each cell. However, when a cell is dragged to the edge, it overflows and becomes cut off. I want to prevent this from happening, instead the…
dalvacoder
  • 455
  • 7
  • 18
12
votes
1 answer

JointJs - event onConnect Link

I am trying to create a board where an user can dynamically add blocks and connect the blocks with links. (Something like this but dynamically) I'm using JointJs framework and till now everything is working as expected, but I need to show some info…
BFigueiredo
  • 176
  • 1
  • 7
12
votes
2 answers

Can I add new attributes in jointjs element?

I want to create a custom element with new attributes, I created my custom element like that but I need a new attribute to store information about the element. joint.shapes.basic.newRect = joint.shapes.basic.Generic.extend({ markup: '
csadan
  • 291
  • 1
  • 3
  • 13
12
votes
2 answers

How to add an onclick event to a joint.js element?

I have a joint.js element in a DAG, and would like to be able to trigger an event by clicking on it. I could use $(selector).click(...) to do it, but I was wondering if there was a joint.js specific way of handling it, since that would probobly be…
ahalbert
  • 474
  • 1
  • 6
  • 15
11
votes
1 answer

Joint.js add custom ports with path class. for custom elements

What I am trying to do is make a element with custom class for ports and path so that I can add an element with custom path and my own markup for ports.This way when I create an element I will pass dynamic path for its shape just like elements of…
Achilles
  • 519
  • 7
  • 27
9
votes
1 answer

Joint.js Drag and Drop Element between two papers

I am implementing drag and drop between two papers .But I am stuck with the syncing of offset of dragged element with cursor position as I have two papers in my html body.I have very minute experience with css which may be causing problem of…
Achilles
  • 519
  • 7
  • 27
9
votes
6 answers

how to disable 'remove' action on links on jointjs?

use jointjs library to build a graph, it's a good library with very few documents. http://jointjs.com/demos/fsa as above page, when mouse move on link, there is a 'remove' icon on link, which can be clicked to remove link, and I want to disable…
Cooper.Wu
  • 4,335
  • 8
  • 34
  • 42
8
votes
1 answer

jointjs: prevent adding vertex by clicking on link

I would like to add a label to a link by doing a doubleclick on the link. So this is my attempt: paper.on({ 'cell:pointerdblclick': function(cellView, event, x, y){ if (cellView.model.isLink()) { cellView.model.label(0, { …
user3142695
  • 15,844
  • 47
  • 176
  • 332
8
votes
2 answers

How to scale jonitjs graphs?

I noticed that jointjs do support zoom in/out as of http://www.jointjs.com/ But could not find any examples. Please help me with the steps to zoom in/out the result graph created by jointjs within a
?
suho
  • 912
  • 6
  • 12
7
votes
2 answers

jointJS - why pointerclick event doesnt work, only pointerdown gets fired

This works: paper.on('cell:pointerdown', function(cellView, evt, x, y) { alert("pointerdown"); }); but this code does not: paper.on('cell:pointerclick', function(cellView, evt, x, y) { alert("pointerclick"); }); the reason for this is that…
paul_n
  • 191
  • 1
  • 6
7
votes
2 answers

How do I add a class to a JointJS cell?

I can use the attr method to change attributes of a cell, e.g. to set the stroke of a link: conn.attr({'.connection': { stroke: 'red' }}); But I would rather set such attributes in the css file, e.g. as in this .connection { stroke:…
Joachim Breitner
  • 25,395
  • 6
  • 78
  • 139
7
votes
3 answers

How to make a paper draggable

If the paper is too big for the div it's shown in, I'd like to make the paper draggable. I tried the papers blank:pointerdown and pointerup events but was not able to just follow the mousemovement. I also tried to make the element of the paper…
Maria
  • 151
  • 2
  • 9
7
votes
3 answers

How to interactively create links in JointJS

I want to interactively add links to my JointJS based graph. My idea is to create a small temporary node on pointerdown with a link from the original node to this temporary node, drag it on top of another node and on pointerup create the real link…
SiliconValley
  • 1,465
  • 17
  • 30
1
2 3
…
40 41