fix：暂存 topology 升级 （未完成）
This commit is contained in:
zhangyu
65
nezha-fronted/package-lock.json
generated
65
nezha-fronted/package-lock.json
generated
@@ -1433,44 +1433,43 @@
|
||||
}
|
||||
},
|
||||
"@topology/activity-diagram": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@topology/activity-diagram/-/activity-diagram-0.3.0.tgz",
|
||||
"integrity": "sha512-9uceHdbT1MY++/2crNlZmFMVmz6sI4OqH7aUQuBT8q9RDXA7t2prFd7lx4UfaIyQqDYtYtpeCHLPlhRLsEooZg=="
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@topology/activity-diagram/-/activity-diagram-1.1.0.tgz",
|
||||
"integrity": "sha512-T4o/baMiTjnRgs7pPu/V2zTIMzBuBLZd8m78/dTzRkcf9CxuBrqgeh0EYDb9xgQ0DZDjdnZpZNJKLVpmCon18A=="
|
||||
},
|
||||
"@topology/chart-diagram": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@topology/chart-diagram/-/chart-diagram-0.3.0.tgz",
|
||||
"integrity": "sha512-WUfb62Op0QxS976cNqrJ1Xaq+pfURwpo67H3TENWb+OhoNfiBl9IDANxTr1UIPLYfsjqgN3Y/8lxkL33jEl/aQ=="
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@topology/chart-diagram/-/chart-diagram-1.1.0.tgz",
|
||||
"integrity": "sha512-9b4s91FiIhv9DPm54c1cktW7PHDmL/TcREgij4Vdz/mGBtt+qg9DNjLosBcwshXDgD1/oQ8qTd24uRUcMOhWMw=="
|
||||
},
|
||||
"@topology/class-diagram": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@topology/class-diagram/-/class-diagram-0.3.0.tgz",
|
||||
"integrity": "sha512-J+qKEg/+3EyyZotP2TbZtM+NcOeRh2PIEwzBZGS6KOU5RvBi4NMRO2DQNN++q8Zpb7RG7WYGAaTB2H4+YcXJzA=="
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@topology/class-diagram/-/class-diagram-1.1.0.tgz",
|
||||
"integrity": "sha512-pFCGC7pBorMA8kPiAPKLeBp9VjHXs8FRMujTjFAUpJxQGRAZzjnuVq0pB32me9Vc/Ckp1/pH6S0JgD+poVA5CA=="
|
||||
},
|
||||
"@topology/core": {
|
||||
"version": "0.5.33",
|
||||
"resolved": "https://registry.npmmirror.com/@topology/core/download/@topology/core-0.5.33.tgz",
|
||||
"integrity": "sha1-aS5eoCUEDbrh/TGxl2rCXmdu8ww=",
|
||||
"version": "1.1.32",
|
||||
"resolved": "https://registry.npmjs.org/@topology/core/-/core-1.1.32.tgz",
|
||||
"integrity": "sha512-ZpRzW0ERxBMFcdujT7VpZVY8t7B+OEMXVhuY+vQ8a++LTG/SIWT3ib8EhYw4cJM4BaIUtOOyDPYHpFk4SOl0KA==",
|
||||
"requires": {
|
||||
"le5le-store": "^1.0.7",
|
||||
"mitt": "^2.1.0",
|
||||
"mqtt": "^4.2.6"
|
||||
}
|
||||
},
|
||||
"@topology/flow-diagram": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@topology/flow-diagram/-/flow-diagram-0.3.0.tgz",
|
||||
"integrity": "sha512-GPV+CIbclzYgCO/lMePDfLY0OzAr1+7nyzMOVdABXezvlIw/zm59+2/KYQu5XGUqBoqjvjdrd4hbN8eYAKWZQw=="
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@topology/flow-diagram/-/flow-diagram-1.1.1.tgz",
|
||||
"integrity": "sha512-hvlEDQ97DLTII0XIB8V3SQ55ywN+n3GqSkM8Fp9oImKXFSFYf9WYtiaMihB3fqnHJnR9EYDx57ehRFF5k5+gxA=="
|
||||
},
|
||||
"@topology/layout": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@topology/layout/-/layout-0.3.0.tgz",
|
||||
"integrity": "sha512-t9SSU7RroRfnKO3K5cfsB7eIfE2jW/t7O+79nVGgNqQljxaCSG8wQPWw6BqnmYJ072uHf85z1QUIjjboSEHupg=="
|
||||
"@topology/form-diagram": {
|
||||
"version": "1.1.32",
|
||||
"resolved": "https://registry.npmjs.org/@topology/form-diagram/-/form-diagram-1.1.32.tgz",
|
||||
"integrity": "sha512-omPPIyZmibjpe/cv+yB+3quSStW+4Pi43M4TO7ExV2lb7FlWJpXC8aPch+PSo6iQi06nAM9HOILSIaog7Hofug=="
|
||||
},
|
||||
"@topology/sequence-diagram": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@topology/sequence-diagram/-/sequence-diagram-0.3.0.tgz",
|
||||
"integrity": "sha512-qSLXKd//lW5jb/e7nMRwxRWz/bXmkourVHBmZ2cRulZPe0KTeLiE/LkYJ+ffDFNDdCIYedHBC+CeQc3PULCqRQ=="
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@topology/sequence-diagram/-/sequence-diagram-1.1.0.tgz",
|
||||
"integrity": "sha512-/DUqVXS1mCLpDJbfRQbMfduYy65OEq4QQjsqvMB6xGYD+L1+4CMRPI8lHsUyQcjOmBJrCfro5oJC0g6PWjGJDg=="
|
||||
},
|
||||
"@types/babel__core": {
|
||||
"version": "7.1.19",
|
||||
@@ -3988,7 +3987,7 @@
|
||||
},
|
||||
"clipboard": {
|
||||
"version": "2.0.11",
|
||||
"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz",
|
||||
"resolved": "https://registry.npmmirror.com/clipboard/-/clipboard-2.0.11.tgz",
|
||||
"integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
|
||||
"requires": {
|
||||
"good-listener": "^1.2.2",
|
||||
@@ -6133,7 +6132,7 @@
|
||||
},
|
||||
"delegate": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
|
||||
"resolved": "https://registry.npmmirror.com/delegate/-/delegate-3.2.0.tgz",
|
||||
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
|
||||
},
|
||||
"delegates": {
|
||||
@@ -8445,7 +8444,7 @@
|
||||
},
|
||||
"good-listener": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
|
||||
"resolved": "https://registry.npmmirror.com/good-listener/-/good-listener-1.2.2.tgz",
|
||||
"integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
|
||||
"requires": {
|
||||
"delegate": "^3.1.2"
|
||||
@@ -10993,8 +10992,8 @@
|
||||
},
|
||||
"le5le-store": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npm.taobao.org/le5le-store/download/le5le-store-1.0.7.tgz",
|
||||
"integrity": "sha1-c0F+AMvT2KEBCzF5VJYyOt/HvEc="
|
||||
"resolved": "https://registry.npmjs.org/le5le-store/-/le5le-store-1.0.7.tgz",
|
||||
"integrity": "sha512-8XnDf8RUoHsKXUQHSw2vHEbEw4UbDHGulw/r/YRXf2NA1EUvMD/UUjGvbMAB1vz3UN8smvOxR6CTyjpK/Zhn2w=="
|
||||
},
|
||||
"leaflet": {
|
||||
"version": "1.7.1",
|
||||
@@ -11591,8 +11590,8 @@
|
||||
},
|
||||
"mitt": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.nlark.com/mitt/download/mitt-2.1.0.tgz?cache=0&sync_timestamp=1624483449786&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fmitt%2Fdownload%2Fmitt-2.1.0.tgz",
|
||||
"integrity": "sha1-90BXfCMXbGIFsSGylzUU6t4bIjA="
|
||||
"resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
|
||||
"integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
|
||||
},
|
||||
"mixin-deep": {
|
||||
"version": "1.3.2",
|
||||
@@ -16361,7 +16360,7 @@
|
||||
},
|
||||
"select": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
|
||||
"resolved": "https://registry.npmmirror.com/select/-/select-1.1.2.tgz",
|
||||
"integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
|
||||
},
|
||||
"select-hose": {
|
||||
@@ -17837,7 +17836,7 @@
|
||||
},
|
||||
"tiny-emitter": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
|
||||
"resolved": "https://registry.npmmirror.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
|
||||
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
|
||||
},
|
||||
"tinycolor2": {
|
||||
@@ -18521,7 +18520,7 @@
|
||||
},
|
||||
"vue-clipboard2": {
|
||||
"version": "0.3.3",
|
||||
"resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.3.tgz",
|
||||
"resolved": "https://registry.npmmirror.com/vue-clipboard2/-/vue-clipboard2-0.3.3.tgz",
|
||||
"integrity": "sha512-aNWXIL2DKgJyY/1OOeITwAQz1fHaCIGvUFHf9h8UcoQBG5a74MkdhS/xqoYe7DNZdQmZRL+TAdIbtUs9OyVjbw==",
|
||||
"requires": {
|
||||
"clipboard": "^2.0.0"
|
||||
|
||||
@@ -25,13 +25,13 @@
|
||||
"@riophae/vue-treeselect": "^0.4.0",
|
||||
"@svgdotjs/svg.js": "^3.0.16",
|
||||
"@svgdotjs/svg.panzoom.js": "^2.1.1",
|
||||
"@topology/activity-diagram": "^0.3.0",
|
||||
"@topology/chart-diagram": "^0.3.0",
|
||||
"@topology/class-diagram": "^0.3.0",
|
||||
"@topology/core": "0.5.33",
|
||||
"@topology/flow-diagram": "^0.3.0",
|
||||
"@topology/layout": "^0.3.0",
|
||||
"@topology/sequence-diagram": "^0.3.0",
|
||||
"@topology/activity-diagram": "^1.1.0",
|
||||
"@topology/chart-diagram": "^1.1.0",
|
||||
"@topology/class-diagram": "^1.1.0",
|
||||
"@topology/core": "^1.1.32",
|
||||
"@topology/flow-diagram": "^1.1.1",
|
||||
"@topology/form-diagram": "^1.1.32",
|
||||
"@topology/sequence-diagram": "^1.1.0",
|
||||
"axios": "^0.19.0",
|
||||
"codemirror-promql": "^0.19.0",
|
||||
"cytoscape": "^3.15.2",
|
||||
@@ -46,6 +46,7 @@
|
||||
"intro.js": "^5.1.0",
|
||||
"jspdf": "^2.5.1",
|
||||
"jszip": "^3.9.1",
|
||||
"le5le-store": "^1.0.7",
|
||||
"leaflet": "^1.7.1",
|
||||
"moment-timezone": "^0.5.33",
|
||||
"mqtt": "4.2.6",
|
||||
|
||||
@@ -8,8 +8,8 @@
|
||||
background-color: $--color-primary !important;
|
||||
}
|
||||
.el-checkbox__input.is-checked.is-disabled .el-checkbox__inner{
|
||||
background-color: $--background-color-empty !important;
|
||||
border-color: $--border-color-base !important;
|
||||
//background-color: $--background-color-empty !important;
|
||||
//border-color: $--border-color-base !important;
|
||||
}
|
||||
.el-checkbox__input.is-disabled .el-checkbox__inner{
|
||||
background-color: $--background-color-empty !important;
|
||||
@@ -19,7 +19,7 @@
|
||||
border-color: $--border-color-base !important;
|
||||
}
|
||||
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
|
||||
display: none !important;
|
||||
//display: none !important;
|
||||
}
|
||||
.el-checkbox__input.is-disabled{
|
||||
width: 16px !important;
|
||||
|
||||
@@ -312,21 +312,20 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Topology, registerNode } from '@/components/common/@topology/core/index.js'
|
||||
import { Topology } from '@/components/common/@topology/core/index.js'
|
||||
import { Store as le5leStore } from 'le5le-store'
|
||||
import imgDefault from '@/components/common/project/L5/services/img'
|
||||
import {
|
||||
Tools,
|
||||
canvasRegister,
|
||||
imageTemp2,
|
||||
myShape,
|
||||
myAnchors,
|
||||
myIconRect2,
|
||||
myTextRect2,
|
||||
onChangeAnimate,
|
||||
onChangeAnimateLine,
|
||||
myCubec,
|
||||
myCubeAnchors
|
||||
// myShape,
|
||||
// myAnchors,
|
||||
// myIconRect2,
|
||||
// myTextRect2,
|
||||
// onChangeAnimate,
|
||||
// onChangeAnimateLine,
|
||||
// myCubec,
|
||||
// myCubeAnchors
|
||||
} from '../project/L5/services/canvas.js'
|
||||
import { getTopology, setTopology, dealImg, topologyImg } from '../js/common'
|
||||
import CanvasProps from '../project/L5/CanvasProps'
|
||||
@@ -341,8 +340,10 @@ import { getMetricTypeValue, dealLegendAlias } from '../js/tools'
|
||||
import bus from '../../../libs/bus'
|
||||
import CanvasContextMenu from '@/components/common/project/L5/CanvasContextMenu'
|
||||
// 注册到画布
|
||||
registerNode('rectangleImg2', myShape, myAnchors, myIconRect2, myTextRect2)
|
||||
registerNode('myCube', myCubec, myCubeAnchors, null, null)
|
||||
// Topology.register({ triangle });
|
||||
// Topology.registerAnchors({ triangle: triangleAnchors });
|
||||
// registerNode('rectangleImg2', myShape, myAnchors, myIconRect2, myTextRect2)
|
||||
// registerNode('myCube', myCubec, myCubeAnchors, null, null)
|
||||
|
||||
const canvasOptions = {
|
||||
rotateCursor: '/img/rotate.cur',
|
||||
@@ -620,7 +621,6 @@ export default {
|
||||
computed: {
|
||||
},
|
||||
created () {
|
||||
canvasRegister()
|
||||
if (process.client) {
|
||||
document.onclick = event => {
|
||||
this.contextmenu = {
|
||||
@@ -950,7 +950,7 @@ export default {
|
||||
pen.strokeStyle = 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)
|
||||
} else if (pen.type === 1) { // 判断valueMapping 给相应的状态
|
||||
const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel)
|
||||
if (selLevel) {
|
||||
@@ -959,13 +959,13 @@ export default {
|
||||
pen.animateType = selLevel.animateType
|
||||
pen.fontColor = selLevel.color.text
|
||||
}
|
||||
onChangeAnimateLine(pen, pen.animateType)
|
||||
// onChangeAnimateLine(pen, pen.animateType)
|
||||
}
|
||||
} 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)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -1096,7 +1096,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { alignNodes, spaceBetween, layout } from '@topology/layout'
|
||||
// import { alignNodes, spaceBetween, layout } from '@topology/layout'
|
||||
import { getTopology, resetZIndex } from '../../js/common'
|
||||
import chartDataFormat from '../../../chart/chartDataFormat'
|
||||
import promqlInput from '../../../page/dashboard/explore/promqlInput'
|
||||
@@ -1559,15 +1559,15 @@ export default {
|
||||
|
||||
// 组件事件
|
||||
onNodesAlign (align) { // 对齐node
|
||||
alignNodes(getTopology(this.index).activeLayer.pens, getTopology(this.index).activeLayer.rect, align)
|
||||
// alignNodes(getTopology(this.index).activeLayer.pens, getTopology(this.index).activeLayer.rect, align)
|
||||
getTopology(this.index).updateProps()
|
||||
},
|
||||
onSpaceBetween () {
|
||||
spaceBetween(getTopology(this.index).activeLayer.pens, getTopology(this.index).activeLayer.rect.width)
|
||||
// spaceBetween(getTopology(this.index).activeLayer.pens, getTopology(this.index).activeLayer.rect.width)
|
||||
getTopology(this.index).updateProps()
|
||||
},
|
||||
onLayout () { // 改变布局
|
||||
layout(getTopology(this.index).activeLayer.pens, this.layout)
|
||||
// layout(getTopology(this.index).activeLayer.pens, this.layout)
|
||||
getTopology(this.index).updateProps()
|
||||
},
|
||||
onClickDash (number) { // 改变线型
|
||||
|
||||
@@ -1,15 +1,6 @@
|
||||
import { Node, Rect, Point, Direction } from '@topology/core'
|
||||
// import { register as registerClass } from './class-diagram/index'
|
||||
import { rectInRect } from '@topology/core'
|
||||
export let canvas
|
||||
|
||||
export function canvasRegister () {
|
||||
// registerFlow()
|
||||
// registerActivity()
|
||||
// registerSequence()
|
||||
// registerChart()
|
||||
// registerClass()
|
||||
}
|
||||
|
||||
export const Tools = [
|
||||
{
|
||||
group: 'General',
|
||||
@@ -240,371 +231,419 @@ export const imageTemp2 = {
|
||||
fullIconRect: { width: 80, height: 90, center: { x: 972, y: 456 }, ex: 1012, ey: 496 }
|
||||
}
|
||||
}
|
||||
/* 自定义图片组件 */
|
||||
export function myShape (ctx, node) { // 自定义图片组件
|
||||
export function rectangleImg (ctx, pen) {
|
||||
ctx.beginPath()
|
||||
|
||||
ctx.rect(node.rect.x, node.rect.y, node.rect.width, node.rect.height)
|
||||
if (node.data && node.data.lineWidth <= 0) {
|
||||
ctx.rect(pen.x, pen.y, pen.width, pen.height)
|
||||
if (pen.data && pen.data.lineWidth <= 0) {
|
||||
ctx.strokeStyle = 'rgba(0,0,0,0)'
|
||||
}
|
||||
// 必须判空再填充
|
||||
(node.fillStyle || node.bkType) && ctx.fill()
|
||||
(pen.fillStyle || pen.bkType) && ctx.fill()
|
||||
pen.iconHeight = pen.height - 30
|
||||
console.log(pen)
|
||||
// pen.iconRect = new Rect(pen.x + pen.paddingLeft, pen.y + pen.paddingTop, pen.width - (pen.paddingLeft + pen.paddingRight), pen.height - 20 - (pen.paddingTop + pen.paddingBottom))
|
||||
// pen.fullIconRect = { width: 80, height: 90, center: { x: 972, y: 456 }, ex: 1012, ey: 496 }
|
||||
ctx.stroke()
|
||||
}
|
||||
export function myAnchors (node) {
|
||||
node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height / 2, Direction.Left))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2, Direction.Right))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height, Direction.Bottom))
|
||||
}
|
||||
export function myIconRect (node) {
|
||||
node.iconRect = new Rect(node.rect.x + node.paddingLeft, node.rect.y + node.paddingTop, node.rect.width - (node.paddingLeft + node.paddingRight), node.rect.height - 20 - (node.paddingTop + node.paddingBottom))
|
||||
node.fullIconRect = node.rect
|
||||
}
|
||||
export function myTextRect (node) {
|
||||
node.textRect = new Rect(
|
||||
node.rect.x + node.paddingLeft,
|
||||
node.rect.y + node.rect.height - 20 - node.paddingBottom,
|
||||
node.rect.width - (node.paddingLeft + node.paddingRight),
|
||||
20
|
||||
)
|
||||
node.fullTextRect = node.rect
|
||||
}
|
||||
export function myIconRect2 (node) {
|
||||
node.iconRect = node.rect
|
||||
node.fullIconRect = node.rect
|
||||
}
|
||||
export function myTextRect2 (node) {
|
||||
node.textRect = new Rect(
|
||||
node.rect.x + node.paddingLeft,
|
||||
node.rect.y + node.rect.height + 10,
|
||||
node.rect.width - (node.paddingLeft + node.paddingRight),
|
||||
20
|
||||
)
|
||||
node.fullTextRect = node.rect
|
||||
export function rectangleImgAnchors (pen) {
|
||||
const anchors = []
|
||||
// console.log(pen)
|
||||
anchors.push({
|
||||
id: '0',
|
||||
penId: pen.id,
|
||||
x: pen.x,
|
||||
y: pen.y + pen.height / 4
|
||||
})
|
||||
anchors.push({
|
||||
id: '1',
|
||||
penId: pen.id,
|
||||
x: pen.x + pen.width / 2,
|
||||
y: pen.y
|
||||
})
|
||||
anchors.push({
|
||||
id: '2',
|
||||
penId: pen.id,
|
||||
x: pen.x + pen.width,
|
||||
y: pen.y + pen.height / 2
|
||||
})
|
||||
anchors.push({
|
||||
id: '3',
|
||||
penId: pen.id,
|
||||
x: pen.x + pen.width / 2,
|
||||
y: pen.y + pen.height
|
||||
})
|
||||
return anchors
|
||||
// pen.anchors.push(new Point(pen.x, pen.y + pen.height / 2, Direction.Left))
|
||||
// pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y, Direction.Up))
|
||||
// pen.anchors.push(new Point(pen.x + pen.width, pen.y + pen.height / 2, Direction.Right))
|
||||
// pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y + pen.height, Direction.Bottom))
|
||||
}
|
||||
/* 自定义图片组件 */
|
||||
|
||||
/* 自定义立方体 */
|
||||
export function myCubec (ctx, node) {
|
||||
// 立方体
|
||||
// ctx.rect(node.rect.x,node.rect.y,node.rect.width,node.rect.height);
|
||||
const x = node.rect.x + 10; const y = node.rect.y + 10; const w = node.rect.width - 20; const h = node.rect.height - 20
|
||||
|
||||
// LINE MODE
|
||||
ctx.lineJoin = 'round'
|
||||
|
||||
// center face
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x, y + h / 3)
|
||||
ctx.lineTo(x + w * 2 / 3, y + h / 3)
|
||||
ctx.lineTo(x + w * 2 / 3, y + h)
|
||||
ctx.lineTo(x, y + h)
|
||||
ctx.closePath()
|
||||
ctx.fillStyle = node.fillStyle
|
||||
ctx.strokeStyle = node.strokeStyle
|
||||
ctx.stroke();
|
||||
(node.fillStyle || node.bkType) && ctx.fill()
|
||||
|
||||
// top face
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x, y + h / 3)
|
||||
ctx.lineTo(x + w / 3, y)
|
||||
ctx.lineTo(x + w, y)
|
||||
ctx.lineTo(x + w * 2 / 3, y + h / 3)
|
||||
ctx.closePath()
|
||||
ctx.fillStyle = node.fillStyle
|
||||
ctx.strokeStyle = node.strokeStyle
|
||||
ctx.stroke();
|
||||
(node.fillStyle || node.bkType) && ctx.fill()
|
||||
|
||||
// right face
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x + w * 2 / 3, y + h / 3)
|
||||
ctx.lineTo(x + w, y)
|
||||
ctx.lineTo(x + w, y + h * 2 / 3)
|
||||
ctx.lineTo(x + w * 2 / 3, y + h)
|
||||
ctx.closePath()
|
||||
ctx.fillStyle = node.fillStyle
|
||||
ctx.strokeStyle = node.strokeStyle
|
||||
ctx.stroke();
|
||||
(node.fillStyle || node.bkType) && ctx.fill()
|
||||
|
||||
// 必须判空再填充
|
||||
}
|
||||
export function myCubeAnchors (node) { // 立方体锚点
|
||||
node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height / 2, Direction.Left))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2, Direction.Right))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height, Direction.Bottom))
|
||||
}
|
||||
/* 自定义立方体 */
|
||||
|
||||
export function onChangeAnimate (node, animateType, fillStyle, strokeStyle) {
|
||||
node.animateType = animateType
|
||||
if (node.animateType === 'custom') {
|
||||
return
|
||||
}
|
||||
|
||||
node.animateFrames = []
|
||||
const state = Node.cloneState(node)
|
||||
switch (animateType) {
|
||||
case 'upDown':
|
||||
state.rect.y -= 10
|
||||
state.rect.ey -= 10
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state
|
||||
})
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state: Node.cloneState(node)
|
||||
})
|
||||
node.animateFrames.push({
|
||||
duration: 200,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
})
|
||||
break
|
||||
case 'leftRight':
|
||||
state.rect.x -= 10
|
||||
state.rect.ex -= 10
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
})
|
||||
state.rect.x += 20
|
||||
state.rect.ex += 20
|
||||
node.animateFrames.push({
|
||||
duration: 80,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
})
|
||||
state.rect.x -= 20
|
||||
state.rect.ex -= 20
|
||||
node.animateFrames.push({
|
||||
duration: 50,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
})
|
||||
state.rect.x += 20
|
||||
state.rect.ex += 20
|
||||
node.animateFrames.push({
|
||||
duration: 30,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
})
|
||||
node.animateFrames.push({
|
||||
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
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state
|
||||
})
|
||||
node.animateFrames.push({
|
||||
duration: 400,
|
||||
linear: true,
|
||||
state: Node.cloneState(node)
|
||||
})
|
||||
break
|
||||
case 'success':
|
||||
state.strokeStyle = strokeStyle || '#237804'
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state
|
||||
})
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state: Node.cloneState(node)
|
||||
})
|
||||
state.strokeStyle = '#237804'
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state
|
||||
})
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state: Node.cloneState(node)
|
||||
})
|
||||
state.strokeStyle = strokeStyle || '#237804'
|
||||
state.fillStyle = fillStyle || '#389e0d22'
|
||||
node.animateFrames.push({
|
||||
duration: 3000,
|
||||
linear: true,
|
||||
state
|
||||
})
|
||||
break
|
||||
case 'warning':
|
||||
state.strokeStyle = strokeStyle || '#fa8c16'
|
||||
state.fillStyle = fillStyle || '#fa8c16'
|
||||
state.lineWidth = 5
|
||||
state.dash = 2
|
||||
node.animateFrames.push({
|
||||
duration: 500,
|
||||
linear: true,
|
||||
state
|
||||
})
|
||||
state.strokeStyle = strokeStyle || '#fa8c16'
|
||||
state.dash = 0
|
||||
state.lineWidth = 1
|
||||
state.fillStyle = '#ffffff'
|
||||
node.animateFrames.push({
|
||||
duration: 500,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
})
|
||||
state.strokeStyle = strokeStyle || '#fa8c16'
|
||||
state.dash = 2
|
||||
state.lineWidth = 5
|
||||
state.fillStyle = fillStyle || '#fa8c16'
|
||||
node.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
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state
|
||||
})
|
||||
state.strokeStyle = strokeStyle || '#cf1322'
|
||||
state.fillStyle = '#ffffff'
|
||||
state.dash = 0
|
||||
state.lineWidth = 1
|
||||
node.animateFrames.push({
|
||||
duration: 500,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
})
|
||||
state.strokeStyle = strokeStyle || '#cf1322'
|
||||
state.fillStyle = fillStyle || '#cf132222'
|
||||
state.dash = 2
|
||||
state.lineWidth = 5
|
||||
node.animateFrames.push({
|
||||
duration: 300,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
})
|
||||
break
|
||||
case 'show':
|
||||
state.strokeStyle = strokeStyle || '#fa541c'
|
||||
state.rotate = -5
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
})
|
||||
state.rotate = 5
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
})
|
||||
state.rotate = 0
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
})
|
||||
break
|
||||
case 'fade':
|
||||
state.strokeStyle = strokeStyle || '#fa541c'
|
||||
state.globalAlpha = 0.3
|
||||
node.animateFrames.push({
|
||||
duration: 300,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
})
|
||||
state.globalAlpha = 0.5
|
||||
node.animateFrames.push({
|
||||
duration: 300,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
})
|
||||
state.globalAlpha = 0.8
|
||||
node.animateFrames.push({
|
||||
duration: 300,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
})
|
||||
state.globalAlpha = 1
|
||||
node.animateFrames.push({
|
||||
duration: 300,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
})
|
||||
break
|
||||
}
|
||||
node.animatePlay = true
|
||||
}
|
||||
export function onChangeAnimateLine (line, type) {
|
||||
line.animateType = type
|
||||
line.animatePlay = true
|
||||
}
|
||||
export function changeImage (dataImg, callback) {
|
||||
// const base64Img = document.createElement('base64Img')
|
||||
const canvas = document.createElement('canvas')
|
||||
const context = canvas.getContext('2d')
|
||||
// 创建新图片
|
||||
const img = new Image()
|
||||
img.src = dataImg
|
||||
img.addEventListener(
|
||||
'load',
|
||||
function () {
|
||||
// 绘制图片到canvas上
|
||||
canvas.width = img.width
|
||||
canvas.height = img.height
|
||||
context.drawImage(img, 0, 0)
|
||||
|
||||
// 将canvas的透明背景设置成白色
|
||||
const imageData = context.getImageData(
|
||||
0,
|
||||
0,
|
||||
canvas.width,
|
||||
canvas.height
|
||||
)
|
||||
for (let i = 0; i < imageData.data.length; i += 4) {
|
||||
// rgb大于250的透明度y均设置成0
|
||||
if (
|
||||
imageData.data[i] > 0 &&
|
||||
imageData.data[i + 1] > 0 &&
|
||||
imageData.data[i + 2] > 0
|
||||
) {
|
||||
imageData.data[i + 3] = 200
|
||||
}
|
||||
}
|
||||
context.putImageData(imageData, 0, 0)
|
||||
const baseImg = canvas.toDataURL('image/png')// 返回base64
|
||||
if (typeof callback !== 'undefined') {
|
||||
if (callback) callback(baseImg)
|
||||
}
|
||||
img.remove()
|
||||
},
|
||||
false
|
||||
)
|
||||
}
|
||||
// export function myShape (ctx, node) { // 自定义图片组件
|
||||
// ctx.beginPath()
|
||||
//
|
||||
// ctx.rect(pen.x, pen.y, pen.width, pen.height)
|
||||
// if (pen.data && pen.data.lineWidth <= 0) {
|
||||
// ctx.strokeStyle = 'rgba(0,0,0,0)'
|
||||
// }
|
||||
// // 必须判空再填充
|
||||
// (pen.fillStyle || pen.bkType) && ctx.fill()
|
||||
// ctx.stroke()
|
||||
// }
|
||||
// export function myAnchors (node) {
|
||||
// pen.anchors.push(new Point(pen.x, pen.y + pen.height / 2, Direction.Left))
|
||||
// pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y, Direction.Up))
|
||||
// pen.anchors.push(new Point(pen.x + pen.width, pen.y + pen.height / 2, Direction.Right))
|
||||
// pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y + pen.height, Direction.Bottom))
|
||||
// }
|
||||
// export function myIconRect (node) {
|
||||
// pen.iconRect = new Rect(pen.x + pen.paddingLeft, pen.y + pen.paddingTop, pen.width - (pen.paddingLeft + pen.paddingRight), pen.height - 20 - (pen.paddingTop + pen.paddingBottom))
|
||||
// pen.fullIconRect = pen.rect
|
||||
// }
|
||||
// export function myTextRect (node) {
|
||||
// pen.textRect = new Rect(
|
||||
// pen.x + pen.paddingLeft,
|
||||
// pen.y + pen.height - 20 - pen.paddingBottom,
|
||||
// pen.width - (pen.paddingLeft + pen.paddingRight),
|
||||
// 20
|
||||
// )
|
||||
// pen.fullTextRect = pen.rect
|
||||
// }
|
||||
// export function myIconRect2 (node) {
|
||||
// pen.iconRect = pen.rect
|
||||
// pen.fullIconRect = pen.rect
|
||||
// }
|
||||
// export function myTextRect2 (node) {
|
||||
// pen.textRect = new Rect(
|
||||
// pen.x + pen.paddingLeft,
|
||||
// pen.y + pen.height + 10,
|
||||
// pen.width - (pen.paddingLeft + pen.paddingRight),
|
||||
// 20
|
||||
// )
|
||||
// pen.fullTextRect = pen.rect
|
||||
// }
|
||||
// /* 自定义图片组件 */
|
||||
//
|
||||
// /* 自定义立方体 */
|
||||
// export function myCubec (ctx, node) {
|
||||
// // 立方体
|
||||
// // ctx.rect(pen.x,pen.y,pen.width,pen.height);
|
||||
// const x = pen.x + 10; const y = pen.y + 10; const w = pen.width - 20; const h = pen.height - 20
|
||||
//
|
||||
// // LINE MODE
|
||||
// ctx.lineJoin = 'round'
|
||||
//
|
||||
// // center face
|
||||
// ctx.beginPath()
|
||||
// ctx.moveTo(x, y + h / 3)
|
||||
// ctx.lineTo(x + w * 2 / 3, y + h / 3)
|
||||
// ctx.lineTo(x + w * 2 / 3, y + h)
|
||||
// ctx.lineTo(x, y + h)
|
||||
// ctx.closePath()
|
||||
// ctx.fillStyle = pen.fillStyle
|
||||
// ctx.strokeStyle = pen.strokeStyle
|
||||
// ctx.stroke();
|
||||
// (pen.fillStyle || pen.bkType) && ctx.fill()
|
||||
//
|
||||
// // top face
|
||||
// ctx.beginPath()
|
||||
// ctx.moveTo(x, y + h / 3)
|
||||
// ctx.lineTo(x + w / 3, y)
|
||||
// ctx.lineTo(x + w, y)
|
||||
// ctx.lineTo(x + w * 2 / 3, y + h / 3)
|
||||
// ctx.closePath()
|
||||
// ctx.fillStyle = pen.fillStyle
|
||||
// ctx.strokeStyle = pen.strokeStyle
|
||||
// ctx.stroke();
|
||||
// (pen.fillStyle || pen.bkType) && ctx.fill()
|
||||
//
|
||||
// // right face
|
||||
// ctx.beginPath()
|
||||
// ctx.moveTo(x + w * 2 / 3, y + h / 3)
|
||||
// ctx.lineTo(x + w, y)
|
||||
// ctx.lineTo(x + w, y + h * 2 / 3)
|
||||
// ctx.lineTo(x + w * 2 / 3, y + h)
|
||||
// ctx.closePath()
|
||||
// ctx.fillStyle = pen.fillStyle
|
||||
// ctx.strokeStyle = pen.strokeStyle
|
||||
// ctx.stroke();
|
||||
// (pen.fillStyle || pen.bkType) && ctx.fill()
|
||||
//
|
||||
// // 必须判空再填充
|
||||
// }
|
||||
// export function myCubeAnchors (node) { // 立方体锚点
|
||||
// pen.anchors.push(new Point(pen.x, pen.y + pen.height / 2, Direction.Left))
|
||||
// pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y, Direction.Up))
|
||||
// pen.anchors.push(new Point(pen.x + pen.width, pen.y + pen.height / 2, Direction.Right))
|
||||
// pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y + pen.height, Direction.Bottom))
|
||||
// }
|
||||
// /* 自定义立方体 */
|
||||
//
|
||||
// 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({
|
||||
// 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
|
||||
// }
|
||||
// export function changeImage (dataImg, callback) {
|
||||
// // const base64Img = document.createElement('base64Img')
|
||||
// const canvas = document.createElement('canvas')
|
||||
// const context = canvas.getContext('2d')
|
||||
// // 创建新图片
|
||||
// const img = new Image()
|
||||
// img.src = dataImg
|
||||
// img.addEventListener(
|
||||
// 'load',
|
||||
// function () {
|
||||
// // 绘制图片到canvas上
|
||||
// canvas.width = img.width
|
||||
// canvas.height = img.height
|
||||
// context.drawImage(img, 0, 0)
|
||||
//
|
||||
// // 将canvas的透明背景设置成白色
|
||||
// const imageData = context.getImageData(
|
||||
// 0,
|
||||
// 0,
|
||||
// canvas.width,
|
||||
// canvas.height
|
||||
// )
|
||||
// for (let i = 0; i < imageData.data.length; i += 4) {
|
||||
// // rgb大于250的透明度y均设置成0
|
||||
// if (
|
||||
// imageData.data[i] > 0 &&
|
||||
// imageData.data[i + 1] > 0 &&
|
||||
// imageData.data[i + 2] > 0
|
||||
// ) {
|
||||
// imageData.data[i + 3] = 200
|
||||
// }
|
||||
// }
|
||||
// context.putImageData(imageData, 0, 0)
|
||||
// const baseImg = canvas.toDataURL('image/png')// 返回base64
|
||||
// if (typeof callback !== 'undefined') {
|
||||
// if (callback) callback(baseImg)
|
||||
// }
|
||||
// img.remove()
|
||||
// },
|
||||
// false
|
||||
// )
|
||||
// }
|
||||
|
||||
2324
nezha-fronted/src/components/common/project/newTopologyL5.vue
Normal file
2324
nezha-fronted/src/components/common/project/newTopologyL5.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -336,22 +336,37 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Topology, registerNode } from '@/components/common/@topology/core/index.js'
|
||||
import { Topology } from '@topology/core'
|
||||
import { Store as le5leStore } from 'le5le-store'
|
||||
import {
|
||||
flowPens
|
||||
} from '@topology/flow-diagram'
|
||||
import {
|
||||
activityDiagram
|
||||
} from '@topology/activity-diagram'
|
||||
import {
|
||||
classPens
|
||||
} from '@topology/class-diagram'
|
||||
import {
|
||||
sequencePens,
|
||||
sequencePensbyCtx
|
||||
} from '@topology/sequence-diagram'
|
||||
import { formPens } from '@topology/form-diagram'
|
||||
// import { Topology, registerNode } from '@topology/core'
|
||||
import imgDefault from '@/components/common/project/L5/services/img'
|
||||
import {
|
||||
Tools,
|
||||
canvasRegister,
|
||||
imageTemp,
|
||||
myShape,
|
||||
myAnchors,
|
||||
myIconRect,
|
||||
myTextRect,
|
||||
onChangeAnimate,
|
||||
onChangeAnimateLine,
|
||||
myCubec,
|
||||
myCubeAnchors
|
||||
rectangleImg,
|
||||
rectangleImgAnchors
|
||||
// myShape,
|
||||
// myAnchors,
|
||||
// myIconRect,
|
||||
// myTextRect,
|
||||
// onChangeAnimate,
|
||||
// onChangeAnimateLine,
|
||||
// myCubec,
|
||||
// myCubeAnchors
|
||||
} from './L5/services/canvas.js'
|
||||
import { getTopology, setTopology, dealImg, topologyImg } from '../js/common'
|
||||
|
||||
@@ -368,8 +383,9 @@ import { getMetricTypeValue, dealLegendAlias } from '../js/tools'
|
||||
import bus from '../../../libs/bus'
|
||||
|
||||
// 注册到画布
|
||||
registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
|
||||
registerNode('myCube', myCubec, myCubeAnchors, null, null)
|
||||
|
||||
// registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
|
||||
// registerNode('myCube', myCubec, myCubeAnchors, null, null)
|
||||
|
||||
const canvasOptions = {
|
||||
rotateCursor: '/img/rotate.cur',
|
||||
@@ -639,7 +655,7 @@ export default {
|
||||
}
|
||||
},
|
||||
created () {
|
||||
canvasRegister()
|
||||
// canvasRegister()
|
||||
},
|
||||
mounted () {
|
||||
if (!this.fromOverView) { // 从overview来的 加载相应图片 优化首页加载速度
|
||||
@@ -704,6 +720,11 @@ 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)
|
||||
getTopology(this.topologyIndex).open()
|
||||
getTopology(this.topologyIndex).open(data)
|
||||
getTopology(this.topologyIndex).lock(1)
|
||||
this.objChange = false
|
||||
@@ -712,8 +733,8 @@ export default {
|
||||
x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth,
|
||||
y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight
|
||||
}
|
||||
this.oldScale = getTopology(this.topologyIndex).data.scale
|
||||
getTopology(this.topologyIndex).data.pens.forEach(item => {
|
||||
this.oldScale = getTopology(this.topologyIndex).data().scale
|
||||
getTopology(this.topologyIndex).data().pens.forEach(item => {
|
||||
if (flag) {
|
||||
return
|
||||
}
|
||||
@@ -726,9 +747,9 @@ export default {
|
||||
})
|
||||
getTopology(this.topologyIndex).resize()
|
||||
getTopology(this.topologyIndex).centerView()
|
||||
this.penToolTipScale = getTopology(this.topologyIndex).data.scale
|
||||
this.penToolTipScale = getTopology(this.topologyIndex).data().scale
|
||||
const timer = setTimeout(() => {
|
||||
getTopology(this.topologyIndex) && getTopology(this.topologyIndex).data.pens.forEach(item => {
|
||||
getTopology(this.topologyIndex) && getTopology(this.topologyIndex).data().pens.forEach(item => {
|
||||
if (item.animatePlay) {
|
||||
item.stopAnimate()
|
||||
const timer1 = setTimeout(() => {
|
||||
@@ -743,7 +764,7 @@ export default {
|
||||
// getTopology(this.topologyIndex).scaleTo(data.scale/2)
|
||||
// }
|
||||
// getTopology(this.topologyIndex).fitView();
|
||||
this.oldTopologyData = JSON.stringify(getTopology(this.topologyIndex).data)
|
||||
this.oldTopologyData = JSON.stringify(getTopology(this.topologyIndex).data())
|
||||
this.getNodesArr()
|
||||
pensPromise = null
|
||||
})
|
||||
@@ -786,7 +807,7 @@ export default {
|
||||
}
|
||||
data = this.$loadsh.cloneDeep(data)
|
||||
if (!getTopology(this.topologyIndex)) {
|
||||
let canvas = new Topology('topology-canvas' + this.topologyIndexF, canvasOptions)
|
||||
let canvas = new Topology('topology-canvas' + this.topologyIndexF)
|
||||
// canvas.open(data)
|
||||
setTopology(this.topologyIndex, canvas)
|
||||
canvas = null
|
||||
@@ -794,12 +815,19 @@ export default {
|
||||
// getTopology(this.topologyIndex).open(data)
|
||||
}
|
||||
this.topologyLoading = false
|
||||
if (!getTopology(this.topologyIndex).data.name) {
|
||||
getTopology(this.topologyIndex).data.name = this.obj.name
|
||||
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).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).registerCanvasDraw({ rectangleImg })
|
||||
getTopology(this.topologyIndex).registerAnchors({ rectangleImg: rectangleImgAnchors })
|
||||
this.getModule()// 获取module
|
||||
resolve()
|
||||
})
|
||||
@@ -895,7 +923,99 @@ export default {
|
||||
item.data.state.alert = false
|
||||
}
|
||||
})
|
||||
data.pens = data.pens.map(item => {
|
||||
if (item.type === 0) {
|
||||
item = {
|
||||
...item,
|
||||
...item.rect
|
||||
}
|
||||
} else {
|
||||
// promiseArr.push({ type: 1 })
|
||||
console.log(item)
|
||||
item = {
|
||||
data: item.data,
|
||||
rect: item.rect,
|
||||
...item.rect,
|
||||
id: item.id,
|
||||
tags: [
|
||||
|
||||
],
|
||||
name: 'line',
|
||||
type: 1,
|
||||
fromArrow: '',
|
||||
toArrow: 'triangleSolid',
|
||||
anchors: [
|
||||
{
|
||||
id: 'd3b9bb5',
|
||||
penId: 'fdde44f',
|
||||
x: 0,
|
||||
y: 1,
|
||||
prev: {
|
||||
penId: 'fdde44f',
|
||||
x: -0.28768449363179044,
|
||||
y: 1
|
||||
},
|
||||
next: {
|
||||
penId: 'fdde44f',
|
||||
x: 0.28768449363179044,
|
||||
y: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '5c7f698f',
|
||||
penId: 'fdde44f',
|
||||
connectTo: 'f10e596',
|
||||
x: 1,
|
||||
y: 0,
|
||||
prev: {
|
||||
penId: 'fdde44f',
|
||||
connectTo: 'f10e596',
|
||||
x: 0.7123155063682084,
|
||||
y: 0
|
||||
},
|
||||
next: {
|
||||
penId: 'fdde44f',
|
||||
connectTo: 'f10e596',
|
||||
x: 1.2876844936317902,
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
],
|
||||
color: '#000000',
|
||||
lineWidth: 2.4390243902439024,
|
||||
borderColor: '#000000',
|
||||
borderWidth: 0,
|
||||
rotate: 0,
|
||||
visible: true,
|
||||
background: '',
|
||||
lineHeight: 1.5,
|
||||
fontSize: 12,
|
||||
fontFamily: '"Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial',
|
||||
fontStyle: 'normal',
|
||||
fontWeight: 'normal',
|
||||
textColor: '#000000',
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
textBackground: '#ffffff',
|
||||
animateSpan: 1,
|
||||
animateColor: '#ffffff',
|
||||
animateCycle: null,
|
||||
lineAnimateType: 1,
|
||||
animateDotSize: 3,
|
||||
animateType: 'beads',
|
||||
frames: [
|
||||
|
||||
],
|
||||
autoPlay: false,
|
||||
globalAlpha: 1,
|
||||
events: [
|
||||
|
||||
]
|
||||
}
|
||||
}
|
||||
return item
|
||||
})
|
||||
console.log(data.pens)
|
||||
if (!data.data) {
|
||||
this.projectInfoShow = true
|
||||
this.projectAlertShow = true
|
||||
@@ -930,6 +1050,7 @@ export default {
|
||||
}
|
||||
})
|
||||
this.saveData = JSON.parse(JSON.stringify(data))
|
||||
console.log(JSON.stringify(data))
|
||||
resolve(data)
|
||||
clearInterval(this.timer4)
|
||||
this.timer4 = null
|
||||
@@ -976,7 +1097,7 @@ export default {
|
||||
pen.strokeStyle = 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)
|
||||
} else if (pen.type === 1) { // 判断valueMapping 给相应的状态
|
||||
const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel)
|
||||
if (selLevel) {
|
||||
@@ -985,13 +1106,13 @@ export default {
|
||||
pen.animateType = selLevel.animateType
|
||||
pen.fontColor = selLevel.color.text
|
||||
}
|
||||
onChangeAnimateLine(pen, pen.animateType)
|
||||
// onChangeAnimateLine(pen, pen.animateType)
|
||||
}
|
||||
} 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)
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -1081,9 +1202,9 @@ export default {
|
||||
getNodesArr () {
|
||||
if (!getTopology(this.topologyIndex)) return
|
||||
let arr = []
|
||||
this.offsetX = getTopology(this.topologyIndex).data.x
|
||||
this.offsetY = getTopology(this.topologyIndex).data.y
|
||||
arr = getTopology(this.topologyIndex).data.pens.filter(item => {
|
||||
this.offsetX = getTopology(this.topologyIndex).data().x
|
||||
this.offsetY = getTopology(this.topologyIndex).data().y
|
||||
arr = getTopology(this.topologyIndex).data().pens.filter(item => {
|
||||
if (!item.data) {
|
||||
item.data = {
|
||||
moduleId: '',
|
||||
@@ -1114,8 +1235,8 @@ export default {
|
||||
// 摘除已选择的module
|
||||
modulesDiff (data) {
|
||||
this.modules = this.allModules
|
||||
if (getTopology(this.topologyIndex) && getTopology(this.topologyIndex).data.pens) {
|
||||
getTopology(this.topologyIndex).data.pens.forEach(item => {
|
||||
if (getTopology(this.topologyIndex) && getTopology(this.topologyIndex).data().pens) {
|
||||
getTopology(this.topologyIndex).data().pens.forEach(item => {
|
||||
if (item.type == 0) {
|
||||
this.modules = this.modules.filter(item1 => item.data.moduleId !== item1.id)
|
||||
}
|
||||
@@ -1316,7 +1437,7 @@ export default {
|
||||
}
|
||||
this.chartData = { ...data.data, ...this.chartGetData.find(item => item.id === data.id) }
|
||||
this.tooltipPosition.show = false
|
||||
const timer = setTimeout(() => {
|
||||
const timer = setTimeout(() => {
|
||||
this.tooltipPosition.show = true
|
||||
let ePosition = window.ePosition
|
||||
let boxWidth = document.getElementsByClassName('page')[0].offsetWidth
|
||||
@@ -1907,7 +2028,7 @@ 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).data().pens.forEach((item, index) => { // 停止动画 以及赋值默认data
|
||||
if (item.animatePlay) {
|
||||
item.stopAnimate()
|
||||
}
|
||||
@@ -1947,7 +2068,7 @@ export default {
|
||||
})
|
||||
getTopology(this.topologyIndex).caches = {
|
||||
index: 0,
|
||||
list: [JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data))]
|
||||
list: [JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data()))]
|
||||
}
|
||||
const dom = document.getElementById('topology-canvas' + this.topologyIndexF)
|
||||
const domRect = dom ? dom.getBoundingClientRect() : {}
|
||||
@@ -1973,7 +2094,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
|
||||
const dataOption = getTopology(this.topologyIndex).data()
|
||||
dataOption[key] = this.lineName
|
||||
getTopology(this.topologyIndex).render()
|
||||
},
|
||||
@@ -2040,8 +2161,8 @@ export default {
|
||||
}
|
||||
})
|
||||
})
|
||||
if (this.penToolTipScale == getTopology(this.topologyIndex).data.scale) {
|
||||
getTopology(this.topologyIndex).data.scale = this.oldScale
|
||||
if (this.penToolTipScale == getTopology(this.topologyIndex).data().scale) {
|
||||
getTopology(this.topologyIndex).data().scale = this.oldScale
|
||||
}
|
||||
this.$put('monitor/project/topo', { topo: JSON.stringify(topologyData), projectId: this.projectInfo.id }).then(res => {
|
||||
this.prevent_opt.save = false
|
||||
@@ -2125,8 +2246,8 @@ export default {
|
||||
}
|
||||
})
|
||||
})
|
||||
if (this.penToolTipScale == getTopology(this.topologyIndex).data.scale) {
|
||||
getTopology(this.topologyIndex).data.scale = this.oldScale
|
||||
if (this.penToolTipScale == getTopology(this.topologyIndex).data().scale) {
|
||||
getTopology(this.topologyIndex).data().scale = this.oldScale
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.previewData = topologyData
|
||||
@@ -2145,7 +2266,7 @@ export default {
|
||||
|
||||
// 联动 project
|
||||
changeProjectTitle () {
|
||||
const data = getTopology(this.topologyIndex).data
|
||||
const data = getTopology(this.topologyIndex).data()
|
||||
this.topologyInfo = {
|
||||
fontSize: data.data.fontSize,
|
||||
align: data.data.align,
|
||||
@@ -2169,7 +2290,7 @@ export default {
|
||||
x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth,
|
||||
y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight
|
||||
}
|
||||
getTopology(this.topologyIndex).data.pens.forEach(item => {
|
||||
getTopology(this.topologyIndex).data().pens.forEach(item => {
|
||||
if (flag) {
|
||||
return
|
||||
}
|
||||
@@ -2260,7 +2381,7 @@ export default {
|
||||
this.uploadPicShow = true
|
||||
},
|
||||
zoomMap (num) {
|
||||
getTopology(this.topologyIndex).scaleTo(getTopology(this.topologyIndex).data.scale + num)
|
||||
getTopology(this.topologyIndex).scaleTo(getTopology(this.topologyIndex).data().scale + num)
|
||||
},
|
||||
penToBottom () {
|
||||
getTopology(this.topologyIndex).bottom()
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { file } from '@topology/core/src/middles/nodes/file'
|
||||
import routerPathParams from '@/components/common/mixin/routerPathParams'
|
||||
|
||||
export const tableCommon = {
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"baseUrl":"/", "version": "22.05"}
|
||||
{"baseUrl":"http://192.168.40.42:8080/", "version": "22.05"}
|
||||
|
||||
Reference in New Issue
Block a user