@logicflow/extension 2.2.0-alpha.7 → 2.2.1

package/src/tools/label/LabelOverlay.tsx

@@ -1,162 +0,0 @@
-import LogicFlow, { Component, GraphModel, h, observer } from '@logicflow/core'
-import type { IToolProps } from '@logicflow/core'
-import { forEach, merge } from 'lodash-es'
-import LabelPlugin from '.'
-import Label from './Label'
-import LabelModel from './LabelModel'
-import {
-  MediumEditor,
-  defaultOptions,
-  createColorPickerButtonClass,
-} from './mediumEditor'
-
-import LabelConfig = LogicFlow.LabelConfig
-
-export type LabelConfigType = string | LabelConfig | LabelConfig[]
-
-export interface ILabelOverlayState {
-  tick: number
-}
-// const { createUuid } = LogicFlowUtil
-
-// DONE: 解决问题，如果 LabelOverlay 设置为 Observer，拖拽 Label 时会导致 LabelOverlay 组件重新渲染，不知道为何
-// 目前解决了。流程是 拖动 -> 更新 label 的数据信息到 element model -> 重新渲染 LabelOverlay
-// 这种目前存在的问题，会全量重新渲染，是否会影响性能 ❓❓❓
-// 另一种解决方案是，在此组件中监听一些事件，当这些事件触发时，再重新渲染 LabelOverlay
-// 讨论一下
-@observer
-export class LabelOverlay extends Component<IToolProps, ILabelOverlayState> {
-  static toolName = 'label-edit-tool'
-
-  lf: LogicFlow
-  editor?: MediumEditor
-  graphModel: GraphModel
-  labelMap: Map<string, LabelModel> = new Map()
-
-  constructor(props: IToolProps) {
-    super(props)
-
-    const { lf, graphModel } = props
-    this.lf = lf
-    this.graphModel = graphModel
-
-    this.state = { tick: 0 }
-  }
-
-  componentDidMount() {
-    const { graphModel } = this.props
-    // 1. 直接在此处初始化 RichTextEdit 工具
-    this.editor = new MediumEditor(
-      '.lf-label-editor',
-      merge(defaultOptions, {
-        autoLink: true,
-        extensions: {
-          colorPicker: new (createColorPickerButtonClass(MediumEditor))(),
-        },
-      }),
-    )
-
-    // TODO: 2. 在此处监听一些事件，当 node、edge 数据变化时，主动触发重新渲染，保证同步更新
-    // TODO: 3. 整理哪些事件应该触发 Label 的更新
-    // 不需要了，将当前组件设置成 @observer 后，graphModel 更新会自动触发更新
-    graphModel.eventCenter.on(
-      'text:update,node:mousemove,node:resize,node:rotate,node:drag,label:drop,node:drop',
-      () => {
-        // this.setState({ tick: this.state.tick + 1 })
-      },
-    )
-
-    graphModel.eventCenter.on(
-      'node:properties-change,node:properties-delete',
-      () => {
-        this.setState({ tick: this.state.tick + 1 })
-      },
-    )
-  }
-
-  componentDidUpdate() {
-    // 在组件更新后，将新增的 label 元素添加到富文本编辑器中
-    if (this.editor && this.editor.elements.length > 0) {
-      this.editor.addElements('.lf-label-editor')
-    } else {
-      // FIX: 如果初始化的数据中没有 properties._label，需要重新初始化富文本编辑器
-      this.editor?.destroy()
-      this.editor = new MediumEditor(
-        '.lf-label-editor',
-        merge(defaultOptions, {
-          autoLink: true,
-          extensions: {
-            colorPicker: new (createColorPickerButtonClass(MediumEditor))(),
-          },
-        }),
-      )
-    }
-  }
-
-  componentWillUnmount() {
-    // 组件销毁时，同时将富文本编辑器注销
-    this.editor?.destroy()
-  }
-
-  /**
-   * 获取当前画布上所有的 label
-   * 1. 第一步，先把当前所有的 text 转换为 label 进行展示
-   * 2. 数据同步，text 编辑后，同步更新 label，并重新渲染
-   */
-  getLabels(): h.JSX.Element[] | null {
-    // 1. 通过 graphModel 获取当前画布上所有的 label 配置数据
-    const {
-      lf: { extension },
-      graphModel,
-    } = this.props
-
-    const elements = [...graphModel.nodes, ...graphModel.edges]
-    const curExtension = extension['label'] as LabelPlugin
-
-    if (curExtension) {
-      const labels: h.JSX.Element[] = [] // 保存所有的 Label 元素
-
-      // TODO: 筛选出当前画布上，textMode 为 TextMode.LABEL 的元素(在支持元素级别的 textMode 时，需要做这个筛选)
-      // REMIND: 本期先只支持全局配置，所以判断全局的 textMode 即可
-      forEach(elements, (element) => {
-        const elementData = element.getData()
-        const labelConfig = elementData.properties?._label ?? []
-
-        forEach(labelConfig, (config) => {
-          const { labelMap } = this
-          // 查找 labelModel 实例，如果是实例化过的，直接复用；如果是新的，创建实例
-          // let label: LabelModel
-          // if (config.id && labelMap.has(config.id)) {
-          //   label = labelMap.get(config.id)!
-          // } else {
-          //   label = new LabelModel(config, element, graphModel)
-          //   labelMap.set(label.id, label)
-          // }
-          const label = new LabelModel(config, element, graphModel)
-          labelMap.set(label.id, label)
-          labels.push(
-            <Label
-              key={label.id}
-              label={label}
-              element={element}
-              graphModel={graphModel}
-            />,
-          )
-        })
-      })
-
-      return labels
-    }
-    return null
-  }
-
-  render() {
-    return (
-      <foreignObject id="lf-label-overlay" class="lf-label-overlay">
-        {this.getLabels()}
-      </foreignObject>
-    )
-  }
-}
-
-export default LabelOverlay

package/src/tools/label/algorithm.ts

@@ -1,42 +0,0 @@
-import LogicFlow from '@logicflow/core'
-import Point = LogicFlow.Point
-
-/**
- * 三次贝塞尔曲线公式
- */
-export const getPointOnBezier = (
-  t: number,
-  P0: Point,
-  P1: Point,
-  P2: Point,
-  P3: Point,
-) => {
-  const x =
-    (1 - t) ** 3 * P0.x +
-    3 * (1 - t) ** 2 * t * P1.x +
-    3 * (1 - t) * t ** 2 * P2.x +
-    t ** 3 * P3.x
-  const y =
-    (1 - t) ** 3 * P0.y +
-    3 * (1 - t) ** 2 * t * P1.y +
-    3 * (1 - t) * t ** 2 * P2.y +
-    t ** 3 * P3.y
-
-  return { x: x, y: y }
-}
-
-/**
- * 计算两个节点间的距离
- * @param point1
- * @param point2
- * @param gridSize
- */
-export const calcTwoPointsDistance = (
-  point1: Point,
-  point2: Point,
-  gridSize: number = 1,
-): number => {
-  const dx = (point1.x - point2.x) / gridSize
-  const dy = (point1.y - point2.y) / gridSize
-  return Math.sqrt(dx ** 2 + dy ** 2)
-}

package/src/tools/label/index.ts

@@ -1,479 +0,0 @@
-import LogicFlow, { createUuid, GraphModel, TextMode } from '@logicflow/core'
-import {
-  cloneDeep,
-  forEach,
-  isArray,
-  isEmpty,
-  isEqual,
-  isObject,
-  map,
-} from 'lodash-es'
-import LabelOverlay, { LabelConfigType } from './LabelOverlay'
-import {
-  BBoxInfo,
-  calcPointAfterResize,
-  rotatePointAroundCenter,
-} from './utils'
-
-import Position = LogicFlow.Position
-import NodeData = LogicFlow.NodeData
-import EdgeData = LogicFlow.EdgeData
-import Extension = LogicFlow.Extension
-import LabelConfig = LogicFlow.LabelConfig
-import GraphElement = LogicFlow.GraphElement
-
-// 类型定义，如果 isMultiple 为 true 的话，maxCount 为数值且大于 1
-export type ILabelOptions = {
-  isMultiple?: boolean
-  maxCount?: number
-  labelWidth?: number
-  textOverflowMode?: 'ellipsis' | 'wrap' | 'clip' | 'nowrap' | 'default'
-}
-
-export class Label implements Extension {
-  static pluginName = 'label'
-
-  lf: LogicFlow
-  options: ILabelOptions
-
-  textOverflowMode: 'ellipsis' | 'wrap' | 'clip' | 'nowrap' | 'default'
-  isMultiple: boolean
-  labelWidth?: number
-  maxCount: number // 默认值给无限大数值
-
-  labelInitPositionMap: Map<string, Position> = new Map()
-
-  constructor({ lf, options }: { lf: LogicFlow; options: ILabelOptions }) {
-    this.lf = lf
-    // DONE: 根据 options 初始化一些插件配置，比如是否支持多个 label 等，生效在所有 label 中
-    this.options = options ?? {}
-
-    this.textOverflowMode = options.textOverflowMode ?? 'default'
-    this.isMultiple = options.isMultiple ?? true
-    this.labelWidth = options.labelWidth
-    this.maxCount = options.maxCount ?? Infinity
-
-    // DONE: 1. 启用插件时，将当前画布的 textMode 更新为 TextMode.LABEL。
-    // 如果将其又重新设置为 TextModel.TEXT，则需要 disable 掉 Label 工具，enable TextEditTool
-    lf.graphModel.editConfigModel.updateTextMode(TextMode.LABEL)
-
-    // TODO: 2. 做一些插件需要的事件监听
-    this.addEventListeners()
-
-    // TODO: 3. 自定义快捷键，比如 delete，选中 label 时，移除 label
-    this.rewriteShortcut()
-
-    // 插件中注册 LabelOverlay 工具，用于 label 的编辑
-    lf.tool.registerTool(LabelOverlay.toolName, LabelOverlay)
-    // LabelOverlay 和 TextEditTool 互斥，所以将它 disable 掉
-    lf.tool.disableTool('text-edit-tool')
-  }
-
-  /**
-   * 格式化元素的 Label 配置，后续初始化 Label 用统一的数据格式
-   * 主要是将 _label 类型 string | LabelConfig | LabelConfig[] 统一转换为 LabelConfig[]
-   * @param graphModel 当前图的 model
-   * @param element 当前元素 model
-   * @return LabelConfig[]
-   */
-  private formatConfig(
-    graphModel: GraphModel,
-    element: GraphElement,
-  ): LabelConfig[] {
-    const {
-      editConfigModel: {
-        nodeTextEdit,
-        edgeTextEdit,
-        nodeTextDraggable,
-        edgeTextDraggable,
-      },
-    } = graphModel
-    const { textOverflowMode, isMultiple, maxCount, labelWidth } = this
-    const {
-      text,
-      zIndex,
-      properties: { _label, _labelOption = {} },
-    } = element
-
-    // 当前元素的 Label 相关配置
-    const curLabelConfig = _label as LabelConfigType
-    const { isMultiple: curIsMultiple, maxCount: curMaxCount }: ILabelOptions =
-      _labelOption as ILabelOptions
-
-    // REMIND: 对 3 种可能得数据类型进行处理
-    let formatConfig: LabelConfig[] = [] // 保存格式化后的 LabelConfig
-    if (isArray(curLabelConfig)) {
-      // 1. 数组的话就是 LabelConfig[] 类型
-      // 判断是否开启 isMultiple, 如果开启了，判断是否超过最大数量。超出就截取
-      const size = curMaxCount ?? maxCount // 优先级，当设置 multiple 时，元素的 maxCount 优先级高于插件的 maxCount
-      if (isMultiple && curIsMultiple) {
-        if (curLabelConfig.length > size) {
-          formatConfig = curLabelConfig.slice(0, size)
-        } else {
-          formatConfig = curLabelConfig
-        }
-      } else {
-        formatConfig = [curLabelConfig[0]]
-      }
-    } else if (isObject(curLabelConfig)) {
-      // 2. 对象的话就是 LabelConfig 类型
-      formatConfig = [curLabelConfig]
-    } else if (typeof curLabelConfig === 'string' || !curLabelConfig) {
-      // 3. 字符串或者为空的话就是 string 类型，基于 text 的数据合成 LabelConfig 信息（主要复用 text 的 x,y 信息）
-      const config: LabelConfig = {
-        ...text,
-        content: curLabelConfig || text?.value,
-        draggable:
-          element.BaseType === 'edge' ? edgeTextDraggable : nodeTextDraggable,
-      }
-      formatConfig = config.value ? [config] : []
-    }
-
-    // TODO: 针对 Edge，在 edge 更新时 重新计算 Label 的位置
-    if (element.BaseType === 'edge') {
-      // 判断当前 label，是否在 edge 的路径上，如果不在，就重新计算位置
-      formatConfig = map(formatConfig, (config) => {
-        return config
-      })
-    }
-
-    // DONE: 再根据一些全局配置，比如是否支持垂直显示等，对 LabelConfig 进行二次处理
-    // 优先级：全局配置 > 元素配置。比如全局设置 isMultiple 为 true 时，才可以使用 局部的 isMultiple 设置才生效
-    // 当全局 isMultiple 为 false 时，局部的 isMultiple 不生效
-    return map(formatConfig, (config) => {
-      if (!config.id) {
-        config.id = createUuid()
-      }
-
-      const {
-        value,
-        content,
-        vertical,
-        editable,
-        draggable,
-        textOverflowMode: labelTextOverflowMode,
-      } = config
-
-      const textEdit = element.BaseType === 'node' ? nodeTextEdit : edgeTextEdit
-      const textDraggable =
-        element.BaseType === 'node' ? nodeTextDraggable : edgeTextDraggable
-      return {
-        ...config,
-        zIndex,
-        labelWidth,
-        content: content ?? value,
-        vertical: vertical ?? false,
-        editable: Boolean(textEdit) && editable,
-        draggable: Boolean(textDraggable) && draggable,
-        textOverflowMode: labelTextOverflowMode ?? textOverflowMode,
-      }
-    })
-  }
-
-  /**
-   * 根据初始化的数据，格式化 Label 的数据格式后，统一更新到元素的 properties._label 中，保证后续的渲染以这个数据格式进行
-   * @param graphModel
-   */
-  private setupLabels(graphModel: GraphModel) {
-    // const elements = [...graphModel.nodes, ...graphModel.edges]
-    const elements = graphModel.sortElements
-
-    // TODO: 1. 筛选出当前画布上，textMode 为 TextMode.LABEL 的元素(在支持元素级别的 textMode 时，需要做这个筛选)
-    // REMIND: 本期先只支持全局配置，所以判断全局的 textMode 即可
-    forEach(elements, (element) => {
-      // DONE: 2. 在此处做数据的转换
-      // 输入：NodeConfig.properties._label: string | LabelConfig | LabelConfig[]
-      // 输出：NodeData.properties._label: LabelData | LabelData[]
-      // 是否需要根据 isMultiple 控制是否返回数组或对象 or 直接全部返回数组 ❓❓❓ -> 目前直接全部返回数组
-
-      this.rewriteInnerMethods(element)
-
-      const formatLabelConfig = this.formatConfig(graphModel, element)
-      // FIX: BUG Here: 格式化后的 labelConfig 没有同步到 element 上，导致每次重新渲染时，都会重新格式化，且重新生成 id
-      // 但如果在此处通过 setProperty 更新元素的 _label 时，又会导致死循环
-      element.setProperty('_label', formatLabelConfig)
-    })
-  }
-
-  /**
-   * 给元素添加一个 label
-   * @param element
-   * @param position
-   */
-  private addLabel(element: GraphElement, position: Position) {
-    const { isMultiple, maxCount } = this
-    const {
-      properties: { _label, _labelOption },
-    } = element
-    const curLabelConfig = (_label as LabelConfig[]) ?? []
-    const curLabelOption = (_labelOption as ILabelOptions) ?? {}
-
-    const len = curLabelConfig.length
-    const newLabel = {
-      id: createUuid(),
-      x: position.x,
-      y: position.y,
-      content: `Label${len + 1}`,
-      value: `Label${len + 1}`,
-      style: {},
-      draggable: true,
-      editable: true,
-      vertical: false,
-    }
-    // 全局的isMultiple为false，或全局isMultiple为true但局部isMultiple指明是false，或当前label长度已经达到上线时，不允许添加多个 label
-    if (
-      !isMultiple ||
-      (isMultiple && curLabelOption.isMultiple === false) ||
-      len >= (curLabelOption?.maxCount ?? maxCount)
-    ) {
-      return
-    }
-
-    curLabelConfig.push(newLabel)
-    element.setProperty('_label', curLabelConfig)
-  }
-
-  /**
-   * 移除元素的某个 label
-   * @private
-   */
-  // private removeLabel() {}
-
-  private addEventListeners() {
-    const { graphModel } = this.lf
-    const { eventCenter, editConfigModel } = graphModel
-
-    eventCenter.on('graph:rendered', ({ graphModel }) => {
-      this.setupLabels(graphModel)
-    })
-
-    // 监听元素双击事件，给元素增加 Label
-    eventCenter.on(
-      'node:dbclick,edge:dbclick',
-      ({ e, data }: { e: MouseEvent; data: NodeData | EdgeData }) => {
-        // DONE: 增加 label 的数据信息到 element model
-        const target: GraphElement | undefined = graphModel.getElement(data.id)
-        // DONE: 将 clientX 和 clientY 转换为画布坐标
-        const {
-          canvasOverlayPosition: { x: x1, y: y1 },
-        } = graphModel.getPointByClient({
-          x: e.clientX,
-          y: e.clientY,
-        })
-
-        const point: Position = {
-          x: x1,
-          y: y1,
-        }
-        if (target && editConfigModel.textMode === TextMode.LABEL) {
-          this.addLabel(target, point)
-        }
-      },
-    )
-
-    // 监听 node:resize 事件，在 resize 时，重新计算 label 的位置信息
-    eventCenter.on('node:resize', ({ preData, data, model }) => {
-      const {
-        width: preWidth,
-        height: preHeight,
-        _label = [],
-      } = preData.properties ?? {}
-      const { width: curWidth, height: curHeight } = data.properties ?? {}
-
-      if (preWidth && preHeight && curWidth && curHeight) {
-        const origin: BBoxInfo = {
-          x: preData.x,
-          y: preData.y,
-          width: preWidth,
-          height: preHeight,
-        }
-        const scaled: BBoxInfo = {
-          x: data.x,
-          y: data.y,
-          width: curWidth,
-          height: curHeight,
-        }
-        const newLabelConfig = map(_label as LabelConfig[], (label) => {
-          const { x, y } = label
-          const newPoint = calcPointAfterResize(origin, scaled, { x, y })
-          return {
-            ...label,
-            ...newPoint,
-          }
-        })
-
-        model.setProperty('_label', newLabelConfig)
-      }
-    })
-
-    // 监听 node:rotate 事件，在 rotate 时，重新计算 Label 的位置信息
-    eventCenter.on('node:rotate', ({ model }) => {
-      const {
-        x,
-        y,
-        rotate,
-        properties: { _label = [] },
-      } = model
-      const center: Position = { x, y }
-
-      const newLabelConfig = map(_label as LabelConfig[], (label) => {
-        if (!label.id) return label
-
-        let point: Position = { x: label.x, y: label.y }
-        if (this.labelInitPositionMap.has(label.id)) {
-          point = this.labelInitPositionMap.get(label.id)!
-        } else {
-          this.labelInitPositionMap.set(label.id, point)
-        }
-
-        // 弧度转角度
-        let theta = rotate * (180 / Math.PI)
-        if (theta < 0) theta += 360
-        const radian = theta * (Math.PI / 180)
-
-        const newPoint = rotatePointAroundCenter(point, center, radian)
-        return {
-          ...label,
-          ...newPoint,
-          rotate: theta,
-        }
-      })
-
-      model.setProperty('_label', newLabelConfig)
-    })
-    // 监听元素新增事件，元素label格式化
-    eventCenter.on('node:dnd-add,node:add,edge:add', ({ data }) => {
-      const element = graphModel.getElement(data.id)
-      if (element) {
-        this.rewriteInnerMethods(element)
-        // 检查_label是否已经是格式化后的数组格式，如果是则跳过格式化
-        // 这样可以避免在复制粘贴时重复处理已经格式化好的label数据
-        const currentLabel = element.properties._label
-        if (
-          !isArray(currentLabel) ||
-          currentLabel.length === 0 ||
-          !currentLabel[0].id
-        ) {
-          const formatedLabel = this.formatConfig(graphModel, data)
-          element.setProperty('_label', formatedLabel)
-        }
-      }
-    })
-  }
-
-  /**
-   * 重写元素的一些方法，以支持 Label 的拖拽、编辑等
-   * @param element
-   */
-  private rewriteInnerMethods(element: GraphElement) {
-    // 重写 edgeModel/nodeModel moveText 方法，在 move text 时，以相同的逻辑移动 label
-    element.moveText = (deltaX: number, deltaY: number) => {
-      if (!element.text) return
-      const {
-        text: { x, y, value, draggable, editable },
-      } = element
-
-      element.text = {
-        value,
-        editable,
-        draggable,
-        x: x + deltaX,
-        y: y + deltaY,
-      }
-      const properties = cloneDeep(element.getProperties())
-      // 重新计算新的 label 位置信息
-      if (isArray(properties._label)) {
-        const nextLabel = map(properties._label as LabelConfig[], (label) => {
-          return {
-            ...label,
-            x: label.x + deltaX,
-            y: label.y + deltaY,
-          }
-        })
-        element?.setProperty('_label', nextLabel)
-      }
-    }
-
-    // TODO: others methods ???
-  }
-
-  private rewriteShortcut() {
-    const { keyboard, graphModel } = this.lf
-    const {
-      options: { keyboard: keyboardOptions },
-    } = keyboard
-    keyboard.off(['backspace'])
-    keyboard.on(['backspace'], () => {
-      if (!keyboardOptions?.enabled) return true
-      if (graphModel.textEditElement) return true
-      const elements = graphModel.getSelectElements(true)
-      this.lf.clearSelectElements()
-      const {
-        graphModel: { editConfigModel },
-      } = this.lf
-      elements.edges.forEach((edge) => {
-        const { properties } = edge
-        if (
-          properties &&
-          !isEmpty(properties._label) &&
-          editConfigModel.textMode === TextMode.LABEL
-        ) {
-          const newLabelList = properties._label.filter(
-            (label) => !label.isSelected,
-          )
-          // 如果两个labelList长度不一致，说明有选中的元素，此时backspace做的动作是删除label
-          if (!isEqual(newLabelList.length, properties._label.length)) {
-            const edgeModel = graphModel.getEdgeModelById(edge.id)
-            edgeModel?.setProperty('_label', newLabelList)
-            return
-          }
-        }
-        edge.id && this.lf.deleteEdge(edge.id)
-      })
-      elements.nodes.forEach((node) => {
-        const { properties } = node
-        if (
-          properties &&
-          !isEmpty(properties._label) &&
-          editConfigModel.textMode === TextMode.LABEL
-        ) {
-          const newLabelList = properties._label.filter(
-            (label) => !label.isSelected,
-          )
-          if (!isEqual(newLabelList.length, properties._label.length)) {
-            const nodeModel = graphModel.getNodeModelById(node.id)
-            nodeModel?.setProperty('_label', newLabelList)
-            return
-          }
-        }
-        node.id && this.lf.deleteNode(node.id)
-      })
-      return false
-    })
-  }
-
-  /**
-   * 更新当前渲染使用的 Text or Label 模式
-   */
-  updateTextMode(textMode: TextMode) {
-    const {
-      graphModel: { editConfigModel },
-    } = this.lf
-    if (textMode === editConfigModel.textMode) return
-
-    editConfigModel.updateTextMode(textMode)
-    if (textMode === TextMode.LABEL) {
-      this.lf.tool.enableTool(LabelOverlay.toolName)
-      this.lf.tool.disableTool('text-edit-tool')
-    } else if (textMode === TextMode.TEXT) {
-      this.lf.tool.enableTool('text-edit-tool')
-      this.lf.tool.disableTool(LabelOverlay.toolName)
-    }
-  }
-
-  render() {}
-
-  destroy() {}
-}
-
-export default Label