GO.JS api整理

画布定义
- 布局
- 画布的监听事件
- node api
- link Api
- go.js 监听事件
- 基础事件
- 右键菜单（contextMenu）

画布定义

go.js api【Constructors】

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.shiftif (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 eventsif (!evt.isTransactionFinished) return;var txn = evt.object;  // a Transactionif (txn === null) return;// iterate over all of the actual ChangedEvents of the Transactiontxn.changes.each(function(e) {// ignore any kind of change other than adding/removing a nodeif (e.modelChange !== "nodeDataArray") return;// record node insertions and removalsif (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 eventsif (!evt.isTransactionFinished) return;var txn = evt.object;  // a Transactionif (txn === null) return;// iterate over all of the actual ChangedEvents of the Transactiontxn.changes.each(function(e) {// record node insertions and removalsif (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管理】相关推荐

three.js 常用api
three.js 常用api 场景创建场景 var scene = new THREE.Scene(); 插入场景 scene.add(x); 相机正交投影相机 var camera = new ...
js find的用法_React常用库Immutable.js常用API
JavaScript 中的对象一般是可变的(Mutable),因为使用了引用赋值,新的对象简单的引用了原始对象,改变新的对象将影响到原始对象.如 foo={a: 1}; bar=foo; bar.a= ...
JS常用API（结合代码案例简单易懂）
API:应用程序编程接口,在JS下表示预定义的函数和方法,可以直接调用功能. 目录一.数组API 二.字符串API 三.MathAPI 如何学习一个API: 作用.参数.返回值学习数组API还 ...
原生js获取document_原生JS常用API整理
Anchor 对象:指HTML超链接 1.修改一个链接的文本,链接和target //html部分访问 Microsoft 改变超链接的文本和 URL.也改变 target 属性.target 属性 ...
介绍几款常用的在线API管理工具
在项目开发过程中,总会涉及到接口文档的设计编写,之前使用的都是ms office工具,不够漂亮也不直观,变更频繁的话维护成本也更高,及时性也是大问题.基于这个背景,下面介绍几个常用的API管理工具,方 ...
Atitit.跨语言 java c#.net php js常用的codec encode算法api 兼容性应该内置到语言里面...
Atitit.跨语言 java c#.net php js常用的codec encode算法api 兼容性应该内置到语言里面 1. 常用算法1 1.1. 目录2 1.2. 定义和用法编辑2 1.3 ...
【Day.js】一个轻量2KB的处理时间和日期的JavaScript 库，常用API记录与分享
关于时间的操作,一直在使用momentjs这个库.方便灵巧,功能强大.唯一的缺点:包大小为200K.精简的方案:如dayjs和miment. dayjs本身就是对标momentjs进行开发的: Day ...
Js常用数组常用API
JS对数组进行操作的常用API JS中提供了非常多的对数组进行操作的API,这里给出一些个人用到的API,仅供参考. 能够对原数组进行修改的API共有7个: shift,pop , unshift,p ...
从0到一开发微信小程序（6）—小程序常用API
文章目录其他相关文章 1.小程序API 1.1.路由 1.1.1.navigateTo(保留当前页面,跳转到应用内的某个页面,可以带参数) 1.1.2.redirectTo(关闭当前页面,跳转到应用 ...

【go.js 常用api管理】