test: add map-node-size unit tests

packages/g6/__tests__/demos/case-language-tree.ts

@@ -57,6 +57,7 @@ export const caseLanguageTree: TestCase = async (context) => {
  {
  key: 'map-node-size',
  type: 'map-node-size',
+ scale: 'log',
  },
  ],
  behaviors: [

packages/g6/__tests__/demos/transform-map-node-size.ts

@@ -24,14 +24,15 @@ export const transformMapNodeSize: TestCase = async (context) => {
  {
  key: 'map-node-size',
  type: 'map-node-size',
+ scale: 'log',
  },
  ],
  animation: false,
  });
 
  await graph.render();
 
- const config = { 'centrality.type': 'eigenvector' };
+ const config = { 'centrality.type': 'eigenvector', syncToLabelSize: false };
 
  transformMapNodeSize.form = (panel) => [
  panel
@@ -41,6 +42,13 @@ export const transformMapNodeSize: TestCase = async (context) => {
  graph.updateTransform({ key: 'map-node-size', centrality: { type } });
  graph.draw();
  }),
+ panel
+ .add(config, 'syncToLabelSize')
+ .name('Sync To Label Size')
+ .onChange((syncToLabelSize: boolean) => {
+ graph.updateTransform({ key: 'map-node-size', syncToLabelSize });
+ graph.draw();
+ }),
  ];
 
  return graph;

packages/g6/__tests__/unit/transforms/transform-map-node-size.spec.ts

@@ -26,7 +26,7 @@ describe('transform map node size', () => {
  maxSize: 40,
  scale: 'linear',
  });
- await graph.render();
+ await graph.draw();
 
  expect(nodeSizeMap(graph)).toEqual({
  'node-1': [40, 40, 40],
@@ -40,7 +40,7 @@ describe('transform map node size', () => {
  key: 'map-node-size',
  centrality: { type: 'betweenness' },
  });
- await graph.render();
+ await graph.draw();
 
  expect(nodeSizeMap(graph)).toEqual({
  'node-1': [40, 40, 40],
@@ -54,7 +54,7 @@ describe('transform map node size', () => {
  key: 'map-node-size',
  centrality: { type: 'pagerank' },
  });
- await graph.render();
+ await graph.draw();
 
  expect(nodeSizeMap(graph)['node-1']).toEqual([10, 10, 10]);
  expect(nodeSizeMap(graph)['node-5']).toEqual([40, 40, 40]);
@@ -63,7 +63,7 @@ describe('transform map node size', () => {
  key: 'map-node-size',
  centrality: { type: 'eigenvector' },
  });
- await graph.render();
+ await graph.draw();
 
  expect(nodeSizeMap(graph)).toEqual({
  'node-1': [40, 40, 40],
@@ -77,7 +77,7 @@ describe('transform map node size', () => {
  key: 'map-node-size',
  centrality: { type: 'eigenvector', directed: true },
  });
- await graph.render();
+ await graph.draw();
 
  expect(nodeSizeMap(graph)).toEqual({
  'node-1': [40, 40, 40],
@@ -93,7 +93,7 @@ describe('transform map node size', () => {
  minSize: 10,
  maxSize: 50,
  });
- await graph.render();
+ await graph.draw();
 
  expect(nodeSizeMap(graph)).toEqual({
  'node-1': [50, 50, 50],
@@ -103,4 +103,92 @@ describe('transform map node size', () => {
  'node-5': [10, 10, 10],
  });
  });
+
+ it('multiple scale types', async () => {
+ graph.updateTransform({
+ key: 'map-node-size',
+ centrality: { type: 'degree' },
+ minSize: 10,
+ maxSize: 40,
+ scale: 'pow',
+ });
+ await graph.draw();
+
+ expect(nodeSizeMap(graph)).toEqual({
+ 'node-1': [40, 40, 40],
+ 'node-2': [10, 10, 10],
+ 'node-3': [10, 10, 10],
+ 'node-4': [17.5, 17.5, 17.5],
+ 'node-5': [10, 10, 10],
+ });
+
+ graph.updateTransform({
+ key: 'map-node-size',
+ centrality: { type: 'degree' },
+ minSize: 10,
+ maxSize: 40,
+ scale: 'sqrt',
+ });
+ await graph.draw();
+
+ expect(nodeSizeMap(graph)).toEqual({
+ 'node-1': [40, 40, 40],
+ 'node-2': [10, 10, 10],
+ 'node-3': [10, 10, 10],
+ 'node-4': [10 + 30 * Math.sqrt(0.5), 10 + 30 * Math.sqrt(0.5), 10 + 30 * Math.sqrt(0.5)],
+ 'node-5': [10, 10, 10],
+ });
+
+ graph.updateTransform({
+ key: 'map-node-size',
+ centrality: { type: 'degree' },
+ minSize: 10,
+ maxSize: 40,
+ scale: 'none',
+ });
+ await graph.draw();
+
+ expect(nodeSizeMap(graph)).toEqual({
+ 'node-1': [10, 10, 10],
+ 'node-2': [10, 10, 10],
+ 'node-3': [10, 10, 10],
+ 'node-4': [10, 10, 10],
+ 'node-5': [10, 10, 10],
+ });
+
+ graph.updateTransform({
+ key: 'map-node-size',
+ centrality: { type: 'degree' },
+ minSize: 10,
+ maxSize: 40,
+ scale: (value: number, domain: [number, number], range: [number, number]) => {
+ const [d0, d1] = domain;
+ const [r0, r1] = range;
+ return r0 + ((value - d0) / (d1 - d0)) * (r1 - r0);
+ },
+ });
+ await graph.draw();
+
+ expect(nodeSizeMap(graph)).toEqual({
+ 'node-1': [40, 40, 40],
+ 'node-2': [10, 10, 10],
+ 'node-3': [10, 10, 10],
+ 'node-4': [25, 25, 25],
+ 'node-5': [10, 10, 10],
+ });
+ });
+
+ it('sync to label size', async () => {
+ graph.updateTransform({
+ key: 'map-node-size',
+ centrality: { type: 'degree' },
+ maxSize: 80,
+ minSize: 20,
+ scale: 'log',
+ syncToLabelSize: true,
+ });
+ await graph.draw();
+
+ await expect(graph).toMatchSnapshot(__filename, 'label-size');
+ });
 });

packages/g6/__tests__/unit/utils/padding.spec.ts

@@ -1,4 +1,4 @@
-import { parsePadding } from '@/src/utils/padding';
+import { getHorizontalPadding, getVerticalPadding, parsePadding } from '@/src/utils/padding';
 
 describe('padding', () => {
  it('parsePadding', () => {
@@ -14,4 +14,32 @@ describe('padding', () => {
 
  expect(parsePadding([10, 20, 30, 40])).toEqual([10, 20, 30, 40]);
  });
+
+ it('getVerticalPadding', () => {
+ expect(getVerticalPadding()).toEqual(0);
+
+ expect(getVerticalPadding([])).toEqual(0);
+
+ expect(getVerticalPadding(10)).toEqual(20);
+
+ expect(getVerticalPadding([10, 20])).toEqual(20);
+
+ expect(getVerticalPadding([10, 20, 30])).toEqual(40);
+
+ expect(getVerticalPadding([10, 20, 30, 40])).toEqual(40);
+ });
+
+ it('getHorizontalPadding', () => {
+ expect(getHorizontalPadding()).toEqual(0);
+
+ expect(getHorizontalPadding([])).toEqual(0);
+
+ expect(getHorizontalPadding(10)).toEqual(20);
+
+ expect(getHorizontalPadding([10, 20])).toEqual(40);
+
+ expect(getHorizontalPadding([10, 20, 30])).toEqual(40);
+
+ expect(getHorizontalPadding([10, 20, 30, 40])).toEqual(60);
+ });
 });