Skip to content

I
IT-monitor
Commit dcd8109d authored by Asjoker's avatar Asjoker
Browse files
Options

feat: 拓扑图 - 自适应高宽 & 标签页图标修改

parent f42530d5
Show whitespace changes
Inline Side-by-side
Showing with 292 additions and 284 deletions
packages/cc-topology/src/behavior/click-event-edit.js
View file @ dcd8109d
...@@ -16,7 +16,7 @@ export default { ...@@ -16,7 +16,7 @@ export default {
sendThis, // 暴露函数 sendThis, // 暴露函数
name: 'click-event-edit', name: 'click-event-edit',
options: { options: {
getEvents () { getEvents() {
return { return {
'node:click': 'onNodeClick', 'node:click': 'onNodeClick',
'node:contextmenu': 'onNodeRightClick', 'node:contextmenu': 'onNodeRightClick',
...@@ -27,7 +27,7 @@ export default { ...@@ -27,7 +27,7 @@ export default {
'canvas:click': 'onCanvasClick' 'canvas:click': 'onCanvasClick'
} }
}, },
onNodeClick (event) { onNodeClick(event) {
// todo..."selected"是g6自带的状态，在"drag-add-edge"中的"node:mouseup"事件也会触发，故此处不需要设置"selected"状态 // todo..."selected"是g6自带的状态，在"drag-add-edge"中的"node:mouseup"事件也会触发，故此处不需要设置"selected"状态
// let clickNode = event.item; // let clickNode = event.item;
// clickNode.setState('selected', !clickNode.hasState('selected')); // clickNode.setState('selected', !clickNode.hasState('selected'));
...@@ -35,19 +35,19 @@ export default { ...@@ -35,19 +35,19 @@ export default {
vm.rightMenuShow = false vm.rightMenuShow = false
this.updateVmData(event) this.updateVmData(event)
}, },
onNodeRightClick (event) { onNodeRightClick(event) {
let graph = vm.graph const graph = vm.graph
let clickNode = event.item const clickNode = event.item
let clickNodeModel = clickNode.getModel() const clickNodeModel = clickNode.getModel()
let selectedNodes = graph.findAllByState('node', 'selected') const selectedNodes = graph.findAllByState('node', 'selected')
let selectedNodeIds = selectedNodes.map(item => { const selectedNodeIds = selectedNodes.map(item => {
return item.getModel().id return item.getModel().id
}) })
vm.selectedNode = clickNode vm.selectedNode = clickNode
// 如果当前点击节点是之前选中的某个节点，就进行下面的处理 // 如果当前点击节点是之前选中的某个节点，就进行下面的处理
if (selectedNodes.length > 1 && selectedNodeIds.indexOf(clickNodeModel.id) > -1) { if (selectedNodes.length > 1 && selectedNodeIds.indexOf(clickNodeModel.id) > -1) {
vm.rightMenuShow = true vm.rightMenuShow = true
let rightMenu = vm.$refs.rightMenu const rightMenu = vm.$refs.rightMenu
rightMenu.style.left = event.clientX + 'px' rightMenu.style.left = event.clientX + 'px'
rightMenu.style.top = event.clientY + 'px' rightMenu.style.top = event.clientY + 'px'
} else { } else {
...@@ -64,17 +64,17 @@ export default { ...@@ -64,17 +64,17 @@ export default {
} }
graph.paint() graph.paint()
}, },
onEdgeClick (event) { onEdgeClick(event) {
let clickEdge = event.item const clickEdge = event.item
clickEdge.setState('selected', !clickEdge.hasState('selected')) clickEdge.setState('selected', !clickEdge.hasState('selected'))
vm.currentFocus = 'edge' vm.currentFocus = 'edge'
this.updateVmData(event) this.updateVmData(event)
}, },
onEdgeRightClick (event) { onEdgeRightClick(event) {
let graph = vm.graph const graph = vm.graph
let clickEdge = event.item const clickEdge = event.item
let clickEdgeModel = clickEdge.getModel() const clickEdgeModel = clickEdge.getModel()
let selectedEdges = graph.findAllByState('edge', 'selected') const selectedEdges = graph.findAllByState('edge', 'selected')
// 如果当前点击节点不是之前选中的单个节点，才进行下面的处理 // 如果当前点击节点不是之前选中的单个节点，才进行下面的处理
if (!(selectedEdges.length === 1 && clickEdgeModel.id === selectedEdges[0].getModel().id)) { if (!(selectedEdges.length === 1 && clickEdgeModel.id === selectedEdges[0].getModel().id)) {
// 先取消所有节点的选中状态 // 先取消所有节点的选中状态
...@@ -88,31 +88,31 @@ export default { ...@@ -88,31 +88,31 @@ export default {
} }
// let point = { x: event.x, y: event.y } // let point = { x: event.x, y: event.y }
}, },
onComboClick (event) { onComboClick(event) {
vm.currentFocus = 'combo' vm.currentFocus = 'combo'
this.updateVmData(event) this.updateVmData(event)
}, },
onComboRightClick (event) { onComboRightClick(event) {
vm.rightMenuShow = true vm.rightMenuShow = true
let rightMenu = vm.$refs.rightMenu const rightMenu = vm.$refs.rightMenu
rightMenu.style.left = event.clientX + 'px' rightMenu.style.left = event.clientX + 'px'
rightMenu.style.top = event.clientY + 'px' rightMenu.style.top = event.clientY + 'px'
vm.currentFocus = 'combo' vm.currentFocus = 'combo'
this.updateVmData(event) this.updateVmData(event)
}, },
onCanvasClick () { onCanvasClick() {
vm.currentFocus = 'canvas' vm.currentFocus = 'canvas'
vm.rightMenuShow = false vm.rightMenuShow = false
}, },
updateVmData (event) { updateVmData(event) {
if (event.item._cfg.type === 'node') { if (event.item._cfg.type === 'node') {
// 更新vm的data: selectedNode 和 selectedNodeParams // 更新vm的data: selectedNode 和 selectedNodeParams
let clickNode = event.item const clickNode = event.item
if (clickNode.hasState('selected')) { if (clickNode.hasState('selected')) {
let clickNodeModel = clickNode.getModel() const clickNodeModel = clickNode.getModel()
vm.selectedNode = clickNode vm.selectedNode = clickNode
let nodeAppConfig = { ...vm.nodeAppConfig } const nodeAppConfig = { ...vm.nodeAppConfig }
Object.keys(nodeAppConfig).forEach(function (key) { Object.keys(nodeAppConfig).forEach(function(key) {
nodeAppConfig[key] = '' nodeAppConfig[key] = ''
}) })
vm.selectedNodeParams = { vm.selectedNodeParams = {
...@@ -122,12 +122,12 @@ export default { ...@@ -122,12 +122,12 @@ export default {
} }
} else if (event.item._cfg.type === 'edge') { } else if (event.item._cfg.type === 'edge') {
// 更新vm的data: selectedEdge 和 selectedEdgeParams // 更新vm的data: selectedEdge 和 selectedEdgeParams
let clickEdge = event.item const clickEdge = event.item
if (clickEdge.hasState('selected')) { if (clickEdge.hasState('selected')) {
let clickEdgeModel = clickEdge.getModel() const clickEdgeModel = clickEdge.getModel()
vm.selectedEdge = clickEdge vm.selectedEdge = clickEdge
let edgeAppConfig = { ...vm.edgeAppConfig } const edgeAppConfig = { ...vm.edgeAppConfig }
Object.keys(edgeAppConfig).forEach(function (key) { Object.keys(edgeAppConfig).forEach(function(key) {
edgeAppConfig[key] = '' edgeAppConfig[key] = ''
}) })
vm.selectedEdgeParams = { vm.selectedEdgeParams = {
...@@ -137,8 +137,8 @@ export default { ...@@ -137,8 +137,8 @@ export default {
} }
} else if (event.item._cfg.type === 'combo') { } else if (event.item._cfg.type === 'combo') {
// 更新vm的data: selectedCombo 和 selectedComboParams // 更新vm的data: selectedCombo 和 selectedComboParams
let clickCombo = event.item const clickCombo = event.item
let clickComboModel = clickCombo.getModel() const clickComboModel = clickCombo.getModel()
vm.selectedCombo = clickCombo vm.selectedCombo = clickCombo
vm.selectedComboParams = { vm.selectedComboParams = {
label: clickComboModel.label || '', label: clickComboModel.label || '',
......
packages/cc-topology/src/cc-topology.vue
View file @ dcd8109d
<template> <template>
<div class="topology" v-loading="loading"> <div v-loading="loading" class="topology">
<!-- container --> <!-- container -->
<el-row :class="graphBg" style="height: 100%" @contextmenu.native.prevent> <el-row :class="graphBg" style="height: 100%" @contextmenu.native.prevent>
<!-- toolbar --> <!-- toolbar -->
<div v-if="toolbarShow && graphMode === 'edit'"> <div v-if="toolbarShow && graphMode === 'edit'">
<toolbar-edit></toolbar-edit> <toolbar-edit />
</div> </div>
<div v-else-if="toolbarShow"> <div v-else-if="toolbarShow">
<toolbar-preview ref="toolbarPreview"></toolbar-preview> <toolbar-preview ref="toolbarPreview" />
</div> </div>
<!-- graph-container --> <!-- graph-container -->
<el-col class="graph-container" :span="graphMode === 'edit' && graphPanelShow === true ? 19 : 24" <el-col
ref="graphContainer"> ref="graphContainer"
<div id="mount-topology" @dragenter="dragenterHandler" @dragover="dragoverHandler" @drop="dropHandler"></div> class="graph-container"
<div class="right-menu" ref="rightMenu" v-show="rightMenuShow" @contextmenu.prevent> :span="graphMode === 'edit' && graphPanelShow === true ? 19 : 24"
>
<div id="mount-topology" @dragenter="dragenterHandler" @dragover="dragoverHandler" @drop="dropHandler" />
<div v-show="rightMenuShow" ref="rightMenu" class="right-menu" @contextmenu.prevent>
<ul v-if="currentFocus === 'node' && selectedNodes.length > 1"> <ul v-if="currentFocus === 'node' && selectedNodes.length > 1">
<li @click="alignHandler('horizontal')">水平对齐</li> <li @click="alignHandler('horizontal')">水平对齐</li>
<li @click="alignHandler('vertical')">垂直对齐</li> <li @click="alignHandler('vertical')">垂直对齐</li>
...@@ -25,16 +28,16 @@ ...@@ -25,16 +28,16 @@
</div> </div>
</el-col> </el-col>
<!-- graph-pannel --> <!-- graph-pannel -->
<el-col class="graph-pannel" v-if="graphMode === 'edit' && graphPanelShow === true" :span="5"> <el-col v-if="graphMode === 'edit' && graphPanelShow === true" class="graph-pannel" :span="5">
<div v-if="currentFocus === 'node'"> <div v-if="currentFocus === 'node'">
<div class="pannel-title">节点</div> <div class="pannel-title">节点</div>
<div class="pannel-body"> <div class="pannel-body">
<span>节点标签</span> <span>节点标签</span>
<el-input class="params-input" v-model="selectedNodeParams.label" size="mini"></el-input> <el-input v-model="selectedNodeParams.label" class="params-input" size="mini" />
<!--<input class="params-input" type="text" autocomplete="off" v-model="selectedNodeParams.label"/>--> <!--<input class="params-input" type="text" autocomplete="off" v-model="selectedNodeParams.label"/>-->
<div v-for="(value, key) in nodeAppConfig" :key="key"> <div v-for="(value, key) in nodeAppConfig" :key="key">
<span>{{ value }}</span> <span>{{ value }}</span>
<el-input class="params-input" v-model="selectedNodeParams.appConfig[key]" size="mini"></el-input> <el-input v-model="selectedNodeParams.appConfig[key]" class="params-input" size="mini" />
<!--<input class="params-input" type="text" autocomplete="off" v-model="selectedNodeParams.appConfig[key]"/>--> <!--<input class="params-input" type="text" autocomplete="off" v-model="selectedNodeParams.appConfig[key]"/>-->
</div> </div>
</div> </div>
...@@ -43,11 +46,11 @@ ...@@ -43,11 +46,11 @@
<div class="pannel-title">连线</div> <div class="pannel-title">连线</div>
<div class="pannel-body"> <div class="pannel-body">
<span>连线标签</span> <span>连线标签</span>
<el-input class="params-input" v-model="selectedEdgeParams.label" size="mini"></el-input> <el-input v-model="selectedEdgeParams.label" class="params-input" size="mini" />
<!--<input class="params-input" type="text" autocomplete="off" v-model="selectedEdgeParams.label"/>--> <!--<input class="params-input" type="text" autocomplete="off" v-model="selectedEdgeParams.label"/>-->
<div v-for="(value, key) in edgeAppConfig" :key="key"> <div v-for="(value, key) in edgeAppConfig" :key="key">
<span>{{ value }}</span> <span>{{ value }}</span>
<el-input class="params-input" v-model="selectedEdgeParams.appConfig[key]" size="mini"></el-input> <el-input v-model="selectedEdgeParams.appConfig[key]" class="params-input" size="mini" />
<!--<input class="params-input" type="text" autocomplete="off" v-model="selectedEdgeParams.appConfig[key]"/>--> <!--<input class="params-input" type="text" autocomplete="off" v-model="selectedEdgeParams.appConfig[key]"/>-->
</div> </div>
</div> </div>
...@@ -56,39 +59,39 @@ ...@@ -56,39 +59,39 @@
<div class="pannel-title">分组</div> <div class="pannel-title">分组</div>
<div class="pannel-body"> <div class="pannel-body">
<span>分组标签</span> <span>分组标签</span>
<el-input class="params-input" v-model="selectedComboParams.label" size="mini"></el-input> <el-input v-model="selectedComboParams.label" class="params-input" size="mini" />
<span>标签位置</span> <span>标签位置</span>
<el-select class="params-select" v-model="selectedComboParams.labelPosition" placeholder="请选择" size="mini"> <el-select v-model="selectedComboParams.labelPosition" class="params-select" placeholder="请选择" size="mini">
<el-option label="top" value="top"></el-option> <el-option label="top" value="top" />
<el-option label="left" value="left"></el-option> <el-option label="left" value="left" />
<el-option label="right" value="right"></el-option> <el-option label="right" value="right" />
<el-option label="bottom" value="bottom"></el-option> <el-option label="bottom" value="bottom" />
<el-option label="center" value="center"></el-option> <el-option label="center" value="center" />
</el-select> </el-select>
<span>水平偏移</span> <span>水平偏移</span>
<el-input-number <el-input-number
class="params-input-number"
v-model="selectedComboParams.labelRefX" v-model="selectedComboParams.labelRefX"
class="params-input-number"
:controls="false" :controls="false"
:min="-100" :min="-100"
:max="100" :max="100"
label="标签水平方向偏移" label="标签水平方向偏移"
size="mini"> size="mini"
</el-input-number> />
<span>垂直偏移</span> <span>垂直偏移</span>
<el-input-number <el-input-number
class="params-input-number"
v-model="selectedComboParams.labelRefY" v-model="selectedComboParams.labelRefY"
class="params-input-number"
:controls="false" :controls="false"
:min="-100" :min="-100"
:max="100" :max="100"
label="标签水平方向偏移" label="标签水平方向偏移"
size="mini"> size="mini"
</el-input-number> />
<span>分组形状</span> <span>分组形状</span>
<el-select class="params-select" v-model="selectedComboParams.type" placeholder="请选择" size="mini"> <el-select v-model="selectedComboParams.type" class="params-select" placeholder="请选择" size="mini">
<el-option label="circle" value="circle"></el-option> <el-option label="circle" value="circle" />
<el-option label="rect" value="rect"></el-option> <el-option label="rect" value="rect" />
</el-select> </el-select>
</div> </div>
</div> </div>
...@@ -96,16 +99,18 @@ ...@@ -96,16 +99,18 @@
<div class="pannel-title">画布</div> <div class="pannel-title">画布</div>
<div class="pannel-body"> <div class="pannel-body">
<div <div
class="node-type"
v-for="nodeType in nodeTypeList" v-for="nodeType in nodeTypeList"
:key="nodeType.guid"> :key="nodeType.guid"
class="node-type"
>
<img <img
:src="nodeType.imgSrc" :src="nodeType.imgSrc"
:alt="nodeType.label" :alt="nodeType.label"
:title="nodeType.desc" :title="nodeType.desc"
draggable="true" draggable="true"
@dragstart="dragstartHandler($event, nodeType)" @dragstart="dragstartHandler($event, nodeType)"
@dragend="dragendHandler"> @dragend="dragendHandler"
>
<label>{{ nodeType.label }}</label> <label>{{ nodeType.label }}</label>
</div> </div>
</div> </div>
...@@ -183,7 +188,7 @@ export default { ...@@ -183,7 +188,7 @@ export default {
} }
} }
}, },
data () { data() {
return { return {
graphPanelShow: true, graphPanelShow: true,
graphBg: 'default-style', graphBg: 'default-style',
...@@ -240,32 +245,32 @@ export default { ...@@ -240,32 +245,32 @@ export default {
} }
}, },
computed: { computed: {
disableUndo: function () { disableUndo: function() {
return this.historyIndex === 0 || this.historyIndex - (this.undoCount + 1) < 0 return this.historyIndex === 0 || this.historyIndex - (this.undoCount + 1) < 0
}, },
disableRedo: function () { disableRedo: function() {
return this.historyIndex === 0 || this.historyIndex === 10 || this.undoCount < 1 return this.historyIndex === 0 || this.historyIndex === 10 || this.undoCount < 1
}, },
disableCopy: function () { disableCopy: function() {
return this.selectedNodes.length === 0 return this.selectedNodes.length === 0
}, },
disablePaste: function () { disablePaste: function() {
return this.nodesInClipboard.length === 0 return this.nodesInClipboard.length === 0
}, },
disableDelete: function () { disableDelete: function() {
return this.selectedNodes.length === 0 && this.selectedEdges.length === 0 return this.selectedNodes.length === 0 && this.selectedEdges.length === 0
}, },
selectedNodes: function () { selectedNodes: function() {
let self = this const self = this
let graph = self.graph const graph = self.graph
if (graph && !graph.destroyed) { if (graph && !graph.destroyed) {
return graph.findAllByState('node', 'selected') return graph.findAllByState('node', 'selected')
} else { } else {
return [] return []
} }
}, },
selectedEdges: function () { selectedEdges: function() {
let graph = this.graph const graph = this.graph
if (graph && !graph.destroyed) { if (graph && !graph.destroyed) {
return graph.findAllByState('edge', 'selected') return graph.findAllByState('edge', 'selected')
} else { } else {
...@@ -273,9 +278,74 @@ export default { ...@@ -273,9 +278,74 @@ export default {
} }
} }
}, },
created () { watch: {
layoutType() {
this.initTopo(this.graphData)
},
graphMode() {
this.changeGraphSize()
},
selectedNodeParams: {
deep: true,
handler: function(newVal, oldVal) {
const selectedNodeModel = this.selectedNode.getModel()
if (utils.isObjectValueEqual(selectedNodeModel.appConfig, newVal.appConfig) && selectedNodeModel.label === newVal.label) {
return
}
// 实时监听input值的变化，停止输入500ms后执行update，而不是时时update
clearTimeout(this.selectedNodeParamsTimeout)
this.selectedNodeParamsTimeout = setTimeout(() => {
selectedNodeModel.label = newVal.label
selectedNodeModel.appConfig = newVal.appConfig
this.selectedNode.update(selectedNodeModel)
}, 500)
}
},
selectedEdgeParams: {
deep: true,
handler: function(newVal, oldVal) {
const selectedEdgeModel = this.selectedEdge.getModel()
if (utils.isObjectValueEqual(selectedEdgeModel.appConfig, newVal.appConfig) && selectedEdgeModel.label === newVal.label) {
return
}
// 实时监听input值的变化，停止输入500ms后执行update，而不是时时update
clearTimeout(this.selectedEdgeParamsTimeout)
this.selectedEdgeParamsTimeout = setTimeout(() => {
const selectedEdgeModel = this.selectedEdge.getModel()
selectedEdgeModel.label = newVal.label
selectedEdgeModel.appConfig = newVal.appConfig
this.selectedEdge.update(selectedEdgeModel)
}, 500)
}
},
selectedComboParams: {
deep: true,
handler: function(newVal, oldVal) {
const selectedComboModel = this.selectedCombo.getModel()
if (selectedComboModel.label === newVal.label &&
selectedComboModel.labelCfg.position === newVal.labelPosition &&
selectedComboModel.labelCfg.refX === newVal.labelRefX &&
selectedComboModel.labelCfg.refY === newVal.labelRefY &&
selectedComboModel.type === newVal.type) {
return
}
// 实时监听input值的变化，停止输入500ms后执行update，而不是时时update
clearTimeout(this.selectedComboParamsTimeout)
this.selectedComboParamsTimeout = setTimeout(() => {
const selectedComboModel = this.selectedCombo.getModel()
selectedComboModel.label = newVal.label
selectedComboModel.labelCfg.position = newVal.labelPosition ? newVal.labelPosition : 'top'
selectedComboModel.labelCfg.refX = newVal.labelRefX ? newVal.labelRefX : 0
selectedComboModel.labelCfg.refY = newVal.labelRefY ? newVal.labelRefY : 0
selectedComboModel.type = newVal.type ? newVal.type : 'circle'
this.selectedCombo.update(selectedComboModel)
}, 500)
}
}
},
created() {
}, },
mounted () { mounted() {
ccNode.obj.ccImage.sendThis(this) ccNode.obj.ccImage.sendThis(this)
ccBehavior.obj.clickEventEdit.sendThis(this) ccBehavior.obj.clickEventEdit.sendThis(this)
ccBehavior.obj.dragAddEdge.sendThis(this) ccBehavior.obj.dragAddEdge.sendThis(this)
...@@ -290,57 +360,57 @@ export default { ...@@ -290,57 +360,57 @@ export default {
})() })()
} }
}, },
beforeRouteUpdate (to, from, next) { beforeRouteUpdate(to, from, next) {
this.clearHistoryData() this.clearHistoryData()
next() next()
}, },
beforeRouteLeave (to, from, next) { beforeRouteLeave(to, from, next) {
this.clearHistoryData() this.clearHistoryData()
next() next()
}, },
beforeDestroy () { beforeDestroy() {
this.clearHistoryData() this.clearHistoryData()
}, },
methods: { methods: {
openFullScreenLoading () { openFullScreenLoading() {
this.loading = true this.loading = true
}, },
closeFullScreenLoading () { closeFullScreenLoading() {
let self = this const self = this
self.$nextTick(() => { self.$nextTick(() => {
self.loading = false self.loading = false
}) })
}, },
dragstartHandler (event, nodeType) { dragstartHandler(event, nodeType) {
event.dataTransfer.setData('text', JSON.stringify(nodeType)) event.dataTransfer.setData('text', JSON.stringify(nodeType))
}, },
dragenterHandler (event) { dragenterHandler(event) {
event.preventDefault() event.preventDefault()
}, },
dragoverHandler (event) { dragoverHandler(event) {
event.preventDefault() event.preventDefault()
}, },
dropHandler (event) { dropHandler(event) {
let nodeTypeStr = event.dataTransfer.getData('text') const nodeTypeStr = event.dataTransfer.getData('text')
let nodeType = JSON.parse(nodeTypeStr) const nodeType = JSON.parse(nodeTypeStr)
let clientX = event.clientX const clientX = event.clientX
let clientY = event.clientY const clientY = event.clientY
this.addNode(clientX, clientY, nodeType) this.addNode(clientX, clientY, nodeType)
}, },
dragendHandler () { dragendHandler() {
}, },
initTopo (graphData) { initTopo(graphData) {
let self = this const self = this
if (self.graph) { if (self.graph) {
self.graph.destroy() self.graph.destroy()
} }
// 图画布的定义 // 图画布的定义
let graphContainer = self.$refs.graphContainer.$el const graphContainer = self.$refs.graphContainer.$el
let graphWidth = graphContainer.clientWidth - 20 const graphWidth = graphContainer.clientWidth - 20
let graphHeight = graphContainer.clientHeight - 20 const graphHeight = graphContainer.clientHeight - 20
// Plugins // Plugins
let plugins = [] const plugins = []
let modes = { const modes = {
default: [ default: [
'drag-canvas', 'drag-canvas',
'drag-node', 'drag-node',
...@@ -357,18 +427,18 @@ export default { ...@@ -357,18 +427,18 @@ export default {
// 'click-select', // 'click-select',
{ {
type: 'tooltip', type: 'tooltip',
formatText (model) { formatText(model) {
return model.description || model.label return model.description || model.label
} }
}, },
{ {
type: 'edge-tooltip', type: 'edge-tooltip',
formatText (model) { formatText(model) {
return model.description || 'source:' + self.graph.findById(model.source).getModel().label + ' target:' + self.graph.findById(model.target).getModel().label return model.description || 'source:' + self.graph.findById(model.source).getModel().label + ' target:' + self.graph.findById(model.target).getModel().label
} }
}, },
// Group Behavior // Group Behavior
'collapse-expand-combo', 'collapse-expand-combo'
// 自定义Behavior // 自定义Behavior
// 'my-collapse-expand' // 'my-collapse-expand'
], ],
...@@ -407,7 +477,7 @@ export default { ...@@ -407,7 +477,7 @@ export default {
{ {
type: 'brush-select', type: 'brush-select',
trigger: 'drag', trigger: 'drag',
onSelect () { onSelect() {
this.graph.setMode('edit') this.graph.setMode('edit')
window.document.getElementById('multi-select').style.backgroundColor = 'transparent' window.document.getElementById('multi-select').style.backgroundColor = 'transparent'
} }
...@@ -430,8 +500,8 @@ export default { ...@@ -430,8 +500,8 @@ export default {
self.autoZoomHandler() self.autoZoomHandler()
}, },
/* 自动布局 */ /* 自动布局 */
forceLayoutHandler () { forceLayoutHandler() {
let graph = this.graph const graph = this.graph
if (graph && !graph.destroyed) { if (graph && !graph.destroyed) {
this.openFullScreenLoading() this.openFullScreenLoading()
graph.updateLayout({ graph.updateLayout({
...@@ -446,47 +516,47 @@ export default { ...@@ -446,47 +516,47 @@ export default {
}) })
} }
}, },
changeEdgeShapeHandler (edgeShape) { changeEdgeShapeHandler(edgeShape) {
this.currentEdgeShape = _.find(this.edgeShapeList, { 'guid': edgeShape }) this.currentEdgeShape = _.find(this.edgeShapeList, { 'guid': edgeShape })
this.graph.$C.edge.type = this.currentEdgeShape['guid'] this.graph.$C.edge.type = this.currentEdgeShape['guid']
}, },
undoHandler () { undoHandler() {
if (this.historyIndex > 0 && this.historyIndex - (this.undoCount + 1) >= 0) { if (this.historyIndex > 0 && this.historyIndex - (this.undoCount + 1) >= 0) {
this.undoCount += 1 this.undoCount += 1
let key = `graph_history_${this.historyIndex - this.undoCount}` const key = `graph_history_${this.historyIndex - this.undoCount}`
let historyData = this.getHistoryData(key) const historyData = this.getHistoryData(key)
this.changeGraphData(JSON.parse(historyData)) this.changeGraphData(JSON.parse(historyData))
this.refreshGraph() this.refreshGraph()
} }
}, },
redoHandler () { redoHandler() {
if (this.undoCount > 0) { if (this.undoCount > 0) {
let key = `graph_history_${this.historyIndex - this.undoCount + 1}` const key = `graph_history_${this.historyIndex - this.undoCount + 1}`
let historyData = this.getHistoryData(key) const historyData = this.getHistoryData(key)
this.changeGraphData(JSON.parse(historyData)) this.changeGraphData(JSON.parse(historyData))
this.undoCount -= 1 this.undoCount -= 1
this.refreshGraph() this.refreshGraph()
} }
}, },
copyHandler () { copyHandler() {
this.nodesInClipboard = this.selectedNodes this.nodesInClipboard = this.selectedNodes
this.pasteCount = 0 this.pasteCount = 0
}, },
pasteHandler () { pasteHandler() {
this.pasteCount += 1 // 连续paste次数统计 this.pasteCount += 1 // 连续paste次数统计
let graph = this.graph const graph = this.graph
let nodesInClipboard = this.nodesInClipboard const nodesInClipboard = this.nodesInClipboard
if (graph && !graph.destroyed && nodesInClipboard.length > 0) { if (graph && !graph.destroyed && nodesInClipboard.length > 0) {
// ************** 记录【粘贴】前的数据状态 start ************** // ************** 记录【粘贴】前的数据状态 start **************
let historyData = JSON.stringify(graph.save()) const historyData = JSON.stringify(graph.save())
let key = `graph_history_${this.historyIndex}` let key = `graph_history_${this.historyIndex}`
this.addHistoryData(key, historyData) this.addHistoryData(key, historyData)
// ************** 记录【粘贴】前的数据状态 end ************** // ************** 记录【粘贴】前的数据状态 end **************
// 开始粘贴 // 开始粘贴
for (let i = 0; i < nodesInClipboard.length; i++) { for (let i = 0; i < nodesInClipboard.length; i++) {
let node = nodesInClipboard[i] const node = nodesInClipboard[i]
let model = node.getModel() const model = node.getModel()
let newModel = { const newModel = {
...model, ...model,
id: utils.generateUUID(), id: utils.generateUUID(),
x: model.x + 10 * this.pasteCount, x: model.x + 10 * this.pasteCount,
...@@ -500,7 +570,7 @@ export default { ...@@ -500,7 +570,7 @@ export default {
if (this.undoCount > 0) { if (this.undoCount > 0) {
this.historyIndex = this.historyIndex - this.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置 this.historyIndex = this.historyIndex - this.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置
for (let i = 1; i <= this.undoCount; i++) { for (let i = 1; i <= this.undoCount; i++) {
let key = `graph_history_${this.historyIndex + i}` const key = `graph_history_${this.historyIndex + i}`
this.removeHistoryData(key) this.removeHistoryData(key)
} }
this.undoCount = 0 this.undoCount = 0
...@@ -508,18 +578,18 @@ export default { ...@@ -508,18 +578,18 @@ export default {
// 存储【粘贴】后的数据状态 // 存储【粘贴】后的数据状态
this.historyIndex += 1 this.historyIndex += 1
key = `graph_history_${this.historyIndex}` key = `graph_history_${this.historyIndex}`
let currentData = JSON.stringify(graph.save()) const currentData = JSON.stringify(graph.save())
this.addHistoryData(key, currentData) this.addHistoryData(key, currentData)
// ************** 记录【粘贴】后的数据状态 end ************** // ************** 记录【粘贴】后的数据状态 end **************
} }
}, },
deleteHandler () { deleteHandler() {
let graph = this.graph const graph = this.graph
let selectedNodes = graph.findAllByState('node', 'selected') const selectedNodes = graph.findAllByState('node', 'selected')
let selectedEdges = graph.findAllByState('edge', 'selected') const selectedEdges = graph.findAllByState('edge', 'selected')
if (this.selectedNodes.length > 0 || this.selectedEdges.length > 0) { if (this.selectedNodes.length > 0 || this.selectedEdges.length > 0) {
// ************** 记录【删除】前的数据状态 start ************** // ************** 记录【删除】前的数据状态 start **************
let historyData = JSON.stringify(graph.save()) const historyData = JSON.stringify(graph.save())
let key = `graph_history_${this.historyIndex}` let key = `graph_history_${this.historyIndex}`
this.addHistoryData(key, historyData) this.addHistoryData(key, historyData)
// ************** 记录【删除】前的数据状态 end ************** // ************** 记录【删除】前的数据状态 end **************
...@@ -536,7 +606,7 @@ export default { ...@@ -536,7 +606,7 @@ export default {
if (this.undoCount > 0) { if (this.undoCount > 0) {
this.historyIndex = this.historyIndex - this.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置 this.historyIndex = this.historyIndex - this.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置
for (let i = 1; i <= this.undoCount; i++) { for (let i = 1; i <= this.undoCount; i++) {
let key = `graph_history_${this.historyIndex + i}` const key = `graph_history_${this.historyIndex + i}`
this.removeHistoryData(key) this.removeHistoryData(key)
} }
this.undoCount = 0 this.undoCount = 0
...@@ -544,36 +614,36 @@ export default { ...@@ -544,36 +614,36 @@ export default {
// 记录【删除】后的数据状态 // 记录【删除】后的数据状态
this.historyIndex += 1 this.historyIndex += 1
key = `graph_history_${this.historyIndex}` key = `graph_history_${this.historyIndex}`
let currentData = JSON.stringify(graph.save()) const currentData = JSON.stringify(graph.save())
this.addHistoryData(key, currentData) this.addHistoryData(key, currentData)
// ************** 记录【删除】后的数据状态 end ************** // ************** 记录【删除】后的数据状态 end **************
} }
}, },
zoomInHandler () { zoomInHandler() {
let graph = this.graph const graph = this.graph
if (graph && !graph.destroyed) { if (graph && !graph.destroyed) {
graph.zoom(1.2) graph.zoom(1.2)
} }
}, },
zoomOutHandler () { zoomOutHandler() {
let graph = this.graph const graph = this.graph
if (graph && !graph.destroyed) { if (graph && !graph.destroyed) {
graph.zoom(0.8) graph.zoom(0.8)
} }
}, },
autoZoomHandler () { autoZoomHandler() {
let graph = this.graph const graph = this.graph
if (graph && !graph.destroyed && graph.save().nodes.length > 0) { if (graph && !graph.destroyed && graph.save().nodes.length > 0) {
graph.fitView(10) graph.fitView(10)
} }
}, },
resetZoomHandler () { resetZoomHandler() {
let graph = this.graph const graph = this.graph
if (graph && !graph.destroyed) { if (graph && !graph.destroyed) {
graph.zoomTo(1) graph.zoomTo(1)
} }
}, },
enableMinimapHandler (enableMinimap) { enableMinimapHandler(enableMinimap) {
if (enableMinimap) { if (enableMinimap) {
this.minimap = new G6.Minimap({ this.minimap = new G6.Minimap({
size: [200, 120], size: [200, 120],
...@@ -586,16 +656,16 @@ export default { ...@@ -586,16 +656,16 @@ export default {
} }
}, },
// 右键菜单 // 右键菜单
alignHandler (coordinate) { alignHandler(coordinate) {
let graph = this.graph const graph = this.graph
if (this.selectedNodes.length > 1 && this.selectedNode) { if (this.selectedNodes.length > 1 && this.selectedNode) {
// ************** 记录【节点对齐】前的数据状态 start ************** // ************** 记录【节点对齐】前的数据状态 start **************
let historyData = JSON.stringify(graph.save()) const historyData = JSON.stringify(graph.save())
let key = `graph_history_${this.historyIndex}` let key = `graph_history_${this.historyIndex}`
this.addHistoryData(key, historyData) this.addHistoryData(key, historyData)
// ************** 记录【节点对齐】前的数据状态 end ************** // ************** 记录【节点对齐】前的数据状态 end **************
// 开始节点对齐 // 开始节点对齐
let cfg = coordinate === 'horizontal' ? { y: this.selectedNode.getModel().y } : { x: this.selectedNode.getModel().x } const cfg = coordinate === 'horizontal' ? { y: this.selectedNode.getModel().y } : { x: this.selectedNode.getModel().x }
for (let i = 0, len = this.selectedNodes.length; i < len; i++) { for (let i = 0, len = this.selectedNodes.length; i < len; i++) {
this.selectedNodes[i].updatePosition(cfg) this.selectedNodes[i].updatePosition(cfg)
} }
...@@ -606,7 +676,7 @@ export default { ...@@ -606,7 +676,7 @@ export default {
if (this.undoCount > 0) { if (this.undoCount > 0) {
this.historyIndex = this.historyIndex - this.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置 this.historyIndex = this.historyIndex - this.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置
for (let i = 1; i <= this.undoCount; i++) { for (let i = 1; i <= this.undoCount; i++) {
let key = `graph_history_${this.historyIndex + i}` const key = `graph_history_${this.historyIndex + i}`
this.removeHistoryData(key) this.removeHistoryData(key)
} }
this.undoCount = 0 this.undoCount = 0
...@@ -614,25 +684,25 @@ export default { ...@@ -614,25 +684,25 @@ export default {
// 记录【节点对齐】后的数据状态 // 记录【节点对齐】后的数据状态
this.historyIndex += 1 this.historyIndex += 1
key = `graph_history_${this.historyIndex}` key = `graph_history_${this.historyIndex}`
let currentData = JSON.stringify(graph.save()) const currentData = JSON.stringify(graph.save())
this.addHistoryData(key, currentData) this.addHistoryData(key, currentData)
// ************** 记录【节点对齐】后的数据状态 end ************** // ************** 记录【节点对齐】后的数据状态 end **************
} }
this.rightMenuShow = false this.rightMenuShow = false
}, },
createComboHandler () { createComboHandler() {
let graph = this.graph const graph = this.graph
if (graph && !graph.destroyed && this.selectedNodes.length > 1 && this.selectedNode) { if (graph && !graph.destroyed && this.selectedNodes.length > 1 && this.selectedNode) {
// ************** 记录【添加分组】前的数据状态 start ************** // ************** 记录【添加分组】前的数据状态 start **************
let historyData = JSON.stringify(graph.save()) const historyData = JSON.stringify(graph.save())
let key = `graph_history_${this.historyIndex}` const key = `graph_history_${this.historyIndex}`
this.addHistoryData(key, historyData) this.addHistoryData(key, historyData)
// ************** 记录【添加分组】前的数据状态 end ************** // ************** 记录【添加分组】前的数据状态 end **************
let nodeIds = this.selectedNodes.map(item => { const nodeIds = this.selectedNodes.map(item => {
return item._cfg.id return item._cfg.id
}) })
// 创建分组 // 创建分组
let combo = graph.createCombo({ const combo = graph.createCombo({
id: utils.generateUUID() id: utils.generateUUID()
}, nodeIds) }, nodeIds)
// ************** 记录【添加分组】后的数据状态 start ************** // ************** 记录【添加分组】后的数据状态 start **************
...@@ -642,39 +712,39 @@ export default { ...@@ -642,39 +712,39 @@ export default {
if (this.undoCount > 0) { if (this.undoCount > 0) {
this.historyIndex = this.historyIndex - this.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置 this.historyIndex = this.historyIndex - this.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置
for (let i = 1; i <= this.undoCount; i++) { for (let i = 1; i <= this.undoCount; i++) {
let key = `graph_history_${this.historyIndex + i}` const key = `graph_history_${this.historyIndex + i}`
this.removeHistoryData(key) this.removeHistoryData(key)
} }
this.undoCount = 0 this.undoCount = 0
} }
// 记录【添加分组】后的数据状态 // 记录【添加分组】后的数据状态
this.historyIndex += 1 this.historyIndex += 1
let key = `graph_history_${this.historyIndex}` const key = `graph_history_${this.historyIndex}`
let currentData = JSON.stringify(graph.save()) const currentData = JSON.stringify(graph.save())
this.addHistoryData(key, currentData) this.addHistoryData(key, currentData)
} }
// ************** 记录【添加分组】后的数据状态 end ************** // ************** 记录【添加分组】后的数据状态 end **************
this.rightMenuShow = false this.rightMenuShow = false
} }
}, },
removeComboHandler () { removeComboHandler() {
let graph = this.graph const graph = this.graph
if (this.selectedCombo) { if (this.selectedCombo) {
// ************** 记录【删除】前的数据状态 start ************** // ************** 记录【删除】前的数据状态 start **************
let historyData = JSON.stringify(graph.save()) const historyData = JSON.stringify(graph.save())
let key = `graph_history_${this.historyIndex}` let key = `graph_history_${this.historyIndex}`
this.addHistoryData(key, historyData) this.addHistoryData(key, historyData)
// ************** 记录【删除】前的数据状态 end ************** // ************** 记录【删除】前的数据状态 end **************
// 开始删除 // 开始删除
// FIXME... graph.uncombo() 后，combos 依旧存在 graph.save() 中。 // FIXME... graph.uncombo() 后，combos 依旧存在 graph.save() 中。
let {nodes: subNodes, combos: subCombos} = this.selectedCombo.getChildren() const { nodes: subNodes, combos: subCombos } = this.selectedCombo.getChildren()
subNodes.forEach(subNode => { subNodes.forEach(subNode => {
let subNodeModel = subNode.getModel() const subNodeModel = subNode.getModel()
subNodeModel.comboId = undefined subNodeModel.comboId = undefined
subNode.update(subNodeModel) subNode.update(subNodeModel)
}) })
subCombos.forEach(subCombo => { subCombos.forEach(subCombo => {
let subComboModel = subCombo.getModel() const subComboModel = subCombo.getModel()
subComboModel.comboId = undefined subComboModel.comboId = undefined
subCombo.update(subComboModel) subCombo.update(subComboModel)
}) })
...@@ -685,7 +755,7 @@ export default { ...@@ -685,7 +755,7 @@ export default {
if (this.undoCount > 0) { if (this.undoCount > 0) {
this.historyIndex = this.historyIndex - this.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置 this.historyIndex = this.historyIndex - this.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置
for (let i = 1; i <= this.undoCount; i++) { for (let i = 1; i <= this.undoCount; i++) {
let key = `graph_history_${this.historyIndex + i}` const key = `graph_history_${this.historyIndex + i}`
this.removeHistoryData(key) this.removeHistoryData(key)
} }
this.undoCount = 0 this.undoCount = 0
...@@ -693,23 +763,23 @@ export default { ...@@ -693,23 +763,23 @@ export default {
// 记录【删除】后的数据状态 // 记录【删除】后的数据状态
this.historyIndex += 1 this.historyIndex += 1
key = `graph_history_${this.historyIndex}` key = `graph_history_${this.historyIndex}`
let currentData = JSON.stringify(graph.save()) const currentData = JSON.stringify(graph.save())
this.addHistoryData(key, currentData) this.addHistoryData(key, currentData)
// ************** 记录【删除】后的数据状态 end ************** // ************** 记录【删除】后的数据状态 end **************
this.rightMenuShow = false this.rightMenuShow = false
} }
}, },
addNode (clientX, clientY, nodeType) { addNode(clientX, clientY, nodeType) {
let graph = this.graph const graph = this.graph
if (graph && !graph.destroyed) { if (graph && !graph.destroyed) {
// ************** 记录【添加节点】前的数据状态 start ************** // ************** 记录【添加节点】前的数据状态 start **************
let historyData = JSON.stringify(graph.save()) const historyData = JSON.stringify(graph.save())
let key = `graph_history_${this.historyIndex}` const key = `graph_history_${this.historyIndex}`
this.addHistoryData(key, historyData) this.addHistoryData(key, historyData)
// ************** 记录【添加节点】前的数据状态 end ************** // ************** 记录【添加节点】前的数据状态 end **************
// 开始添加 // 开始添加
let droppoint = graph.getPointByClient(clientX, clientY) const droppoint = graph.getPointByClient(clientX, clientY)
let node = graph.addItem('node', { const node = graph.addItem('node', {
id: utils.generateUUID(), id: utils.generateUUID(),
x: droppoint.x, x: droppoint.x,
y: droppoint.y, y: droppoint.y,
...@@ -740,23 +810,23 @@ export default { ...@@ -740,23 +810,23 @@ export default {
if (this.undoCount > 0) { if (this.undoCount > 0) {
this.historyIndex = this.historyIndex - this.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置 this.historyIndex = this.historyIndex - this.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置
for (let i = 1; i <= this.undoCount; i++) { for (let i = 1; i <= this.undoCount; i++) {
let key = `graph_history_${this.historyIndex + i}` const key = `graph_history_${this.historyIndex + i}`
this.removeHistoryData(key) this.removeHistoryData(key)
} }
this.undoCount = 0 this.undoCount = 0
} }
// 记录【添加节点】后的数据状态 // 记录【添加节点】后的数据状态
this.historyIndex += 1 this.historyIndex += 1
let key = `graph_history_${this.historyIndex}` const key = `graph_history_${this.historyIndex}`
let currentData = JSON.stringify(graph.save()) const currentData = JSON.stringify(graph.save())
this.addHistoryData(key, currentData) this.addHistoryData(key, currentData)
} }
// ************** 记录【添加节点】后的数据状态 end ************** // ************** 记录【添加节点】后的数据状态 end **************
} }
}, },
unselectAllNodes () { unselectAllNodes() {
}, },
addHistoryData (key, value) { addHistoryData(key, value) {
try { try {
sessionStorage.setItem(key, value) sessionStorage.setItem(key, value)
} catch (oException) { } catch (oException) {
...@@ -771,55 +841,55 @@ export default { ...@@ -771,55 +841,55 @@ export default {
} }
} }
}, },
getHistoryData (key) { getHistoryData(key) {
return sessionStorage.getItem(key) return sessionStorage.getItem(key)
}, },
removeHistoryData (key) { removeHistoryData(key) {
sessionStorage.removeItem(key) sessionStorage.removeItem(key)
}, },
clearHistoryData () { clearHistoryData() {
let keys = Object.keys(sessionStorage) const keys = Object.keys(sessionStorage)
keys.forEach(key => { keys.forEach(key => {
if (key.startsWith('graph_history')) { if (key.startsWith('graph_history')) {
sessionStorage.removeItem(key) sessionStorage.removeItem(key)
} }
}) })
}, },
onresizeHandler () { onresizeHandler() {
// 实时监听窗口大小变化 // 实时监听窗口大小变化
let self = this const self = this
clearTimeout(this.onresizeTimeout) clearTimeout(this.onresizeTimeout)
this.onresizeTimeout = setTimeout(() => { this.onresizeTimeout = setTimeout(() => {
let graph = self.graph const graph = self.graph
if (graph && !graph.destroyed) { if (graph && !graph.destroyed) {
let graphContainer = self.$refs.graphContainer.$el const graphContainer = self.$refs.graphContainer.$el
let graphWidth = graphContainer.clientWidth - 20 const graphWidth = graphContainer.clientWidth - 20
let graphHeight = graphContainer.clientHeight - 20 const graphHeight = graphContainer.clientHeight - 20
graph.changeSize(graphWidth, graphHeight) graph.changeSize(graphWidth, graphHeight)
} }
}, 1000) }, 1000)
}, },
/* 暴露给外部的接口 */ /* 暴露给外部的接口 */
refreshGraph () { refreshGraph() {
let graph = this.graph const graph = this.graph
if (graph && !graph.destroyed) { if (graph && !graph.destroyed) {
graph.refresh() graph.refresh()
} }
}, },
getGraphData () { getGraphData() {
let graph = this.graph const graph = this.graph
if (graph && !graph.destroyed) { if (graph && !graph.destroyed) {
// FIXME... graph.uncombo() 后，combos 依旧存在 graph.save() 中。 // FIXME... graph.uncombo() 后，combos 依旧存在 graph.save() 中。
let {nodes, edges, groups, combos} = graph.save() const { nodes, edges, groups, combos } = graph.save()
let nodeComboIds = [] const nodeComboIds = []
nodes.forEach(node => { nodes.forEach(node => {
let nodeComboId = node.comboId const nodeComboId = node.comboId
if (typeof nodeComboId !== 'undefined' && nodeComboIds.indexOf(nodeComboId) < 0) { if (typeof nodeComboId !== 'undefined' && nodeComboIds.indexOf(nodeComboId) < 0) {
nodeComboIds.push(nodeComboId) nodeComboIds.push(nodeComboId)
} }
}) })
graph.findAll('combo', combo => { graph.findAll('combo', combo => {
let comboId = combo.get('model').id const comboId = combo.get('model').id
if (nodeComboIds.indexOf(comboId) < 0) { if (nodeComboIds.indexOf(comboId) < 0) {
console.log('G6 bug') console.log('G6 bug')
_.remove(combos, combo => { _.remove(combos, combo => {
...@@ -832,44 +902,44 @@ export default { ...@@ -832,44 +902,44 @@ export default {
return { nodes: [], edges: [], groups: [], combos: [] } return { nodes: [], edges: [], groups: [], combos: [] }
} }
}, },
changeGraphData (data) { changeGraphData(data) {
let graph = this.graph const graph = this.graph
if (graph && !graph.destroyed) { if (graph && !graph.destroyed) {
graph.changeData(data) graph.changeData(data)
graph.refresh() graph.refresh()
} }
}, },
changeGraphSize (graphWidth = 0, graphHeight = 0) { changeGraphSize(graphWidth = 0, graphHeight = 0) {
let graph = this.graph const graph = this.graph
if (graph && !graph.destroyed) { if (graph && !graph.destroyed) {
let graphContainer = this.$refs.graphContainer.$el const graphContainer = this.$refs.graphContainer.$el
graphWidth = graphWidth || graphContainer.clientWidth - 20 graphWidth = graphWidth || graphContainer.clientWidth - 20
graphHeight = graphHeight || graphContainer.clientHeight - 20 graphHeight = graphHeight || graphContainer.clientHeight - 20
graph.changeSize(graphWidth, graphHeight) graph.changeSize(graphWidth, graphHeight)
} }
}, },
changeGraphMode (graphData, graphMode) { changeGraphMode(graphData, graphMode) {
this.graphMode = graphMode this.graphMode = graphMode
this.initTopo(graphData) this.initTopo(graphData)
}, },
changeGraphTheme (themeValue) { changeGraphTheme(themeValue) {
let graph = this.graph const graph = this.graph
if (graph && !graph.destroyed) { if (graph && !graph.destroyed) {
let nodes = graph.getNodes() const nodes = graph.getNodes()
let edges = graph.getEdges() const edges = graph.getEdges()
switch (themeValue) { switch (themeValue) {
case 'darkStyle': case 'darkStyle':
this.graphBg = 'dark-style' this.graphBg = 'dark-style'
graph.$T = theme.darkStyle graph.$T = theme.darkStyle
for (let i = 0, len = edges.length; i < len; i++) { for (let i = 0, len = edges.length; i < len; i++) {
let edge = edges[i] const edge = edges[i]
let edgeModel = edge.getModel() const edgeModel = edge.getModel()
edgeModel.style = graph.$T.edgeStyle.default edgeModel.style = graph.$T.edgeStyle.default
edge.update(edgeModel) edge.update(edgeModel)
} }
for (let i = 0, len = nodes.length; i < len; i++) { for (let i = 0, len = nodes.length; i < len; i++) {
let node = nodes[i] const node = nodes[i]
let nodeModel = node.getModel() const nodeModel = node.getModel()
nodeModel.labelCfg = graph.$T.nodeLabelCfg nodeModel.labelCfg = graph.$T.nodeLabelCfg
node.update(nodeModel) node.update(nodeModel)
} }
...@@ -879,14 +949,14 @@ export default { ...@@ -879,14 +949,14 @@ export default {
this.graphBg = 'office-style' this.graphBg = 'office-style'
graph.$T = theme.officeStyle graph.$T = theme.officeStyle
for (let i = 0, len = edges.length; i < len; i++) { for (let i = 0, len = edges.length; i < len; i++) {
let edge = edges[i] const edge = edges[i]
let edgeModel = edge.getModel() const edgeModel = edge.getModel()
edgeModel.style = graph.$T.edgeStyle.default edgeModel.style = graph.$T.edgeStyle.default
edge.update(edgeModel) edge.update(edgeModel)
} }
for (let i = 0, len = nodes.length; i < len; i++) { for (let i = 0, len = nodes.length; i < len; i++) {
let node = nodes[i] const node = nodes[i]
let nodeModel = node.getModel() const nodeModel = node.getModel()
nodeModel.labelCfg = graph.$T.nodeLabelCfg nodeModel.labelCfg = graph.$T.nodeLabelCfg
node.update(nodeModel) node.update(nodeModel)
} }
...@@ -896,14 +966,14 @@ export default { ...@@ -896,14 +966,14 @@ export default {
this.graphBg = 'default-style' this.graphBg = 'default-style'
graph.$T = theme.defaultStyle graph.$T = theme.defaultStyle
for (let i = 0, len = edges.length; i < len; i++) { for (let i = 0, len = edges.length; i < len; i++) {
let edge = edges[i] const edge = edges[i]
let edgeModel = edge.getModel() const edgeModel = edge.getModel()
edgeModel.style = graph.$T.edgeStyle.default edgeModel.style = graph.$T.edgeStyle.default
edge.update(edgeModel) edge.update(edgeModel)
} }
for (let i = 0, len = nodes.length; i < len; i++) { for (let i = 0, len = nodes.length; i < len; i++) {
let node = nodes[i] const node = nodes[i]
let nodeModel = node.getModel() const nodeModel = node.getModel()
nodeModel.labelCfg = graph.$T.nodeLabelCfg nodeModel.labelCfg = graph.$T.nodeLabelCfg
node.update(nodeModel) node.update(nodeModel)
} }
...@@ -911,88 +981,23 @@ export default { ...@@ -911,88 +981,23 @@ export default {
} }
} }
}, },
downloadFullImage () { downloadFullImage() {
let graph = this.graph const graph = this.graph
if (graph && !graph.destroyed) { if (graph && !graph.destroyed) {
let name = 'graph_' + _.now() const name = 'graph_' + _.now()
graph.downloadFullImage(name, 'image/png', { graph.downloadFullImage(name, 'image/png', {
backgroundColor: 'transparent', backgroundColor: 'transparent',
padding: [30, 15, 15, 15] padding: [30, 15, 15, 15]
}) })
} }
}, },
downloadImage () { downloadImage() {
let graph = this.graph const graph = this.graph
if (graph && !graph.destroyed) { if (graph && !graph.destroyed) {
let name = 'graph_' + _.now() const name = 'graph_' + _.now()
graph.downloadImage(name, 'image/png', 'transparent') graph.downloadImage(name, 'image/png', 'transparent')
} }
} }
},
watch: {
layoutType () {
this.initTopo(this.graphData)
},
graphMode () {
this.changeGraphSize()
},
selectedNodeParams: {
deep: true,
handler: function (newVal, oldVal) {
let selectedNodeModel = this.selectedNode.getModel()
if (utils.isObjectValueEqual(selectedNodeModel.appConfig, newVal.appConfig) && selectedNodeModel.label === newVal.label) {
return
}
// 实时监听input值的变化，停止输入500ms后执行update，而不是时时update
clearTimeout(this.selectedNodeParamsTimeout)
this.selectedNodeParamsTimeout = setTimeout(() => {
selectedNodeModel.label = newVal.label
selectedNodeModel.appConfig = newVal.appConfig
this.selectedNode.update(selectedNodeModel)
}, 500)
}
},
selectedEdgeParams: {
deep: true,
handler: function (newVal, oldVal) {
let selectedEdgeModel = this.selectedEdge.getModel()
if (utils.isObjectValueEqual(selectedEdgeModel.appConfig, newVal.appConfig) && selectedEdgeModel.label === newVal.label) {
return
}
// 实时监听input值的变化，停止输入500ms后执行update，而不是时时update
clearTimeout(this.selectedEdgeParamsTimeout)
this.selectedEdgeParamsTimeout = setTimeout(() => {
let selectedEdgeModel = this.selectedEdge.getModel()
selectedEdgeModel.label = newVal.label
selectedEdgeModel.appConfig = newVal.appConfig
this.selectedEdge.update(selectedEdgeModel)
}, 500)
}
},
selectedComboParams: {
deep: true,
handler: function (newVal, oldVal) {
let selectedComboModel = this.selectedCombo.getModel()
if (selectedComboModel.label === newVal.label &&
selectedComboModel.labelCfg.position === newVal.labelPosition &&
selectedComboModel.labelCfg.refX === newVal.labelRefX &&
selectedComboModel.labelCfg.refY === newVal.labelRefY &&
selectedComboModel.type === newVal.type) {
return
}
// 实时监听input值的变化，停止输入500ms后执行update，而不是时时update
clearTimeout(this.selectedComboParamsTimeout)
this.selectedComboParamsTimeout = setTimeout(() => {
let selectedComboModel = this.selectedCombo.getModel()
selectedComboModel.label = newVal.label
selectedComboModel.labelCfg.position = newVal.labelPosition ? newVal.labelPosition : 'top'
selectedComboModel.labelCfg.refX = newVal.labelRefX ? newVal.labelRefX : 0
selectedComboModel.labelCfg.refY = newVal.labelRefY ? newVal.labelRefY : 0
selectedComboModel.type = newVal.type ? newVal.type : 'circle'
this.selectedCombo.update(selectedComboModel)
}, 500)
}
}
} }
} }
</script> </script>
......
public/index.html
View file @ dcd8109d
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>monitorLogo.png"> <link rel="icon" href="<%= BASE_URL %>rongchuanglogo.png">
<!-- <link rel="stylesheet" href="//at.alicdn.com/t/font_2011217_f70ptj9y4oc.css">--> <!-- <link rel="stylesheet" href="//at.alicdn.com/t/font_2011217_f70ptj9y4oc.css">-->
<!-- <title><%= webpackConfig.name %></title>--> <!-- <title><%= webpackConfig.name %></title>-->
<title>网络设备监控管理平台</title> <title>网络设备监控管理平台</title>
......
src/views/demos/topology.vue
View file @ dcd8109d
...@@ -632,7 +632,10 @@ export default { ...@@ -632,7 +632,10 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.el-container { .el-container {
height: 900px!important; position: absolute;
width: calc(100vw - 228px);
height: calc(92.4vh - 95px);
padding: 0 10px;
.el-header { .el-header {
line-height: 60px; line-height: 60px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment