@logicflow/core 2.0.7 → 2.0.9

package/src/model/GraphModel.ts

@@ -1,4 +1,4 @@
-import { find, forEach, map, merge } from 'lodash-es'
+import { find, forEach, map, merge, isBoolean, debounce, isEqual } from 'lodash-es'
 import { action, computed, observable } from 'mobx'
 import {
   BaseEdgeModel,
@@ -41,6 +41,7 @@ import Position = LogicFlow.Position
 import PointTuple = LogicFlow.PointTuple
 import GraphData = LogicFlow.GraphData
 import NodeConfig = LogicFlow.NodeConfig
+import AnchorConfig = Model.AnchorConfig
 import BaseNodeModelCtor = LogicFlow.BaseNodeModelCtor
 import BaseEdgeModelCtor = LogicFlow.BaseEdgeModelCtor
 
@@ -127,6 +128,8 @@ export class GraphModel {
   // 用户自定义属性
   [propName: string]: any
 
+  private waitCleanEffects: (() => void)[] = []
+
   constructor(options: LFOptions.Common) {
     const {
       container,
@@ -153,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)
@@ -439,6 +463,58 @@ export class GraphModel {
           throw new Error(`找不到${edge.type}对应的边。`)
         }
         const edgeModel = new Model(edge, this)
+        // 根据edgeModel中存储的数据找到当前画布上的起终锚点坐标
+        // 判断当前起终锚点数据和Model中存储的起终点数据是否一致，不一致更新起终点信息
+        const {
+          sourceNodeId,
+          targetNodeId,
+          sourceAnchorId = '',
+          targetAnchorId = '',
+          startPoint,
+          endPoint,
+          text,
+          textPosition,
+        } = edgeModel
+        const updateAnchorPoint = (
+          node: BaseNodeModel | undefined,
+          anchorId: string,
+          point: Position,
+          updatePoint: (anchor: AnchorConfig) => void,
+        ) => {
+          const anchor = node?.anchors.find((anchor) => anchor.id === anchorId)
+          if (anchor && !isEqual(anchor, point)) {
+            updatePoint(anchor)
+          }
+        }
+
+        const sourceNode = this.getNodeModelById(sourceNodeId)
+        const targetNode = this.getNodeModelById(targetNodeId)
+
+        updateAnchorPoint(
+          sourceNode,
+          sourceAnchorId,
+          startPoint,
+          edgeModel.updateStartPoint.bind(edgeModel),
+        )
+        updateAnchorPoint(
+          targetNode,
+          targetAnchorId,
+          endPoint,
+          edgeModel.updateEndPoint.bind(edgeModel),
+        )
+
+        // 而文本需要先算一下文本与默认文本位置之间的相对位置差
+        // 再计算新路径的文本默认位置，加上相对位置差，得到调整后边的文本的位置
+        if (text) {
+          const { x, y } = text
+          const { x: defaultX, y: defaultY } = textPosition
+          if (x && y && defaultX && defaultY) {
+            const deltaX = x - defaultX
+            const deltaY = y - defaultY
+            edgeModel.resetTextPosition()
+            edgeModel.moveText(deltaX, deltaY)
+          }
+        }
         this.edgeModelMap.set(edgeModel.id, edgeModel)
         this.elementsModelMap.set(edgeModel.id, edgeModel)
 
@@ -749,11 +825,15 @@ export class GraphModel {
    */
   @action
   deleteNode(nodeId: string) {
-    const nodeData = this.nodesMap[nodeId].model.getData()
+    const nodeModel = this.nodesMap[nodeId].model
+    const nodeData = nodeModel.getData()
     this.deleteEdgeBySource(nodeId)
     this.deleteEdgeByTarget(nodeId)
     this.nodes.splice(this.nodesMap[nodeId].index, 1)
-    this.eventCenter.emit(EventType.NODE_DELETE, { data: nodeData })
+    this.eventCenter.emit(EventType.NODE_DELETE, {
+      data: nodeData,
+      model: nodeModel,
+    })
   }
 
   /**
@@ -1418,6 +1498,22 @@ export class GraphModel {
     merge(this.grid, options)
   }
 
+  /**
+   * 更新网格配置
+   */
+  updateBackgroundOptions(
+    options: boolean | Partial<LFOptions.BackgroundConfig>,
+  ) {
+    if (isBoolean(options) || isBoolean(this.background)) {
+      this.background = options
+    } else {
+      this.background = {
+        ...this.background,
+        ...options,
+      }
+    }
+  }
+
   /**
    * 重新设置画布的宽高
    */
@@ -1573,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 {

package/src/model/edge/LineEdgeModel.ts

@@ -17,6 +17,14 @@ export class LineEdgeModel extends BaseEdgeModel {
       ...cloneDeep(customStyle),
     }
   }
+  initEdgeData(data: LogicFlow.EdgeConfig): void {
+    super.initEdgeData(data)
+    this.points = this.getPath([this.startPoint, this.endPoint])
+  }
+  getPath(points: Point[]): string {
+    const [start, end] = points
+    return `${start.x},${start.y} ${end.x},${end.y}`
+  }
   getTextPosition(): Point {
     return {
       x: (this.startPoint.x + this.endPoint.x) / 2,

package/src/model/edge/PolylineEdgeModel.ts

@@ -326,12 +326,14 @@ export class PolylineEdgeModel extends BaseEdgeModel {
     })
   }
 
+  getPath(points: Point[]): string {
+    return points.map((point) => `${point.x},${point.y}`).join(' ')
+  }
+
   @action
   initPoints() {
     if (this.pointsList.length > 0) {
-      this.points = this.pointsList
-        .map((point) => `${point.x},${point.y}`)
-        .join(' ')
+      this.points = this.getPath(this.pointsList)
     } else {
       this.updatePoints()
     }

package/src/style/index.less

@@ -19,6 +19,11 @@
   cursor: move;
 }
 
+// 在元素focus时浏览器会给元素outline设置一个5像素宽的默认样式，这里先全局禁用一下，后续再根据需要再做调整
+*:focus {
+  outline: none;
+}
+
 .lf-node-anchor {
   cursor: crosshair;
 }

package/src/style/raw.ts

@@ -21,6 +21,9 @@ export const content = `.lf-graph {
 .lf-text-draggable {
   cursor: move;
 }
+*:focus {
+  outline: none;
+}
 .lf-node-anchor {
   cursor: crosshair;
 }

package/src/view/Graph.tsx

@@ -87,7 +87,7 @@ class Graph extends Component<IGraphProps> {
     if (options.height) {
       style.height = `${graphModel.height}px`
     }
-    const { fakeNode, editConfigModel } = graphModel
+    const { fakeNode, editConfigModel, background } = graphModel
     const { adjustEdge } = editConfigModel
     return (
       <div className="lf-graph" flow-id={graphModel.flowId} style={style}>
@@ -112,9 +112,8 @@ class Graph extends Component<IGraphProps> {
         </ModificationOverlay>
         {/* 工具层：插件 */}
         <ToolOverlay graphModel={graphModel} tool={tool} />
-        {options.background && (
-          <BackgroundOverlay background={options.background} />
-        )}
+        {/* 画布背景 */}
+        {background && <BackgroundOverlay background={background} />}
         {/* 画布网格 */}
         <Grid graphModel={graphModel} />
       </div>

package/src/view/edge/BaseEdge.tsx

@@ -459,6 +459,20 @@ export abstract class BaseEdge<P extends IProps> extends Component<
     this.toFront()
   }
 
+  handleFocus = () => {
+    const { model, graphModel } = this.props
+    graphModel.eventCenter.emit(EventType.EDGE_FOCUS, {
+      data: model.getData(),
+    })
+  }
+
+  handleBlur = () => {
+    const { model, graphModel } = this.props
+    graphModel.eventCenter.emit(EventType.EDGE_BLUR, {
+      data: model.getData(),
+    })
+  }
+
   /**
    * @overridable 支持重写, 此方法为获取边的形状，如果需要自定义边的形状，请重写此方法。
    * @example https://docs.logic-flow.cn/docs/#/zh/guide/basic/edge?id=%e5%9f%ba%e4%ba%8e-react-%e7%bb%84%e4%bb%b6%e8%87%aa%e5%ae%9a%e4%b9%89%e8%be%b9
@@ -499,6 +513,8 @@ export abstract class BaseEdge<P extends IProps> extends Component<
           onMouseOver={this.setHoverOn}
           onMouseEnter={this.setHoverOn}
           onMouseLeave={this.setHoverOff}
+          onFocus={this.handleFocus}
+          onBlur={this.handleBlur}
         >
           {this.getShape()}
           {this.getAppend()}

package/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)
         }
@@ -424,6 +424,20 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
     }
   }
 
+  handleFocus = () => {
+    const { model, graphModel } = this.props
+    graphModel.eventCenter.emit(EventType.NODE_FOCUS, {
+      data: model.getData(),
+    })
+  }
+
+  handleBlur = () => {
+    const { model, graphModel } = this.props
+    graphModel.eventCenter.emit(EventType.NODE_BLUR, {
+      data: model.getData(),
+    })
+  }
+
   // 因为自定义节点的时候，可能会基于hover状态自定义不同的样式。
   setHoverOn = (ev: MouseEvent) => {
     const { model, graphModel } = this.props
@@ -508,6 +522,8 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
           onMouseLeave={this.setHoverOff}
           onMouseOut={this.onMouseOut}
           onContextMenu={this.handleContextMenu}
+          onFocus={this.handleFocus}
+          onBlur={this.handleBlur}
           {...restAttributes}
         >
           {nodeShapeInner}

package/src/view/overlay/BackgroundOverlay.tsx

@@ -1,36 +1,31 @@
 import { Component } from 'preact/compat'
+import { isObject } from 'lodash-es'
+import { Options as LFOptions } from '../../options'
+import { observer } from '../..'
 
 /**
  * 背景配置, 支持css属性配置
  * https://developer.mozilla.org/zh-CN/docs/Web/CSS/background
  * @example
  * {
- *  backgroundImage: "url('./img/grid.svg')",
- backgroundRepeat: 'repeat',
+ *    backgroundImage: "url('./img/grid.svg')",
+      backgroundRepeat: 'repeat',
  * }
  */
-export type BackgroundConfig = {
-  /**
-   * 背景图片地址
-   */
-  backgroundImage?: string
-  /**
-   * 是否重复
-   */
-  backgroundRepeat?: string
-  [key: string]: any
-}
-
 type IProps = {
-  background: BackgroundConfig
+  background: boolean | LFOptions.BackgroundConfig
 }
 
+@observer
 export class BackgroundOverlay extends Component<IProps> {
   render() {
     const { background } = this.props
     return (
       <div className="lf-background">
-        <div style={background} className="lf-background-area" />
+        <div
+          style={isObject(background) ? background : {}}
+          className="lf-background-area"
+        />
       </div>
     )
   }

package/src/view/overlay/OutlineOverlay.tsx

@@ -82,7 +82,7 @@ export class OutlineOverlay extends Component<IProps> {
         (hoverOutline && edge.isHovered)
       ) {
         if (edge.modelType === ModelType.LINE_EDGE) {
-          edgeOutline.push(this.getLineOutline(edge))
+          edgeOutline.push(this.getLineOutline(edge as LineEdgeModel))
         } else if (edge.modelType === ModelType.POLYLINE_EDGE) {
           edgeOutline.push(this.getPolylineOutline(edge as PolylineEdgeModel))
         } else if (edge.modelType === ModelType.BEZIER_EDGE) {