diff --git a/packages/g6/__tests__/demo/case/index.ts b/packages/g6/__tests__/demo/case/index.ts
index 7a603076911..19a8ecf15d8 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-mds';
export * from './plugin-grid-line';
export * from './viewport-fit';
diff --git a/packages/g6/__tests__/demo/case/layout-mds.ts b/packages/g6/__tests__/demo/case/layout-mds.ts
new file mode 100644
index 00000000000..c02c65bf7b1
--- /dev/null
+++ b/packages/g6/__tests__/demo/case/layout-mds.ts
@@ -0,0 +1,45 @@
+import { Graph } from '@/src';
+import data from '@@/dataset/cluster.json';
+import type { STDTestCase } from '../types';
+
+export const layoutMDS: STDTestCase = async (context) => {
+ const graph = new Graph({
+ ...context,
+ padding: 20,
+ autoFit: 'view',
+ data,
+ layout: {
+ type: 'mds',
+ linkDistance: 100,
+ },
+ node: {
+ style: {
+ size: 20,
+ stroke: '#9ec9ff',
+ fill: '#eee',
+ lineWidth: 1,
+ labelText: (d: any) => d.id,
+ labelFontSize: 12,
+ labelPlacement: 'center',
+ labelBackground: false,
+ },
+ },
+ behaviors: ['drag-node', 'drag-canvas', 'zoom-canvas', 'click-select'],
+ });
+
+ await graph.render();
+
+ layoutMDS.form = (panel) => {
+ const config = {
+ linkDistance: 100,
+ };
+ return [
+ panel.add(config, 'linkDistance', 50, 120, 10).onChange((v: number) => {
+ graph.setLayout({ type: 'mds', linkDistance: v });
+ graph.layout();
+ }),
+ ];
+ };
+
+ return graph;
+};
diff --git a/packages/g6/__tests__/snapshots/layouts/mds/mds__ld100.svg b/packages/g6/__tests__/snapshots/layouts/mds/mds__ld100.svg
new file mode 100644
index 00000000000..4b62f42e14e
--- /dev/null
+++ b/packages/g6/__tests__/snapshots/layouts/mds/mds__ld100.svg
@@ -0,0 +1,2988 @@
+
\ No newline at end of file
diff --git a/packages/g6/__tests__/unit/layouts/mds.spec.ts b/packages/g6/__tests__/unit/layouts/mds.spec.ts
new file mode 100644
index 00000000000..34c61e4a5b2
--- /dev/null
+++ b/packages/g6/__tests__/unit/layouts/mds.spec.ts
@@ -0,0 +1,19 @@
+import type { Graph } from '@/src';
+import { layoutMDS } from '@@/demo/case/layout-mds';
+import { createDemoGraph } from '@@/utils';
+
+describe('mds', () => {
+ let graph: Graph;
+
+ beforeAll(async () => {
+ graph = await createDemoGraph(layoutMDS);
+ });
+
+ afterAll(() => {
+ graph.destroy();
+ });
+
+ it('mds linkDistance = 100', async () => {
+ await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__ld100');
+ });
+});
diff --git a/packages/g6/src/elements/shapes/label.ts b/packages/g6/src/elements/shapes/label.ts
index 8b9b522b861..8b7bc72ad4b 100644
--- a/packages/g6/src/elements/shapes/label.ts
+++ b/packages/g6/src/elements/shapes/label.ts
@@ -8,8 +8,9 @@ import type { BaseShapeStyleProps } from './base-shape';
import { BaseShape } from './base-shape';
export type LabelStyleProps = BaseShapeStyleProps &
- TextStyleProps &
- PrefixObject & {
+ TextStyleProps & {
+ background: boolean;
+ } & PrefixObject & {
padding?: Padding;
};
type ParsedLabelStyleProps = Required;
@@ -47,6 +48,8 @@ export class Label extends BaseShape {
}
protected getBackgroundStyle(attributes: ParsedLabelStyleProps) {
+ if (attributes.background === false) return false;
+
const style = this.getGraphicStyle(attributes);
const { wordWrap, wordWrapWidth, padding } = style;
const backgroundStyle = subStyleProps(style, 'background');
@@ -80,8 +83,4 @@ export class Label extends BaseShape {
this.upsert('text', Text, this.getTextStyle(attributes), container);
this.upsert('background', Rect, this.getBackgroundStyle(attributes), container);
}
-
- connectedCallback() {
- this.upsert('background', Rect, this.getBackgroundStyle(this.parsedAttributes), this);
- }
}
diff --git a/packages/site/examples/net/mdsLayout/demo/basicMDS.js b/packages/site/examples/net/mdsLayout/demo/basicMDS.ts
similarity index 86%
rename from packages/site/examples/net/mdsLayout/demo/basicMDS.js
rename to packages/site/examples/net/mdsLayout/demo/basicMDS.ts
index 59988f171db..a3d0fc0effb 100644
--- a/packages/site/examples/net/mdsLayout/demo/basicMDS.js
+++ b/packages/site/examples/net/mdsLayout/demo/basicMDS.ts
@@ -1,13 +1,4 @@
-import { Graph, Extensions, extend } from '@antv/g6';
-
-const ExtGraph = extend(Graph, {
- layouts: {
- mds: Extensions.MDSLayout,
- },
- behaviors: {
- 'brush-select': Extensions.BrushSelect,
- },
-});
+import { Graph } from '@antv/g6';
const data = {
nodes: [
@@ -580,64 +571,29 @@ 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,
+ padding: 20,
autoFit: 'view',
+ data,
layout: {
type: 'mds',
linkDistance: 100,
},
- modes: {
- default: ['drag-node', 'drag-canvas', 'zoom-canvas', 'click-select', 'brush-select'],
- },
- node: (model) => {
- const { id, data } = model;
- return {
- id,
- data: {
- ...data,
- labelShape: {
- text: data.label,
- },
- labelBackgroundShape: {},
- animates: {
- update: [
- {
- fields: ['opacity'],
- shapeId: 'haloShape',
- },
- {
- fields: ['lineWidth'],
- shapeId: 'keyShape',
- },
- ],
- },
- },
- };
+ node: {
+ style: {
+ size: 20,
+ stroke: '#9ec9ff',
+ fill: '#eee',
+ lineWidth: 1,
+ labelText: (d) => d.id,
+ labelFontSize: 12,
+ labelPlacement: 'center',
+ labelBackground: false,
+ },
},
- edge: (model) => ({
- ...model,
- data: {
- animates: {
- update: [
- {
- fields: ['opacity'],
- shapeId: 'haloShape',
- },
- {
- fields: ['lineWidth'],
- shapeId: 'keyShape',
- },
- ],
- },
- },
- }),
- data,
+ behaviors: ['drag-node', 'drag-canvas', 'zoom-canvas', 'click-select'],
+ animation: true,
});
-window.graph = graph;
\ No newline at end of file
+graph.render();
diff --git a/packages/site/examples/net/mdsLayout/demo/meta.json b/packages/site/examples/net/mdsLayout/demo/meta.json
index 68e5968a276..430249042b9 100644
--- a/packages/site/examples/net/mdsLayout/demo/meta.json
+++ b/packages/site/examples/net/mdsLayout/demo/meta.json
@@ -5,7 +5,7 @@
},
"demos": [
{
- "filename": "basicMDS.js",
+ "filename": "basicMDS.ts",
"title": {
"zh": "基本 MDS 布局",
"en": "Basic MDS Layout"