@logicflow/extension 2.2.0 → 2.2.1

package/src/tools/flow-path/index.ts

@@ -1,233 +0,0 @@
-/**
- * 路径插件，此插件支持获取绘制的图中所有的路径。
- * 需要指定开始节点类型。
- */
-
-import LogicFlow from '@logicflow/core'
-import { getBpmnId } from '../../bpmn/getBpmnId'
-
-type Path = {
-  routeId: string
-  name: string
-  elements: string[]
-  type: number
-}
-
-type RawPath = Path & {
-  similarElement: RawPath
-  weight: number
-}
-
-type PathNodeData = {
-  id: string
-  data: any
-  nextNodes: string[]
-}
-
-export class FlowPath {
-  lf: LogicFlow
-  paths: RawPath[]
-  startNodeType?: string
-  static pluginName = 'flowPath'
-
-  constructor({ lf }) {
-    this.lf = lf
-    this.paths = []
-    // 给lf添加方法
-    lf.getPathes = () => {
-      if (!this.startNodeType) {
-        throw new Error('需要预先指定开始节点类型')
-      }
-      return this.getPathes()
-    }
-
-    lf.setRawPaths = (paths: Path[]) => {
-      this.setPathes(paths)
-    }
-
-    lf.getRawPathes = () => this.paths
-
-    lf.setStartNodeType = (type: string) => {
-      this.startNodeType = type
-    }
-  }
-
-  setPathes(paths) {
-    this.paths = paths.map(({ routeId, name, elements, type }) => ({
-      routeId,
-      name,
-      elements,
-      type,
-      similarElement: null,
-      weight: 0,
-    }))
-  }
-
-  getPathes() {
-    const graphData = this.lf.getGraphRawData()
-    const nodesMap: Map<string, PathNodeData> = new Map()
-    const startNodeIds: string[] = []
-    graphData.nodes.forEach((node) => {
-      nodesMap.set(node.id, {
-        id: node.id,
-        data: node,
-        nextNodes: [],
-      })
-      if (node.type === this.startNodeType) {
-        startNodeIds.push(node.id)
-      }
-    })
-    graphData.edges.forEach((edge) => {
-      const node = nodesMap.get(edge.sourceNodeId)
-      node?.nextNodes.push(edge.targetNodeId)
-    })
-    let pathElements: string[][] = []
-    startNodeIds.forEach((id) => {
-      const node = nodesMap.get(id)
-      if (node) {
-        pathElements = pathElements.concat(
-          this.findPathElements(node, nodesMap, []),
-        )
-      }
-    })
-    return this.getNewPathes(pathElements)
-  }
-
-  private findPathElements(
-    node: PathNodeData,
-    nodesMap: Map<string, PathNodeData>,
-    elements: string[] = [],
-  ) {
-    const newPaths: string[] = [...elements]
-    newPaths.push(node.id)
-    if (node.nextNodes.length === 0) {
-      return [newPaths]
-    }
-    let subPath = []
-    for (let i = 0; i < node.nextNodes.length; i++) {
-      const n = nodesMap.get(node.nextNodes[i])
-      let p
-      // 循环路径
-      if (n) {
-        const idx = newPaths.indexOf(n.id)
-        if (idx !== -1) {
-          p = [[...newPaths.slice(idx), n.id]]
-        } else {
-          p = this.findPathElements(n, nodesMap, [...newPaths])
-        }
-        subPath = subPath.concat(p)
-      }
-    }
-    return subPath
-  }
-
-  /**
-   * 设置路径id
-   * 如果存在原始路径Id, 则需要比较新路径是否在原始路径中存在相似路径
-   * 如果有，则尽量使用原始路径。
-   * 相似路径
-   * 1. 如果所有的节点都相同，则必定为同一路径。(包括顺序不同)
-   * 2. 如果新路径比原来路径少了或者多了部分节点，则记录为相似路径。基于不同的差异，标记不同的权重。
-   * 3. 基于新路径在旧路径占用权限，设置新路径Id.
-   * 4. 如果某一条旧路径被多条新路径标记为相同的权重，则这两条新路径都使用新Id.
-   */
-  private getNewPathes(pathElements) {
-    const paths: any = []
-    // 由于循环路径不包括开始，所以存在重复的情况，此处去重。
-    const LoopSet = new Set()
-    pathElements.forEach((elements) => {
-      const routeId = this.getNewId('path')
-      const name = this.getNewId('路径')
-      const isLoop = this.isLoopPath(elements)
-      const elementStr = elements.join(',')
-      if (!LoopSet.has(elementStr)) {
-        LoopSet.add(elementStr)
-        paths.push({
-          routeId,
-          name,
-          elements,
-          type: isLoop,
-          weight: 0,
-          similarElement: '',
-        })
-      }
-    })
-    const oldPaths = JSON.parse(JSON.stringify(this.paths))
-    // 1) 找到所有路径最相似的路径, 给旧路径标记其最接近的路径
-    paths.forEach((newPath) => {
-      for (let i = 0; i < oldPaths.length; i++) {
-        const oldPath = oldPaths[i]
-        const weight = this.similar2Path(
-          [...newPath.elements],
-          [...oldPath.elements],
-        )
-        if (weight > newPath.weight && oldPath.weight <= weight) {
-          newPath.weight = weight
-          newPath.similarElement = oldPath
-          if (weight === oldPath.weight && oldPath.similarElement) {
-            // 特殊处理，如果两个路径都与同一条旧路径有相似的权重，则这两个路径的相似路径都置空
-            oldPath.similarElement.similarElement = null
-            oldPath.similarElement.weight = 0
-            oldPath.similarElement = null
-            oldPath.weight = 0
-          } else {
-            oldPath.similarElement = newPath
-            oldPath.weight = weight
-          }
-        }
-      }
-    })
-    // 2) 再次遍历所有路径，如果该路径的相似路径对应的相似路径是自己，那么就设置该路径id和name为其相似路径。
-    paths.forEach((newPath) => {
-      if (
-        newPath.similarElement &&
-        newPath.similarElement.similarElement === newPath
-      ) {
-        newPath.routeId = newPath.similarElement.routeId
-        newPath.name = newPath.similarElement.name
-      }
-      delete newPath.similarElement
-      delete newPath.weight
-    })
-
-    this.setPathes(paths)
-    return paths
-  }
-
-  private similar2Path(x, y) {
-    let z = 0
-    const s = x.length + y.length
-
-    x.sort()
-    y.sort()
-    let a = x.shift()
-    let b = y.shift()
-
-    while (a !== undefined && b !== undefined) {
-      if (a === b) {
-        z++
-        a = x.shift()
-        b = y.shift()
-      } else if (a < b) {
-        a = x.shift()
-      } else if (a > b) {
-        b = y.shift()
-      }
-    }
-    return (z / s) * 200
-  }
-
-  private getNewId(prefix) {
-    return `${prefix}_${getBpmnId()}`
-  }
-
-  /**
-   * 判断是否为循环路径
-   * 由于前面进行了特殊处理，将循环部分单独提出来作为路径
-   * 所有循环路径必定开始节点等于结束节点。
-   */
-  private isLoopPath(elements) {
-    const { length } = elements
-    return elements.indexOf(elements[length - 1]) !== length - 1 ? 1 : 0
-  }
-}

package/src/tools/label/Label.tsx

@@ -1,357 +0,0 @@
-import LogicFlow, {
-  BaseEdgeModel,
-  BaseNodeModel,
-  Component,
-  createRef,
-  ElementState,
-  GraphModel,
-  IDragParams,
-  observer,
-  StepDrag,
-} from '@logicflow/core'
-import classNames from 'classnames'
-import LabelModel from './LabelModel'
-import { findIndex } from 'lodash-es'
-
-import LabelConfig = LogicFlow.LabelConfig
-
-export interface ILabelProps {
-  label: LabelModel
-  element: BaseNodeModel | BaseEdgeModel
-  graphModel: GraphModel
-}
-
-export interface ILabelState {
-  isEditing: boolean
-  isHovered: boolean
-  isDragging: boolean
-  isSelected: boolean
-}
-
-@observer
-export class Label extends Component<ILabelProps, ILabelState> {
-  textRef = createRef<HTMLDivElement>()
-  stepDrag: StepDrag
-
-  constructor(props: ILabelProps) {
-    super(props)
-    const {
-      label,
-      graphModel: { gridSize, eventCenter },
-    } = props
-
-    this.stepDrag = new StepDrag({
-      onDragging: this.handleDragging,
-      onDragEnd: this.handleDragEnd,
-      step: gridSize,
-      eventType: 'LABEL',
-      model: label,
-      eventCenter,
-    })
-
-    this.state = {
-      isEditing: false,
-      isHovered: false,
-      isDragging: false,
-      isSelected: false,
-    }
-  }
-
-  setHoverOn = () => {
-    const { element } = this.props
-    if (element.isDragging || this.state.isHovered) return // 当节点或边在拖拽中时，不触发 hover 态
-
-    this.setState({ isHovered: true })
-    element.setHovered(true)
-  }
-  setHoverOff = () => {
-    const { element } = this.props
-    if (!this.state.isHovered) return
-
-    this.setState({ isHovered: false })
-    element.setHovered(false)
-  }
-
-  handleMouseDown = (e: PointerEvent) => {
-    const { label, graphModel } = this.props
-    const {
-      editConfigModel: { nodeTextDraggable },
-    } = graphModel
-    // 当 label 允许拖拽 且不处于拖拽状态、不处于编辑状态时， StepDrag 开启拖拽
-    if (
-      (label.draggable ?? nodeTextDraggable) &&
-      !this.state.isDragging &&
-      !this.state.isEditing
-    ) {
-      this.stepDrag.handleMouseDown(e)
-    }
-  }
-  handleMouseUp = (e: PointerEvent) => {
-    if (this.state.isDragging) {
-      this.stepDrag.handleMouseUp(e)
-    }
-  }
-  handleDragging = ({ deltaX, deltaY }: IDragParams) => {
-    if (!this.state.isDragging) {
-      this.setState({ isDragging: true })
-    }
-    const { label, graphModel } = this.props
-
-    // DONE: 添加缩放时拖拽的逻辑，对 deltaX 和 deltaY 进行按比例缩放
-    const { transformModel } = graphModel
-    const [curDeltaX, curDeltaY] = transformModel.fixDeltaXY(deltaX, deltaY)
-
-    this.setElementModelLabelInfo({
-      x: label.x + curDeltaX,
-      y: label.y + curDeltaY,
-    })
-
-    graphModel.eventCenter.emit('label:drag', {
-      data: label.getData(),
-      model: label,
-    })
-  }
-  handleDragEnd = () => {
-    this.setState({ isDragging: false })
-  }
-
-  handleClick = (e: MouseEvent) => {
-    const { label, element, graphModel } = this.props
-    // 更新当前Label选中状态
-    element.setSelected(!this.state.isSelected)
-    this.setState({ isSelected: !this.state.isSelected })
-    this.setElementModelLabelInfo({
-      isSelected: true,
-    })
-    graphModel.eventCenter.emit('label:click', {
-      data: label.getData(),
-      e,
-      model: element,
-    })
-  }
-
-  handleDbClick = (e: MouseEvent) => {
-    const { label, element, graphModel } = this.props
-    graphModel.eventCenter.emit('label:dblclick', {
-      data: label.getData(),
-      e,
-      model: element,
-    })
-
-    if (!label.editable) {
-      element.setSelected(true)
-      return
-    }
-    element.setSelected()
-    element.setElementState(ElementState.TEXT_EDIT)
-
-    this.setState({ isEditing: true })
-
-    // DONE: 触发当前 label 的 focus 事件，设置内容可编辑，且在文本最后添加光标
-    if (this.textRef.current) {
-      this.textRef.current.contentEditable = 'true'
-      this.textRef.current.focus()
-
-      const range = document.createRange()
-      const selection = window.getSelection()
-      range.selectNodeContents(this.textRef.current)
-      range.collapse(false)
-      selection?.removeAllRanges()
-      selection?.addRange(range)
-    }
-  }
-  handleBlur = (e: FocusEvent) => {
-    const {
-      label,
-      element,
-      graphModel: { eventCenter },
-    } = this.props
-
-    // DONE: 触发 LABEL:BLUR 事件，并抛出相关的事件
-    eventCenter.emit('label:blur', {
-      e,
-      model: element,
-      data: label.getData(),
-      element: this.textRef.current,
-    })
-
-    this.setState({
-      isDragging: false,
-      isHovered: false,
-      isSelected: false,
-    })
-  }
-
-  handleInput = (e: InputEvent) => {
-    const { label, graphModel } = this.props
-    graphModel.eventCenter.emit('label:input', {
-      e,
-      data: label.getData(),
-    })
-  }
-
-  setElementModelLabelInfo(data) {
-    const { label, element, graphModel } = this.props
-    const {
-      properties: { _label },
-    } = element
-    const elementLabel = _label as LabelConfig[]
-    const idx = findIndex(elementLabel, (cur) => cur.id === label.id)
-
-    const target = elementLabel[idx]
-    elementLabel[idx] = {
-      ...target,
-      ...data,
-    }
-
-    const targetElem = graphModel.getElement(element.id)
-    targetElem?.setProperty('_label', elementLabel)
-  }
-
-  // 重新计算 Label 大小
-  reCalcLabelSize = () => {}
-
-  // TODO：如何处理 Label zIndex 的问题, Label 永远会比节点层级高
-  // 当 Label 被元素遮盖时，隐藏它
-
-  componentDidMount() {
-    const { label, element, graphModel } = this.props
-
-    // 在点击元素、边或者画布 时，结束 Label 的编辑态
-    graphModel.eventCenter.on(
-      'blank:click,node:click,edge:click,label:click',
-      ({ data }) => {
-        // 点击的不是label 、点击的不是当前label、点击的是当前label，且当前 label 处于选中态
-        // 则取消选中态
-        if (
-          data?.type !== 'label' ||
-          (data.type === 'label' && data.id !== label.id) ||
-          this.state.isSelected
-        ) {
-          this.setState({ isSelected: false })
-        }
-        // 点击的不是label 、点击的不是当前label、点击的是当前label，且当前 label 处于编辑态
-        // 则结束编辑态
-        if (
-          (data?.type !== 'label' ||
-            (data.type == 'label' && data.id !== label.id)) &&
-          this.state.isEditing
-        ) {
-          this.setState({ isEditing: false })
-
-          const value = this.textRef.current?.innerText ?? ''
-          const content = this.textRef.current?.innerHTML ?? ''
-
-          this.setElementModelLabelInfo({
-            value,
-            content,
-            isSelected: false,
-          })
-
-          element.setElementState(ElementState.DEFAULT)
-        }
-        // 点击的不是label 、点击的不是当前label、点击的是当前label，且当前 label 的文本DOM存在
-        // 则结束文本DOM的编辑态
-        if (
-          (data?.type !== 'label' ||
-            (data.type == 'label' && data.id !== label.id)) &&
-          this.textRef.current
-        ) {
-          this.textRef.current.contentEditable = 'false'
-        }
-      },
-    )
-    // TODO: 节点拖拽结束后，更新 Label 的位置
-    // eventCenter.on('node:drag', () => {})
-    // eventCenter.on('node:drop', () => {})
-    // eventCenter.on('node:mousemove', () => {})
-    //
-    // eventCenter.on('node:properties-change,node:properties-delete', () => {})
-  }
-
-  componentDidUpdate() {
-    // snapshot: any, // previousState: Readonly<ILabelState>, // previousProps: Readonly<ILabelProps>,
-    // console.log('Label componentDidUpdate')
-    // console.log('previousProps', previousProps)
-    // console.log('previousState', previousState)
-    // console.log('snapshot', snapshot)
-  }
-
-  componentWillUnmount() {
-    const { graphModel } = this.props
-    graphModel.eventCenter.off('blank:click,node:click,edge:click')
-  }
-
-  // TODO: 当某一个标签更新时，如何避免其它标签的更新
-  // shouldComponentUpdate or memo
-
-  render() {
-    const { label, element, graphModel } = this.props
-    const { isDragging, isHovered, isSelected, isEditing } = this.state
-    const { transformModel } = graphModel
-    const { transform } = transformModel.getTransformStyle()
-    const {
-      id,
-      x,
-      y,
-      zIndex,
-      vertical,
-      style,
-      rotate,
-      content,
-      labelWidth,
-      textOverflowMode,
-    } = label
-
-    const maxLabelWidth: number =
-      labelWidth ?? (element.BaseType === 'node' ? element.width - 20 : 80)
-    const containerStyle = {
-      left: `${x - maxLabelWidth / 2}px`,
-      top: `${y - 10}px`,
-      width: `${maxLabelWidth}px`,
-      height: '20px',
-      zIndex: zIndex ?? 1,
-      transform: rotate
-        ? `${transform} rotate(${rotate}deg)`
-        : `${transform} rotate(${vertical ? -0.25 : 0}turn)`,
-    }
-    return (
-      <div
-        id={`element-container-${id}`}
-        className={classNames('lf-label-editor-container')}
-        style={containerStyle}
-        onPointerDown={this.handleMouseDown}
-        onPointerUp={this.handleMouseUp}
-        onClick={this.handleClick}
-        onDblClick={this.handleDbClick}
-        onBlur={this.handleBlur}
-        onMouseEnter={this.setHoverOn}
-        onMouseOver={this.setHoverOn}
-        onMouseLeave={this.setHoverOff}
-      >
-        <div
-          ref={this.textRef}
-          id={`editor-container-${id}`}
-          className={classNames('lf-label-editor', {
-            'lf-label-editor-dragging': isDragging,
-            'lf-label-editor-editing': isEditing,
-            'lf-label-editor-hover': !isEditing && (isHovered || isSelected),
-            [`lf-label-editor-${textOverflowMode}`]: !isEditing,
-          })}
-          onInput={this.handleInput}
-          style={{
-            maxWidth: `${maxLabelWidth}px`,
-            boxSizing: 'border-box',
-            display: 'inline-block',
-            background:
-              isEditing || element.BaseType === 'edge' ? '#fff' : 'transparent',
-            ...style,
-          }}
-          dangerouslySetInnerHTML={{ __html: content }}
-        ></div>
-      </div>
-    )
-  }
-}
-
-export default Label

package/src/tools/label/LabelModel.ts

@@ -1,83 +0,0 @@
-import LogicFlow, {
-  BaseEdgeModel,
-  BaseNodeModel,
-  GraphModel,
-  LogicFlowUtil,
-  h,
-  observable,
-  toJS,
-} from '@logicflow/core'
-import { assign } from 'lodash-es'
-
-import LabelData = LogicFlow.LabelData
-import LabelConfig = LogicFlow.LabelConfig
-import GraphElement = LogicFlow.GraphElement
-
-// export type ILabelConfig = {}
-const { createUuid } = LogicFlowUtil
-
-export class LabelModel {
-  id: string
-  type: string = 'label' // 目前写死，后续可以根据业务需求进行扩展
-
-  @observable x!: number
-  @observable y!: number
-  @observable content: string = ''
-  @observable value: string = ''
-  @observable rotate?: number
-  @observable style: h.JSX.CSSProperties = {}
-
-  @observable zIndex?: number
-  @observable vertical: boolean = false // 文字是否垂直显示
-  @observable editable: boolean = true // label 是否可编辑
-  @observable draggable: boolean = true // label 是否可拖拽
-  @observable labelWidth?: number
-  @observable textOverflowMode:
-    | 'ellipsis'
-    | 'wrap'
-    | 'clip'
-    | 'nowrap'
-    | 'default' = 'default' // Label 节点的文本溢出模式
-
-  // TODO: 后续看 label 是否可以独立存在，不依赖节点 or 边
-  element: BaseNodeModel | BaseEdgeModel // 当前节点关联的元素 Model
-  graphModel: GraphModel
-
-  constructor(
-    config: LabelConfig,
-    element: GraphElement,
-    graphModel: GraphModel,
-  ) {
-    this.element = element
-    this.graphModel = graphModel
-    this.id = config.id ?? createUuid()
-
-    this.initLabelData(config)
-  }
-
-  initLabelData(config: LabelConfig): void {
-    assign(this, config)
-  }
-
-  getData(): LabelData {
-    return {
-      id: this.id,
-      x: this.x,
-      y: this.y,
-      type: 'label',
-      content: this.content,
-      value: this.value,
-      rotate: this.rotate,
-      style: toJS(this.style),
-
-      draggable: this.draggable,
-      editable: this.editable,
-      labelWidth: this.labelWidth,
-      textOverflowMode: this.textOverflowMode,
-
-      vertical: this.vertical,
-    }
-  }
-}
-
-export default LabelModel