gojs常用API-节点定义

节点定义

node中文文档入口

公用属性

所有节点块定义都能通用的属性

属性	描述	属性值(NaN为自适应，其他值为举例)
minSize	最小范围	new go.Size(50, NaN)或new go.Size(50, 200)
maxSize	最大范围	同上
width	宽
height	高
margin	外边距	0或new go.Margin(2, 0)或new go.Margin(1, 0, 0, 1)
alignment	元素位置	如下，以此类推 go.Spot.BottomLeft 左下      go.Spot.BottomRight 右下    go.Spot.TopLeft 左上 go.Spot.TopRight 右上	go.Spot.Left go.Spot.Right go.Spot.Top go.Spot.Bottom
defaultAlignment	子元素位置	go.Spot.TopRight 右上
visible	设置是元素是否可见	false为不可见

节点属性定义

    继承使用Part 属性例子，从而定义节点是否可以删除选择之类的功能

myDiagram.nodeTemplate =
    $(go.Node,"Horizontal",//节点子元素布局定义
        { //节点继承Part的属性定义,例如
            movable:false,//禁止拖动
            deletable:false,//禁止删除
          //节点的属性定义也写在这
        },
        $(go.Panel,//节点面板定义
           "Auto", //节点面板子元素布局定义
           $(go.Shape,//节点形状
                //形状的基础属性设置，如下背景颜色
                { fill: "#1F4963" }
                ,new go.Binding("fill", "color")//
            )
        )//Panel块
    );

go.Node 部分属性列表

属性	描述	默认值
port	线端口设置
avoidable:false	线绕开经过的节点,不从节点穿过 Link.routing 为AvoidsNodes才能使用	默认true,false
avoidableMargin:  new go.Margin(12,12,12,12)	线绕开经过的节点的边距	默认new go.Margin(6,6,6,6)
linkConnected function(node, link, port) {}	节点线链接后调用的函数
linkDisconnected: function(node, link, port) {}	节点线断开后调用的函数
树节点才能使用的api
isTreeExpanded:false	是否展开子节点	默认true,false
wasTreeExpanded:true	获取或设置从该节点开始的子节点是否被父节点上的expandTree调用折叠。初始值为false。（基本没用到）
isTreeLeaf	获取节点有没有子节点
treeExpandedChanged:function(node){}	isTreeExpanded改变时调用的函数

go.Part 部分属性列表
PS：代码格式化我已经尽力了这文本编辑器 的排版有问题，也不能高亮其中一部分

属性	描述	属性值(NaN为自适应，其他值为举例)
zOrder:999	节点显示层级，越大越上面	默认NaN，按创建顺序排序，最先创建的在最底部
deletable:false	可删除的	默认true,false
movable:false	可移动的	默认true,false
selectable: false	可选择的	默认true,false
selectionChanged: function(node) {})	选中状态改变时调用的函数	//举例，例如选中节点时同时选中节点关联的线， //取消选中时取消选择节点关联的线 selectionChanged: function(node) { if(node.isSelected) { //获取节点关联的线 node.findLinksConnected().each(function(link) { link.isSelected=true; }); } else { //没选中 node.findLinksConnected().each(function(link) { link.isSelected=false; }); } }
selectionAdorned:false	显示选中边框	默认true,false
selectionAdornmentTemplate	自定义选中边框模版	selectionAdornmentTemplate: $(go.Adornment, "Auto", $(go.Shape, { fill: null, stroke: "deepskyblue", strokeWidth: 1.5, strokeDashArray: [4, 2] } ), $(go.Placeholder) );
isShadowed:true	显示阴影	默认false,true
shadowColor : "#ffda92",	阴影的颜色	默认gray
shadowOffset:new go.Point(3, 3),	阴影的位置偏移	默认为new go.Point(6, 6)
copyable:false	可复制的	默认true,false
location	节点坐标
minLocation: new go.Point(0, 0),	节点坐标最小位置	默认无限制
maxLocation: new go.Point(9999, 0),	节点坐标最大位置	默认无限制
isSelected:true	选中	默认fasle,true(操作型属性无法在模板定义，只能在节点生成后操作)例如 节点或线对象.isSelected=true;
reshapable:true	重塑(改变shape形状边界时使用，将影响节点大小)	默认false,true,
resizable: true	可调整大小的(手动调整节点大小时，节点内容显示区域时使用)	默认false,true,
resizeCellSize: new go.Size(10, 10)	可调整的范围	默认无限制
rotatable:true	可旋转的	默认false,true,

go.Panels(面板元素)例子代码

定义子元素在面板的的位置

Auto	子元素叠加布局
Vertical	子元素垂直布局
Horizontal	子元素水平布局
Spot	子元素Spot布局
Position	子元素坐标布局
Table	子元素表格布局

布局效果，如下图所示，灰色为Panels的边界范围

go.TextBlock(文本框元素)

属性	描述	属性值(NaN为不定义，其他值为举例)
stroke	文字颜色（边框颜色）	"#333333"或"red"
font	字体	"10pt helvetica, arial, sans-serif"
editable	文本可编辑	默认true,false
textAlign	文本位置
minSize	文本域最小范围，设置范围后才能控制换行和裁切
maxSize	文本域最大范围
maxLines	文本显示的最大行数
isMultiline	允许换行	默认true,false
overflow	文本超出范围处理方式, 设置文本域范围后该属性才会生效	go.TextBlock.OverflowEllipsis 显示缩略号 go.TextBlock.OverflowClip 裁切

节点、线事件定义

选中改变事件	selectionChanged	//注意放的是node 层回调参数也只有一个 $(go.Node, "Auto", { selectionChanged: function(node) { if(node.isSelected) { //选中 } else { //没选中 } } })
双击事件	doubleClick
单击事件	click
鼠标进入事件	mouseEnter
鼠标离开事件	mouseLeave
鼠标悬停事件 需要在画布定义悬停时间，该属性比较少用 myDiagram.toolManager.hoverDelay = 500 ;	mouseHover

用例

myDiagram.nodeTemplate =
    $(go.Node,"Horizontal",//节点子元素布局定义
        $(go.Panel,//节点面板定义
           "Auto", //节点面板子元素布局定义
           $(go.Shape,//节点形状
                //形状的基础属性设置，如下背景颜色
                { fill: "#1F4963" }
                ,new go.Binding("fill", "color")//
            ),
            {doubleClick : function(e, node){
                          // 双击事件,输出节点数据
                          console.log(node.part.data);
                          },
               cursor:"pointer"//改变鼠标样式变成小手
            }
        )//Panel块
    );