@logicflow/core 2.2.0-alpha.7 → 2.2.1

package/src/view/edge/BezierEdge.tsx

@@ -1,101 +0,0 @@
-import BaseEdge, { IEdgeState } from './BaseEdge'
-import { Path } from '../shape'
-import LogicFlow from '../../LogicFlow'
-import { getEndTangent } from '../../util'
-import { BezierEdgeModel, GraphModel } from '../../model'
-
-import Point = LogicFlow.Point
-
-import ArrowInfo = LogicFlow.ArrowInfo
-
-export type IBezierEdgeProps = {
-  model: BezierEdgeModel
-  graphModel: GraphModel
-}
-
-export class BezierEdge extends BaseEdge<IBezierEdgeProps> {
-  /**
-   * @overridable 支持重写, 此方法为获取边的形状，如果需要自定义边的形状，请重写此方法。
-   * @example https://docs.logic-flow.cn/docs/#/zh/guide/basic/edge?id=%e5%9f%ba%e4%ba%8e-react-%e7%bb%84%e4%bb%b6%e8%87%aa%e5%ae%9a%e4%b9%89%e8%be%b9
-   */
-  getEdge() {
-    const { model } = this.props
-    const style = model.getEdgeStyle()
-    const { path, isAnimation, arrowConfig } = model as BezierEdgeModel
-    const animationStyle = model.getEdgeAnimationStyle()
-    const {
-      strokeDasharray,
-      stroke,
-      strokeDashoffset,
-      animationName,
-      animationDuration,
-      animationIterationCount,
-      animationTimingFunction,
-      animationDirection,
-    } = animationStyle
-
-    return (
-      <Path
-        d={path}
-        {...style}
-        {...arrowConfig}
-        {...(isAnimation
-          ? {
-              strokeDasharray,
-              stroke,
-              style: {
-                strokeDashoffset,
-                animationName,
-                animationDuration,
-                animationIterationCount,
-                animationTimingFunction,
-                animationDirection,
-              },
-            }
-          : {})}
-      />
-    )
-  }
-
-  /**
-   * @overridable 可重写，在完全自定义边的时候，可以重写此方法，来自定义边的选区。
-   */
-  getAppendWidth() {
-    const { path } = this.props.model as BezierEdgeModel
-    return <Path d={path} strokeWidth={10} stroke="transparent" fill="none" />
-  }
-
-  /**
-   * @deprecated
-   */
-  getArrowInfo(): ArrowInfo {
-    const { model } = this.props
-    const { hover } = this.state as IEdgeState
-    const { isSelected } = model as BezierEdgeModel
-    const { offset } = model.getArrowStyle()
-    const points = model.pointsList.map((point) => ({
-      x: point.x,
-      y: point.y,
-    }))
-    const [ePre, end] = getEndTangent(points, offset)
-    const arrowInfo = {
-      start: ePre,
-      end,
-      hover,
-      isSelected,
-    }
-    return arrowInfo
-  }
-
-  getLastTwoPoints(): [Point, Point] {
-    const { model } = this.props
-    const { offset } = model.getArrowStyle()
-    const points = model.pointsList.map((point) => ({
-      x: point.x,
-      y: point.y,
-    }))
-    return getEndTangent(points, offset)
-  }
-}
-
-export default BezierEdge

package/src/view/edge/LineEdge.tsx

@@ -1,81 +0,0 @@
-import BaseEdge from './BaseEdge'
-import { Line, Path } from '../shape'
-import { getAppendAttributes } from '../../util'
-import { GraphModel, LineEdgeModel } from '../../model'
-
-export type ILineEdgeProps = {
-  model: LineEdgeModel
-  graphModel: GraphModel
-}
-
-export class LineEdge extends BaseEdge<ILineEdgeProps> {
-  /**
-   * @overridable 支持重写, 此方法为获取边的形状，如果需要自定义边的形状，请重写此方法。
-   * @example https://docs.logic-flow.cn/docs/#/zh/guide/basic/edge?id=%e5%9f%ba%e4%ba%8e-react-%e7%bb%84%e4%bb%b6%e8%87%aa%e5%ae%9a%e4%b9%89%e8%be%b9
-   */
-  getEdge() {
-    const { model } = this.props
-    const { startPoint, endPoint, isAnimation, arrowConfig } = model
-    const style = model.getEdgeStyle()
-    const animationStyle = model.getEdgeAnimationStyle()
-    const {
-      strokeDasharray,
-      stroke,
-      strokeDashoffset,
-      animationName,
-      animationDuration,
-      animationIterationCount,
-      animationTimingFunction,
-      animationDirection,
-    } = animationStyle
-    return (
-      <Line
-        {...style}
-        x1={startPoint.x}
-        y1={startPoint.y}
-        x2={endPoint.x}
-        y2={endPoint.y}
-        {...arrowConfig}
-        {...(isAnimation
-          ? {
-              strokeDasharray,
-              stroke,
-              style: {
-                strokeDashoffset,
-                animationName,
-                animationDuration,
-                animationIterationCount,
-                animationTimingFunction,
-                animationDirection,
-              },
-            }
-          : {})}
-      />
-    )
-  }
-
-  /**
-   * @overridable 可重写，在完全自定义边的时候，可以重写此方法，来自定义边的选区。
-   */
-  getAppendWidth() {
-    const { model } = this.props
-    const { startPoint, endPoint } = model
-    const appendInfo = {
-      start: startPoint,
-      end: endPoint,
-    }
-    const { d, strokeWidth, fill, strokeDasharray, stroke } =
-      getAppendAttributes(appendInfo)
-    return (
-      <Path
-        d={d}
-        fill={fill}
-        strokeWidth={strokeWidth}
-        stroke={stroke}
-        strokeDasharray={strokeDasharray}
-      />
-    )
-  }
-}
-
-export default LineEdge

package/src/view/edge/PolylineEdge.tsx

@@ -1,311 +0,0 @@
-import { createElement as h } from 'preact/compat'
-import BaseEdge, { IEdgeState } from './BaseEdge'
-import { Polyline, Path } from '../shape'
-import LogicFlow from '../../LogicFlow'
-import { GraphModel, PolylineEdgeModel } from '../../model'
-import { EventType, SegmentDirection } from '../../constant'
-import { StepDrag, points2PointsList } from '../../util'
-import { generateRoundedCorners } from '../../util/geometry'
-import { getVerticalPointOfLine } from '../../algorithm'
-
-import ArrowInfo = LogicFlow.ArrowInfo
-import AppendConfig = LogicFlow.AppendConfig
-import Point = LogicFlow.Point
-
-type AppendAttributesType = {
-  d: string
-  fill: string
-  stroke: string
-  strokeWidth: number
-  strokeDasharray: string
-}
-
-export type IPolylineEdgeProps = {
-  model: PolylineEdgeModel
-  graphModel: GraphModel
-}
-
-export class PolylineEdge extends BaseEdge<IPolylineEdgeProps> {
-  drag: StepDrag
-  isDragging?: boolean
-  isShowAdjustPointTemp?: boolean
-  appendInfo?: AppendConfig
-
-  constructor() {
-    super()
-    this.drag = new StepDrag({
-      onDragStart: this.onDragStart,
-      onDragging: this.onDragging,
-      onDragEnd: this.onDragEnd,
-      isStopPropagation: false,
-    })
-  }
-
-  /**
-   * 不支持重写
-   */
-  onDragStart = () => {
-    const polylineModel = this.props.model as PolylineEdgeModel
-    polylineModel.dragAppendStart()
-    this.isShowAdjustPointTemp = polylineModel.isShowAdjustPoint
-    polylineModel.isShowAdjustPoint = false
-  }
-  /**
-   * 不支持重写
-   */
-  onDragging = ({ deltaX, deltaY }) => {
-    const { model, graphModel } = this.props
-    this.isDragging = true
-    const { transformModel, editConfigModel } = graphModel
-    const [curDeltaX, curDeltaY] = transformModel.fixDeltaXY(deltaX, deltaY)
-    const polylineModel = model as PolylineEdgeModel
-    // 更新当前拖拽的线段信息
-    // 1、如果只允许调整中间线段调用dragAppendSimple
-    // 2、如果允许调整所有线段调用dragAppend
-    const { adjustEdgeMiddle } = editConfigModel
-    if (adjustEdgeMiddle) {
-      this.appendInfo = polylineModel.dragAppendSimple(this.appendInfo!, {
-        x: curDeltaX,
-        y: curDeltaY,
-      })
-    } else {
-      this.appendInfo = polylineModel.dragAppend(this.appendInfo!, {
-        x: curDeltaX,
-        y: curDeltaY,
-      })
-    }
-  }
-  /**
-   * 不支持重写
-   */
-  onDragEnd = () => {
-    const {
-      model,
-      graphModel: { eventCenter },
-    } = this.props
-    const polylineModel = model as PolylineEdgeModel
-    polylineModel.dragAppendEnd()
-    this.isDragging = false
-
-    polylineModel.isShowAdjustPoint = this.isShowAdjustPointTemp ?? false
-    // 情况当前拖拽的线段信息
-    this.appendInfo = undefined
-    // 向外抛出事件
-    eventCenter.emit(EventType.EDGE_ADJUST, { data: polylineModel.getData() })
-  }
-  /**
-   * 不支持重写
-   */
-  beforeDragStart = (e: PointerEvent, appendInfo) => {
-    // 如果允许拖拽调整触发事件处理
-    if (appendInfo.draggable) {
-      this.drag.handleMouseDown(e)
-    }
-    // 记录当前拖拽的线段信息
-    this.appendInfo = appendInfo
-  }
-
-  /**
-   * @overridable 支持重写, 此方法为获取边的形状，如果需要自定义边的形状，请重写此方法。
-   * @example https://docs.logic-flow.cn/docs/#/zh/guide/basic/edge?id=%e5%9f%ba%e4%ba%8e-react-%e7%bb%84%e4%bb%b6%e8%87%aa%e5%ae%9a%e4%b9%89%e8%be%b9
-   */
-  getEdge() {
-    const { model } = this.props
-    const { points, isAnimation, arrowConfig, properties } = model
-    const style = model.getEdgeStyle()
-    const animationStyle = model.getEdgeAnimationStyle()
-    const {
-      strokeDasharray,
-      stroke,
-      strokeDashoffset,
-      animationName,
-      animationDuration,
-      animationIterationCount,
-      animationTimingFunction,
-      animationDirection,
-    } = animationStyle
-    // 应用通用圆角：当存在样式半径时，为折线拐点生成圆角
-    const radius: number = (properties?.radius ??
-      (style as any)?.radius ??
-      0) as number
-    const roundedPointsStr = (() => {
-      if (!radius || radius <= 0) return points
-      const list = points2PointsList(points)
-      const rounded = generateRoundedCorners(list, radius, false)
-      return rounded.map((p) => `${p.x},${p.y}`).join(' ')
-    })()
-
-    return (
-      <Polyline
-        points={roundedPointsStr}
-        {...style}
-        {...arrowConfig}
-        {...(isAnimation
-          ? {
-              strokeDasharray,
-              stroke,
-              style: {
-                strokeDashoffset,
-                animationName,
-                animationDuration,
-                animationIterationCount,
-                animationTimingFunction,
-                animationDirection,
-              },
-            }
-          : {})}
-      />
-    )
-  }
-
-  /**
-   * @deprecated
-   */
-  getArrowInfo(): ArrowInfo {
-    const { model } = this.props
-    const { points, isSelected } = model
-    const { hover } = this.state as IEdgeState
-    const currentPositionList = points2PointsList(points)
-    let startPoint: LogicFlow.Point = currentPositionList[0]
-    let endPoint: LogicFlow.Point = currentPositionList[0]
-
-    // 两点重合时不计算起终点
-    if (currentPositionList.length >= 2) {
-      startPoint = currentPositionList[currentPositionList.length - 2]
-      endPoint = currentPositionList[currentPositionList.length - 1]
-    }
-    return {
-      start: startPoint,
-      end: endPoint,
-      hover,
-      isSelected,
-    }
-  }
-
-  getLastTwoPoints(): [Point, Point] {
-    const { model } = this.props
-    const { points } = model
-    const currentPositionList = points2PointsList(points)
-    let startPoint: LogicFlow.Point = currentPositionList[0]
-    let endPoint: LogicFlow.Point = currentPositionList[0]
-    // 两点重合时不计算起终点
-    if (currentPositionList.length >= 2) {
-      startPoint = currentPositionList[currentPositionList.length - 2]
-      endPoint = currentPositionList[currentPositionList.length - 1]
-    }
-    return [startPoint, endPoint]
-  }
-
-  private getAppendAttributes(appendInfo: AppendConfig): AppendAttributesType {
-    const { start, end } = appendInfo
-    let d
-    if (start.x === end.x && start.y === end.y) {
-      // 拖拽过程中会出现起终点重合的情况，这时候append无法计算
-      d = ''
-    } else {
-      const config = {
-        start,
-        end,
-        offset: 10,
-        verticalLength: 5,
-      }
-      const startPosition = getVerticalPointOfLine({
-        ...config,
-        type: 'start',
-      })
-      const endPosition = getVerticalPointOfLine({
-        ...config,
-        type: 'end',
-      })
-      d = `M${startPosition.leftX} ${startPosition.leftY}
-      L${startPosition.rightX} ${startPosition.rightY}
-      L${endPosition.rightX} ${endPosition.rightY}
-      L${endPosition.leftX} ${endPosition.leftY} z`
-    }
-    return {
-      d,
-      fill: 'transparent',
-      stroke: 'transparent',
-      strokeWidth: 1,
-      strokeDasharray: '4, 4',
-    }
-  }
-
-  private getAppendShape(appendInfo: AppendConfig) {
-    const { d, strokeWidth, fill, strokeDasharray, stroke } =
-      this.getAppendAttributes(appendInfo)
-    return (
-      <Path
-        d={d}
-        fill={fill}
-        strokeWidth={strokeWidth}
-        stroke={stroke}
-        strokeDasharray={strokeDasharray}
-      />
-    )
-  }
-
-  /**
-   * @overridable 可重写，在完全自定义边的时候，可以重写此方法，来自定义边的选区。
-   */
-  getAppendWidth() {
-    const { model, graphModel } = this.props
-    const { pointsList, draggable } = model
-    const LineAppendList: h.JSX.Element[] = []
-    const pointsLen = pointsList.length
-    for (let i = 0; i < pointsLen - 1; i++) {
-      let className = 'lf-polyline-append'
-      const appendInfo: AppendConfig = {
-        start: {
-          x: pointsList[i].x,
-          y: pointsList[i].y,
-        },
-        end: {
-          x: pointsList[i + 1].x,
-          y: pointsList[i + 1].y,
-        },
-        startIndex: i,
-        endIndex: i + 1,
-        direction: SegmentDirection.HORIZONTAL,
-        draggable: true,
-      }
-      let append: h.JSX.Element = (
-        <g className={className}>{this.getAppendShape(appendInfo)}</g>
-      )
-      const { editConfigModel } = graphModel
-      const { adjustEdge, adjustEdgeMiddle } = editConfigModel
-      if (adjustEdge && draggable) {
-        const { startIndex, endIndex } = appendInfo
-        // 如果不允许调整起点和终点相连的线段，设置该线段appendInfo的dragAble为false
-        const dragDisable =
-          adjustEdgeMiddle && (startIndex === 0 || endIndex === pointsLen - 1)
-        appendInfo.draggable = !dragDisable
-        if (appendInfo.start.x === appendInfo.end.x) {
-          // 水平
-          if (appendInfo.draggable) {
-            className += '-ew-resize'
-          }
-          appendInfo.direction = SegmentDirection.VERTICAL
-        } else if (appendInfo.start.y === appendInfo.end.y) {
-          // 垂直
-          if (appendInfo.draggable) {
-            className += '-ns-resize'
-          }
-          appendInfo.direction = SegmentDirection.HORIZONTAL
-        }
-        append = (
-          <g
-            className={this.isDragging ? 'lf-dragging' : 'lf-drag-able'}
-            onPointerDown={(e) => this.beforeDragStart(e, appendInfo)}
-          >
-            <g className={className}>{this.getAppendShape(appendInfo)}</g>
-          </g>
-        )
-      }
-      LineAppendList.push(append)
-    }
-    return <g>{LineAppendList}</g>
-  }
-}
-
-export default PolylineEdge

package/src/view/edge/index.ts

@@ -1,6 +0,0 @@
-export * from './AdjustPoint'
-export * from './Arrow'
-export * from './BaseEdge'
-export * from './BezierEdge'
-export * from './LineEdge'
-export * from './PolylineEdge'

package/src/view/index.ts

@@ -1,8 +0,0 @@
-export * from './Anchor'
-export * from './Rotate'
-export * from './Graph'
-
-export * from './shape'
-export * from './node'
-export * from './edge'
-export * from './text'