test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-04 12:49:04 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

refactor: using layouts on demond

Browse Source
This commit is contained in:
AlbertAZ1992 2021-02-02 18:38:05 +08:00 committed by Yanyan Wang
parent 6d056dd3ba
commit 696e459c2d
11 changed files with 174 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
packages/mobile/README.md
View File

@ -321,3 +321,167 @@ Page({
}
}
```
#### Layout with g6-mobile extends package
```ts
import G6 from '@antv/g6-mobile';
import CircularLayout from '@antv/g6-mobile/lib/extends/circularLayout';
G6.extend(CircularLayout);
Page({
data: {
canvasWidth: 400,
canvasHeight: 610,
},
onLoad() {
this.ctx = my.createCanvasContext('canvas')
this.drawG6()
},
drawG6() {
const { canvasWidth, canvasHeight } = this.data
const data = {
nodes: [
{
id: '0',
label: '0',
},
{
id: '1',
label: '1',
},
{
id: '2',
label: '2',
},
{
id: '3',
label: '3',
},
{
id: '4',
label: '4',
},
{
id: '5',
label: '5',
},
{
id: '6',
label: '6',
},
],
edges: [
{
source: '0',
target: '1',
},
{
source: '0',
target: '2',
},
{
source: '0',
target: '3',
},
{
source: '0',
target: '4',
},
{
source: '0',
target: '5',
},
{
source: '2',
target: '3',
},
{
source: '4',
target: '5',
},
{
source: '4',
target: '6',
},
{
source: '5',
target: '6',
},
],
};
// console.log('hello', G6.Layout)
const graph = new G6.Graph({
container: null,
context: this.ctx,
renderer: 'mini',
fitView: true,
width: canvasWidth,
height: canvasHeight,
defaultNode: {
shape: 'circle',
size: [20],
color: '#5B8FF9',
style: {
fill: '#9EC9FF',
lineWidth: 3,
},
labelCfg: {
style: {
fill: '#fff',
fontSize: 10,
},
},
},
layout: {
type: 'circular',
// begin: [20, 20],
// width: 800,
// height: 1200,
},
})
// graph.on('beforelayout', evt => {
// console.log('beforelayout------haha', evt)
// })
// graph.on('afterlayout', evt => {
// console.log('afterlayout------haha', evt)
// })
// graph.on('beginlayout', evt => {
// console.log('beginlayout------haha', evt)
// })
graph.data(data)
graph.render()
},
})
```
```html
<view class="page-map-relation">
<canvas
id="canvas"
class="canvas"
onTouchStart="log"
onTouchMove="log"
onTouchEnd="log"
/>
</view>
```
```css
.page-map-relation {
width: 100vw;
height: 100vh;
.canvas {
width: 100vw;
height: 100vh;
}
}
```

2
packages/mobile/src/extends/circularLayout/index.ts
View File

@ -1,4 +1,4 @@
import { CircularLayout } from '@antv/layout/es/layout/circular';
import { CircularLayout } from '@antv/layout/lib/layout/circular';
import { getExtender } from '../../util/extend';
function layoutExtender(option: any, G6: { registerLayout: Function; }) {

2
packages/mobile/src/extends/comboForceLayout/index.ts
View File

@ -1,4 +1,4 @@
import { ComboForceLayout } from '@antv/layout/es/layout/comboForce';
import { ComboForceLayout } from '@antv/layout/lib/layout/comboForce';
import { getExtender } from '../../util/extend';
function layoutExtender(option: any, G6: { registerLayout: Function; }) {

2
packages/mobile/src/extends/concentricLayout/index.ts
View File

@ -1,4 +1,4 @@
import { ConcentricLayout } from '@antv/layout/es/layout/concentric';
import { ConcentricLayout } from '@antv/layout/lib/layout/concentric';
import { getExtender } from '../../util/extend';
function layoutExtender(option: any, G6: { registerLayout: Function; }) {

2
packages/mobile/src/extends/dagreLayout/index.ts
View File

@ -1,4 +1,4 @@
import { DagreLayout } from '@antv/layout/es/layout/dagre';
import { DagreLayout } from '@antv/layout/lib/layout/dagre';
import { getExtender } from '../../util/extend';
function layoutExtender(option: any, G6: { registerLayout: Function; }) {

2
packages/mobile/src/extends/forceLayout/index.ts
View File

@ -1,4 +1,4 @@
import { ForceLayout } from '@antv/layout/es/layout/force';
import { ForceLayout } from '@antv/layout/lib/layout/force';
import { getExtender } from '../../util/extend';
function layoutExtender(option: any, G6: { registerLayout: Function; }) {

2
packages/mobile/src/extends/fruchtermanLayout/index.ts
View File

@ -1,4 +1,4 @@
import { FruchtermanLayout } from '@antv/layout/es/layout/fruchterman';
import { FruchtermanLayout } from '@antv/layout/lib/layout/fruchterman';
import { getExtender } from '../../util/extend';
function layoutExtender(option: any, G6: { registerLayout: Function; }) {

2
packages/mobile/src/extends/gForceLayout/index.ts
View File

@ -1,4 +1,4 @@
import { GForceLayout } from '@antv/layout/es/layout/gForce';
import { GForceLayout } from '@antv/layout/lib/layout/gForce';
import { getExtender } from '../../util/extend';
function layoutExtender(option: any, G6: { registerLayout: Function; }) {

2
packages/mobile/src/extends/gridLayout/index.ts
View File

@ -1,4 +1,4 @@
import { GridLayout } from '@antv/layout/es/layout/grid';
import { GridLayout } from '@antv/layout/lib/layout/grid';
import { getExtender } from '../../util/extend';
function layoutExtender(option: any, G6: { registerLayout: Function; }) {

2
packages/mobile/src/extends/mdsLayout/index.ts
View File

@ -1,4 +1,4 @@
import { MDSLayout } from '@antv/layout/es/layout/mds';
import { MDSLayout } from '@antv/layout/lib/layout/mds';
import { getExtender } from '../../util/extend';
function layoutExtender(option: any, G6: { registerLayout: Function; }) {

2
packages/mobile/src/extends/radialLayout/index.ts
View File

@ -1,4 +1,4 @@
import { RadialLayout } from '@antv/layout/es/layout/radial';
import { RadialLayout } from '@antv/layout/lib/layout/radial';
import { getExtender } from '../../util/extend';
function layoutExtender(option: any, G6: { registerLayout: Function; }) {