@logicflow/core 2.0.0-beta.0 → 2.0.0-beta.10

package/src/view/overlay/Grid.tsx

@@ -1,33 +1,16 @@
 import { Component } from 'preact/compat'
+import { cloneDeep, assign } from 'lodash-es'
 import { observer } from '../..'
 import { createUuid } from '../../util'
 import { GraphModel } from '../../model'
 import { DEFAULT_GRID_SIZE } from '../../constant'
 
-export type GridOptions = {
-  /**
-   * 网格格子间距
-   */
-  size?: number
-  /**
-   * 网格是否可见
-   */
-  visible?: boolean
+import GridOptions = Grid.GridOptions
 
+type IProps = GridOptions & {
   graphModel: GraphModel
-  /**
-   * 网格类型
-   * 'dot' || 'mesh'
-   */
-  type?: string
-  config?: {
-    color: string
-    thickness?: number
-  }
 }
 
-type IProps = GridOptions
-
 @observer
 export class Grid extends Component<IProps> {
   readonly id = createUuid()
@@ -38,21 +21,16 @@ export class Grid extends Component<IProps> {
 
     const { color, thickness = 2 } = config ?? {}
 
-    const length = Math.min(Math.max(1.5, thickness), size / 2) // 2 < length < size /2
-    let opacity = 1
-    if (!visible) {
-      opacity = 0
-    }
-    /* eslint-disable-next-line */
+    // 对于点状网格，点的半径不能大于网格大小的四分之一
+    const radius = Math.min(Math.max(2, thickness), size / 4)
+    const opacity = visible ? 1 : 0
     return (
-      <rect
-        width={length}
-        height={length}
-        rx={length / 2}
-        ry={length / 2}
-        fill={color}
-        opacity={opacity}
-      />
+      <g fill={color} opacity={opacity}>
+        <circle cx={0} cy={0} r={radius / 2} />
+        <circle cx={0} cy={size} r={radius / 2} />
+        <circle cx={size} cy={0} r={radius / 2} />
+        <circle cx={size} cy={size} r={radius / 2} />
+      </g>
     )
   }
 
@@ -61,22 +39,26 @@ export class Grid extends Component<IProps> {
   renderMesh() {
     const { config, size = 1, visible } = this.props
     const { color, thickness = 1 } = config ?? {}
-    const strokeWidth = Math.min(Math.max(1, thickness), size / 2) // 1 < strokeWidth < size /2
-    const d = `M ${size} 0 H0 M0 0 V0 ${size}`
-    let opacity = 1
-    if (!visible) {
-      opacity = 0
-    }
+
+    // 对于交叉线网格，线的宽度不能大于网格大小的一半
+    const strokeWidth = Math.min(Math.max(1, thickness), size / 2)
+    const d = `M 0 0 H ${size} V ${size} H 0 Z`
+    const opacity = visible ? 1 : 0
     return (
-      <path d={d} stroke={color} strokeWidth={strokeWidth} opacity={opacity} />
+      <path
+        d={d}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        opacity={opacity}
+        fill="transparent"
+      />
     )
   }
 
   render() {
-    // TODO 生成网格️️️✔、网格支持 options（size）✔
     const {
       type,
-      size,
+      size = 1,
       graphModel: { transformModel },
     } = this.props
     const { SCALE_X, SKEW_Y, SKEW_X, SCALE_Y, TRANSLATE_X, TRANSLATE_Y } =
@@ -122,14 +104,54 @@ export class Grid extends Component<IProps> {
   }
 }
 
-Grid.defaultProps = {
-  size: DEFAULT_GRID_SIZE,
-  visible: true,
-  type: 'dot',
-  config: {
-    color: '#ababab',
-    thickness: 1,
-  },
-}
+export namespace Grid {
+  export type GridOptions = {
+    /**
+     * 网格格子间距
+     */
+    size?: number
+    /**
+     * 网格是否可见
+     */
+    visible?: boolean
+    /**
+     * 网格类型
+     * - `dot` 点状网格
+     * - `mesh` 交叉线网格
+     */
+    type?: 'dot' | 'mesh'
+    config?: {
+      /**
+       * 网格的颜色
+       */
+      color: string
+      /**
+       * 网格的宽度
+       * - 对于 `dot` 点状网格，表示点的大小
+       * - 对于 `mesh` 交叉线网格，表示线的宽度
+       */
+      thickness?: number
+    }
+  }
+
+  export const defaultProps: GridOptions = {
+    size: DEFAULT_GRID_SIZE,
+    visible: true,
+    type: 'dot',
+    config: {
+      color: '#ababab',
+      thickness: 1,
+    },
+  }
 
-export default Grid
+  export function getGridOptions(options: number | boolean | GridOptions) {
+    const defaultOptions = cloneDeep(Grid.defaultProps)
+    if (typeof options === 'number') {
+      return assign(defaultOptions, { size: options })
+    } else if (typeof options === 'boolean') {
+      return assign(defaultOptions, { visible: options })
+    } else {
+      return assign(defaultOptions, options)
+    }
+  }
+}

package/src/view/overlay/ToolOverlay.tsx

@@ -35,7 +35,7 @@ export class ToolOverlay extends Component<IProps> {
       h(t, {
         textEditElement,
         graphModel,
-        logicFlow: tool.instance,
+        lf: tool.instance,
       }),
     )
     tool.components = components

package/src/view/shape/Circle.tsx

@@ -1,26 +1,40 @@
-export function Circle(props) {
+import { createElement as h } from 'preact/compat'
+import { forEach, toPairs } from 'lodash-es'
+import { LogicFlow } from '../..'
+
+export type ICircleProps = {
+  x?: number
+  y?: number
+  r?: number
+  className?: string
+} & LogicFlow.CommonTheme
+
+export function Circle(props: ICircleProps): h.JSX.Element {
   const { x = 0, y = 0, r = 4, className } = props
-  const attrs: Record<string, any> = {
+
+  const attrs: ICircleProps = {
     cx: x,
     cy: y,
     r,
     fill: 'transparent',
     fillOpacity: 1,
-    strokeWidth: '1',
+    strokeWidth: 1,
     stroke: '#000',
     strokeOpacity: 1,
   }
-  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 (className) {
     attrs.className = `lf-basic-shape ${className}`
   } else {
-    attrs.className = 'lf-shape'
+    attrs.className = `lf-basic-shape`
   }
+
   return <circle {...attrs} />
 }
 

package/src/view/shape/Ellipse.tsx

@@ -1,5 +1,18 @@
-export function Ellipse(props) {
+import { createElement as h } from 'preact/compat'
+import { forEach, toPairs } from 'lodash-es'
+import { LogicFlow } from '../..'
+
+export type IEllipseProps = {
+  x?: number
+  y?: number
+  rx?: number
+  ry?: number
+  className?: string
+} & LogicFlow.CommonTheme
+
+export function Ellipse(props: IEllipseProps): h.JSX.Element {
   const { x = 0, y = 0, rx = 4, ry = 4, className } = props
+
   const attrs: Record<string, any> = {
     cx: x,
     cy: y,
@@ -7,21 +20,22 @@ export function Ellipse(props) {
     ry,
     fill: 'transparent',
     fillOpacity: 1,
-    strokeWidth: '1',
+    strokeWidth: 1,
     stroke: '#000',
     strokeOpacity: 1,
   }
-  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 (className) {
     attrs.className = `lf-basic-shape ${className}`
   } else {
-    attrs.className = 'lf-shape'
+    attrs.className = `lf-basic-shape`
   }
+
   return <ellipse {...attrs} />
 }
 

package/src/view/shape/Line.tsx

@@ -1,23 +1,38 @@
-export function Line(props) {
-  const attrs = {
+import { createElement as h } from 'preact/compat'
+import { forEach, toPairs } from 'lodash-es'
+
+export type ILineProps = {
+  id?: string
+  tabindex?: number
+  x1?: number
+  y1?: number
+  x2?: number
+  y2?: number
+  stroke?: string // Color
+  className?: string
+  style?: h.JSX.CSSProperties
+  [key: string]: any
+}
+
+export function Line(props: ILineProps): h.JSX.Element {
+  const attrs: ILineProps = {
     // default
     x1: 10,
     y1: 10,
     x2: 20,
     y2: 20,
     stroke: 'black',
-    // ...props,
+    // ...props
   }
-  Object.entries(props).forEach(([k, v]) => {
+
+  forEach(toPairs(props), ([k, v]: [k: string, v: any]) => {
     if (k === 'style') {
       attrs[k] = v
-    } else {
-      const valueType = typeof v
-      if (valueType !== 'object') {
-        attrs[k] = v
-      }
+    } else if (typeof v !== 'object') {
+      attrs[k] = v
     }
   })
+
   return <line {...attrs} />
 }
 

package/src/view/shape/Path.tsx

@@ -1,18 +1,21 @@
-type IProps = {
+import { createElement as h } from 'preact/compat'
+import { forEach, toPairs } from 'lodash-es'
+
+export type IPathProps = {
   d: string
   [key: string]: any
 }
 
-export function Path(props: IProps) {
-  const attrs = {
+export function Path(props: IPathProps): h.JSX.Element {
+  const attrs: Record<string, any> = {
     d: '',
   }
-  Object.entries(props).forEach(([k, v]) => {
-    const valueType = typeof v
-    if (k === 'style' || valueType !== 'object') {
+  forEach(toPairs(props), ([k, v]: [key: string, v: any]) => {
+    if (k === 'style' || typeof v !== 'object') {
       attrs[k] = v
     }
   })
+
   return <path {...attrs} />
 }
 

package/src/view/shape/Polygon.tsx

@@ -1,14 +1,16 @@
-import LogicFlow from '../../LogicFlow'
+import { createElement as h } from 'preact/compat'
+import { forEach, toPairs } from 'lodash-es'
+import { LogicFlow } from '../..'
 
-// TODO: 定义基础图形的类型
 export type IPolygonProps = {
   points: LogicFlow.PointTuple[]
+  x?: number
+  y?: number
   className?: string
-  [key: string]: any
 }
 
-export function Polygon(props: IPolygonProps) {
-  const { points, className } = props
+export function Polygon(props: IPolygonProps): h.JSX.Element {
+  const { points = [], className } = props
   const attrs: Record<string, any> = {
     fill: 'transparent',
     fillOpacity: 1,
@@ -17,16 +19,17 @@ export function Polygon(props: IPolygonProps) {
     strokeOpacity: 1,
     points: '',
   }
-  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 (className) {
-    attrs.className = `lf-basic-shape ${className}`
+    attrs.classNmae = `lf-basic-shape ${className}`
   } else {
-    attrs.className = 'lf-shape'
+    attrs.className = 'lf-basic-shape'
   }
   attrs.points = points.map((point) => point.join(',')).join(' ')
 

package/src/view/shape/Polyline.tsx

@@ -1,18 +1,30 @@
-export function Polyline(props) {
-  const attrs = {
+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',
   }
-  Object.entries(props).forEach(([k, v]) => {
+
+  forEach(toPairs(props), ([k, v]: [k: string, v: unknown]) => {
     if (k === 'style') {
       attrs[k] = v
-    } else {
-      const valueType = typeof v
-      if (valueType !== 'object') {
-        attrs[k] = v
-      }
+    } else if (typeof v !== 'object') {
+      attrs[k] = v
     }
   })
+  if (className) {
+    attrs.className = `${className}`
+  }
+
   return <polyline {...attrs} />
 }
 

package/src/view/shape/Rect.tsx

@@ -1,23 +1,26 @@
-import LogicFlow from '../../LogicFlow'
+import { createElement as h } from 'preact/compat'
+import { forEach, toPairs } from 'lodash-es'
+import LogicFlow from '../..'
 
-import Point = LogicFlow.Point
-import RectSize = LogicFlow.RectSize
-
-type IRectProps = {
+export type IRectProps = {
+  x: number
+  y: number
+  width: number
+  height: number
   className?: string
-  radius?: number
-} & Point &
-  RectSize
+  radius?: LogicFlow.NumberOrPercent
+  [key: string]: any
+}
 
-export function Rect(props: IRectProps) {
-  const { x, y, width, height, className, radius } = props
+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> = {}
-  Object.entries(props).forEach(([k, v]) => {
-    const valueType = typeof v
-    if (valueType !== 'object') {
+  attrs['stroke-width'] = strokeWidth
+  forEach(toPairs(props), ([k, v]: [k: string, v: any]) => {
+    if (typeof v !== 'object') {
       attrs[k] = v
     }
   })
@@ -25,20 +28,17 @@ export function Rect(props: IRectProps) {
   if (className) {
     attrs.className = `lf-basic-shape ${className}`
   } else {
-    attrs.className = 'lf-shape'
+    attrs.className = 'lf-basic-shape'
   }
+
   if (radius) {
     attrs.rx = radius
     attrs.ry = radius
   }
   attrs.x = leftTopX
   attrs.y = leftTopY
-  return <rect {...attrs} />
-}
 
-Rect.defaultProps = {
-  className: '',
-  radius: '',
+  return <rect {...attrs} />
 }
 
 export default Rect

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>