ahri-cloud-projects/X6
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: 📚️ add er demo (#1509)

Browse Source
This commit is contained in:
vector
2021-11-05 17:34:41 +08:00
committed by GitHub
parent cce30725ba
commit 90cd133bc3
8 changed files with 727 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
examples/x6-example-features/src/pages/case/dag.tsx Normal file
View File

349
examples/x6-example-features/src/pages/case/er.tsx Normal file
View File

@ -0,0 +1,349 @@
import React from 'react'
import { Graph, Cell, Shape } from '@antv/x6'
import '../index.less'
Graph.registerPortLayout(
'erPortPosition',
(portsPositionArgs) => {
return portsPositionArgs.map((_, index) => {
return {
position: {
x: 0,
y: (index + 1) * 24,
},
angle: 0,
}
})
},
true,
)
Graph.registerNode(
'er-rect',
{
inherit: 'rect',
markup: [
{
tagName: 'rect',
selector: 'body',
},
{
tagName: 'text',
selector: 'label',
},
],
attrs: {
rect: {
strokeWidth: 1,
stroke: '#5F95FF',
fill: '#5F95FF',
},
label: {
fontWeight: 'bold',
fill: '#ffffff',
fontSize: 12,
},
},
ports: {
groups: {
list: {
markup: [
{
tagName: 'rect',
selector: 'portBody',
},
{
tagName: 'text',
selector: 'portNameLabel',
},
{
tagName: 'text',
selector: 'portTypeLabel',
},
],
attrs: {
portBody: {
width: 150,
height: 24,
strokeWidth: 1,
stroke: '#5F95FF',
fill: '#EFF4FF',
magnet: true,
},
portNameLabel: {
ref: 'portBody',
refX: 6,
refY: 6,
fontSize: 10,
},
portTypeLabel: {
ref: 'portBody',
refX: 95,
refY: 6,
fontSize: 10,
},
},
position: 'erPortPosition',
},
},
},
},
true,
)
const data = [
{
id: '1',
shape: 'er-rect',
label: '学生',
width: 150,
height: 24,
position: { x: 80, y: 150 },
ports: [
{
id: '1-1',
group: 'list',
attrs: {
portNameLabel: {
text: 'ID',
},
portTypeLabel: {
text: 'STRING',
},
},
},
{
id: '1-2',
group: 'list',
attrs: {
portNameLabel: {
text: 'Name',
},
portTypeLabel: {
text: 'STRING',
},
},
},
{
id: '1-3',
group: 'list',
attrs: {
portNameLabel: {
text: 'Class',
},
portTypeLabel: {
text: 'NUMBER',
},
},
},
{
id: '1-4',
group: 'list',
attrs: {
portNameLabel: {
text: 'Gender',
},
portTypeLabel: {
text: 'BOOLEAN',
},
},
},
],
},
{
id: '2',
shape: 'er-rect',
label: '课程',
width: 150,
height: 24,
position: { x: 320, y: 210 },
ports: [
{
id: '2-1',
group: 'list',
attrs: {
portNameLabel: {
text: 'ID',
},
portTypeLabel: {
text: 'STRING',
},
},
},
{
id: '2-2',
group: 'list',
attrs: {
portNameLabel: {
text: 'Name',
},
portTypeLabel: {
text: 'STRING',
},
},
},
{
id: '2-3',
group: 'list',
attrs: {
portNameLabel: {
text: 'StudentID',
},
portTypeLabel: {
text: 'STRING',
},
},
},
{
id: '2-4',
group: 'list',
attrs: {
portNameLabel: {
text: 'TeacherID',
},
portTypeLabel: {
text: 'STRING',
},
},
},
{
id: '2-5',
group: 'list',
attrs: {
portNameLabel: {
text: 'Description',
},
portTypeLabel: {
text: 'STRING',
},
},
},
],
},
{
id: '3',
shape: 'er-rect',
label: '老师',
width: 150,
height: 24,
position: { x: 560, y: 350 },
ports: [
{
id: '3-1',
group: 'list',
attrs: {
portNameLabel: {
text: 'ID',
},
portTypeLabel: {
text: 'STRING',
},
},
},
{
id: '3-2',
group: 'list',
attrs: {
portNameLabel: {
text: 'Name',
},
portTypeLabel: {
text: 'STRING',
},
},
},
{
id: '3-3',
group: 'list',
attrs: {
portNameLabel: {
text: 'Age',
},
portTypeLabel: {
text: 'NUMBER',
},
},
},
],
},
{
id: '4',
shape: 'edge',
source: { cell: '1', port: '1-1' },
target: { cell: '2', port: '2-3' },
attrs: {
line: {
stroke: '#A2B1C3',
strokeWidth: 2,
},
},
zIndex: 0,
},
{
id: '5',
shape: 'edge',
source: { cell: '3', port: '3-1' },
target: { cell: '2', port: '2-4' },
attrs: {
line: {
stroke: '#A2B1C3',
strokeWidth: 2,
},
},
zIndex: 0,
},
]
export default class Example extends React.Component {
private container: HTMLDivElement
componentDidMount() {
const graph = new Graph({
container: this.container,
width: 800,
height: 600,
grid: true,
connecting: {
router: {
name: 'er',
args: {
offset: 25,
direction: 'H',
},
},
createEdge() {
return new Shape.Edge({
attrs: {
line: {
stroke: '#A2B1C3',
strokeWidth: 2,
},
},
})
},
},
})
const cells: Cell[] = []
data.forEach((item) => {
if (item.shape === 'edge') {
cells.push(graph.createEdge(item))
} else {
cells.push(graph.createNode(item))
}
})
graph.resetCells(cells)
}
refContainer = (container: HTMLDivElement) => {
this.container = container
}
render() {
return (
<div className="x6-graph-wrap">
<div ref={this.refContainer} className="x6-graph" />
</div>
)
}
}

223
sites/x6-sites/examples/data/er.json Normal file
View File

@ -0,0 +1,223 @@
[
{
"id": "1",
"shape": "er-rect",
"label": "学生",
"width": 150,
"height": 24,
"position": {
"x": 24,
"y": 150
},
"ports": [
{
"id": "1-1",
"group": "list",
"attrs": {
"portNameLabel": {
"text": "ID"
},
"portTypeLabel": {
"text": "STRING"
}
}
},
{
"id": "1-2",
"group": "list",
"attrs": {
"portNameLabel": {
"text": "Name"
},
"portTypeLabel": {
"text": "STRING"
}
}
},
{
"id": "1-3",
"group": "list",
"attrs": {
"portNameLabel": {
"text": "Class"
},
"portTypeLabel": {
"text": "NUMBER"
}
}
},
{
"id": "1-4",
"group": "list",
"attrs": {
"portNameLabel": {
"text": "Gender"
},
"portTypeLabel": {
"text": "BOOLEAN"
}
}
}
]
},
{
"id": "2",
"shape": "er-rect",
"label": "课程",
"width": 150,
"height": 24,
"position": {
"x": 250,
"y": 210
},
"ports": [
{
"id": "2-1",
"group": "list",
"attrs": {
"portNameLabel": {
"text": "ID"
},
"portTypeLabel": {
"text": "STRING"
}
}
},
{
"id": "2-2",
"group": "list",
"attrs": {
"portNameLabel": {
"text": "Name"
},
"portTypeLabel": {
"text": "STRING"
}
}
},
{
"id": "2-3",
"group": "list",
"attrs": {
"portNameLabel": {
"text": "StudentID"
},
"portTypeLabel": {
"text": "STRING"
}
}
},
{
"id": "2-4",
"group": "list",
"attrs": {
"portNameLabel": {
"text": "TeacherID"
},
"portTypeLabel": {
"text": "STRING"
}
}
},
{
"id": "2-5",
"group": "list",
"attrs": {
"portNameLabel": {
"text": "Description"
},
"portTypeLabel": {
"text": "STRING"
}
}
}
]
},
{
"id": "3",
"shape": "er-rect",
"label": "老师",
"width": 150,
"height": 24,
"position": {
"x": 480,
"y": 350
},
"ports": [
{
"id": "3-1",
"group": "list",
"attrs": {
"portNameLabel": {
"text": "ID"
},
"portTypeLabel": {
"text": "STRING"
}
}
},
{
"id": "3-2",
"group": "list",
"attrs": {
"portNameLabel": {
"text": "Name"
},
"portTypeLabel": {
"text": "STRING"
}
}
},
{
"id": "3-3",
"group": "list",
"attrs": {
"portNameLabel": {
"text": "Age"
},
"portTypeLabel": {
"text": "NUMBER"
}
}
}
]
},
{
"id": "4",
"shape": "edge",
"source": {
"cell": "1",
"port": "1-1"
},
"target": {
"cell": "2",
"port": "2-3"
},
"attrs": {
"line": {
"stroke": "#A2B1C3",
"strokeWidth": 2
}
},
"zIndex": 0
},
{
"id": "5",
"shape": "edge",
"source": {
"cell": "3",
"port": "3-1"
},
"target": {
"cell": "2",
"port": "2-4"
},
"attrs": {
"line": {
"stroke": "#A2B1C3",
"strokeWidth": 2
}
},
"zIndex": 0
}
]

15
sites/x6-sites/examples/showcase/practices/demo/class.ts
View File

@ -39,18 +39,21 @@ Graph.registerNode(
rect: {
width: 160,
},
body: {
stroke: '#fff',
},
'name-rect': {
fill: '#FC8830',
fill: '#5f95ff',
stroke: '#fff',
strokeWidth: 0.5,
},
'attrs-rect': {
fill: '#fda059',
fill: '#eff4ff',
stroke: '#fff',
strokeWidth: 0.5,
},
'methods-rect': {
fill: '#fda059',
fill: '#eff4ff',
stroke: '#fff',
strokeWidth: 0.5,
},
@ -60,7 +63,7 @@ Graph.registerNode(
refX: 0.5,
textAnchor: 'middle',
fontWeight: 'bold',
fill: 'black',
fill: '#fff',
fontSize: 12,
},
'attrs-text': {
@ -69,7 +72,7 @@ Graph.registerNode(
refX: 5,
textAnchor: 'left',
fill: 'black',
fontSize: 12,
fontSize: 10,
},
'methods-text': {
ref: 'methods-rect',
@ -77,7 +80,7 @@ Graph.registerNode(
refX: 5,
textAnchor: 'left',
fill: 'black',
fontSize: 12,
fontSize: 10,
},
},
propHooks(meta) {

131
sites/x6-sites/examples/showcase/practices/demo/er.ts Normal file
View File

@ -0,0 +1,131 @@
import { Graph, Cell, Shape } from '@antv/x6'
const LINE_HEIGHT = 24
const NODE_WIDTH = 150
Graph.registerPortLayout(
'erPortPosition',
(portsPositionArgs) => {
return portsPositionArgs.map((_, index) => {
return {
position: {
x: 0,
y: (index + 1) * LINE_HEIGHT,
},
angle: 0,
}
})
},
true,
)
Graph.registerNode(
'er-rect',
{
inherit: 'rect',
markup: [
{
tagName: 'rect',
selector: 'body',
},
{
tagName: 'text',
selector: 'label',
},
],
attrs: {
rect: {
strokeWidth: 1,
stroke: '#5F95FF',
fill: '#5F95FF',
},
label: {
fontWeight: 'bold',
fill: '#ffffff',
fontSize: 12,
},
},
ports: {
groups: {
list: {
markup: [
{
tagName: 'rect',
selector: 'portBody',
},
{
tagName: 'text',
selector: 'portNameLabel',
},
{
tagName: 'text',
selector: 'portTypeLabel',
},
],
attrs: {
portBody: {
width: NODE_WIDTH,
height: LINE_HEIGHT,
strokeWidth: 1,
stroke: '#5F95FF',
fill: '#EFF4FF',
magnet: true,
},
portNameLabel: {
ref: 'portBody',
refX: 6,
refY: 6,
fontSize: 10,
},
portTypeLabel: {
ref: 'portBody',
refX: 95,
refY: 6,
fontSize: 10,
},
},
position: 'erPortPosition',
},
},
},
},
true,
)
const graph = new Graph({
container: document.getElementById('container')!,
grid: true,
connecting: {
router: {
name: 'er',
args: {
offset: 25,
direction: 'H',
},
},
createEdge() {
return new Shape.Edge({
attrs: {
line: {
stroke: '#A2B1C3',
strokeWidth: 2,
},
},
})
},
},
})
fetch('../data/er.json')
.then((response) => response.json())
.then((data) => {
const cells: Cell[] = []
data.forEach((item: any) => {
if (item.shape === 'edge') {
cells.push(graph.createEdge(item))
} else {
cells.push(graph.createNode(item))
}
})
graph.resetCells(cells)
})

12
sites/x6-sites/examples/showcase/practices/demo/meta.json
View File

@ -6,7 +6,7 @@
"zh": "流程图",
"en": "Flow Chart"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*Rr7oSJTcR10AAAAAAAAAAAAAARQnAQ"
"screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*JSr-RbwCgmcAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "algo-flow.tsx",
@ -16,6 +16,14 @@
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*3A0IR44lo60AAAAAAAAAAAAAARQnAQ"
},
{
"filename": "er.ts",
"title": {
"zh": "ER 图",
"en": "ER"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*1TPwTaOHnyYAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "validate-connection.ts",
"title": {
@ -62,7 +70,7 @@
"zh": "UML 类图",
"en": "UML Class"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*cbgtS5uNnOcAAAAAAAAAAAAAARQnAQ"
"screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*OaCpR7t_mVoAAAAAAAAAAAAAARQnAQ"
}
]
}

2
sites/x6-sites/package.json
View File

@ -15,7 +15,7 @@
"sites"
],
"dependencies": {
"@antv/gatsby-theme-antv": "^1.1.6",
"@antv/gatsby-theme-antv": "^1.1.13",
"@antv/x6": "^1.28.1",
"@antv/x6-react-components": "^1.1.14",
"@antv/x6-react-shape": "^1.5.2",

8
yarn.lock
View File

@ -179,10 +179,10 @@
probe.gl "^3.1.1"
reflect-metadata "^0.1.13"
"@antv/gatsby-theme-antv@^1.1.6":
version "1.1.6"
resolved "https://registry.nlark.com/@antv/gatsby-theme-antv/download/@antv/gatsby-theme-antv-1.1.6.tgz?cache=0&sync_timestamp=1624502856058&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40antv%2Fgatsby-theme-antv%2Fdownload%2F%40antv%2Fgatsby-theme-antv-1.1.6.tgz#1066d86b78c18adc4cf8a91d0aae88c82d6c40e5"
integrity sha1-EGbYa3jBitxM+KkdCq6IyC1sQOU=
"@antv/gatsby-theme-antv@^1.1.13":
version "1.1.13"
resolved "https://registry.npmjs.org/@antv/gatsby-theme-antv/-/gatsby-theme-antv-1.1.13.tgz#1acf9055de52ff5ffc8e73bdd02c7920f0284ef8"
integrity sha512-SUfmwviW6wsL8dPBZzv8ULs/yyR4bx82XB8/x4fERFk0Ut2On4q54ekwG5OgBban8bsivsPNTTWkp7+x/cRhjQ==
dependencies:
"@ant-design/icons" "^4.1.0"
"@hot-loader/react-dom" "^16.9.0+4.12.11"