要创建一个Node,我们可以使用几个构建块类:
Shape,用于显示带颜色的预定义或自定义几何体
TextBlock,以各种字体显示(可编辑的)文本
Picture,显示图片
Panel,用于容纳其他物体的集合的容器,可以根据面板的类型(如桌子,垂直堆叠和拉伸容器)以不同的方式定位和调整尺寸
基础样例
myDiagram =
$(go.Diagram, "myDiagramDiv", // create a Diagram for the DIV HTML element
{
// allow double-click in background to create a new node
"clickCreatingTool.archetypeNodeData": { text: "Node", color: "white" },
// allow Ctrl-G to call groupSelection()
"commandHandler.archetypeGroupData": { text: "Group", isGroup: true, color: "blue" },
// enable undo & redo
"undoManager.isEnabled": true
});
myDiagram.nodeTemplate =
$(go.Node, "Horizontal", //Horizontal 图像与文字是水平关系 Vertical是垂直 Auto自动 Table表格
{ 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 true为允许换行 ,false不允许
editable: true // allow in-place editing by user 文字可修改
},
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: partContext