|
@@ -108,10 +108,12 @@
|
|
|
|
|
|
import {
|
|
import {
|
|
getOffset,
|
|
getOffset,
|
|
|
|
+ // eslint-disable-next-line no-unused-vars
|
|
isIntersect,
|
|
isIntersect,
|
|
isBool,
|
|
isBool,
|
|
isFun,
|
|
isFun,
|
|
vector,
|
|
vector,
|
|
|
|
+ // eslint-disable-next-line no-unused-vars
|
|
debounce,
|
|
debounce,
|
|
arrayReplace
|
|
arrayReplace
|
|
} from './utils'
|
|
} from './utils'
|
|
@@ -188,7 +190,7 @@
|
|
default: () => true
|
|
default: () => true
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- data() {
|
|
|
|
|
|
+ data () {
|
|
return {
|
|
return {
|
|
graph: new Graph({
|
|
graph: new Graph({
|
|
width: this.width,
|
|
width: this.width,
|
|
@@ -229,7 +231,7 @@
|
|
MarkLine
|
|
MarkLine
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
- maskStyle() {
|
|
|
|
|
|
+ maskStyle () {
|
|
const {
|
|
const {
|
|
top,
|
|
top,
|
|
right,
|
|
right,
|
|
@@ -244,7 +246,7 @@
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- mounted() {
|
|
|
|
|
|
+ mounted () {
|
|
document.addEventListener('mouseup', this.docMouseup)
|
|
document.addEventListener('mouseup', this.docMouseup)
|
|
document.addEventListener('mousemove', this.docMousemove)
|
|
document.addEventListener('mousemove', this.docMousemove)
|
|
this.$once('hook:beforeDestroy', () => {
|
|
this.$once('hook:beforeDestroy', () => {
|
|
@@ -257,7 +259,7 @@
|
|
})
|
|
})
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- initMenu(menu, source) {
|
|
|
|
|
|
+ initMenu (menu, source) {
|
|
return menu.map(subList => subList
|
|
return menu.map(subList => subList
|
|
.map(item => {
|
|
.map(item => {
|
|
let disable
|
|
let disable
|
|
@@ -289,7 +291,7 @@
|
|
).filter(sublist => sublist.length)
|
|
).filter(sublist => sublist.length)
|
|
},
|
|
},
|
|
|
|
|
|
- showContextMenu(position, list, source) {
|
|
|
|
|
|
+ showContextMenu (position, list, source) {
|
|
if (!list.length) return
|
|
if (!list.length) return
|
|
this.$set(this.menuConf, 'position', position)
|
|
this.$set(this.menuConf, 'position', position)
|
|
this.$set(this.menuConf, 'list', list)
|
|
this.$set(this.menuConf, 'list', list)
|
|
@@ -297,7 +299,7 @@
|
|
this.menuConf.visible = true
|
|
this.menuConf.visible = true
|
|
},
|
|
},
|
|
|
|
|
|
- docMouseup(evt) {
|
|
|
|
|
|
+ docMouseup (evt) {
|
|
if (this.moveNodeConf.isMove) {
|
|
if (this.moveNodeConf.isMove) {
|
|
evt.stopPropagation()
|
|
evt.stopPropagation()
|
|
evt.preventDefault()
|
|
evt.preventDefault()
|
|
@@ -314,7 +316,7 @@
|
|
this.moveAllConf.isMove = false
|
|
this.moveAllConf.isMove = false
|
|
},
|
|
},
|
|
|
|
|
|
- docMousemove(evt) {
|
|
|
|
|
|
+ docMousemove (evt) {
|
|
if (this.moveNodeConf.isMove) {
|
|
if (this.moveNodeConf.isMove) {
|
|
this.moveNode(evt)
|
|
this.moveNode(evt)
|
|
} else if (this.temEdgeConf.visible) {
|
|
} else if (this.temEdgeConf.visible) {
|
|
@@ -329,7 +331,7 @@
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
|
|
- moveNode(evt) {
|
|
|
|
|
|
+ moveNode (evt) {
|
|
const distance = 10
|
|
const distance = 10
|
|
const conf = this.moveNodeConf
|
|
const conf = this.moveNodeConf
|
|
const origin = this.graph.origin
|
|
const origin = this.graph.origin
|
|
@@ -379,12 +381,12 @@
|
|
conf.node.center = position
|
|
conf.node.center = position
|
|
},
|
|
},
|
|
|
|
|
|
- moveTemEdge(evt) {
|
|
|
|
- this.temEdgeConf.link.movePosition
|
|
|
|
- = getOffset(evt, this.$el)
|
|
|
|
|
|
+ moveTemEdge (evt) {
|
|
|
|
+ this.temEdgeConf.link.movePosition =
|
|
|
|
+ getOffset(evt, this.$el)
|
|
},
|
|
},
|
|
|
|
|
|
- moveWhole(evt) {
|
|
|
|
|
|
+ moveWhole (evt) {
|
|
if (this.moveAllConf.isMove) {
|
|
if (this.moveAllConf.isMove) {
|
|
const offset = vector(this.moveAllConf.downPosition)
|
|
const offset = vector(this.moveAllConf.downPosition)
|
|
.differ([evt.clientX, evt.clientY])
|
|
.differ([evt.clientX, evt.clientY])
|
|
@@ -398,7 +400,7 @@
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
|
|
- contextmenu(evt) {
|
|
|
|
|
|
+ contextmenu (evt) {
|
|
const mouseonLink = this.graph.mouseonLink
|
|
const mouseonLink = this.graph.mouseonLink
|
|
const position = getOffset(evt)
|
|
const position = getOffset(evt)
|
|
let list, source
|
|
let list, source
|
|
@@ -419,7 +421,7 @@
|
|
)
|
|
)
|
|
},
|
|
},
|
|
|
|
|
|
- nodeMousedown(node, offset) {
|
|
|
|
|
|
+ nodeMousedown (node, offset) {
|
|
if (this.draggable) {
|
|
if (this.draggable) {
|
|
this.clientWidth = this.$el.clientWidth
|
|
this.clientWidth = this.$el.clientWidth
|
|
this.clientHeight = this.$el.clientHeight
|
|
this.clientHeight = this.$el.clientHeight
|
|
@@ -439,14 +441,13 @@
|
|
...new Set(centerList.map(center => center[1]))
|
|
...new Set(centerList.map(center => center[1]))
|
|
].sort((prev, next) => prev - next))
|
|
].sort((prev, next) => prev - next))
|
|
|
|
|
|
-
|
|
|
|
this.moveNodeConf.isMove = true
|
|
this.moveNodeConf.isMove = true
|
|
this.moveNodeConf.node = node
|
|
this.moveNodeConf.node = node
|
|
this.moveNodeConf.offset = offset
|
|
this.moveNodeConf.offset = offset
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
|
|
- nodeMouseenter(evt, node, offset) {
|
|
|
|
|
|
+ nodeMouseenter (evt, node, offset) {
|
|
const link = this.temEdgeConf.link
|
|
const link = this.temEdgeConf.link
|
|
if (this.enterIntercept(link.start, node, this.graph)) {
|
|
if (this.enterIntercept(link.start, node, this.graph)) {
|
|
link.end = node
|
|
link.end = node
|
|
@@ -454,15 +455,15 @@
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
|
|
- nodeMouseleave() {
|
|
|
|
|
|
+ nodeMouseleave () {
|
|
this.temEdgeConf.link.end = null
|
|
this.temEdgeConf.link.end = null
|
|
},
|
|
},
|
|
|
|
|
|
- nodeMouseup() {
|
|
|
|
|
|
+ nodeMouseup () {
|
|
this.graph.addLink(this.temEdgeConf.link)
|
|
this.graph.addLink(this.temEdgeConf.link)
|
|
},
|
|
},
|
|
|
|
|
|
- nodeContextmenu(evt, node) {
|
|
|
|
|
|
+ nodeContextmenu (evt, node) {
|
|
const list = this.initMenu(this.nodeMenu, node)
|
|
const list = this.initMenu(this.nodeMenu, node)
|
|
if (!list.length) return
|
|
if (!list.length) return
|
|
this.$set(this.menuConf, 'position', getOffset(evt, this.$el))
|
|
this.$set(this.menuConf, 'position', getOffset(evt, this.$el))
|
|
@@ -471,7 +472,7 @@
|
|
this.menuConf.visible = true
|
|
this.menuConf.visible = true
|
|
},
|
|
},
|
|
|
|
|
|
- sideMousedown(evt, node, startAt) {
|
|
|
|
|
|
+ sideMousedown (evt, node, startAt) {
|
|
if (this.linkAddable) {
|
|
if (this.linkAddable) {
|
|
const link = this.graph.createLink({
|
|
const link = this.graph.createLink({
|
|
start: node,
|
|
start: node,
|
|
@@ -483,15 +484,15 @@
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
|
|
- nodeIntercept(node) {
|
|
|
|
|
|
+ nodeIntercept (node) {
|
|
return () => this.outputIntercept(node, this.graph)
|
|
return () => this.outputIntercept(node, this.graph)
|
|
},
|
|
},
|
|
|
|
|
|
- menuItemSelect() {
|
|
|
|
|
|
+ menuItemSelect () {
|
|
this.menuConf.visible = false
|
|
this.menuConf.visible = false
|
|
},
|
|
},
|
|
|
|
|
|
- selectAllMaskMouseDown(evt) {
|
|
|
|
|
|
+ selectAllMaskMouseDown (evt) {
|
|
this.moveAllConf.isMove = true
|
|
this.moveAllConf.isMove = true
|
|
this.moveAllConf.origin = [...this.graph.origin]
|
|
this.moveAllConf.origin = [...this.graph.origin]
|
|
this.moveAllConf.downPosition = [
|
|
this.moveAllConf.downPosition = [
|
|
@@ -500,51 +501,51 @@
|
|
]
|
|
]
|
|
},
|
|
},
|
|
|
|
|
|
- selectedAll() {
|
|
|
|
|
|
+ selectedAll () {
|
|
this.graph.selectAll()
|
|
this.graph.selectAll()
|
|
},
|
|
},
|
|
|
|
|
|
- toJSON() {
|
|
|
|
|
|
+ toJSON () {
|
|
return this.graph.toJSON()
|
|
return this.graph.toJSON()
|
|
},
|
|
},
|
|
|
|
|
|
- getMouseCoordinate(clientX, clientY) {
|
|
|
|
|
|
+ getMouseCoordinate (clientX, clientY) {
|
|
const offset = getOffset({clientX, clientY}, this.$el)
|
|
const offset = getOffset({clientX, clientY}, this.$el)
|
|
return vector(offset)
|
|
return vector(offset)
|
|
.minus(this.graph.origin)
|
|
.minus(this.graph.origin)
|
|
.end
|
|
.end
|
|
},
|
|
},
|
|
|
|
|
|
- addNode(options) {
|
|
|
|
|
|
+ addNode (options) {
|
|
return this.graph.addNode(options)
|
|
return this.graph.addNode(options)
|
|
}
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
watch: {
|
|
- 'graph.graphSelected'() {
|
|
|
|
|
|
+ 'graph.graphSelected' () {
|
|
if (this.graph.graphSelected) {
|
|
if (this.graph.graphSelected) {
|
|
this.$nextTick(() => {
|
|
this.$nextTick(() => {
|
|
this.$refs.selectAllMask.focus()
|
|
this.$refs.selectAllMask.focus()
|
|
})
|
|
})
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- 'graph.mouseonLink'() {
|
|
|
|
|
|
+ 'graph.mouseonLink' () {
|
|
if (this.graph.mouseonLink) {
|
|
if (this.graph.mouseonLink) {
|
|
document.body.style.cursor = 'pointer'
|
|
document.body.style.cursor = 'pointer'
|
|
} else {
|
|
} else {
|
|
document.body.style.cursor = ''
|
|
document.body.style.cursor = ''
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- origin() {
|
|
|
|
|
|
+ origin () {
|
|
this.graph.origin = this.origin || []
|
|
this.graph.origin = this.origin || []
|
|
},
|
|
},
|
|
- nodeList() {
|
|
|
|
|
|
+ nodeList () {
|
|
this.graph.initNode(this.nodeList)
|
|
this.graph.initNode(this.nodeList)
|
|
},
|
|
},
|
|
- linkList() {
|
|
|
|
|
|
+ linkList () {
|
|
this.graph.initLink(this.linkList)
|
|
this.graph.initLink(this.linkList)
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- install(Vue) {
|
|
|
|
|
|
+ install (Vue) {
|
|
Vue.component(this.name, this)
|
|
Vue.component(this.name, this)
|
|
}
|
|
}
|
|
}
|
|
}
|