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

package/src/tool/MultipleSelectTool.tsx

@@ -1,16 +1,16 @@
 import { Component } from 'preact/compat'
+import { IToolProps } from '.'
 import { Model, observer } from '..'
 import LogicFlow from '../LogicFlow'
 import { StepDrag, IDragParams } from '../util'
 import { ElementType, EventType } from '../constant'
 import { getNodeOutline, getEdgeOutline } from '../algorithm/outline'
-import { IToolProps } from './tool'
 
 import GraphData = LogicFlow.GraphData
 
 @observer
 export default class MultipleSelect extends Component<IToolProps> {
-  static toolName = 'multipleSelect'
+  static toolName = 'multiple-select-tool'
   stepDrag: StepDrag
 
   constructor(props: IToolProps) {
@@ -40,13 +40,13 @@ export default class MultipleSelect extends Component<IToolProps> {
       clientY,
       ctrlKey,
     })
-    this.props.logicFlow.container
+    this.props.lf.container
       ?.querySelector('.lf-canvas-overlay[name="canvas-overlay"]')
       ?.dispatchEvent(newEvent)
   }
   onDragging = ({ deltaX, deltaY }: IDragParams) => {
-    const { graphModel, logicFlow } = this.props
-    const { SCALE_X, SCALE_Y } = logicFlow.getTransform()
+    const { graphModel, lf } = this.props
+    const { SCALE_X, SCALE_Y } = lf.getTransform()
     const selectElements = graphModel.getSelectElements(true)
     graphModel.moveNodes(
       selectElements.nodes.map((node) => node.id),
@@ -88,7 +88,7 @@ export default class MultipleSelect extends Component<IToolProps> {
     const {
       graphModel: { selectElements, transformModel },
     } = this.props
-    const { SCALE_X, SCALE_Y } = this.props.logicFlow.getTransform()
+    const { SCALE_X, SCALE_Y } = this.props.lf.getTransform()
     if (selectElements.size <= 1) return
     let x = Number.MAX_SAFE_INTEGER
     let y = Number.MAX_SAFE_INTEGER

package/src/tool/TextEditTool.tsx

@@ -1,7 +1,7 @@
-import { createRef, Component } from 'preact'
+import { createRef, Component } from 'preact/compat'
+import { IToolProps } from '.'
 import { ElementState, observer } from '..'
 import { ElementType, EventType, ModelType } from '../constant'
-import { IToolProps } from './tool'
 
 type IState = {
   style: {
@@ -12,7 +12,7 @@ type IState = {
 
 @observer
 export class TextEditTool extends Component<IToolProps, IState> {
-  static toolName = 'textEdit'
+  static toolName = 'text-edit-tool'
   ref = createRef()
   __prevText = {
     type: '',

package/src/tool/index.ts

@@ -1,2 +1,96 @@
-export * from './tool'
-export * from './snapline'
+import { Component, ReactElement } from 'preact/compat'
+import { action, observable } from 'mobx'
+import { forEach } from 'lodash-es'
+import TextEdit from './TextEditTool'
+import MultipleSelect from './MultipleSelectTool'
+import LogicFlow from '../LogicFlow'
+import { ElementState, EventType } from '../constant'
+import { GraphModel, BaseEdgeModel, BaseNodeModel } from '../model'
+
+export type IToolProps = {
+  lf: LogicFlow
+  graphModel: GraphModel
+  textEditElement?: BaseNodeModel | BaseEdgeModel
+}
+
+type ToolConstructor = new (props: IToolProps) => Component<IToolProps>
+
+// 默认内置的工具
+const defaultTools = [TextEdit, MultipleSelect]
+
+export class Tool {
+  tools?: Component[]
+  components?: ReactElement<IToolProps>[]
+  @observable toolMap = new Map<string, ToolConstructor>()
+
+  disabledToolMap = new Map<string, ToolConstructor>()
+  instance: LogicFlow
+
+  constructor(instance: LogicFlow) {
+    this.instance = instance
+    forEach(defaultTools, (tool) => {
+      if (!this.isDisabled(tool.toolName)) {
+        this.registerTool(tool.toolName, tool)
+      }
+    })
+
+    // @see https://github.com/didi/LogicFlow/issues/152
+    const { graphModel } = instance
+    const { eventCenter } = graphModel
+    eventCenter.on(
+      `${EventType.GRAPH_TRANSFORM},${EventType.NODE_CLICK},${EventType.BLANK_CLICK} `,
+      () => {
+        const {
+          textEditElement,
+          editConfigModel: { edgeTextEdit, nodeTextEdit },
+        } = graphModel
+        // fix #826, 保留之前的文本可以编辑点击空白才设置为不可编辑。如果以后有其他需求再改。
+        if ((edgeTextEdit || nodeTextEdit) && textEditElement) {
+          graphModel.textEditElement?.setElementState(ElementState.DEFAULT)
+        }
+      },
+    )
+  }
+
+  private isDisabled(toolName) {
+    return this.instance.options.disabledTools?.indexOf(toolName) !== -1
+  }
+
+  // 注册工具
+  registerTool(name: string, component: ToolConstructor) {
+    this.toolMap.set(name, component)
+  }
+
+  // 禁用工具
+  @action
+  disableTool(name: string): boolean | Error {
+    const tool = this.toolMap.get(name)
+    if (tool) {
+      this.disabledToolMap.set(name, tool)
+      this.toolMap.delete(name)
+      return true
+    }
+    throw new Error('禁用失败，不存在名为 ${tool} 的工具')
+  }
+
+  @action
+  enableTool(name: string): boolean | Error {
+    const tool = this.disabledToolMap.get(name)
+    if (tool) {
+      this.toolMap.set(name, tool)
+      this.disabledToolMap.delete(name)
+      return true
+    }
+    throw new Error('不存在名为 ${tool} 的工具')
+  }
+
+  getTools() {
+    return Array.from(this.toolMap.values())
+  }
+
+  getInstance() {
+    return this.instance
+  }
+}
+
+export default Tool

package/src/util/drag.ts

@@ -10,7 +10,7 @@ const LEFT_MOUSE_BUTTON_CODE = 0
 export type IDragParams = {
   deltaX: number
   deltaY: number
-  event: MouseEvent | null
+  event?: MouseEvent
   [key: string]: unknown
 }
 
@@ -23,9 +23,16 @@ export type ICreateDragParams = {
 }
 
 export type IStepperDragProps = {
-  eventType?: 'NODE' | 'BLANK' | 'SELECTION' | 'ADJUST_POINT' | ''
+  eventType?:
+    | 'NODE'
+    | 'BLANK'
+    | 'SELECTION'
+    | 'ADJUST_POINT'
+    | 'TEXT'
+    | 'LABEL'
+    | ''
   eventCenter?: EventEmitter
-  model?: Model.BaseModel | null
+  model?: Model.BaseModel | unknown
   data?: Record<string, unknown>
   [key: string]: unknown
 } & Partial<ICreateDragParams>
@@ -39,9 +46,16 @@ export class StepDrag {
 
   step: number
   isStopPropagation: boolean
-  eventType: 'NODE' | 'BLANK' | 'SELECTION' | 'ADJUST_POINT' | ''
+  eventType:
+    | 'NODE'
+    | 'BLANK'
+    | 'SELECTION'
+    | 'ADJUST_POINT'
+    | 'TEXT'
+    | 'LABEL'
+    | ''
   eventCenter?: EventEmitter
-  model?: Model.BaseModel | null
+  model?: Model.BaseModel | any // TODO: 如何兼容 LabelModel 类型。 LabelModel 能否是 BaseModel 的实现呢？
   data?: Record<string, unknown>
 
   // 运行时
@@ -141,6 +155,8 @@ export class StepDrag {
           event: e,
         })
         this.eventCenter?.emit(EventType[`${this.eventType}_MOUSEMOVE`], {
+          deltaX,
+          deltaY,
           e,
           data: this.data || elementData,
         })
@@ -180,7 +196,7 @@ export class StepDrag {
 
     DOC.removeEventListener('mousemove', this.handleMouseMove, false)
     DOC.removeEventListener('mouseup', this.handleMouseUp, false)
-    this.onDragEnd({ event: null })
+    this.onDragEnd({ event: undefined })
     this.isDragging = false
   }
 }

package/src/util/edge.ts

@@ -1,10 +1,13 @@
-import { pick } from 'lodash-es'
+import { pick, forEach } from 'lodash-es'
 import { getNodeBBox, isInNode, distance, sampleCubic } from '.'
 import LogicFlow from '../LogicFlow'
 import { Options } from '../options'
 import { SegmentDirection } from '../constant'
-import { getVerticalPointOfLine } from '../algorithm'
-import { getCrossPointOfLine, isInSegment } from '../algorithm/edge'
+import {
+  getVerticalPointOfLine,
+  getCrossPointOfLine,
+  isInSegment,
+} from '../algorithm'
 import {
   Model,
   BaseNodeModel,
@@ -397,7 +400,7 @@ export const getNextNeighborPoints = (
   return filterRepeatPoints(neighbors)
 }
 
-/* 路径查找,Astart查找+曼哈顿距离
+/* 路径查找,AStar查找+曼哈顿距离
  * 算法wiki:https://zh.wikipedia.org/wiki/A*%E6%90%9C%E5%B0%8B%E6%BC%94%E7%AE%97%E6%B3%95
  * 方法无法复用，且调用了很多polyline相关的方法，暂不抽离到src/algorithm中
  */
@@ -590,10 +593,10 @@ export const getPolylinePoints = (
  * @param pointsList 多个点组成的数组
  */
 export const getLongestEdge = (pointsList: Point[]): [Point, Point] => {
-  let points
   if (pointsList.length === 1) {
-    points = [pointsList[0], pointsList[0]]
-  } else if (pointsList.length >= 2) {
+    const [point] = pointsList
+    return [point, point]
+  } else {
     let point1 = pointsList[0]
     let point2 = pointsList[1]
     let edgeLength = distance(point1.x, point1.y, point2.x, point2.y)
@@ -612,9 +615,8 @@ export const getLongestEdge = (pointsList: Point[]): [Point, Point] => {
         point2 = newPoint2
       }
     }
-    points = [point1, point2]
+    return [point1, point2]
   }
-  return points
 }
 
 /* 线段是否在节点内部，被包含了 */
@@ -650,8 +652,7 @@ export const getCrossPointInRect = (
   start: Point,
   end: Point,
   node: BaseNodeModel,
-): Point => {
-  let point
+): Point | false | undefined => {
   let crossSegments: [Point, Point] | undefined = undefined
   const nodeBox = getNodeBBox(node)
   const points = getPointsFromBBox(nodeBox)
@@ -667,9 +668,8 @@ export const getCrossPointInRect = (
     }
   }
   if (crossSegments) {
-    point = getCrossPointOfLine(start, end, crossSegments[0], crossSegments[1])
+    return getCrossPointOfLine(start, end, crossSegments[0], crossSegments[1])
   }
-  return point
 }
 /* 判断线段的方向 */
 export const segmentDirection = (
@@ -915,6 +915,7 @@ export const getEndTangent = (
  * 获取移动边后，文本位置距离边上的最近的一点
  * @param point 边上文本的位置
  * @param points 边的各个拐点
+ * TODO: Label实验没问题后统一改成新的计算方式，把这个方法废弃
  */
 export const getClosestPointOfPolyline = (
   point: Point,
@@ -1032,3 +1033,28 @@ export function createEdgeGenerator(
     return Object.assign({ type: result }, currentEdge)
   }
 }
+
+// 获取 Svg 标签文案高度，自动换行
+export type IGetSvgTextSizeParams = {
+  rows: string[]
+  rowsLength: number
+  fontSize: number
+}
+export const getSvgTextSize = ({
+  rows,
+  rowsLength,
+  fontSize,
+}: IGetSvgTextSizeParams): LogicFlow.RectSize => {
+  let longestBytes = 0
+  forEach(rows, (row) => {
+    const rowBytesLength = getBytesLength(row)
+    longestBytes = rowBytesLength > longestBytes ? rowBytesLength : longestBytes
+  })
+
+  // 背景框宽度，最长一行字节数/2 * fontsize + 2
+  // 背景框宽度， 行数 * fontsize + 2
+  return {
+    width: Math.ceil(longestBytes / 2) * fontSize + fontSize / 4,
+    height: rowsLength * (fontSize + 2) + fontSize / 4,
+  }
+}

package/src/util/index.ts

@@ -9,6 +9,7 @@ export * from './matrix'
 export * from './mobx'
 export * from './node'
 export * from './raf'
+export * from './resize'
 export * from './sampling'
 export * from './theme'
 export * from './uuid'

package/src/util/node.ts

@@ -1,4 +1,5 @@
 import { pick } from 'lodash-es'
+import { createElement as h } from 'preact/compat'
 import { getBytesLength } from './edge'
 import LogicFlow from '../LogicFlow'
 import {
@@ -18,6 +19,7 @@ import Direction = LogicFlow.Direction
 import NodeConfig = LogicFlow.NodeConfig
 import LineSegment = LogicFlow.LineSegment
 import AnchorInfo = Model.AnchorInfo
+import BoxBoundsPoint = Model.BoxBoundsPoint
 
 /* 获取所有锚点 */
 export const getAnchors = (data: BaseNodeModel) => {
@@ -144,13 +146,9 @@ export type NodeBBox = {
   y: number
   width: number
   height: number
-  minX: number
-  minY: number
-  maxX: number
-  maxY: number
   centerX: number
   centerY: number
-}
+} & BoxBoundsPoint
 
 /* 获取节点bbox */
 export const getNodeBBox = (node: BaseNodeModel): NodeBBox => {
@@ -411,9 +409,14 @@ export const pickNodeConfig = (data: NodeConfig): NodeConfig => {
     'x',
     'y',
     'text',
+    'label',
     'properties',
     'virtual', // 区域节点是否为dnd添加的虚拟节点
     'rotate',
+
+    // TODO: 确认是否可以加到此处
+    'resizable',
+    'rotatable',
   ])
   return nodeData
 }
@@ -444,7 +447,26 @@ export const getNodeAnchorPosition = (
   }
 }
 
-// 获取文案高度，自动换行，利用dom计算高度
+/*********************************************************
+ * Text 节点文本相关工具函数
+ ********************************************************/
+// Text 相关节点工具函数
+// TODO: 获取文案高度，设置自动换行，利用 dom 计算高度
+// function getTextHeight(text: string, font: string): number {
+//   const span = document.createElement('span');
+//   span.textContent = text;
+//   span.style.font = font;
+
+//   const range = document.createRange();
+//   range.selectNodeContents(span);
+
+//   const rect = range.getBoundingClientRect();
+//   const height = rect.height;
+
+//   return height;
+// }
+
+// 获取文案高度，自动换行，利用 dom 计算高度
 export const getHtmlTextHeight = ({
   rows,
   style,
@@ -452,18 +474,18 @@ export const getHtmlTextHeight = ({
   className,
 }: {
   rows: string[]
-  style: any // TODO: 完善类型
+  style: h.JSX.CSSProperties
   rowsLength: number
   className: string
 }) => {
   const dom = document.createElement('div')
-  dom.style.fontSize = style.fontSize
-  dom.style.width = style.width
   dom.className = className
-  dom.style.lineHeight = style.lineHeight
-  dom.style.padding = style.padding
+  dom.style.fontSize = `${style.fontSize}`
+  dom.style.width = `${style.width}`
+  dom.style.lineHeight = `${style.lineHeight}`
+  dom.style.padding = `${style.padding}`
   if (style.fontFamily) {
-    dom.style.fontFamily = style.fontFamily
+    dom.style.fontFamily = `${style.fontFamily}`
   }
   if (rowsLength > 1) {
     rows.forEach((row) => {
@@ -479,6 +501,7 @@ export const getHtmlTextHeight = ({
   document.body.removeChild(dom)
   return height
 }
+
 // 获取文案高度，自动换行，利用dom计算高度
 export const getSvgTextWidthHeight = ({
   rows,
@@ -506,7 +529,7 @@ export const getSvgTextWidthHeight = ({
 /**
  * @description 格式化边校验信息
  */
-export const formateAnchorConnectValidateData = (
+export const formatAnchorConnectValidateData = (
   data: Model.ConnectRuleResult,
 ) => {
   if (typeof data !== 'object') {