From b693790821b91f1ba3cb6cc2bc2318138a619a99 Mon Sep 17 00:00:00 2001 From: hustcc Date: Mon, 19 Feb 2024 11:44:13 +0800 Subject: [PATCH] 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 | 28 +++++-- .../g6/__tests__/unit/runtime/element.spec.ts | 4 +- packages/g6/src/animations/constants.ts | 21 ----- packages/g6/src/animations/executor.ts | 8 +- packages/g6/src/animations/index.ts | 17 +++- packages/g6/src/elements/constants.ts | 13 ---- packages/g6/src/elements/index.ts | 3 +- packages/g6/src/layouts/constants.ts | 34 -------- packages/g6/src/layouts/index.ts | 16 +++- packages/g6/src/palettes/constants.ts | 53 ------------- packages/g6/src/palettes/index.ts | 55 ++++++++++++- packages/g6/src/palettes/types.ts | 4 +- packages/g6/src/registry/build-in.ts | 77 +++++++++++++++++++ packages/g6/src/registry/constants.ts | 17 ---- packages/g6/src/registry/index.ts | 2 +- packages/g6/src/themes/dark.ts | 4 +- packages/g6/src/themes/index.ts | 14 +--- packages/g6/src/themes/light.ts | 4 +- 18 files changed, 202 insertions(+), 172 deletions(-) delete mode 100644 packages/g6/src/animations/constants.ts delete mode 100644 packages/g6/src/elements/constants.ts delete mode 100644 packages/g6/src/layouts/constants.ts delete mode 100644 packages/g6/src/palettes/constants.ts create mode 100644 packages/g6/src/registry/build-in.ts delete mode 100644 packages/g6/src/registry/constants.ts diff --git a/packages/g6/__tests__/unit/registry.spec.ts b/packages/g6/__tests__/unit/registry.spec.ts index 71a53979bfe..467aeebef69 100644 --- a/packages/g6/__tests__/unit/registry.spec.ts +++ b/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, }); diff --git a/packages/g6/__tests__/unit/runtime/element.spec.ts b/packages/g6/__tests__/unit/runtime/element.spec.ts index ad7bc5a2339..80410079eb0 100644 --- a/packages/g6/__tests__/unit/runtime/element.spec.ts +++ b/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'; diff --git a/packages/g6/src/animations/constants.ts b/packages/g6/src/animations/constants.ts deleted file mode 100644 index 6fbd31feb15..00000000000 --- a/packages/g6/src/animations/constants.ts +++ /dev/null @@ -1,21 +0,0 @@ -import type { STDAnimation } from './types'; - -export const DEFAULT_ANIMATION_OPTIONS: KeyframeAnimationOptions = { - duration: 1000, - easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)', - iterations: 1, - fill: 'both', -}; - -export const BUILT_IN_ANIMATIONS: Record = { - fade: [ - { - fields: ['opacity'], - }, - ], - translate: [ - { - fields: ['x', 'y'], - }, - ], -}; diff --git a/packages/g6/src/animations/executor.ts b/packages/g6/src/animations/executor.ts index 258434af6ea..7855d2368e9 100644 --- a/packages/g6/src/animations/executor.ts +++ b/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', +}; + /** * 动画 Spec 执行器 * diff --git a/packages/g6/src/animations/index.ts b/packages/g6/src/animations/index.ts index 3e34e228ef9..b222db415b4 100644 --- a/packages/g6/src/animations/index.ts +++ b/packages/g6/src/animations/index.ts @@ -1,2 +1,17 @@ -export { BUILT_IN_ANIMATIONS } from './constants'; export { executor } from './executor'; + +/** + * 内置的动画元素。 + * Built-in animations. + */ +export const fade = [ + { + fields: ['opacity'], + }, +]; + +export const translate = [ + { + fields: ['x', 'y'], + }, +]; diff --git a/packages/g6/src/elements/constants.ts b/packages/g6/src/elements/constants.ts deleted file mode 100644 index 20293850b5e..00000000000 --- a/packages/g6/src/elements/constants.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { Cubic, Line, Polyline, Quadratic } from './edges'; -import { Circle } from './nodes'; - -export const BUILT_IN_NODES = { - circle: Circle, -}; - -export const BUILT_IN_EDGES = { - cubic: Cubic, - line: Line, - quadratic: Quadratic, - polyline: Polyline, -}; diff --git a/packages/g6/src/elements/index.ts b/packages/g6/src/elements/index.ts index 7d39a52b0b8..56071beac38 100644 --- a/packages/g6/src/elements/index.ts +++ b/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'; diff --git a/packages/g6/src/layouts/constants.ts b/packages/g6/src/layouts/constants.ts deleted file mode 100644 index 13c5ff103ec..00000000000 --- a/packages/g6/src/layouts/constants.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { compactBox, dendrogram, indented, mindmap } from '@antv/hierarchy'; -import { - CircularLayout, - ComboCombinedLayout, - ConcentricLayout, - D3ForceLayout, - DagreLayout, - ForceAtlas2Layout, - ForceLayout, - FruchtermanLayout, - GridLayout, - MDSLayout, - RadialLayout, - RandomLayout, -} from '@antv/layout'; - -export const BUILT_IN_LAYOUTS = { - '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, -}; diff --git a/packages/g6/src/layouts/index.ts b/packages/g6/src/layouts/index.ts index f720235240a..0b7182bf6e6 100644 --- a/packages/g6/src/layouts/index.ts +++ b/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'; diff --git a/packages/g6/src/palettes/constants.ts b/packages/g6/src/palettes/constants.ts deleted file mode 100644 index 0a17e965626..00000000000 --- a/packages/g6/src/palettes/constants.ts +++ /dev/null @@ -1,53 +0,0 @@ -/** - * 内置色板 - * - * Built-in palettes - */ -export const BUILT_IN_PALETTES = { - 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)', - ], - 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)', - ], - 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)', - ], - 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)', - ], -}; diff --git a/packages/g6/src/palettes/index.ts b/packages/g6/src/palettes/index.ts index 5e8efc62033..68aa10ca5f4 100644 --- a/packages/g6/src/palettes/index.ts +++ b/packages/g6/src/palettes/index.ts @@ -1 +1,54 @@ -export { BUILT_IN_PALETTES } from './constants'; +/** + * 内置色板 + * + * 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)', +]; diff --git a/packages/g6/src/palettes/types.ts b/packages/g6/src/palettes/types.ts index 59c18d3bd12..168000d1981 100644 --- a/packages/g6/src/palettes/types.ts +++ b/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[]; diff --git a/packages/g6/src/registry/build-in.ts b/packages/g6/src/registry/build-in.ts new file mode 100644 index 00000000000..1aafafa63e5 --- /dev/null +++ b/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'; + +/** + * 内置插件统一在这里注册。 + * 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: {}, +}; diff --git a/packages/g6/src/registry/constants.ts b/packages/g6/src/registry/constants.ts deleted file mode 100644 index c7433fb948e..00000000000 --- a/packages/g6/src/registry/constants.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { BUILT_IN_ANIMATIONS } from '../animations'; -import { BUILT_IN_EDGES, BUILT_IN_NODES } from '../elements'; -import { BUILT_IN_LAYOUTS } from '../layouts'; -import { BUILT_IN_PALETTES } from '../palettes'; -import { BUILT_IN_THEMES } from '../themes'; - -export const BUILT_IN_PLUGINS = { - animation: BUILT_IN_ANIMATIONS, - behavior: {}, - combo: {}, - edge: BUILT_IN_EDGES, - layout: BUILT_IN_LAYOUTS, - node: BUILT_IN_NODES, - palette: BUILT_IN_PALETTES, - theme: BUILT_IN_THEMES, - widget: {}, -}; diff --git a/packages/g6/src/registry/index.ts b/packages/g6/src/registry/index.ts index 8cffbf077c4..2dbaec40aff 100644 --- a/packages/g6/src/registry/index.ts +++ b/packages/g6/src/registry/index.ts @@ -1,4 +1,4 @@ -import { BUILT_IN_PLUGINS } from './constants'; +import { BUILT_IN_PLUGINS } from './build-in'; import type { PluginCategory, PluginRegistry } from './types'; /** diff --git a/packages/g6/src/themes/dark.ts b/packages/g6/src/themes/dark.ts index df7247c8ff3..39750640f09 100644 --- a/packages/g6/src/themes/dark.ts +++ b/packages/g6/src/themes/dark.ts @@ -1,6 +1,6 @@ -import { Theme } from './types'; +import type { Theme } from './types'; -export const DARK_THEME: Theme = { +export const dark: Theme = { node: { style: { fill: '#444', diff --git a/packages/g6/src/themes/index.ts b/packages/g6/src/themes/index.ts index 6fa493bf73f..3dde55e6e8c 100644 --- a/packages/g6/src/themes/index.ts +++ b/packages/g6/src/themes/index.ts @@ -1,12 +1,2 @@ -import { DARK_THEME } from './dark'; -import { LIGHT_THEME } from './light'; - -/** - * 内置主题 - * - * Built-in themes - */ -export const BUILT_IN_THEMES = { - light: LIGHT_THEME, - dark: DARK_THEME, -}; +export { dark } from './dark'; +export { light } from './light'; diff --git a/packages/g6/src/themes/light.ts b/packages/g6/src/themes/light.ts index 2f799fba82b..2f4c1aa48a0 100644 --- a/packages/g6/src/themes/light.ts +++ b/packages/g6/src/themes/light.ts @@ -1,6 +1,6 @@ -import { Theme } from './types'; +import type { Theme } from './types'; -export const LIGHT_THEME: Theme = { +export const light: Theme = { node: { style: { fill: '#f8f8f8',