gojs 学习笔记
1. 创建新的画布
var $ = go.GraphObject.make;
this.diagram = $(go.Diagram, "myDiagramDiv", {
"undoManager.isEnabled": true， // 可以进行撤销和恢复操作
"clickCreatingTool.archetypeNodeData": { text: "Node", color: "white" }, // 点击空白处新增节点
});
2. 节点模板
this.diagram.nodeTemplate = $(
go.Node,
"Auto",
{
locationSpot: go.Spot.Center
},
$(
go.Shape,
"RoundedRectangle",
{
fill: "white", // the default fill, if there is no data bound value
portId: "",
cursor: "pointer", // the Shape is the port, not the whole Node
// allow all kinds of links from and to this port
fromLinkable: true,
fromLinkableSelfNode: true, // 是否可以自己连自己
fromLinkableDuplicates: true, // 是否可以连接相同的线
toLinkable: true,
toLinkableSelfNode: true,
toLinkableDuplicates: true
},
new go.Binding("fill", "color")
),
$(
go.TextBlock,
{
font: "bold 14px sans-serif",
stroke: "#333",
margin: 6, // make some extra space for the shape around the text
isMultiline: false, // don't allow newlines in text
editable: true, // allow in-place editing by user
overflow: go.TextBlock.OverflowEllipsis, // 超出隐藏显示 默认 OverflowClip
maxLines: 1,
width:90
},
new go.Binding("text", "text").makeTwoWay()
), // the label shows the node data's text
{
// this tooltip Adornment is shared by all nodes
toolTip: $(
"ToolTip",
$(
go.TextBlock,
{
margin: 4
}, // the tooltip shows the result of calling nodeInfo(data)
new go.Binding("text", "", nodeInfo)
)
),
// this context menu Adornment is shared by all nodes
contextMenu: partContextMenu
}
);
3.
this.diagram.linkTemplate = $(
go.Link,
{
toShortLength: 3,
relinkableFrom: true,
relinkableTo: true,
// curve: go.Link.Bezier , // 曲线
// routing: go.Link.AvoidsNodes // 绕行节点
}, // allow the user to relink existing links
$(
go.Shape,
{
strokeWidth: 2
},
new go.Binding("stroke", "color")
),
$(
go.Shape,
{
toArrow: "Standard",
stroke: null
},
new go.Binding("fill", "color")
),
);
