Skip to content

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

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

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