@logicflow/core 2.0.0-beta.1 → 2.0.0-beta.3

package/src/view/shape/Text.tsx

@@ -1,37 +1,63 @@
-import { getHtmlTextHeight } from '../../util'
+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) {
+export function Text(props: ITextProps): h.JSX.Element | null {
   const {
     x = 0,
     y = 0,
     value,
-    fontSize,
+    fontSize = 12,
     fill = 'currentColor',
     overflowMode = 'default',
-    textWidth = '',
+    // TODO: 确认该 textWidth 为 '' 时跟设置什么值一致
+    textWidth = undefined,
     model,
   } = props
-  const attrs = {
-    textAnchor: 'middle',
-    'dominant-baseline': 'middle',
+
+  const attrs: Record<string, any> = {
     x,
     y,
     fill,
+    fontSize,
+    textAnchor: 'middle',
+    dominantBaseline: 'central',
     // ...props,
   }
-  Object.entries(props).forEach(([k, v]) => {
-    const valueType = typeof v
-    if (valueType !== 'object') {
+
+  forEach(toPairs(props), ([k, v]: [k: string, v: any]) => {
+    if (typeof v !== 'object') {
       attrs[k] = v
     }
   })
+
   if (value) {
-    // String(value),兼容纯数字的文案
+    // String(value)，兼容纯数字的文案
+    // TODO: 将 value 转为纯文本，移除其中 \n \r 等特殊字符，看是否应该丰富该功能
     const rows = String(value).split(/[\r\n]/g)
     const rowsLength = rows.length
+
     if (overflowMode !== 'default') {
-      // 非文本节点设置了自动换行，或边设置了自动换行并且设置了textWidth
+      // 非文本节点设置了自动换行，或者边设置了自动换行并且设置了 textWidth
       const { BaseType, modelType } = model
       if (
         (BaseType === ElementType.NODE && modelType !== ModelType.TEXT_NODE) ||
@@ -40,11 +66,12 @@ export function Text(props) {
         return renderHtmlText(props)
       }
     }
+
     if (rowsLength > 1) {
-      const tSpans = rows.map((row, i) => {
-        // 保证文字居中，文字Y轴偏移为当前行数对应中心行数的偏移行 * 行高
-        const tspanLineHeight = fontSize + 2
-        const offsetY = (i - (rowsLength - 1) / 2) * tspanLineHeight
+      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}
@@ -55,24 +82,26 @@ export function Text(props) {
     }
     return <text {...attrs}>{value}</text>
   }
-
   return null
 }
 
-function renderHtmlText(props) {
+export function renderHtmlText(props: ITextProps): h.JSX.Element {
   const {
+    x,
+    y,
     value,
-    fontSize,
     model,
-    fontFamily = '',
+    textWidth,
+    fontSize = 12,
     lineHeight,
+    fontFamily = '',
     wrapPadding = '0, 0',
     overflowMode,
-    x,
-    y,
   } = props
-  const { width, textHeight } = model
-  const textRealWidth = props.textWidth || width
+
+  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({
@@ -87,17 +116,20 @@ function renderHtmlText(props) {
     rowsLength,
     className: 'lf-get-text-height',
   })
+
   // 当文字超过边框时，取文字高度的实际值，也就是文字可以超过边框
-  let foreignObjectHeight =
-    model.height > textRealHeight ? model.height : textRealHeight
-  // 如果设置了文字高度，取设置的高度
+  let foreignObjectHeight: number =
+    (height as number) > textRealHeight ? (height as number) : textRealHeight
+  // 如果设置了文本高度，取设置的高度
   if (textHeight) {
-    foreignObjectHeight = textHeight
+    foreignObjectHeight = textHeight as number
   }
+
   const isEllipsis = overflowMode === 'ellipsis'
   if (isEllipsis) {
     foreignObjectHeight = fontSize + 2
   }
+
   return (
     <g>
       <foreignObject
@@ -105,6 +137,7 @@ function renderHtmlText(props) {
         height={foreignObjectHeight}
         x={x - textRealWidth / 2}
         y={y - foreignObjectHeight / 2}
+        style={{ overflow: 'visible', textAlign: 'left' }}
       >
         <div
           className="lf-node-text-auto-wrap"
@@ -121,12 +154,10 @@ function renderHtmlText(props) {
                 : 'lf-node-text-auto-wrap-content'
             }
             title={isEllipsis ? rows.join('') : ''}
-            style={{
-              ...props,
-            }}
+            style={{ ...(props as h.JSX.CSSProperties) }}
           >
-            {rows.map((item) => (
-              <div className="lf-node-text--auto-wrap-inner">{item}</div>
+            {rows.map((row) => (
+              <div className="lf-node-text--auto-wrap-inner">{row}</div>
             ))}
           </div>
         </div>

package/src/view/text/BaseText.tsx

@@ -1,63 +1,102 @@
-import { Component, createElement as h } from 'preact/compat'
-import { Text } from '../shape'
-import { StepDrag } from '../../util'
+import classNames from 'classnames'
+import { createElement as h, Component } from 'preact/compat'
 import { ElementState } from '../../constant'
-import { GraphModel, Model } from '../../model'
+import { GraphModel, BaseNodeModel, BaseEdgeModel } from '../../model'
+import { Text } from '../shape'
+import { IDragParams, StepDrag } from '../../util'
 
-type IProps = {
-  model: Model.BaseModel
+export type IBaseTextProps = {
+  model: BaseNodeModel | BaseEdgeModel
   graphModel: GraphModel
   draggable: boolean
   editable: boolean
 }
-type IState = {
+
+export type IBaseTextState = {
   isHovered: boolean
 }
 
-export class BaseText extends Component<IProps, IState> {
-  stepDrag: StepDrag
+export class BaseText<
+  P extends IBaseTextProps,
+  S extends IBaseTextState,
+> extends Component<P, S> {
+  stepperDrag: StepDrag
 
-  constructor(config) {
+  constructor(props: P) {
     super()
-    const { draggable } = config
-    this.stepDrag = new StepDrag({
+    const { draggable } = props
+    // TODO: 确认为什么不在 new 的时候传入 model，而在下面使用的时候赋值
+    this.stepperDrag = new StepDrag({
       onDragging: this.onDragging,
       step: 1,
+      // model,
       isStopPropagation: draggable,
     })
   }
 
   getShape(): h.JSX.Element | null {
     const { model, graphModel } = this.props
-    const { text } = model
     const { editConfigModel } = graphModel
-    const { value, x, y, editable, draggable } = text
+    const {
+      text: { value, x, y, editable, draggable },
+    } = model
     const attr = {
       x,
       y,
       className: '',
       value,
     }
-    if (editable) {
-      attr.className = 'lf-element-text'
-    } else if (draggable || editConfigModel.nodeTextDraggable) {
-      attr.className = 'lf-text-draggable'
-    } else {
-      attr.className = 'lf-text-disabled'
-    }
+    // 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()
-    return <Text {...attr} {...style} model={model} />
+    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: MouseEvent) => {
+    const { draggable, model, graphModel } = this.props
+    const {
+      editConfigModel: { nodeTextDraggable },
+    } = graphModel
+
+    if (draggable || nodeTextDraggable) {
+      this.stepperDrag.model = model
+      this.stepperDrag.handleMouseDown(e)
+    }
   }
 
-  onDragging = ({ deltaX, deltaY }) => {
+  onDragging = ({ deltaX, deltaY }: IDragParams) => {
     const {
       model,
       graphModel: { transformModel },
     } = this.props
-    const [curDeltaX, curDeltaY] = transformModel.fixDeltaXY(deltaX, deltaY)
-    model.moveText(curDeltaX, curDeltaY)
+
+    if (deltaX && deltaY) {
+      const [curDeltaX, curDeltaY] = transformModel.fixDeltaXY(deltaX, deltaY)
+      model.moveText(curDeltaX, curDeltaY)
+    }
   }
-  dblClickHandler = () => {
+
+  dbClickHandler = () => {
     // 静默模式下，双击不更改状态，不可编辑
     const { editable } = this.props
     if (editable) {
@@ -65,27 +104,14 @@ export class BaseText extends Component<IProps, IState> {
       model.setElementState(ElementState.TEXT_EDIT)
     }
   }
-  mouseDownHandle = (ev: MouseEvent) => {
-    const {
-      draggable,
-      model,
-      graphModel: {
-        editConfigModel: { nodeTextDraggable },
-      },
-    } = this.props
-    if (draggable || nodeTextDraggable) {
-      this.stepDrag.model = model
-      this.stepDrag.handleMouseDown(ev)
-    }
-  }
 
-  render() {
+  render(): h.JSX.Element | undefined {
     const {
       model: { text },
     } = this.props
     if (text) {
       return (
-        <g onMouseDown={this.mouseDownHandle} onDblClick={this.dblClickHandler}>
+        <g onMouseDown={this.mouseDownHandler} onDblClick={this.dbClickHandler}>
           {this.getShape()}
         </g>
       )

package/src/view/text/LineText.tsx

@@ -1,40 +1,62 @@
-import Text from '../shape/Text'
-import Rect from '../shape/Rect'
-import BaseText from './BaseText'
-import { BaseEdgeModel } from '../../model'
-import {
-  getBytesLength,
-  getHtmlTextHeight,
-  getSvgTextWidthHeight,
-} from '../../util'
-
-export class LineText extends BaseText {
-  constructor(config) {
-    super(config)
+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,
     }
   }
 
-  getBackground() {
-    const model = this.props.model as BaseEdgeModel
+  // 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()
-    const { text, width: modelWidth } = model
+
     let backgroundStyle = style.background || {}
-    const { isHovered } = this.state
-    if (isHovered && style?.hover && style?.hover.background) {
-      backgroundStyle = { ...backgroundStyle, ...style?.hover.background }
+    if (isHovered && style.hover && style.hover.background) {
+      backgroundStyle = { ...backgroundStyle, ...style.hover.background }
     }
-    // 存在文本并且文本背景不为透明时计算背景框
-    if (text && text.value && backgroundStyle.fill !== 'transparent') {
-      const { fontSize, overflowMode, lineHeight, wrapPadding, textWidth } =
-        style ?? {}
-      const { value } = text
-      let { x, y } = text
-      const rows = String(value).split(/[\r\n]/g)
-      // 计算行数
+
+    // 当存在文本并且文本背景不为透明时，计算背景框
+    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 rectAttr
+
+      let { x, y } = text
+      let rectAttr: unknown = {}
+
       if (overflowMode === 'autoWrap' && textWidth) {
         const textHeight = getHtmlTextHeight({
           rows,
@@ -47,30 +69,18 @@ export class LineText extends BaseText {
           rowsLength,
           className: 'lf-get-text-height',
         })
+
         rectAttr = {
           ...backgroundStyle,
-          x: x - 1,
-          y: y - 1,
+          x,
+          y,
           width: textWidth,
           height: textHeight,
         }
       } else {
-        // 计算文本中最长的一行的字节数
-        let longestBytes = 0
-        rows &&
-          rows.forEach((item) => {
-            const rowByteLength = getBytesLength(item)
-            longestBytes =
-              rowByteLength > longestBytes ? rowByteLength : longestBytes
-          })
-        // 背景框宽度，最长一行字节数/2 * fontsize + 2
-        // 背景框宽度， 行数 * fontsize + 2
-        let { width, height } = getSvgTextWidthHeight({
-          rows,
-          fontSize,
-          rowsLength,
-        })
-
+        // 背景框宽度，最长一行字节数 / 2 * fontSize + 2
+        // 背景框宽度，行数 * fontSize + 2
+        let { width, height } = getSvgTextSize({ rows, rowsLength, fontSize })
         if (overflowMode === 'ellipsis') {
           // https://github.com/didi/LogicFlow/issues/1151
           // 边上的文字过长（使用"ellipsis"模式）出现省略号，背景也需要进行宽度的重新计算
@@ -78,30 +88,38 @@ export class LineText extends BaseText {
           // 跟Text.tsx保持同样的计算逻辑(overflowMode === 'ellipsis')
           // Text.tsx使用textRealWidth=textWidth || width
           // Text.tsx使用foreignObjectHeight = fontSize + 2;
-          width = textWidth || (modelWidth as number)
+          width = textWidth
           height = fontSize + 2
         }
 
-        // 根据设置的padding调整width, height, x, y的值
+        // 根据设置的 padding 调整 width, height, x, y 的值
+        // TODO: 下面方法感觉可以提取成工具方法
         if (typeof backgroundStyle.wrapPadding === 'string') {
-          let paddings = backgroundStyle.wrapPadding
+          let padding = backgroundStyle.wrapPadding
             .split(',')
             .filter((padding) => padding.trim())
             .map((padding) => parseFloat(padding.trim()))
-          if (paddings.length > 0 && paddings.length <= 4) {
-            if (paddings.length === 1) {
-              paddings = [paddings[0], paddings[0], paddings[0], paddings[0]]
-            } else if (paddings.length === 2) {
-              paddings = [paddings[0], paddings[1], paddings[0], paddings[1]]
-            } else if (paddings.length === 3) {
-              paddings = [paddings[0], paddings[1], paddings[2], paddings[1]]
+
+          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]
             }
-            width += paddings[1] + paddings[3]
-            height += paddings[0] + paddings[2]
-            x = x + (paddings[1] - paddings[3]) / 2
-            y = y + (paddings[2] - paddings[0]) / 2
+
+            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,
@@ -110,42 +128,38 @@ export class LineText extends BaseText {
           height,
         }
       }
-      return <Rect {...rectAttr} />
+
+      return <Rect {...(rectAttr as IRectProps)} />
     }
-  }
 
-  setHoverON = () => {
-    this.setState({
-      isHovered: true,
-    })
-  }
-  setHoverOFF = () => {
-    this.setState({
-      isHovered: false,
-    })
+    return null
   }
 
-  getShape() {
+  getShape(): h.JSX.Element | null {
     const { model } = this.props
-    const { text } = model
-    const { value, x, y } = text
+    const {
+      text: { x, y, value },
+    } = model
     if (!value) return null
+
     const style = model.getTextStyle()
-    const attr = {
+    const attrs: ITextProps = {
       x,
       y,
-      className: 'lf-element-text',
       value,
-      ...style, // 透传 edgeText 属性, 如 color fontSize fontWeight fontFamily textAnchor 等
+      model,
+      className: 'lf-element-text',
+      ...style, // 透传 edgeText 属性，如：color, fontSize, fontWeight, fontFamily, textAnchor 等
     }
+
     return (
       <g
         className="lf-line-text"
-        onMouseEnter={this.setHoverON}
-        onMouseLeave={this.setHoverOFF}
+        onMouseEnter={this.setHoverOn}
+        onMouseLeave={this.setHoverOff}
       >
         {this.getBackground()}
-        <Text {...attr} model={model} />
+        <Text {...attrs} />
       </g>
     )
   }