【go.js 常用api管理】

苏涛

2023-12-01

画布定义

const diagram = $(go.Diagram, this.$refs.myDiagram,
	{
		// 画布初始位置
		initialContentAlignment: go.Spot.Center,
		// 画布位置,定义后就不能拖动画布了
		contentAlignment:go.Spot.Center,
		// 自定义初始坐标
		initialPosition: new go.Point(0, 0),
		// 是否只读
		isReadOnly: false,
		// 画布比例
		scale:1.5,
		// 画布比例 go.Diagram.Uniform(自适应) / Diagram.UniformToFill(自适应) / go.Diagram.None(不自适应)
		autoScale: go.Diagram.Uniform,
		// 画布最小比例
		minScale: 0.5,
		// 画布最大比例
		maxScale:2.0,
		// 禁止移动节点
		allowMove:false,
		// 禁止复制
		allowCopy: false,
		// 禁止选中
		allowSelect:false,
		// 禁止删除
		allowDelete:false,
		// 禁止缩放
		allowZoom: false,
		// 禁止水平拖动画布 禁止水平滚动条
		allowHorizontalScroll: false,
		// 禁止垂直拖动画布 禁止垂直滚动条
		allowVerticalScroll: false,
		// 获取或设置用户是否可以进行就地文本编辑
		allowTextEdit: false,
		// 画布节点连线定义  CycleDestinationTree /  CycleNotUndirected / CycleNotDirected / CycleSourceTree / CycleAll
		// CycleDestinationTree:  只允许有一个父节点 如(禁止 a->c, b->c)
		// CycleNotUndirected: 节点的有效链接不会在图中产生无向循环 如(禁止a->b->c->a)
		// CycleNotDirected:  节点的有效链接不会在图中产生有向循环
		// CycleSourceTree: 一个节点只允许有一个子节点并且没有定向循环 如(禁止a->b,a->c)
		// CycleAll: 默认无限制
		validCycle: go.Diagram.CycleDestinationTree,
		// 禁止撤销和重做
		"undoManager.isEnabled": false,
		// 画布初始化动画时间
		"animationManager.duration": 600,
		// 禁止画布初始化动画
		"animationManager.isEnabled": false,
		// 显示网格
		"grid.visible":true,
		// 网格大小
		"grid.gridCellSize":new go.Size(15,15),
		// 禁止鼠标拖动区域选中
		"dragSelectingTool.isEnabled" : false,
		// 允许Ctrl-G调用groupSelection命令
		"commandHandler.archetypeGroupData": { 
				text: "Group",
				 isGroup: true, 
				 color: "blue"
		 },
		 // 键盘复制命令
		 "commandHandler.copiesTree": true,
		 // 键盘删除命令
		 "commandHandler.deletesTree": true,
		 // 提示显示的速度有多快
		 "toolManager.hoverDelay": 100,
		 // 鼠标滚轮缩放而不是滚动
		 "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
		 // 拖动用于移动和复制
		 "draggingTool.dragsTree": true,
		 // 允许在后台双击创建一个新节点
		 "clickCreatingTool.archetypeNodeData": { text: "Node" },
		 // 布局
		 layout: {}
	}
)

布局

网格布局 go.GridLayout
力导向布局 go.ForceDirectedLayout
树形布局 go.TreeLayout
径向布局(需要引RadialLayout.js) RadialLayout

layout: $(go.GridLayout,
{
	// 设置从小到大排序,可以从写方法，自定义算法进行布局
	comparer: go.GridLayout.smartComparer,
	// 设置节点间隔
	spacing: go.Size.parse("20 20"),
})

画布的监听事件

线生成事件 LinkDrawn
线重新连接事件 LinkRelinked
删除后事件 SelectionDeleted
删除前事件 SelectionDeleting
节点移动事件 SelectionMoved

diagram.addDiagramListener("SelectionDeleted", function(e) {
	e.subject.each(function(n){
        console.log('当前节点-----',n.data.key);
    });
})

node api

node api文档

diagram.nodeTemplateMap.add("有多个节点模板时用来与数据中的'category'属性进行匹配"
	$(go.Node,'元素布局定义',{
		// 公用属性
		// 节点继承Part的属性定义
	},
		$(
            go.Panel, // 类似创建一个div的
              'Auto',
              new go.Binding("location", "loc", go.Point.parse),
              $(
                  go.Shape,
                  'RoundedRectangle', // 设置div形状
                  {
                      fill: '#000', // 背景色
                      stroke: '#fff', // 边框色
                      width: 200, // div 高宽
                      height: 120,
                  },
                  // 动态修改，值来源数据里面的color属性
                  new go.Binding("fill", "color")
              ),
              {
              	click:function(e, node) {},
              	// 鼠标样式
              	cursor:"pointer"
          	  }
	)
)

元素布局定义：

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

公共属性：

属性	描述	属性值
minSize	`最小范围'`	new go.Size(50, 200)
maxSize	`最大范围'`	new go.Size(50, 200)
width	`宽`	–
height	`高`	–
margin	`外边距`	new go.Margin(2, 0)
alignment	`元素位置`	go.Spot.BottomLeft（BottomRigh、TopLeft、TopRight、Left、Right、Top、Bottom、Center）
defaultAlignment	`子元素位置`	同上
visible	`设置是元素是否可见`	true、false

节点属性：

属性	描述	属性值
zOrder	节点显示层级	默认NaN，按创建顺序排序
deletable	是否可删除	true、false
movable	是否可移动	true、false
selectable	是否可选择	true、false
selectionChanged	`选中状态改变时调用的函数`	function(node)
selectionAdorned	显示选中边框	true、false
selectionAdornmentTemplate	自定义选中边框模版	`$(go.Adornment, 'auto',$(go.Shape,{}),$(go.Placeholder))`
isShadowed	是否显示阴影	true、false
shadowColor	阴影的颜色	默认gray
shadowOffset	阴影的位置偏移	new go.Point(6, 6)
copyable	是否可复制	true、false
location	节点坐标
minLocation	节点坐标最小位置
maxLocation	节点坐标最大位置
isSelected	是否选中	true、false（操作型属性无法在模板定义，只能在节点生成后操作）
reshapable	是否重绘（改变shape形状边界时使用）	true、false
resizable	是否调整大小	true、false
resizeCellSize	调整的范围
rotatable	是否旋转	false,true
port	线端口设置
avoidable	线绕开经过的节点 (Link.routing 为AvoidsNodes才能使用)	true / false
avoidableMargin	线绕开经过的节点的边距	new go.Margin(6,6,6,6)
linkConnected	`节点线链接后调用的函数`	function(node, link, port)
linkDisconnected	`节点线断开后调用的函数`	function(node, link, port)

isTreeExpanded	是否展开树节点的子节点	false,true
wasTreeExpanded	获取或设置从该节点开始的子节点是否被父节点上的expandTree调用折叠	false,true
isTreeLeaf	获取节点有没有子节点	false,true
treeExpandedChanged	`isTreeExpanded改变时调用的函数`	function(node)

go.TextBlock(文本框元素)：

属性	描述
stroke	文字 (边框)颜色
font	字体
editable	是否可编辑
textAlign	文本位置
minSize	文本域最小范围
maxSize	文本域最大范围
maxLines	文本显示的最大行数
isMultiline	是否允许换行
overflow	超出范围处理（go.TextBlock.OverflowEllipsis 显示缩略号、go.TextBlock.OverflowClip 裁切）

节点、线事件


选中改变事件	selectionChanged（放在node层下面）
双击事件	doubleClick
单击事件	click
鼠标进入事件	mouseEnter
鼠标离开事件	mouseLeave
鼠标悬停事件	mouseHover

link Api

diagram.linkTemplateMap.add("",
	$(go.Link,{
		// 链路路由应避开节点
		 routing: go.Link.AvoidsNodes，
		  corner: 10，
		 curve: go.Link.JumpGap 
	 }, 
	 // 记录拐点数据
	 new go.Binding("points").makeTwoWay();
	 // 线
	$(go.Shape),
	// 箭头
	$(go.Shape, { 
		toArrow: "Standard" 
	})
	)
) ;

routing 路由选择

属性	属性值
AvoidsNodes	避免节点
Normal	正常
Bezier	指示链接路径使用贝塞尔曲线
OrientAlong	图形对象的角度始终与连接图形对象所在段的链接路径的角度相同，此方向用于箭头
Orthogonal	每个段是水平或垂直的

Link 属性

属性	属性值
corner	两条线段彼此正交时相邻线段的圆角程度（number）
curve	获取或设置从路径的点生成路径的方式（值必须是 None, Bezier, JumpGap, JumpOver）
curviness	获取或设置当线弯曲类型 curve 为 Bezier 时或同一两个端口之间存在多个链接时，控制点偏移的距离（number）
fromEndSegmentLength	从末端段长度（number）
fromSpot	获取或设置此链接应在从端口处连接的位置
toNode	获取或设置此链接转到的节点

go.js 监听事件

diagram.addDiagramListener('事件名',  function(e,obj) {

})
// 如：
diagram.animationManager.initialAnimationStyle = go.AnimationManager.None;
diagram.addDiagramListener('InitialAnimationStarting', function(e) {
	var animation = e.subject.defaultAnimation;
	animation.easing = go.Animation.EaseOutExpo;
	animation.duration = 900;
	animation.add(e.diagram, 'scale', 0.1, 1);
	animation.add(e.diagram, 'opacity', 0, 1);
});

事件名	含义
InitialAnimationStarting	初始动画开始，default动画即将开始
AnimationStarting	动画开始
AnimationFinished	动画已完成
BackgroundSingleClicked	背景单击事件
BackgroundDoubleClicked	背景双击事件
BackgroundContextClicked	背景右键事件
ChangingSelection	更改选择
ChangedSelection	更改了选择
ClipboardChanged	剪贴板已更改
ClipboardPasted	剪贴板已暂停
DocumentBoundsChanged	文档边界已更改
ExternalObjectsDropped	(节点或线等)部件拖放生成事件，外部拖入触发
GainedFocus	获得键盘焦点
InitialLayoutCompleted	初始布局已完成
LayoutCompleted	整个图表布局已完成
LinkDrawn	线创建完成事件
LinkRelinked	线重新链接事件
ObjectSingleClicked	单击事件, 图形对象GraphObject上的单击
ObjectDoubleClicked	双击事件,图形对象GraphObject上的双击
ObjectContextClicked	右键事件,图形对象GraphObject上的右键
PartResized	Part大小改变事件（通过ResizingTool改变了一个GraphObject的大小）
PartRotated	Part旋转事件
SelectionMoved	拖动事件
SelectionCopied	复制事件
SelectionDeleting	删除前事件
SelectionDeleted	删除后事件
SelectionGrouped	新建组事件
SelectionUngrouped	删除组事件
SubGraphCollapsed	子图折叠事件
SubGraphExpanded	子图展开事件
TextEdited	文本快修改事件
TreeCollapsed	树折叠事件
TreeExpanded	树展开事件

监听数据变化

diagram.raiseChangedEvent(function(change, propertyname, obj, oldval, newval, oldparam, newparam){

});

基础事件

阻止键盘事件（添加自己的键盘绑定，重写commandHandler.doKeyDown 方法）

diagram.commandHandler.doKeyDown = function （） {
    var e = diagram.lastInput;
      var cmd = myDiagram.commandHandler;
      // 检查一下e.control或e.shift
      if (e.key === "T") { 
        if (cmd.canCollapseSubGraph()) {
          cmd.collapseSubGraph();
        } else if (cmd.canExpandSubGraph()) {
          cmd.expandSubGraph();
        }
      } else {
        // 调用base方法，不带参数(不调用其他的将会失效)
        go.CommandHandler.prototype.doKeyDown.call(cmd);
      }
  };

commandHandler指令

diagram.commandHandler.deleteSelection()  // Del删除
diagram.commandHandler.cutSelection()  // Ctrl-X 剪切
diagram.commandHandler.copySelection()  // Ctrl-C复制
diagram.commandHandler.pasteSelection()  // Ctrl-V粘贴
diagram.commandHandler.selectAll()  // Ctrl-A全选
diagram.commandHandler.undo()  // Ctrl-Z 取消
diagram.commandHandler.redo()  // Ctrl-Y重做
diagram.Diagram.scroll()  // 向上 & 向下 & 向左 & 向右 & 翻页 & 下页 & 首页 &结束（箭头键）
diagram.commandHandler.scrollToPart()  // 空格键 滚动到部件
diagram.commandHandler.decreaseZoom()  //  减号 缩小
diagram.commandHandler.increaseZoom()  // 加号 放大
diagram.commandHandler.resetZoom()  // 重置zoom
diagram.commandHandler.zoomToFit()  // 设置合适的图形大小
diagram.commandHandler.ungroupSelection()  // 取消组合
diagram.commandHandler.editTextBlock()  // 编辑
diagram.commandHandler.stopCommand()  // 取消

拖拽框选功能

diagram.toolManager.dragSelectingTool.box =
    $(go.Part,
      { layerName: "Tool", selectable: false },
      $(go.Shape,
        { name: "SHAPE", fill: null, stroke: "chartreuse", strokeWidth: 3 }
        )
     );

监听新拖拽到画布的节点

diagram.addModelChangedListener(function(evt) {
    // ignore unimportant Transaction events
    if (!evt.isTransactionFinished) return;
    var txn = evt.object;  // a Transaction
    if (txn === null) return;
    // iterate over all of the actual ChangedEvents of the Transaction
    txn.changes.each(function(e) {
      // ignore any kind of change other than adding/removing a node
      if (e.modelChange !== "nodeDataArray") return;
      // record node insertions and removals
      if (e.change === go.ChangedEvent.Insert) {
        console.log(evt.propertyName + " added node with key: " + e.newValue.key);
      } else if (e.change === go.ChangedEvent.Remove) {
        console.log(evt.propertyName + " removed node with key: " + e.oldValue.key);
      }
    });
  });

监听新拖拽的连线

diagram.addModelChangedListener(function(evt) {
    // ignore unimportant Transaction events
    if (!evt.isTransactionFinished) return;
    var txn = evt.object;  // a Transaction
    if (txn === null) return;
    // iterate over all of the actual ChangedEvents of the Transaction
    txn.changes.each(function(e) {
      // record node insertions and removals
      if (e.change === go.ChangedEvent.Property) {
        if (e.modelChange === "linkFromKey") {
          console.log(evt.propertyName + " changed From key of link: " +
                      e.object + " from: " + e.oldValue + " to: " + e.newValue);
        } else if (e.modelChange === "linkToKey") {
          console.log(evt.propertyName + " changed To key of link: " +
                      e.object + " from: " + e.oldValue + " to: " + e.newValue);
        }
      } else if (e.change === go.ChangedEvent.Insert && e.modelChange === "linkDataArray") {
        console.log(evt.propertyName + " added link: " + e.newValue);
      } else if (e.change === go.ChangedEvent.Remove && e.modelChange === "linkDataArray") {
        console.log(evt.propertyName + " removed link: " + e.oldValue);
      }
    });
  });

大小网格交替线

 grid: $(go.Panel, "Grid",
       $(go.Shape, "LineH", { stroke: "gray", strokeWidth: .5 }),
       $(go.Shape, "LineH", { stroke: "darkslategray", strokeWidth: 1.5, interval: 10 }),
       $(go.Shape, "LineV", { stroke: "gray", strokeWidth: .5 }),
       $(go.Shape, "LineV", { stroke: "darkslategray", strokeWidth: 1.5, interval: 10 })
     ),

查找该节点的下一级节点 , 双击节点可以拿到节点的 index

index.findNodesOutOf()

通过key值去查找节点

myDiagram.findNodeForKey(key).data //key值是节点的key

找当前节点的下一连线，上一连线是findLinksInto

index.findLinksOutOf.xc.n[0].zd //n是个数组，里面是所有线

更新节点数据，参数是你当前编辑的节点数据

myDiagram.model.updateTargetBindings(node.data)

限制palette拖拽区域，防止出现动态滚动条

autoScrollRegion：0,
hasVerticalScrollbar:false,
hasHorizontalScrollbar:false

获取页面选中的节点

myDiagram.selectedNode()

去除画布的蓝色默认border

canvas{
	border:0px;
	outline:none;
}

右键菜单（contextMenu）

右键菜单添加外边框

contextMenu: $("ContextMenu", "Auto",
    {
        background: "white",
    },
    $(go.Shape, "Rectangle",
        {
            stroke: "black",
            strokeWidth: 15,
        },
    ),
    $(go.Panel, "Vertical",
    	$("ContextMenuButton",
    	{
    			"ButtonBorder.fill": "white",
                  "_buttonFillOver": "#E9F5FF",
                   "_buttonFillPressed": "red",
                   visible: true,
                   desiredSize: new go.Size(100, 50)
    	},
    	 $(go.TextBlock, {
               text: "删除",
               textAlign: "center",
               verticalAlignment: go.Spot.Center,
          }),

ContextMenuButton样式

"ButtonBorder.fill" // 按钮背景填充
"ButtonBorder.stroke" // 按钮边框色
"ButtonBorder.strokeWidth" // 按钮边框条宽
"_buttonFillPressed" // 按钮按下背景填充色
"_buttonStrokePressed" // 按钮按下边框色
"_buttonFillOver" // 按钮悬停背景填充色
"_buttonStrokeOver" // 按钮悬停边框色

去除水印的方法是：在go.js文件中搜索关键字：7eba17a4ca3b1a8346
a.Kv=d[w.Jg(“7eba17a4ca3b1a8346”)]w.Jg(“78a118b7”);替换为a.Kv =function(){return true;}

【go.js 常用api管理】

画布定义

布局

画布的监听事件

node api

link Api

go.js 监听事件

基础事件

右键菜单（contextMenu）

相关阅读

相关文章

相关问答

相关文档