Skip to content

Commit 33ea4e0

Browse files
gaoligaoli
committed
feat: Init
0 parents  commit 33ea4e0

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+1625
-0
lines changed

‎.babelrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["env", "react", "stage-0"]
3+
}

‎.eslintignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# dist
2+
dist
3+
4+
# postcss config
5+
postcss.config.js

‎.eslintrc.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"env": {
3+
"browser": true
4+
},
5+
"parser": "babel-eslint",
6+
"extends": "airbnb",
7+
"rules": {
8+
"import/extensions": 0,
9+
"import/no-unresolved": 0,
10+
"import/no-extraneous-dependencies": 0,
11+
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
12+
"react/sort-comp": 0,
13+
"react/prop-types": 0,
14+
"react/prefer-stateless-function": 0,
15+
"func-names": 0,
16+
"class-methods-use-this": 0
17+
}
18+
}

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎CNAME

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
gg.gaoli.me

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2016 gaoli <[email protected]>
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.

‎README.md

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# gg-editor
2+
3+
![language](https://img.shields.io/badge/language-react-red.svg) [![GitHub license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/gaoli/gg-editor/blob/master/LICENSE)
4+
[![npm version](https://img.shields.io/npm/v/gg-editor.svg)](https://www.npmjs.com/package/gg-editor)
5+
[![npm downloads](https://img.shields.io/npm/dm/gg-editor.svg)](https://www.npmjs.com/package/gg-editor)
6+
7+
A visual graph editor based G6 and React
8+
9+
## Installation
10+
11+
### npm
12+
13+
```
14+
npm i gg-editor
15+
```
16+
17+
### umd
18+
19+
```
20+
<script src="https://unpkg.com/gg-editor@${version}/dist/bundle.js"></script>
21+
```
22+
23+
## Usage
24+
25+
```jsx
26+
import GGEditor, { Flow, Mind } from 'gg-editor';
27+
28+
// Flow
29+
<GGEditor>
30+
<Flow defaultData={...} />
31+
</GGEditor>
32+
33+
// Mind
34+
<GGEditor>
35+
<Mind defaultData={...} />
36+
</GGEditor>
37+
```

‎demo/dist/bundle.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/dist/bundle.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/index.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>GG Editor</title>
8+
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/antd.min.css">
9+
<style type="text/css">
10+
#root, #root > div {
11+
display: flex;
12+
width: 100%;
13+
height: 100%;
14+
overflow: hidden;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<div id="root"></div>
20+
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
21+
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
22+
<script src="https://unpkg.com/[email protected]/prop-types.min.js"></script>
23+
<script src="https://unpkg.com/[email protected]/umd/react-router-dom.min.js"></script>
24+
<script src="https://unpkg.com/[email protected]/min/moment.min.js"></script>
25+
<script src="https://unpkg.com/[email protected]/dist/antd.min.js"></script>
26+
<script src="./dist/bundle.js"></script>
27+
</body>
28+
</html>

‎demo/src/components/NodeDetail/index.js

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React from 'react';
2+
import { Card, Form, Input } from 'antd';
3+
4+
const { Item } = Form;
5+
6+
const inlineFormItemLayout = {
7+
labelCol: {
8+
sm: { span: 6 },
9+
},
10+
wrapperCol: {
11+
sm: { span: 18 },
12+
},
13+
};
14+
15+
class NodeDetail extends React.Component {
16+
handleSubmit = () => {
17+
const { form, items, updateItem } = this.props;
18+
19+
form.validateFieldsAndScroll((err, values) => {
20+
if (err) {
21+
return;
22+
}
23+
24+
updateItem(items[0], {
25+
...values,
26+
});
27+
});
28+
}
29+
30+
render() {
31+
const { form, items } = this.props;
32+
const { getFieldDecorator } = form;
33+
34+
const item = items[0];
35+
36+
if (!item) {
37+
return null;
38+
}
39+
40+
const { label } = item.getModel();
41+
42+
return (
43+
<Card type="inner" title="节点属性" bordered={false}>
44+
<Form onSubmit={this.handleSubmit}>
45+
<Item
46+
label="label"
47+
{...inlineFormItemLayout}
48+
>
49+
{
50+
getFieldDecorator('label', {
51+
initialValue: label,
52+
})(<Input onBlur={this.handleSubmit} />)
53+
}
54+
</Item>
55+
</Form>
56+
</Card>
57+
);
58+
}
59+
}
60+
61+
export default Form.create()(NodeDetail);

‎demo/src/index.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import { HashRouter as Router, Route } from 'react-router-dom';
4+
import Flow from './pages/Flow';
5+
import Mind from './pages/Mind';
6+
7+
ReactDOM.render(
8+
<Router>
9+
<div>
10+
<Route path="/flow" component={Flow} />
11+
<Route path="/mind" component={Mind} />
12+
</div>
13+
</Router>,
14+
document.getElementById('root'),
15+
);

‎demo/src/pages/Flow/index.js

+197
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
import React from 'react';
2+
import { Row, Col, Card } from 'antd';
3+
import GGEditor, {
4+
Flow,
5+
Command,
6+
Minimap,
7+
Toolbar,
8+
Item,
9+
ItemPannel,
10+
NodePannel,
11+
EdgePannel,
12+
GroupPannel,
13+
MultiPannel,
14+
CanvasPannel,
15+
DetailPannel,
16+
} from '@src';
17+
import NodeDetail from '../../components/NodeDetail';
18+
import styles from './index.scss';
19+
import iconfont from '../../theme/iconfont.scss';
20+
21+
class FlowPage extends React.Component {
22+
flow = null;
23+
24+
renderFlow() {
25+
return (
26+
<Flow
27+
ref={(component) => {
28+
if (component) {
29+
this.flow = component.page;
30+
}
31+
}}
32+
className={styles.flow}
33+
/>
34+
);
35+
}
36+
37+
renderToolbar() {
38+
return (
39+
<Toolbar className={styles.toolbar}>
40+
<Command name="undo">
41+
<i className={`${iconfont.iconfont} ${iconfont.iconUndo}`} title="撤销" />
42+
</Command>
43+
<Command name="redo">
44+
<i className={`${iconfont.iconfont} ${iconfont.iconRedo}`} title="重做" />
45+
</Command>
46+
47+
<Command name="copy">
48+
<i className={`${iconfont.iconfont} ${iconfont.iconCopyO}`} title="复制" />
49+
</Command>
50+
<Command name="paste">
51+
<i className={`${iconfont.iconfont} ${iconfont.iconPasterO}`} title="粘贴" />
52+
</Command>
53+
<Command name="delete">
54+
<i className={`${iconfont.iconfont} ${iconfont.iconDeleteO}`} title="删除" />
55+
</Command>
56+
57+
<Command name="zoomIn">
58+
<i className={`${iconfont.iconfont} ${iconfont.iconZoomInO}`} title="放大" />
59+
</Command>
60+
<Command name="zoomOut">
61+
<i className={`${iconfont.iconfont} ${iconfont.iconZoomOutO}`} title="缩小" />
62+
</Command>
63+
<Command name="autoZoom">
64+
<i className={`${iconfont.iconfont} ${iconfont.iconFit}`} title="适应画布" />
65+
</Command>
66+
<Command name="resetZoom">
67+
<i className={`${iconfont.iconfont} ${iconfont.iconActualSizeO}`} title="实际尺寸" />
68+
</Command>
69+
70+
<Command name="toBack">
71+
<i className={`${iconfont.iconfont} ${iconfont.iconToBack}`} title="层级后置" />
72+
</Command>
73+
<Command name="toFront">
74+
<i className={`${iconfont.iconfont} ${iconfont.iconToFront}`} title="层级前置" />
75+
</Command>
76+
77+
<Command name="multiSelect">
78+
<i className={`${iconfont.iconfont} ${iconfont.iconSelect}`} title="多选" />
79+
</Command>
80+
<Command name="addGroup">
81+
<i className={`${iconfont.iconfont} ${iconfont.iconGroup}`} title="成组" />
82+
</Command>
83+
<Command name="unGroup">
84+
<i className={`${iconfont.iconfont} ${iconfont.iconUngroup}`} title="解组" />
85+
</Command>
86+
</Toolbar>
87+
);
88+
}
89+
90+
renderItemPannel() {
91+
return (
92+
<ItemPannel className={styles.itemPannel}>
93+
<Card bordered={false}>
94+
<Item
95+
type="node"
96+
size="72*72"
97+
shape="flow-circle"
98+
model={{
99+
color: '#FA8C16',
100+
label: '起止节点',
101+
}}
102+
src="https://gw.alipayobjects.com/zos/rmsportal/ZnPxbVjKYADMYxkTQXRi.svg"
103+
/>
104+
<Item
105+
type="node"
106+
size="80*48"
107+
shape="flow-rect"
108+
model={{
109+
color: '#1890FF',
110+
label: '常规节点',
111+
}}
112+
src="https://gw.alipayobjects.com/zos/rmsportal/wHcJakkCXDrUUlNkNzSy.svg"
113+
/>
114+
<Item
115+
type="node"
116+
size="80*72"
117+
shape="flow-rhombus"
118+
model={{
119+
color: '#13C2C2',
120+
label: '分叉节点',
121+
}}
122+
src="https://gw.alipayobjects.com/zos/rmsportal/SnWIktArriZRWdGCnGfK.svg"
123+
/>
124+
<Item
125+
type="node"
126+
size="80*48"
127+
shape="flow-capsule"
128+
model={{
129+
color: '#722ED1',
130+
label: '模型节点',
131+
}}
132+
src="https://gw.alipayobjects.com/zos/rmsportal/rQMUhHHSqwYsPwjXxcfP.svg"
133+
/>
134+
</Card>
135+
</ItemPannel>
136+
);
137+
}
138+
139+
renderDetailPannel() {
140+
return (
141+
<DetailPannel className={styles.detailPannel}>
142+
<NodePannel>
143+
<NodeDetail />
144+
</NodePannel>
145+
<EdgePannel>
146+
<Card type="inner" title="边线属性" bordered={false} />
147+
</EdgePannel>
148+
<GroupPannel>
149+
<Card type="inner" title="群组属性" bordered={false} />
150+
</GroupPannel>
151+
<MultiPannel>
152+
<Card type="inner" title="多选属性" bordered={false} />
153+
</MultiPannel>
154+
<CanvasPannel>
155+
<Card type="inner" title="画布属性" bordered={false} />
156+
</CanvasPannel>
157+
</DetailPannel>
158+
);
159+
}
160+
161+
renderMinimap() {
162+
return (
163+
<Card type="inner" title="缩略图" bordered={false}>
164+
<Minimap
165+
width={200}
166+
height={200}
167+
/>
168+
</Card>
169+
);
170+
}
171+
172+
render() {
173+
return (
174+
<GGEditor className={styles.editor}>
175+
<Row type="flex" className={styles.editorHd}>
176+
<Col span={24}>
177+
{this.renderToolbar()}
178+
</Col>
179+
</Row>
180+
<Row type="flex" className={styles.editorBd}>
181+
<Col span={4} className={styles.editorSidebar}>
182+
{this.renderItemPannel()}
183+
</Col>
184+
<Col span={16} className={styles.editorContent}>
185+
{this.renderFlow()}
186+
</Col>
187+
<Col span={4} className={styles.editorSidebar}>
188+
{this.renderDetailPannel()}
189+
{this.renderMinimap()}
190+
</Col>
191+
</Row>
192+
</GGEditor>
193+
);
194+
}
195+
}
196+
197+
export default FlowPage;

0 commit comments

Comments
 (0)