@logicflow/core 2.2.0-alpha.7 → 2.2.1

package/src/tool/MultipleSelectTool.tsx

@@ -1,140 +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) => {
-    // 多选区域的拖拽步长随缩放变化
-    const {
-      graphModel: { gridSize },
-      lf,
-    } = this.props
-    const { SCALE_X } = lf.getTransform()
-    this.stepDrag.setStep(gridSize * SCALE_X)
-    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, theme },
-    } = this.props
-    const { SCALE_X, SCALE_Y } = this.props.lf.getTransform()
-    const { xPadding = 8, yPadding = 8 } = theme.multiSelect || {}
-    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 - xPadding / 2}px`,
-      top: `${y - (20 * SCALE_Y) / 2 - yPadding / 2}px`,
-      width: `${x1 - x + 20 * SCALE_X + xPadding}px`,
-      height: `${y1 - y + 20 * SCALE_Y + yPadding}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
-  }
-}