1、创建画布
let (go.Diagram, 'myDiagramDiv',
{
'undoManager.isEnabled': true, // 启动ctrl+z撤销 和 ctrk+y 重做
layout: (go.Node, 'Auto', { margin: 5, movable: false },
(go.TextBlock, { stroke: '#6C757D', textAlign: 'left', width: 160 }, new go.Binding('text', 'answer'))
)
)
Json:
{"category":"answer", "group":"0_1", "key":"0_1_1", "answer_seq":"A.", "answer":"A.Yes", "value":"Yes", "type":3}
3、创建有多个文本的节点
this.myDiagram.nodeTemplateMap.add('project',
(go.Shape, 'RoundedRectangle', { fill: '#fff', strokeWidth: 4, stroke: 'white' }, new go.Binding('stroke', 'outlineColor')),
(go.TextBlock, { font: '600 12px', stroke: '#051735', textAlign: 'left', margin: 5 }, new go.Binding('text', 'question')),
(go.Group, 'Auto',
{
layout: (go.Shape, 'RoundedRectangle', { fill: '#fff', strokeWidth: 4, stroke: 'white' }, new go.Binding('stroke', 'outlineColor')),
// %2C)
(go.Panel, 'Vertical',
(go.Placeholder, 'Vertical', { width: 230, padding: 5 })
)
)
Json:
{ "class": "GraphLinksModel",
"nodeDataArray": [
{"outlineColor":"white", "key":"0", "tool":"Project", "category":"project", "question":"Project", "params":"Drawing annotation", "languageId":0, "targetLanguageId":0, "groupId":0},
{"isGroup":true, "outlineColor":"white", "key":"0_1", "tool":"Classification", "category_id":1, "questionId":1, "setting":"Whether", "question":"Does the image __ ?", "params":"", "optionMin":0, "optionMax":2, "stepPrice":0.003},
{"category":"answer", "group":"0_1", "key":"0_1_1", "answer_seq":"A.", "answer":"A.Yes", "value":"Yes", "type":3},
{"category":"answer", "group":"0_1", "key":"0_1_2", "answer_seq":"B.", "answer":"B.No", "value":"No", "type":3}
],
"linkDataArray": [ {"from":"0", "to":"0_1"} ]}
5、点击选中节点
this.myDiagram.addDiagramListener('ObjectSingleClicked', (e, obj) => {
let _this = this
var nodeOrLinkList = this.myDiagram.selection
nodeOrLinkList.each(function (nodeOrLink) {
if (nodeOrLink instanceof go.Node) { // 获取选中节点
let nodeData = nodeOrLink.data
_this.store.state.flag_panel_name = nodeData.tool
_this.cur_diagram.key = nodeData.key
_this.tool = nodeData.tool
_this.cur_diagram_childs_num = +nodeOrLink.findNodesOutOf().count
_this.emit('selectSetting', nodeData.setting)
}
Bus.$emit('selectNode', '')
} else if (nodeOrLink instanceof go.Link) { // 获取选中的连线
// var from = nodeOrLink.data.from
// var to = nodeOrLink.data.to
// this.link_tree_child_chain_data.push(nodeOrLink.data)
}
})
})
6、点击生成节点，并用箭头连线到上一个节点
_this.cur_diagram.key = nodeData.key
let child_key = 1
let group_key = this.cur_diagram.key + '_' + child_key
let bounding_node_data_default = {}
Object.assign(bounding_node_data_default, this.store.getters.dealBoundingBoxQuestion
this.myDiagram.model.addNodeData(bounding_node_data_default)
this.myDiagram.model.addLinkData({ from: this.cur_diagram.key, to: group_key })
6、在一个节点上生成多个子节点
_this.cur_diagram_childs_num = +nodeOrLink.findNodesOutOf().count
let child_key = ++this.cur_diagram_childs_num + ''
let group_key = this.cur_diagram.key + '_' + child_key
同上
7、在一个节点的内节点上分别生成多个子节点
同上
8、在每一个条线的末节点展示之前节点链的内容
生成了末节点 —— 选中状态 cur_node_data —— 修改参数变化 —— 向前寻找组合node_tree_parent_chain_data —— findNodesInto —— 遇到answer的情况
9、在节点对应的panel上编辑节点内容，可以实时地使节点进行修改
store —— cur_node_data —— 操作之后修改cur —— Bus.store.state.cur_node_data)
10、设计节点、节点操作及其编辑板焦点联动的业务逻辑
初始化生成project节点 —— 点击节点 —— 再点击工具 —— 生成子节点 —— 并展示对应panel —— 并新节点处于选中状态 —— 同时获取新结点相关联的一些数据 父结点链数据等 —— 操作panel 失去焦点 实时修改节点。
图节点key的设计 树的形式——选中状态获取子节点个数——新增增1赋值——
api:
let resNodesInfo = node.findNodesInto()
let node1 = _this.myDiagram.findNodeForKey(nodeInto.data.group)
let nodedata = this.myDiagram.model.findNodeDataForKey(key)
this.myDiagram.model.addLinkData({ from: this.cur_diagram.key, to: group_key })
this.myDiagram.model.addNodeData(item)
_this.myDiagram.model.removeNodeData(node.data)qq
this.myDiagram.model.removeLinkDataCollection(this.link_tree_child_chain_data)
this.store.state.cur_node_data)
this.myDiagram.model.toJson()
this.myDiagram.select(node)
var nodeOrLinkList = this.myDiagram.selection
this.myDiagram.addDiagramListener('ObjectSingleClicked', (e, obj) => {
_this.cur_diagram_childs_num = +nodeOrLink.findNodesOutOf().count
let resNodesInfo = node.findTreeParentChain()
