@logicflow/core 1.2.27 → 2.0.0-beta.1

package/src/tool/MultipleSelectTool.tsx

@@ -0,0 +1,132 @@
+import { Component } from 'preact/compat'
+import { Model, observer } from '..'
+import LogicFlow from '../LogicFlow'
+import { StepDrag, IDragParams } from '../util'
+import { ElementType, EventType } from '../constant'
+import { getNodeOutline, getEdgeOutline } from '../algorithm/outline'
+import { IToolProps } from './tool'
+
+import GraphData = LogicFlow.GraphData
+
+@observer
+export default class MultipleSelect extends Component<IToolProps> {
+  static toolName = 'multipleSelect'
+  stepDrag: StepDrag
+
+  constructor(props: IToolProps) {
+    super(props)
+    const {
+      graphModel: { gridSize, eventCenter },
+    } = props
+    this.stepDrag = new StepDrag({
+      onDragging: this.onDragging,
+      step: gridSize,
+      eventType: 'SELECTION',
+      eventCenter,
+    })
+  }
+
+  handleMouseDown = (ev: MouseEvent) => {
+    this.stepDrag.handleMouseDown(ev)
+  }
+  // 使多选区域的滚轮事件可以触发画布的滚轮事件
+  handleWheelEvent = (ev: WheelEvent) => {
+    ev.preventDefault()
+    const { deltaX, deltaY, clientX, clientY, ctrlKey } = ev
+    const newEvent = new WheelEvent('wheel', {
+      deltaX,
+      deltaY,
+      clientX,
+      clientY,
+      ctrlKey,
+    })
+    this.props.logicFlow.container
+      ?.querySelector('.lf-canvas-overlay[name="canvas-overlay"]')
+      ?.dispatchEvent(newEvent)
+  }
+  onDragging = ({ deltaX, deltaY }: IDragParams) => {
+    const { graphModel, logicFlow } = this.props
+    const { SCALE_X, SCALE_Y } = logicFlow.getTransform()
+    const selectElements = graphModel.getSelectElements(true)
+    graphModel.moveNodes(
+      selectElements.nodes.map((node) => node.id),
+      deltaX / SCALE_X,
+      deltaY / SCALE_Y,
+    )
+  }
+  handleContextMenu = (ev: MouseEvent) => {
+    ev.preventDefault()
+    const {
+      graphModel,
+      graphModel: { eventCenter, selectElements },
+    } = this.props
+    const position = graphModel.getPointByClient({
+      x: ev.clientX,
+      y: ev.clientY,
+    })
+    const selectGraphData: GraphData = {
+      nodes: [],
+      edges: [],
+    }
+    const models = [...selectElements.values()]
+    models.forEach((model) => {
+      if (model.BaseType === ElementType.NODE) {
+        selectGraphData.nodes.push(model.getData())
+      }
+      if (model.BaseType === ElementType.EDGE) {
+        selectGraphData.edges.push(model.getData())
+      }
+    })
+    eventCenter.emit(EventType.SELECTION_CONTEXTMENU, {
+      data: selectGraphData,
+      e: ev,
+      position,
+    })
+  }
+
+  render() {
+    const {
+      graphModel: { selectElements, transformModel },
+    } = this.props
+    const { SCALE_X, SCALE_Y } = this.props.logicFlow.getTransform()
+    if (selectElements.size <= 1) return
+    let x = Number.MAX_SAFE_INTEGER
+    let y = Number.MAX_SAFE_INTEGER
+    let x1 = Number.MIN_SAFE_INTEGER
+    let y1 = Number.MIN_SAFE_INTEGER
+    selectElements.forEach((element) => {
+      let outline: Model.OutlineInfo | undefined
+      if (element.BaseType === ElementType.NODE) {
+        outline = getNodeOutline(element)
+      }
+      if (element.BaseType === ElementType.EDGE) {
+        outline = getEdgeOutline(element)
+      }
+
+      if (outline !== undefined) {
+        x = Math.min(x, outline.x)
+        y = Math.min(y, outline.y)
+        x1 = Math.max(x1, outline.x1)
+        y1 = Math.max(y1, outline.y1)
+      }
+    })
+    ;[x, y] = transformModel.CanvasPointToHtmlPoint([x, y])
+    ;[x1, y1] = transformModel.CanvasPointToHtmlPoint([x1, y1])
+    const style = {
+      left: `${x - (20 * SCALE_X) / 2}px`,
+      top: `${y - (20 * SCALE_Y) / 2}px`,
+      width: `${x1 - x + 20 * SCALE_X}px`,
+      height: `${y1 - y + 20 * SCALE_Y}px`,
+      'border-width': `${2 * SCALE_X}px`,
+    }
+    return (
+      <div
+        className="lf-multiple-select"
+        style={style}
+        onMouseDown={this.handleMouseDown}
+        onContextMenu={this.handleContextMenu}
+        onWheel={this.handleWheelEvent}
+      />
+    )
+  }
+}

package/src/tool/TextEditTool.tsx

@@ -0,0 +1,193 @@
+import { createRef, Component } from 'preact'
+import { ElementState, observer } from '..'
+import { ElementType, EventType, ModelType } from '../constant'
+import { IToolProps } from './tool'
+
+type IState = {
+  style: {
+    left: number
+    top: number
+  }
+}
+
+@observer
+export class TextEditTool extends Component<IToolProps, IState> {
+  static toolName = 'textEdit'
+  ref = createRef()
+  __prevText = {
+    type: '',
+    text: '',
+    id: '',
+  }
+
+  constructor(props: IToolProps) {
+    super(props)
+    this.state = {
+      style: {
+        left: 0,
+        top: 0,
+      },
+    }
+  }
+
+  static getDerivedStateFromProps(props: IToolProps): IState | null {
+    const { textEditElement, graphModel } = props
+    const { transformModel, theme } = graphModel
+    const { inputText } = theme
+
+    let autoStyle
+    if (textEditElement) {
+      // 由于边上的文本是依据显示的时候动态计算出来的
+      // 所以不能在边创建的时候就初始化文本位置。
+      // 而是在边上新建文本的时候创建。
+      if (!textEditElement.text?.value) {
+        if (textEditElement.BaseType === ElementType.EDGE) {
+          // textEditElement = textEditElement as BaseEdgeModel
+          const textConfig = textEditElement.text
+          const { x, y } = textEditElement.textPosition
+          textConfig.x = x
+          textConfig.y = y
+          textEditElement.setText(textConfig)
+        }
+      }
+      // 自动换行节点边通用样式
+      const commonAutoStyle = {
+        resize: 'auto',
+        whiteSpace: 'normal',
+        wordBreak: 'break-all',
+      }
+      if (textEditElement.BaseType === ElementType.EDGE) {
+        // 如果边文案自动换行, 设置编辑框宽度
+        const {
+          edgeText: { overflowMode, lineHeight, wrapPadding, textWidth },
+        } = theme
+        if (textWidth && overflowMode === 'autoWrap') {
+          autoStyle = {
+            ...commonAutoStyle,
+            width: textWidth,
+            minWidth: textWidth,
+            lineHeight,
+            padding: wrapPadding,
+          }
+        }
+      } else if (textEditElement.BaseType === ElementType.NODE) {
+        // 如果节点文案自动换行, 设置编辑框宽度
+        const {
+          nodeText: { overflowMode, lineHeight, wrapPadding, textWidth },
+        } = theme
+        const { width, modelType, textWidth: nodeTextWidth } = textEditElement
+
+        const finalTextWidth = nodeTextWidth || textWidth || width
+        // 文本节点没有默认宽高，只有在设置了textWidth之后才能进行自动换行
+        if (
+          (modelType !== ModelType.TEXT_NODE && overflowMode === 'autoWrap') ||
+          (modelType === ModelType.TEXT_NODE && textWidth)
+        ) {
+          autoStyle = {
+            ...commonAutoStyle,
+            width: finalTextWidth,
+            minWidth: finalTextWidth,
+            lineHeight,
+            padding: wrapPadding,
+          }
+        }
+      }
+
+      const { x, y } = textEditElement.text
+      const [left, top] = transformModel.CanvasPointToHtmlPoint([x, y])
+      return {
+        style: {
+          left,
+          top,
+          ...autoStyle,
+          ...inputText,
+        },
+      }
+    }
+
+    return null
+  }
+
+  componentDidUpdate() {
+    const { graphModel } = this.props
+    if (this.ref.current) {
+      this.ref.current.focus()
+      this.placeCaretAtEnd(this.ref.current)
+    }
+    if (this.__prevText.id !== '') {
+      const { text, id } = this.__prevText
+      graphModel.updateText(id, text)
+      graphModel.eventCenter.emit(EventType.TEXT_UPDATE, {
+        data: { ...this.__prevText },
+      })
+      this.__prevText.id = ''
+      this.__prevText.text = ''
+      this.__prevText.type = ''
+    }
+  }
+
+  keyupHandler = (ev: KeyboardEvent) => {
+    const {
+      graphModel: { textEditElement },
+    } = this.props
+    // 按下alt+enter表示输入完成
+    if (ev.key === 'Enter' && ev.altKey) {
+      textEditElement?.setElementState(ElementState.DEFAULT)
+    }
+  }
+  inputHandler = (ev: any) => {
+    const { innerText: value } = ev.target as HTMLElement
+    const {
+      graphModel: { textEditElement },
+    } = this.props
+    if (textEditElement) {
+      this.__prevText = {
+        type: textEditElement.type,
+        text: value.replace(/(\r\n)+$|(\n)+$/, ''), // fix #488: 文本后面的换行符不保留
+        id: textEditElement.id,
+      }
+    }
+  }
+  // fix: #587 #760
+  keydownHandler = (ev: any) => {
+    ev.stopPropagation()
+  }
+
+  placeCaretAtEnd(el: any) {
+    if (
+      window.getSelection !== undefined &&
+      document.createRange !== undefined
+    ) {
+      const range = document.createRange()
+      range.selectNodeContents(el)
+      range.collapse(false)
+      const sel = window.getSelection()
+      sel?.removeAllRanges()
+      sel?.addRange(range)
+    }
+  }
+
+  render() {
+    const {
+      graphModel: { textEditElement },
+    } = this.props
+    const { style } = this.state
+    return textEditElement ? (
+      <div
+        contentEditable
+        className="lf-text-input"
+        style={style}
+        ref={this.ref}
+        key={textEditElement.id}
+        onKeyUp={this.keyupHandler}
+        onKeyDown={this.keydownHandler}
+        onKeyPress={this.keydownHandler}
+        onInput={this.inputHandler}
+      >
+        {textEditElement.text?.value}
+      </div>
+    ) : null
+  }
+}
+
+export default TextEditTool

package/src/tool/index.ts

@@ -0,0 +1,2 @@
+export * from './tool'
+export * from './snapline'

package/src/tool/snapline.ts

@@ -0,0 +1,17 @@
+import EventEmitter from '../event/eventEmitter'
+import SnaplineModel from '../model/SnaplineModel'
+
+export function snapline(
+  eventCenter: EventEmitter,
+  snaplineModel: SnaplineModel,
+): void {
+  // 节点拖动时启动对齐线计算
+  eventCenter.on('node:mousemove', ({ data }: any) => {
+    // TODO: 取消注释，定义 data 类型，解决编译问题
+    snaplineModel.setNodeSnapLine(data)
+  })
+  // 节点拖动结束时，对齐线消失
+  eventCenter.on('node:mouseup', () => {
+    snaplineModel.clearSnapline()
+  })
+}

package/src/tool/tool.ts

@@ -0,0 +1,66 @@
+import { Component } from 'preact/compat'
+import { VNode } from 'preact'
+import TextEdit from './TextEditTool'
+import MultipleSelect from './MultipleSelectTool'
+import LogicFlow from '../LogicFlow'
+import { GraphModel, BaseEdgeModel, BaseNodeModel } from '../model'
+import { ElementState, EventType } from '../constant'
+
+export type IToolProps = {
+  textEditElement?: BaseNodeModel | BaseEdgeModel
+  graphModel: GraphModel
+  logicFlow: LogicFlow
+}
+
+type ToolConstructor = new (props: IToolProps) => Component<IToolProps>
+
+export class Tool {
+  tools?: Component[]
+  components?: VNode<IToolProps>[]
+  toolMap = new Map<string, ToolConstructor>()
+  instance: LogicFlow
+
+  constructor(instance: LogicFlow) {
+    this.instance = instance
+    if (!this.isDisabledTool(TextEdit.toolName)) {
+      this.registerTool(TextEdit.toolName, TextEdit)
+    }
+    if (!this.isDisabledTool(MultipleSelect.toolName)) {
+      this.registerTool(MultipleSelect.toolName, MultipleSelect)
+    }
+    // @see https://github.com/didi/LogicFlow/issues/152
+    const { graphModel } = instance
+    const { eventCenter } = graphModel
+    eventCenter.on(
+      `${EventType.GRAPH_TRANSFORM},${EventType.NODE_CLICK},${EventType.BLANK_CLICK} `,
+      () => {
+        const {
+          textEditElement,
+          editConfigModel: { edgeTextEdit, nodeTextEdit },
+        } = graphModel
+        // fix #826, 保留之前的文本可以编辑点击空白才设置为不可编辑。如果以后有其他需求再改。
+        if ((edgeTextEdit || nodeTextEdit) && textEditElement) {
+          graphModel.textEditElement?.setElementState(ElementState.DEFAULT)
+        }
+      },
+    )
+  }
+
+  private isDisabledTool(toolName) {
+    return this.instance.options.disabledTools?.indexOf(toolName) !== -1
+  }
+
+  registerTool(name: string, component: ToolConstructor) {
+    this.toolMap.set(name, component)
+  }
+
+  getTools() {
+    return Array.from(this.toolMap.values())
+  }
+
+  getInstance() {
+    return this.instance
+  }
+}
+
+export default Tool

package/src/typings.d.ts

@@ -0,0 +1,5 @@
+declare module 'mobx-preact' {
+  import { ComponentConstructor } from 'preact/compat'
+  type Component<P = any> = ComponentConstructor<P>
+  export function observer<T extends Component>(target: T): T
+}

package/src/util/animation.ts

@@ -0,0 +1,29 @@
+import { cloneDeep, merge } from 'lodash-es'
+import { Options } from '../options'
+
+import AnimationConfig = Options.AnimationConfig
+
+export const defaultAnimationOffConfig = {
+  node: false,
+  edge: false,
+}
+
+export const defaultAnimationOnConfig = {
+  node: true,
+  edge: true,
+}
+
+export const setupAnimation = (
+  config?: boolean | Partial<AnimationConfig>,
+): AnimationConfig => {
+  if (!config || typeof config === 'boolean') {
+    return config === true
+      ? cloneDeep(defaultAnimationOnConfig)
+      : cloneDeep(defaultAnimationOffConfig)
+  }
+
+  // 当传入的是对象时，将其与默认关合并
+  return merge(cloneDeep(defaultAnimationOffConfig), config)
+}
+
+export const updateAnimation = setupAnimation

package/src/util/browser.ts

@@ -0,0 +1,4 @@
+import { get } from 'lodash-es'
+
+export const isIe =
+  get(window, 'navigator.userAgent', '').match(/MSIE|Trident/) !== null

package/src/util/compatible.ts

@@ -0,0 +1,15 @@
+// import { cloneDeep } from 'lodash-es'
+/**
+ * 对数据实现兼容处理。
+ *
+ * Vue 中的 data 会进行 Observe，深拷贝的原始数据对象
+ */
+export function formatData<T>(data: T): T {
+  try {
+    // WARNING: cloneDeep虽然也会将Observe对象转换为plain对象，但是不会像JSON.parse那样，会将undefined去掉。
+    // 会导致后面的pick因为存在pick覆盖默认值的情况。
+    return JSON.parse(JSON.stringify(data))
+  } catch {
+    return data
+  }
+}

package/src/util/drag.ts

@@ -0,0 +1,186 @@
+import { noop } from 'lodash-es'
+import { Model } from '../model'
+import { EventType } from '../constant'
+import EventEmitter from '../event/eventEmitter'
+
+// TODO：这种方式在同构项目中，会报错，该如何解决（是否要求用户控制在浏览器环境时才初始化）
+// const DOC: any = window?.document
+const LEFT_MOUSE_BUTTON_CODE = 0
+
+export type IDragParams = {
+  deltaX: number
+  deltaY: number
+  event: MouseEvent | null
+  [key: string]: unknown
+}
+
+export type ICreateDragParams = {
+  onDragStart?: (params: Partial<IDragParams>) => void
+  onDragging?: (param: IDragParams) => void
+  onDragEnd?: (param: Partial<IDragParams>) => void
+  step?: number
+  isStopPropagation?: boolean
+}
+
+export type IStepperDragProps = {
+  eventType?: 'NODE' | 'BLANK' | 'SELECTION' | 'ADJUST_POINT' | ''
+  eventCenter?: EventEmitter
+  model?: Model.BaseModel | null
+  data?: Record<string, unknown>
+  [key: string]: unknown
+} & Partial<ICreateDragParams>
+
+// 支持拖拽的时候，按照指定step进行。
+// 因为在绘制的过程中因为放大缩小，移动的真实的step则是变化的。
+export class StepDrag {
+  onDragStart: (params: Partial<IDragParams>) => void
+  onDragging: (params: IDragParams) => void
+  onDragEnd: (params: Partial<IDragParams>) => void
+
+  step: number
+  isStopPropagation: boolean
+  eventType: 'NODE' | 'BLANK' | 'SELECTION' | 'ADJUST_POINT' | ''
+  eventCenter?: EventEmitter
+  model?: Model.BaseModel | null
+  data?: Record<string, unknown>
+
+  // 运行时
+  isDragging = false
+  isStartDragging = false
+
+  startX = 0
+  startY = 0
+  sumDeltaX = 0
+  sumDeltaY = 0
+
+  startTime?: number
+
+  constructor({
+    onDragStart = noop,
+    onDragging = noop,
+    onDragEnd = noop,
+    eventType = '',
+    eventCenter,
+    step = 1,
+    isStopPropagation = true,
+    model,
+    data,
+  }: IStepperDragProps) {
+    this.onDragStart = onDragStart
+    this.onDragging = onDragging
+    this.onDragEnd = onDragEnd
+    this.step = step
+    this.isStopPropagation = isStopPropagation
+    this.eventType = eventType
+    this.eventCenter = eventCenter
+    this.model = model
+    this.data = data
+  }
+
+  setStep(step: number) {
+    this.step = step
+  }
+
+  setModel(model: Model.BaseModel) {
+    this.model = model
+  }
+
+  handleMouseDown = (e: MouseEvent) => {
+    const DOC: any = window?.document
+    if (e.button !== LEFT_MOUSE_BUTTON_CODE) return
+    if (this.isStopPropagation) e.stopPropagation()
+    this.isStartDragging = true
+    this.startX = e.clientX
+    this.startY = e.clientY
+
+    DOC.addEventListener('mousemove', this.handleMouseMove, false)
+    DOC.addEventListener('mouseup', this.handleMouseUp, false)
+    const elementData = this.model?.getData()
+    this.eventCenter?.emit(EventType[`${this.eventType}_MOUSEDOWN`], {
+      e,
+      data: this.data || elementData,
+    })
+    this.startTime = new Date().getTime()
+  }
+
+  handleMouseMove = (e: MouseEvent) => {
+    if (this.isStopPropagation) e.stopPropagation()
+    if (!this.isStartDragging) return
+    this.sumDeltaX += e.clientX - this.startX
+    this.sumDeltaY += e.clientY - this.startY
+    this.startX = e.clientX
+    this.startY = e.clientY
+    if (
+      this.step <= 1 ||
+      Math.abs(this.sumDeltaX) > this.step ||
+      Math.abs(this.sumDeltaY) > this.step
+    ) {
+      const remainderX = this.sumDeltaX % this.step
+      const remainderY = this.sumDeltaY % this.step
+      const deltaX = this.sumDeltaX - remainderX
+      const deltaY = this.sumDeltaY - remainderY
+      this.sumDeltaX = remainderX
+      this.sumDeltaY = remainderY
+      const elementData = this.model?.getData()
+      /**
+       * 为了区分点击和拖动，在鼠标没有拖动时，不触发dragstart。
+       */
+      if (!this.isDragging) {
+        this.eventCenter?.emit(EventType[`${this.eventType}_DRAGSTART`], {
+          e,
+          data: this.data || elementData,
+        })
+        this.onDragStart({ event: e })
+      }
+      this.isDragging = true
+      // 为了让dragstart和drag不在同一个事件循环中，使drag事件放到下一个消息队列中。
+      Promise.resolve().then(() => {
+        this.onDragging({
+          deltaX,
+          deltaY,
+          event: e,
+        })
+        this.eventCenter?.emit(EventType[`${this.eventType}_MOUSEMOVE`], {
+          e,
+          data: this.data || elementData,
+        })
+        this.eventCenter?.emit(EventType[`${this.eventType}_DRAG`], {
+          e,
+          data: this.data || elementData,
+        })
+      })
+    }
+  }
+
+  handleMouseUp = (e: MouseEvent) => {
+    const DOC = window.document
+
+    this.isStartDragging = false
+    if (this.isStopPropagation) e.stopPropagation()
+    // fix #568: 如果onDragging在下一个事件循环中触发，而drop在当前事件循环，会出现问题。
+    Promise.resolve().then(() => {
+      DOC.removeEventListener('mousemove', this.handleMouseMove, false)
+      DOC.removeEventListener('mouseup', this.handleMouseUp, false)
+      const elementData = this.model?.getData()
+      this.eventCenter?.emit(EventType[`${this.eventType}_MOUSEUP`], {
+        e,
+        data: this.data || elementData,
+      })
+      if (!this.isDragging) return
+      this.isDragging = false
+      this.onDragEnd({ event: e })
+      this.eventCenter?.emit(EventType[`${this.eventType}_DROP`], {
+        e,
+        data: this.data || elementData,
+      })
+    })
+  }
+  cancelDrag = () => {
+    const DOC: any = window?.document
+
+    DOC.removeEventListener('mousemove', this.handleMouseMove, false)
+    DOC.removeEventListener('mouseup', this.handleMouseUp, false)
+    this.onDragEnd({ event: null })
+    this.isDragging = false
+  }
+}