refactor: move all plugin into build-in, and remove constants.ts file (…

…#5440)

* refactor: move all build in to one file, and remove constants.ts file

* chore: fix ci

packages/g6/__tests__/unit/registry.spec.ts

@@ -1,15 +1,30 @@
-import { BUILT_IN_EDGES, BUILT_IN_NODES } from '../../src/elements';
+import { pick } from '@antv/util';
+import { Circle, Cubic, Ellipse, Line, Polyline, Quadratic, Rect, Star, Triangle } from '../../src/elements';
 import { getPlugin, getPlugins, register, registerBuiltInPlugins } from '../../src/registry';
-import { BUILT_IN_THEMES } from '../../src/themes';
+import { dark, light } from '../../src/themes';
 
 describe('registry', () => {
   it('registerBuiltInPlugins', () => {
     registerBuiltInPlugins();
 
-    expect(getPlugins('node')).toEqual(BUILT_IN_NODES);
-    expect(getPlugins('edge')).toEqual(BUILT_IN_EDGES);
+    expect(getPlugins('node')).toEqual({
+      circle: Circle,
+      ellipse: Ellipse,
+      rect: Rect,
+      star: Star,
+      triangle: Triangle,
+    });
+    expect(getPlugins('edge')).toEqual({
+      cubic: Cubic,
+      line: Line,
+      polyline: Polyline,
+      quadratic: Quadratic,
+    });
     expect(getPlugins('combo')).toEqual({});
-    expect(getPlugins('theme')).toEqual(BUILT_IN_THEMES);
+    expect(getPlugins('theme')).toEqual({
+      dark,
+      light,
+    });
   });
 
   it('register, getPlugin, getPlugins', () => {
@@ -32,8 +47,7 @@ describe('registry', () => {
     expect(console.error.mock.calls[0][0]).toBe('The plugin circle-node of node has been registered before.');
     console.error = error;
 
-    expect(getPlugins('node')).toEqual({
-      ...BUILT_IN_NODES,
+    expect(pick(getPlugins('node'), ['circle-node', 'rect-node'])).toEqual({
       'circle-node': CircleNode,
       'rect-node': RectNode,
     });

packages/g6/__tests__/unit/runtime/element.spec.ts

@@ -1,10 +1,10 @@
 import type { G6Spec } from '../../../src';
-import { BUILT_IN_PALETTES } from '../../../src/palettes';
+import * as BUILT_IN_PALETTES from '../../../src/palettes';
 import '../../../src/preset';
 import { DataController } from '../../../src/runtime/data';
 import { ElementController } from '../../../src/runtime/element';
 import type { RuntimeContext } from '../../../src/runtime/types';
-import { LIGHT_THEME } from '../../../src/themes/light';
+import { light as LIGHT_THEME } from '../../../src/themes';
 import { idOf } from '../../../src/utils/id';
 import { Graph } from '../../mock';
 

packages/g6/src/animations/executor.ts

@@ -2,9 +2,15 @@ import type { DisplayObject, IAnimation } from '@antv/g';
 import { isString, upperFirst } from '@antv/util';
 import { getPlugin } from '../registry';
 import { createAnimationsProxy, executeAnimation, inferDefaultValue, preprocessKeyframes } from '../utils/animation';
-import { DEFAULT_ANIMATION_OPTIONS } from './constants';
 import type { AnimationExecutor } from './types';
 
+const DEFAULT_ANIMATION_OPTIONS: KeyframeAnimationOptions = {
+  duration: 1000,
+  easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+  iterations: 1,
+  fill: 'both',
+};
+
 /**
  * <zh/> 动画 Spec 执行器
  *

packages/g6/src/animations/index.ts

@@ -1,2 +1,17 @@
-export { BUILT_IN_ANIMATIONS } from './constants';
 export { executor } from './executor';
+
+/**
+ * <zh/> 内置的动画元素。
+ * <en/> Built-in animations.
+ */
+export const fade = [
+  {
+    fields: ['opacity'],
+  },
+];
+
+export const translate = [
+  {
+    fields: ['x', 'y'],
+  },
+];

packages/g6/src/elements/index.ts

@@ -1 +1,2 @@
-export { BUILT_IN_EDGES, BUILT_IN_NODES } from './constants';
+export { Cubic, Line, Polyline, Quadratic } from './edges';
+export { Circle, Ellipse, Rect, Star, Triangle } from './nodes';

packages/g6/src/layouts/index.ts

@@ -1 +1,15 @@
-export { BUILT_IN_LAYOUTS } from './constants';
+export { compactBox, dendrogram, indented, mindmap } from '@antv/hierarchy';
+export {
+  CircularLayout,
+  ComboCombinedLayout,
+  ConcentricLayout,
+  D3ForceLayout,
+  DagreLayout,
+  ForceAtlas2Layout,
+  ForceLayout,
+  FruchtermanLayout,
+  GridLayout,
+  MDSLayout,
+  RadialLayout,
+  RandomLayout,
+} from '@antv/layout';

packages/g6/src/palettes/index.ts

@@ -1 +1,54 @@
-export { BUILT_IN_PALETTES } from './constants';
+/**
+ * <zh/> 内置色板
+ *
+ * <en/> Built-in palettes
+ */
+export const spectral = [
+  'rgb(158, 1, 66)',
+  'rgb(213, 62, 79)',
+  'rgb(244, 109, 67)',
+  'rgb(253, 174, 97)',
+  'rgb(254, 224, 139)',
+  'rgb(255, 255, 191)',
+  'rgb(230, 245, 152)',
+  'rgb(171, 221, 164)',
+  'rgb(102, 194, 165)',
+  'rgb(50, 136, 189)',
+  'rgb(94, 79, 162)',
+];
+
+export const oranges = [
+  'rgb(255, 245, 235)',
+  'rgb(254, 230, 206)',
+  'rgb(253, 208, 162)',
+  'rgb(253, 174, 107)',
+  'rgb(253, 141, 60)',
+  'rgb(241, 105, 19)',
+  'rgb(217, 72, 1)',
+  'rgb(166, 54, 3)',
+  'rgb(127, 39, 4)',
+];
+
+export const greens = [
+  'rgb(247, 252, 245)',
+  'rgb(229, 245, 224)',
+  'rgb(199, 233, 192)',
+  'rgb(161, 217, 155)',
+  'rgb(116, 196, 118)',
+  'rgb(65, 171, 93)',
+  'rgb(35, 139, 69)',
+  'rgb(0, 109, 44)',
+  'rgb(0, 68, 27)',
+];
+
+export const blues = [
+  'rgb(247, 251, 255)',
+  'rgb(222, 235, 247)',
+  'rgb(198, 219, 239)',
+  'rgb(158, 202, 225)',
+  'rgb(107, 174, 214)',
+  'rgb(66, 146, 198)',
+  'rgb(33, 113, 181)',
+  'rgb(8, 81, 156)',
+  'rgb(8, 48, 107)',
+];

packages/g6/src/palettes/types.ts

@@ -1,10 +1,8 @@
-import type { BUILT_IN_PALETTES } from './constants';
-
 export type Palette = string | BuiltInPalette | CategoricalPalette | ContinuousPalette;
 
 export type STDPalette = CategoricalPalette | ContinuousPalette;
 
-export type BuiltInPalette = keyof typeof BUILT_IN_PALETTES;
+export type BuiltInPalette = 'spectral' | 'oranges' | 'greens' | 'blues';
 
 export type CategoricalPalette = string[];
 

packages/g6/src/registry/build-in.ts

@@ -0,0 +1,77 @@
+import { fade, translate } from '../animations';
+import { Circle, Cubic, Ellipse, Line, Polyline, Quadratic, Rect, Star, Triangle } from '../elements';
+import {
+  CircularLayout,
+  ComboCombinedLayout,
+  ConcentricLayout,
+  D3ForceLayout,
+  DagreLayout,
+  ForceAtlas2Layout,
+  ForceLayout,
+  FruchtermanLayout,
+  GridLayout,
+  MDSLayout,
+  RadialLayout,
+  RandomLayout,
+  compactBox,
+  dendrogram,
+  indented,
+  mindmap,
+} from '../layouts';
+import { blues, greens, oranges, spectral } from '../palettes';
+import { dark, light } from '../themes';
+
+/**
+ * <zh/> 内置插件统一在这里注册。
+ * <en/> Built-in plugins are registered here.
+ */
+export const BUILT_IN_PLUGINS = {
+  animation: {
+    fade,
+    translate,
+  },
+  behavior: {},
+  combo: {},
+  edge: {
+    cubic: Cubic,
+    line: Line,
+    polyline: Polyline,
+    quadratic: Quadratic,
+  },
+  layout: {
+    'combo-combined': ComboCombinedLayout,
+    'compact-box': compactBox,
+    'force-atlas2': ForceAtlas2Layout,
+    circular: CircularLayout,
+    concentric: ConcentricLayout,
+    d3force: D3ForceLayout,
+    dagre: DagreLayout,
+    dendrogram,
+    force: ForceLayout,
+    fruchterman: FruchtermanLayout,
+    grid: GridLayout,
+    indented,
+    mds: MDSLayout,
+    mindmap,
+    radial: RadialLayout,
+    random: RandomLayout,
+  },
+  node: {
+    circle: Circle,
+    ellipse: Ellipse,
+    rect: Rect,
+    star: Star,
+    triangle: Triangle,
+  },
+  palette: {
+    spectral,
+    oranges,
+    greens,
+    blues,
+  },
+  theme: {
+    dark,
+    light,
+  },
+  widget: {},
+};