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

package/src/tools/label/index.ts

@@ -0,0 +1,401 @@
+import LogicFlow, { createUuid, GraphModel, TextMode } from '@logicflow/core'
+import { cloneDeep, forEach, isArray, isObject, map } from 'lodash-es'
+import LabelOverlay, { LabelConfigType } from './LabelOverlay'
+
+import Position = LogicFlow.Position
+import NodeData = LogicFlow.NodeData
+import EdgeData = LogicFlow.EdgeData
+import Extension = LogicFlow.Extension
+import LabelConfig = LogicFlow.LabelConfig
+import GraphElement = LogicFlow.GraphElement
+import {
+  BBoxInfo,
+  calcPointAfterResize,
+  rotatePointAroundCenter,
+} from './utils'
+
+// 类型定义，如果 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) => {
+        const { x, y } = config
+        console.log('x, y --->>>', x, y)
+
+        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: textEdit && editable,
+        draggable: 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 { 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,
+    }
+
+    if (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 的拖拽、编辑等
+   * @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,
+          }
+        })
+        // console.log('Label --->>>', nextLabel)
+        element?.setProperty('_label', nextLabel)
+      }
+    }
+
+    // TODO: others methods ???
+  }
+
+  // private rewriteShortcut() {}
+
+  /**
+   * 更新当前渲染使用的 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

package/src/tools/label/mediumEditor.ts

@@ -0,0 +1,94 @@
+import MediumEditor from 'medium-editor'
+import Picker from 'vanilla-picker'
+import rangy from 'rangy'
+import 'rangy/lib/rangy-classapplier'
+
+export const defaultOptions = {
+  toolbar: {
+    allowMultiParagraphSelection: true,
+    buttons: [
+      'bold',
+      'colorpicker',
+      'italic',
+      'underline',
+      'strikethrough',
+      'quote',
+      'justifyLeft',
+      'justifyCenter',
+      'justifyRight',
+      'justifyFull',
+      'superscript',
+      'subscript',
+      'orderedlist',
+      'unorderedlist',
+      'pre',
+      'removeFormat',
+      'outdent',
+      'indent',
+      'h2',
+      'h3',
+    ],
+    standardizeSelectionStart: false,
+    updateOnEmptySelection: false,
+  },
+
+  placeholder: {
+    text: '请输入内容',
+    hideOnClick: true,
+  },
+  disableEditing: true,
+}
+
+export const ColorPickerButton = MediumEditor.extensions.button.extend({
+  name: 'colorpicker',
+  tagNames: ['mark'],
+  contentDefault: '<b>Color</b>',
+  aria: 'Color Picker',
+  action: 'colorPicker',
+  init: function () {
+    rangy.init()
+    MediumEditor.extensions.button.prototype.init.call(this)
+    this.colorPicker = new Picker({
+      parent: this.button,
+      color: '#000',
+      onDone: (res) => {
+        if (this.coloredText && this.coloredText.isAppliedToSelection()) {
+          this.coloredText.undoToSelection()
+        }
+        this.coloredText = rangy.createClassApplier('colored', {
+          elementTagName: 'span',
+          elementProperties: {
+            style: {
+              color: res.hex,
+            },
+          },
+          normalize: true,
+        })
+        this.coloredText.toggleSelection()
+        this.base.checkContentChanged()
+        this.setInactive()
+      },
+    })
+  },
+  getButton: function () {
+    return this.button
+  },
+  handleClick: function () {
+    this.setActive()
+    this.colorPicker.show()
+  },
+  isAlreadyApplied: function (node) {
+    return node.nodeName.toLowerCase() === 'mark'
+  },
+  isActive: function () {
+    return this.button.classList.contains('medium-editor-button-active')
+  },
+  setInactive: function () {
+    this.button.classList.remove('medium-editor-button-active')
+  },
+  setActive: function () {
+    this.button.classList.add('medium-editor-button-active')
+  },
+})
+
+export { MediumEditor }