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

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)
+    }
+  }
+}