Hello
I need to insert control points to link whenever I want.
Exactly like this video: https://www.useloom.com/share/644699eb77184821b486861034300d47
Can you plz if this is possible in gojs?
Thanks.
If you set Link.reshapable to true and Link.resegmentable to true, you will get the behavior that when the user selects the link, there will be reshaping handles at the corners and resegmenting handles at the middle of each segment.
You can play with that behavior in some of the samples – just search for “resegmentable”: Flowchart or Dynamic Ports. Those two samples happen to also have link routing being orthogonal, but the reshaping and resegmenting behavior also works with normal (non-orthogonal) link routing.
When dragging a resegmenting handle the LinkReshapingTool will add a new segment to the link route. When one drags a reshaping handle and causes adjacent segments to be on or near a straight line, the segments are simplified by replacing those two with a single segment.
Read a description at GoJS Tools -- Northwoods Software. Also consider customizations of the tool, such as Orthogonal Link Reshaping Tool.
Oh, if you really want to show a button to delete the link or a button to delete a point on the route, that’s quite possible to implement. However in my opinion what the LinkReshapingTool does is simpler and better looking. It also works on touch devices.
Thanks for your kind reply.
But can we add new segment wherever I want like the video I showed?
https://www.useloom.com/share/644699eb77184821b486861034300d47
I need to add segments exactly like the video.
I saw samples but they don’t work like the video. And when I move node, link become initialized and additional segments are deleted.
Plz let me know how I can do like the video.
Would be appreciated if you can send me fiddle code or codepen for this.
If you set Link.adjusting to go.Link.End, the link will retain its intermediate route points. You can also set it to a different value, depending on the behavior that you actually want.
Perhaps if I have some time I could create a tool that lets the user insert a route point by clicking on the link and to remove such points using a pop-up button.
Can you do that in few hours or so?
Because I eagerly need that function now.
Would be much appreciated if you can implement that now.
Thanks
Right now I’m helping some other customers.
You’ll need to talk with our sales team, GoSales at nwoods.com, and come to some arrangement. Normally if you want us to do some custom work in a short time you’ll need to pay extra, but it depends on the situation.
We’re going to buy gojs product in a short time. And we’re testing some functions for our site.
This link reshaping function is important for us to determine whether we’ll buy gojs or not.
So can you plz do this in a short time for us if it’s not big trouble? ;)
We’re going to definitely buy gojs product.
Thanks
Here’s a start – inserting points by clicking:
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
layout: $(go.ForceDirectedLayout),
"linkReshapingTool.handleArchetype":
$(go.Shape, "Circle", { width: 16, height: 16, fill: "lightblue", stroke: "dodgerblue" })
});
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape,
{ fill: "white", portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" },
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 8, editable: true },
new go.Binding("text").makeTwoWay())
);
myDiagram.linkTemplate =
$(go.Link,
{
selectionAdorned: false,
mouseEnter: function(e, link) { link.path.stroke = "rgba(30,144,255,0.2)"; },
mouseLeave: function(e, link) { link.path.stroke = "transparent"; },
relinkableFrom: true, relinkableTo: true,
reshapable: true,
adjusting: go.Link.Stretch, // or go.Link.End
click: function(e, link) {
if (!link.isSelected) return;
var p = e.diagram.lastInput.documentPoint;
var seg = link.findClosestSegment(p);
var pts = link.points.copy();
pts.insertAt(seg+1, p.copy());
e.diagram.commit(function(diag) {
link.points = pts;
}, "inserted point in link route")
}
},
new go.Binding("points").makeTwoWay(),
$(go.Shape, { isPanelMain: true, stroke: "transparent", strokeWidth: 8 }),
$(go.Shape, { isPanelMain: true }),
$(go.Shape, { toArrow: "OpenTriangle" })
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", color: "lightblue" },
{ key: 2, text: "Beta", color: "orange" }
],
[
{ from: 1, to: 2 }
]);
}
You can ignore this demo’s node template and some of the details of the link template.
Wonderful! Thank you very much.
And can we add delete pop-up button to points?
OK, here you go: Minimal GoJS Sample
Naturally, the whole app is implemented in the script tag of the page.
You will see that it is pretty easy to create customized diagrams. But learning how to use GoJS does take some time and effort. So I recommend that you read Get Started with GoJS and all of the pages of the Introduction that apply to the kind of app that you want to build, starting at GoJS Introduction -- Northwoods Software.
Thanks for your kind reply, Walter!
My another question is how can we show points of link when we hover over the link?
Just like here: https://www.useloom.com/share/644699eb77184821b486861034300d47
Yeah, i know that functions.
But how can we show link points when we hover over the link in this sample?
https://gojs.net/extras/clickInsertsPoint.html
That points are List of Point. Link | GoJS API
How can I show these points when I hover over the link?
Code will be appreciated. Thanks
Yes, replace the mouseEnter and mouseLeave event handlers that I defined in my Click Inserts Point sample with an adaptation of the code that is in the documentation for GraphObject.mouseEnter.
My question is how to show link points when hover over the link?
I can’t find “link.points.visible” property or so.
Plz send me code snippets or so. Thanks.
Yes, of course I know mouseEnter function.
myDiagram.linkTemplate = $(go.Link, { mouseEnter: function(e, link) { //how to show link points here? link.points.visible = true? I don't think there is 'visible' property // for points. }, }
Make sense?
In the mouseEnter event, how to show points???
Ah, yes, you don’t know about how to manipulate Adornments. OK:
mouseEnter: function(e, link) {
link.path.stroke = "rgba(30,144,255,0.2)";
var tool = e.diagram.toolManager.linkReshapingTool;
var ad = link.findAdornment(tool.name);
if (!ad) ad = tool.makeAdornment(link.path);
link.addAdornment(tool.name, ad);
},
mouseLeave: function(e, link, next) {
link.path.stroke = "transparent";
var tool = e.diagram.toolManager.linkReshapingTool;
if (next && next.part.category === tool.name) return;
link.removeAdornment(tool.name);
e.diagram.remove(deletePointButton);
},
Thanks. :)
And I found a issue in this demo: Minimal GoJS Sample
When I inserted a point and reshape link and deleted that point, the link ports remains same.
https://www.useloom.com/share/4717693452ae4a0fb35dc2215cddbb9c
I’d like to refresh only link, not nodes, so that its route would be nearest between nodes.
How to do this?
But it works when I try it. And it seems to work in your video. You’ll need to debug your code to see what is going on. Check the length of Link.points.