-
Notifications
You must be signed in to change notification settings - Fork 80
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
15 changed files
with
2,948 additions
and
3,030 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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| .start-node, .end-node { | ||
| height: 64px; | ||
| width: 64px; | ||
| border-radius: 50%; | ||
| line-height: 64px; | ||
| color: #fff; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .start-node { | ||
| background-color: #338aff; | ||
| } | ||
|
|
||
| .end-node { | ||
| background-color: #666; | ||
| } | ||
|
|
||
| .other-node, .condition-node { | ||
| width: 224px; | ||
| border-radius: 4px; | ||
| color: #666; | ||
| background: #fff; | ||
| box-shadow: 0 0 8px rgba(0, 0, 0, 0.08); | ||
| } | ||
|
|
||
| .other-node { | ||
| height: 118px; | ||
| padding: 16px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .condition-node { | ||
| height: 44px; | ||
| padding: 12px 16px; | ||
| } |
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,136 @@ | ||
| import React, { useState, useContext } from 'react'; | ||
| import FlowBuilder, { | ||
| NodeContext, | ||
| INode, | ||
| IRegisterNode, | ||
| } from 'react-flow-builder'; | ||
|
|
||
| import './index.css'; | ||
|
|
||
| window.React = React; | ||
|
|
||
| const StartNodeDisplay: React.FC = () => { | ||
| const node = useContext(NodeContext); | ||
| return <div className="start-node">{node.name}</div>; | ||
| }; | ||
|
|
||
| const EndNodeDisplay: React.FC = () => { | ||
| const node = useContext(NodeContext); | ||
| return <div className="end-node">{node.name}</div>; | ||
| }; | ||
|
|
||
| const NodeDisplay: React.FC = () => { | ||
| const node = useContext(NodeContext); | ||
| return <div className="other-node">{node.name}</div>; | ||
| }; | ||
|
|
||
| const ConditionNodeDisplay: React.FC = () => { | ||
| const node = useContext(NodeContext); | ||
| return <div className="condition-node">{node.name}</div>; | ||
| }; | ||
|
|
||
| const registerNodes: IRegisterNode[] = [ | ||
| { | ||
| type: 'start', | ||
| name: '开始节点', | ||
| displayComponent: StartNodeDisplay, | ||
| isStart: true, | ||
| }, | ||
| { | ||
| type: 'end', | ||
| name: '结束节点', | ||
| displayComponent: EndNodeDisplay, | ||
| isEnd: true, | ||
| }, | ||
| { | ||
| type: 'node', | ||
| name: '普通节点', | ||
| displayComponent: NodeDisplay, | ||
| }, | ||
| { | ||
| type: 'condition', | ||
| name: '条件节点', | ||
| displayComponent: ConditionNodeDisplay, | ||
| }, | ||
| { | ||
| type: 'branch', | ||
| name: '分支节点', | ||
| conditionNodeType: 'condition', | ||
| }, | ||
| ]; | ||
|
|
||
| const defaultNodes = [ | ||
| { | ||
| id: 'node-0d9d4733-e48c-41fd-a41f-d93cc4718d97', | ||
| type: 'start', | ||
| name: 'start', | ||
| path: ['0'], | ||
| }, | ||
| { | ||
| id: 'node-b2ffe834-c7c2-4f29-a370-305adc03c010', | ||
| type: 'branch', | ||
| name: '分支节点', | ||
| children: [ | ||
| { | ||
| id: 'node-cf9c8f7e-26dd-446c-b3fa-b2406fc7821a', | ||
| type: 'condition', | ||
| name: '条件节点', | ||
| children: [ | ||
| { | ||
| id: 'node-f227cd08-a503-48b7-babf-b4047fc9dfa5', | ||
| type: 'node', | ||
| name: '普通节点', | ||
| path: ['1', 'children', '0', 'children', '0'], | ||
| }, | ||
| ], | ||
| path: ['1', 'children', '0'], | ||
| }, | ||
| { | ||
| id: 'node-9d393627-24c0-469f-818a-319d9a678707', | ||
| type: 'condition', | ||
| name: '条件节点', | ||
| children: [], | ||
| path: ['1', 'children', '1'], | ||
| }, | ||
| ], | ||
| path: ['1'], | ||
| }, | ||
| { | ||
| id: 'node-972401ca-c4db-4268-8780-5607876d8372', | ||
| type: 'node', | ||
| name: '普通节点', | ||
| path: ['2'], | ||
| }, | ||
| { | ||
| id: 'node-b106675a-5148-4a2e-aa86-8e06abd692d1', | ||
| type: 'end', | ||
| name: 'end', | ||
| path: ['3'], | ||
| }, | ||
| ]; | ||
|
|
||
| const Remote = () => { | ||
| const [nodes, setNodes] = useState<INode[]>(defaultNodes); | ||
|
|
||
| const handleChange = (nodes: INode[]) => { | ||
| console.log('nodes change', nodes); | ||
| setNodes(nodes); | ||
| }; | ||
|
|
||
| return ( | ||
| <FlowBuilder | ||
| nodes={nodes} | ||
| onChange={handleChange} | ||
| registerNodes={registerNodes} | ||
| registerRemoteNodes={[ | ||
| { | ||
| url: 'https://unpkg.com/[email protected]/dist/index.umd.js', | ||
| cssUrl: | ||
| 'https://unpkg.com/[email protected]/dist/index.umd.css', | ||
| }, | ||
| ]} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default Remote; |
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 |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| --- | ||
| order: 5 | ||
| order: 6 | ||
| --- | ||
|
|
||
| # 拖拽 | ||
|
|
||
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 |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| --- | ||
| order: 4 | ||
| order: 5 | ||
| --- | ||
|
|
||
| # 撤销、重做 | ||
|
|
||
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 @@ | ||
| --- | ||
| order: 3 | ||
| --- | ||
|
|
||
| # 远程节点注册 | ||
|
|
||
| 通过 System.js 从远程加载 js / css 资源 | ||
|
|
||
| ## js 资源 | ||
|
|
||
| 需要按照 umd 规范默认导出节点注册所需要的各个属性。注意：react、antd 等组件可作为 external，不必直接打包到 umd 资源中，否则会导致远程节点资源体积过大，影响加载速度和多个实例出现的其他异常现象 | ||
|
|
||
| ## css 资源 | ||
|
|
||
| 在 css 内容不是特别多的场景下，建议将 css 样式合并 js 资源中，减少 http 请求数量 | ||
|
|
||
| ### 远程组件示例 | ||
|
|
||
| ```javascript | ||
| import React from 'react'; | ||
|
|
||
| import './index.css'; | ||
|
|
||
| const DisplayComponent = () => { | ||
| return <div className="remote-node">display component</div>; | ||
| }; | ||
|
|
||
| const RemoteDemo = { | ||
| type: 'remote-node', | ||
| name: 'remote-node', | ||
| displayComponent: DisplayComponent, | ||
| }; | ||
|
|
||
| export default RemoteDemo; | ||
| ``` | ||
|
|
||
| ### umd 格式示例 | ||
|
|
||
| ```javascript | ||
| (function (global, factory) { | ||
| typeof exports === 'object' && typeof module !== 'undefined' | ||
| ? (module.exports = factory(require('react'))) | ||
| : typeof define === 'function' && define.amd | ||
| ? define(['react'], factory) | ||
| : ((global = | ||
| typeof globalThis !== 'undefined' ? globalThis : global || self), | ||
| (global.reactFlowBuilderPkgDemo = factory(global.React))); | ||
| })(this, function (React) { | ||
| 'use strict'; | ||
|
|
||
| function _interopDefaultLegacy(e) { | ||
| return e && typeof e === 'object' && 'default' in e ? e : { default: e }; | ||
| } | ||
|
|
||
| var React__default = /*#__PURE__*/ _interopDefaultLegacy(React); | ||
|
|
||
| var DisplayComponent = function DisplayComponent() { | ||
| return /*#__PURE__*/ React__default['default'].createElement( | ||
| 'div', | ||
| { | ||
| className: 'remote-node', | ||
| }, | ||
| 'display component', | ||
| ); | ||
| }; | ||
|
|
||
| var RemoteDemo = { | ||
| type: 'remote-node', | ||
| name: 'remote-node', | ||
| displayComponent: DisplayComponent, | ||
| }; | ||
|
|
||
| return RemoteDemo; | ||
| }); | ||
| ``` | ||
|
|
||
| ## RegisterRemoteNode | ||
|
|
||
| | 参数 | 说明 | 类型 | 必须 | 默认值 | 版本 | | ||
| | :----- | :----------------- | :------- | :--- | :----- | :---- | | ||
| | url | 节点的远程地址 | `string` | ✓ | - | 1.3.0 | | ||
| | cssUrl | 节点样式的远程地址 | `string` | | - | 1.3.0 | | ||
|
|
||
| <code src="./demo/remote/index.tsx" /> |
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 |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| --- | ||
| order: 3 | ||
| order: 4 | ||
| --- | ||
|
|
||
| # 缩放 | ||
|
|
||
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
Oops, something went wrong.