Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: 移除disabled, 调整属性命名, 调整 NodeTypes 枚举值 #1155

Merged
merged 2 commits into from
Feb 22, 2021
Merged

refactor: 移除disabled, 调整属性命名, 调整 NodeTypes 枚举值 #1155

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eb5b022
refactor: 移除disabled, 调整属性命名, 调整 NodeTypes 枚举值
soulwu Feb 22, 2021
4b128c4
fix: lint issue
soulwu Feb 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 22 additions & 15 deletions packages/react-logic-diagram/docs/api.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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