gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

NEZ-2034 fix：优化 缩放相关 导致的位置不正确的问题

Browse Source
This commit is contained in:
zhangyu
2022-08-10 15:41:08 +08:00
parent fa6d3fe15d
commit 19c9e67ac3
7 changed files with 106 additions and 449 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/src/components/common/nezhaColor.vue
View File

@@ -100,11 +100,11 @@ export default {
if (!this.isTopo) {
this.keyName = this.valueArr[0].name
this.colors = this.valueArr[0].value || randomcolor() + 'FF'
this.$emit('colorChange', this.colors, this.keyName)
} else {
this.keyName = this.valueArr[0].name
this.colors = this.valueArr[0].value
}
this.$emit('colorChange', this.colors, this.keyName)
},
methods: {
updateValue (color) {

1
nezha-fronted/src/components/common/project/L5/CanvasProps.vue
View File

@@ -1448,7 +1448,6 @@ export default {
},
'selection.pen.data': {
handler (n, o) {
// this.loading = false
if (this.selection.pen && JSON.stringify(this.selection.pen.type) && (JSON.stringify(n) !== JSON.stringify(o)) && o) {
this.$emit('change', this.selection.pen)
}

53
nezha-fronted/src/components/common/project/L5/services/canvas.js
View File

@@ -5,23 +5,23 @@ export const Tools = [
{
group: 'General',
children: [
{
name: 'rectangle',
icon: 'icon-cube',
data: {
rect: {
width: 100,
height: 100
},
is3D: true,
z: 20,
zRotate: 15,
name: 'myCube',
iconFamily: 'topology',
iconColor: '#777',
iconSize: 30
}
},
// {
// name: 'rectangle',
// icon: 'icon-cube',
// data: {
// rect: {
// width: 100,
// height: 100
// },
// is3D: true,
// z: 20,
// zRotate: 15,
// name: 'myCube',
// iconFamily: 'topology',
// iconColor: '#777',
// iconSize: 30
// }
// },
{
name: 'rectangle',
icon: 'icon-rect',
@@ -142,19 +142,18 @@ export const imageTemp = {
icon: 'icon-image',
data: {
type: 0,
rect: {
x: 922,
y: 406,
width: 100,
height: 100
},
height: 100,
imageRatio: false,
lineWidth: 0,
rotate: 0,
offsetRotate: 0,
globalAlpha: 1,
dash: 0,
strokeStyle: '#000000',
lineDash: [],
color: '#000000',
background: '#ffffff00',
animatePos: 0,
name: 'rectangleImg',
lineDashOffset: 0,
@@ -200,8 +199,9 @@ export const imageTemp2 = {
rotate: 0,
offsetRotate: 0,
globalAlpha: 1,
dash: 0,
strokeStyle: '#000000',
lineDash: [],
color: '#000000',
background: '#ffffff00',
animatePos: 0,
name: 'rectangleImg2',
lineDashOffset: 0,
@@ -261,7 +261,6 @@ export function rectangleImg (ctx, pen) {
}
export function rectangleImgAnchors (pen) {
const anchors = []
// console.log(pen)
anchors.push({
id: '0',
penId: pen.id,
@@ -304,6 +303,8 @@ export function disposeTopoOldData (pen, allPen) { // 处理旧数据
obj = {
id: pen.id,
data: pen.data,
keepDecimal: 2,
scale: 1,
valueMapping: pen.valueMapping,
tags: [
@@ -396,10 +397,12 @@ export function disposeTopoOldData (pen, allPen) { // 处理旧数据
const height = pen.from.y - pen.to.y
obj = {
id: pen.id,
keepDecimal: 2,
tags: [
],
name: 'line',
scale: 1,
lineName: pen.name,
type: pen.type,
autoPolyline: true,

5
nezha-fronted/src/components/common/project/L5/topologyTopTool.vue
View File

@@ -98,7 +98,7 @@ export default {
}
},
mounted () {
const dataOption = getTopology(this.index).data
const dataOption = getTopology(this.index).store.data
Object.keys(this.option).forEach(key => {
if (key === 'scale') {
this.scaleNum = (JSON.stringify(dataOption[key]) ? parseInt(dataOption[key] * 100) : this.scaleNum)
@@ -112,7 +112,6 @@ export default {
// getTopology(this.index).data[key] = this.option[key]
const obj = {}
obj[key] = this.option[key]
console.log(obj)
if (key === 'grid') {
getTopology(this.index).setGrid(obj)
} else {
@@ -144,7 +143,7 @@ export default {
},
scale (val) {
this.scaleNum = val
getTopology(this.index).scaleTo(val / 100)
getTopology(this.index).scale(val / 100)
},
del () {
const delObj = this.selection.pen ? [this.selection.pen] : this.selection.pens

355
nezha-fronted/src/components/common/project/newTopologyL5.vue
View File

@@ -1197,359 +1197,6 @@ export default {
clearTimeout(timer)
}, 100)
},
onMessage (event, data, e) {
// console.log('onMessage', event, data)
// console.log(getTopology(this.topologyIndex))
this.notModuleIDArr = []
// this.toolShow.attr = false
// this.toolShow.topTool = false
// this.$nextTick(() => {
// this.toolShow.attr = true
// this.toolShow.topTool = true
// })
if (data) {
this.notModuleIDArr.forEach(item => {
if (item.id === data.id) {
item.rect = data.rect
}
})
}
if (!Array.isArray(data) && data) { // 判断不是数组 提前个data配置好节点属性
if (data.type === 0 && !data.data.moduleId) {
if (!data.fillStyle) {
data.fillStyle = '#FFFFFF00'
}
data.data = {
moduleId: '',
moduleName: '',
show: false,
error: false,
animatePlay: false,
fillStyle: data.fillStyle || '#ffffff',
strokeStyle: data.strokeStyle || '#ffffff',
gradientColor: '#bae7ff',
gradientType: 0,
lineWidth: this.nodeDefaultWidth(data.name),
iconToolState: true,
// chart 配置项
valueMapping: [{
color: {
line: '#000000',
fill: '#ffffff',
text: '#000000'
},
value: 'base',
animateType: 'base',
level: 0,
base: true
}],
valueMappingSort: 'asc',
expressArr: [''],
expressAllArr: [''],
legends: [''],
legendsAll: [''],
tooltipShow: true,
valueMappingShow: true,
panelName: 'topologyName',
unit: 2,
type: 'line',
displayChart: true,
aggregation: 'last',
title: '',
url: '',
...data.data
}
} else if (data.type == 1 && !data.data) {
// 连线是否自动计算锚点
// data.manualCps=true;
data.animateColor = '#FA901C'
data.toArrowColor = '#000000'
data.data = {
animatePlay: false,
strokeStyle: data.strokeStyle,
animateColor: data.animateColor,
arrowColor: '#000000',
fromArrowColor: '#000000',
toArrowColor: '#000000',
lineWidth: 1,
// chart 配置项
valueMapping: [{
color: {
line: '#000000',
fill: '#ffffff',
text: '#000000'
},
value: 'base',
animateType: 'base',
level: 0,
base: true
}],
valueMappingSort: 'asc', /* desc */
expressArr: [''],
expressAllArr: [''],
legends: [''],
legendsAll: [''],
tooltipShow: true,
valueMappingShow: true,
panelName: 'topologyName',
unit: 2,
type: 'line',
displayChart: true,
aggregation: 'last',
title: '',
moduleName: '',
url: ''
}
}
if (data.type === 0 || data.type === 1) {
data.lineWidth = data.data.lineWidth
}
}
switch (event) {
case 'moveInNode':
case 'moveInLine':
if (this.timer3) {
clearTimeout(this.timer3)
this.timer3 = null
}
this.chartData = { ...data.data, ...this.chartGetData.find(item => item.id === data.id) }
this.tooltipPosition.show = false
const timer = setTimeout(() => {
this.tooltipPosition.show = true
let ePosition = window.ePosition
let boxWidth = document.getElementsByClassName('page')[0].offsetWidth
let boxHeight = document.getElementsByClassName('page')[0].offsetHeight
this.tooltipPosition.left = ePosition.layerX + 20
this.tooltipPosition.top = ePosition.layerY
this.$nextTick(() => {
if (this.$refs.topoTooltip) {
if ((boxWidth / 2) > ePosition.layerX) {
this.tooltipPosition.left = ePosition.layerX + 20
} else {
this.tooltipPosition.left = ePosition.layerX - 20 - this.$refs.topoTooltip.offsetWidth
}
if (boxHeight > (ePosition.layerY + this.$refs.topoTooltip.offsetHeight)) {
this.tooltipPosition.top = ePosition.layerY
} else {
this.tooltipPosition.top = ePosition.layerY - this.$refs.topoTooltip.offsetHeight
}
}
ePosition = null
boxWidth = null
boxHeight = null
})
clearTimeout(timer)
}, 100)
break
case 'moveOutNode':
case 'moveOutLine':
// this.tooltipPosition.show=false;
// return
if (!this.timer3) {
this.timer3 = setTimeout(() => {
this.tooltipPosition.show = false
this.timer3 = null
}, 50)
} else {
clearTimeout(this.timer3)
this.timer3 = setTimeout(() => {
this.tooltipPosition.show = false
this.timer3 = null
}, 50)
}
break
}
// 右侧输入框编辑状态时点击编辑区域其他元素，onMessage执行后才执行onUpdateProps方法，通过setTimeout让onUpdateProps先执行
const timer = setTimeout(() => {
switch (event) {
case 'node':
case 'addNode':
this.modulesDiff(data)
if (data.data.expressArr.length === 0 && event !== 'node') {
data.data.expressArr.push('')
data.data.legends.push('')
}
if (data.data.expressAllArr.length === 0 && event !== 'node') {
data.data.expressAllArr.push('')
data.data.legendsAll.push('')
}
this.props = {
node: data,
line: null,
multi: false,
expand: this.props.expand,
nodes: null,
locked: data.locked,
pen: data,
pens: null
}
this.$nextTick(() => {
if (this.$refs.CanvasProps) {
if (this.penId !== data.id) {
this.$refs.CanvasProps.tab = '1'
}
this.penId = data.id
}
})
this.$refs.CanvasProps && (this.$refs.CanvasProps.loading = true)
break
case 'line':
case 'addLine':
this.props = {
node: null,
line: data,
multi: false,
nodes: null,
locked: data.locked,
pen: data,
pens: null
}
this.$nextTick(() => {
if (this.$refs.CanvasProps) {
if (this.penId !== data.id) {
this.$refs.CanvasProps.tab = '1'
}
this.penId = data.id
}
})
this.$refs.CanvasProps && (this.$refs.CanvasProps.loading = true)
break
case 'multi':
this.props = {
node: null,
line: null,
multi: true,
nodes: data.length > 1 ? data : null,
locked: this.getLocked({ nodes: data }),
pen: null,
pens: data.length > 1 ? data : null
}
break
case 'space':
this.penId = undefined
this.props = {
node: null,
line: null,
multi: false,
nodes: null,
locked: false,
pen: null,
pens: null
}
break
case 'moveOut':
break
case 'moveNodes':
case 'resizeNodes':
if (data.length > 1) {
this.props = {
node: null,
line: null,
multi: true,
nodes: data,
locked: this.getLocked({ nodes: data }),
pen: null,
pens: null
}
} else {
this.props = {
node: data[0],
line: null,
multi: false,
nodes: null,
locked: false,
pen: data[0],
pens: null
}
}
break
case 'resize': {
let dom = document.getElementById('topology-canvas' + this.topologyIndexF)
let domRect = dom ? dom.getBoundingClientRect() : {}
if (getTopology(this.topologyIndex)) {
getTopology(this.topologyIndex).canvasPos = domRect
}
dom = null
domRect = null
break
}
case 'scale': {
if (this.$refs.topTool) {
this.$refs.topTool.scaleNum = parseInt(data * 100)
}
let dom = document.getElementById('topology-canvas' + this.topologyIndexF)
let domRect = dom ? dom.getBoundingClientRect() : {}
if (getTopology(this.topologyIndex)) {
getTopology(this.topologyIndex).canvasPos = domRect
}
dom = null
domRect = null
break
}
case 'locked': {
this.props = {
node: null,
line: null,
multi: false,
nodes: null,
locked: false,
pen: null,
pens: null
}
break
}
case 'delete': {
this.props = {
node: null,
line: null,
multi: false,
nodes: null,
locked: false,
pen: null,
pens: null
}
break
}
}
switch (event) {
case 'node':
case 'line':
case 'space':
case 'scale':
case 'translate':
this.moduleId = ''
this.showNodeTools('')
this.popDataShowUpdate('', false)
if (!this.editTopologyFlag) {
getTopology(this.topologyIndex)
}
break
}
switch (event) {
case 'space':
case 'scale':
case 'translate':
this.getNodesArr()
// if(!this.timer2){
// this.timer2=setTimeout(()=>{
// this.getNodesArr();
// this.timer2=null
// },300)
// }else{
// clearTimeout(this.timer2);
// this.timer2=setTimeout(()=>{
// this.getNodesArr();
// this.timer2=null
// },300)
// }
break
}
clearTimeout(timer)
}, 0)
},
getLocked (data) {
let locked = true
if (data.nodes && data.nodes.length) {
@@ -2260,7 +1907,7 @@ export default {
this.uploadPicShow = true
},
zoomMap (num) {
getTopology(this.topologyIndex).scaleTo(getTopology(this.topologyIndex).data.scale + num)
getTopology(this.topologyIndex).scale(getTopology(this.topologyIndex).data.scale + num)
},
penToBottom () {
getTopology(this.topologyIndex).bottom()

60
nezha-fronted/src/components/common/project/topologyL5.vue
View File

@@ -365,7 +365,7 @@ import {
// myIconRect,
// myTextRect,
onChangeAnimate,
onChangeAnimateLine,
onChangeAnimateLine
// myCubec,
// myCubeAnchors
} from './L5/services/canvas.js'
@@ -682,7 +682,7 @@ export default {
return new Promise((resolve, reject) => {
Promise.all(arr).then((res) => {
this.chartGetData[index].res = JSON.parse(JSON.stringify(this.computeData(res, pen.data.aggregation, pen)))
this.setAnimation(pen, this.chartGetData[index].res, data.oldData)
this.setAnimation(pen, this.chartGetData[index].res, !data.newData)
resolve()
})
})
@@ -713,7 +713,6 @@ export default {
if (!getTopology(this.topologyIndex)) {
return
}
console.log(data)
getTopology(this.topologyIndex).open(data)
getTopology(this.topologyIndex).lock(1)
this.objChange = false
@@ -730,12 +729,17 @@ export default {
if (item.x + item.width > position.x || item.y + item.height > position.y) {
if (this.fromOverView) {
getTopology(this.topologyIndex).fitView(20)
getTopology(this.topologyIndex).centerView()
} else {
getTopology(this.topologyIndex).centerView()
}
flag = true
}
})
if (!flag) {
setTimeout(() => {
getTopology(this.topologyIndex).centerView()
})
}
getTopology(this.topologyIndex).resize()
this.penToolTipScale = getTopology(this.topologyIndex).data().scale
@@ -793,7 +797,6 @@ export default {
return
}
data = this.$loadsh.cloneDeep(data)
console.log(Option)
const canvasOptions = {
rotateCursor: '/static/roteCursor.cur',
disableEmptyLine: true,
@@ -814,23 +817,22 @@ export default {
// getTopology(this.topologyIndex).open(data)
}
this.topologyLoading = false
// getTopology(this.topologyIndex).register(flowPens())
// getTopology(this.topologyIndex).register(activityDiagram())
// getTopology(this.topologyIndex).register(classPens())
// getTopology(this.topologyIndex).register(sequencePens())
// getTopology(this.topologyIndex).registerCanvasDraw(sequencePensbyCtx())
// getTopology(this.topologyIndex).registerCanvasDraw(formPens())
getTopology(this.topologyIndex).register(flowPens())
getTopology(this.topologyIndex).register(activityDiagram())
getTopology(this.topologyIndex).register(classPens())
getTopology(this.topologyIndex).register(sequencePens())
getTopology(this.topologyIndex).registerCanvasDraw(sequencePensbyCtx())
getTopology(this.topologyIndex).registerCanvasDraw(formPens())
getTopology(this.topologyIndex).registerCanvasDraw({ rectangleImg: rectangleImg })
// getTopology(this.topologyIndex).registerAnchors({ rectangleImg: rectangleImgAnchors })
getTopology(this.topologyIndex).registerAnchors({ rectangleImg: rectangleImgAnchors })
getTopology(this.topologyIndex).on('translate', this.topTranslate) // 平移·
getTopology(this.topologyIndex).on('active', this.pensActive) // 选中·
getTopology(this.topologyIndex).on('scale', () => {}) // 缩放·
getTopology(this.topologyIndex).on('scale', this.topoScale) // 缩放·
getTopology(this.topologyIndex).on('translatePens', () => {}) // 移动画笔结束·
getTopology(this.topologyIndex).on('translatingPens', () => {}) // 移动画笔进行中·
getTopology(this.topologyIndex).on('add', this.appPen) // 添加新画笔·
getTopology(this.topologyIndex).on('click', this.topoClick) // click画笔·
getTopology(this.topologyIndex).store.options.autoAnchor = true
// getTopology(this.topologyIndex).on('contextmenu', this.onContextMenu) // 添加新画笔·
this.getModule()// 获取module
resolve()
})
@@ -842,11 +844,9 @@ export default {
resolve(this.topoPrevDataS)
}
this.$get('monitor/project/topo', { projectId: this.obj.id }).then(res => {
console.log(JSON.stringify(res.data.topo))
if (!res.data) {
return
}
res.data.topo && (res.data.topo.oldData = 0)
let data = JSON.parse(JSON.stringify(res.data.topo))
if (!res.data.topo || !res.data.topo.pens.length) {
this.showNoData = true
@@ -934,16 +934,14 @@ export default {
item.data.state.alert = false
}
})
if (res.data.topo.oldData == 1) {
if (!res.data.topo.newData) {
data.pens = this.$loadsh.orderBy(data.pens, 'type', 'desc') // 先处理线 再处理点 因为新版本 将连线开始结束放在的 点上控制
console.log(data.pens[0])
data.pens = data.pens.map(item => {
if (item.type === 0) {
item = disposeTopoOldData(item, data.pens)
} else {
// promiseArr.push({ type: 1 })
if (item.from) {
console.log('from')
const find = data.pens.find(item1 => item1.id == item.from.id)
if (!find.connectedLines) {
find.connectedLines = []
@@ -955,7 +953,6 @@ export default {
})
}
if (item.to) {
console.log('from')
const find = data.pens.find(item1 => item1.id == item.to.id)
if (!find.connectedLines) {
find.connectedLines = []
@@ -972,7 +969,6 @@ export default {
})
data.pens = this.$loadsh.orderBy(data.pens, 'type', 'asc')
}
console.log(data.pens)
if (!data.data) {
this.projectInfoShow = true
this.projectAlertShow = true
@@ -1007,7 +1003,6 @@ export default {
}
})
this.saveData = JSON.parse(JSON.stringify(data))
console.log(JSON.stringify(data))
resolve(data)
clearInterval(this.timer4)
this.timer4 = null
@@ -1161,7 +1156,6 @@ export default {
let arr = []
this.offsetX = getTopology(this.topologyIndex).data().x
this.offsetY = getTopology(this.topologyIndex).data().y
console.log(this.offsetX, this.offsetY)
arr = getTopology(this.topologyIndex).data().pens.filter(item => {
if (!item.data) {
item.data = {
@@ -1260,7 +1254,6 @@ export default {
this.dragFlag = true
clearTimeout(timer)
}, 100)
console.log(node)
event.dataTransfer.setData('Text', JSON.stringify({ ...node.data, ...node.data.rect, data: { imageId: node.data.imageId } }))
},
dragFlagChange (node) {
@@ -1556,9 +1549,7 @@ export default {
break
}
case 'scale': {
if (this.$refs.topTool) {
this.$refs.topTool.scaleNum = parseInt(data * 100)
}
let dom = document.getElementById('topology-canvas' + this.topologyIndexF)
let domRect = dom ? dom.getBoundingClientRect() : {}
if (getTopology(this.topologyIndex)) {
@@ -1652,8 +1643,7 @@ export default {
return locked
},
onUpdateProps (node) {
console.log(node)
onUpdateProps (node) { // 更新pen
getTopology(this.topologyIndex).setValue(node)
},
@@ -2026,14 +2016,8 @@ export default {
}
getTopology(this.topologyIndex)._setValue(item)
})
getTopology(this.topologyIndex).caches = {
index: 0,
list: [JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data()))]
}
getTopology(this.topologyIndex).render()
const dom = document.getElementById('topology-canvas' + this.topologyIndexF)
const domRect = dom ? dom.getBoundingClientRect() : {}
getTopology(this.topologyIndex).canvasPos = domRect
getTopology(this.topologyIndex).render(true)
getTopology(this.topologyIndex).centerView()
clearTimeout(timer)
})
},
@@ -2067,7 +2051,7 @@ export default {
this.editTopologyFlag = true
this.showNoData = false
const topologyData = getTopology(this.topologyIndex).data()
topologyData.oldData = 0
topologyData.newData = 1
let flag = true
const arr = []
this.notModuleIDArr = []
@@ -2341,7 +2325,7 @@ export default {
this.uploadPicShow = true
},
zoomMap (num) {
getTopology(this.topologyIndex).scaleTo(getTopology(this.topologyIndex).data().scale + num)
getTopology(this.topologyIndex).scale(getTopology(this.topologyIndex).data().scale + num)
},
penToBottom () {
getTopology(this.topologyIndex).bottom()

29
nezha-fronted/src/components/common/project/topologyMixin.js
View File

@@ -6,6 +6,7 @@ export default {
},
methods: {
appPen (pen) {
this.modulesDiff()
const data = pen[0]
if (data.type === 0 && !data.data.moduleId) {
data.background = '#FFFFFF00'
@@ -105,9 +106,20 @@ export default {
}
},
pensActive (pens) {
console.log(pens)
this.props = {
node: null,
line: null,
multi: false,
expand: null,
nodes: null,
locked: null,
pen: null,
pens: null
}
if (!pens.length) return
this.$nextTick(() => {
if (pens.length == 1) {
this.modulesDiff(pens[0])
this.props = {
line: null,
multi: false,
@@ -128,6 +140,7 @@ export default {
pens: pens
}
}
})
return pens
},
topTranslate () {
@@ -139,6 +152,19 @@ export default {
}
this.getNodesArr()
},
topoScale (num) {
this.moduleId = ''
getTopology(this.topologyIndex).centerView()
this.showNodeTools('')
this.popDataShowUpdate('', false)
if (!this.editTopologyFlag) {
getTopology(this.topologyIndex)
}
if (this.$refs.topTool) {
this.$refs.topTool.scaleNum = parseInt(num * 100)
}
this.getNodesArr()
},
topoClick (pointAndPen) {
this.showNodeTools('')
if (!pointAndPen.pen) {
@@ -153,7 +179,6 @@ export default {
pens: null
}
}
console.log(pointAndPen, 'click')
},
toCenter () {
if (getTopology(this.topologyIndex)) {