@logicflow/core 2.0.6 → 2.0.8

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/util/drag.ts

@@ -201,4 +201,16 @@ export class StepDrag {
     this.onDragEnd({ event: undefined })
     this.isDragging = false
   }
+
+  destroy = () => {
+    if (this.isStartDragging) {
+      // https://github.com/didi/LogicFlow/issues/1934
+      // https://github.com/didi/LogicFlow/issues/1926
+      // cancelDrag()->onDragEnd()->updateEdgePointByAnchors()触发线的重新计算
+      // 我们的本意是为了防止mousemove和mouseup没有及时被移除
+      // 因此这里增加if(this.isStartDragging)的判断，isStartDragging=true代表没有触发handleMouseUp()，此时监听还没被移除
+      // 在拖拽情况下(isStartDragging=true)，此时注册了监听，在组件突然销毁时，强制触发cancelDrag进行监听事件的移除
+      this.cancelDrag()
+    }
+  }
 }

package/src/view/Anchor.tsx

@@ -189,14 +189,13 @@ class Anchor extends Component<IProps, IState> {
     this.sourceRuleResults.clear()
     this.targetRuleResults.clear()
     const { graphModel, nodeModel, anchorData } = this.props
-    if (edgeModel) {
-      graphModel.eventCenter.emit(EventType.ANCHOR_DRAGEND, {
-        data: anchorData,
-        e: event!,
-        nodeModel,
-        edgeModel,
-      })
-    }
+
+    graphModel.eventCenter.emit(EventType.ANCHOR_DRAGEND, {
+      data: anchorData,
+      e: event!,
+      nodeModel,
+      edgeModel: edgeModel ?? undefined,
+    })
   }
 
   get customTrajectory() {

package/src/view/Control.tsx

@@ -57,7 +57,7 @@ export class ResizeControl extends Component<
   }
 
   componentWillUnmount() {
-    this.dragHandler.cancelDrag()
+    this.dragHandler.destroy()
   }
 
   updateEdgePointByAnchors = () => {

package/src/view/Graph.tsx

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

package/src/view/behavior/dnd.ts

@@ -67,6 +67,7 @@ export class Dnd {
       this.lf.setNodeSnapLine(nodeData)
       this.lf.graphModel.eventCenter.emit(EventType.NODE_DND_DRAG, {
         data: nodeData,
+        e,
       })
     }
     return false

package/src/view/edge/BaseEdge.tsx

@@ -29,6 +29,7 @@ export abstract class BaseEdge<P extends IProps> extends Component<
 > {
   static isObserved: boolean = false
   static extendsKey?: string
+  mouseUpDrag?: boolean
 
   startTime?: number
   contextMenuTime?: number
@@ -385,13 +386,16 @@ export abstract class BaseEdge<P extends IProps> extends Component<
     e.stopPropagation()
     this.startTime = new Date().getTime()
   }
+  handleMouseUp = () => {
+    const { model } = this.props
+    this.mouseUpDrag = model.isDragging
+  }
   /**
    * 不支持重写
    */
-  handleMouseUp = (e: MouseEvent) => {
+  handleClick = (e: MouseEvent) => {
     if (!this.startTime) return
-    const time = new Date().getTime() - this.startTime
-    if (time > 200) return // 事件大于200ms，认为是拖拽。
+    if (this.mouseUpDrag) return // 如果是拖拽，不触发click事件。
     const isRightClick = e.button === 2
     if (isRightClick) return
     // 这里 IE 11不能正确显示
@@ -455,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
@@ -490,10 +508,13 @@ export abstract class BaseEdge<P extends IProps> extends Component<
             .join(' ')}
           onMouseDown={this.handleMouseDown}
           onMouseUp={this.handleMouseUp}
+          onClick={this.handleClick}
           onContextMenu={this.handleContextMenu}
           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/Grid.tsx

@@ -5,19 +5,24 @@ import { createUuid } from '../../util'
 import { GraphModel } from '../../model'
 import { DEFAULT_GRID_SIZE } from '../../constant'
 
-import GridOptions = Grid.GridOptions
-
-type IProps = GridOptions & {
+type IProps = {
   graphModel: GraphModel
 }
 
 @observer
 export class Grid extends Component<IProps> {
+  gridOptions: Grid.GridOptions
+
   readonly id = createUuid()
 
+  constructor(props: IProps) {
+    super(props)
+    this.gridOptions = this.props.graphModel.grid
+  }
+
   // 网格类型为点状
   renderDot() {
-    const { config, size = 1, visible } = this.props
+    const { config, size = 1, visible } = this.gridOptions
 
     const { color, thickness = 2 } = config ?? {}
 
@@ -37,7 +42,7 @@ export class Grid extends Component<IProps> {
   // 网格类型为交叉线
   // todo: 采用背景缩放的方式，实现更好的体验
   renderMesh() {
-    const { config, size = 1, visible } = this.props
+    const { config, size = 1, visible } = this.gridOptions
     const { color, thickness = 1 } = config ?? {}
 
     // 对于交叉线网格，线的宽度不能大于网格大小的一半
@@ -48,7 +53,7 @@ export class Grid extends Component<IProps> {
       <path
         d={d}
         stroke={color}
-        strokeWidth={strokeWidth}
+        strokeWidth={strokeWidth / 2}
         opacity={opacity}
         fill="transparent"
       />
@@ -57,10 +62,9 @@ export class Grid extends Component<IProps> {
 
   render() {
     const {
-      type,
-      size = 1,
       graphModel: { transformModel },
     } = this.props
+    const { type, size = 1 } = this.gridOptions
     const { SCALE_X, SKEW_Y, SKEW_X, SCALE_Y, TRANSLATE_X, TRANSLATE_Y } =
       transformModel
     const matrixString = [
@@ -124,7 +128,7 @@ export namespace Grid {
       /**
        * 网格的颜色
        */
-      color: string
+      color?: string
       /**
        * 网格的宽度
        * - 对于 `dot` 点状网格，表示点的大小

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) {

package/src/view/text/BaseText.tsx

@@ -91,7 +91,7 @@ export class BaseText<
       graphModel: { transformModel },
     } = this.props
 
-    if (deltaX && deltaY) {
+    if (deltaX || deltaY) {
       const [curDeltaX, curDeltaY] = transformModel.fixDeltaXY(deltaX, deltaY)
       model.moveText(curDeltaX, curDeltaY)
     }