generated from arvinxx/npm-template
-
Notifications
You must be signed in to change notification settings - Fork 18
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
✨ feat(FlowView): add stepless zooming switch (#41)
* ✨ feat: step less zooming switch * 📝 feat: test md disable * 📝 fix: rm flow eitor demo --------- Co-authored-by: jiangchu <[email protected]>
- Loading branch information
Showing
8 changed files
with
215 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,84 @@ | ||
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 ( | ||
<div className={'techUIpipeNodeWrap'}> | ||
<div className="pipeNode"> | ||
<div className="mainBox"> | ||
<div className="logo"> | ||
<img src={logo} alt="" /> | ||
</div> | ||
<div className="title">{title}</div> | ||
<div className="subLogo"> | ||
<img | ||
src={ | ||
'https://mdn.alipayobjects.com/huamei_d2ejos/afts/img/A*Rg0cQpidn8cAAAAAAAAAAAAADvl6AQ/original' | ||
} | ||
alt="" | ||
/> | ||
</div> | ||
</div> | ||
|
||
{children.length > 0 && ( | ||
<div className="children"> | ||
{children.map((item, index) => ( | ||
<> | ||
<div className="childrenBox" key={index}> | ||
<Handle | ||
id={`${item.id}-target`} | ||
type="target" | ||
position={Position.Left} | ||
style={{ | ||
opacity: 0, | ||
}} | ||
/> | ||
{item.logo && ( | ||
<div className="logo"> | ||
<img src={item.logo} alt="" /> | ||
</div> | ||
)} | ||
<div className="wrap"> | ||
<div className="title">{item.title}</div> | ||
<div className="des">{item.des}</div> | ||
</div> | ||
<Handle | ||
id={`${item.id}-source`} | ||
type="source" | ||
position={Position.Right} | ||
style={{ | ||
opacity: 0, | ||
}} | ||
/> | ||
</div> | ||
</> | ||
))} | ||
</div> | ||
)} | ||
|
||
{des && <div className="des">{des}</div>} | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default CustomNode; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
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', | ||
}, | ||
]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
/** | ||
* 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 ( | ||
<div className="container"> | ||
<FlowView nodeTypes={nodeTypes} nodes={nodes} edges={edges}> | ||
<FlowPanel> | ||
<div className="panel-title"> | ||
{node ? `当前选中的是:${node.id}` : `当前没有选中节点`} | ||
</div> | ||
</FlowPanel> | ||
</FlowView> | ||
</div> | ||
); | ||
} | ||
|
||
function ProApp() { | ||
return ( | ||
<FlowViewProvider> | ||
<App /> | ||
</FlowViewProvider> | ||
); | ||
} | ||
|
||
export default ProApp; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
--- | ||
nav: | ||
title: 快速上手 | ||
order: 10 | ||
group: | ||
title: test | ||
order: 2 | ||
title: 安装使用 | ||
order: 1 | ||
description: | ||
--- | ||
|
||
<code src='./demos/muchNode/index.tsx'></code> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters