@logicflow/core 2.2.0-alpha.7 → 2.2.1

package/src/view/node/HtmlNode.tsx

@@ -1,112 +0,0 @@
-import { createRef } from 'preact/compat'
-import BaseNode from './BaseNode'
-import { GraphModel, HtmlNodeModel } from '../../model'
-
-export type IHtmlNodeProps = {
-  model: HtmlNodeModel
-  graphModel: GraphModel
-}
-
-export class HtmlNode<
-  P extends IHtmlNodeProps = IHtmlNodeProps,
-> extends BaseNode<P> {
-  ref = createRef()
-  currentProperties?: string
-  preProperties?: string
-
-  get rootEl() {
-    return this.ref.current
-  }
-
-  /**
-   * @overridable 支持重写
-   * 自定义HTML节点内容
-   * @param {HTMLElement} rootEl 自定义HTML节点内容可以挂载的dom节点
-   * @example
-   * class CustomHtmlNode extends HtmlNode {
-   *   setHtml(rootEl) {
-   *     const input = document.createElement('input');
-   *     rootEl.appendChild(input)
-   *   }
-   * }
-   */
-  setHtml(rootEl: SVGForeignObjectElement) {
-    rootEl.appendChild(document.createElement('div'))
-  }
-
-  // TODO: 1. 应该在什么时机进行更新呢？2. 如何精细化控制
-  confirmUpdate(rootEl: SVGForeignObjectElement) {
-    this.setHtml(rootEl)
-  }
-
-  /**
-   * @overridable 支持重写
-   * 和react的shouldComponentUpdate类似，都是为了避免出发不必要的render.
-   * 但是这里不一样的地方在于，setHtml方法，我们只在properties发生变化了后再触发。
-   * 而x,y等这些坐标相关的方法发生了变化，不会再重新触发setHtml.
-   */
-  shouldUpdate() {
-    if (this.preProperties && this.preProperties === this.currentProperties) {
-      return false
-    }
-    this.preProperties = this.currentProperties
-    return true
-  }
-
-  componentDidMount() {
-    if (this.shouldUpdate() && this.rootEl) {
-      this.setHtml(this.rootEl)
-    }
-  }
-
-  componentDidUpdate() {
-    // DONE: 将 componentDidMount 和 componentDidUpdate 区分开，如果写在一次，渲染 React 组件会重复初始化，消耗过多资源
-    // 为了保证历史兼容性，先将默认 HTML 节点的 setHtml 和 confirmUpdate 保持一直，用户可通过自定义的方式重新定义
-    if (this.shouldUpdate() && this.rootEl) {
-      this.confirmUpdate(this.rootEl)
-    }
-  }
-
-  componentWillUnmount() {
-    super.componentWillUnmount()
-    this.rootEl.innerHTML = ''
-  }
-
-  getShape() {
-    const { model } = this.props
-    const { x, y, height, width } = model
-    const style = model.getNodeStyle()
-    this.currentProperties = JSON.stringify(model.properties)
-    return (
-      <g>
-        {style.shadow && (
-          <defs>
-            <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
-              <feDropShadow {...style.shadow} />
-            </filter>
-          </defs>
-        )}
-        <rect
-          x={x - width / 2}
-          y={y - height / 2}
-          width={width}
-          height={height}
-          rx={style.radius}
-          ry={style.radius}
-          {...style}
-          filter="url(#shadow)"
-        />
-        <foreignObject
-          {...style}
-          x={x - width / 2}
-          y={y - height / 2}
-          width={width}
-          height={height}
-          ref={this.ref}
-        />
-      </g>
-    )
-  }
-}
-
-export default HtmlNode

package/src/view/node/PolygonNode.tsx

@@ -1,28 +0,0 @@
-import BaseNode from './BaseNode'
-import { Polygon } from '../shape'
-import { GraphModel, PolygonNodeModel } from '../../model'
-
-export type IPolygonNodeProps = {
-  model: PolygonNodeModel
-  graphModel: GraphModel
-}
-
-export class PolygonNode<
-  P extends IPolygonNodeProps = IPolygonNodeProps,
-> extends BaseNode<P> {
-  getShape() {
-    const { model } = this.props
-    const { x, y, width, height, points } = model as PolygonNodeModel
-    const style = model.getNodeStyle()
-    const attr = {
-      transform: `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`,
-    }
-    return (
-      <g {...attr}>
-        <Polygon {...style} points={points} x={x} y={y} />
-      </g>
-    )
-  }
-}
-
-export default PolygonNode

package/src/view/node/RectNode.tsx

@@ -1,30 +0,0 @@
-import { createElement as h } from 'preact/compat'
-import BaseNode from './BaseNode'
-import { Rect } from '../shape'
-import { GraphModel, RectNodeModel } from '../../model'
-
-export type IRectNodeProps = {
-  model: RectNodeModel
-  graphModel: GraphModel
-}
-
-export class RectNode<
-  P extends IRectNodeProps = IRectNodeProps,
-> extends BaseNode<P> {
-  getShape(): h.JSX.Element | null {
-    const { model } = this.props
-    const style = model.getNodeStyle()
-    return (
-      <Rect
-        {...style}
-        x={model.x}
-        y={model.y}
-        width={model.width}
-        height={model.height}
-        radius={model.radius}
-      />
-    )
-  }
-}
-
-export default RectNode

package/src/view/node/TextNode.tsx

@@ -1,39 +0,0 @@
-import Rect from '../shape/Rect'
-import BaseNode from './BaseNode'
-import { GraphModel, TextNodeModel } from '../../model'
-
-export type ITextNodeProps = {
-  model: TextNodeModel
-  graphModel: GraphModel
-}
-
-export class TextNode<
-  P extends ITextNodeProps = ITextNodeProps,
-> extends BaseNode<P> {
-  getBackground() {
-    const { model } = this.props
-    const style = model.getTextStyle()
-    // 背景框宽度，最长一行字节数/2 * fontsize + 2
-    // 背景框宽度， 行数 * fontsize + 2
-    // FIX: #1067
-    const { width, height, x, y } = model
-    const rectAttr = {
-      ...style.background,
-      x,
-      y,
-      width,
-      height,
-    }
-    return <Rect {...rectAttr} />
-  }
-
-  getResizeControl() {
-    return null
-  }
-
-  getShape() {
-    return <g>{this.getBackground()}</g>
-  }
-}
-
-export default TextNode

package/src/view/node/index.ts

@@ -1,8 +0,0 @@
-export * from './BaseNode'
-export * from './RectNode'
-export * from './CircleNode'
-export * from './PolygonNode'
-export * from './DiamondNode'
-export * from './EllipseNode'
-export * from './TextNode'
-export * from './HtmlNode'

package/src/view/overlay/BackgroundOverlay.tsx

@@ -1,34 +0,0 @@
-import { Component } from 'preact/compat'
-import { isObject } from 'lodash-es'
-import { Options as LFOptions } from '../../options'
-import { observer } from '../..'
-
-/**
- * 背景配置, 支持css属性配置
- * https://developer.mozilla.org/zh-CN/docs/Web/CSS/background
- * @example
- * {
- *    backgroundImage: "url('./img/grid.svg')",
-      backgroundRepeat: 'repeat',
- * }
- */
-type IProps = {
-  background: boolean | LFOptions.BackgroundConfig
-}
-
-@observer
-export class BackgroundOverlay extends Component<IProps> {
-  render() {
-    const { background } = this.props
-    return (
-      <div className="lf-background">
-        <div
-          style={isObject(background) ? background : {}}
-          className="lf-background-area"
-        />
-      </div>
-    )
-  }
-}
-
-export default BackgroundOverlay

package/src/view/overlay/BezierAdjustOverlay.tsx

@@ -1,150 +0,0 @@
-import { Component } from 'preact/compat'
-import { Circle, Line } from '../shape'
-import { observer } from '../..'
-import LogicFlow from '../../LogicFlow'
-import { EventType, ModelType } from '../../constant'
-import { StepDrag, getBezierPoints, IDragParams } from '../../util'
-import { GraphModel, BezierEdgeModel } from '../../model'
-
-import Point = LogicFlow.Point
-
-type IProps = {
-  graphModel: GraphModel
-}
-
-type IAnchorProps = {
-  position: Point
-  bezierModel: BezierEdgeModel
-  graphModel: GraphModel
-  type: string
-}
-
-type IState = {
-  endX: number
-  endY: number
-}
-
-// bezier曲线的可调整锚点
-export class BezierAdjustAnchor extends Component<IAnchorProps, IState> {
-  dragHandler: StepDrag
-
-  constructor() {
-    super()
-    this.dragHandler = new StepDrag({
-      onDragging: this.onDragging,
-      onDragEnd: this.onDragEnd,
-    })
-  }
-
-  onDragging = ({ event }: IDragParams) => {
-    const { graphModel, bezierModel, type } = this.props
-    const {
-      canvasOverlayPosition: { x, y },
-    } = graphModel.getPointByClient({
-      x: event!.clientX,
-      y: event!.clientY,
-    })
-    bezierModel.updateAdjustAnchor(
-      {
-        x,
-        y,
-      },
-      type,
-    )
-    graphModel.eventCenter.emit(EventType.EDGE_ADJUST, {
-      data: bezierModel.getData(),
-    })
-  }
-  onDragEnd = () => {
-    const { bezierModel } = this.props
-    bezierModel.isDragging = false
-  }
-
-  render() {
-    const { position } = this.props
-    const { x, y } = position
-    const { bezierModel } = this.props
-    const { adjustAnchor } = bezierModel.getEdgeStyle()
-    return (
-      <Circle
-        className="lf-bezier-adjust-anchor"
-        x={x}
-        y={y}
-        {...adjustAnchor}
-        onPointerDown={(ev) => {
-          // if (edgeAddable !== false) {
-          this.dragHandler.handleMouseDown(ev)
-          // }
-        }}
-      />
-    )
-  }
-}
-
-@observer
-export class BezierAdjustOverlay extends Component<IProps> {
-  getBezierAdjust(bezier: BezierEdgeModel, graphModel: GraphModel) {
-    const { path, id } = bezier
-    const pointsList = getBezierPoints(path)
-    const [start, sNext, ePre, end] = pointsList
-    const { adjustLine } = bezier.getEdgeStyle()
-    const result: any = [] // TODO: 类型定义
-    result.push(
-      <Line
-        x1={start.x}
-        y1={start.y}
-        x2={sNext.x}
-        y2={sNext.y}
-        {...adjustLine}
-      />,
-    )
-    result.push(
-      <BezierAdjustAnchor
-        position={sNext}
-        bezierModel={bezier}
-        graphModel={graphModel}
-        key={`${id}_ePre`}
-        type="sNext"
-      />,
-    )
-    result.push(
-      <Line x1={end.x} y1={end.y} x2={ePre.x} y2={ePre.y} {...adjustLine} />,
-    )
-    result.push(
-      <BezierAdjustAnchor
-        position={ePre}
-        bezierModel={bezier}
-        graphModel={graphModel}
-        key={`${id}_sNext`}
-        type="ePre"
-      />,
-    )
-    return result
-  }
-
-  // 获取选中bezier曲线，调整操作线和锚点
-  selectedBezierEdge() {
-    const { graphModel } = this.props
-    const edgeList = graphModel.edges
-    const edgeAdjust: any = [] // TODO：类型定义
-    for (let i = 0; i < edgeList.length; i++) {
-      const edge = edgeList[i]
-      if (
-        edge.isSelected &&
-        edge.modelType === ModelType.BEZIER_EDGE &&
-        edge.draggable
-      ) {
-        edgeAdjust.push(
-          this.getBezierAdjust(edge as BezierEdgeModel, graphModel),
-        )
-      }
-    }
-    return edgeAdjust
-  }
-
-  render() {
-    return <g className="lf-bezier-adjust">{this.selectedBezierEdge()}</g>
-  }
-}
-
-export default BezierAdjustOverlay

package/src/view/overlay/CanvasOverlay.tsx

@@ -1,290 +0,0 @@
-import { Component } from 'preact/compat'
-import Dnd from '../behavior/dnd'
-import { observer } from '../..'
-import GraphModel from '../../model/GraphModel'
-import { EventType } from '../../constant'
-import { StepDrag, IDragParams } from '../../util'
-
-type IProps = {
-  graphModel: GraphModel
-  dnd: Dnd
-}
-type IState = {
-  isDragging: boolean
-}
-
-@observer
-export class CanvasOverlay extends Component<IProps, IState> {
-  stepDrag: StepDrag
-  stepScrollX = 0
-  stepScrollY = 0
-  pointers = new Map<number, { x: number; y: number }>()
-  pinchStartDistance?: number
-  pinchStartScale?: number
-  pinchLastCenterX?: number
-  pinchLastCenterY?: number
-  longPressTimer?: number
-
-  constructor(props: IProps) {
-    super()
-    const {
-      graphModel: { gridSize, eventCenter },
-    } = props
-    this.stepDrag = new StepDrag({
-      onDragging: this.onDragging,
-      onDragEnd: this.onDragEnd,
-      step: gridSize,
-      eventType: 'BLANK',
-      isStopPropagation: false,
-      eventCenter,
-      model: undefined,
-    })
-    // 当 ctrl、cmd 键被按住的时候，可以放大缩小。
-    this.state = {
-      isDragging: false,
-    }
-  }
-
-  // get InjectedProps() {
-  //   return this.props as InjectedProps;
-  // }
-  onDragging = ({ deltaX, deltaY }: IDragParams) => {
-    if (this.longPressTimer) {
-      clearTimeout(this.longPressTimer)
-      this.longPressTimer = undefined
-    }
-    this.setState({
-      isDragging: true,
-    })
-    const {
-      graphModel: { transformModel, editConfigModel },
-    } = this.props
-    if (editConfigModel.stopMoveGraph === true) {
-      return
-    }
-    transformModel.translate(deltaX, deltaY)
-  }
-  onDragEnd = () => {
-    this.setState({
-      isDragging: false,
-    })
-  }
-  zoomHandler = (ev: WheelEvent) => {
-    const {
-      graphModel: { editConfigModel, transformModel, gridSize },
-      graphModel,
-    } = this.props
-    const { deltaX: eX, deltaY: eY } = ev
-    const { stopScrollGraph, stopZoomGraph } = editConfigModel
-    // 如果没有禁止滚动移动画布, 并且当前触发的时候ctrl键、cmd键没有按住, 那么移动画布
-    if (!stopScrollGraph && !ev.ctrlKey && !ev.metaKey) {
-      ev.preventDefault()
-      this.stepScrollX += eX
-      this.stepScrollY += eY
-      if (Math.abs(this.stepScrollX) >= gridSize) {
-        const remainderX = this.stepScrollX % gridSize
-        const moveDistance = this.stepScrollX - remainderX
-        transformModel.translate(-moveDistance * transformModel.SCALE_X, 0)
-        this.stepScrollX = remainderX
-      }
-      if (Math.abs(this.stepScrollY) >= gridSize) {
-        const remainderY = this.stepScrollY % gridSize
-        const moveDistanceY = this.stepScrollY - remainderY
-        transformModel.translate(0, -moveDistanceY * transformModel.SCALE_Y)
-        this.stepScrollY = remainderY
-      }
-      return
-    }
-    // 如果没有禁止缩放画布，那么进行缩放. 在禁止缩放画布后，按住 ctrl、cmd 键也不能缩放了。
-    if (!stopZoomGraph) {
-      ev.preventDefault()
-      const position = graphModel.getPointByClient({
-        x: ev.clientX,
-        y: ev.clientY,
-      })
-      const { x, y } = position.canvasOverlayPosition
-      transformModel.zoom(ev.deltaY < 0, [x, y])
-    }
-  }
-  clickHandler = (ev: MouseEvent) => {
-    // 点击空白处取消节点选中状态, 不包括冒泡过来的事件。
-    const target = ev.target as HTMLElement
-    if (target.getAttribute('name') === 'canvas-overlay') {
-      const { graphModel } = this.props
-      const { selectElements } = graphModel
-      if (selectElements.size > 0) {
-        graphModel.clearSelectElements()
-      }
-      // 如果是拖拽状态，不触发点击事件
-      if (this.state.isDragging) return
-      graphModel.eventCenter.emit(EventType.BLANK_CLICK, { e: ev })
-    }
-  }
-  handleContextMenu = (ev: MouseEvent) => {
-    const target = ev.target as HTMLElement
-    if (target.getAttribute('name') === 'canvas-overlay') {
-      ev.preventDefault()
-      const { graphModel } = this.props
-      const position = graphModel.getPointByClient({
-        x: ev.clientX,
-        y: ev.clientY,
-      })
-      // graphModel.setElementState(ElementState.SHOW_MENU, position.domOverlayPosition);
-      graphModel.eventCenter.emit(EventType.BLANK_CONTEXTMENU, {
-        e: ev,
-        position,
-      })
-    }
-  }
-  // 鼠标、触摸板 按下
-  pointerDownHandler = (ev: PointerEvent) => {
-    const {
-      graphModel: {
-        eventCenter,
-        editConfigModel,
-        transformModel: { SCALE_X },
-        gridSize,
-      },
-    } = this.props
-    this.pointers.set(ev.pointerId, { x: ev.clientX, y: ev.clientY })
-    if (this.longPressTimer) {
-      clearTimeout(this.longPressTimer)
-    }
-    if (ev.pointerType === 'touch') {
-      this.longPressTimer = window.setTimeout(() => {
-        this.handleContextMenu(ev)
-      }, 500)
-    }
-    // 检测双指触摸，初始化捏合缩放
-    if (this.pointers.size === 2) {
-      const {
-        graphModel: { transformModel, editConfigModel },
-      } = this.props
-      // 记录两指当前位置用于计算初始距离
-      const pts = Array.from(this.pointers.values())
-      const dx = pts[0].x - pts[1].x
-      const dy = pts[0].y - pts[1].y
-      const cx = (pts[0].x + pts[1].x) / 2
-      const cy = (pts[0].y + pts[1].y) / 2
-      // 记录捏合起始距离与当前缩放，后续按比例计算缩放
-      this.pinchStartDistance = Math.hypot(dx, dy)
-      this.pinchStartScale = transformModel.SCALE_X
-      // 双指操作下取消画布拖拽，避免与捏合缩放冲突
-      this.stepDrag.cancelDrag()
-      this.pinchLastCenterX = cx
-      this.pinchLastCenterY = cy
-      editConfigModel.updateEditConfig({ isPinching: true })
-      return
-    }
-    const { adjustEdge, adjustNodePosition, stopMoveGraph } = editConfigModel
-    const target = ev.target as HTMLElement
-    const isFrozenElement = !adjustEdge && !adjustNodePosition
-    if (target.getAttribute('name') === 'canvas-overlay' || isFrozenElement) {
-      if (stopMoveGraph !== true) {
-        this.stepDrag.setStep(gridSize * SCALE_X)
-        this.stepDrag.handleMouseDown(ev)
-      } else {
-        eventCenter.emit(EventType.BLANK_MOUSEDOWN, { e: ev })
-      }
-    }
-  }
-  pointerMoveHandler = (ev: PointerEvent) => {
-    // 记录当前指针位置（按 pointerId）
-    this.pointers.set(ev.pointerId, { x: ev.clientX, y: ev.clientY })
-    // 当已记录初始捏合距离且存在两指时，执行捏合缩放
-    if (this.pinchStartDistance && this.pointers.size >= 2) {
-      const {
-        graphModel,
-        graphModel: { editConfigModel, transformModel },
-      } = this.props
-      if (editConfigModel.stopZoomGraph) return
-      // 取消触摸长按计时，避免捏合过程中误触发上下文菜单
-      if (this.longPressTimer) {
-        clearTimeout(this.longPressTimer)
-      }
-      // 计算两指间当前距离
-      const pts = Array.from(this.pointers.values())
-      const dx = pts[0].x - pts[1].x
-      const dy = pts[0].y - pts[1].y
-      const dist = Math.hypot(dx, dy)
-      // 以初始缩放为基准，根据距离比例得到新的缩放比例
-      const scale =
-        (this.pinchStartScale ?? transformModel.SCALE_X) *
-        (dist / this.pinchStartDistance)
-      // 取两指中心作为缩放原点，并转换为画布坐标系
-      const cx = (pts[0].x + pts[1].x) / 2
-      const cy = (pts[0].y + pts[1].y) / 2
-      const pos = graphModel.getPointByClient({ x: cx, y: cy })
-      const { x, y } = pos.canvasOverlayPosition
-      transformModel.zoom(scale, [x, y])
-      // 双指中心位移驱动画布平移，配合缩放实现捏合移动；
-      if (!editConfigModel.stopMoveGraph || editConfigModel.isPinching) {
-        const deltaX =
-          this.pinchLastCenterX === undefined ? 0 : cx - this.pinchLastCenterX
-        const deltaY =
-          this.pinchLastCenterY === undefined ? 0 : cy - this.pinchLastCenterY
-        transformModel.translate(deltaX, deltaY)
-        this.pinchLastCenterX = cx
-        this.pinchLastCenterY = cy
-      }
-      ev.preventDefault()
-    }
-  }
-  pointerUpHandler = (ev: PointerEvent) => {
-    this.pointers.delete(ev.pointerId)
-    if (this.longPressTimer) {
-      clearTimeout(this.longPressTimer)
-      this.longPressTimer = undefined
-    }
-    // 双指松开或仅剩一指：结束捏合手势并清理临时状态
-    if (this.pointers.size < 2) {
-      // 清空捏合距离与缩放起始值
-      this.pinchStartDistance = undefined
-      this.pinchStartScale = undefined
-      // 清空上一帧的双指中心
-      this.pinchLastCenterX = undefined
-      this.pinchLastCenterY = undefined
-      const {
-        graphModel: { editConfigModel },
-      } = this.props
-      // 标记退出捏合，框选等交互可恢复
-      editConfigModel.updateEditConfig({ isPinching: false })
-      // 为了处理画布移动的时候，编辑和菜单仍然存在的问题。
-      this.clickHandler(ev)
-    }
-  }
-
-  render() {
-    const {
-      graphModel: { transformModel },
-    } = this.props
-    const { transform } = transformModel.getTransformStyle()
-    const { children } = this.props
-    const { isDragging } = this.state
-
-    return (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="100%"
-        height="100%"
-        name="canvas-overlay"
-        onWheel={this.zoomHandler}
-        onPointerDown={this.pointerDownHandler}
-        onPointerMove={this.pointerMoveHandler}
-        onPointerUp={this.pointerUpHandler}
-        onPointerCancel={this.pointerUpHandler}
-        onContextMenu={this.handleContextMenu}
-        style={{ touchAction: 'none', WebkitUserSelect: 'none' }}
-        className={
-          isDragging
-            ? 'lf-canvas-overlay lf-dragging'
-            : 'lf-canvas-overlay lf-drag-able'
-        }
-      >
-        <g transform={transform}>{children}</g>
-      </svg>
-    )
-  }
-}
-
-export default CanvasOverlay