Merge branch 'master' into bugfix/11.21-finishing-issues

examples/engine-browser-examples/src/pages/extension/label/index.tsx

@@ -158,6 +158,9 @@ export default function BasicNode() {
       const lf = new LogicFlow({
         ...config,
         container: containerRef.current as HTMLElement,
+        keyboard: {
+          enabled: true,
+        },
         // container: document.querySelector('#graph') as HTMLElement,
         plugins: [Label, DndPanel],
         pluginsOptions: {

examples/feature-examples/.umirc.ts

@@ -199,6 +199,11 @@ export default defineConfig({
           name: 'RectLabelNode 插件',
           component: './extensions/rect-label-node',
         },
+        {
+          path: '/extension/proximity-connect',
+          name: 'Proximity Connect 插件',
+          component: './extensions/proximity-connect',
+        },
       ],
     },
     {

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

@@ -6,7 +6,7 @@ import { useEffect, useRef } from 'react'
 import styles from './index.less'
 
 import '@logicflow/core/es/index.css'
-// import '@logicflow/extension/es/index.css'
+import '@logicflow/extension/es/index.css'
 
 const config: Partial<LogicFlow.Options> = {
   isSilentMode: false,

examples/feature-examples/src/pages/extensions/proximity-connect/index.less

@@ -0,0 +1,5 @@
+.viewport {
+  position: relative;
+  height: 80vh;
+  overflow: hidden;
+}

examples/feature-examples/src/pages/extensions/proximity-connect/index.tsx

@@ -0,0 +1,204 @@
+import LogicFlow from '@logicflow/core'
+import { ProximityConnect } from '@logicflow/extension'
+
+import {
+  Space,
+  Input,
+  Button,
+  Card,
+  Divider,
+  Row,
+  Col,
+  Form,
+  Switch,
+} from 'antd'
+import { useEffect, useRef, useState } from 'react'
+import styles from './index.less'
+
+import '@logicflow/core/es/index.css'
+import '@logicflow/extension/es/index.css'
+
+const config: Partial<LogicFlow.Options> = {
+  isSilentMode: false,
+  stopScrollGraph: true,
+  stopZoomGraph: true,
+  style: {
+    rect: {
+      rx: 5,
+      ry: 5,
+      strokeWidth: 2,
+    },
+    circle: {
+      fill: '#f5f5f5',
+      stroke: '#666',
+    },
+    ellipse: {
+      fill: '#dae8fc',
+      stroke: '#6c8ebf',
+    },
+    polygon: {
+      fill: '#d5e8d4',
+      stroke: '#82b366',
+    },
+    diamond: {
+      fill: '#ffe6cc',
+      stroke: '#d79b00',
+    },
+    text: {
+      color: '#b85450',
+      fontSize: 12,
+    },
+  },
+}
+
+const data = {
+  nodes: [
+    {
+      id: '1',
+      type: 'rect',
+      x: 150,
+      y: 100,
+      text: '矩形',
+    },
+    {
+      id: '2',
+      type: 'circle',
+      x: 550,
+      y: 100,
+      text: '圆形',
+    },
+    {
+      id: '3',
+      type: 'ellipse',
+      x: 950,
+      y: 100,
+      text: '椭圆',
+    },
+    {
+      id: '4',
+      type: 'polygon',
+      x: 150,
+      y: 350,
+      text: '多边形',
+    },
+    {
+      id: '5',
+      type: 'diamond',
+      x: 550,
+      y: 350,
+      text: '菱形',
+    },
+    {
+      id: '6',
+      type: 'text',
+      x: 950,
+      y: 350,
+      text: '纯文本节点',
+    },
+    {
+      id: '7',
+      type: 'html',
+      x: 150,
+      y: 600,
+      text: 'html节点',
+    },
+  ],
+}
+
+export default function ProximityConnectExtension() {
+  const lfRef = useRef<LogicFlow>()
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [distance, setDistance] = useState<number>(100)
+  const [reverse, setReverse] = useState<boolean>(false)
+  const [enable, setEnable] = useState<boolean>(true)
+  useEffect(() => {
+    if (!lfRef.current) {
+      const lf = new LogicFlow({
+        ...config,
+        container: containerRef.current as HTMLElement,
+        // container: document.querySelector('#graph') as HTMLElement,
+        grid: {
+          size: 10,
+        },
+        plugins: [ProximityConnect],
+        pluginsOptions: {
+          proximityConnect: {
+            enable,
+            distance,
+            reverseDirection: reverse,
+          },
+        },
+      })
+
+      lf.render(data)
+      lfRef.current = lf
+    }
+  }, [])
+
+  return (
+    <Card title="LogicFlow Extension - Control">
+      <Row>
+        <Col span={8}>
+          <Form.Item label="连线阈值：">
+            <Input
+              value={distance}
+              style={{ width: '180px' }}
+              onInput={(e) => {
+                setDistance(+e.target.value)
+              }}
+            />
+            <Button
+              type="primary"
+              onClick={() => {
+                if (lfRef.current) {
+                  ;(
+                    lfRef.current.extension.proximityConnect as ProximityConnect
+                  ).setThresholdDistance(distance)
+                }
+              }}
+            >
+              Submit
+            </Button>
+          </Form.Item>
+        </Col>
+        <Col span={8}>
+          <Form.Item label="连线方向：">
+            <Switch
+              value={reverse}
+              checkedChildren="最近节点 → 拖拽节点"
+              unCheckedChildren="拖拽节点 → 最近节点"
+              onChange={(checked) => {
+                setReverse(checked)
+                if (lfRef.current) {
+                  ;(
+                    lfRef.current.extension.proximityConnect as ProximityConnect
+                  ).setReverseDirection(checked)
+                }
+              }}
+            />
+          </Form.Item>
+        </Col>
+        <Col span={8}>
+          <Form.Item label="启用状态：">
+            <Switch
+              value={enable}
+              checkedChildren="启用"
+              unCheckedChildren="禁用"
+              onChange={(checked) => {
+                setEnable(checked)
+                if (lfRef.current) {
+                  ;(
+                    lfRef.current.extension.proximityConnect as ProximityConnect
+                  ).setEnable(checked)
+                }
+              }}
+            />
+          </Form.Item>
+        </Col>
+      </Row>
+      <Space.Compact style={{ width: '100%' }}></Space.Compact>
+      <Divider />
+      <div ref={containerRef} id="graph" className={styles.viewport}></div>
+    </Card>
+  )
+}

packages/core/src/LogicFlow.tsx

@@ -1369,6 +1369,11 @@ export class LogicFlow {
       this.components.push(extensionIns.render.bind(extensionIns))
     this.extension[pluginName] = extensionIns
   }
+
+  /** 销毁当前实例 */
+  destroy() {
+    this.graphModel.destroy()
+  }
 }
 
 // Option
@@ -1451,6 +1456,7 @@ export namespace LogicFlow {
   // label数据类型声明
   export type LabelConfig = {
     id?: string // label唯一标识
+    type?: string
     x: number
     y: number
     content?: string // 富文本内容

packages/core/src/event/eventArgs.ts

@@ -430,6 +430,16 @@ interface CommonEventArgs {
      */
     data: GraphData
   }
+  /**
+   * 画布容器大小发生变化触发，为了性能考虑对事件做了防抖处理，间隔为16ms
+   */
+  'graph:resize': {
+    /**
+     * 更新后的画布数据
+     */
+    target: HTMLElement
+    contentRect: DOMRectReadOnly
+  }
 }
 
 type AnchorEventArgsPick<T extends 'data' | 'e' | 'nodeModel' | 'edgeModel'> =

packages/core/src/model/GraphModel.ts

@@ -1,4 +1,4 @@
-import { find, forEach, map, merge, isBoolean, isEqual } from 'lodash-es'
+import { find, forEach, map, merge, isBoolean, debounce, isEqual } from 'lodash-es'
 import { action, computed, observable } from 'mobx'
 import {
   BaseEdgeModel,
@@ -128,6 +128,8 @@ export class GraphModel {
   // 用户自定义属性
   [propName: string]: any
 
+  private waitCleanEffects: (() => void)[] = []
+
   constructor(options: LFOptions.Common) {
     const {
       container,
@@ -154,6 +156,27 @@ export class GraphModel {
     this.width = options.width || this.rootEl.getBoundingClientRect().width
     this.height = options.height || this.rootEl.getBoundingClientRect().height
 
+    const resizeObserver = new ResizeObserver(
+      debounce(
+        ((entries) => {
+          for (const entry of entries) {
+            if (entry.target === this.rootEl) {
+              this.resize()
+              this.eventCenter.emit('graph:resize', {
+                target: this.rootEl,
+                contentRect: entry.contentRect,
+              })
+            }
+          }
+        }) as ResizeObserverCallback,
+        16,
+      ),
+    )
+    resizeObserver.observe(this.rootEl)
+    this.waitCleanEffects.push(() => {
+      resizeObserver.disconnect()
+    })
+
     this.eventCenter = new EventEmitter()
     this.editConfigModel = new EditConfigModel(options)
     this.transformModel = new TransformModel(this.eventCenter, options)
@@ -1646,6 +1669,18 @@ export class GraphModel {
   @action setPartial(partial: boolean): void {
     this.partial = partial
   }
+
+  /** 销毁当前实例 */
+  destroy() {
+    try {
+      this.waitCleanEffects.forEach((fn) => {
+        fn()
+      })
+    } catch (err) {
+      console.warn('error on destroy GraphModel', err)
+    }
+    this.waitCleanEffects.length = 0
+  }
 }
 
 export namespace GraphModel {

packages/core/src/view/node/BaseNode.tsx

@@ -377,7 +377,7 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
     // 不是双击的，默认都是单击
     if (isDoubleClick) {
       if (editConfigModel.nodeTextEdit) {
-        if (model.text.editable) {
+        if (model.text.editable && editConfigModel.textMode === TextMode.TEXT) {
           model.setSelected(false)
           graphModel.setElementStateById(model.id, ElementState.TEXT_EDIT)
         }

packages/extension/src/components/mini-map/index.ts

@@ -195,6 +195,14 @@ export class MiniMap {
     this.elementAreaBounds = boundsInit
     this.viewPortBounds = boundsInit
     this.initMiniMap()
+    lf.on('graph:resize', this.onGraphResize)
+  }
+
+  onGraphResize = () => {
+    this.updateViewPortBounds()
+    if (this.isShow) {
+      this.updateViewPort()
+    }
   }
 
   render = (_: LogicFlow, container: HTMLElement) => {
@@ -661,6 +669,9 @@ export class MiniMap {
       },
     })
   }
+  destroy() {
+    this.lf.off('graph:resize', this.onGraphResize)
+  }
 }
 
 export default MiniMap

packages/extension/src/index.ts

@@ -19,6 +19,7 @@ export * from './tools/label'
 export * from './tools/snapshot'
 export * from './tools/flow-path'
 export * from './tools/auto-layout'
+export * from './tools/proximity-connect'
 
 // Component -> 流程图中交互组件
 export * from './components/control'