@logicflow/core 2.2.0 → 2.2.1

package/src/tool/MultipleSelectTool.tsx

@@ -1,132 +0,0 @@
-import { Component } from 'preact/compat'
-import { IToolProps } from '.'
-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 GraphData = LogicFlow.GraphData
-
-@observer
-export default class MultipleSelect extends Component<IToolProps> {
-  static toolName = 'multiple-select-tool'
-  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: PointerEvent) => {
-    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.lf.container
-      ?.querySelector('.lf-canvas-overlay[name="canvas-overlay"]')
-      ?.dispatchEvent(newEvent)
-  }
-  onDragging = ({ deltaX, deltaY }: IDragParams) => {
-    const { graphModel, lf } = this.props
-    const { SCALE_X, SCALE_Y } = lf.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.lf.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}
-        onPointerDown={this.handleMouseDown}
-        onContextMenu={this.handleContextMenu}
-        onWheel={this.handleWheelEvent}
-      />
-    )
-  }
-}

package/src/tool/TextEditTool.tsx

@@ -1,193 +0,0 @@
-import { createRef, Component } from 'preact/compat'
-import { IToolProps } from '.'
-import { ElementState, observer } from '..'
-import { ElementType, EventType, ModelType } from '../constant'
-
-type IState = {
-  style: {
-    left: number
-    top: number
-  }
-}
-
-@observer
-export class TextEditTool extends Component<IToolProps, IState> {
-  static toolName = 'text-edit-tool'
-  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

@@ -1,101 +0,0 @@
-import { Component, ReactElement } from 'preact/compat'
-import { action, observable } from 'mobx'
-import { forEach } from 'lodash-es'
-import TextEdit from './TextEditTool'
-import MultipleSelect from './MultipleSelectTool'
-import LogicFlow from '../LogicFlow'
-import { ElementState, EventType } from '../constant'
-import { GraphModel, BaseEdgeModel, BaseNodeModel } from '../model'
-
-export type IToolProps = {
-  lf: LogicFlow
-  graphModel: GraphModel
-  textEditElement?: BaseNodeModel | BaseEdgeModel
-}
-
-type ToolConstructor = new (props: IToolProps) => Component<IToolProps>
-
-// 默认内置的工具
-const defaultTools = [TextEdit, MultipleSelect]
-
-export class Tool {
-  tools?: Component[]
-  components?: ReactElement<IToolProps>[]
-  @observable toolMap = new Map<string, ToolConstructor>()
-
-  disabledToolMap = new Map<string, ToolConstructor>()
-  instance: LogicFlow
-
-  constructor(instance: LogicFlow) {
-    this.instance = instance
-    forEach(defaultTools, (tool) => {
-      if (!this.isDisabled(tool.toolName)) {
-        this.registerTool(tool.toolName, tool)
-      }
-    })
-
-    // @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 isDisabled(toolName) {
-    return this.instance.options.disabledTools?.indexOf(toolName) !== -1
-  }
-
-  // 注册工具
-  registerTool(name: string, component: ToolConstructor) {
-    this.toolMap.set(name, component)
-  }
-
-  // 禁用工具
-  @action
-  disableTool(name: string): boolean | Error {
-    const tool = this.toolMap.get(name)
-    if (tool) {
-      this.disabledToolMap.set(name, tool)
-      this.toolMap.delete(name)
-      return true
-    }
-    throw new Error(`禁用失败，不存在名为 ${tool} 的工具`)
-  }
-
-  @action
-  enableTool(name: string): boolean | Error {
-    const tool = this.disabledToolMap.get(name)
-    if (tool) {
-      this.toolMap.set(name, tool)
-      this.disabledToolMap.delete(name)
-      return true
-    }
-    throw new Error(`不存在名为 ${tool} 的工具`)
-  }
-
-  getTools() {
-    return Array.from(this.toolMap.values())
-  }
-
-  getInstance() {
-    return this.instance
-  }
-
-  destroy() {
-    this.toolMap.clear()
-    this.disabledToolMap.clear()
-  }
-}
-
-export default Tool

package/src/typings.d.ts

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

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

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

package/src/util/compatible.ts

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

@@ -1,220 +0,0 @@
-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?: PointerEvent
-  [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'
-    | 'TEXT'
-    | 'LABEL'
-    | ''
-  eventCenter?: EventEmitter
-  model?: Model.BaseModel | unknown
-  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'
-    | 'TEXT'
-    | 'LABEL'
-    | ''
-  eventCenter?: EventEmitter
-  model?: Model.BaseModel | any // TODO: 如何兼容 LabelModel 类型。 LabelModel 能否是 BaseModel 的实现呢？
-  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: PointerEvent) => {
-    const DOC: any = window?.document
-    if (e.button !== LEFT_MOUSE_BUTTON_CODE) return
-    if (this.isStopPropagation) e.stopPropagation()
-    e.preventDefault()
-    this.isStartDragging = true
-    this.startX = e.clientX
-    this.startY = e.clientY
-    DOC.addEventListener('pointermove', this.handleMouseMove, false)
-    DOC.addEventListener('pointerup', 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: PointerEvent) => {
-    if (this.isStopPropagation) e.stopPropagation()
-    e.preventDefault()
-    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事件放到下一个消息队列中。
-      // TODO: 放到下一个消息队列中是否会有延迟，比如
-      // 限制某个元素的拖拽范围，如果在dragstart中设置了拖拽范围，那么在drag中就会有延迟。
-      Promise.resolve().then(() => {
-        this.onDragging({
-          deltaX,
-          deltaY,
-          event: e,
-        })
-        this.eventCenter?.emit(EventType[`${this.eventType}_MOUSEMOVE`], {
-          deltaX,
-          deltaY,
-          e,
-          data: this.data || elementData,
-        })
-        this.eventCenter?.emit(EventType[`${this.eventType}_DRAG`], {
-          e,
-          data: this.data || elementData,
-        })
-      })
-    }
-  }
-
-  handleMouseUp = (e: PointerEvent) => {
-    const DOC = window.document
-
-    this.isStartDragging = false
-    if (this.isStopPropagation) e.stopPropagation()
-    const target = e.target as any
-    if (target && typeof target.releasePointerCapture === 'function') {
-      target.releasePointerCapture(e.pointerId)
-    }
-    // fix #568: 如果onDragging在下一个事件循环中触发，而drop在当前事件循环，会出现问题。
-    Promise.resolve().then(() => {
-      DOC.removeEventListener('pointermove', this.handleMouseMove, false)
-      DOC.removeEventListener('pointerup', 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('pointermove', this.handleMouseMove, false)
-    DOC.removeEventListener('pointerup', this.handleMouseUp, false)
-    this.onDragEnd({ event: undefined })
-    this.isDragging = false
-  }
-
-  destroy = () => {
-    if (this.isStartDragging) {
-      // https://github.com/didi/LogicFlow/issues/1934
-      // https://github.com/didi/LogicFlow/issues/1926
-      // cancelDrag()->onDragEnd()->updateEdgePointByAnchors()触发线的重新计算
-      // 我们的本意是为了防止mousemove和mouseup没有及时被移除
-      // 因此这里增加if(this.isStartDragging)的判断，isStartDragging=true代表没有触发handleMouseUp()，此时监听还没被移除
-      // 在拖拽情况下(isStartDragging=true)，此时注册了监听，在组件突然销毁时，强制触发cancelDrag进行监听事件的移除
-      this.cancelDrag()
-    }
-  }
-}