diff --git a/packages/g6/__tests__/dataset/cluster.json b/packages/g6/__tests__/dataset/cluster.json
index 183fef09b85..26da5055001 100644
--- a/packages/g6/__tests__/dataset/cluster.json
+++ b/packages/g6/__tests__/dataset/cluster.json
@@ -1,39 +1,39 @@
{
"nodes": [
- { "id": "0", "style": { "cluster": "a" } },
- { "id": "1", "style": { "cluster": "a" } },
- { "id": "2", "style": { "cluster": "a" } },
- { "id": "3", "style": { "cluster": "a" } },
- { "id": "4", "style": { "cluster": "a" } },
- { "id": "5", "style": { "cluster": "a" } },
- { "id": "6", "style": { "cluster": "a" } },
- { "id": "7", "style": { "cluster": "a" } },
- { "id": "8", "style": { "cluster": "a" } },
- { "id": "9", "style": { "cluster": "a" } },
- { "id": "10", "style": { "cluster": "a" } },
- { "id": "11", "style": { "cluster": "a" } },
- { "id": "12", "style": { "cluster": "a" } },
- { "id": "13", "style": { "cluster": "b" } },
- { "id": "14", "style": { "cluster": "b" } },
- { "id": "15", "style": { "cluster": "b" } },
- { "id": "16", "style": { "cluster": "b" } },
- { "id": "17", "style": { "cluster": "b" } },
- { "id": "18", "style": { "cluster": "c" } },
- { "id": "19", "style": { "cluster": "c" } },
- { "id": "20", "style": { "cluster": "c" } },
- { "id": "21", "style": { "cluster": "c" } },
- { "id": "22", "style": { "cluster": "c" } },
- { "id": "23", "style": { "cluster": "c" } },
- { "id": "24", "style": { "cluster": "c" } },
- { "id": "25", "style": { "cluster": "c" } },
- { "id": "26", "style": { "cluster": "c" } },
- { "id": "27", "style": { "cluster": "c" } },
- { "id": "28", "style": { "cluster": "c" } },
- { "id": "29", "style": { "cluster": "c" } },
- { "id": "30", "style": { "cluster": "c" } },
- { "id": "31", "style": { "cluster": "d" } },
- { "id": "32", "style": { "cluster": "d" } },
- { "id": "33", "style": { "cluster": "d" } }
+ { "id": "0", "data": { "cluster": "a" } },
+ { "id": "1", "data": { "cluster": "a" } },
+ { "id": "2", "data": { "cluster": "a" } },
+ { "id": "3", "data": { "cluster": "a" } },
+ { "id": "4", "data": { "cluster": "a" } },
+ { "id": "5", "data": { "cluster": "a" } },
+ { "id": "6", "data": { "cluster": "a" } },
+ { "id": "7", "data": { "cluster": "a" } },
+ { "id": "8", "data": { "cluster": "a" } },
+ { "id": "9", "data": { "cluster": "a" } },
+ { "id": "10", "data": { "cluster": "a" } },
+ { "id": "11", "data": { "cluster": "a" } },
+ { "id": "12", "data": { "cluster": "a" } },
+ { "id": "13", "data": { "cluster": "b" } },
+ { "id": "14", "data": { "cluster": "b" } },
+ { "id": "15", "data": { "cluster": "b" } },
+ { "id": "16", "data": { "cluster": "b" } },
+ { "id": "17", "data": { "cluster": "b" } },
+ { "id": "18", "data": { "cluster": "c" } },
+ { "id": "19", "data": { "cluster": "c" } },
+ { "id": "20", "data": { "cluster": "c" } },
+ { "id": "21", "data": { "cluster": "c" } },
+ { "id": "22", "data": { "cluster": "c" } },
+ { "id": "23", "data": { "cluster": "c" } },
+ { "id": "24", "data": { "cluster": "c" } },
+ { "id": "25", "data": { "cluster": "c" } },
+ { "id": "26", "data": { "cluster": "c" } },
+ { "id": "27", "data": { "cluster": "c" } },
+ { "id": "28", "data": { "cluster": "c" } },
+ { "id": "29", "data": { "cluster": "c" } },
+ { "id": "30", "data": { "cluster": "c" } },
+ { "id": "31", "data": { "cluster": "d" } },
+ { "id": "32", "data": { "cluster": "d" } },
+ { "id": "33", "data": { "cluster": "d" } }
],
"edges": [
{ "source": "0", "target": "1" },
diff --git a/packages/g6/__tests__/demo/case/index.ts b/packages/g6/__tests__/demo/case/index.ts
index 7a603076911..4d01a291b6e 100644
--- a/packages/g6/__tests__/demo/case/index.ts
+++ b/packages/g6/__tests__/demo/case/index.ts
@@ -5,5 +5,6 @@ export * from './combo';
export * from './common-graph';
export * from './element-change-type';
export * from './graph-event';
+export * from './layout-grid';
export * from './plugin-grid-line';
export * from './viewport-fit';
diff --git a/packages/g6/__tests__/demo/case/layout-grid.ts b/packages/g6/__tests__/demo/case/layout-grid.ts
new file mode 100644
index 00000000000..2fd88c32b36
--- /dev/null
+++ b/packages/g6/__tests__/demo/case/layout-grid.ts
@@ -0,0 +1,46 @@
+import { Graph } from '@/src';
+import data from '@@/dataset/cluster.json';
+import type { STDTestCase } from '../types';
+
+export const layoutGrid: STDTestCase = async (context) => {
+ const graph = new Graph({
+ ...context,
+ data,
+ behaviors: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'],
+ layout: {
+ type: 'grid',
+ sortBy: 'cluster',
+ },
+ node: {
+ style: {
+ size: 20,
+ stroke: '#ccc',
+ lineWidth: 1,
+ labelText: (d: any) => d.id,
+ },
+ },
+ });
+
+ await graph.render();
+
+ layoutGrid.form = (panel) => {
+ const config = {
+ sortBy: 'degree',
+ };
+ return [
+ panel
+ .add(config, 'sortBy', {
+ ID: 'id',
+ Degree: 'degree',
+ Cluster: (n1: any, n2: any) => Number(n2.data.cluster) - Number(n1.data.cluster),
+ })
+ .name('sortBy')
+ .onChange((value: string) => {
+ graph.setLayout({ type: 'grid', sortBy: value });
+ graph.layout();
+ }),
+ ];
+ };
+
+ return graph;
+};
diff --git a/packages/g6/__tests__/demo/static/element-label-background.ts b/packages/g6/__tests__/demo/static/element-label-background.ts
index 598757b4d1b..3f73086f4a1 100644
--- a/packages/g6/__tests__/demo/static/element-label-background.ts
+++ b/packages/g6/__tests__/demo/static/element-label-background.ts
@@ -44,7 +44,7 @@ export const elementLabelBackground: StaticTestCase = async (context) => {
node: {
style: {
labelText: (d: any) => d.id,
- labelPosition: 'bottom',
+ labelPlacement: 'bottom',
labelFill: '#e66465',
labelFontSize: 12,
labelFontStyle: 'italic',
@@ -56,7 +56,7 @@ export const elementLabelBackground: StaticTestCase = async (context) => {
edge: {
style: {
labelText: (d: any) => d.id,
- labelPosition: 'center',
+ labelPlacement: 'center',
labelTextBaseline: 'top',
labelDy: 5,
labelFontSize: 12,
diff --git a/packages/g6/__tests__/snapshots/layouts/grid/grid__sortby_default.svg b/packages/g6/__tests__/snapshots/layouts/grid/grid__sortby_default.svg
new file mode 100644
index 00000000000..10df5c8b777
--- /dev/null
+++ b/packages/g6/__tests__/snapshots/layouts/grid/grid__sortby_default.svg
@@ -0,0 +1,3353 @@
+
\ No newline at end of file
diff --git a/packages/g6/__tests__/snapshots/layouts/grid/grid__sortby_id.svg b/packages/g6/__tests__/snapshots/layouts/grid/grid__sortby_id.svg
new file mode 100644
index 00000000000..04214f1e172
--- /dev/null
+++ b/packages/g6/__tests__/snapshots/layouts/grid/grid__sortby_id.svg
@@ -0,0 +1,3353 @@
+
\ No newline at end of file
diff --git a/packages/g6/__tests__/unit/layouts/grid.spec.ts b/packages/g6/__tests__/unit/layouts/grid.spec.ts
new file mode 100644
index 00000000000..f39fc96a77b
--- /dev/null
+++ b/packages/g6/__tests__/unit/layouts/grid.spec.ts
@@ -0,0 +1,24 @@
+import type { Graph } from '@/src';
+import { layoutGrid } from '@@/demo/case/layout-grid';
+import { createDemoGraph } from '@@/utils';
+
+describe('grid', () => {
+ let graph: Graph;
+
+ beforeAll(async () => {
+ graph = await createDemoGraph(layoutGrid);
+ });
+
+ afterAll(() => {
+ graph.destroy();
+ });
+
+ it('sortBy default', async () => {
+ await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__sortby_default');
+ });
+
+ it('sortBy id', async () => {
+ graph.setLayout({ type: 'grid', sortBy: 'id' }), await graph.layout();
+ await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__sortby_id');
+ });
+});
diff --git a/packages/site/examples/net/gridLayout/demo/grid.js b/packages/site/examples/net/gridLayout/demo/grid.ts
similarity index 84%
rename from packages/site/examples/net/gridLayout/demo/grid.js
rename to packages/site/examples/net/gridLayout/demo/grid.ts
index 7b36f4ac6eb..5a0b71d223b 100644
--- a/packages/site/examples/net/gridLayout/demo/grid.js
+++ b/packages/site/examples/net/gridLayout/demo/grid.ts
@@ -1,10 +1,4 @@
-import { Graph, Extensions, extend } from '@antv/g6';
-
-const ExtGraph = extend(Graph, {
- behaviors: {
- 'brush-select': Extensions.BrushSelect,
- },
-});
+import { Graph } from '@antv/g6';
const data = {
nodes: [
@@ -611,100 +605,50 @@ const data = {
],
};
-const container = document.getElementById('container');
-const width = container.scrollWidth;
-const height = container.scrollHeight || 500;
-const graph = new ExtGraph({
+const graph = new Graph({
container: 'container',
- width,
- height,
- modes: {
- default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select', 'brush-select'],
- },
- plugins: [
- {
- type: 'lod-controller',
- disableLod: true,
- },
- ],
+ data,
layout: {
type: 'grid',
- begin: [20, 20],
- width: width - 20,
- height: height - 20,
+ sortBy: 'id',
},
- theme: {
- type: 'spec',
- base: 'light',
- specification: {
- node: {
- dataTypeField: 'cluster',
- },
+ node: {
+ style: {
+ size: 20,
+ stroke: '#ccc',
+ lineWidth: 1,
+ labelText: (d) => d.id,
},
},
- node: (model) => {
- return {
- id: model.id,
- data: {
- ...model.data,
- labelShape: {
- text: model.data.label,
- },
- animates: {
- update: [
- {
- fields: ['x', 'y'],
- duration: 500,
- },
- {
- fields: ['opacity'],
- shapeId: 'haloShape',
- },
- {
- fields: ['lineWidth'],
- shapeId: 'keyShape',
- },
- ],
- },
- },
- };
- },
- data,
+ behaviors: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'],
+ animation: true,
});
-window.graph = graph;
-const configs = {
- Default: {
- type: 'grid',
- begin: [20, 20],
- width: width - 20,
- height: height - 20,
- sortBy: 'data',
- },
- Clustering: {
- type: 'grid',
- begin: [20, 20],
- width: width - 20,
- height: height - 20,
- sortBy: 'cluster',
- },
+graph.render();
+
+/** Below is the buttons. */
+const SORT_BY = {
+ ID: 'id',
+ Degree: 'degree',
+ Cluster: (n1, n2) => Number(n2.data.cluster) - Number(n1.data.cluster),
};
+const container = document.getElementById('container');
const btnContainer = document.createElement('div');
btnContainer.style.position = 'absolute';
container.appendChild(btnContainer);
const tip = document.createElement('span');
-tip.innerHTML = 'π Change configs:';
+tip.innerHTML = 'π Grid layout soryBy: ';
btnContainer.appendChild(tip);
-Object.keys(configs).forEach((name, i) => {
+Object.keys(SORT_BY).forEach((name, i) => {
const btn = document.createElement('a');
btn.innerHTML = name;
- btn.style.backgroundColor = 'rgba(255, 255, 255, 0.8)';
btn.style.padding = '4px';
btn.style.marginLeft = i > 0 ? '24px' : '8px';
btnContainer.appendChild(btn);
btn.addEventListener('click', () => {
- graph.layout(configs[name]);
+ graph.setLayout({ type: 'grid', sortBy: name.toLowerCase() });
+ graph.layout();
});
});
diff --git a/packages/site/examples/net/gridLayout/demo/meta.json b/packages/site/examples/net/gridLayout/demo/meta.json
index 5597caf4411..7d5a8c38ade 100644
--- a/packages/site/examples/net/gridLayout/demo/meta.json
+++ b/packages/site/examples/net/gridLayout/demo/meta.json
@@ -5,7 +5,7 @@
},
"demos": [
{
- "filename": "grid.js",
+ "filename": "grid.ts",
"title": {
"zh": "Grid η½ζ ΌεΈε±",
"en": "Grid Layout"