jointjs - How to style a link created from a magnet port?

im trying to figure out how to style a link when connecting two elements using drag and drop between ports. I understand that you can style a link using the link.attr like this: link.attr({line: { // selector for the visible <path> SVGElement stroke: 'orange' // SVG attribute and value}});given that you manually create the link and add it to the graph. However the only option I found styling a magnet link is when creating the paper like this:initializeScene(domNode) {this.paper = new joint.dia.Paper({ el: domNode, model: this.graph, ...Read more

How to draw a link from an existing port in JointJS?

Im trying to figure out how to draw a link from an existing port in an element to another element in JointJS. For example using the following code won't work as I want to specify the source as a specific port in the element not the element itself:var link = new joint.shapes.devs.Link({ source: { id: elementFrom.Id, port: "out" }, target: { id:, port: "in" }});this.graph.addCell(link);I there a way to achieve this?...Read more

Change color of JointJS Rappid object (via modifying different instance in the left-nav menu and also modify via Rappid Inspector color picker)?

I basically want to change the color of a JointJS shape in their RAPPID environment I'm trialing.Here is some background on what I have so far and what I want to achieve:I have a JointJS shape called ChristmasTree that extends joint.dia.Element.Basically the svg string that builds this ChristmasTree object is a path of the tree (svg path element), and multiple ornaments on it (4 svg circles/ellipses which have id's and classes that I would assume I can use to modify the colors).I set some initial values for the ornaments via the style attr insi...Read more

jointjs - Paste elements to another graph in Rappid?

I am building an administration tool thats manipulates diagrams, using JointsJS + Rappid. I am trying to copy paste elements from one paper A to another paper B (located on different browser tabs) but I face the following problem:I can copy-paste from A to B one set of elements (that's good)I can even paste it several times (that's still good)but if I copy another set of elements from A, and try to paste it into B, the former set is pasted, instead of the new oneI can still paste elements from A into A, and B into B, but not from one to another...Read more

jointjs - Joint Js : link rendered under the shape

I am creating diagram dynamically.Let's say we have three rectangle shapes Activity1,Activity2 and Activity3 and we connect Activity1 to Activity2 ,Activity2 to Activity3 ,Activity3 to Activity1here we have a loop back on Activity3 to Activity1( so hides the link from Activity3 to Activity1 behind the Activity2Is there any automatic path creation between shapes or i have to manually describe vertices for linesDesired Result:( more

How to lock individual elements in JointJS?

I'm trying to figure out how to lock individual elements so they can't be moved by the user. I don't want to prevent all elements to be moved just individual ones.In my case I want to prevent user from moving elements that are inside another element (embedded).Say for example on the pointer down event. The following code does not work but is there a "locked" attribute or something similar to use?this.paper.on( "element:pointerdown", function(elementView) { elementView.model.set("locked", "true"); }.bind(this));I have tried using the follo...Read more

How to react on link remove event in JointJS

I use the following code to control the remove functionality on links. How can I intercept the remove event and prevent it if the link match a specific condition? // add a remove button on hovered linkthis.paper.on("link:mouseenter", function(linkView) { let tools = [new joint.linkTools.Remove({ distance: 20 })]; linkView.addTools( new joint.dia.ToolsView({ name: "onhover", tools: tools }) );});// remove button on hovered linkthis.paper.on("link:mouseleave", function(linkView) { if (!linkView.hasTools("onhover")) return; li...Read more

How to make label text in jointjs elements not selectable?

i'm trying to find a solution for the following. When I drag a link between elements the label text inside the elements get selected for some reason. Lets say I have an element A with the property A.attr("body/magnet", "active"); set and A.attr("label/text", "some text"); When I create a link from that element by clicking and dragging the label text gets selected on elements the link goes through. This seems a little bit random though as sometimes all the labels in the graph gets selected when dragging the link. Is there a way to make the labe...Read more

JointJS creating custom Shapes, Diamond, Hexagon

I m new to jointJS, I need to create custom shapes using JointJS, I have tried creating the diamond shape using the Rectangle, making its height and width same, and then rotate by 45 degrees as follows,var diamond = new joint.shapes.basic.Rect({ position: { x: 100, y: 100 }, size: { width: 100, height: 100 }, attrs: { diamond: { width: 100, height: 30 } } }); diamond.attr({ rect: { fill: '#cccccc', 'stroke-width': 2, stroke: 'black' }, text: { text: 'Diamond', fill: '#3498DB', 'fo...Read more

Resize all cells (rect) at once in jointjs diagram

After the jointjs diagram is loaded I want to resize all the cells (rect) so that they have the same height as the one with the bigger text. I managed to resize all elements at once, like this:_.each(paper.model.getElements(), function(el) { el.set({ size: { width: 170 , height: newHeight} }) })Among my elements, there are elements like "Rect" and some shapes that I created with "path".When I set the new size, elements created with "path" not only resize, but also changes their position on Y axis.Any idea why my "path" elements repo...Read more

In JointJS, how does one position the label of a port relative to the port?

I want to place the label for a port of a JointJS joint.shapes.basic.Rect centered right on its respective port, like this example (that I was able to codge from this custom Model):I tried many things, from new joint.shapes.basic.Rect({ 'attrs': { 'text': { 'text': 'a' }, '.inPorts text': { 'ref': 'circle', 'ref-x': 0.5, 'x-alignment': 'middle', 'ref-y': 0.5, 'y-alignment': 'middle', 'text-anchor': 'middle' } })to changing the port object itself to...Read more