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

NEZ-2034 feat： topology js插件升级到最新版本

Browse Source
This commit is contained in:
zhangyu
2022-08-10 11:28:07 +08:00
parent 7a837b8f47
commit 50ec4a6680
8 changed files with 595 additions and 426 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/src/assets/css/index.scss
View File

@@ -16,7 +16,7 @@ body {
min-width: 1024px;
margin:0 !important;
padding: 0 !important;
cursor: default !important;
cursor: default;
}
html {
height: 100%;

38
nezha-fronted/src/assets/css/themes/src/input-number.scss
View File

@@ -19,7 +19,32 @@
}
}
@include e((increase, decrease)) {
@include e(increase) {
position: absolute;
z-index: 1;
top: 1px;
width: $--input-height;
height: auto;
text-align: center;
background: $--background-color-base;
color: $--color-text-regular;
cursor: pointer;
font-size: 13px;
&:hover {
color: $--color-primary;
&:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
border-color: $--input-focus-border;
}
}
&.is-disabled {
color: $--disabled-color-base;
cursor: not-allowed;
}
}
@include e(decrease) {
position: absolute;
z-index: 1;
top: 1px;
@@ -58,7 +83,16 @@
}
@include when(disabled) {
@include e((increase, decrease)) {
@include e(increase) {
border-color: $--disabled-border-base;
color: $--disabled-border-base;
&:hover {
color: $--disabled-border-base;
cursor: not-allowed;
}
}
@include e(decrease) {
border-color: $--disabled-border-base;
color: $--disabled-border-base;

48
nezha-fronted/src/components/common/project/L5/CanvasContextMenu.vue
View File

@@ -1,14 +1,14 @@
<template>
<div class="menus">
<div>
<a :class="{disabled:!props.node && !props.nodes}" @click="onTop()">{{$t('project.topology.top')}}</a>
<a :class="{disabled:!props.pen && !props.pens}" @click="onTop()">{{$t('project.topology.top')}}</a>
</div>
<div>
<a :class="{disabled:!props.node && !props.nodes}" @click="onBottom()">{{$t('project.topology.bottom')}}</a>
<a :class="{disabled:!props.pen && !props.pens}" @click="onBottom()">{{$t('project.topology.bottom')}}</a>
</div>
<div class="line"></div>
<div>
<a :class="{disabled:!props.node && !props.nodes && !props.line}" @click="onDel()">{{$t('overall.delete')}}</a>
<a :class="{disabled:!props.pen && !props.pens && !props.line}" @click="onDel()">{{$t('overall.delete')}}</a>
</div>
<div class="line"></div>
<div>
@@ -49,58 +49,54 @@ export default {
},
methods: {
onTop () {
if (this.props.node) {
getTopology(this.index).top(this.props.node)
}
if (this.props.nodes) {
for (const item of this.props.nodes) {
if (this.props.pens) {
for (const item of this.props.pens) {
getTopology(this.index).top(item)
}
} else if (this.props.pen) {
getTopology(this.index).top(this.props.pen)
}
getTopology(this.index).render()
},
onBottom () {
if (this.props.node) {
getTopology(this.index).bottom(this.props.node)
}
if (this.props.nodes) {
for (const item of this.props.nodes) {
if (this.props.pens) {
for (const item of this.props.pens) {
getTopology(this.index).bottom(item)
}
} else if (this.props.pen) {
getTopology(this.index).bottom(this.props.pen)
}
getTopology(this.index).render()
},
onCombine (stand) {
if (!this.props.nodes) {
if (!this.props.pens) {
return
}
getTopology(this.index).combine(this.props.nodes, stand)
getTopology(this.index).combine(this.props.pens, stand)
getTopology(this.index).render()
},
onUncombine () {
if (!this.props.node) {
if (!this.props.pen) {
return
}
getTopology(this.index).uncombine(this.props.node)
getTopology(this.index).uncombine(this.props.pen)
getTopology(this.index).render()
},
onLock () {
// eslint-disable-next-line vue/no-mutating-props
this.props.locked = !this.props.locked
if (this.props.node) {
if (this.props.pen) {
// eslint-disable-next-line vue/no-mutating-props
this.props.node.locked = this.props.locked
this.props.pen.locked = this.props.locked
}
if (this.props.nodes) {
for (const item of this.props.nodes) {
if (this.props.pens) {
for (const item of this.props.pens) {
item.locked = this.props.locked
}
}
@@ -113,13 +109,13 @@ export default {
},
onDel () {
getTopology(this.index).delete()
getTopology(this.index).delete(this.props.pens || [this.props.pen])
},
canvascut () {
getTopology(this.index).cut()
getTopology(this.index).cut(this.props.pens || [this.props.pen])
},
canvascopy () {
getTopology(this.index).copy()
getTopology(this.index).copy(this.props.pens || [this.props.pen])
},
canvaspaste () {
getTopology(this.index).paste()

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

@@ -405,7 +405,7 @@
<div class="props-pen-item" v-if="selection.pen&&!selection.pen.type&&!selection.pen.iconFamily">
<div>{{ $t('project.topology.bac') }}</div>
<div class="p10 pl0">
<nezhaColor :isTopo="true" :value-arr="[{name:'fillStyle',value:selection.pen.fillStyle}]"
<nezhaColor :isTopo="true" :value-arr="[{name:'background',value:selection.pen.background}]"
@colorChange="colorChange"/>
</div>
</div>
@@ -465,7 +465,7 @@
<div>{{ $t('project.topology.lineDash') }}</div>
<div class="p10 pl0">
<el-select :popper-append-to-body="true" v-model="selection.pen.dash" size="small" popper-class="right-box-select-top right-public-box-dropdown-top"
@change="onChange">
@change="(val)=>{onChange('lineDash', val)}">
<div slot="prefix">
<div class="icon-item">
<svg>
@@ -494,14 +494,14 @@
<div class="props-pen-item special-select" v-if="selection.pen&&selection.pen.type">
<div>{{ $t('project.topology.lineType') }}</div>
<div class="p10 pl0">
<el-select :popper-append-to-body="true" v-model="selection.pen.name" size="small" popper-class="right-box-select-top right-public-box-dropdown-top"
<el-select :popper-append-to-body="true" v-model="selection.pen.lineName" size="small" popper-class="right-box-select-top right-public-box-dropdown-top"
@change="onClickName">
<div slot="prefix">
<div class="icon-item">
<svg>
<g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1">
<path
:d="penLineType.find((item,i)=>item.name==selection.pen.name).d"
:d="penLineType.find((item,i)=>item.name==selection.pen.lineName).d"
>
</path>
</g>
@@ -511,7 +511,7 @@
<el-option v-for="(item,index) in penLineType" :value="item.name" :key="index">
<div class="icon-item">
<svg>
<g fill="none" :stroke="(selection.pen.name==item.name)?'#ee9d3f':item.strokeColor" stroke-width="1">
<g fill="none" :stroke="(selection.pen.lineName==item.name)?'#ee9d3f':item.strokeColor" stroke-width="1">
<path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
</g>
</svg>
@@ -641,7 +641,7 @@
<div class="props-pen-item">
<div>{{ $t('project.topology.lineColor') }}</div>
<div class="p10 pl0">
<nezhaColor :isTopo="true" :value-arr="[{name:'strokeStyle',value:selection.pen.strokeStyle}]"
<nezhaColor :isTopo="true" :value-arr="[{name:'color',value:selection.pen.color}]"
@colorChange="colorChange"/>
</div>
</div>
@@ -683,7 +683,7 @@
<div class="props-pen-item">
<div>{{ $t('project.topology.fontColor') }}</div>
<div class="p10 pl0">
<nezhaColor :isTopo="true" :value-arr="[{name:'fontColor',value:selection.pen.fontColor}]"
<nezhaColor :isTopo="true" :value-arr="[{name:'textColor',value:selection.pen.textColor}]"
@colorChange="colorChange"/>
</div>
</div>
@@ -716,39 +716,39 @@
</div>
</div>
<div class="props-pen-item">
<div>{{ $t('project.topology.textOffsetX') }}</div>
<div class="p10 pl0">
<el-input-number
@focus="inputFocus"
@blur="inputBlur"
:precision="0"
controls-position="right"
size="small" name="x"
class="input"
v-model.number="selection.pen.textOffsetX"
:readonly="readonly"
required
@change="onChange()"></el-input-number>
</div>
</div>
<!-- <div class="props-pen-item">-->
<!-- <div>{{ $t('project.topology.textOffsetX') }}</div>-->
<!-- <div class="p10 pl0">-->
<!-- <el-input-number-->
<!-- @focus="inputFocus"-->
<!-- @blur="inputBlur"-->
<!-- :precision="0"-->
<!-- controls-position="right"-->
<!-- size="small" name="x"-->
<!-- class="input"-->
<!-- v-model.number="selection.pen.textLeft"-->
<!-- :readonly="readonly"-->
<!-- required-->
<!-- @change="onChange()"></el-input-number>-->
<!-- </div>-->
<!-- </div>-->
<div class="props-pen-item">
<div>{{ $t('project.topology.textOffsetY') }}</div>
<div class="p10 pl0">
<el-input-number
@focus="inputFocus"
@blur="inputBlur"
:precision="0"
controls-position="right"
size="small" name="x"
class="input"
v-model.number="selection.pen.textOffsetY"
:readonly="readonly"
required
@change="onChange()"></el-input-number>
</div>
</div>
<!-- <div class="props-pen-item">-->
<!-- <div>{{ $t('project.topology.textOffsetY') }}</div>-->
<!-- <div class="p10 pl0">-->
<!-- <el-input-number-->
<!-- @focus="inputFocus"-->
<!-- @blur="inputBlur"-->
<!-- :precision="0"-->
<!-- controls-position="right"-->
<!-- size="small" name="x"-->
<!-- class="input"-->
<!-- v-model.number="selection.pen.textTop"-->
<!-- :readonly="readonly"-->
<!-- required-->
<!-- @change="onChange()"></el-input-number>-->
<!-- </div>-->
<!-- </div>-->
</div>
</el-collapse-item>
@@ -865,9 +865,9 @@
<!-- </div>-->
<!-- <div class="project-content-item half">-->
<!-- <label>{{$t('project.topology.fontColor')}}</label>-->
<!-- <label>{{$t('project.topology.textColor')}}</label>-->
<!-- <div class="full pr10 h32">-->
<!-- <nezhaColor :isTopo=true :value-arr="[{name:'fontColor',value:topologyData.data.fontColor}]" @colorChange="(val,key)=>{-->
<!-- <nezhaColor :isTopo=true :value-arr="[{name:'textColor',value:topologyData.data.textColor}]" @colorChange="(val,key)=>{-->
<!-- changeTopologyOpt(val,key,true)-->
<!-- }"/>-->
<!-- </div>-->
@@ -1102,6 +1102,7 @@ import chartDataFormat from '../../../chart/chartDataFormat'
import promqlInput from '../../../page/dashboard/explore/promqlInput'
import nezhaColor from '../../nezhaColor'
import promqlInputMixin from '@/components/common/mixin/promqlInput'
import { s8 } from '@topology/core'
const rz = {
methods: {
@@ -1184,7 +1185,7 @@ export default {
url: '',
fontSize: 14,
align: 'left',
fontColor: '#000000',
textColor: '#000000',
opacity: 1
}
},
@@ -1192,10 +1193,10 @@ export default {
dash: '',
font: '',
lineWidth: '',
strokeStyle: '',
color: '',
textMaxLine: '',
textOffsetX: '',
textOffsetY: '',
textLeft: '',
textTop: '',
globalAlpha: ''
},
penNumber: '',
@@ -1323,10 +1324,10 @@ export default {
}
],
lineAnimateOptions: [
{ id: 1, name: this.$t('project.topology.flow') },
{ id: 'flow', name: this.$t('project.topology.flow') },
{ id: 'beads', name: this.$t('project.topology.beads') },
{ id: 'dot', name: this.$t('project.topology.dot') },
{ id: 'comet', name: this.$t('project.topology.comet') },
// { id: 'comet', name: this.$t('project.topology.comet') },
{ id: 'custom', name: this.$t('project.topology.none') }
],
nodeAnimateOptions: [
@@ -1446,9 +1447,9 @@ export default {
immediate: true
},
'selection.pen.data': {
handler (n) {
handler (n, o) {
// this.loading = false
if (this.selection.pen && JSON.stringify(this.selection.pen.type)) {
if (this.selection.pen && JSON.stringify(this.selection.pen.type) && (JSON.stringify(n) !== JSON.stringify(o)) && o) {
this.$emit('change', this.selection.pen)
}
}
@@ -1477,7 +1478,7 @@ export default {
dataOption.data = {}
}
Object.keys(this.topologyData.data).forEach((key) => {
if (key === 'projectInfo' || key === 'alertInfo' || key === 'fontSize' || key === 'align' || key === 'fontColor' || key === 'opacity') {
if (key === 'projectInfo' || key === 'alertInfo' || key === 'fontSize' || key === 'align' || key === 'textColor' || key === 'opacity') {
this.topologyData.data[key] = (JSON.stringify(dataOption.data[key]) ? dataOption.data[key] : this.topologyData.data[key])
} else {
this.topologyData.data[key] = (JSON.stringify(dataOption[key]) ? dataOption[key] : this.topologyData.data[key])
@@ -1539,10 +1540,13 @@ export default {
}
this.onChange()
},
onChange (value) {
onChange (value, val) {
if (value === 'lineWidth') {
this.selection.pen.lineWidth = this.selection.pen.data.lineWidth
}
if (value === 'lineDash') {
this.selection.pen.lineDash = val ? (val == 1 ? [5, 5] : ((val == 2 ? [10, 10] : [10, 10, 2, 10]))) : []
}
this.$emit('change', this.selection.pen)
// if(!this.selection.pen.type||this.selection.pens){
// this.$emit('change',this.selection.pen||this.selection.pens);
@@ -1580,13 +1584,18 @@ export default {
this.onChange()
},
onClickName (name) {
this.pen.name = name
this.selection.pen.calcControlPoints()
this.pen.lineName = name
// this.selection.pen.calcControlPoints()
this.drowdown = 0
if (this.selection.pen) {
this.selection.pen.name = name
}
this.selection.pen.lineName = name
this.selection.pen.anchors = [
this.selection.pen.anchors[0],
this.selection.pen.anchors[this.selection.pen.anchors.length - 1]
]
getTopology(this.index).updateLineType(this.selection.pen, name)
this.onChange()
}
},
bkTypeChange (val) {
this.selection.pen.data.gradientType = val
@@ -1606,11 +1615,11 @@ export default {
if (val === 1 || val === 2) {
this.selection.pen.gradientToColor = this.selection.pen.data.gradientColor
this.selection.pen.gradientFromColor = this.selection.pen.fillStyle ? this.selection.pen.fillStyle : '#fff'
this.selection.pen.gradientFromColor = this.selection.pen.background ? this.selection.pen.background : '#fff'
}
if (val === 3 || val === 4) {
this.selection.pen.gradientFromColor = this.selection.pen.data.gradientColor
this.selection.pen.gradientToColor = this.selection.pen.fillStyle ? this.selection.pen.fillStyle : '#fff'
this.selection.pen.gradientToColor = this.selection.pen.background ? this.selection.pen.background : '#fff'
}
this.onChange()
},
@@ -1639,25 +1648,25 @@ export default {
this.selection.pen.data.gradientColor = this.colorRGBtoHex(val)
if (bktype === 1 || bktype === 2) {
this.selection.pen.gradientToColor = this.selection.pen.data.gradientColor
this.selection.pen.gradientFromColor = this.selection.pen.fillStyle ? this.selection.pen.fillStyle : '#fff'
this.selection.pen.gradientFromColor = this.selection.pen.background ? this.selection.pen.background : '#fff'
}
if (bktype === 3 || bktype === 4) {
this.selection.pen.gradientFromColor = this.selection.pen.data.gradientColor
this.selection.pen.gradientToColor = this.selection.pen.fillStyle ? this.selection.pen.fillStyle : '#fff'
this.selection.pen.gradientToColor = this.selection.pen.background ? this.selection.pen.background : '#fff'
}
}
if (name === 'fillStyle') {
if (name === 'background') {
if (bktype === 1 || bktype === 2) {
this.selection.pen.gradientToColor = this.selection.pen.data.gradientColor
this.selection.pen.gradientFromColor = this.selection.pen.fillStyle ? this.selection.pen.fillStyle : '#fff'
this.selection.pen.gradientFromColor = this.selection.pen.background ? this.selection.pen.background : '#fff'
}
if (bktype === 3 || bktype === 4) {
this.selection.pen.gradientFromColor = this.selection.pen.data.gradientColor
this.selection.pen.gradientToColor = this.selection.pen.fillStyle ? this.selection.pen.fillStyle : '#fff'
this.selection.pen.gradientToColor = this.selection.pen.background ? this.selection.pen.background : '#fff'
}
}
if (name === 'fontColor') {
if (name === 'textColor') {
// this.selection.pen.font.color = this.colorRGBtoHex(val)
}
this.selection.pen.data[name] = this.colorRGBtoHex(val)
@@ -1694,7 +1703,7 @@ export default {
this.topologyData.data[key] = val
}
Object.keys(this.topologyData.data).forEach((key1) => {
if (key1 === 'projectInfo' || key1 === 'alertInfo' || key1 === 'fontSize' || key1 === 'align' || key1 === 'fontColor' || key1 === 'opacity') {
if (key1 === 'projectInfo' || key1 === 'alertInfo' || key1 === 'fontSize' || key1 === 'align' || key1 === 'textColor' || key1 === 'opacity') {
getTopology(this.index).data().data[key1] = this.topologyData.data[key1]
} else {
getTopology(this.index).data()[key1] = this.topologyData.data[key1]

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

@@ -1,4 +1,4 @@
import { s16 } from '@topology/core'
import { s16, s8 } from '@topology/core'
export let canvas
export const Tools = [
@@ -235,12 +235,13 @@ export function rectangleImg (ctx, pen) {
ctx.beginPath()
ctx.rect(pen.x, pen.y, pen.width, pen.height)
if (pen.data && !pen.data.animateNeedLine) {
if (pen.data && pen.data.lineWidth <= 0) {
ctx.strokeStyle = 'rgba(0,0,0,0)'
}
}
// 必须判空再填充
(pen.fillStyle || pen.bkType) && ctx.fill()
console.log(pen, pen.calculative.worldIconRect)
(pen.background || pen.bkType) && ctx.fill()
pen.calculative.worldIconRect = {
height: pen.height - 10 - 20,
rotate: 0,
@@ -324,6 +325,7 @@ export function disposeTopoOldData (pen, allPen) { // 处理旧数据
color: pen.strokeStyle,
lineWidth: pen.lineWidth,
borderWidth: null,
borderColor: pen.strokeStyle,
rotate: pen.rotate,
visible: true,
background: pen.fillStyle,
@@ -337,7 +339,9 @@ export function disposeTopoOldData (pen, allPen) { // 处理旧数据
textAlign: pen.textAlign,
textBaseline: pen.textBaseline,
textBackground: pen.textBackground,
lineAnimateType: 0,
lineAnimateType: pen.lineAnimateType,
textLeft: pen.textOffsetX,
textTop: pen.textOffsetY,
animateType: '',
frames: [
@@ -398,6 +402,7 @@ export function disposeTopoOldData (pen, allPen) { // 处理旧数据
name: 'line',
lineName: pen.name,
type: pen.type,
autoPolyline: true,
fromArrow: pen.fromArrow,
toArrow: pen.toArrow,
x: width > 0 ? pen.to.x : pen.from.x,
@@ -408,10 +413,11 @@ export function disposeTopoOldData (pen, allPen) { // 处理旧数据
valueMapping: pen.valueMapping,
anchors: [
{
anchorId: pen.id + '-0',
anchorId: pen.from.anchorIndex + '',
id: pen.id + '-0',
penId: pen.id,
connectTo: pen.from.id,
prevNextType: undefined,
x: 0,
y: 0,
prev: {
@@ -428,10 +434,12 @@ export function disposeTopoOldData (pen, allPen) { // 处理旧数据
}
},
{
anchorId: pen.id + '-1',
anchorId: pen.to.anchorIndex + '',
id: pen.id + '-1',
penId: pen.id,
connectTo: pen.to.id,
prevNextType: undefined,
hidden: undefined,
x: 1,
y: 1,
prev: {
@@ -448,30 +456,30 @@ export function disposeTopoOldData (pen, allPen) { // 处理旧数据
}
}
],
color: '#222222',
lineWidth: 1,
lineDash: [
5,
5
],
borderColor: '#000000',
borderWidth: 0,
rotate: 0,
color: pen.strokeStyle,
lineWidth: pen.lineWidth,
lineDashOffset: pen.lineDashOffset,
lineDash: pen.dash ? (pen.dash == 1 ? [5, 5] : ((pen.dash == 2 ? [10, 10] : [10, 10, 2, 10]))) : [],
borderColor: pen.borderColor,
borderWidth: pen.borderWidth,
rotate: pen.rotate,
visible: true,
background: '',
lineHeight: 1.5,
fontSize: 12,
fontFamily: '"Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial',
fontStyle: 'normal',
fontWeight: 'normal',
lineHeight: pen.lineHeight,
fontSize: pen.fontSize,
fontFamily: pen.fontFamily,
fontStyle: pen.fontStyle,
fontWeight: pen.fontWeight,
textColor: '',
textAlign: 'center',
textBaseline: 'middle',
textBackground: '#ffffff',
animateSpan: 1,
animateColor: '#FA901C',
textAlign: pen.textAlign,
textBaseline: pen.textBaseline,
textBackground: pen.textBackground,
textLeft: pen.textOffsetX,
textTop: pen.textOffsetY,
animateSpan: pen.animateSpan,
animateColor: pen.animateColor,
lineAnimateType: 0,
animateDotSize: 3,
animateDotSize: pen.animateDotSize,
frames: [
],
@@ -504,18 +512,37 @@ export function disposeTopoOldData (pen, allPen) { // 处理旧数据
}
if (pen.name === 'polyline') {
obj.anchors.splice(1, 0, {
id: pen.id + '-0.33',
id: s8(),
penId: pen.id,
x: obj.anchors[0].x + 0.3,
y: obj.anchors[0].y
x: 0.1,
y: 0
}, {
id: s8(),
penId: pen.id,
x: 0.5,
y: 0
},
{
id: pen.id + '-0.66',
id: s8(),
penId: pen.id,
x: obj.anchors[1].x - 0.3,
y: obj.anchors[1].y
})
x: 0.5,
y: 1
},
{
id: s8(),
penId: pen.id,
x: 0.9,
y: 1
}
)
}
pen.data.valueMapping.forEach(item => {
if (item.animateType == 1) {
item.animateType = 'flow'
} else if (item.animateType == 'comet') {
item.animateType = 'dot'
}
})
}
return obj
}
@@ -620,231 +647,186 @@ export function disposeTopoOldData (pen, allPen) { // 处理旧数据
// }
// /* 自定义立方体 */
//
// export function onChangeAnimate (node, animateType, fillStyle, strokeStyle) {
// pen.animateType = animateType
// if (pen.animateType === 'custom') {
// return
// }
//
// pen.animateFrames = []
// const state = Node.cloneState(node)
// switch (animateType) {
// case 'upDown':
// state.rect.y -= 10
// state.rect.ey -= 10
// pen.animateFrames.push({
// duration: 100,
// linear: true,
// state
// })
// pen.animateFrames.push({
// duration: 100,
// linear: true,
// state: Node.cloneState(node)
// })
// pen.animateFrames.push({
// duration: 200,
// linear: true,
// state: Node.cloneState(state)
// })
// break
// case 'leftRight':
// state.rect.x -= 10
// state.rect.ex -= 10
// pen.animateFrames.push({
// duration: 100,
// linear: true,
// state: Node.cloneState(state)
// })
// state.rect.x += 20
// state.rect.ex += 20
// pen.animateFrames.push({
// duration: 80,
// linear: true,
// state: Node.cloneState(state)
// })
// state.rect.x -= 20
// state.rect.ex -= 20
// pen.animateFrames.push({
// duration: 50,
// linear: true,
// state: Node.cloneState(state)
// })
// state.rect.x += 20
// state.rect.ex += 20
// pen.animateFrames.push({
// duration: 30,
// linear: true,
// state: Node.cloneState(state)
// })
// pen.animateFrames.push({
export function onChangeAnimate (pen, animateType, fillStyle, strokeStyle) {
pen.animateType = animateType
if (pen.animateType === 'custom') {
return
}
pen.animateFrames = []
// const state = Node.cloneState(pen)
const state = {}
switch (animateType) {
case 'upDown':
pen.frames = [
{
duration: 200,
y: 20
},
{
duration: 200,
y: 0
},
{
duration: 200,
y: -20
}
]
break
case 'leftRight':
pen.frames = [
{
duration: 200,
x: 20
},
{
duration: 200,
x: 0
},
{
duration: 200,
x: -20
}
]
break
case 'heart':
pen.frames = [
{
duration: 300,
scale: 1.2
},
// {
// duration: 300,
// linear: true,
// state: Node.cloneState(node)
// })
// break
// case 'heart':
// state.rect.x -= 5
// state.rect.ex += 5
// state.rect.y -= 5
// state.rect.ey += 5
// state.rect.width += 5
// state.rect.height += 10
// pen.animateFrames.push({
// duration: 100,
// linear: true,
// state
// })
// pen.animateFrames.push({
// duration: 400,
// linear: true,
// state: Node.cloneState(node)
// })
// break
// case 'success':
// state.strokeStyle = strokeStyle || '#237804'
// pen.animateFrames.push({
// duration: 100,
// linear: true,
// state
// })
// pen.animateFrames.push({
// duration: 100,
// linear: true,
// state: Node.cloneState(node)
// })
// state.strokeStyle = '#237804'
// pen.animateFrames.push({
// duration: 100,
// linear: true,
// state
// })
// pen.animateFrames.push({
// duration: 100,
// linear: true,
// state: Node.cloneState(node)
// })
// state.strokeStyle = strokeStyle || '#237804'
// state.fillStyle = fillStyle || '#389e0d22'
// pen.animateFrames.push({
// duration: 3000,
// linear: true,
// state
// })
// break
// case 'warning':
// state.strokeStyle = strokeStyle || '#fa8c16'
// state.fillStyle = fillStyle || '#fa8c16'
// state.lineWidth = 5
// state.dash = 2
// pen.animateFrames.push({
// duration: 500,
// linear: true,
// state
// })
// state.strokeStyle = strokeStyle || '#fa8c16'
// state.dash = 0
// state.lineWidth = 1
// state.fillStyle = '#ffffff'
// pen.animateFrames.push({
// duration: 500,
// linear: true,
// state: Node.cloneState(state)
// })
// state.strokeStyle = strokeStyle || '#fa8c16'
// state.dash = 2
// state.lineWidth = 5
// state.fillStyle = fillStyle || '#fa8c16'
// pen.animateFrames.push({
// duration: 300,
// linear: true,
// state: Node.cloneState(state)
// })
// break
// case 'error':
// state.strokeStyle = strokeStyle || '#cf1322'
// state.fillStyle = fillStyle || '#cf132222'
// state.lineWidth = 5
// state.dash = 2
// pen.animateFrames.push({
// duration: 100,
// linear: true,
// state
// })
// state.strokeStyle = strokeStyle || '#cf1322'
// state.fillStyle = '#ffffff'
// state.dash = 0
// state.lineWidth = 1
// pen.animateFrames.push({
// duration: 500,
// linear: true,
// state: Node.cloneState(state)
// })
// state.strokeStyle = strokeStyle || '#cf1322'
// state.fillStyle = fillStyle || '#cf132222'
// state.dash = 2
// state.lineWidth = 5
// pen.animateFrames.push({
// duration: 300,
// linear: true,
// state: Node.cloneState(state)
// })
// break
// case 'show':
// state.strokeStyle = strokeStyle || '#fa541c'
// state.rotate = -5
// pen.animateFrames.push({
// duration: 100,
// linear: true,
// state: Node.cloneState(state)
// })
// state.rotate = 5
// pen.animateFrames.push({
// duration: 100,
// linear: true,
// state: Node.cloneState(state)
// })
// state.rotate = 0
// pen.animateFrames.push({
// duration: 100,
// linear: true,
// state: Node.cloneState(state)
// })
// break
// case 'fade':
// state.strokeStyle = strokeStyle || '#fa541c'
// state.globalAlpha = 0.3
// pen.animateFrames.push({
// duration: 300,
// linear: true,
// state: Node.cloneState(state)
// })
// state.globalAlpha = 0.5
// pen.animateFrames.push({
// duration: 300,
// linear: true,
// state: Node.cloneState(state)
// })
// state.globalAlpha = 0.8
// pen.animateFrames.push({
// duration: 300,
// linear: true,
// state: Node.cloneState(state)
// })
// state.globalAlpha = 1
// pen.animateFrames.push({
// duration: 300,
// linear: true,
// state: Node.cloneState(state)
// })
// break
// }
// pen.animatePlay = true
// }
// export function onChangeAnimateLine (line, type) {
// line.animateType = type
// line.animatePlay = true
// }
// x: 0,
// y: 0,
// width: 0,
// height: 0
// },
{
duration: 300,
scale: 0.8
},
{
duration: 300,
scale: 1
}
]
break
case 'success':
pen.frames = [
{
duration: 200,
color: strokeStyle || '#237804'
},
{
duration: 200,
color: strokeStyle || '#237804',
backGround: fillStyle || '#389e0d22'
}
]
break
case 'warning':
pen.data.animateNeedLine = true
pen.frames = [
{
duration: 500,
color: strokeStyle || '#fa8c16',
background: fillStyle || '#fa8c16',
lineWidth: 5,
lineDash: [5, 5]
},
{
duration: 500,
color: strokeStyle || '#fa8c16',
background: '#ffffff',
lineWidth: 1,
lineDash: []
}
]
break
case 'error':
state.strokeStyle = strokeStyle || '#cf1322'
state.fillStyle = fillStyle || '#cf132222'
state.lineWidth = 5
state.dash = 2
pen.animateFrames.push({
duration: 100,
linear: true,
state
})
state.strokeStyle = strokeStyle || '#cf1322'
state.fillStyle = '#ffffff'
state.dash = 0
state.lineWidth = 1
pen.animateFrames.push({
duration: 500,
linear: true,
state: Node.cloneState(state)
})
state.strokeStyle = strokeStyle || '#cf1322'
state.fillStyle = fillStyle || '#cf132222'
state.dash = 2
state.lineWidth = 5
pen.animateFrames.push({
duration: 300,
linear: true,
state: Node.cloneState(state)
})
break
case 'show':
pen.frames = [
{
duration: 100,
rotate: -5
},
{
duration: 100,
rotate: 0
},
{
duration: 100,
rotate: 5
},
{
duration: 100,
rotate: 0
}
]
break
case 'fade':
state.globalAlpha = 0.3
pen.frames = [
{
duration: 500,
globalAlpha: 0.3
},
{
duration: 500,
globalAlpha: 1
}
]
break
}
pen.animatePlay = true
}
export function onChangeAnimateLine (line, type, isOldData) {
// { id: 'flow', name: this.$t('project.topology.flow') },
// { id: 'beads', name: this.$t('project.topology.beads') },
// { id: 'dot', name: this.$t('project.topology.dot') },
let animateType = type
if (type === 'dot') {
animateType = 2
}
if (type === 'beads') {
animateType = 1
}
if (type === 'custom') {
delete line.lineAnimateType
return
}
line.lineAnimateType = animateType
line.animatePlay = true
}
// export function changeImage (dataImg, callback) {
// // const base64Img = document.createElement('base64Img')
// const canvas = document.createElement('canvas')

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

@@ -109,7 +109,15 @@ export default {
},
methods: {
changeOption (key) {
getTopology(this.index).data[key] = this.option[key]
// 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 {
getTopology(this.index).setRule(obj)
}
getTopology(this.index).render()
},
undo () { // 撤销
@@ -139,7 +147,7 @@ export default {
getTopology(this.index).scaleTo(val / 100)
},
del () {
const delObj = this.selection.pen ? this.selection.pen.id : this.selection.pens
const delObj = this.selection.pen ? [this.selection.pen] : this.selection.pens
this.$emit('del', delObj)
},
clear () {

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

@@ -170,7 +170,7 @@
@notModuleIDArrChange="notModuleIDArrChange">
</canvas-props>
</div>
<div class="context-menu" v-if="contextmenu.left && editTopologyFlag && 0 && !fromOverView" :style="this.contextmenu">
<div class="context-menu" v-if="contextmenu.left && editTopologyFlag && !fromOverView" :style="this.contextmenu">
<CanvasContextMenu :index="topologyIndexF" :props.sync="props"></CanvasContextMenu>
</div>
<!--所有节点上的小图标-->
@@ -359,13 +359,13 @@ import {
imageTemp,
rectangleImg,
rectangleImgAnchors,
disposeTopoOldData
disposeTopoOldData,
// myShape,
// myAnchors,
// myIconRect,
// myTextRect,
// onChangeAnimate,
// onChangeAnimateLine,
onChangeAnimate,
onChangeAnimateLine,
// myCubec,
// myCubeAnchors
} from './L5/services/canvas.js'
@@ -388,16 +388,6 @@ import topologyMixin from '@/components/common/project/topologyMixin'
// registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
// registerNode('myCube', myCubec, myCubeAnchors, null, null)
const canvasOptions = {
rotateCursor: '/img/rotate.cur',
translateKey: 'None',
disableEmptyLine: true,
autoExpandDistance: 0,
minScale: 0.2,
scaleKey: -1,
keydown: 1,
autoPolyline: true
}
export default {
name: 'topologyL5',
mixins: [topologyMixin],
@@ -670,7 +660,7 @@ export default {
},
methods: {
init () {
canvasOptions.on = this.onMessage
// canvasOptions.on = this.onMessage
this.reload()
},
@@ -692,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)
this.setAnimation(pen, this.chartGetData[index].res, data.oldData)
resolve()
})
})
@@ -723,10 +713,7 @@ export default {
if (!getTopology(this.topologyIndex)) {
return
}
le5leStore.set('file', this.data)
le5leStore.set('lineName', data.lineName)
le5leStore.set('fromArrow', data.fromArrow)
le5leStore.set('toArrow', data.toArrow)
console.log(data)
getTopology(this.topologyIndex).open(data)
getTopology(this.topologyIndex).lock(1)
this.objChange = false
@@ -755,9 +742,9 @@ export default {
const timer = setTimeout(() => {
getTopology(this.topologyIndex) && getTopology(this.topologyIndex).data().pens.forEach(item => {
if (item.animatePlay) {
item.stopAnimate()
getTopology(this.topologyIndex).stopAnimate(item.id)
const timer1 = setTimeout(() => {
item.startAnimate()
getTopology(this.topologyIndex).startAnimate(item.id)
clearTimeout(timer1)
})
}
@@ -806,6 +793,18 @@ export default {
return
}
data = this.$loadsh.cloneDeep(data)
console.log(Option)
const canvasOptions = {
rotateCursor: '/static/roteCursor.cur',
disableEmptyLine: true,
autoExpandDistance: 0,
minScale: 0.2,
scaleKey: -1,
keydown: 1,
gridSize: 40
}
canvasOptions.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#f6f6f6'
canvasOptions.gridColor = this.theme == 'light' ? '#4e4e4e' : '#BEBEBE'
if (!getTopology(this.topologyIndex)) {
let canvas = new Topology('topology-canvas' + this.topologyIndexF, canvasOptions)
// canvas.open(data)
@@ -815,25 +814,23 @@ export default {
// getTopology(this.topologyIndex).open(data)
}
this.topologyLoading = false
if (!getTopology(this.topologyIndex).data().name) {
// getTopology(this.topologyIndex).data().name = this.obj.name
}
// getTopology(this.topologyIndex).data().projectId = this.obj.id
// getTopology(this.topologyIndex).lock(1)
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('translatePens', () => {}) // 移动画笔结束·
getTopology(this.topologyIndex).on('translatingPens', () => {}) // 移动画笔进行中·
getTopology(this.topologyIndex).on('add', () => {}) // 添加新画笔·
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()
})
@@ -846,10 +843,10 @@ export default {
}
this.$get('monitor/project/topo', { projectId: this.obj.id }).then(res => {
console.log(JSON.stringify(res.data.topo))
res.data.topo.oldData = 1
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
@@ -872,11 +869,17 @@ export default {
this.projectAlertShow = true
this.saveData = JSON.parse(JSON.stringify(data))
this.topologyInfo.name = this.obj.name
data.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#BEBEBE'
data.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#f9f9f9'
data.gridColor = this.theme == 'light' ? '#ededed' : '#090909'
data.grid = false
data.rule = false
resolve(data)
data = null
} else {
data.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#BEBEBE'
data.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#f9f9f9'
data.gridColor = this.theme == 'light' ? '#ededed' : '#090909'
data.grid = false
data.rule = false
if (data.data) {
this.topologyInfo = {
fontSize: data.data.fontSize,
@@ -906,10 +909,10 @@ export default {
for (let i = 0; i < data.pens.length; i++) {
const line = data.pens[i]
if (line.type === 1) {
if (!data.pens.find(item => item.id === line.from.id) || !data.pens.find(item => item.id === line.to.id)) {
data.pens.splice(i, 1)
i--
}
// if (!data.pens.find(item => item.id === line.from.id) || !data.pens.find(item => item.id === line.to.id)) {
// data.pens.splice(i, 1)
// i--
// }
}
}
data.pens.forEach(item => {
@@ -1020,7 +1023,7 @@ export default {
})
},
// 赋值动画
setAnimation (pen, res) { // 根据所有res的状态 赋值动画
setAnimation (pen, res, isOldData) { // 根据所有res的状态 赋值动画
let maxLevel = 0
if (res.length > 0) {
res.forEach((response, innerPos) => {
@@ -1046,27 +1049,27 @@ export default {
if (pen.type === 0) { // 判断valueMapping 给相应的状态
const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel)
if (selLevel) {
pen.fontColor = selLevel.color.text
pen.fillStyle = selLevel.color.fill
pen.strokeStyle = selLevel.color.line
pen.textColor = selLevel.color.text
pen.background = selLevel.color.fill
pen.color = selLevel.color.line
pen.bkType = 0
}
// onChangeAnimate(pen, selLevel.animateType, selLevel.color.fill, selLevel.color.line)
onChangeAnimate(pen, selLevel.animateType, selLevel.color.fill, selLevel.color.line, selLevel.color.text)
} else if (pen.type === 1) { // 判断valueMapping 给相应的状态
const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel)
if (selLevel) {
pen.animateColor = selLevel.color.fill
pen.strokeStyle = selLevel.color.line
pen.animateType = selLevel.animateType
pen.color = selLevel.color.line
pen.lineAnimateType = selLevel.animateType
pen.fontColor = selLevel.color.text
}
// onChangeAnimateLine(pen, pen.animateType)
onChangeAnimateLine(pen, selLevel.animateType, isOldData)
}
} else {
if (pen.type === 0 && pen.animatePlay) { // 判断valueMapping 给相应的状态
// onChangeAnimate(pen, pen.animateType)
onChangeAnimate(pen, pen.animateType)
} else if (pen.type === 1 && pen.animatePlay) { // 判断valueMapping 给相应的状态
// onChangeAnimateLine(pen, pen.animateType)
onChangeAnimateLine(pen, pen.animateType, isOldData)
}
}
},
@@ -1650,8 +1653,7 @@ export default {
},
onUpdateProps (node) {
// 如果是node属性改变，需要传入node，重新计算node相关属性值
// 如果是line属性改变，无需传参
console.log(node)
getTopology(this.topologyIndex).setValue(node)
},
@@ -1984,9 +1986,9 @@ export default {
this.$store.commit('setShowTopoScreen', true)
const timer = setTimeout(() => {
getTopology(this.topologyIndex).lock(0)
getTopology(this.topologyIndex).data().pens.forEach((item, index) => { // 停止动画 以及赋值默认data
getTopology(this.topologyIndex).store.data.pens.forEach((item, index) => { // 停止动画 以及赋值默认data
if (item.animatePlay) {
item.stopAnimate()
getTopology(this.topologyIndex).stopAnimate(item.id)
}
if (!item.data.expressArr.length) {
item.data.expressArr = ['']
@@ -1998,8 +2000,8 @@ export default {
}
item.animateType = item.data.animateType
if (item.type === 0) {
item.fillStyle = item.data.fillStyle
item.strokeStyle = item.data.strokeStyle
item.background = item.data.background || item.data.fillStyle
item.color = item.data.color || item.data.strokeStyle
item.animatePlay = false
item.fontColor = item.data.fontColor || '#222222'
item.gradientType = item.data.gradientType ? item.data.gradientType : 0
@@ -2012,20 +2014,23 @@ export default {
} else {
item.bkType = 1
}
item.data.animateNeedLine = false
} else if (item.type === 1) {
item.animateColor = item.data.animateColor
item.strokeStyle = item.data.strokeStyle
item.color = item.data.color || item.data.strokeStyle
item.arrowColor = item.data.arrowColor
item.fromArrowColor = item.data.arrowColor
item.toArrowColor = item.data.arrowColor
item.animatePlay = false
item.fontColor = item.data.fontColor || '#222222'
}
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
@@ -2050,9 +2055,7 @@ export default {
// this.topologyData.data[key]=this.colorRGBtoHex(val);
// getTopology(this.index).data[key]=val;
// getTopology(this.index).render();
const dataOption = getTopology(this.topologyIndex).data()
dataOption[key] = this.lineName
getTopology(this.topologyIndex).render()
getTopology(this.topologyIndex).setOptions({ drawingLineName: val })
},
notModuleIDArrChange (id) {
this.notModuleIDArr = this.notModuleIDArr.filter(item => item.id !== id)
@@ -2063,7 +2066,8 @@ export default {
this.isPreview = false
this.editTopologyFlag = true
this.showNoData = false
const topologyData = getTopology(this.topologyIndex).pureData()
const topologyData = getTopology(this.topologyIndex).data()
topologyData.oldData = 0
let flag = true
const arr = []
this.notModuleIDArr = []

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

@@ -1,10 +1,113 @@
import { getTopology } from '@/components/common/js/common'
export default {
data () {
return {}
},
methods: {
appPen (pen) {
const data = pen[0]
if (data.type === 0 && !data.data.moduleId) {
data.background = '#FFFFFF00'
data.color = '#333333'
data.borderColor = '#333333'
data.textColor = '#333333'
data.fontSize = 12
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: ''
}
} else if (data.type == 1) {
// 连线是否自动计算锚点
// data.manualCps=true;
data.background = '#FFFFFF00'
data.color = '#333333'
data.borderColor = '#333333'
data.textColor = '#333333'
data.fontSize = 12
data.autoPolyline = 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
}
},
pensActive (pens) {
console.log(pens)
if (!pens.length) return
if (pens.length == 1) {
this.props = {
line: null,
multi: false,
@@ -12,8 +115,20 @@ export default {
nodes: null,
locked: pens[0].locked,
pen: pens[0],
pens: null
pens: pens
}
} else {
this.props = {
line: null,
multi: false,
expand: this.props.expand,
nodes: null,
locked: false,
pen: null,
pens: pens
}
}
return pens
},
topTranslate () {
this.moduleId = ''
@@ -23,6 +138,27 @@ export default {
getTopology(this.topologyIndex)
}
this.getNodesArr()
},
topoClick (pointAndPen) {
this.showNodeTools('')
if (!pointAndPen.pen) {
this.props = {
node: null,
line: null,
multi: false,
expand: null,
nodes: null,
locked: null,
pen: null,
pens: null
}
}
console.log(pointAndPen, 'click')
},
toCenter () {
if (getTopology(this.topologyIndex)) {
getTopology(this.topologyIndex).resize()
}
}
}
}