feat(extension & docs): highlight插件高亮时触发事件抛出高亮节点信息 fix #2138 & 补充文档中插件事件相关的内容

Author: DymoneLewis

examples/feature-examples/src/pages/extensions/highlight/index.tsx

@@ -1,6 +1,6 @@
-import { Card, Divider, Tag } from 'antd'
+import { Card, Divider, Radio, Tag } from 'antd'
 import LogicFlow from '@logicflow/core'
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Highlight } from '@logicflow/extension'
 
 import './index.less'
@@ -20,25 +20,41 @@ const config: Partial<LogicFlow.Options> = {
   },
   plugins: [Highlight],
   snapline: true, // 是否开启辅助对齐线
-  pluginsOptions: {
-    highlight: {
-      mode: 'neighbour',
-    },
-  },
 }
 
 export default function HighLightExtension() {
   const containerRef = useRef<HTMLDivElement | null>(null)
+  const [highlightMode, setHighlightMode] = useState('path')
+  const lfRef = useRef<LogicFlow | null>(null)
 
   useEffect(() => {
     const lf: LogicFlow = new LogicFlow({
       container: containerRef.current!,
       ...config,
+      pluginsOptions: {
+        highlight: {
+          mode: highlightMode,
+        },
+      },
+    })
+    lfRef.current = lf
+    lfRef.current.render(data)
+    lfRef.current.translateCenter()
+    lfRef.current.on('highlight:single', ({ model }) => {
+      console.log('highlight:single', model)
+    })
+    lfRef.current.on('highlight:neighbours', ({ data, relateElements }) => {
+      console.log('highlight:neighbours', data, relateElements)
+    })
+    lfRef.current.on('highlight:path', ({ data, relateElements }) => {
+      console.log('highlight:path', data, relateElements)
     })
-
-    lf.render(data)
-    lf.translateCenter()
   }, [])
+  useEffect(() => {
+    ;(lfRef.current?.extension.highlight as Highlight)?.setMode(
+      highlightMode as any,
+    )
+  }, [highlightMode])
   return (
     <Card title="LogicFlow Extension - Highlight" id="card">
       <p>
@@ -50,6 +66,17 @@ export default function HighLightExtension() {
       </p>
       <p>节点：高亮这个节点前后相关的所有边和节点</p>
       <p>边：高亮这个边指向的节点前后相关的所有边和节点</p>
+      <Radio.Group
+        value={highlightMode}
+        onChange={(e) => {
+          setHighlightMode(e.target.value)
+        }}
+        style={{ marginBottom: 16 }}
+      >
+        <Radio.Button value="path">全路径高亮</Radio.Button>
+        <Radio.Button value="single">单元素高亮</Radio.Button>
+        <Radio.Button value="neighbour">相邻元素高亮</Radio.Button>
+      </Radio.Group>
       <Divider />
       <div ref={containerRef} id="graph"></div>
     </Card>

packages/extension/src/components/highlight/index.ts

@@ -1,5 +1,5 @@
-import LogicFlow, { BaseNodeModel } from '@logicflow/core'
-import { concat } from 'lodash-es'
+import LogicFlow, { BaseEdgeModel, BaseNodeModel } from '@logicflow/core'
+import { uniqBy, concat } from 'lodash-es'
 
 // 后续并入FlowPath
 const getPath = (id: string, lf: LogicFlow) => {
@@ -99,7 +99,8 @@ export class Highlight {
     this.enable = enable
   }
 
-  setMode(mode: IMode) {
+  public setMode(mode: IMode) {
+    console.log('setMode', mode)
     this.mode = mode
   }
 
@@ -119,11 +120,14 @@ export class Highlight {
       model.sourceNode.updateStyles(this.tempStyles[model.sourceNode.id])
       model.targetNode.updateStyles(this.tempStyles[model.targetNode.id])
     }
+    this.lf.emit('highlight:single', {
+      data: model,
+    })
   }
 
   private highlightNeighbours(id: string) {
     const model = this.lf.getModelById(id)
-
+    let relateElements: (BaseNodeModel | BaseEdgeModel)[] = []
     if (model?.BaseType === 'node') {
       // 高亮节点
       model.updateStyles(this.tempStyles[id])
@@ -135,23 +139,46 @@ export class Highlight {
       concat(incomingEdges, outgoingEdges).forEach((edge) => {
         edge.updateStyles(this.tempStyles[edge.id])
       })
+      relateElements = uniqBy(
+        concat(
+          relateElements,
+          incomingNodes,
+          outgoingNodes,
+          incomingEdges,
+          outgoingEdges,
+        ),
+        'id',
+      )
     } else if (model?.BaseType === 'edge') {
       // 高亮边及对应的节点
       model.updateStyles(this.tempStyles[id])
       model.sourceNode.updateStyles(this.tempStyles[model.sourceNode.id])
       model.targetNode.updateStyles(this.tempStyles[model.targetNode.id])
+      relateElements = [model.sourceNode, model.targetNode]
     }
+    this.lf.emit('highlight:neighbours', {
+      data: model,
+      relateElements,
+    })
   }
 
   private highlightPath(id: string) {
     const path = getPath(id, this.lf)
+    const relateElements: any[] = []
     path.forEach((_id) => {
+      const elementModel = this.lf.getModelById(_id)
       // 高亮路径上所有的边和节点
-      this.lf.getModelById(_id)?.updateStyles(this.tempStyles[_id])
+      elementModel?.updateStyles(this.tempStyles[_id])
+      relateElements.push(elementModel)
+    })
+    this.lf.emit('highlight:path', {
+      data: this.lf.getModelById(id),
+      relateElements,
     })
   }
 
   highlight(id: string, mode: IMode = this.mode) {
+    console.log('highlight', id, mode)
     if (!this.enable) return
     if (Object.keys(this.tempStyles).length) {
       this.restoreHighlight()