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

package/src/options.ts

@@ -1,15 +1,17 @@
 import { assign } from 'lodash-es'
 import { createElement as h } from 'preact/compat'
 import LogicFlow from './LogicFlow'
-import { GraphModel } from './model'
 import { KeyboardDef } from './keyboard'
-import { DEFAULT_GRID_SIZE, OverlapMode } from './constant'
+import { OverlapMode } from './constant'
+import { Grid } from './view/overlay'
+
+import GridOptions = Grid.GridOptions
 
 export namespace Options {
   import NodeData = LogicFlow.NodeData
   import EdgeData = LogicFlow.EdgeData
-  import ExtensionConstructor = LogicFlow.ExtensionConstructor
   import GraphData = LogicFlow.GraphData
+  import ExtensionType = LogicFlow.ExtensionType
   export type EdgeType = 'line' | 'polyline' | 'bezier' | string
   export type BackgroundConfig = {
     // 背景图片地址
@@ -25,19 +27,6 @@ export namespace Options {
     // TODO: 根据具体情况添加各种自定义样式
     [key: string]: any
   }
-  export type GridOptions = {
-    // 网格格子间距
-    size?: number
-    // 网格是否可见
-    visible?: boolean
-    graphModel?: GraphModel
-    // 网格类型
-    type?: 'dot' | 'mesh'
-    config?: {
-      color: string
-      thickness?: number
-    }
-  }
 
   export type AnimationConfig = {
     node: boolean
@@ -68,6 +57,9 @@ export namespace Options {
     width?: number
     height?: number
     background?: false | BackgroundConfig
+    /**
+     * Grid 网格配置
+     */
     grid?: number | boolean | GridOptions
 
     partial?: boolean
@@ -96,7 +88,7 @@ export namespace Options {
     guards?: GuardsConfig
     overlapMode?: OverlapMode
 
-    plugins?: ExtensionConstructor[]
+    plugins?: ExtensionType[]
     pluginsOptions?: Record<string, any>
     disabledPlugins?: string[]
     disabledTools?: string[]
@@ -117,7 +109,7 @@ export namespace Options {
 
 export namespace Options {
   export function get(options: Partial<Manual>) {
-    const { grid, ...others } = options
+    const { ...others } = options
     const container = options.container
     if (container != null) {
       if (options.width == null) {
@@ -134,29 +126,6 @@ export namespace Options {
 
     const result = assign({}, defaults, others) as Options.Definition
 
-    const defaultGrid: GridOptions = {
-      size: DEFAULT_GRID_SIZE,
-      type: 'dot',
-      visible: true,
-      config: {
-        color: '#ababab',
-        thickness: 1,
-      },
-    }
-    if (typeof grid === 'number') {
-      result.grid = {
-        ...defaultGrid,
-        size: grid,
-      }
-    } else if (typeof grid === 'boolean') {
-      result.grid = {
-        ...defaultGrid,
-        visible: grid,
-      }
-    } else {
-      result.grid = { ...defaultGrid, ...grid }
-    }
-
     return result
   }
 }

package/src/view/Graph.tsx

@@ -68,7 +68,7 @@ class Graph extends Component<IGraphProps> {
     if (options.height) {
       style.height = `${graphModel.height}px`
     }
-    const grid = options.grid as any // TODO: fix type
+    const grid = options.grid && Grid.getGridOptions(options.grid)
     const { fakeNode, editConfigModel } = graphModel
     const { adjustEdge } = editConfigModel
 
@@ -95,7 +95,7 @@ class Graph extends Component<IGraphProps> {
         {options.background && (
           <BackgroundOverlay background={options.background} />
         )}
-        {options.grid && <Grid {...grid} graphModel={graphModel} />}
+        {grid && <Grid {...grid} graphModel={graphModel} />}
       </div>
     )
   }

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