diff --git a/docs/guide/demos/autoLayout/demo1.tsx b/docs/guide/demos/autoLayout/demo1.tsx index 32c51fa..8a068c8 100644 --- a/docs/guide/demos/autoLayout/demo1.tsx +++ b/docs/guide/demos/autoLayout/demo1.tsx @@ -4,11 +4,13 @@ */ import { FlowView } from '@ant-design/pro-flow'; import { edges, nodes } from './data/demo1data'; -import './index.less'; +import useStyles from './index.style'; function App() { + const { styles } = useStyles(); + return ( -
+
); diff --git a/docs/guide/demos/autoLayout/demo2.tsx b/docs/guide/demos/autoLayout/demo2.tsx index 77c7470..c4aeaec 100644 --- a/docs/guide/demos/autoLayout/demo2.tsx +++ b/docs/guide/demos/autoLayout/demo2.tsx @@ -4,11 +4,13 @@ */ import { FlowView } from '@ant-design/pro-flow'; import { edges, nodes } from './data/demo2data'; -import './index.less'; +import useStyles from './index.style'; function App() { + const { styles } = useStyles(); + return ( -
+
); diff --git a/docs/guide/demos/autoLayout/index.less b/docs/guide/demos/autoLayout/index.less deleted file mode 100644 index bc08136..0000000 --- a/docs/guide/demos/autoLayout/index.less +++ /dev/null @@ -1,4 +0,0 @@ -.container { - width: 100%; - height: 600px; -} diff --git a/docs/guide/demos/autoLayout/index.style.ts b/docs/guide/demos/autoLayout/index.style.ts index 53fae6b..995eb00 100644 --- a/docs/guide/demos/autoLayout/index.style.ts +++ b/docs/guide/demos/autoLayout/index.style.ts @@ -4,7 +4,7 @@ const useStyles = createStyles(() => { return { container: { width: '100%', - height: '600px', + height: '400px', }, }; }); diff --git a/docs/guide/demos/baseIntro/coreEdge.tsx b/docs/guide/demos/baseIntro/coreEdge.tsx index 8d869f3..94d15bc 100644 --- a/docs/guide/demos/baseIntro/coreEdge.tsx +++ b/docs/guide/demos/baseIntro/coreEdge.tsx @@ -5,16 +5,17 @@ import { FlowPanel, FlowView } from '@ant-design/pro-flow'; import { Button } from 'antd'; import { useState } from 'react'; -import './css/index.less'; +import useStyles from './css/index.style'; import { getEdges, nodes } from './data/coreEdgeData'; const edgeTypes = ['straight', 'step', 'bezier', 'smoothstep', 'radius']; function App() { const [edgeType, setEdgeType] = useState('straight'); + const { styles } = useStyles(); return ( -
+
{edgeTypes.map((type) => ( diff --git a/docs/guide/demos/baseIntro/coreHandle.tsx b/docs/guide/demos/baseIntro/coreHandle.tsx index 9b2242a..9e42acb 100644 --- a/docs/guide/demos/baseIntro/coreHandle.tsx +++ b/docs/guide/demos/baseIntro/coreHandle.tsx @@ -3,7 +3,7 @@ */ import { FlowView, Handle, Position } from '@ant-design/pro-flow'; import { FC } from 'react'; -import './css/index.less'; +import useStyles from './css/index.style'; const CustomNode: FC<{ data: { @@ -48,8 +48,10 @@ const nodes = [ const nodeTypes = { customNode: CustomNode }; function App() { + const { styles } = useStyles(); + return ( -
+
); diff --git a/docs/guide/demos/baseIntro/coreNode.tsx b/docs/guide/demos/baseIntro/coreNode.tsx index 0e95a9c..4e3c47d 100644 --- a/docs/guide/demos/baseIntro/coreNode.tsx +++ b/docs/guide/demos/baseIntro/coreNode.tsx @@ -2,7 +2,7 @@ * compact: true */ import { FlowView } from '@ant-design/pro-flow'; -import styled from 'styled-components'; +import useStyles from './css/index.style'; const nodes = [ { @@ -16,16 +16,13 @@ const nodes = [ ]; function App() { + const { styles } = useStyles(); + return ( - +
- +
); } export default App; - -const Container = styled.div` - width: 100%; - height: 300px; -`; diff --git a/docs/guide/demos/baseIntro/css/customerNode.less b/docs/guide/demos/baseIntro/css/customerNode.less deleted file mode 100644 index 5fa4ecd..0000000 --- a/docs/guide/demos/baseIntro/css/customerNode.less +++ /dev/null @@ -1,110 +0,0 @@ -.customerWrap { - width: 260px; - min-height: 100px; - background-color: #f6f8fa; - padding: 16px; - box-sizing: border-box; - border-radius: 8px; - - .handle { - top: 0; - } - - .stepTitle { - overflow: hidden; - color: #8c8c8c; - white-space: nowrap; - text-overflow: ellipsis; - } - .pipeNode { - margin-top: 10px; - width: 232px; - box-sizing: border-box; - border: 1px solid rgba(0, 0, 0, 0.08); - border-radius: 8px; - - .mainBox { - width: 100%; - padding: 12px; - height: 70px; - background-color: white; - display: flex; - border-bottom: none; - border-radius: 8px; - box-sizing: border-box; - .logo { - img { - width: 16px; - height: 16px; - margin-top: 4px; - } - } - .wrap { - margin-left: 8px; - display: flex; - flex-direction: column; - .title { - color: #000; - font-weight: 500; - font-size: 14px; - line-height: 22px; - white-space: nowrap; - } - .des { - margin-top: 8px; - color: #00000073; - font-size: 12px; - } - } - } - } - - .children { - display: flex; - flex-direction: column; - align-items: center; - padding-bottom: 10px; - - .childrenBox { - width: 200px; - padding: 12px; - height: 70px; - background-color: white; - display: flex; - border: 1px solid rgba(0, 0, 0, 0.08); - border-radius: 8px; - box-sizing: border-box; - margin-top: 10px; - - .logo { - img { - width: 16px; - height: 16px; - margin-top: 4px; - } - } - .wrap { - margin-left: 8px; - display: flex; - flex-direction: column; - .title { - color: #000; - font-weight: 500; - font-size: 14px; - line-height: 22px; - white-space: nowrap; - } - .des { - margin-top: 8px; - color: #00000073; - font-size: 12px; - } - } - } - } -} - -.container { - width: 100%; - height: 600px; -} diff --git a/docs/guide/demos/baseIntro/css/index.less b/docs/guide/demos/baseIntro/css/index.less deleted file mode 100644 index bc08136..0000000 --- a/docs/guide/demos/baseIntro/css/index.less +++ /dev/null @@ -1,4 +0,0 @@ -.container { - width: 100%; - height: 600px; -} diff --git a/docs/guide/demos/baseIntro/customerNode.tsx b/docs/guide/demos/baseIntro/customerNode.tsx index 91a0214..ccd036d 100644 --- a/docs/guide/demos/baseIntro/customerNode.tsx +++ b/docs/guide/demos/baseIntro/customerNode.tsx @@ -3,8 +3,7 @@ */ import { FlowView, Handle, Position } from '@ant-design/pro-flow'; import { FC } from 'react'; -import './css/customerNode.less'; - +import useStyles from './css/customerNode.style'; interface PipeNodeChild { title: string; des: string; @@ -24,9 +23,10 @@ const CustomNode: FC<{ data: PipeNode; }> = ({ data }) => { const { stepTitle, title, des, logo, needSwitch = false, children = [] } = data; + const { styles } = useStyles(); return ( -
+
-
{stepTitle}
-
-
-
+
{stepTitle}
+
+
+
-
-
{title}
-
{des}
+
+
{title}
+
{des}
{needSwitch && ( -
-
-
+
+
+
)}
{children.length > 0 && ( -
+
{children.map((item, index) => ( -
-
+
+
-
-
{item.title}
-
{item.des}
+
+
{item.title}
+
{item.des}
))} @@ -125,8 +125,10 @@ const nodes = [ const nodeTypes = { customNode: CustomNode }; function App() { + const { styles } = useStyles(); + return ( -
+
); diff --git a/docs/guide/demos/customEdge/ButtonEdge.tsx b/docs/guide/demos/customEdge/ButtonEdge.tsx index 74f6d5e..218a2f5 100644 --- a/docs/guide/demos/customEdge/ButtonEdge.tsx +++ b/docs/guide/demos/customEdge/ButtonEdge.tsx @@ -1,6 +1,5 @@ import { BaseEdge, EdgeLabelRenderer, EdgeProps, getBezierPath } from '@ant-design/pro-flow'; - -import './btn.less'; +import useStyles from './btn.style'; const onEdgeClick = (evt, id) => { evt.stopPropagation(); @@ -26,7 +25,7 @@ export default function CustomEdge({ targetY, targetPosition, }); - + const { styles } = useStyles(); return ( <> @@ -42,7 +41,7 @@ export default function CustomEdge({ }} className="nodrag nopan" > -
diff --git a/docs/guide/demos/customEdge/btn.less b/docs/guide/demos/customEdge/btn.less deleted file mode 100644 index 975a470..0000000 --- a/docs/guide/demos/customEdge/btn.less +++ /dev/null @@ -1,17 +0,0 @@ -.edgebutton { - width: 0px; - background: #eee; - border: 1px solid #fff; - cursor: pointer; - border-radius: 30px; - font-size: 12px; - line-height: 1; -} - -.edgebutton:hover { - box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.08); -} - -.customEdge:hover path { - stroke: red; -} diff --git a/docs/guide/demos/customEdge/btn.style.ts b/docs/guide/demos/customEdge/btn.style.ts index 77b7177..96485bd 100644 --- a/docs/guide/demos/customEdge/btn.style.ts +++ b/docs/guide/demos/customEdge/btn.style.ts @@ -1,21 +1,33 @@ import { createStyles } from 'antd-style'; -const useStyles = createStyles(() => { +const useStyles = createStyles(({ css }) => { return { - edgebutton: { - width: '0px', - background: '#eee', - border: '1px solid #fff', - cursor: 'pointer', - borderRadius: '30px', - fontSize: '12px', - lineHeight: '1', - }, - 'edgebutton:hover': { - boxShadow: '0 0 6px 2px rgba(0, 0, 0, 0.08)', - }, - 'customEdge:hover': { - stroke: 'red', + edgebutton: css` + width: '0px'; + background: '#eee'; + border: '1px solid #fff'; + cursor: 'pointer'; + border-radius: '30px'; + font-size: '12px'; + line-height: '1'; + margin-bottom: 8px; + cursor: pointer; + + &:hover { + box-shadow: '0 0 6px 2px rgba(0, 0, 0, 0.08)'; + } + `, + customEdge: css` + background-color: red; + &:hover { + path { + stroke: red; + } + } + `, + container: { + width: '100%', + height: '400px', }, path: { stroke: 'red', diff --git a/docs/guide/demos/customEdge/data.ts b/docs/guide/demos/customEdge/data.ts index af0e784..bbcf50e 100644 --- a/docs/guide/demos/customEdge/data.ts +++ b/docs/guide/demos/customEdge/data.ts @@ -19,12 +19,12 @@ export const nodes = [ }, ]; -export const edges = [ +export const getEdges = (className) => [ { id: 'e1', source: 'a1', target: 'a2', type: 'buttonEdge', - className: 'customEdge', + className, }, ]; diff --git a/docs/guide/demos/customEdge/index.tsx b/docs/guide/demos/customEdge/index.tsx index 6e2b3e0..0206b63 100644 --- a/docs/guide/demos/customEdge/index.tsx +++ b/docs/guide/demos/customEdge/index.tsx @@ -4,16 +4,19 @@ */ import { FlowView } from '@ant-design/pro-flow'; import ButtonEdge from './ButtonEdge'; -import { edges, nodes } from './data'; +import useStyles from './btn.style'; +import { getEdges, nodes } from './data'; const edgeTypes = { buttonEdge: ButtonEdge, }; function App() { + const { styles } = useStyles(); + return ( -
- +
+
); } diff --git a/docs/guide/demos/customNode/components/CustomNode.tsx b/docs/guide/demos/customNode/components/CustomNode.tsx index 2cc3036..f2727b8 100644 --- a/docs/guide/demos/customNode/components/CustomNode.tsx +++ b/docs/guide/demos/customNode/components/CustomNode.tsx @@ -1,5 +1,6 @@ import { Handle, Position } from '@ant-design/pro-flow'; import { FC } from 'react'; +import useStyles from './custom.style'; interface PipeNodeChild { title: string; @@ -18,16 +19,17 @@ const CustomNode: FC<{ data: PipeNode; }> = ({ data }) => { const { title, des, logo, children = [] } = data; + const { styles } = useStyles(); return ( -
-
-
-
+
+
+
+
-
{title}
-
+
{title}
+
- {children.length > 0 && ( -
+
{children.map((item, index) => ( <> -
+
+ {item.logo && ( -
+
)} -
-
{item.title}
-
{item.des}
+ +
+
{item.title}
)} - {des &&
{des}
} + {des &&
{des}
}
); diff --git a/docs/guide/demos/customNode/components/custom.style.ts b/docs/guide/demos/customNode/components/custom.style.ts new file mode 100644 index 0000000..592e1aa --- /dev/null +++ b/docs/guide/demos/customNode/components/custom.style.ts @@ -0,0 +1,93 @@ +import { createStyles } from 'antd-style'; + +const useStyles = createStyles(() => { + return { + techUIpipeNodeWrap: { + width: '260px', + minHeight: '100px', + backgroundColor: '#f6f8fa', + padding: '12px 6px', + boxSizing: 'border-box', + borderRadius: '8px', + }, + + pipeNode: { + width: '100%', + borderRadius: '4px', + backgroundColor: '#fff', + paddingBottom: '12px', + }, + mainBox: { + width: '100%', + padding: '12px', + height: '45px', + backgroundColor: 'white', + display: 'flex', + borderBottom: 'none', + borderRadius: '8px', + boxSizing: 'border-box', + position: 'relative', + }, + logo: { + display: 'flex', + alignItems: 'center', + img: { width: '16px', height: '16px' }, + }, + title: { + marginLeft: '8px', + fontSize: '14px', + fontWeight: '500', + color: '#000', + lineHeight: '22px', + whiteSpace: 'nowrap', + }, + lineTitle: { + marginLeft: '8px', + fontSize: '14px', + fontWeight: '500', + color: '#000', + lineHeight: '22px', + whiteSpace: 'nowrap', + }, + subLogo: { + position: 'absolute', + right: '6px', + top: '8px', + img: { width: '80px', height: '25px' }, + }, + des: { + marginTop: '16px', + color: '#00000073', + fontSize: '10px', + }, + children: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + paddingBottom: '8px', + }, + childrenBox: { + width: '220px', + height: '30px', + paddingLeft: '5px', + backgroundColor: 'white', + display: 'flex', + alignItems: 'center', + border: '1px solid #f1f1f1', + borderRadius: '3px', + boxSizing: 'border-box', + marginTop: '3px', + position: 'relative', + }, + wrap: { + marginLeft: '8px', + display: 'flex', + flexDirection: 'column', + }, + container: { + width: '100%', + height: '600px', + }, + }; +}); +export default useStyles; diff --git a/docs/guide/demos/customNode/css/index.less b/docs/guide/demos/customNode/css/index.less deleted file mode 100644 index a2265d9..0000000 --- a/docs/guide/demos/customNode/css/index.less +++ /dev/null @@ -1,13 +0,0 @@ -.wrap { - width: 200px; - height: 83px; - background-color: white; - display: flex; - align-items: center; - justify-content: center; -} - -.container { - width: 100%; - height: 300px; -} diff --git a/docs/guide/demos/customNode/css/multi.less b/docs/guide/demos/customNode/css/multi.less deleted file mode 100644 index a6ca569..0000000 --- a/docs/guide/demos/customNode/css/multi.less +++ /dev/null @@ -1,21 +0,0 @@ -.wrap { - width: 200px; - height: 83px; - background-color: white; - display: flex; - align-items: center; - justify-content: center; - - &.default { - border: none; - } - - &.select { - border: 1px solid red; - } -} - -.container { - width: 100%; - height: 300px; -} diff --git a/docs/guide/demos/customNode/index.tsx b/docs/guide/demos/customNode/index.tsx index e789cab..e44fd76 100644 --- a/docs/guide/demos/customNode/index.tsx +++ b/docs/guide/demos/customNode/index.tsx @@ -4,13 +4,16 @@ */ import { FlowView } from '@ant-design/pro-flow'; import CustomNode from './components/CustomNode'; +import useStyles from './css/index.style'; import { nodes } from './data/index'; const nodeTypes = { customNode: CustomNode }; function App() { + const { styles } = useStyles(); + return ( -
+
); diff --git a/docs/guide/demos/customNode/multiHandle.tsx b/docs/guide/demos/customNode/multiHandle.tsx index b011b1a..5cc4790 100644 --- a/docs/guide/demos/customNode/multiHandle.tsx +++ b/docs/guide/demos/customNode/multiHandle.tsx @@ -4,13 +4,16 @@ */ import { FlowView } from '@ant-design/pro-flow'; import CustomNode from './components/CustomNode'; +import useStyles from './css/index.style'; import { edges, nodes } from './data/multi'; const nodeTypes = { customNode: CustomNode }; function App() { + const { styles } = useStyles(); + return ( -
+
); diff --git a/docs/guide/demos/flowEditor/EditorNode.tsx b/docs/guide/demos/flowEditor/EditorNode.tsx index 6dca250..e4a7ed8 100644 --- a/docs/guide/demos/flowEditor/EditorNode.tsx +++ b/docs/guide/demos/flowEditor/EditorNode.tsx @@ -1,12 +1,13 @@ import { EditNode, Handle, Position } from '@ant-design/pro-flow'; import { FC } from 'react'; -import './css/editNode.less'; +import useStyles from './css/index.style'; export const EditorNode: FC = (node: any) => { const { handles, id, selected } = node; + const { styles, cx } = useStyles(); return ( -
+
{ const { handles, id, selected } = node; + const { styles, cx } = useStyles(); return ( -
+
{ const editor = useFlowEditor(); + const { styles } = useStyles(); useEffect(() => { editor.addNode({ @@ -22,7 +24,7 @@ const ProFlowDemo = () => { }, [editor]); return ( -
+
); diff --git a/docs/guide/demos/flowEditor/css/dragAddNode.less b/docs/guide/demos/flowEditor/css/dragAddNode.less deleted file mode 100644 index d2a9449..0000000 --- a/docs/guide/demos/flowEditor/css/dragAddNode.less +++ /dev/null @@ -1,47 +0,0 @@ -.container { - width: 100%; - height: 800px; - display: flex; - flex-direction: column; - - .aside { - width: 100%; - box-sizing: border-box; - border-right: 1px solid #eee; - padding: 15px 10px; - font-size: 12px; - background: #fcfcfc; - } - - .aside .description { - margin-bottom: 10px; - } - - .dndnode { - height: 20px; - padding: 4px; - border: 1px solid #1a192b; - border-radius: 2px; - margin-bottom: 10px; - display: flex; - justify-content: center; - align-items: center; - cursor: grab; - } - - .dndnode.input { - border-color: #0041d0; - } - .dndnode.output { - border-color: #ff0072; - } - - .reactflow-wrapper { - flex-grow: 1; - height: 100%; - } - - .selectall { - margin-top: 10px; - } -} diff --git a/docs/guide/demos/flowEditor/css/editNode.less b/docs/guide/demos/flowEditor/css/editNode.less deleted file mode 100644 index 578608d..0000000 --- a/docs/guide/demos/flowEditor/css/editNode.less +++ /dev/null @@ -1,4 +0,0 @@ -.editNode{ - width: 400px; - -} diff --git a/docs/guide/demos/flowEditor/css/editNode.style.ts b/docs/guide/demos/flowEditor/css/editNode.style.ts deleted file mode 100644 index b2ec866..0000000 --- a/docs/guide/demos/flowEditor/css/editNode.style.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { createStyles } from 'antd-style'; - -const useStyles = createStyles(() => { - return { - editNode: { - width: '400px', - }, - }; -}); -export default useStyles; diff --git a/docs/guide/demos/flowEditor/css/index.less b/docs/guide/demos/flowEditor/css/index.less deleted file mode 100644 index 19d4ca0..0000000 --- a/docs/guide/demos/flowEditor/css/index.less +++ /dev/null @@ -1,13 +0,0 @@ -.stringNode { - width: 150px; - height: 30px; - text-align: center; - background-color: white; - border: 1px solid aqua; - border-radius: 4px; - line-height: 30px; -} - -.selected { - border: 1px solid #007bff; -} diff --git a/docs/guide/demos/flowEditor/css/index.style.ts b/docs/guide/demos/flowEditor/css/index.style.ts index 1815ab1..2c0c8bf 100644 --- a/docs/guide/demos/flowEditor/css/index.style.ts +++ b/docs/guide/demos/flowEditor/css/index.style.ts @@ -2,6 +2,10 @@ import { createStyles } from 'antd-style'; const useStyles = createStyles(() => { return { + container: { + width: '100%', + height: '600px', + }, stringNode: { width: '150px', height: '30px', @@ -14,6 +18,9 @@ const useStyles = createStyles(() => { selected: { border: '1px solid #007bff', }, + editNode: { + width: '400px', + }, }; }); export default useStyles; diff --git a/docs/guide/demos/flowEditor/css/probase.less b/docs/guide/demos/flowEditor/css/probase.less deleted file mode 100644 index 0ba5ae2..0000000 --- a/docs/guide/demos/flowEditor/css/probase.less +++ /dev/null @@ -1,15 +0,0 @@ -.container { - width: 100%; - height: 600px; - - button { - width: 100px; - height: 30px; - line-height: 24px; - box-sizing: border-box; - text-align: center; - user-select: none; - margin-right: 10px; - margin-top: 10px; - } -} diff --git a/docs/guide/demos/flowEditor/css/sidebar.less b/docs/guide/demos/flowEditor/css/sidebar.less deleted file mode 100644 index 3118497..0000000 --- a/docs/guide/demos/flowEditor/css/sidebar.less +++ /dev/null @@ -1,49 +0,0 @@ -.aside { - border-right: 1px solid #eee; - padding: 15px 10px; - font-size: 12px; - background: #fcfcfc; -} - -.aside .description { - margin-bottom: 10px; -} - -.dndnode { - height: 20px; - padding: 4px; - border: 1px solid #1a192b; - border-radius: 2px; - margin-bottom: 10px; - display: flex; - justify-content: center; - align-items: center; - cursor: grab; -} - -.dndnode.input { - border-color: #0041d0; -} -.dndnode.output { - border-color: #ff0072; -} - -.reactflow-wrapper { - flex-grow: 1; - height: 100%; -} - -.selectall { - margin-top: 10px; -} - -@media screen and (min-width: 768px) { - // .dndflow { - // flex-direction: row; - // } - - .aside { - width: 20%; - max-width: 250px; - } -} diff --git a/docs/guide/demos/flowEditor/dragAddNode.tsx b/docs/guide/demos/flowEditor/dragAddNode.tsx index 2e4758c..a0de51c 100644 --- a/docs/guide/demos/flowEditor/dragAddNode.tsx +++ b/docs/guide/demos/flowEditor/dragAddNode.tsx @@ -11,7 +11,7 @@ import { } from '@ant-design/pro-flow'; import { useCallback, useEffect } from 'react'; import { StringRender } from './StringNode'; -import './css/dragAddNode.less'; +import useStyles from './css/dragAddNode.style'; import Sidebar from './sidebar'; let id = 0; @@ -24,6 +24,7 @@ const nodeTypes = { }; const ProFlowDemo = () => { const editor = useFlowEditor(); + const { styles } = useStyles(); const onDragOver = useCallback((event) => { event.preventDefault(); @@ -75,7 +76,7 @@ const ProFlowDemo = () => { }, [editor]); return ( -
+
{ const editor = useFlowEditor(); + const { styles } = useStyles(); useEffect(() => { editor.addNode({ @@ -22,7 +24,7 @@ const ProFlowDemo = () => { }, [editor]); return ( -
+
); diff --git a/docs/guide/demos/flowEditor/proBase.tsx b/docs/guide/demos/flowEditor/proBase.tsx index 87276db..cbe51e0 100644 --- a/docs/guide/demos/flowEditor/proBase.tsx +++ b/docs/guide/demos/flowEditor/proBase.tsx @@ -6,10 +6,11 @@ import { FlowEditor, FlowEditorProvider, FlowPanel, useFlowEditor } from '@ant-d import { useEffect } from 'react'; import { StringRender } from './StringNode'; import { BtnGroup } from './btnGroup'; -import './css/probase.less'; +import useStyles from './css/probase.style'; const ProFlowDemo = () => { const editor = useFlowEditor(); + const { styles } = useStyles(); useEffect(() => { editor.addNode({ @@ -27,7 +28,7 @@ const ProFlowDemo = () => { }, [editor]); return ( -
+
diff --git a/docs/guide/demos/flowEditor/sidebar.tsx b/docs/guide/demos/flowEditor/sidebar.tsx index b63f71d..a740c3e 100644 --- a/docs/guide/demos/flowEditor/sidebar.tsx +++ b/docs/guide/demos/flowEditor/sidebar.tsx @@ -1,24 +1,32 @@ +import useStyles from './css/sidebar.style.ts'; + export default () => { + const { styles, cx } = useStyles(); + const onDragStart = (event, nodeType) => { event.dataTransfer.setData('application/reactflow', nodeType); event.dataTransfer.effectAllowed = 'move'; }; return ( -
-
您可以将这些节点拖到上面的画布中
+
+
您可以将这些节点拖到上面的画布中
onDragStart(event, 'StringNode')} draggable > String Node
-
onDragStart(event, 'BasicNode')} draggable> +
onDragStart(event, 'BasicNode')} + draggable + > BasicNode Node
onDragStart(event, 'EditNode')} draggable > diff --git a/docs/guide/demos/flowViewIntro/autoFlow.tsx b/docs/guide/demos/flowViewIntro/autoFlow.tsx index e12702e..a994b74 100644 --- a/docs/guide/demos/flowViewIntro/autoFlow.tsx +++ b/docs/guide/demos/flowViewIntro/autoFlow.tsx @@ -3,12 +3,14 @@ * defaultShowCode: true */ import { FlowView } from '@ant-design/pro-flow'; -import './css/index.less'; +import useStyles from './css/index.style'; import { edges, nodes } from './data/data2'; function App() { + const { styles } = useStyles(); + return ( -
+
+
); diff --git a/docs/guide/demos/flowViewIntro/css/index.less b/docs/guide/demos/flowViewIntro/css/index.less deleted file mode 100644 index bc08136..0000000 --- a/docs/guide/demos/flowViewIntro/css/index.less +++ /dev/null @@ -1,4 +0,0 @@ -.container { - width: 100%; - height: 600px; -} diff --git a/docs/guide/demos/flowViewIntro/css/index.style.ts b/docs/guide/demos/flowViewIntro/css/index.style.ts index 53fae6b..995eb00 100644 --- a/docs/guide/demos/flowViewIntro/css/index.style.ts +++ b/docs/guide/demos/flowViewIntro/css/index.style.ts @@ -4,7 +4,7 @@ const useStyles = createStyles(() => { return { container: { width: '100%', - height: '600px', + height: '400px', }, }; }); diff --git a/docs/guide/demos/flowViewIntro/noAutoFlow.tsx b/docs/guide/demos/flowViewIntro/noAutoFlow.tsx index 7ffc77b..753384b 100644 --- a/docs/guide/demos/flowViewIntro/noAutoFlow.tsx +++ b/docs/guide/demos/flowViewIntro/noAutoFlow.tsx @@ -3,12 +3,14 @@ * defaultShowCode: true */ import { FlowView } from '@ant-design/pro-flow'; -import './css/index.less'; +import useStyles from './css/index.style'; import { edges, nodes } from './data/data3'; function App() { + const { styles } = useStyles(); + return ( -
+
); diff --git a/docs/guide/demos/flowViewIntro/noMiniMap.tsx b/docs/guide/demos/flowViewIntro/noMiniMap.tsx index d46eb21..8b1dbc0 100644 --- a/docs/guide/demos/flowViewIntro/noMiniMap.tsx +++ b/docs/guide/demos/flowViewIntro/noMiniMap.tsx @@ -4,13 +4,15 @@ */ import { FlowPanel, FlowView } from '@ant-design/pro-flow'; import { useState } from 'react'; -import './css/index.less'; +import useStyles from './css/index.style'; import { nodes } from './data/data'; function App() { const [open, setOpen] = useState(true); + const { styles } = useStyles(); + return ( -
+
diff --git a/docs/guide/demos/muchNode/CustomNode.tsx b/docs/guide/demos/muchNode/CustomNode.tsx deleted file mode 100644 index 7ee195d..0000000 --- a/docs/guide/demos/muchNode/CustomNode.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import { Handle, Position } from '@ant-design/pro-flow'; -import { FC } from 'react'; - -interface PipeNodeChild { - title: string; - logo?: string; - id: string; -} - -interface PipeNode { - title: string; - logo: string; - des?: string; - children?: PipeNodeChild[]; -} - -const CustomNode: FC<{ - data: PipeNode; -}> = ({ data }) => { - const { title, des, logo, children = [] } = data; - - console.log('reload'); - - return ( -
-
-
-
- -
-
{title}
-
- -
-
- - {children.length > 0 && ( -
- {children.map((item, index) => ( - <> -
- - {item.logo && ( -
- -
- )} -
-
{item.title}
-
{item.des}
-
- -
- - ))} -
- )} - - {des &&
{des}
} -
-
- ); -}; - -export default CustomNode; diff --git a/docs/guide/demos/muchNode/data.tsx b/docs/guide/demos/muchNode/data.tsx deleted file mode 100644 index 63ea6ff..0000000 --- a/docs/guide/demos/muchNode/data.tsx +++ /dev/null @@ -1,41 +0,0 @@ -export const nodes = [ - { - id: 'a1', - type: 'customNode', - data: { - title: 'XXX_API_a1', - logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original', - des: 'XXX_XXX_XXX_API', - }, - }, - { - id: 'a2', - data: { - title: 'XXX_API_a2', - logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original', - describe: 'XXX_XXX_XXX_API', - }, - }, - { - id: 'a3', - label: 'aaaa3', - data: { - title: 'XXX_API_a3', - logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original', - describe: 'XXX_XXX_XXX_API', - }, - }, -]; -export const edges = [ - { - id: 'a1-a2', - source: 'a1', - target: 'a2', - }, - { - id: 'a1-a3', - source: 'a1', - target: 'a3', - type: 'radius', - }, -]; diff --git a/docs/guide/demos/muchNode/index.tsx b/docs/guide/demos/muchNode/index.tsx deleted file mode 100644 index 8bf065c..0000000 --- a/docs/guide/demos/muchNode/index.tsx +++ /dev/null @@ -1,38 +0,0 @@ -/** - * compact: true - * defaultShowCode: true - */ -import { FlowPanel, FlowView, FlowViewProvider, useFlowViewer } from '@ant-design/pro-flow'; -import { useState } from 'react'; -// import './css/index.less'; -import CustomNode from './CustomNode'; -import { edges, nodes } from './data'; - -const nodeTypes = { customNode: CustomNode }; - -function App() { - const { selectNode, selectEdges, selectNodes } = useFlowViewer(); - const [node, setNode] = useState(null); - - return ( -
- - -
- {node ? `当前选中的是：${node.id}` : `当前没有选中节点`} -
- - -
- ); -} - -function ProApp() { - return ( - - - - ); -} - -export default ProApp; diff --git a/docs/guide/demos/quickUse/baseFlow.tsx b/docs/guide/demos/quickUse/baseFlow.tsx index 0368639..f61d5cd 100644 --- a/docs/guide/demos/quickUse/baseFlow.tsx +++ b/docs/guide/demos/quickUse/baseFlow.tsx @@ -3,12 +3,14 @@ * defaultShowCode: true */ import { FlowView } from '@ant-design/pro-flow'; -import './css/index.less'; +import useStyles from './css/index.style'; import { edges, nodes } from './data'; function App() { + const { styles } = useStyles(); + return ( -
+
); diff --git a/docs/guide/demos/quickUse/css/index.less b/docs/guide/demos/quickUse/css/index.less deleted file mode 100644 index bc08136..0000000 --- a/docs/guide/demos/quickUse/css/index.less +++ /dev/null @@ -1,4 +0,0 @@ -.container { - width: 100%; - height: 600px; -} diff --git a/docs/guide/demos/quickUse/emptyFLow.tsx b/docs/guide/demos/quickUse/emptyFLow.tsx index 8a29376..1a80d4c 100644 --- a/docs/guide/demos/quickUse/emptyFLow.tsx +++ b/docs/guide/demos/quickUse/emptyFLow.tsx @@ -3,11 +3,13 @@ * defaultShowCode: true */ import { FlowView } from '@ant-design/pro-flow'; -import './css/index.less'; +import useStyles from './css/index.style'; function App() { + const { styles } = useStyles(); + return ( -
+
); diff --git a/docs/guide/demos/quickUse/selectFlow.tsx b/docs/guide/demos/quickUse/selectFlow.tsx index cc6eb96..1bd268e 100644 --- a/docs/guide/demos/quickUse/selectFlow.tsx +++ b/docs/guide/demos/quickUse/selectFlow.tsx @@ -10,18 +10,18 @@ import { useFlowViewer, } from '@ant-design/pro-flow'; import { useState } from 'react'; -import './css/index.less'; +import useStyles from './css/index.style'; import { edges, nodes } from './data'; function App() { const { selectNode, selectEdges, selectNodes } = useFlowViewer(); const [node, setNode] = useState(null); + const { styles } = useStyles(); return ( -
+
{ - console.log(node); setNode(node); selectNodes(['a1', 'a2', 'a3'], SelectType.SUB_SELECT); selectNode(node.id, SelectType.SELECT); diff --git a/docs/guide/test.txt b/docs/guide/test.txt deleted file mode 100644 index c7c596e..0000000 --- a/docs/guide/test.txt +++ /dev/null @@ -1,13 +0,0 @@ ---- -nav: - title: 快速上手 - order: 10 -group: - title: test - order: 2 -title: 安装使用 -order: 1 -description: ---- - - diff --git a/src/FlowEditor/store/slices/nodesSlice.ts b/src/FlowEditor/store/slices/nodesSlice.ts index ae4f60e..6202c14 100644 --- a/src/FlowEditor/store/slices/nodesSlice.ts +++ b/src/FlowEditor/store/slices/nodesSlice.ts @@ -70,8 +70,8 @@ export interface PublicNodesAction { /** * 更新节点数据 * @param id 要更新的节点 id - * @param key 要更新的内容键名 - * @param value 要更新的内容值 + * @param newData 要更新的数据 + * @param forceReplace 是否强制替换整个数据 * @param options 节点操作的选项 */ updateNodeData: ( diff --git a/src/FlowView/index.tsx b/src/FlowView/index.tsx index d892220..296e648 100644 --- a/src/FlowView/index.tsx +++ b/src/FlowView/index.tsx @@ -15,7 +15,6 @@ import DefaultNode from './components/DefaultNode'; import { FlowViewContext } from './provider/provider'; import { useStyles } from './styles'; -const MIN_ZOOM = 0.1; export const FlowContext = createContext({}); const initFn = () => {}; @@ -35,6 +34,8 @@ const FlowView: React.FC> = (props) => { autoLayout = true, stepLessZooming = true, flowProps, + minZoom = 0.1, + maxZoom = 2, } = props; const { miniMapPosition, @@ -117,7 +118,8 @@ const FlowView: React.FC> = (props) => { edgeTypes={edgeTypesMemo} panOnScroll fitView - minZoom={MIN_ZOOM} + minZoom={minZoom} + maxZoom={maxZoom} {...flowProps} > {miniMap && } diff --git a/src/FlowView/index.zh-CN.md b/src/FlowView/index.zh-CN.md index b30e75d..90b1826 100644 --- a/src/FlowView/index.zh-CN.md +++ b/src/FlowView/index.zh-CN.md @@ -18,18 +18,20 @@ description: ### FlowView -| 属性名 | 类型 | 描述 | 默认值 | 必选 | -| ---------- | ------------------------------------------------ | -------- | ------ | ---- | -| nodes | `FlowViewNode` | 边数据 | - | - | -| edges | `FlowViewEdge` | 节点数据 | - | - | -| className | `string` | 边数据 | - | - | -| style | `CSSProperties` | 节点数据 | - | - | -| miniMap | `boolean` | 边数据 | - | - | -| autoLayout | `boolean` | 自动布局 | true | - | -| background | `boolean` | 节点数据 | - | - | -| children | `React.ReactNode` | 边数据 | - | - | -| nodeTypes | `Record>` | 节点类型 | - | - | -| edgeTypes | `Record>` | 边缘类型 | - | - | +| 属性名 | 类型 | 描述 | 默认值 | 必选 | +| ---------- | ------------------------------------------------ | ------------ | ------ | ---- | +| nodes | `FlowViewNode` | 边数据 | - | - | +| edges | `FlowViewEdge` | 节点数据 | - | - | +| className | `string` | 边数据 | - | - | +| style | `CSSProperties` | 节点数据 | - | - | +| miniMap | `boolean` | 边数据 | - | - | +| autoLayout | `boolean` | 自动布局 | true | - | +| background | `boolean` | 节点数据 | - | - | +| children | `React.ReactNode` | 边数据 | - | - | +| nodeTypes | `Record>` | 节点类型 | - | - | +| edgeTypes | `Record>` | 边缘类型 | - | - | +| minZoom | `number` | 最小缩放比例 | - | - | +| maxZoom | `number` | 最大缩放比例 | - | - | ### FlowViewNode diff --git a/src/constants.tsx b/src/constants.tsx index fe377fa..d749a69 100644 --- a/src/constants.tsx +++ b/src/constants.tsx @@ -95,6 +95,8 @@ export interface FlowViewProps { children?: React.ReactNode; autoLayout?: boolean; stepLessZooming?: boolean; + minZoom?: number; + maxZoom?: number; } export interface MiniMapPosition {