@logicflow/extension 2.0.0-beta.4 → 2.0.0-beta.6

package/src/tools/label/Label.tsx

@@ -0,0 +1,297 @@
+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
+}
+
+@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,
+    }
+  }
+
+  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: MouseEvent) => {
+    const { label, graphModel } = this.props
+    const {
+      editConfigModel: { nodeTextDraggable },
+    } = graphModel
+
+    // 当 label 允许拖拽 且不处于拖拽状态时， StepDrag 开启拖拽
+    if ((label.draggable ?? nodeTextDraggable) && !this.state.isDragging) {
+      this.setState({ isDragging: true })
+      this.stepDrag.handleMouseDown(e)
+    }
+  }
+  handleDragging = ({ deltaX, deltaY }: IDragParams) => {
+    const { label, element, graphModel } = this.props
+
+    // DONE: 添加缩放时拖拽的逻辑，对 deltaX 和 deltaY 进行按比例缩放
+    const { transformModel } = graphModel
+    const [curDeltaX, curDeltaY] = transformModel.fixDeltaXY(deltaX, deltaY)
+
+    // DONE：更新 label 位置，触发 LABEL:DRAG 事件，并抛出相关的数据
+    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,
+      x: target.x + curDeltaX,
+      y: target.y + curDeltaY,
+    }
+    const targetElem = graphModel.getElement(element.id)
+    targetElem?.setProperty('_label', elementLabel)
+
+    graphModel.eventCenter.emit('label:drag', {
+      data: label.getData(),
+      model: label,
+    })
+  }
+  handleDragEnd = () => {
+    this.setState({ isDragging: false })
+  }
+
+  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,
+    })
+  }
+
+  // 重新计算 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 处于编辑态，则结束编辑态
+      if (this.state.isEditing) {
+        this.setState({ isEditing: false })
+
+        const value = this.textRef.current?.innerText ?? ''
+        const content = this.textRef.current?.innerHTML ?? ''
+
+        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,
+          value,
+          content,
+        }
+
+        const targetElem = graphModel.getElement(element.id)
+        targetElem?.setProperty('_label', elementLabel)
+
+        element.setElementState(ElementState.DEFAULT)
+      }
+      if (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, 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}
+        onMouseDown={this.handleMouseDown}
+        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,
+            [`lf-label-editor-${textOverflowMode}`]: !isEditing,
+          })}
+          style={{
+            maxWidth: `${maxLabelWidth}px`,
+            width: `${maxLabelWidth}px`,
+            ...style,
+          }}
+          dangerouslySetInnerHTML={{ __html: content }}
+        ></div>
+      </div>
+    )
+  }
+}
+
+export default Label

package/src/tools/label/LabelModel.ts

@@ -0,0 +1,82 @@
+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,
+      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

package/src/tools/label/LabelOverlay.tsx

@@ -0,0 +1,159 @@
+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, ColorPickerButton } 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 ColorPickerButton(),
+        },
+      }),
+    )
+
+    // 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 ColorPickerButton(),
+          },
+        }),
+      )
+    }
+  }
+
+  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

@@ -0,0 +1,42 @@
+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)
+}