Skip to content

Commit

Permalink
refactor: remove disabled, update props name, update NodeTypes enum(#…
Browse files Browse the repository at this point in the history 
…1155)
  • Loading branch information
@soulwu
soulwu authored Feb 22, 2021
1 parent f923420 commit 43972ba
Show file tree
Hide file tree
Showing 6 changed files with 79 additions and 110 deletions.
37 changes: 22 additions & 15 deletions packages/react-logic-diagram/docs/api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,25 @@ order: 0

# LogicDiagram

| 属性 | 类型 | 是否必须 | 默认值 | 说明 |
| ------------------- | ------------------------------------------------------------------ | -------- | ------------ | ---------------------------------------------------------------- |
| renderNode | `(path: string, type: NodeTypes, data: Object) => React.ReactNode` | 是 | | 节点渲染回调函数，可根据节点路径、类型定制渲染结果 |
| data | `Object` | 否 | `{}` | |
| disabled | `boolean` | 否 | `false` | 是否处于禁用模式，禁用模式下不会渲染 NodeTypes.ACTION 类型的节点 |
| childrenKey | `string` | 否 | `'children'` | 子节点数据键名 |
| nonLeafNodeWidth | `number` | 否 | `100` | 非叶子节点的宽度 |
| nodeHeight | `number` | 否 | `40` | 节点的高度 |
| nodeSpaceVertical | `number` | 否 | `16` | 节点垂直方向上的间距 |
| nodeSpaceHorizontal | `number` | 否 | `38` | 节点水平方向上的间距 |
| linkColor | `string` | 否 | `#dedede` | 连接线颜色 |
| className | `string` | 否 | | 容器样式类名 |
| style | `React.CSSProperties` | 否 | | 容器样式 |
| innerClassName | `string` | 否 | | 内层容器样式类名 |
| innerStyle | `React.CSSProperties` | 否 | | 内层容器样式 |
| 属性 | 类型 | 是否必须 | 默认值 | 说明 |
| ---------------- | ------------------------------------------------------------------ | -------- | ------------ | -------------------------------------------------- |
| renderNode | `(path: string, type: NodeTypes, data: Object) => React.ReactNode` | 是 | | 节点渲染回调函数，可根据节点路径、类型定制渲染结果 |
| data | `Object` | 否 | `{}` | |
| childrenKey | `string` | 否 | `'children'` | 子节点数据键名 |
| nonLeafNodeWidth | `number` | 否 | `100` | 非叶子节点的宽度 |
| nodeHeight | `number` | 否 | `40` | 节点的高度 |
| nodeMarginY | `number` | 否 | `16` | 节点垂直方向上的间距 |
| nodeMarginX | `number` | 否 | `38` | 节点水平方向上的间距 |
| linkColor | `string` | 否 | `#dedede` | 连接线颜色 |
| className | `string` | 否 | | 容器样式类名 |
| style | `React.CSSProperties` | 否 | | 容器样式 |
| innerClassName | `string` | 否 | | 内层容器样式类名 |
| innerStyle | `React.CSSProperties` | 否 | | 内层容器样式 |

# NodeTypes

在 `renderNode` 中可以根据节点类型区分渲染逻辑

- `NodeTypes.NON_LEAF` 非叶子节点
- `NodeTypes.LEAF` 叶子节点
- `NodeTypes.EXTRA` 额外节点
5 changes: 2 additions & 3 deletions packages/react-logic-diagram/docs/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,6 @@ export default () => {
}
return (
<LogicDiagram
disabled
data={{
logicOperator: '||',
children: [
Expand All @@ -66,13 +65,13 @@ export default () => {
nonLeafNodeWidth={48}
renderNode={(path, type, data) => {
switch (type) {
case NodeTypes.RELATION:
case NodeTypes.NON_LEAF:
return (
<div style={{ lineHeight: '24px', padding: 8 }}>
{logicOperatorMap[data.logicOperator]}
</div>
)
case NodeTypes.RULE:
case NodeTypes.LEAF:
return (
<div style={{ lineHeight: '24px', padding: 8 }}>
<span>{data.field}</span>
Expand Down
13 changes: 7 additions & 6 deletions packages/react-logic-diagram/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
"main": "lib",
"module": "esm",
"umd:main": "dist/formily.react-logic-diagram.umd.production.js",
"unpkg": "dist/formily.react-logic-diagram.umd.production.js",
"jsdelivr": "dist/formily.react-logic-diagram.umd.production.js",
"jsnext:main": "esm",
"unpkg": "dist/formily.react-logic-diagram.umd.production.js",
"jsdelivr": "dist/formily.react-logic-diagram.umd.production.js",
"jsnext:main": "esm",
"types": "esm/index.d.ts",
"repository": {
"type": "git",
Expand Down Expand Up @@ -36,11 +36,12 @@
"@types/react": ">=16.8.0 || >=17.0.0",
"@types/react-dom": ">=16.8.0 || >=17.0.0",
"react": ">=16.8.0 || >=17.0.0",
"react-dom": ">=16.8.0 || >=17.0.0"
"react-dom": ">=16.8.0 || >=17.0.0"
},
"devDependencies": {
"dumi": "^1.1.0-rc.8"
},
"@types/d3-hierarchy": "^2.0.0",
"dumi": "^1.1.0-rc.8"
},
"dependencies": {
"d3-hierarchy": "^2.0.0"
}
Expand Down
117 changes: 38 additions & 79 deletions packages/react-logic-diagram/src/components/LogicDiagram.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,23 @@
import React, { useMemo } from 'react'
import React from 'react'
import { hierarchy, HierarchyNode } from 'd3-hierarchy'
import { ILogicDiagramProps, NodeTypes } from '../types'
import { Link } from './Link'

const ACTION_TYPE = Symbol('ACTION')

export const LogicDiagram: React.FC<ILogicDiagramProps> = ({
data,
disabled,
childrenKey = 'children',
nonLeafNodeWidth = 100,
nodeHeight = 40,
nodeSpaceVertical = 16,
nodeSpaceHorizontal = 38,
nodeMarginY = 16,
nodeMarginX = 38,
renderNode,
linkColor,
className,
style,
innerClassName,
innerStyle,
}) => {
const patchActionNodes = (nodes: any[]): any[] => {
if (disabled) {
return nodes
}
return [
...nodes.map((node) => {
if (!node[childrenKey] || node[childrenKey].length === 0) {
return node
}
return {
...node,
[childrenKey]: patchActionNodes(node[childrenKey]),
}
}),
{
[ACTION_TYPE]: true,
},
]
}

const root = useMemo(() => {
const finalValue = {
...data,
[childrenKey]: patchActionNodes(data?.[childrenKey] ?? []),
}
return hierarchy<any>(finalValue, (d) => d[childrenKey])
}, [data, disabled, childrenKey])
const root = hierarchy<any>(data, (d) => d[childrenKey])

const nodes = root.descendants()
const leaves = root.leaves()
Expand All @@ -71,12 +42,12 @@ export const LogicDiagram: React.FC<ILogicDiagramProps> = ({
}

const getNodeX = (node: HierarchyNode<any>) => {
return node.depth * (nonLeafNodeWidth + nodeSpaceHorizontal)
return node.depth * (nonLeafNodeWidth + nodeMarginX)
}

const getNodeY = (node: HierarchyNode<any>): number => {
if (!node.children || node.children.length === 0) {
return leaves.indexOf(node) * (nodeHeight + nodeSpaceVertical)
return leaves.indexOf(node) * (nodeHeight + nodeMarginY)
}
return (
(getNodeY(node.children[0]) +
Expand Down Expand Up @@ -109,52 +80,40 @@ export const LogicDiagram: React.FC<ILogicDiagramProps> = ({
height: nodeHeight,
}}
>
{renderNode(path, NodeTypes.RELATION, node.data)}
{renderNode(path, NodeTypes.NON_LEAF, node.data)}
</div>
)
result.push(rootEle)
} else {
const index = node.parent.children.indexOf(node)
if (!disabled) {
// drop 节点
const dropY =
index === 0
? y - nodeSpaceVertical
: y -
(y -
(getNodeY(node.parent.children[index - 1]) + nodeHeight) +
nodeSpaceVertical) /
2
const dropEle = (
<div
key={`${path}-drop`}
style={{
...nodeStyle,
left: x,
top: dropY,
width: nonLeafNodeWidth,
height: nodeSpaceVertical,
}}
>
{renderNode(path, NodeTypes.DROP, node.data)}
</div>
)
result.push(dropEle)
}
// extra 节点，定位在同级别的上下两个节点之间，或者是最上节点的顶部。常见用于作为拖拽时的目标drop节点
const extraY =
index === 0
? y - nodeMarginY
: y -
(y -
(getNodeY(node.parent.children[index - 1]) + nodeHeight) +
nodeMarginY) /
2
const extraEle = (
<div
key={`${path}-drop`}
style={{
...nodeStyle,
left: x,
top: extraY,
width: nonLeafNodeWidth,
height: nodeMarginY,
}}
>
{renderNode(path, NodeTypes.EXTRA, node.data)}
</div>
)
result.push(extraEle)

let ele
if (node.data[ACTION_TYPE]) {
// action 节点
ele = (
<div
key={path}
style={{ ...nodeStyle, left: x, top: y, height: nodeHeight }}
>
{renderNode(path, NodeTypes.ACTION, node.data)}
</div>
)
} else if (node.children && node.children.length) {
// relation 节点
if (node.children && node.children.length) {
// 非叶子节点
ele = (
<div
key={path}
Expand All @@ -166,17 +125,17 @@ export const LogicDiagram: React.FC<ILogicDiagramProps> = ({
height: nodeHeight,
}}
>
{renderNode(path, NodeTypes.RELATION, node.data)}
{renderNode(path, NodeTypes.NON_LEAF, node.data)}
</div>
)
} else {
// rule 节点
// 叶子节点
ele = (
<div
key={path}
style={{ ...nodeStyle, left: x, top: y, height: nodeHeight }}
>
{renderNode(path, NodeTypes.RULE, node.data)}
{renderNode(path, NodeTypes.LEAF, node.data)}
</div>
)
}
Expand Down Expand Up @@ -217,8 +176,8 @@ export const LogicDiagram: React.FC<ILogicDiagramProps> = ({
boxSizing: 'border-box',
position: 'relative',
height:
leaves.length * (nodeHeight + nodeSpaceVertical) -
nodeSpaceVertical,
leaves.length * (nodeHeight + nodeMarginY) -
nodeMarginY,
...innerStyle,
}}
>
Expand Down
12 changes: 5 additions & 7 deletions packages/react-logic-diagram/src/types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
export enum NodeTypes {
RELATION = 'relation',
RULE = 'rule',
ACTION = 'action',
DROP = 'drop',
NON_LEAF = 'non_leaf',
LEAF = 'leaf',
EXTRA = 'extra',
}

export type RenderNodeFN = (
Expand All @@ -13,12 +12,11 @@ export type RenderNodeFN = (

export interface ILogicDiagramProps {
data?: any
disabled?: boolean
childrenKey?: string
nonLeafNodeWidth?: number
nodeHeight?: number
nodeSpaceVertical?: number
nodeSpaceHorizontal?: number
nodeMarginY?: number
nodeMarginX?: number
renderNode: RenderNodeFN
linkColor?: string
className?: string
Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3038,6 +3038,11 @@
dependencies:
"@types/node" "*"

"@types/d3-hierarchy@^2.0.0":
version "2.0.0"
resolved "https://registry.npm.taobao.org/@types/d3-hierarchy/download/@types/d3-hierarchy-2.0.0.tgz#92079d9dbcec1dfe2736fb050a8bf916e5850a1c"
integrity sha1-kgednbzsHf4nNvsFCov5FuWFChw=

"@types/debug@4.1.5":
version "4.1.5"
resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.5.tgz#b14efa8852b7768d898906613c23f688713e02cd"
Expand Down

0 comments on commit 43972ba

Please sign in to comment.