关于 Gojs 你可能用到的方法 / gojs自定义 / gojs
2017-12-22 11:36
369 查看
以下归纳如果对你有帮助的话请点下文章下面的推荐,谢谢!
1、阻止键盘事件
2、监听连线完成事件
3、拖拽框选功能
4、监听新拖拽到画布的节点
5、监听新拖拽的连线
6、大小网格交替线
7、查找该节点的下一级节点
双击节点可以拿到节点的 index
//拿到节点的下一级节点,其中需要根据count值去分别判断count >1 和 count =1的情况 ,大于1的话,下级节点在 bi.qd ,需要遍历,等于1的话数据在 value.data
//拿到节点的上一级节点,其中需要根据count值去分别判断count >1 和 count =1的情况 ,大于1的话,上级节点在 bi.qd,需要遍历 ,等于1的话数据在 value.data
8、通过key值去查找节点
9、找当前节点的下一连线,上一连线是findLinksInto
10、更新节点数据,参数是你当前编辑的节点数据
11、限制palette拖拽区域,防止出现动态滚动条
12、监听数据变化
13、获取页面选中的节点
14、去除画布的蓝色默认border
canvas{border:0px;outline:none;}
其他可能需要注意的点:
1、一个节点下可以有多个 panel ,一个panel下可以用多个 go.Picture、go.Shape 、 go.TextBlock ,他们每个下面都有固定的属性值,可更改其样式,具体参考 api。
2、当页面新建了一些点和线后,选择重新布局的话可调用 myDiagram.layoutDiagram(true),然后图谱会自动布局。但是图谱上要加上 layout: $(go.LayeredDigraphLayout, { isInitial: false, isOngoing: false, layerSpacing: 50 }) 这一属性配置。
后续补充...
1、阻止键盘事件
myDiagram.commandHandler.doKeyDown = function () { var e = myDiagram.lastInput; // Meta(Command)键代替Mac命令的“控制” var control = e.control || e.meta; var key = e.key; //退出任何撤销/重做组合键,具体键值根据需求而定 if(control &&(key === 'Z' || key === 'Y'))return ; //调用没有参数的基础方法(默认功能) go.CommandHandler.prototype.doKeyDown.call(this); };
2、监听连线完成事件
myDiagram.addDiagramListener("LinkDrawn",function(e){ (e.subject.data ) //这是这个线条的数据 }) ; 同时要在linkTemplate 配置上 selectable: true,这样 再监听连线成功时 的回调中 调
myDiagram.commandHandler.deleteSelection() 才行 ,才能删除这个连线。
3、拖拽框选功能
myDiagram.toolManager.dragSelectingTool.box = $(go.Part, { layerName: "Tool", selectable: false }, $(go.Shape, { name: "SHAPE", fill: null, stroke: "chartreuse", strokeWidth: 3 }));
4、监听新拖拽到画布的节点
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); } }); });
5、监听新拖拽的连线
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); } }); });
6、大小网格交替线
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 }) ),
7、查找该节点的下一级节点
双击节点可以拿到节点的 index
index.findNodesOutOf()
//拿到节点的下一级节点,其中需要根据count值去分别判断count >1 和 count =1的情况 ,大于1的话,下级节点在 bi.qd ,需要遍历,等于1的话数据在 value.data
index.findNodesInto()
//拿到节点的上一级节点,其中需要根据count值去分别判断count >1 和 count =1的情况 ,大于1的话,上级节点在 bi.qd,需要遍历 ,等于1的话数据在 value.data
8、通过key值去查找节点
myDiagram.findNodeForKey(key).data //key值是节点的key
9、找当前节点的下一连线,上一连线是findLinksInto
index.findLinksOutOf.xc.n[0].zd //n是个数组,里面是所有线
10、更新节点数据,参数是你当前编辑的节点数据
myDiagram.model.updateTargetBindings(node.data)
11、限制palette拖拽区域,防止出现动态滚动条
autoScrollRegion:0, hasVerticalScrollbar:false, hasHorizontalScrollbar:false
12、监听数据变化
myDiagram.raiseChangedEvent(function(change, propertyname, obj, oldval, newval, oldparam, newparam){});
13、获取页面选中的节点
this.selectedNode
14、去除画布的蓝色默认border
canvas{border:0px;outline:none;}
其他可能需要注意的点:
1、一个节点下可以有多个 panel ,一个panel下可以用多个 go.Picture、go.Shape 、 go.TextBlock ,他们每个下面都有固定的属性值,可更改其样式,具体参考 api。
2、当页面新建了一些点和线后,选择重新布局的话可调用 myDiagram.layoutDiagram(true),然后图谱会自动布局。但是图谱上要加上 layout: $(go.LayeredDigraphLayout, { isInitial: false, isOngoing: false, layerSpacing: 50 }) 这一属性配置。
后续补充...
相关文章推荐
- SQL Server里面可能经常会用到的日期格式转换方法:
- 关于转换的问题,平时用到一些 内置类型之间的 转换方法如atoi atof itoa sprintf 等 istrstream ostrstream strstream【2013.10.21】
- 关于OPENCV中imwrite出错的一种可能及解决方法
- 关于ASP.NET runtime error的可能原因和解决方法
- 【JS】关于表单提交前验证的方法和可能遇到的问题总结
- 关于uiimage imagenamed内存可能占用大的替代方法
- 项目中用到的关于时间段不能重复的解决方法
- XMPP客户端关于用户组排序的一个可能的实现方法
- 关于:此页的状态信息无效,可能已损坏的解决方法
- 总结:Js中可能用到的一些小方法
- 关于Entity Framework更新的几种方式以及可能遇到的问题(附加类型“Model”的实体失败,因为相同类型的其他实体已具有相同的主键值)在使用 "Attach" 方法或者将实体的状态设置为 "Unchanged" 或 "Modified" 时如果图形中的任何实体具有冲突键值,则可能会发生上述行为
- 可能用到的一些方法积累
- SQL Server里面可能经常会用到的日期格式转换方法:
- Android 通讯录中用到的关于按名字首字母排序方法
- 关于:此页的状态信息无效,可能已损坏的解决方法
- 自己学习过程中关于以后有可能用到的技术的备份,微信广告滑屏组件 iSlider
- 关于路径搜索的算法, 可能用到
- 关于Service方法调用时出现org.apache.ibatis.binding.BindingException错误的可能原因
- Url Function : 关于在magento中常常用到的调用url的方法
- JS数组练习可能用到的方法(待更新)