fix：暂存 topology 升级 （未完成）

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

@@ -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) { // 改变线型

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

@@ -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
+//   )
+// }

nezha-fronted/src/components/common/project/topologyL5.vue

@@ -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()