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
4
votes
0 answers

Joint.js port connection position

I created custom elements with ports, but when connecting a link between them the link "arrow head" and port shape sometimes overlap with the "arrow head" inside the port. Another problem seems to be that if I move the elements around, it appears to…
Codendaal
  • 514
  • 6
  • 14
4
votes
1 answer

Adding elements in bulk on JointJS leads to performance issues

We are trying to build a Visualization Framework using JointJS (we are not using Rappid). SVG is used to render graphical data on the browser. We have a scenario where we have a model with approximately 4500 ports. We have used ports as elements and…
Manoj
  • 41
  • 3
4
votes
1 answer

How to set shape size dynamically in Joint JS?

I am new to Joint JS and I am not able to dynamically set width and height properties of below element: var rect = new joint.shapes.basic.Rect({ position: { x: 100, y: 30 }, size: { width: 100, height: 30 }, attrs: { rect: { fill:…
Devanagouda Andanigoudar
  • 71
  • 2
4
votes
1 answer

Is there a safe way to delete a JointJS paper/graph

I'm writing an app that makes use of JointJS to display diagrams. However, I want to be able to dynamically add and remove diagrams from a page. Adding new diagrams is fairly trivial, but when I remove diagrams, is it safe to remove the DOM elements…
SpoonMeiser
  • 19,918
  • 8
  • 50
  • 68
4
votes
1 answer

Include JointJS diagram in React/Flux projects

I'm trying to include a JointJS diagram in my React+Flux project. I started from an existing demo available there. My idea is to embed the diagram in an higher level component that will be reused inside my project. The structure that I came up with…
pedro.zena
  • 391
  • 1
  • 4
  • 16
4
votes
3 answers

jointjs paper background color

I am designing a UI that uses jointjs to draw a graph. I need to change the background color of the Paper but I see that changing the .viewport css (e.g. background-color: #ff0000; ) this doesn't affect the appearance of the svg. How can I add color…
theosem
  • 1,174
  • 3
  • 10
  • 22
4
votes
1 answer

Text area in svg shapes

Created a text area in svg using joint js. However, I am not able to enter any text in the text area. How to make the text area editable? Code: var graph = new joint.dia.Graph; var paper = new joint.dia.Paper({ …
user2046417
4
votes
1 answer

Editable text input on shapes

How to have text area input/text input inside rectangle in joint js? I have few rectangles. I would like to have text input into rectangles to begin with. Do I have to create custom element for this or can I use pre-defined shapes? Here's my code: …
JCoder999
  • 95
  • 1
  • 8
4
votes
1 answer

disable mouseover interaction JointJS diagram

I am trying to remove the mouseover actions that happen over links and Rects. I tried adding interactive: false to the joint.dia.Paper object - this does not help fully. I still see changes on mouse over. I want link (especially) to not respond on…
A.D
  • 1,480
  • 2
  • 18
  • 33
4
votes
1 answer

How to create a custom shape in JointJs, which consists out of 2 or more basic shapes?

I want to create a shape in Joint JS. Which I could initialize and lets say have rectangle and circle as one shape. As far as I know, only path method is something near.
Andrius Čekanauskas
  • 91
  • 1
  • 4
4
votes
0 answers

Joint.js / Rappid - Hairline (1px) strokes for links and borders

I must be just missing it somewhere but how does one define a hairline stroke in Joint.js? My shapes and lines are not scaled and no matter what I do, everything seems to be rendered 2px anti-aliased. Here's my default link…
Buta
  • 73
  • 1
  • 4
4
votes
1 answer

In JointJS, how an element accesses position, inPorts, outPorts?

I am using jointJS for my academic project, I have such a question, How an element accesses position, inPorts, outPorts? For example, we create an element like this, var m1 = new joint.shapes.devs.Model({ position: { x: 50, y: 50 }, size: { width:…
Yabing
  • 43
  • 1
  • 5
4
votes
1 answer

How to center scaling of a JointJS paper

I've implemented the scaling of a paper and it works great. I linked it to the scrolling of the mousewheel, but I still encounter one problem: In the API the scale function is defined as scale paper.scale(sx, sy, [ox, oy]) and I figured that ox and…
Maria
  • 151
  • 2
  • 9
4
votes
3 answers

JointJS: Hello World example doesn't work

I am always seeing this exception when I try the Hello World example from the JointJS site: Uncaught TypeError: Cannot call method 'getStrokeBBox' of undefined Here's the code: