@logicflow/core 2.2.0 → 2.2.1

package/src/view/shape/Polygon.tsx

@@ -1,91 +0,0 @@
-import { createElement as h } from 'preact/compat'
-import { forEach, toPairs } from 'lodash-es'
-import { LogicFlow } from '../..'
-
-export type IPolygonProps = {
-  points: LogicFlow.PointTuple[]
-  x?: number
-  y?: number
-  className?: string
-  radius?: number
-}
-/**
- * 生成带圆角的多边形路径
- * @param points 多边形顶点坐标数组
- * @param radius 圆角半径
- * @returns SVG 路径字符串
- */
-export function createRoundedPolygonPath(points, radius): string {
-  const pointList = points.map((point) => ({ x: point[0], y: point[1] }))
-  const len = pointList.length
-  if (len < 3) return ''
-
-  const r = Math.abs(radius)
-  let path = ''
-
-  for (let i = 0; i < len; i++) {
-    const prev = pointList[(i - 1 + len) % len]
-    const curr = pointList[i]
-    const next = pointList[(i + 1) % len]
-
-    // 向量
-    const v1 = { x: curr.x - prev.x, y: curr.y - prev.y }
-    const v2 = { x: next.x - curr.x, y: next.y - curr.y }
-
-    // 单位向量
-    const len1 = Math.hypot(v1.x, v1.y)
-    const len2 = Math.hypot(v2.x, v2.y)
-    const u1 = { x: v1.x / len1, y: v1.y / len1 }
-    const u2 = { x: v2.x / len2, y: v2.y / len2 }
-
-    // 起点 = curr - u1 * r，终点 = curr + u2 * r
-    const start = { x: curr.x - u1.x * r, y: curr.y - u1.y * r }
-    const end = { x: curr.x + u2.x * r, y: curr.y + u2.y * r }
-
-    if (i === 0) {
-      path += `M ${start.x} ${start.y} `
-    } else {
-      path += `L ${start.x} ${start.y} `
-    }
-
-    // Q 控制点是当前拐角点
-    path += `Q ${curr.x} ${curr.y} ${end.x} ${end.y} `
-  }
-
-  path += 'Z'
-  return path
-}
-
-export function Polygon(props: IPolygonProps): h.JSX.Element {
-  const { points = [], className, radius } = props
-  const attrs: Record<string, any> = {
-    fill: 'transparent',
-    fillOpacity: 1,
-    strokeWidth: 1,
-    stroke: '#000',
-    strokeOpacity: 1,
-    points: '',
-  }
-
-  forEach(toPairs(props), ([k, v]: [k: string, v: any]) => {
-    if (typeof v !== 'object') {
-      attrs[k] = v
-    }
-  })
-
-  if (className) {
-    attrs.classNmae = `lf-basic-shape ${className}`
-  } else {
-    attrs.className = 'lf-basic-shape'
-  }
-  if (radius) {
-    const path = createRoundedPolygonPath(points, radius)
-    attrs.d = path
-    return <path {...attrs} />
-  } else {
-    attrs.points = points.map((point) => point.join(',')).join(' ')
-    return <polygon {...attrs} />
-  }
-}
-
-export default Polygon

package/src/view/shape/Polyline.tsx

@@ -1,31 +0,0 @@
-import { createElement as h } from 'preact/compat'
-import { forEach, toPairs } from 'lodash-es'
-
-export type IPolylineProps = {
-  points: string
-  pathLength?: number | 'none'
-  className?: string
-}
-
-export function Polyline(props: IPolylineProps): h.JSX.Element {
-  const { className } = props
-  const attrs: Record<string, unknown> = {
-    points: '',
-    fill: 'none',
-  }
-
-  forEach(toPairs(props), ([k, v]: [k: string, v: unknown]) => {
-    if (k === 'style') {
-      attrs[k] = v
-    } else if (typeof v !== 'object') {
-      attrs[k] = v
-    }
-  })
-  if (className) {
-    attrs.className = `${className}`
-  }
-
-  return <polyline {...attrs} />
-}
-
-export default Polyline

package/src/view/shape/Rect.tsx

@@ -1,44 +0,0 @@
-import { createElement as h } from 'preact/compat'
-import { forEach, toPairs } from 'lodash-es'
-import LogicFlow from '../..'
-
-export type IRectProps = {
-  x: number
-  y: number
-  width: number
-  height: number
-  className?: string
-  radius?: LogicFlow.NumberOrPercent
-  [key: string]: any
-}
-
-export function Rect(props: IRectProps): h.JSX.Element {
-  const { x, y, width, height, className, strokeWidth, radius = 0 } = props
-
-  const leftTopX = x - width / 2
-  const leftTopY = y - height / 2
-  const attrs: Record<string, any> = {}
-  attrs['stroke-width'] = strokeWidth
-  forEach(toPairs(props), ([k, v]: [k: string, v: any]) => {
-    if (typeof v !== 'object') {
-      attrs[k] = v
-    }
-  })
-
-  if (className) {
-    attrs.className = `lf-basic-shape ${className}`
-  } else {
-    attrs.className = 'lf-basic-shape'
-  }
-
-  if (radius) {
-    attrs.rx = radius
-    attrs.ry = radius
-  }
-  attrs.x = leftTopX
-  attrs.y = leftTopY
-
-  return <rect {...attrs} />
-}
-
-export default Rect

package/src/view/shape/Text.tsx

@@ -1,169 +0,0 @@
-import { createElement as h } from 'preact/compat'
-import { BaseNodeModel, BaseEdgeModel } from '../../model'
-import { ElementType, ModelType } from '../../constant'
-import { getHtmlTextHeight } from '../../util'
-import { forEach, toPairs } from 'lodash-es'
-
-export type ITextProps = {
-  x: number
-  y: number
-  value: string
-  fontSize?: number
-  fill?: string
-  overflowMode?: 'default' | 'autoWrap' | 'ellipsis'
-  textWidth?: number
-  lineHeight?: number
-  fontFamily?: string | null
-  wrapPadding?: string | number | null
-  model: BaseNodeModel | BaseEdgeModel
-  [key: string]: any
-}
-export type ForeignObjectPropsType =
-  'string | number | SignalLike<string | number | undefined> | undefined'
-
-export function Text(props: ITextProps): h.JSX.Element | null {
-  const {
-    x = 0,
-    y = 0,
-    value,
-    fontSize = 12,
-    fill = 'currentColor',
-    overflowMode = 'default',
-    // TODO: 确认该 textWidth 为 '' 时跟设置什么值一致
-    textWidth = undefined,
-    model,
-  } = props
-
-  const attrs: Record<string, any> = {
-    x,
-    y,
-    fill,
-    fontSize,
-    textAnchor: 'middle',
-    dominantBaseline: 'central',
-    // ...props,
-  }
-
-  forEach(toPairs(props), ([k, v]: [k: string, v: any]) => {
-    if (typeof v !== 'object') {
-      attrs[k] = v
-    }
-  })
-
-  if (value) {
-    // String(value)，兼容纯数字的文案
-    // TODO: 将 value 转为纯文本，移除其中 \n \r 等特殊字符，看是否应该丰富该功能
-    const rows = String(value).split(/[\r\n]/g)
-    const rowsLength = rows.length
-
-    if (overflowMode !== 'default') {
-      // 非文本节点设置了自动换行，或者边设置了自动换行并且设置了 textWidth
-      const { BaseType, modelType } = model
-      if (
-        (BaseType === ElementType.NODE && modelType !== ModelType.TEXT_NODE) ||
-        (BaseType === ElementType.EDGE && textWidth)
-      ) {
-        return renderHtmlText(props)
-      }
-    }
-
-    if (rowsLength > 1) {
-      const tSpans = rows.map((row, idx) => {
-        // 保证文字居中，文字 Y 轴偏移为当前行数对应中心行数的偏移行 * 行高
-        const tSpanLineHeight = fontSize + 2
-        const offsetY = (idx - (rowsLength - 1) / 2) * tSpanLineHeight
-        return (
-          <tspan className="lf-text-tspan" x={x} y={y + offsetY}>
-            {row}
-          </tspan>
-        )
-      })
-      return <text {...attrs}>{tSpans}</text>
-    }
-    return <text {...attrs}>{value}</text>
-  }
-  return null
-}
-
-export function renderHtmlText(props: ITextProps): h.JSX.Element {
-  const {
-    x,
-    y,
-    value,
-    model,
-    textWidth,
-    fontSize = 12,
-    lineHeight,
-    fontFamily = '',
-    wrapPadding = '0, 0',
-    overflowMode,
-  } = props
-
-  const { width, height, textHeight } = model
-  // TODO: 设置文本宽度为 textWidth 或 节点的宽度
-  const textRealWidth: number = textWidth || (width as number)
-  const rows = String(value).split(/[\r\n]/g)
-  const rowsLength = rows.length
-  const textRealHeight = getHtmlTextHeight({
-    rows,
-    style: {
-      fontSize: `${fontSize}px`,
-      width: `${textRealWidth}px`,
-      fontFamily,
-      lineHeight,
-      padding: wrapPadding,
-    },
-    rowsLength,
-    className: 'lf-get-text-height',
-  })
-
-  // 当文字超过边框时，取文字高度的实际值，也就是文字可以超过边框
-  let foreignObjectHeight: number =
-    (height as number) > textRealHeight ? (height as number) : textRealHeight
-  // 如果设置了文本高度，取设置的高度
-  if (textHeight) {
-    foreignObjectHeight = textHeight as number
-  }
-
-  const isEllipsis = overflowMode === 'ellipsis'
-  if (isEllipsis) {
-    foreignObjectHeight = fontSize + 2
-  }
-
-  return (
-    <g>
-      <foreignObject
-        width={textRealWidth}
-        height={foreignObjectHeight}
-        x={x - textRealWidth / 2}
-        y={y - foreignObjectHeight / 2}
-        style={{ overflow: 'visible', textAlign: 'left' }}
-      >
-        <div
-          className="lf-node-text-auto-wrap"
-          style={{
-            minHeight: foreignObjectHeight,
-            width: textRealWidth,
-            padding: wrapPadding,
-          }}
-        >
-          <div
-            className={
-              isEllipsis
-                ? 'lf-node-text-ellipsis-content'
-                : 'lf-node-text-auto-wrap-content'
-            }
-            title={isEllipsis ? rows.join('') : ''}
-            style={{ ...(props as h.JSX.CSSProperties) }}
-          >
-            {rows.map((row) => (
-              <div className="lf-node-text--auto-wrap-inner">{row}</div>
-            ))}
-          </div>
-        </div>
-      </foreignObject>
-    </g>
-  )
-}
-
-export default Text

package/src/view/shape/index.ts

@@ -1,8 +0,0 @@
-export * from './Text'
-export * from './Line'
-export * from './Rect'
-export * from './Path'
-export * from './Circle'
-export * from './Ellipse'
-export * from './Polygon'
-export * from './Polyline'

package/src/view/text/BaseText.tsx

@@ -1,134 +0,0 @@
-import classNames from 'classnames'
-import { createElement as h, Component } from 'preact/compat'
-import { ElementState, EventType } from '../../constant'
-import { GraphModel, BaseNodeModel, BaseEdgeModel } from '../../model'
-import { Text } from '../shape'
-import { IDragParams, StepDrag } from '../../util'
-
-export type IBaseTextProps = {
-  model: BaseNodeModel | BaseEdgeModel
-  graphModel: GraphModel
-  draggable: boolean
-  editable: boolean
-}
-
-export type IBaseTextState = {
-  isHovered: boolean
-}
-
-export class BaseText<
-  P extends IBaseTextProps,
-  S extends IBaseTextState,
-> extends Component<P, S> {
-  stepperDrag: StepDrag
-
-  constructor(props: P) {
-    super()
-    const { draggable } = props
-    // TODO: 确认为什么不在 new 的时候传入 model，而在下面使用的时候赋值
-    this.stepperDrag = new StepDrag({
-      onDragging: this.onDragging,
-      step: 1,
-      // model,
-      eventType: 'TEXT',
-      isStopPropagation: draggable,
-    })
-  }
-
-  getShape(): h.JSX.Element | null {
-    const { model, graphModel } = this.props
-    const { editConfigModel } = graphModel
-    const {
-      text: { value, x, y, editable, draggable },
-    } = model
-    const attr = {
-      x,
-      y,
-      className: '',
-      value,
-    }
-    // DONE: 代码优化，看是否可以引入 classnames
-    // TODO: 确认下面逻辑是否正确，确认正确后删除下面注释
-    // if (editable) {
-    //   attr.className = 'lf-element-text';
-    // } else if (draggable || editConfigModel.nodeTextDraggable) {
-    //   attr.className = 'lf-text-draggable';
-    // } else {
-    //   attr.className = 'lf-text-disabled';
-    // }
-    const style = model.getTextStyle()
-    const isDraggable = editConfigModel.nodeTextDraggable || draggable
-
-    return (
-      <Text
-        {...attr}
-        {...style}
-        className={classNames({
-          'lf-element-text': editable,
-          'lf-text-draggable': !editable && isDraggable,
-          'lf-text-disabled': !editable && !isDraggable,
-        })}
-        model={model}
-      />
-    )
-  }
-
-  mouseDownHandler = (e: PointerEvent) => {
-    const { draggable, model, graphModel } = this.props
-    const {
-      editConfigModel: { nodeTextDraggable },
-    } = graphModel
-
-    if (draggable ?? nodeTextDraggable) {
-      e.stopPropagation()
-      this.stepperDrag.model = model
-      this.stepperDrag.handleMouseDown(e)
-    }
-  }
-
-  onDragging = ({ deltaX, deltaY }: IDragParams) => {
-    const {
-      model,
-      graphModel: { transformModel },
-    } = this.props
-
-    if (deltaX || deltaY) {
-      const [curDeltaX, curDeltaY] = transformModel.fixDeltaXY(deltaX, deltaY)
-      model.moveText(curDeltaX, curDeltaY)
-    }
-  }
-
-  dbClickHandler = () => {
-    // 静默模式下，双击不更改状态，不可编辑
-    const {
-      editable,
-      graphModel: { eventCenter },
-      model,
-    } = this.props
-    if (editable) {
-      model.setElementState(ElementState.TEXT_EDIT)
-    }
-    eventCenter.emit(EventType.TEXT_DBCLICK, {
-      data: model.text,
-      model,
-    })
-  }
-
-  render(): h.JSX.Element | undefined {
-    const {
-      model: { text },
-    } = this.props
-    if (text) {
-      return (
-        <g
-          onPointerDown={this.mouseDownHandler}
-          onDblClick={this.dbClickHandler}
-        >
-          {this.getShape()}
-        </g>
-      )
-    }
-  }
-}
-
-export default BaseText

package/src/view/text/LineText.tsx

@@ -1,168 +0,0 @@
-import { createElement as h } from 'preact/compat'
-import { Text, ITextProps, Rect, IRectProps } from '..'
-import { BaseText } from '.'
-import { BaseEdgeModel, GraphModel } from '../../model'
-import { getHtmlTextHeight, getSvgTextSize } from '../../util'
-
-export type ILineTextProps = {
-  model: BaseEdgeModel
-  graphModel: GraphModel
-  draggable: boolean
-  editable: boolean
-  [key: string]: unknown
-}
-
-export type ILineTextState = {
-  isHovered: boolean
-}
-
-export class LineText extends BaseText<ILineTextProps, ILineTextState> {
-  constructor(props: ILineTextProps) {
-    super(props)
-    this.state = {
-      isHovered: false,
-    }
-  }
-
-  // Hover 状态相关
-  setHoverOn = () => {
-    this.setState({
-      isHovered: true,
-    })
-  }
-  setHoverOff = () => {
-    this.setState({
-      isHovered: false,
-    })
-  }
-
-  getBackground(): h.JSX.Element | null {
-    const { isHovered } = this.state
-    const { model } = this.props
-    const { text } = model
-    const style = model.getTextStyle()
-
-    let backgroundStyle = style.background || {}
-    if (isHovered && style.hover && style.hover.background) {
-      backgroundStyle = { ...backgroundStyle, ...style.hover.background }
-    }
-
-    // 当存在文本并且文本背景不为透明时，计算背景框
-    if (text?.value && backgroundStyle?.fill !== 'transparent') {
-      const { fontSize, textWidth, lineHeight, overflowMode } = style
-      const { wrapPadding } = backgroundStyle
-      const rows = text?.value.split(/[\r\n]/g)
-      const rowsLength = rows.length
-
-      let { x, y } = text
-      let rectAttr: unknown = {}
-
-      if (overflowMode === 'autoWrap' && textWidth) {
-        const textHeight = getHtmlTextHeight({
-          rows,
-          style: {
-            fontSize: `${fontSize}px`,
-            width: `${textWidth}px`,
-            lineHeight,
-            padding: wrapPadding,
-          },
-          rowsLength,
-          className: 'lf-get-text-height',
-        })
-
-        rectAttr = {
-          ...backgroundStyle,
-          x,
-          y,
-          width: textWidth,
-          height: textHeight,
-        }
-      } else {
-        // 背景框宽度，最长一行字节数 / 2 * fontSize + 2
-        // 背景框宽度，行数 * fontSize + 2
-        let { width, height } = getSvgTextSize({ rows, rowsLength, fontSize })
-        if (overflowMode === 'ellipsis') {
-          // https://github.com/didi/LogicFlow/issues/1151
-          // 边上的文字过长（使用"ellipsis"模式）出现省略号，背景也需要进行宽度的重新计算
-
-          // 跟Text.tsx保持同样的计算逻辑(overflowMode === 'ellipsis')
-          // Text.tsx使用textRealWidth=textWidth || width
-          // Text.tsx使用foreignObjectHeight = fontSize + 2;
-          width = textWidth
-          height = fontSize + 2
-        }
-
-        // 根据设置的 padding 调整 width, height, x, y 的值
-        // TODO: 下面方法感觉可以提取成工具方法
-        if (typeof backgroundStyle.wrapPadding === 'string') {
-          let padding = backgroundStyle.wrapPadding
-            .split(',')
-            .filter((padding) => padding.trim())
-            .map((padding) => parseFloat(padding.trim()))
-
-          if (padding.length > 0 && padding.length <= 4) {
-            if (padding.length === 1) {
-              const [allSides] = padding
-              padding = [allSides, allSides, allSides, allSides]
-            } else if (padding.length === 2) {
-              const [vertical, horizontal] = padding
-              padding = [vertical, horizontal, vertical, horizontal]
-            } else if (padding.length === 3) {
-              const [top, horizontal, bottom] = padding
-              padding = [top, horizontal, bottom, horizontal]
-            }
-
-            const [top, right, bottom, left] = padding
-            width += right + left
-            height += top + bottom
-            x = x + (right - left) / 2
-            y = y + (bottom - top) / 2
-          }
-        }
-
-        rectAttr = {
-          ...backgroundStyle,
-          x: x - 1,
-          y: y - 1,
-          width,
-          height,
-        }
-      }
-
-      return <Rect {...(rectAttr as IRectProps)} />
-    }
-
-    return null
-  }
-
-  getShape(): h.JSX.Element | null {
-    const { model } = this.props
-    const {
-      text: { x, y, value },
-    } = model
-    if (!value) return null
-
-    const style = model.getTextStyle()
-    const attrs: ITextProps = {
-      x,
-      y,
-      value,
-      model,
-      className: 'lf-element-text',
-      ...style, // 透传 edgeText 属性，如：color, fontSize, fontWeight, fontFamily, textAnchor 等
-    }
-
-    return (
-      <g
-        className="lf-line-text"
-        onMouseEnter={this.setHoverOn}
-        onMouseLeave={this.setHoverOff}
-      >
-        {this.getBackground()}
-        <Text {...attrs} />
-      </g>
-    )
-  }
-}
-
-export default LineText

package/src/view/text/index.ts

@@ -1,2 +0,0 @@
-export * from './BaseText'
-export * from './LineText'