@logicflow/extension 2.0.0-beta.5 → 2.0.0-beta.7

package/src/materials/group/index.ts

@@ -1,4 +1,4 @@
-import { forEach } from 'lodash-es'
+import { forEach, isEmpty, isObject } from 'lodash-es'
 import LogicFlow, {
   BaseEdgeModel,
   BaseNodeModel,
@@ -12,6 +12,7 @@ import EdgeConfig = LogicFlow.EdgeConfig
 import NodeData = LogicFlow.NodeData
 import Point = LogicFlow.Point
 import BoxBoundsPoint = Model.BoxBoundsPoint
+import NodeConfig = LogicFlow.NodeConfig
 
 const DEFAULT_TOP_Z_INDEX = -1000
 const DEFAULT_BOTTOM_Z_INDEX = -10000
@@ -40,7 +41,7 @@ export class Group {
       ) as GroupNodeModel
       if (groupModel && groupModel.isRestrict) {
         // 如果移动的节点存在分组中，且这个分组禁止子节点移出去。
-        const { x1, y1, x2, y2 } = model.getBounds()
+        const { minX: x1, minY: y1, maxX: x2, maxY: y2 } = model.getBounds()
         return groupModel.isAllowMoveTo({
           x1: x1 + deltaX,
           y1: y1 + deltaY,
@@ -104,18 +105,18 @@ export class Group {
         this.createEdgeModel(edge, nodeIdMap, distance)
       })
       // 构建的时候直接偏移，这里不需要再进行再度偏移
-      // groupInnerChildren.nodes.forEach(node => this.translationNodeData(node, distance));
-      // groupInnerChildren.edges.forEach(edge => this.translationEdgeData(edge, distance));
+      // groupInnerChildren.nodes.forEach(node => this.translateNodeData(node, distance));
+      // groupInnerChildren.edges.forEach(edge => this. translateEdgeData(edge, distance));
 
       // 最外层的edges继续执行创建edgeModel的流程
-      // 由于最外层会调用translationEdgeData()，因此这里不用传入distance进行偏移
+      // 由于最外层会调用 translateEdgeData()，因此这里不用传入distance进行偏移
       forEach(selectedEdges, (edge) => {
         const edgeModel = this.createEdgeModel(edge, nodeIdMap, 0)
         elements.edges.push(edgeModel)
       })
 
       // 返回elements进行选中效果，即触发element.selectElementById()
-      // shortcut.ts也会对最外层的nodes和edges进行偏移，即translationNodeData()
+      // shortcut.ts也会对最外层的nodes和edges进行偏移，即translateNodeData()
       return elements
     }
   }
@@ -142,32 +143,25 @@ export class Group {
           y,
           properties,
           type,
-          text,
           rotate,
           children,
           // incoming,
           // outgoing,
         } = childNodeModel
+        const nodeConfig: NodeConfig = {
+          x: x + distance,
+          y: y + distance,
+          properties,
+          type,
+          rotate,
+          // 如果不传递type，会自动触发NODE_ADD
+          // 有概率触发appendToGroup
+        }
 
         const eventType =
           EventType.NODE_GROUP_COPY || ('node:group-copy-add' as EventType)
-        const newChildModel = lf.addNode(
-          {
-            x: x + distance,
-            y: y + distance,
-            properties,
-            type,
-            text: {
-              ...text,
-              x: text.x + distance,
-              y: text.y + distance,
-            },
-            rotate,
-            // 如果不传递type，会自动触发NODE_ADD
-            // 有概率触发appendToGroup
-          },
-          eventType,
-        )
+        const newChildModel = lf.addNode(nodeConfig, eventType)
+
         ;(current as GroupNodeModel).addChild(newChildModel.id)
         nodeIdMap[childId] = newChildModel.id
         nodesArray.push(newChildModel)
@@ -220,7 +214,7 @@ export class Group {
     if (nodeIdMap[sourceId]) sourceId = nodeIdMap[sourceId]
     if (nodeIdMap[targetId]) targetId = nodeIdMap[targetId]
     const { type, startPoint, endPoint, pointsList, text } = edge
-    // ====== 仿造shortcut.ts的translationEdgeData()逻辑 ======
+    // ====== 仿造shortcut.ts的 translateEdgeData()逻辑 ======
     const newStartPoint = {
       x: (startPoint?.x || 0) + distance,
       y: (startPoint?.y || 0) + distance,
@@ -237,25 +231,26 @@ export class Group {
         return point
       })
     }
-    const newText = text
-    if (text && typeof text !== 'string') {
-      ;(newText as { x: number; y: number; value: string }).x =
-        text.x + distance
-      ;(newText as { x: number; y: number; value: string }).y =
-        text.y + distance
-    }
-    // ====== 仿造shortcut.ts的translationEdgeData()逻辑 ======
-
-    // 简化复制时的参数传入，防止创建出两个edge属于同个group这种情况
-    return lf.graphModel.addEdge({
+    const edgeConfig: EdgeConfig = {
       type,
       startPoint: newStartPoint,
       endPoint: newEndPoint,
       sourceNodeId: sourceId,
       targetNodeId: targetId,
       pointsList: newPointsList,
-      text: newText,
-    })
+    }
+
+    if (isObject(text) && !isEmpty(text)) {
+      edgeConfig.text = {
+        ...text,
+        x: text?.x + distance,
+        y: text?.y + distance,
+      }
+    }
+    // ====== 仿造shortcut.ts的 translateEdgeData()逻辑 ======
+
+    // 简化复制时的参数传入，防止创建出两个edge属于同个group这种情况
+    return lf.graphModel.addEdge(edgeConfig)
   }
 
   /**

package/src/style/index.less

@@ -1,3 +1,8 @@
+@import url('medium-editor/dist/css/medium-editor.min.css');
+//@import url('medium-editor/dist/css/themes/bootstrap.min.css');
+@import url('medium-editor/dist/css/themes/beagle.min.css');
+@import url('vanilla-picker/dist/vanilla-picker.csp.css');
+
 .lf-control {
   position: absolute;
   top: 0;
@@ -253,3 +258,71 @@
 .lf-mindmap_addIcon {
   margin-top: 10px;
 }
+
+/* label */
+.lf-label-overlay {
+  width: 0;
+  height: 0;
+  overflow: visible;
+
+  .lf-label-editor {
+    //box-sizing: content-box;
+    padding: 4px;
+    background: #fff;
+    border-radius: 5px;
+
+    &-container {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: visible;
+      text-align: center;
+
+      p {
+        margin: 0;
+      }
+    }
+
+    &-dragging {
+      cursor: move;
+    }
+
+    &-editing {
+      border: 2px solid #275dc5;
+      outline: none;
+      cursor: text;
+    }
+
+    &-hover {
+      border: 2px dashed #acacac;
+    }
+
+    // textOverflowMode
+    &-clip {
+      width: 100px; /* 根据需要调整宽度 */
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: clip;
+    }
+
+    &-ellipsis {
+      width: 100px; /* 根据需要调整宽度 */
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    &-wrap {
+      width: 100px; /* 根据需要调整宽度 */
+      white-space: normal;
+      overflow-wrap: break-word; /* 允许单词内换行 */
+    }
+
+    &-nowrap {
+      width: 100px; /* 根据需要调整宽度 */
+      overflow: visible;
+      white-space: nowrap;
+    }
+  }
+}

package/src/style/raw.ts

@@ -4,7 +4,10 @@
  * Auto generated file, do not modify it!
  */
 
-export const content = `.lf-control {
+export const content = `@import url('medium-editor/dist/css/medium-editor.min.css');
+@import url('medium-editor/dist/css/themes/beagle.min.css');
+@import url('vanilla-picker/dist/vanilla-picker.csp.css');
+.lf-control {
   position: absolute;
   top: 0;
   right: 10px;
@@ -219,4 +222,64 @@ export const content = `.lf-control {
 .lf-mindmap_addIcon {
   margin-top: 10px;
 }
+/* label */
+.lf-label-overlay {
+  width: 0;
+  height: 0;
+  overflow: visible;
+}
+.lf-label-overlay .lf-label-editor {
+  padding: 4px;
+  background: #fff;
+  border-radius: 5px;
+}
+.lf-label-overlay .lf-label-editor-container {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: visible;
+  text-align: center;
+}
+.lf-label-overlay .lf-label-editor-container p {
+  margin: 0;
+}
+.lf-label-overlay .lf-label-editor-dragging {
+  cursor: move;
+}
+.lf-label-overlay .lf-label-editor-editing {
+  border: 2px solid #275dc5;
+  outline: none;
+  cursor: text;
+}
+.lf-label-overlay .lf-label-editor-hover {
+  border: 2px dashed #acacac;
+}
+.lf-label-overlay .lf-label-editor-clip {
+  width: 100px;
+  /* 根据需要调整宽度 */
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: clip;
+}
+.lf-label-overlay .lf-label-editor-ellipsis {
+  width: 100px;
+  /* 根据需要调整宽度 */
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.lf-label-overlay .lf-label-editor-wrap {
+  width: 100px;
+  /* 根据需要调整宽度 */
+  white-space: normal;
+  overflow-wrap: break-word;
+  /* 允许单词内换行 */
+}
+.lf-label-overlay .lf-label-editor-nowrap {
+  width: 100px;
+  /* 根据需要调整宽度 */
+  overflow: visible;
+  white-space: nowrap;
+}
 `

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

@@ -136,7 +136,6 @@ export class FlowPath {
     // 由于循环路径不包括开始，所以存在重复的情况，此处去重。
     const LoopSet = new Set()
     pathElements.forEach((elements) => {
-      console.log('elements', elements)
       const routeId = this.getNewId('path')
       const name = this.getNewId('路径')
       const isLoop = this.isLoopPath(elements)

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