@ahmetgundogdu wrote:
I’m using gojs go.Link.Bezier. But I have some problems when using this link type. For example, when I link the link to the next note, the link does not become flat.
As seen, it is really hard to make the link straight.
Does go.Link.Bezier have a snap on this link type?
The gif at the bottom is really easy to use as seen in
Is it possible to do this in gojs?
can i do like here
Posts: 1
Participants: 1
@mithun wrote:
Hi,
I am using the ForcedDirectedLayout and I have bound the location to viewData using the following line :
new go.Binding("location", "viewData", go.Point.parse).makeTwoWay(go.Point.stringify).We save the position of the nodes in the map using an API that saves my viewData into the DB.
But the problem is when I reload the map, I am getting the right viewData from DB, but goJs after reading the viewData, is shrinking all the nodes in the Map.
Even though I have moved two nodes far away and have stored the location, these nodes are coming closer when I reload it back.
Is there any config I am missing? Can you please help me with this?
Posts: 1
Participants: 1
@ahmetgundogdu wrote:
My temporaryLink Template:
go.Shape.defineArrowheadGeometry("CustomArrowHead", go.Geometry.parse("M0.854,7.854C0.756,7.951,0.628,8,0.5,8S0.244,7.951,0.146,7.854c-0.195-0.195-0.195-0.512,0-0.707L3.293,4L0.146,0.853 c-0.195-0.195-0.195-0.512,0-0.707s0.512-0.195,0.707,0l3.5,3.5c0.195,0.195,0.195,0.512,0,0.707", true)); this.diagram.toolManager.linkingTool.temporaryLink = goMake(go.Link, go.Link.Bezier, { fromEndSegmentLength: 50, toEndSegmentLength: 90, toShortLength: 0.5, adjusting: go.Link.End, zOrder: -1 }, goMake(go.Shape, // the highlight shape, normally transparent { isPanelMain: true, strokeWidth: 2, stroke: "transparent" }), goMake(go.Shape, "RoundedRectangle", // the link path shape { isPanelMain: true, strokeWidth: 1, stroke: "#777" } ), goMake(go.Shape, // the arrowhead { toArrow: "CustomArrowHead", strokeWidth: 0, fill: "#777" } ) );initially the link appears too long and creates a bad appearance
how to fix it?
Picture 1:
I want it to be like picture 2. As you can see here the link length is very smooth
Picture 2:
Posts: 1
Participants: 1
@ee0jmt wrote:
Hi,
GoJs Version: 2.0.17
I am using GoJs within the durandal framework (which uses requirejs) It all works fine until the project is minimized and then I get an error stating gojs is undefined. I have seen the example using gojs and require and everything is set up correctly.
If I remove gojs from the requirejs “define” gojs appears to be in the global scope. and the project works after being minimized. However when I do this the project no longer works during development (not minimized).
I have seen some similar forum posts about a similar issue with aurelia.
I am using several other libraries in the project and don’t have the problem. What is the solution?
Posts: 1
Participants: 1
@ahmetgundogdu wrote:
link breaks in the doNoLink event.
temporaryLink and linkTemplate edited by my previous topicdoNoLink Event:
doNoLink(fromnode?: go.Node, fromport?: go.GraphObject, tonode?: go.Node, toport?: go.GraphObject) { setTimeout(() => { this.tempLink = { from: fromnode.key, fromPort: fromport.name.replace("_H", ""), linkConfig: { color: "#2b5887", text: "Send" } as ILinkConfig }; this.diagram.startTransaction("Add Node Temp"); this.documentPoint = { x: this.diagram.lastInput.documentPoint.x, y: this.diagram.lastInput.documentPoint.y }; // Add Node Temp let tempData: IFlowItemBase = { name: "Product" } this.setConfigurationDroppedData(tempData); tempData.key = LinkDrawnHelperNodeKey; tempData.category = "TemporaryNode"; tempData.nodeConfig.location = { x: this.documentPoint.x, y: this.documentPoint.y } this.diagram.model.addNodeData(tempData); // Add Node Temp // Add Node Link let fromPortName = fromport.name.replace("_H", ""); let toLinkName: string; if (fromPortName == 'R') { toLinkName = 'L'; } else if (fromPortName == 'T') { toLinkName = 'B'; } else if (fromPortName == 'L') { toLinkName = 'R'; } else if (fromPortName == 'B') { toLinkName = 'T'; } let tempTemporaryLink: any = { from: fromnode.key, to: LinkDrawnHelperNodeKey, fromPort: fromPortName, toPort: toLinkName, linkConfig: { id: 0, color: "#777" } as ILinkConfig }; (this.diagram.model as any).addLinkData(tempTemporaryLink); // Add Node Link this.setState({ lastLinkFromTypeName: fromnode.data.typeName }) this.openUnKnownNodeSelector(this.diagram.lastInput.viewPoint.x, this.diagram.lastInput.viewPoint.y); }, 100); }TemporaryNode:
makePort(name: string, align: any, spot: any, output: any, input: any) { var horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom); return goMake(go.Shape, { fill: "transparent", // changed to a color in the mouseEnter event handler strokeWidth: 0, // no stroke width: horizontal ? NaN : 8, // if not stretching horizontally, just 8 wide height: !horizontal ? NaN : 8, // if not stretching vertically, just 8 tall alignment: align, // align the port on the main Shape stretch: (horizontal ? go.GraphObject.Horizontal : go.GraphObject.Vertical), portId: name, // declare this object to be a "port" fromSpot: spot, // declare where links may connect at this port fromLinkable: false, // declare whether the user may draw links from here toSpot: spot, // declare where links may connect at this port fromLinkableSelfNode: false, fromLinkableDuplicates: true, toLinkableSelfNode: false, toLinkableDuplicates: true }, new go.Binding("toLinkable", "", this.bindNodeToLinkable.bind(this)) ); } this.diagram.nodeTemplateMap.add("TemporaryNode", goMake(go.Node, "Spot", { selectionAdorned: false, movable: false, locationObjectName: "Shape", locationSpot: go.Spot.Center }, new go.Binding("location", "", this.bindShapeLocation), goMake(go.Panel, "Spot", goMake(go.Panel, "Spot", { name: "Shape" }, goMake(go.Picture, { source: unknownSelectorImage }), new go.Binding("desiredSize", "", this.bindShapeSize).makeTwoWay(this.converterShapeSize), ), this.makePort("T", go.Spot.Top, go.Spot.TopSide, false, true), this.makePort("L", go.Spot.Left, go.Spot.LeftSide, false, true), this.makePort("R", go.Spot.Right, go.Spot.RightSide, false, true), this.makePort("B", go.Spot.Bottom, go.Spot.BottomSide, false, true) ) ));Link Template:
createLinkTemplate() { this.diagram.linkTemplate = goMake(go.Link, { curve: go.Link.Bezier, fromEndSegmentLength: 20, toEndSegmentLength: 50 }, { selectionAdornmentTemplate: goMake(go.Adornment, goMake(go.Shape, { isPanelMain: true, stroke: "dodgerblue", strokeWidth: 1 }), goMake(go.Shape, { toArrow: "CustomArrowHead", fill: "dodgerblue", stroke: null }) ) }, new go.Binding("points").makeTwoWay(), goMake(go.Shape, // the highlight shape, normally transparent { isPanelMain: true, strokeWidth: 2, stroke: "transparent", name: "HIGHLIGHT", }), goMake(go.Shape, "RoundedRectangle", // the link path shape { isPanelMain: true, strokeWidth: 1 }, this.makeSubLinkBinding("stroke", "color") ), goMake(go.Shape, // the arrowhead { toArrow: "CustomArrowHead", strokeWidth: 0 }, this.makeSubLinkBinding("fill", "color"), this.makeSubLinkBinding("stroke", "color") ), goMake(go.Panel, "Auto", { _isLinkLabel: this.findConfigDiagram("linkConfig", "isDraggableLinkLabel"), visible: false }, goMake(go.Shape, "RoundedRectangle", // the label background, which becomes transparent around the edges { name: "linkTextBlockBackground" }, this.makeSubLinkBinding("fill", "textBackgroundColor"), this.makeSubLinkBinding("stroke", "textBackgroundColor"), this.makeSubLinkBinding("visible", "isShowMouseOver") ), goMake(go.TextBlock, "transition", // the label text { name: "linkTextBlock", textAlign: "center", isMultiline: false, font: "6pt sans-serif", margin: new go.Margin(2, 2, 1.41, 2), editable: true, // enable in-place editing }, // editing the text automatically updates the model data this.makeSubLinkBinding("isUnderline", "textIsUnderline"), this.makeSubLinkBinding("stroke", "textColor"), this.makeSubLinkBinding("textAlign", "textAlignment") ) ) ); this.diagram.toolManager.linkingTool.temporaryLink = goMake(go.Link, { curve: go.Link.Bezier, fromSpot: go.Spot.Right, toSpot: go.Spot.None, fromEndSegmentLength: 20, toEndSegmentLength: 50 }, goMake(go.Shape, "RoundedRectangle", { isPanelMain: true, strokeWidth: 1, stroke: "#777" } ), goMake(go.Shape, { toArrow: "CustomArrowHead", strokeWidth: 0, fill: "#777" }) ) }
Posts: 1
Participants: 1
@rashedkoutayni wrote:
Hi,
I have extended the link data arraymyDiagram.model.linkDataArrayin the flowchart example by adding one additional column that contains the value of a link label. For example, a row in the new array (calledmyLinkDataArray) looks like:
{from: -2, to: -10, points: E, __gohashid: 1696, 'link text'}
Now I would like to display the link text on the link itself in the diagram. I tried to do this withmyDiagram.model.setDataPropertybut unfortunately I didn’t know how to do it.
Would you please advise on how to iterate over the new link arraymyLinkDataArrayand show the link label above each corresponding link?
Thanks !
Posts: 1
Participants: 1
@jothibaskaran wrote:
Hi, I am using bezier curves for linking the nodes in my diagram. I have not provided routing: jumpNodes since we had to maintain the shape of the bezier curve. This is my link node template:
$(go.Link, // the whole link panel { // routing: go.Link.AvoidsNodes, curve: go.Link.Bezier, curviness: 200, corner: 10, adjusting: go.Link.Stretch, relinkableFrom: true, relinkableTo: true, reshapable: true, resegmentable: true, deletable: false, contextMenu: $('ContextMenu', $('ContextMenuButton', { 'ButtonBorder.fill': 'white', '_buttonFillOver': 'lightgray' }, $(go.TextBlock, 'Delete', { margin: 12 } ), { click: (e, obj) => { e.diagram.commit(function(d) { d.remove(obj.part.adornedPart); }); this.propertiesFlagEvent.emit(''); this.save(); }, }, ) ) }, $(go.Shape) // the arrowhead );I would like to retain the same shape of the curve. But i do not want the links to pass over a component in its path.
How can i do this?
Posts: 1
Participants: 1
@arjun-now wrote:
Hello! This is my first post here. I tried googling but can not see anyone else asking this same question so here we go. In a tree diagram with nodes and links, I removed a node and its link. The other nodes that lost dependency do not update/refresh. This is the issue I am trying to solve. Below is an example.
eg:
Original Diagram: A* -> B*
After removing node B and link: A*
Expected diagram after removing node B and link: AA: is a node with no links
A* is a node that has a linkpsuedo code:
startTransaction
removeNodeData
removeLinkDataCollection [removes link between A and B]
addLinkDataCollection [add a link with ‘from’ as node A and ‘to’ as undefined]
endTransaction
Posts: 3
Participants: 3
@ty wrote:
Hi, Team!
I built diagram and I’m getting this error:Uncaught TypeError: Cannot read property 'class' of null at Function.Z.fromJSON.Z.fromJson (go.js:1739) at HTMLDocument.<anonymous> (builder.js:675) at j (jquery.js:3099) at Object.fireWith [as resolveWith] (jquery.js:3211) at Function.ready (jquery.js:3417) at HTMLDocument.I (jquery.js:3433)I’m getting this error when I’m running “funnelDiagram.model = go.Model.fromJson(json);”.
This is model json link: https://jsonformatter.org/ca8f1aI"m sure all other code parts are correct. In my opinion, I’m getting this error because of json data(please focus on “notes” field and you can see that includes html-formatted string with css such as font-family, font-color, height etc. This data comes from user’s copy-paste formatted string from other source into text editor that I built and user saves diagram).
But strange thing is that I get this error on Ubuntu 16.04 server only, while it works well on localhost xampp server (on Windows).
I set “MEDIUMTEXT” as datatype for model json data field in mysql db.Please help me with this. It’s killing my time.
Regards.
Posts: 3
Participants: 2
@ahmetgundogdu wrote:
The colors of the start and end arrows are darker.
such an image occurs when I look away
What do you think is the reason for this?
such a problem does not appear when I zoom
My linkTemplate :
this.diagram.linkTemplate = goMake(go.Link, { curve: go.Link.Bezier, toShortLength: 0.5, fromEndSegmentLength: 20, toEndSegmentLength: 50, zOrder: -1 }, { selectionAdornmentTemplate: goMake(go.Adornment, goMake(go.Shape, { isPanelMain: true, stroke: "dodgerblue", strokeWidth: 1 }), goMake(go.Shape, { toArrow: "CustomArrowHead", fill: "dodgerblue", stroke: null }) ) }, new go.Binding("points").makeTwoWay(), goMake(go.Shape, // the highlight shape, normally transparent { isPanelMain: true, strokeWidth: 2, stroke: "transparent", name: "HIGHLIGHT", }), goMake(go.Shape, "RoundedRectangle", // the link path shape { isPanelMain: true, strokeWidth: 1 }, this.makeSubLinkBinding("stroke", "color") ), goMake(go.Shape, // the arrowhead { toArrow: "CustomArrowHead", strokeWidth: 0 }, this.makeSubLinkBinding("fill", "color"), this.makeSubLinkBinding("stroke", "color") ), goMake(go.Panel, "Auto", { _isLinkLabel: this.findConfigDiagram("linkConfig", "isDraggableLinkLabel"), visible: false }, goMake(go.Shape, "RoundedRectangle", // the label background, which becomes transparent around the edges { name: "linkTextBlockBackground" }, this.makeSubLinkBinding("fill", "textBackgroundColor"), this.makeSubLinkBinding("stroke", "textBackgroundColor"), this.makeSubLinkBinding("visible", "isShowMouseOver") ), goMake(go.TextBlock, "transition", // the label text { name: "linkTextBlock", textAlign: "center", isMultiline: false, font: "6pt sans-serif", margin: new go.Margin(2, 2, 1.41, 2), editable: true, // enable in-place editing }, // editing the text automatically updates the model data //new go.Binding("text", "", this.bindLinkText).makeTwoWay(this.converterLinkText), //new go.Binding("font", "", this.bindLinkTextFont).makeTwoWay(), //new go.Binding("isUnderline", "", this.bindLinkTextUnderline).makeTwoWay(), //new go.Binding("stroke", "", this.bindLinkTextColor).makeTwoWay(), //new go.Binding("textAlign", "", this.bindLinkTextAlignment).makeTwoWay(), //new go.Binding("visible", "", this.bindLinkTextShow).makeTwoWay(), //new go.Binding("font", "", this.bindShapeTextFont) this.makeSubLinkBinding("text", "text"), this.makeSubLinkBinding("isUnderline", "textIsUnderline"), this.makeSubLinkBinding("stroke", "textColor"), this.makeSubLinkBinding("textAlign", "textAlignment") ) ) );
Posts: 1
Participants: 1
@ahmetgundogdu wrote:
What I did I could not center the link tag
How do I center Label ?
My linkTemplate :
this.diagram.linkTemplate = goMake(go.Link, { curve: go.Link.Bezier, toShortLength: 0.5, fromEndSegmentLength: 20, toEndSegmentLength: 50, zOrder: -1 }, goMake(go.Shape), goMake(go.Shape, { toArrow: "Standard" }), goMake(go.Panel, "Auto", { segmentIndex: 1, segmentFraction: 0.5 }, goMake(go.Shape, { fill: "yellow", stroke: "gray" }), goMake(go.TextBlock, { margin: 3, text: "Test" }, new go.Binding("text", "text")) ) );
Posts: 1
Participants: 1
@Abhishek wrote:
Hi,
End goal don’t want to create a part using polygon drawing tool which can overlap on each other hence on creation I want to check if the bounds intersect with any other existing part.
Currently when I am getting a geo for Polygon Drawing it is always giving geo path in respect to current rectangle selection and not in respect to its placement in diagram. Hence it always has 0,0 starting coordinates. I want to calculate the bounds of the part that will be created how can I do that.
Currently I have modified the polygon drawing tool to throw part created event so that I can get the part created so I can get it’s detail as it doesn’t has an override like dragCreating tool for insert part which gives the bound of the part being created.And if I get the node using the getNodeForKey at this time the part is not completed and it doesn’t give correct actualBounds.
Posts: 4
Participants: 2
@andrei wrote:
Hello,
I’m using the swim lanes example for a diagram https://gojs.net/latest/samples/swimLanes.html
I need to build a really wide diagram, but the lane max-width seems to be 9999
Is there a way to increase that limit?
Thanks,
Andrei
Posts: 3
Participants: 2
@jothibaskaran wrote:
Hi,
When im dragging a node from the palette onto the diagram I want it to have an opacity of 0.5 until I drop it. I achieved that by using diagram.findLayer(‘Tool’).opacity = 0.5. It currently looks like this:
The problem is that I have a context menu defined on the hamburger menu in each node. But this opacity is affecting that menu as well. Even my context menu has an opacity of 0.5 due to this, as seen below:
How can I prevent this?
Posts: 1
Participants: 1
@jothibaskaran wrote:
Hi,
When I draw a link from one node’s output port to the next node’s input port, I want the port and the link arrowhead to be highlighted when they come in close proximity. I have been able to achieve something as seen below:
This is the code snippet for it:
commonLinkingToolInit(tool) { tool.portGravity = 30; tool.temporaryToPort.geometryString = 'M14.512,11.479C18.28,18.127,16.243,28.3,16.243,28.3s-1.635,5.889-5.54,9.181S.626,41.463.626,41.463L1.168,1.7S10.743,4.831,14.512,11.479Z'; tool.temporaryToPort.width = 26; tool.temporaryToPort.height = 50; tool.temporaryToPort.stroke = 5; tool.portTargeted = (realnode, realport, tempnode, tempport, toend) => { if (toend && realport !== null) { const diagram = realnode.diagram; this.highlight(realport); tempport.stroke = '#00dfcc'; tempport.strokeWidth = 3; tempport.height = 50; tempport.width = 26; tempnode.location = diagram.lastInput.documentPoint.copy(); } else { this.lowlight(); tempport.stroke = null; } }; }But as you can see there is a bit of an offset from the actual arrowhead. The desired behaviour is that the arch of the connector head should have a highlight.
In the same was only the inner arch of the input port should also get the highlight. I dont want it to be a closed figure as seen above.How can i do that?
Posts: 1
Participants: 1
@STMax wrote:
Hi GoJS Team,
We would like to achieve the functionality as shown in the attached image:
- Show and hide bubble with list of nodes/shapes/parts
- should be able to drag and drop each node (purple and blue colored ones) from inside the bubble on to another bubble attached to a different Node elsewhere on the canvas.
Could you please provide a best way to implement this if it is possible? Please guide me to any Sample if you have.
Thank you!
Posts: 1
Participants: 1
@sibisasvin wrote:
I have write a click event that will create a new node. The problem is I can’t able to place the node in a particular position. It always ended up in the last of the tree as an orphanage. Is there a way to add an orphanage node inside an tree structure.
(however what i need to do is create a sticky note when i click a node. To do that i need to create an separate node when i click an actual node, the thing is since it is an orphan it goes down the tree and place as an separate one )
Posts: 2
Participants: 2
@simon wrote:
GoJS 2.1 Beta
Available at: https://gojs.net/beta
Install with npm:
npm i gojs@betaNew Animation Capabilities
GoJS 2.1 contains a number of new features to animate different components of your Diagram.
![]()
See the Intro page on Animation and the Custom Animation extension for more details and examples.
- New class: AnimationTrigger. These describe how to automatically animate a property on a GraphObject when it changes value.
- New class: Animation. This class lets you declaratively setup custom animations, with options for indefinite animations.
- New AnimationManager options, including the ability to define custom animation effects to animate with AnimationManager.defineAnimationEffect
- New Animation samples and samples modified to use new Animation features:
- Custom Animation - New Extension: Demonstrating a number of Node creation/deletion animations, linking animations, and more.
- Tree Load Animation - New Sample: recursive animation upon model load.
- Flowchart - Initial animation is disabled in favor of a custom fade-in animation.
- Data Visualization - Nodes now move using an AnimationTrigger.
- Kitten Monitor - Kittens now move using an AnimationTrigger.
- Process Flow - An indefinite Animation of the Links’ strokeDashArray.
- Shop Floor Monitor - Link color changes now use an AnimationTrigger.
Improved Support For Data Synchronization
GoJS 2.1 contains some new methods to ease integration of GoJS diagrams in applications that maintain their own data, particularly React apps.
See the Intro page on using GoJS with React and the gojs-react example project for details and examples. Also see gojs-react, a package containing React Components for GoJS Diagrams, Palettes, and Overviews.
- New method: Model.toIncrementalData. This method outputs an IncrementalData object containing changes that occurred within a Transaction, similar to the existing method, Model.toIncrementalJson. It can be used to keep outside data synchronized with the GoJS model.
- New methods: Model.mergeNodeDataArray and GraphLinksModel.mergeLinkDataArray. These methods are used to merge outside data changes into the GoJS model.
- New method: Model.cloneDeep. This method can be used to make a deep copy of an object, which may be useful to ensure GoJS doesn’t share references with outside state. It is also used within Model.toIncrementalData to ensure IncrementalData’s list of modified objects won’t contain references to the model’s data objects.
Other Changes for 2.1.0:
- Added DoubleTreeLayout to the extensions and extensionsTS directories. This is now used by both the Double Tree and Double Tree JSON samples.
- Updated the sequencing of “ChangingSelection” and “ChangedSelection” DiagramEvents to be outside of transactions for commands and tools. Exceptions include “ChangingSelection” being called during “Drag” and “Linking” operations when drag-copying or inserting a link. With “ChangedSelection” occuring after a transaction completes, any changes will be complete and can be used in the listener.
- CommandHandler.zoomToFit now animates by default.
- Improved the ContextMenuTool.defaultTouchContextMenu’s “Paste” command to use the ContextMenuTool.mouseDownPoint rather than the Diagram.lastInput’s InputEvent.documentPoint.
- Added new property, Diagram.opacity. This may be useful for fade-in/out animations, or visual indication of a disabled Diagram.
- Added new method, Diagram.findLinkForKey, which will look for a link corresponding to a model’s link data object’s unique key. This will only return a link when using a GraphLinksModel with GraphLinksModel.linkKeyProperty set to a non-empty string.
- Model.applyIncrementalJson now throws an error if model properties (eg. nodeKeyProperty) included in the JSON don’t match the existing model. This check only includes properties included in the output from Model.toIncrementalJson.
- Added new methods, Picture.reload, which reloads a Picture source in case the file on the server has changed, and Picture.redraw which redraws the picture, and can be useful to update the Picture if the source is backed by an HTML Canvas or HTML Video Element.
- Added new samples:
- SVG Data URL - Export SVG with Base64 hrefs instead of the Picture.source URL
Install with npm:
npm i gojs@beta
Posts: 2
Participants: 1
@saraLis wrote:
When the page loads, I used coordinate loading (isinitial=false,isongoing=false). When the loading is complete, I want to use gridlayout(isiinitial=true), but it doesn’t work.
Posts: 1
Participants: 1
