Questions tagged [jointjs]
JointJS is a JavaScript library for creating fully interactive diagrams and graphs.
589
questions
0
votes
1
answer
35
views
Link overlap, on target port
I have an issue with link, on target port device, it unusually overlaps the target port.... check my fiddle . I also have attached a screenshot overlap image. Someone have any suggestions? Thanks!
0
votes
1
answer
40
views
How can I add an image to ports?
I've tried to add an image to rectangle port with JointJS, check my jsfiddle project. I need 2 images, one in my rectangle shape, I did that and one inside shape port. I don't know why, but when I ...
0
votes
0
answers
22
views
JointJS: item added to incorrect position after panning paperScroller
I'm having trouble to get the correct position to items added to the graph after moving items to a new area on the left side of the paper.
Function called when the item is drop on the canvas.
function ...
0
votes
1
answer
37
views
On moving a table in JointJs graph, links are not moving with it..They are getting disconnected and only table is moving. How can I correct it?
In Joint Js graph , links are getting disconnected on moving the tables ? What might be the issue ? How can I correct it. I have shared the link.Please go through it. You will understand what I am ...
0
votes
1
answer
65
views
JointJS how to create a HTML select (drop down) inside a shape object
I am looking for best practises or advice in how to create interactive elements within Shapes (elements) using the JointJS (Rappid) library.
This is what I have done currently:
The code
const shape =...
0
votes
1
answer
53
views
How to restrict linking between ports of elements if one link already exist between them in JointJS?
I have 3 elements with ports. My goal is to not allow linking ports between source and destination elements if one of their ports are already linked to each other. Please see my visualization below:
...
0
votes
1
answer
59
views
How to add a header/title in a rectangle using JointJS without overlapping with the ports?
I have a rectangle which has multiple ports. I wanted to add a title on top to name the rectangle just like this.
Essentially, I am making and ERD-like design with each ports representing a table ...
0
votes
1
answer
50
views
How do you apply Smart Routing on links with ports on JointJS?
I am trying to apply smart routing of links with the use of ports using JointJS. This documentation shows the one I am trying to achieve. The example on the docs though shows only the programmatic way ...
0
votes
0
answers
36
views
Can we use jointjs inside a flutter-for-web app?
While it is possible to wrap javascript stuff in dart I'm not so sure about wrapping a complex package like rappidjs or jointjs with dependencies on backbone, jquery and lodash and stuff like mouse-...
0
votes
1
answer
108
views
How to preserve aspect ratio during element resize?
I have a custom element that has shape of an ellipse:
{
size: { width: 160, height: 80 },
attrs: {
body: {
refCx: '50%',
refCy: '50%',
refRx: '50%',
refRy: '50%',
...
0
votes
1
answer
34
views
JointJs port label text font
Image of model I want to decrease the font of port label.
model.addPorts([
{
group: "out",
id: "out",
attrs: {
label: {
text: "out",
},
},
},
]);
simply i want to ...
0
votes
1
answer
72
views
Hierarchical stacked element using JointJS
In JointJS documentation (link below), I am able to define a simple custom element that is driven from other basic elements such as Line, Rectangle, Link, and so on
https://resources.jointjs.com/...
0
votes
0
answers
26
views
JointJS: Possible to define LinkAnchor / ConnectionPoint at Element level?
I am wondering if one can define the link connection points for ports (or custom elements) instead of for links. I created a custom element with multiple ports and I want to define that the links to ...
0
votes
0
answers
94
views
JointJS Draw SVG with NodeJS in backend Server
For an industrial project, we have to draw a large quantity ( ~400 / 500) of diagrams made with jointjs and export them as SVG in one PDF file.
For performance purposes, the drawing should be more ...
0
votes
0
answers
108
views
How Can We Convert a JointJS Paper Model to a PDF?
We are using JointJS in a React application, and we need to be able to render a PDF of the map that users can download. We can successfully get the map to display everything fine, but we cannot ...
0
votes
1
answer
77
views
JointJS needs Jquery as its dependency. Unfortunately, Jquery is breaking my ExtJS application. Any workaround?
I noticed that JointJS has JQuery as its dependency. My application is built on ExtJS v3. Its pretty old app. When I try to include a tag with Jquery v3.5.1 cdn location to it, I notice that it ...
0
votes
1
answer
49
views
Alternative way to create ports in JointJs
I have come across this page about creating ports in JoinsJS and it fits my needs:
https://resources.jointjs.com/tutorials/joint/tutorials/ports.html
However, it seems that this way got deprecated and ...
0
votes
1
answer
29
views
'content' not Available for ui.Popup
Im using rappid for my current project.
Im trying to use ui.Popup for my element.
But for i don't know why, the 'content' option is not available for me.
In the docs, it said it need the content ...
0
votes
1
answer
53
views
Jointjs petri-net graph tokens do not render! What can i do?
currently I am trying to set up a Petrinet generator as jupyter widget. Therefore I am using the cookiecutter-ts-widget template, which means i am implementing the frontend logics in typescript. I am ...
0
votes
0
answers
25
views
Why path is not scaling with rectangle?
I have defined new element but I am having trouble when resizing it, the path do not scale with rectangle! What should I do, I tried couple of options trying viewport of root element, adding scalable ...
0
votes
0
answers
44
views
Uncaught TypeError while trying to use JointJs
I've been trying to get a simple JointJs program to run, but I keep getting the same error no matter what I do:
Uncaught TypeError: this.preinitialize is undefined
View Backbone
constructor ...
0
votes
1
answer
97
views
What is the difference between an "Element" and a "Cell"?
When I read the documentation on JointJS, I find that there are discussions on "Elements" and "Cells". What are the differences between them?
1
vote
0
answers
62
views
JointJS - Set list of items with ports in Node
I'm struggling with a feature and I don't know if it's possible to achieve. I'm trying to create a Node with list of items in body. Each item should have own port to which I can connect.
I have ...
0
votes
0
answers
115
views
Create smooth links in JointJS that route around obstacles
I'm attempting to create links in JointJS that are smooth curves but also route around obstacles. The default implementation allows us to choose routers and connectors. Routers let you define the ...
0
votes
0
answers
39
views
JointJs: connect the lines/links wherever you want around the node
In the Rappid JointJs library, how can you decide where to put the lines on a node/element?
For example, you can see here the source of the line is on the left-hand side
I'd like the user to decide ...
0
votes
1
answer
66
views
How to define a custom connector in JointJS
I'm attempting to define a custom connector in JointJS in Vue. Though I don't think this is really a JointJS issue or a Vue issue, but rather my lack of understanding of how Javascript modules work ...
0
votes
0
answers
49
views
input element inside forgein object of jointjs taking user input
i am adding the forgein object on the click event of the jointjs element via ports
i have added input field but it is not wroking
```
cellView.model.addPort({ markup: '<foreignObject x="0&...
3
votes
0
answers
57
views
paper background image does not appear in exported png/svg/jpeg file
paper.toPNG(function (dataURI) {
const link = document.createElement("a");
link.href = dataURI;
link.setAttribute("download", 'fileName.png');
document.body....
0
votes
1
answer
113
views
How to make a path in a custom JointJS element scale?
I have the following custom JointJS element defined:
joint.shapes.webtp.BowTie = joint.dia.Element.define('webtp.BowTie',
{
size: { width: 400, height: 100 },
attrs: {
body: {
...
2
votes
0
answers
149
views
Are there any drawbacks when rendering a React component inside an svg foreignObject?
I am using jointJS as a diagramming library. It creates nodes on a graph using svg elements.
I want to use react to render the content of those nodes, and since jointJS lets me configure what svg ...
0
votes
1
answer
177
views
JointJS: Unable to display a foreignObject in a custom shape with JSON
I am trying to define a custom shape in JointJS that includes a tag. If I define the markup as a string, it works just fine:
joint.shapes.examples.CustomRectangle = joint.shapes.standard.Rectangle....
1
vote
1
answer
117
views
JointJs: Define a custom shape with Node.Js
I am a bit confused by the fact, that in my application it doesn't seem to work to define custom shapes using JointJs in combination with NodeJs. I was trying the following code:
const joint = require(...
0
votes
2
answers
148
views
JointJs: Links to circular shapes not acting like expected
I am currently in research for a suitable library for my upcoming project, where I have to create an application with which one can create data-flow-diagrams. In my research I have come in touch with ...
0
votes
0
answers
64
views
How do I keep elements' original size and keep them inside the paper when the paper resizes?
I am implementing a UML diagram, the paper gets resized on window resize, I need the classes to stay the same size and stay inside the paper.
The documentation for paper.scaleContentToFit(opt) says
...
0
votes
1
answer
298
views
JointJS Adding a Port to a custom element
I created a custom element using the jointjs tutorial like this:
CustomRect = joint.dia.Element.define('example.CustomRect', {
attrs: {
rect: {
refX: 0,
refY: 0,
refWidth: '...
0
votes
1
answer
58
views
How do I get the elementView size of UML classes using JointJS?
I'm implementing the class diagram where the users can change the class' name, attributes and methods. I'm having trouble with resizing the class rectangle width depending on name, attribute or method ...
0
votes
1
answer
85
views
Accessing objects via user-defined IDs in JointJS
In JointJS, is it possible to either:
Set the ID of a cell/element after it's been created?
Set the ID of a cell/element during the .clone() function?
Access the name of an element* without going via ...
2
votes
1
answer
374
views
How to test npm package shipped as .tgz file in react using jest?
I'm using a npm package shipped as .tgz file with in a react application. But when I try test a react component using jest which imports this package I'm getting the following error. Is there anything ...
0
votes
1
answer
122
views
Joints: How to include icomoon icon into rappid's custom shape
I'm using the Rappid framework for HTML diagramming tooling. I've made custom shapes using dia.Element from rappid's namespace using the below example. Anyhow, images are working fine using SVG, but I ...
0
votes
1
answer
362
views
Is there a way to update the graph/paper or all modified elements in the graph in JointJS?
Basically I'm receiving Cell attributes from a file and I want to replace the corresponding Cells in the graph with the updated attributes but I can't seem to refresh the graph after I've applied the ...
0
votes
1
answer
250
views
How do I extend ElementView for a custom element so that it actually displays what I want and accepts the markup without error?
I have a jsFiddle of JointJS code that gives me what I want: https://jsfiddle.net/RaymondMH/s46uyq8v/156/
However, when I try to make use of this code in my actual application, none of the functions ...
0
votes
1
answer
101
views
Dynamically setting the model of a paper
Is there a way I can dynamically set the model of a paper (and maybe, later, change it to another layer)?
Or are JointJS / Rappid limited to (1 model:1 paper)?
Basically, I'd like to be able to ...
1
vote
1
answer
38
views
JointJS baseline-shift
I'm using JointJS 3.2.0, and I need to have texts like PN=xxx.
How baseline-shift is supposed to be used in JointJS? I tried
markup: '<g><text>\
<tspan class="left&...
1
vote
0
answers
241
views
How to resolve overlapping issue with joint js links
I need a solution to resolve the over lapping issue with joint js links.
For example
Image1
to
Image2
I'm implementing a process flow diagram in JointJS where the user can delete elements as well as ...
2
votes
1
answer
173
views
Changing shape at drop on paper
I'm using rappidjs 3.2 and I'm trying to make a stencil shape that changes shape when I drop it to the paper. For testing purposes I want to just print in the console the type of shape throught ...
1
vote
0
answers
87
views
drag and drop not working properly in the Edit flow
No error in the console , Iam using the below Function for changing the position of shape in the paper if I change the position and release the mouse button It still in dragging once click the shape ...
1
vote
1
answer
382
views
Create close button near the shape JointJS
I have some rectangular shapes (they will appear when the data science toolkit buttons is clicked) and they can drag&drop to the free-space (paper). Also you can run and check easily in codepen.io....
0
votes
1
answer
83
views
The 'graphlib' utility is a mandatory dependency
I am using joint js 3.1.1 version and graphlib 2.1.8 version.
I have a code in my app to check cyclic reference in graph. For that purpose I have written below code
graphlib.alg.findCycles(graph....
1
vote
0
answers
154
views
Prevent JointJS elements from generating off paper
I'm using JointJS in a React environment to create a Directed graph from some Neo4j data. My problem is that elements are being generated off the paper As pictured here, "test6" is generated ...
1
vote
0
answers
165
views
How to implement drag and connect feature provided by Rappid with pure JointJS?
There is a feature in Rappid (the paid version of JointJS) which allows you to drag a button from the toolbox of an element and connect that element to another element where you release your mouse ...