@logicflow/core 2.0.0-beta.1 → 2.0.0-beta.10

package/src/view/Control.tsx

@@ -2,7 +2,7 @@ import { createElement as h, Component } from 'preact/compat'
 import { cloneDeep, find, forEach, map } from 'lodash-es'
 import { Rect } from './shape'
 import LogicFlow from '../LogicFlow'
-import { getNodeBBox, IDragParams, StepDrag } from '../util'
+import { getNodeBBox, IDragParams, StepDrag, handleResize } from '../util'
 import { BaseNodeModel, GraphModel } from '../model'
 
 import NodeData = LogicFlow.NodeData
@@ -103,11 +103,19 @@ export class ResizeControl extends Component<
 
   triggerResizeEvent = (
     preNodeData: ResizeNodeData,
-    nextNodeData: ResizeNodeData,
+    curNodeData: ResizeNodeData,
+    deltaX,
+    deltaY,
+    index,
+    nodeModel: BaseNodeModel,
   ) => {
     this.graphModel.eventCenter.emit(EventType.NODE_RESIZE, {
-      preNodeData,
-      nextNodeData,
+      preData: preNodeData,
+      data: curNodeData,
+      deltaX,
+      deltaY,
+      index,
+      model: nodeModel,
     })
   }
 
@@ -232,64 +240,75 @@ export class ResizeControl extends Component<
   }
 
   resizeNode = ({ deltaX, deltaY }: VectorData) => {
-    // TODO: 调用每个节点中更新缩放时的方法 updateNode 函数，用来各节点缩放的方法
-    // 1. 计算当前 Control 的一些信息，
-    const {
-      r, // circle
-      rx, // ellipse/diamond
-      ry,
-      width, // rect/html
-      height,
-      PCTResizeInfo,
-
-      minWidth,
-      minHeight,
-      maxWidth,
-      maxHeight,
-    } = this.nodeModel
-    const isFreezeWidth = minWidth === maxWidth
-    const isFreezeHeight = minHeight === maxHeight
-
-    const resizeInfo = {
-      width: r || rx || width,
-      height: r || ry || height,
+    const { index } = this
+    const { model, graphModel } = this.props
+
+    // DONE: 调用每个节点中更新缩放时的方法 updateNode 函数，用来各节点缩放的方法
+    handleResize({
       deltaX,
       deltaY,
-      PCTResizeInfo,
-    }
-
-    const pct = r || (rx && ry) ? 1 / 2 : 1
-    const nextSize = this.recalcResizeInfo(
-      this.index,
-      resizeInfo,
-      pct,
-      isFreezeWidth,
-      isFreezeHeight,
-    )
-
-    // 限制放大缩小的最大最小范围
-    if (
-      nextSize.width < minWidth ||
-      nextSize.width > maxWidth ||
-      nextSize.height < minHeight ||
-      nextSize.height > maxHeight
-    ) {
-      this.dragHandler.cancelDrag()
-      return
-    }
-    // 如果限制了宽高不变，对应的 x/y 不产生位移
-    nextSize.deltaX = isFreezeWidth ? 0 : nextSize.deltaX
-    nextSize.deltaY = isFreezeWidth ? 0 : nextSize.deltaY
-
-    const preNodeData = this.nodeModel.getData()
-    const nextNodeData = this.nodeModel.resize(nextSize)
-
-    console.log('nextNodeData ===>>>', nextNodeData)
-
-    // 更新边
-    this.updateEdgePointByAnchors()
-    // 触发 resize 事件
-    this.triggerResizeEvent(preNodeData, nextNodeData)
+      index,
+      nodeModel: model,
+      graphModel,
+      cancelCallback: () => {
+        this.dragHandler.cancelDrag()
+      },
+    })
+    // 1. 计算当前 Control 的一些信息，
+    // const {
+    //   r, // circle
+    //   rx, // ellipse/diamond
+    //   ry,
+    //   width, // rect/html
+    //   height,
+    //   PCTResizeInfo,
+    //
+    //   minWidth,
+    //   minHeight,
+    //   maxWidth,
+    //   maxHeight,
+    // } = this.nodeModel
+    // const isFreezeWidth = minWidth === maxWidth
+    // const isFreezeHeight = minHeight === maxHeight
+    //
+    // const resizeInfo = {
+    //   width: r || rx || width,
+    //   height: r || ry || height,
+    //   deltaX,
+    //   deltaY,
+    //   PCTResizeInfo,
+    // }
+    //
+    // const pct = r || (rx && ry) ? 1 / 2 : 1
+    // const nextSize = this.recalcResizeInfo(
+    //   this.index,
+    //   resizeInfo,
+    //   pct,
+    //   isFreezeWidth,
+    //   isFreezeHeight,
+    // )
+    //
+    // // 限制放大缩小的最大最小范围
+    // if (
+    //   nextSize.width < minWidth ||
+    //   nextSize.width > maxWidth ||
+    //   nextSize.height < minHeight ||
+    //   nextSize.height > maxHeight
+    // ) {
+    //   this.dragHandler.cancelDrag()
+    //   return
+    // }
+    // // 如果限制了宽高不变，对应的 x/y 不产生位移
+    // nextSize.deltaX = isFreezeWidth ? 0 : nextSize.deltaX
+    // nextSize.deltaY = isFreezeWidth ? 0 : nextSize.deltaY
+    //
+    // const preNodeData = this.nodeModel.getData()
+    // const curNodeData = this.nodeModel.resize(nextSize)
+    //
+    // // 更新边
+    // this.updateEdgePointByAnchors()
+    // // 触发 resize 事件
+    // this.triggerResizeEvent(preNodeData, curNodeData, deltaX, deltaY, this.index, this.nodeModel)
   }
 
   onDragging = ({ deltaX, deltaY }: IDragParams) => {
@@ -304,6 +323,7 @@ export class ResizeControl extends Component<
 
   // 由于将拖拽放大缩小改成丝滑模式，这个时候需要再拖拽结束的时候，将节点的位置更新到 grid 上。
   onDragEnd = () => {
+    // TODO: 确认下面该代码是否还需要（应该是默认让节点拖拽以 gridSize 为步长移动）
     // const { gridSize = 1 } = this.graphModel
     // const x = gridSize * Math.round(this.nodeModel.x / gridSize)
     // const y = gridSize * Math.round(this.nodeModel.y / gridSize)
@@ -319,14 +339,25 @@ export class ResizeControl extends Component<
 
   render(): h.JSX.Element {
     const { x, y, direction, model } = this.props
-    const style = model.getResizeControlStyle()
+    const { width, height, ...restStyle } = model.getResizeControlStyle()
     return (
       <g className={`lf-resize-control lf-resize-control-${direction}`}>
         <Rect
           className="lf-resize-control-content"
           x={x}
           y={y}
-          {...style}
+          width={width ?? 7}
+          height={height ?? 7}
+          {...restStyle}
+        />
+        <Rect
+          className="lf-resize-control-content"
+          x={x}
+          y={y}
+          width={25}
+          height={25}
+          fill="transparent"
+          stroke="transparent"
           onMouseDown={this.dragHandler.handleMouseDown}
         />
       </g>

package/src/view/Graph.tsx

@@ -1,5 +1,5 @@
 import { Component, ComponentType } from 'preact/compat'
-import { map } from 'lodash-es'
+import { map, throttle } from 'lodash-es'
 import {
   CanvasOverlay,
   ToolOverlay,
@@ -12,14 +12,15 @@ import {
 } from './overlay'
 import DnD from './behavior/dnd'
 import { observer } from '..'
+import Tool from '../tool'
 import { Options as LFOptions } from '../options'
-import Tool from '../tool/tool'
 import {
   GraphModel,
   BaseEdgeModel,
   BaseNodeModel,
   SnaplineModel,
 } from '../model'
+import { EventType } from '../constant'
 
 type IGraphProps = {
   getView: (type: string) => ComponentType<any> | undefined
@@ -37,6 +38,23 @@ type ContainerStyle = {
 
 @observer
 class Graph extends Component<IGraphProps> {
+  handleResize = () => {
+    this.props.graphModel.resize()
+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', throttle(this.handleResize, 200))
+  }
+
+  componentDidUpdate() {
+    const data = this.props.graphModel.modelToGraphData()
+    this.props.graphModel.eventCenter.emit(EventType.GRAPH_UPDATED, { data })
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', throttle(this.handleResize, 200))
+  }
+
   getComponent(
     model: BaseEdgeModel | BaseNodeModel,
     graphModel: GraphModel,
@@ -71,9 +89,8 @@ class Graph extends Component<IGraphProps> {
     const grid = options.grid && Grid.getGridOptions(options.grid)
     const { fakeNode, editConfigModel } = graphModel
     const { adjustEdge } = editConfigModel
-
     return (
-      <div className="lf-graph" flow-id={graphModel.flowId} style={style}>
+      <div className="lf-graph" flow-id={graphModel.flowId}>
         <CanvasOverlay graphModel={graphModel} dnd={dnd}>
           <g className="lf-base">
             {map(graphModel.sortElements, (nodeModel) =>

package/src/view/Rotate.tsx

@@ -83,7 +83,8 @@ class RotateControlPoint extends Component<IRotateControlProps> {
 
     eventCenter.emit(EventType.NODE_ROTATE, {
       e: event,
-      nodeModel,
+      model: nodeModel,
+      data: nodeModel.getData(),
     })
   }
 

package/src/view/behavior/index.ts

@@ -0,0 +1,2 @@
+export * from './dnd'
+export * from './snapline'

package/src/{tool → view/behavior}/snapline.ts

@@ -1,13 +1,12 @@
-import EventEmitter from '../event/eventEmitter'
-import SnaplineModel from '../model/SnaplineModel'
+import EventEmitter from '../../event/eventEmitter'
+import SnaplineModel from '../../model/SnaplineModel'
 
 export function snapline(
   eventCenter: EventEmitter,
   snaplineModel: SnaplineModel,
 ): void {
   // 节点拖动时启动对齐线计算
-  eventCenter.on('node:mousemove', ({ data }: any) => {
-    // TODO: 取消注释，定义 data 类型，解决编译问题
+  eventCenter.on('node:mousemove', ({ data }) => {
     snaplineModel.setNodeSnapLine(data)
   })
   // 节点拖动结束时，对齐线消失

package/src/view/edge/AdjustPoint.tsx

@@ -4,7 +4,7 @@ import { GraphModel, BaseNodeModel, BaseEdgeModel, Model } from '../../model'
 import {
   IDragParams,
   StepDrag,
-  formateAnchorConnectValidateData,
+  formatAnchorConnectValidateData,
   targetNodeInfo,
   NodeContaint,
 } from '../../util'
@@ -125,54 +125,40 @@ export class AdjustPoint extends Component<IProps, IState> {
     )
     // 如果一定的坐标能够找到目标节点，预结算当前节点与目标节点的路径进行展示
     if (info && info.node && this.isAllowAdjust(info).pass) {
-      let params: {
-        startPoint: Point
-        endPoint: Point
-        sourceNode: BaseNodeModel
-        targetNode: BaseNodeModel
-      }
       const { startPoint, endPoint, sourceNode, targetNode } = edgeModel
-      if (type === AdjustType.SOURCE) {
-        params = {
-          startPoint: {
-            x: info.anchor.x,
-            y: info.anchor.y,
-          },
-          endPoint: {
-            x: endPoint.x,
-            y: endPoint.y,
-          },
-          sourceNode: info.node,
-          targetNode,
-        }
-      } else if (type === AdjustType.TARGET) {
-        params = {
-          startPoint: {
-            x: startPoint.x,
-            y: startPoint.y,
-          },
-          endPoint: {
-            x: info.anchor.x,
-            y: info.anchor.y,
-          },
-          sourceNode,
-          targetNode: info.node,
-        }
-      }
-      edgeModel.updateAfterAdjustStartAndEnd(params!)
-    } else if (type === AdjustType.SOURCE) {
-      // 如果没有找到目标节点，更显起终点为当前坐标
-      edgeModel.updateStartPoint({
-        x,
-        y,
-      })
-    } else if (type === AdjustType.TARGET) {
-      edgeModel.updateEndPoint({
-        x,
-        y,
-      })
+      const params =
+        type === AdjustType.SOURCE
+          ? {
+              startPoint: {
+                x: info.anchor.x,
+                y: info.anchor.y,
+              },
+              endPoint: {
+                x: endPoint.x,
+                y: endPoint.y,
+              },
+              sourceNode: info.node,
+              targetNode,
+            }
+          : {
+              startPoint: {
+                x: startPoint.x,
+                y: startPoint.y,
+              },
+              endPoint: {
+                x: info.anchor.x,
+                y: info.anchor.y,
+              },
+              sourceNode,
+              targetNode: info.node,
+            }
+      edgeModel.updateAfterAdjustStartAndEnd(params)
+    } else {
+      // 如果没有找到目标节点，更新起终点为当前坐标
+      type === AdjustType.SOURCE
+        ? edgeModel.updateStartPoint({ x, y })
+        : edgeModel.updateEndPoint({ x, y })
     }
-
     if (edgeModel.text.value && editConfigModel.adjustEdge) {
       edgeModel.setText(
         Object.assign({}, edgeModel.text, edgeModel.textPosition),
@@ -394,11 +380,11 @@ export class AdjustPoint extends Component<IProps, IState> {
       )
       this.sourceRuleResults.set(
         targetInfoId,
-        formateAnchorConnectValidateData(sourceRuleResult),
+        formatAnchorConnectValidateData(sourceRuleResult),
       )
       this.targetRuleResults.set(
         targetInfoId,
-        formateAnchorConnectValidateData(targetRuleResult),
+        formatAnchorConnectValidateData(targetRuleResult),
       )
     }
     const { isAllPass: isSourcePass, msg: sourceMsg } =

package/src/view/edge/BaseEdge.tsx

@@ -3,7 +3,7 @@ import { Circle } from '../shape'
 import { LineText } from '../text'
 import LogicFlow from '../../LogicFlow'
 import { GraphModel, BaseEdgeModel, PolylineEdgeModel } from '../../model'
-import { ElementState, EventType, ModelType } from '../../constant'
+import { ElementState, EventType, ModelType, TextMode } from '../../constant'
 import {
   isMultipleSelect,
   getClosestPointOfPolyline,
@@ -56,24 +56,31 @@ export abstract class BaseEdge<P extends IProps> extends Component<
    */
   getText(): h.JSX.Element | null {
     const { model, graphModel } = this.props
-    // 文本被编辑的时候，显示编辑框，不显示文本。
-    if (model.state === ElementState.TEXT_EDIT) {
-      return null
-    }
-    let draggable = false
     const { editConfigModel } = graphModel
-    if (model.text.draggable || editConfigModel.edgeTextDraggable) {
-      draggable = true
+
+    // 当 边文本模式非 TEXT 时，不显示文本
+    if (editConfigModel.edgeTextMode !== TextMode.TEXT) return null
+    // 文本被编辑的时候，显示编辑框，不显示文本。
+    if (model.state === ElementState.TEXT_EDIT) return null
+
+    if (model.text) {
+      let draggable = false
+      if (editConfigModel.edgeTextDraggable && model.text.draggable) {
+        draggable = true
+      }
+      return (
+        <LineText
+          ref={this.textRef}
+          editable={
+            editConfigModel.edgeTextEdit && (model.text.editable ?? true)
+          }
+          model={model}
+          graphModel={graphModel}
+          draggable={draggable}
+        />
+      )
     }
-    return (
-      <LineText
-        ref={this.textRef}
-        editable={editConfigModel.edgeTextEdit && model.text.editable}
-        model={model}
-        graphModel={graphModel}
-        draggable={draggable}
-      />
-    )
+    return null
   }
 
   /**
@@ -240,24 +247,36 @@ export abstract class BaseEdge<P extends IProps> extends Component<
    */
   private getAdjustPoints() {
     const { model, graphModel } = this.props
+    const {
+      editConfigModel: {
+        adjustEdgeStartAndEnd,
+        adjustEdgeStart,
+        adjustEdgeEnd,
+      },
+    } = graphModel
     const start = model.getAdjustStart()
     const end = model.getAdjustEnd()
+
     return (
       <g>
-        <AdjustPoint
-          type={AdjustType.SOURCE}
-          {...start}
-          getAdjustPointShape={this.getAdjustPointShape}
-          edgeModel={model}
-          graphModel={graphModel}
-        />
-        <AdjustPoint
-          type={AdjustType.TARGET}
-          {...end}
-          getAdjustPointShape={this.getAdjustPointShape}
-          edgeModel={model}
-          graphModel={graphModel}
-        />
+        {adjustEdgeStartAndEnd && adjustEdgeStart && (
+          <AdjustPoint
+            type={AdjustType.SOURCE}
+            {...start}
+            getAdjustPointShape={this.getAdjustPointShape}
+            edgeModel={model}
+            graphModel={graphModel}
+          />
+        )}
+        {adjustEdgeStartAndEnd && adjustEdgeEnd && (
+          <AdjustPoint
+            type={AdjustType.TARGET}
+            {...end}
+            getAdjustPointShape={this.getAdjustPointShape}
+            edgeModel={model}
+            graphModel={graphModel}
+          />
+        )}
       </g>
     )
   }
@@ -307,24 +326,24 @@ export abstract class BaseEdge<P extends IProps> extends Component<
   /**
    * 不支持重写，如果想要基于hover状态设置不同的样式，请在model中使用isHovered属性。
    */
-  setHoverON = (ev: MouseEvent) => {
+  setHoverOn = (ev: MouseEvent) => {
     // ! hover多次触发, onMouseOver + onMouseEnter
     const {
       model: { isHovered },
     } = this.props
     if (isHovered) return
-    this.textRef && this.textRef.current && this.textRef.current.setHoverON()
+    this.textRef && this.textRef.current && this.textRef.current.setHoverOn()
     this.handleHover(true, ev)
   }
   /**
    * 不支持重写，如果想要基于hover状态设置不同的样式，请在model中使用isHovered属性。
    */
-  setHoverOFF = (ev: MouseEvent) => {
+  setHoverOff = (ev: MouseEvent) => {
     const {
       model: { isHovered },
     } = this.props
     if (!isHovered) return
-    this.textRef && this.textRef.current && this.textRef.current.setHoverOFF()
+    this.textRef && this.textRef.current && this.textRef.current.setHoverOff()
     this.handleHover(false, ev)
   }
   /**
@@ -385,15 +404,17 @@ export abstract class BaseEdge<P extends IProps> extends Component<
     })
     if (isDoubleClick) {
       const { editConfigModel, textEditElement } = graphModel
+      const { id, text, modelType } = model
       // 当前边正在编辑，需要先重置状态才能变更文本框位置
-      if (textEditElement && textEditElement.id === model.id) {
-        graphModel.setElementStateById(model.id, ElementState.DEFAULT)
+      if (textEditElement && textEditElement.id === id) {
+        graphModel.setElementStateById(id, ElementState.DEFAULT)
       }
       // 边文案可编辑状态，才可以进行文案编辑
-      if (editConfigModel.edgeTextEdit && model.text.editable) {
-        graphModel.setElementStateById(model.id, ElementState.TEXT_EDIT)
+      if (editConfigModel.edgeTextEdit && text.editable) {
+        model.setSelected(false)
+        graphModel.setElementStateById(id, ElementState.TEXT_EDIT)
       }
-      if (model.modelType === ModelType.POLYLINE_EDGE) {
+      if (modelType === ModelType.POLYLINE_EDGE) {
         const polylineEdgeModel = model as PolylineEdgeModel
         const {
           canvasOverlayPosition: { x, y },
@@ -401,14 +422,13 @@ export abstract class BaseEdge<P extends IProps> extends Component<
           x: e.x,
           y: e.y,
         })
-        const crossPoint = getClosestPointOfPolyline(
+        polylineEdgeModel.dbClickPosition = getClosestPointOfPolyline(
           {
             x,
             y,
           },
           polylineEdgeModel.points,
         )
-        polylineEdgeModel.dbClickPosition = crossPoint
       }
       graphModel.eventCenter.emit(EventType.EDGE_DBCLICK, {
         data: edgeData,
@@ -471,9 +491,9 @@ export abstract class BaseEdge<P extends IProps> extends Component<
           onMouseDown={this.handleMouseDown}
           onMouseUp={this.handleMouseUp}
           onContextMenu={this.handleContextMenu}
-          onMouseOver={this.setHoverON}
-          onMouseEnter={this.setHoverON}
-          onMouseLeave={this.setHoverOFF}
+          onMouseOver={this.setHoverOn}
+          onMouseEnter={this.setHoverOn}
+          onMouseLeave={this.setHoverOff}
         >
           {this.getShape()}
           {this.getAppend()}