Skip to content

Commit

Permalink
🎨 add examples
Browse files Browse the repository at this point in the history 
node/layout/data examples
  • Loading branch information
@pomelo-nwu
pomelo-nwu committed Nov 29, 2019
1 parent ba444e1 commit 859a081
Show file tree
Hide file tree
Showing 14 changed files with 350 additions and 10 deletions.
2 changes: 1 addition & 1 deletion packages/graphin-site/examples/layout/demo/Force.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
import Graphin, { Utils } from '@antv/graphin';
import '@antv/graphin/dist/index.css'; // 引入Graphin CSS

const data = Utils.mock(100)
const data = Utils.mock(50)
.random(0.3)
.graphin();

Expand Down
2 changes: 1 addition & 1 deletion packages/graphin-site/examples/layout/demo/ForceWithCentripetal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import ReactDOM from 'react-dom';
import Graphin, { Utils } from '@antv/graphin';
import '@antv/graphin/dist/index.css'; // 引入Graphin CSS

const data = Utils.mock(50)
const data = Utils.mock(150)
.random(0.3)
.graphin();

Expand Down
174 changes: 174 additions & 0 deletions packages/graphin-site/examples/node/demo/CustomNode.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,174 @@
/* eslint-disable no-undef */
import React from 'react';
import ReactDOM from 'react-dom';
import Graphin from '@antv/graphin';
import '@antv/graphin/dist/index.css'; // 引入Graphin CSS

const defaultStyles = {
/** container 容齐 */
containerWidth: 40,
containerStroke: '#0693E3',
containerFill: '#fff',
/** icon 图标 */
iconSize: 10,
iconFill: '#0693E3',
/** badge 徽标 */
badgeFill: 'red',
badgeFontColor: '#fff',
badgeSize: 10,
/** text 文本 */
fontColor: '#3b3b3b',
fontSize: 12,
/** state */
dark: '#eee',
};

const renderCustomNodeShape = node => {
const style = {
...defaultStyles,
...node.style,
};
const badgeNumber = 0;

return {
shape: 'CustomNode',
shapeComponents: [
{
shape: 'rect',
attrs: {
id: 'rect-container',
x: 0,
y: 0,
width: style.containerWidth,
height: style.containerWidth,
fill: style.containerFill,
stroke: style.containerStroke,
cursor: 'pointer',
lineWidth: 2,
radius: 2,
},
},
{
shape: 'circle',
attrs: {
id: 'badge',
x: style.containerWidth,
y: 0,
r: style.badgeSize,
fill: style.badgeFill,
cursor: 'pointer',
lineWidth: 1,
},
},
{
shape: 'text',
attrs: {
id: 'badge-text',
x: style.containerWidth,
y: -4,
text: badgeNumber,
fontSize: 10,
cursor: 'pointer',
fill: '#fff',
textAlign: 'center',
textBaseline: 'top',
},
},
{
shape: 'text',
attrs: {
id: 'text-desc',
text: node.data.label,
x: 0,
y: style.containerWidth * 1.3,
cursor: 'pointer',
fontSize: style.fontSize,
fill: style.fontColor,
fontWeight: 'lighter',
fontFamily: 'Courier New',
textAlign: 'center',
textBaseline: 'top',
},
},
],
state: {
selected: {
'rect-container': {
stroke: style.containerStroke,
fill: style.containerStroke,
animate: {
attrs: {
lineWidth: 6,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 2,
shadowColor: '#fff',
repeat: false, // 循环
},
duration: 200,
easing: 'easeCubic',
callback: null,
delay: 0,
},
},
'node-icon': {
fill: '#fff',
},
badge: {
lineWidth: 6,
},
},
},
'highlight.dark': {
'rect-container': {
fill: style.dark,
stroke: style.dark,
lineWidth: 0,
},
'node-icon': {
fill: style.dark,
},
'text-desc': {
fill: '#eee',
},
badge: {
fill: style.dark,
},
'badge-text': {
fill: style.dark,
},
},
};
};

const data = {
edges: [],
nodes: [
{
id: 'Shape-CustomNode',
shape: 'CustomNode',
data: {
label: `shape:"CustomNode"`,
},
},
],
};

const App = () => (
<Graphin
data={data}
layout={{ name: 'grid' }}
extend={{
nodeShape: () => {
return [
{
name: 'CustomNode',
render: renderCustomNodeShape,
},
];
},
}}
/>
);

ReactDOM.render(<App />, document.getElementById('container'));
22 changes: 22 additions & 0 deletions packages/graphin-site/examples/node/demo/DefaultNode.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/* eslint-disable no-undef */
import React from 'react';
import ReactDOM from 'react-dom';
import Graphin from '@antv/graphin';
import '@antv/graphin/dist/index.css'; // 引入Graphin CSS

const data = {
edges: [],
nodes: [
{
id: 'Shape-CircleNode',
shape: 'CircleNode',
data: {
label: `shape:"CircleNode"`,
},
},
],
};

const App = () => <Graphin data={data} layout={{ name: 'grid' }} />;

ReactDOM.render(<App />, document.getElementById('container'));
18 changes: 18 additions & 0 deletions packages/graphin-site/examples/node/demo/meta.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{
"title": {
"zh": "中文分类",
"en": "Category"
},
"demos": [
{
"filename": "DefaultNode.jsx",
"title": "内置节点",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_975111/afts/img/A*Z2vsTZDRHxYAAAAAAAAAAABkARQnAQ"
},
{
"filename": "CustomNode.jsx",
"title": "自定义节点",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_975111/afts/img/A*oBwXRrtoXM0AAAAAAAAAAABkARQnAQ"
}
]
}
6 changes: 6 additions & 0 deletions packages/graphin-site/examples/node/index.zh.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
title: 设置节点
order: 2
---

目前 Graphin 内置了 1 款节点 `CircleNode`，同时也支持自定义节点
41 changes: 41 additions & 0 deletions packages/graphin-site/examples/render/demo/AddNode.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
/* eslint-disable no-undef */

import React from 'react';
import ReactDOM from 'react-dom';
import Graphin from '@antv/graphin';
import '@antv/graphin/dist/index.css'; // 引入Graphin CSS
import { Input } from 'antd';
import 'antd/dist/antd.css';

const { Search } = Input;

const App = () => {
const [data, setData] = React.useState({
nodes: [],
edges: [],
});
const addNode = id => {
const newNodes = [
{
id,
data: {
label: `node-${id}`,
},
shape: 'CircleNode',
label: `node-${id}`, // 应该支持label的选项
},
];
setData({
nodes: [...data.nodes, ...newNodes],
edges: [],
});
};
return (
<div>
<Search placeholder="输入节点ID" enterButton="添加节点" size="large" onSearch={addNode} />
<Graphin data={data} layout={{ name: 'grid' }} />
</div>
);
};
const rootElement = document.getElementById('container');
ReactDOM.render(<App />, rootElement);
56 changes: 56 additions & 0 deletions packages/graphin-site/examples/render/demo/NodeExpand.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import React from 'react';
import ReactDOM from 'react-dom';
import Graphin, { Utils } from '@antv/graphin';
import { Button } from 'antd';
import 'antd/dist/antd.css';

import '@antv/graphin/dist/index.css';

const App = () => {
const [state, setState] = React.useState({
selected: [],
data: Utils.mock(5).graphin(),
});

const { data, selected } = state;
const graphRef = React.createRef(null);
React.useEffect(() => {
const { graph } = graphRef.current;
const onNodeClick = e => {
setState({
...state,
selected: [e.item.get('model')],
});
};
graph.on('node:click', onNodeClick);
return () => {
graph.off('node:click', onNodeClick);
};
}, [state]);

const onExpand = () => {
const count = 5;
const expandData = Utils.mock(count)
.expand(selected)
.graphin();
setState({
...state,
data: {
nodes: [...state.data.nodes, ...expandData.nodes],
edges: [...state.data.edges, ...expandData.edges],
},
});
};
return (
<div className="App">
<Button onClick={onExpand} type="primary">
Node Expand
</Button>
<Graphin data={data} layout={{ name: 'concentric' }} ref={graphRef} />
</div>
);
};
// eslint-disable-next-line no-undef
const rootElement = document.getElementById('container');

ReactDOM.render(<App />, rootElement);
18 changes: 14 additions & 4 deletions packages/graphin-site/examples/render/demo/meta.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,23 @@
},
"demos": [
{
"filename": "Random.jsx",
"title": "随机数据渲染",
"filename": "renderRandomData.jsx",
"title": "渲染节点：无布局信息",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*nBhpT5HbGOAAAAAAAAAAAABkARQnAQ"
},
{
"filename": "Circle.jsx",
"title": "圆形数据渲染",
"filename": "renderSavedGraph.jsx",
"title": "渲染节点：有布局信息",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*nBhpT5HbGOAAAAAAAAAAAABkARQnAQ"
},
{
"filename": "AddNode.jsx",
"title": "添加节点",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*nBhpT5HbGOAAAAAAAAAAAABkARQnAQ"
},
{
"filename": "NodeExpand.jsx",
"title": "关系分析：节点扩散",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*nBhpT5HbGOAAAAAAAAAAAABkARQnAQ"
}
]
Expand Down
2 changes: 1 addition & 1 deletion ...phin-site/examples/render/demo/Random.jsx → ...examples/render/demo/renderRandomData.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import ReactDOM from 'react-dom';
import Graphin, { Utils } from '@antv/graphin';
import '@antv/graphin/dist/index.css'; // 引入Graphin CSS

const data = Utils.mock(10)
const data = Utils.mock(20)
.random()
.graphin();

Expand Down
9 changes: 7 additions & 2 deletions ...phin-site/examples/render/demo/Circle.jsx → ...examples/render/demo/renderSavedGraph.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,15 @@ import ReactDOM from 'react-dom';
import Graphin, { Utils } from '@antv/graphin';
import '@antv/graphin/dist/index.css'; // 引入Graphin CSS

const data = Utils.mock(10)
.circle()
const data = Utils.mock(20)
.random()
.graphin();

data.nodes.forEach(node => {
node.x = Math.random() * 500;
node.y = Math.random() * 500;
});

const App = () => {
return (
<div>
Expand Down
Loading

0 comments on commit 859a081

Please sign in to comment.