From eb5b022f8f8bdc524928699e71aca777487197a4 Mon Sep 17 00:00:00 2001 From: soulwu Date: Mon, 22 Feb 2021 15:57:02 +0800 Subject: [PATCH 1/2] =?UTF-8?q?refactor:=20=E7=A7=BB=E9=99=A4disabled,=20?= =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=B1=9E=E6=80=A7=E5=91=BD=E5=90=8D,=20?= =?UTF-8?q?=E8=B0=83=E6=95=B4=20NodeTypes=20=E6=9E=9A=E4=B8=BE=E5=80=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-logic-diagram/docs/api.md | 37 +++--- packages/react-logic-diagram/docs/index.md | 5 +- packages/react-logic-diagram/package.json | 13 +- .../src/components/LogicDiagram.tsx | 115 ++++++------------ packages/react-logic-diagram/src/types.ts | 12 +- 5 files changed, 73 insertions(+), 109 deletions(-) diff --git a/packages/react-logic-diagram/docs/api.md b/packages/react-logic-diagram/docs/api.md index 6c0fe9612b9..8c3edbb22d0 100644 --- a/packages/react-logic-diagram/docs/api.md +++ b/packages/react-logic-diagram/docs/api.md @@ -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` 额外节点 diff --git a/packages/react-logic-diagram/docs/index.md b/packages/react-logic-diagram/docs/index.md index a56a814fd7d..1e6b2023afa 100644 --- a/packages/react-logic-diagram/docs/index.md +++ b/packages/react-logic-diagram/docs/index.md @@ -48,7 +48,6 @@ export default () => { } return ( { nonLeafNodeWidth={48} renderNode={(path, type, data) => { switch (type) { - case NodeTypes.RELATION: + case NodeTypes.NON_LEAF: return (
{logicOperatorMap[data.logicOperator]}
) - case NodeTypes.RULE: + case NodeTypes.LEAF: return (
{data.field} diff --git a/packages/react-logic-diagram/package.json b/packages/react-logic-diagram/package.json index ea9f8ed96ed..129e296a897 100644 --- a/packages/react-logic-diagram/package.json +++ b/packages/react-logic-diagram/package.json @@ -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", @@ -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" } diff --git a/packages/react-logic-diagram/src/components/LogicDiagram.tsx b/packages/react-logic-diagram/src/components/LogicDiagram.tsx index 9c617a722f8..452f70426d7 100644 --- a/packages/react-logic-diagram/src/components/LogicDiagram.tsx +++ b/packages/react-logic-diagram/src/components/LogicDiagram.tsx @@ -3,16 +3,13 @@ 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 = ({ data, - disabled, childrenKey = 'children', nonLeafNodeWidth = 100, nodeHeight = 40, - nodeSpaceVertical = 16, - nodeSpaceHorizontal = 38, + nodeMarginY = 16, + nodeMarginX = 38, renderNode, linkColor, className, @@ -20,33 +17,7 @@ export const LogicDiagram: React.FC = ({ 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(finalValue, (d) => d[childrenKey]) - }, [data, disabled, childrenKey]) + const root = hierarchy(data, (d) => d[childrenKey]) const nodes = root.descendants() const leaves = root.leaves() @@ -71,12 +42,12 @@ export const LogicDiagram: React.FC = ({ } const getNodeX = (node: HierarchyNode) => { - return node.depth * (nonLeafNodeWidth + nodeSpaceHorizontal) + return node.depth * (nonLeafNodeWidth + nodeMarginX) } const getNodeY = (node: HierarchyNode): 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]) + @@ -109,52 +80,40 @@ export const LogicDiagram: React.FC = ({ height: nodeHeight, }} > - {renderNode(path, NodeTypes.RELATION, node.data)} + {renderNode(path, NodeTypes.NON_LEAF, node.data)}
) 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 = ( -
- {renderNode(path, NodeTypes.DROP, node.data)} -
- ) - result.push(dropEle) - } + // extra 节点，定位在同级别的上下两个节点之间，或者是最上节点的顶部。常见用于作为拖拽时的目标drop节点 + const extraY = + index === 0 + ? y - nodeMarginY + : y - + (y - + (getNodeY(node.parent.children[index - 1]) + nodeHeight) + + nodeMarginY) / + 2 + const extraEle = ( +
+ {renderNode(path, NodeTypes.EXTRA, node.data)} +
+ ) + result.push(extraEle) let ele - if (node.data[ACTION_TYPE]) { - // action 节点 - ele = ( -
- {renderNode(path, NodeTypes.ACTION, node.data)} -
- ) - } else if (node.children && node.children.length) { - // relation 节点 + if (node.children && node.children.length) { + // 非叶子节点 ele = (
= ({ height: nodeHeight, }} > - {renderNode(path, NodeTypes.RELATION, node.data)} + {renderNode(path, NodeTypes.NON_LEAF, node.data)}
) } else { - // rule 节点 + // 叶子节点 ele = (
- {renderNode(path, NodeTypes.RULE, node.data)} + {renderNode(path, NodeTypes.LEAF, node.data)}
) } @@ -217,8 +176,8 @@ export const LogicDiagram: React.FC = ({ boxSizing: 'border-box', position: 'relative', height: - leaves.length * (nodeHeight + nodeSpaceVertical) - - nodeSpaceVertical, + leaves.length * (nodeHeight + nodeMarginY) - + nodeMarginY, ...innerStyle, }} > diff --git a/packages/react-logic-diagram/src/types.ts b/packages/react-logic-diagram/src/types.ts index 70a780d98c5..58781dbab9e 100644 --- a/packages/react-logic-diagram/src/types.ts +++ b/packages/react-logic-diagram/src/types.ts @@ -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 = ( @@ -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 From 4b128c44afb94d92f507dc89a5588df26996a21b Mon Sep 17 00:00:00 2001 From: soulwu Date: Mon, 22 Feb 2021 17:31:10 +0800 Subject: [PATCH 2/2] fix: lint issue --- packages/react-logic-diagram/src/components/LogicDiagram.tsx | 2 +- yarn.lock | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/react-logic-diagram/src/components/LogicDiagram.tsx b/packages/react-logic-diagram/src/components/LogicDiagram.tsx index 452f70426d7..cb70c02e00c 100644 --- a/packages/react-logic-diagram/src/components/LogicDiagram.tsx +++ b/packages/react-logic-diagram/src/components/LogicDiagram.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from 'react' +import React from 'react' import { hierarchy, HierarchyNode } from 'd3-hierarchy' import { ILogicDiagramProps, NodeTypes } from '../types' import { Link } from './Link' diff --git a/yarn.lock b/yarn.lock index c0eb720b31c..6cd9220aa8c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"