chore: correct layout comments and file name (#228)

* docs: fix typo

* chore: update comments of layout

* chore: update dict

* chore: format filename

Author: Aarebecca

.gitignore

@@ -1,5 +1,4 @@
 .DS_Store
-.vscode
 .idea
 npm-debug.log
 yarn-error.log

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "cSpell.words": [
+    "acyclicer",
+    "edgesep",
+    "Fruchterman",
+    "graphlib",
+    "nodesep",
+    "rankdir",
+    "ranksep"
+  ]
+}

packages/layout-gpu/src/fruchterman.ts

@@ -35,19 +35,9 @@ interface FormattedOptions extends FruchtermanLayoutOptions {
 }
 
 /**
- * Layout with fructherman force model
+ * <zh/> Fruchterman 力导向布局（GPU 版）
  *
- * @example
- * // Assign layout options when initialization.
- * const layout = new FruchtermanLayout({ center: [100, 100] });
- * const positions = await layout.execute(graph); // { nodes: [], edges: [] }
- *
- * // Or use different options later.
- * const layout = new FruchtermanLayout({ center: [100, 100] });
- * const positions = await layout.execute(graph, { center: [100, 100] }); // { nodes: [], edges: [] }
- *
- * // If you want to assign the positions directly to the nodes, use assign method.
- * await layout.assign(graph, { center: [100, 100] });
+ * <en/> Fruchterman force-directed layout(GPU)
  */
 export class FruchtermanLayout implements Layout<FruchtermanLayoutOptions> {
   id = 'fruchtermanGPU';
@@ -71,7 +61,7 @@ export class FruchtermanLayout implements Layout<FruchtermanLayoutOptions> {
    * To directly assign the positions to the nodes.
    */
   async assign(graph: Graph, options?: FruchtermanLayoutOptions) {
-   await this.genericFruchtermanLayout(true, graph, options);
+    await this.genericFruchtermanLayout(true, graph, options);
   }
 
   private async genericFruchtermanLayout(

packages/layout-gpu/src/gforce.ts

@@ -49,19 +49,9 @@ interface FormattedOptions extends ForceLayoutOptions {
 }
 
 /**
- * Layout with faster force
- *
- * @example
- * // Assign layout options when initialization.
- * const layout = new GForceLayout({ center: [100, 100] });
- * const positions = await layout.execute(graph); // { nodes: [], edges: [] }
- *
- * // Or use different options later.
- * const layout = new GForceLayout({ center: [100, 100] });
- * const positions = await layout.execute(graph, { center: [100, 100] }); // { nodes: [], edges: [] }
- *
- * // If you want to assign the positions directly to the nodes, use assign method.
- * await layout.assign(graph, { center: [100, 100] });
+ * <zh/> 快速力导向布局
+ * 
+ * <en/> Fast force-directed layout
  */
 export class GForceLayout implements Layout<ForceLayoutOptions> {
   id = 'gforce';

packages/layout-wasm/src/force.ts

@@ -34,19 +34,9 @@ interface WASMForceLayoutOptions
     WASMLayoutOptions {}
 
 /**
- * Layout nodes with force model
- *
- * @example
- * // Assign layout options when initialization.
- * const layout = new ForceLayout({ center: [100, 100] });
- * const positions = await layout.execute(graph); // { nodes: [], edges: [] }
- *
- * // Or use different options later.
- * const layout = new ForceLayout({ center: [100, 100] });
- * const positions = await layout.execute(graph, { center: [100, 100] }); // { nodes: [], edges: [] }
- *
- * // If you want to assign the positions directly to the nodes, use assign method.
- * await layout.assign(graph, { center: [100, 100] });
+ * <zh/> 力导向布局（WASM 版）
+ * 
+ * <en/> Force-directed layout(WASM)
  */
 export class ForceLayout implements Layout<WASMForceLayoutOptions> {
   id = 'forceWASM';

packages/layout-wasm/src/forceatlas2.ts

@@ -54,19 +54,9 @@ interface FormattedOptions extends WASMForceAtlas2LayoutOptions {
   speed: number;
 }
 /**
- * Layout nodes with force atlas 2 model
+ * <zh/> Atlas2 力导向布局（WASM 版）
  *
- * @example
- * // Assign layout options when initialization.
- * const layout = new ForceAtlas2Layout({ center: [100, 100] });
- * const positions = await layout.execute(graph); // { nodes: [], edges: [] }
- *
- * // Or use different options later.
- * const layout = new ForceAtlas2Layout({ center: [100, 100] });
- * const positions = await layout.execute(graph, { center: [100, 100] }); // { nodes: [], edges: [] }
- *
- * // If you want to assign the positions directly to the nodes, use assign method.
- * await layout.assign(graph, { center: [100, 100] });
+ * <en/> Force Atlas 2 layout(WASM)
  */
 export class ForceAtlas2Layout implements Layout<WASMForceAtlas2LayoutOptions> {
   id = 'forceAtlas2WASM';
@@ -90,7 +80,7 @@ export class ForceAtlas2Layout implements Layout<WASMForceAtlas2LayoutOptions> {
    * To directly assign the positions to the nodes.
    */
   async assign(graph: Graph, options?: ForceAtlas2LayoutOptions) {
-   await this.genericForceAtlas2Layout(true, graph, options);
+    await this.genericForceAtlas2Layout(true, graph, options);
   }
 
   private async genericForceAtlas2Layout(

packages/layout-wasm/src/fruchterman.ts

@@ -39,19 +39,9 @@ interface FormattedOptions extends WASMFruchtermanLayoutOptions {
 }
 
 /**
- * Layout with fructherman force model
- *
- * @example
- * // Assign layout options when initialization.
- * const layout = new FruchtermanLayout({ threads, center: [100, 100] });
- * const positions = await layout.execute(graph); // { nodes: [], edges: [] }
- *
- * // Or use different options later.
- * const layout = new FruchtermanLayout({ center: [100, 100] });
- * const positions = await layout.execute(graph, { center: [100, 100] }); // { nodes: [], edges: [] }
- *
- * // If you want to assign the positions directly to the nodes, use assign method.
- * await layout.assign(graph, { center: [100, 100] });
+ * <zh/> Fruchterman 力导向布局（WASM 版）
+ * 
+ * <en/> Fruchterman force-directed layout(WASM)
  */
 export class FruchtermanLayout implements Layout<WASMFruchtermanLayoutOptions> {
   id = 'fruchtermanWASM';

packages/layout/src/antv-dagre.ts

@@ -211,19 +211,9 @@ const DEFAULTS_LAYOUT_OPTIONS: Partial<AntVDagreLayoutOptions> = {
 };
 
 /**
- * Layout arranging the nodes in a circle.
+ * <zh/> AntV 实现的 Dagre 布局
  *
- * @example
- * // Assign layout options when initialization.
- * const layout = new CircularLayout({ radius: 10 });
- * const positions = await layout.execute(graph); // { nodes: [], edges: [] }
- *
- * // Or use different options later.
- * const layout = new CircularLayout({ radius: 10 });
- * const positions = await layout.execute(graph, { radius: 20 }); // { nodes: [], edges: [] }
- *
- * // If you want to assign the positions directly to the nodes, use assign method.
- * await layout.assign(graph, { radius: 20 });
+ * <en/> AntV implementation of Dagre layout
  */
 export class AntVDagreLayout implements Layout<AntVDagreLayoutOptions> {
   id = 'antv-dagre';

packages/layout/src/circular.ts

@@ -24,19 +24,9 @@ const DEFAULTS_LAYOUT_OPTIONS: Partial<CircularLayoutOptions> = {
 };
 
 /**
- * Layout arranging the nodes in a circle.
+ * <zh/> 环形布局
  *
- * @example
- * // Assign layout options when initialization.
- * const layout = new CircularLayout({ radius: 10 });
- * const positions = await layout.execute(graph); // { nodes: [], edges: [] }
- *
- * // Or use different options later.
- * const layout = new CircularLayout({ radius: 10 });
- * const positions = await layout.execute(graph, { radius: 20 }); // { nodes: [], edges: [] }
- *
- * // If you want to assign the positions directly to the nodes, use assign method.
- * await layout.assign(graph, { radius: 20 });
+ * <en/> Circular layout
  */
 export class CircularLayout implements Layout<CircularLayoutOptions> {
   id = 'circular';

packages/layout/src/comboCombined.ts renamed to packages/layout/src/combo-combined.ts

@@ -33,19 +33,9 @@ const DEFAULTS_LAYOUT_OPTIONS: Partial<ComboCombinedLayoutOptions> = {
 };
 
 /**
- * Layout arranging the nodes and combos with combination of inner and outer layouts.
+ * <zh/> 组合布局
  *
- * @example
- * // Assign layout options when initialization.
- * const layout = new ComboCombinedLayout({});
- * const positions = await layout.execute(graph); // { nodes: [], edges: [] }
- *
- * // Or use different options later.
- * const layout = new ComboCombinedLayout({ radius: 10 });
- * const positions = await layout.execute(graph, { radius: 20 }); // { nodes: [], edges: [] }
- *
- * // If you want to assign the positions directly to the nodes, use assign method.
- * await layout.assign(graph, { radius: 20 });
+ * <en/> Combo-Combined layout
  */
 export class ComboCombinedLayout implements Layout<ComboCombinedLayoutOptions> {
   id = 'comboCombined';

packages/layout/src/concentric.ts

@@ -25,19 +25,9 @@ const DEFAULTS_LAYOUT_OPTIONS: Partial<ConcentricLayoutOptions> = {
 };
 
 /**
- * Layout arranging the nodes in concentrics
- *
- * @example
- * // Assign layout options when initialization.
- * const layout = new ConcentricLayout({ nodeSpacing: 10 });
- * const positions = await layout.execute(graph); // { nodes: [], edges: [] }
- *
- * // Or use different options later.
- * const layout = new ConcentricLayout({ nodeSpacing: 10});
- * const positions = await layout.execute(graph, { nodeSpacing: 10 }); // { nodes: [], edges: [] }
- *
- * // If you want to assign the positions directly to the nodes, use assign method.
- * await layout.assign(graph, { nodeSpacing: 10 });
+ * <zh/> 同心圆布局
+ * 
+ * <en/> Concentric layout
  */
 export class ConcentricLayout implements Layout<ConcentricLayoutOptions> {
   id = 'concentric';

packages/layout/src/dagre.ts

@@ -9,8 +9,9 @@ export interface DagreLayoutOptions extends GraphLabel, NodeConfig, EdgeConfig {
 }
 
 /**
- * Adapt dagre.js layout
- * @link https://github.com/dagrejs/dagre
+ * <zh/> Dagre 布局
+ * 
+ * <en/> Dagre layout
  */
 export class DagreLayout implements Layout<DagreLayoutOptions> {
   static defaultOptions: Partial<DagreLayoutOptions> = {};

packages/layout/src/exports.ts

@@ -1,15 +1,15 @@
 export * from './antv-dagre';
 export type { DagreAlign, DagreRankdir } from './antv-dagre/types';
 export * from './circular';
-export * from './comboCombined';
+export * from './combo-combined';
 export * from './concentric';
 export { D3ForceLayout } from './d3-force';
 export { D3Force3DLayout } from './d3-force-3d';
 export type { D3Force3DLayoutOptions } from './d3-force-3d/types';
 export type { D3ForceLayoutOptions } from './d3-force/types';
 export * from './dagre';
 export * from './force';
-export * from './forceAtlas2';
+export * from './force-atlas2';
 export * from './fruchterman';
 export * from './grid';
 export * from './mds';

packages/layout/src/forceAtlas2/body.ts renamed to packages/layout/src/force-atlas2/body.ts

@@ -18,7 +18,7 @@ import { cloneFormatData, isArray } from '../util';
 import { handleSingleNodeGraph } from '../util/common';
 import Body from './body';
 import Quad from './quad';
-import QuadTree from './quadTree';
+import QuadTree from './quad-tree';
 
 const DEFAULTS_LAYOUT_OPTIONS: Partial<ForceAtlas2LayoutOptions> = {
   center: [0, 0],
@@ -56,19 +56,9 @@ type SizeMap = { [id: string]: number };
 type CalcGraph = GGraph<OutNodeData, EdgeData>;
 
 /**
- * Layout nodes with force atlas 2 model
- *
- * @example
- * // Assign layout options when initialization.
- * const layout = new ForceAtlas2Layout({ center: [100, 100] });
- * const positions = await layout.execute(graph); // { nodes: [], edges: [] }
- *
- * // Or use different options later.
- * const layout = new ForceAtlas2Layout({ center: [100, 100] });
- * const positions = await layout.execute(graph, { center: [100, 100] }); // { nodes: [], edges: [] }
- *
- * // If you want to assign the positions directly to the nodes, use assign method.
- * await layout.assign(graph, { center: [100, 100] });
+ * <zh/> Atlas2 力导向布局
+ * 
+ * <en/> Force Atlas 2 layout
  */
 export class ForceAtlas2Layout implements Layout<ForceAtlas2LayoutOptions> {
   id = 'forceAtlas2';

packages/layout/src/forceAtlas2/index.ts renamed to packages/layout/src/force-atlas2/index.ts

@@ -12,7 +12,7 @@ import type {
   Point,
 } from '../types';
 import { formatNumberFn, isArray } from '../util';
-import { forceNBody } from './forceNBody';
+import { forceNBody } from './force-n-body';
 import {
   CalcEdge,
   CalcEdgeData,
@@ -41,19 +41,9 @@ const DEFAULTS_LAYOUT_OPTIONS: Partial<ForceLayoutOptions> = {
 };
 
 /**
- * Layout with faster force
- *
- * @example
- * // Assign layout options when initialization.
- * const layout = new ForceLayout({ center: [100, 100] });
- * const positions = await layout.execute(graph); // { nodes: [], edges: [] }
- *
- * // Or use different options later.
- * const layout = new ForceLayout({ center: [100, 100] });
- * const positions = await layout.execute(graph, { center: [100, 100] }); // { nodes: [], edges: [] }
- *
- * // If you want to assign the positions directly to the nodes, use assign method.
- * await layout.assign(graph, { center: [100, 100] });
+ * <zh/> 力导向布局
+ * 
+ * <en/> Force-directed layout
  */
 export class ForceLayout implements LayoutWithIterations<ForceLayoutOptions> {
   id = 'force';

packages/layout/src/forceAtlas2/quadTree.ts renamed to packages/layout/src/force-atlas2/quad-tree.ts

@@ -53,19 +53,9 @@ interface FormattedOptions extends FruchtermanLayoutOptions {
 }
 
 /**
- * Layout with fructherman force model
- *
- * @example
- * // Assign layout options when initialization.
- * const layout = new FruchtermanLayout({ center: [100, 100] });
- * const positions = await layout.execute(graph); // { nodes: [], edges: [] }
- *
- * // Or use different options later.
- * const layout = new FruchtermanLayout({ center: [100, 100] });
- * const positions = await layout.execute(graph, { center: [100, 100] }); // { nodes: [], edges: [] }
- *
- * // If you want to assign the positions directly to the nodes, use assign method.
- * await layout.assign(graph, { center: [100, 100] });
+ * <zh/> Fruchterman 力导向布局
+ * 
+ * <en/> Fruchterman force-directed layout
  */
 export class FruchtermanLayout
   implements LayoutWithIterations<FruchtermanLayoutOptions>

packages/layout/src/forceAtlas2/quad.ts renamed to packages/layout/src/force-atlas2/quad.ts

@@ -45,19 +45,9 @@ const DEFAULTS_LAYOUT_OPTIONS: Partial<GridLayoutOptions> = {
 };
 
 /**
- * Layout arranging the nodes in a grid.
- *
- * @example
- * // Assign layout options when initialization.
- * const layout = new GridLayout({ rows: 10 });
- * const positions = await layout.execute(graph); // { nodes: [], edges: [] }
- *
- * // Or use different options later.
- * const layout = new GridLayout({ rows: 10 });
- * const positions = await layout.execute(graph, { rows: 20 }); // { nodes: [], edges: [] }
- *
- * // If you want to assign the positions directly to the nodes, use assign method.
- * await layout.assign(graph, { rows: 20 });
+ * <zh/> 网格布局
+ * 
+ * <en/> Grid layout
  */
 export class GridLayout implements Layout<GridLayoutOptions> {
   id = 'grid';