fix: fix typos (#5219)

* fix: fix typos

.gitignore

@@ -36,5 +36,3 @@ packages/g6/tests/integration/snapshots/**/*-diff.*
 site/.dumi/tmp
 site/.dumi/tmp-production
 
-# Editor
-.vscode

.vscode/settings.json

@@ -0,0 +1,48 @@
+{
+  "cSpell.words": [
+    "AABB",
+    "afterchangedata",
+    "aftercollapsecombo",
+    "afterexpandcombo",
+    "afteritemchange",
+    "afteritemstatechange",
+    "afteritemvisibilitychange",
+    "afteritemzindexchange",
+    "afterlayout",
+    "afterremoveitem",
+    "afterrender",
+    "aftersetsize",
+    "afterviewportanimation",
+    "bbox",
+    "beforeitemchange",
+    "beforelayout",
+    "beforeviewportanimation",
+    "behaviorchange",
+    "cancelviewportanimation",
+    "datachange",
+    "dendrogram",
+    "Fruchterman",
+    "gforce",
+    "graphcore",
+    "graphlib",
+    "itemchange",
+    "itemstatechange",
+    "itemstateconfigchange",
+    "itemvisibilitychange",
+    "itemzindexchange",
+    "keyShape",
+    "mapperchange",
+    "mindmap",
+    "modechange",
+    "onframe",
+    "pluginchange",
+    "snapline",
+    "themechange",
+    "tooltipchange",
+    "transientupdate",
+    "treecollapseexpand",
+    "upsert",
+    "viewportchange",
+    "watermarker"
+  ]
+}

README.en-US.md

@@ -62,7 +62,7 @@ The gif is not fully loaded, [Click Here to See the Original Image](https://mdn.
 - (TODO: migrate from v4) Abundant Built-in Items: Nodes and edges with free configurations;
 - (TODO: migrate from v4) Convenient Components: Outstanding ability and performance;
 
-G6 concentrates on the principle of 'good by default'. In addition, the custom mechanism of the item, interation behavior, and layout satisfies the customazation requirements.
+G6 concentrates on the principle of 'good by default'. In addition, the custom mechanism of the item, interaction behavior, and layout satisfies the customazation requirements.
 
 > Abundant Built-in Items
 

packages/g6/src/item/item.ts

@@ -44,7 +44,7 @@ export default abstract class Item implements IItem {
   public displayModel: ItemDisplayModel;
   /** The mapper configured at graph with field name 'node' / 'edge' / 'combo'. */
   public mapper: DisplayMapper;
-  /** The state sstyle mapper configured at traph with field name 'nodeState' / 'edgeState' / 'comboState'. */
+  /** The state style mapper configured at graph with field name 'nodeState' / 'edgeState' / 'comboState'. */
   public stateMapper: {
     [stateName: string]: DisplayMapper;
   };
@@ -88,7 +88,7 @@ export default abstract class Item implements IItem {
   public lodLevels: LodLevelRanges;
   /** Last zoom ratio. */
   public zoom: number;
-  /** Cache the chaging states which are not consomed by draw  */
+  /** Cache the changing states which are not consumed by draw  */
   public changedStates: string[];
   /** The listener for the animations frames. */
   public onframe: Function;

packages/g6/src/runtime/controller/data.ts

@@ -1,7 +1,7 @@
 import { Graph as GraphLib, ID } from '@antv/graphlib';
 import { clone, isArray, isEmpty, isObject } from '@antv/util';
 import { AABB } from '@antv/g';
-import { registery as registry } from '../../stdlib';
+import { registry } from '../../stdlib';
 import {
   ComboModel,
   ComboUserModel,
@@ -42,7 +42,7 @@ import {
   graphData2TreeData,
   traverse,
   treeData2GraphData,
-  validateComboStrucutre,
+  validateComboStructure,
 } from '../../util/data';
 import { getExtension } from '../../util/extension';
 import { isTreeLayout } from '../../util/layout';
@@ -113,13 +113,13 @@ export class DataController {
           });
       }
     } else if (conditionType === 'function') {
-      const getDatas =
+      const getData =
         type === 'node' ? graphCore.getAllNodes : graphCore.getAllEdges;
       if (type === 'combo') {
-        // TODO getDatas = ?
+        // TODO getData = ?
       }
-      const datas = getDatas() as any;
-      return datas.filter((data) => condition(data));
+      const data = getData() as any;
+      return data.filter((datum) => condition(datum));
     }
   }
 
@@ -373,7 +373,7 @@ export class DataController {
         nodes.forEach((node) => {
           if (node.data.parentId) {
             if (
-              validateComboStrucutre(this.graph, node.id, node.data.parentId)
+              validateComboStructure(this.graph, node.id, node.data.parentId)
             ) {
               this.graphCore.setParent(
                 node.id,
@@ -388,7 +388,7 @@ export class DataController {
         combos.forEach((combo) => {
           if (combo.data.parentId) {
             if (
-              validateComboStrucutre(this.graph, combo.id, combo.data.parentId)
+              validateComboStructure(this.graph, combo.id, combo.data.parentId)
             ) {
               this.graphCore.setParent(combo.id, combo.data.parentId, 'combo');
             } else {
@@ -704,7 +704,7 @@ export class DataController {
       graphCore.addNode({ id, data: { ...others, _isCombo: true } });
     }
 
-    // update strucutre
+    // update structure
     (_children as ID[]).forEach((childId) => {
       if (!this.graphCore.hasNode(childId)) {
         console.warn(

packages/g6/src/runtime/controller/interaction.ts

@@ -1,5 +1,5 @@
 import { FederatedPointerEvent, IElement } from '@antv/g';
-import { registery } from '../../stdlib';
+import { registry } from '../../stdlib';
 import { IGraph } from '../../types';
 import { Behavior } from '../../types/behavior';
 import {
@@ -100,7 +100,7 @@ export class InteractionController {
     }
     try {
       // Get behavior extensions from useLib.
-      const BehaviorClass = getExtension(config, registery.useLib, 'behavior');
+      const BehaviorClass = getExtension(config, registry.useLib, 'behavior');
       const options = typeof config === 'string' ? {} : config;
       const behavior = new BehaviorClass(options);
       behavior.graph = this.graph;

packages/g6/src/runtime/controller/item.ts

@@ -1287,7 +1287,7 @@ export class ItemController {
 
   /**
    * Create nodes with inner data to canvas.
-   * @param models nodes' inner datas
+   * @param models nodes' inner data
    */
   private async renderNodes(
     models: NodeModel[],
@@ -1460,7 +1460,7 @@ export class ItemController {
 
   /**
    * Create edges with inner data to canvas.
-   * @param models edges' inner datas
+   * @param models edges' inner data
    */
   private renderEdges(
     models: EdgeModel[],

packages/g6/src/runtime/controller/layout.ts

@@ -7,7 +7,7 @@ import {
   OutNode,
   Supervisor,
 } from '@antv/layout';
-import registery, { Extensions, stdLib } from '../../stdlib';
+import { Extensions, registry, stdLib } from '../../stdlib';
 import {
   IGraph,
   isImmediatelyInvokedLayoutOptions,
@@ -219,7 +219,7 @@ export class LayoutController {
     let { workerEnabled = false } = options;
 
     // Find built-in layout algorithms.
-    const layoutCtor = stdLib.layouts[type] || registery.useLib.layouts[type];
+    const layoutCtor = stdLib.layouts[type] || registry.useLib.layouts[type];
     if (!layoutCtor) {
       throw new Error(`Unknown layout algorithm: ${type}`);
     }

packages/g6/src/runtime/graph.ts

@@ -1164,7 +1164,7 @@ export class Graph<B extends BehaviorRegistry, T extends ThemeRegistry>
     return this.dataController.findRelatedEdges(nodeId, direction);
   }
   /**
-   * Get nearby edges from a start node using quadtree collision detection.
+   * Get nearby edges from a start node using quad-tree collision detection.
    * @param nodeId id of the start node
    * @returns nearby edges' data array
    */
@@ -1920,7 +1920,7 @@ export class Graph<B extends BehaviorRegistry, T extends ThemeRegistry>
 
   /**
    * Add a new combo to the graph, and update the structure of the existed child in childrenIds to be the children of the new combo.
-   * Different from addData with combo type, this API update the succeeds' combo tree strucutres in the same time.
+   * Different from addData with combo type, this API update the succeeds' combo tree structures in the same time.
    * @param model combo user data.
    * @param childrenIds the ids of the children nodes / combos to move into the new combo.
    * @returns whether success
@@ -2394,7 +2394,7 @@ export class Graph<B extends BehaviorRegistry, T extends ThemeRegistry>
   /**
    * Draw or update a G shape or group to the transient canvas.
    * @param type shape type or item type
-   * @param id new shape id or updated shape id for a interation shape, node/edge/combo id for item interaction group drawing
+   * @param id new shape id or updated shape id for a interaction shape, node/edge/combo id for item interaction group drawing
    * @returns upserted shape or group
    * @group Interaction
    */

packages/g6/src/runtime/hooks.ts

@@ -1,8 +1,8 @@
 import { IHook } from '../types/hook';
 
 /**
- * A hook class unified the definitions of tap, untap, and emit.
- * One hook corresponds to one lifecyle on a graph.
+ * A hook class unified the definitions of tap, un-tap, and emit.
+ * One hook corresponds to one lifecycle on a graph.
  */
 export default class Hook<T> implements IHook<T> {
   public name: string;

packages/g6/src/stdlib/behavior/create-edge.ts

@@ -20,7 +20,7 @@ interface CreateEdgeOptions {
   trigger: (typeof EVENT_TRIGGERS)[number];
   /**
    * The assistant secondary key on keyboard. If it is not assigned, the behavior will be triggered when trigger happens.
-   * cound be 'shift', 'ctrl', 'control', 'alt', 'meta', undefined.
+   * could be 'shift', 'ctrl', 'control', 'alt', 'meta', undefined.
    */
   secondaryKey?: (typeof KEYBOARD_TRIGGERS)[number];
   /**

packages/g6/src/stdlib/behavior/drag-canvas.ts

@@ -27,7 +27,7 @@ export interface DragCanvasOptions {
    */
   secondaryKey?: string;
   /**
-   * The assistant secondary key on keyboard to prevent the behavior to be tiggered. 'shift' by default.
+   * The assistant secondary key on keyboard to prevent the behavior to be triggered. 'shift' by default.
    */
   secondaryKeyToDisable?: string;
   /**

packages/g6/src/stdlib/behavior/drag-node.ts

@@ -179,7 +179,7 @@ export class DragNode extends Behavior {
     return relatedNodes;
   }
 
-  /** Retrieve the nearby edges for a given node using quadtree collision detection. */
+  /** Retrieve the nearby edges for a given node using quad-tree collision detection. */
   private getNearEdgesForNodes(
     nodeIds: ID[],
     shouldBegin?: (edge: EdgeModel) => boolean,

packages/g6/src/stdlib/behavior/hover-activate.ts

@@ -15,7 +15,7 @@ export interface HoverActivateOptions {
    */
   activateState?: string;
   /**
-   * Item types to be able to acitvate.
+   * Item types to be able to activate.
    * Defaults to `["node", "edge"]`.
    * Should be an array of "node", "edge", or "combo".
    */

packages/g6/src/stdlib/behavior/orbit-canvas-3d.ts

@@ -8,7 +8,7 @@ const VALID_TRIGGERS = ['drag', 'directionKeys'];
 
 export interface OrbitCanvas3DOptions {
   /**
-   * The way to tranlate the canvas. 'drag' (default) means dragged by mouse, 'directionKeys' means the up/down/left/right key on keyBoard.
+   * The way to translate the canvas. 'drag' (default) means dragged by mouse, 'directionKeys' means the up/down/left/right key on keyBoard.
    */
   trigger?: 'drag' | 'directionKeys';
   /**

packages/g6/src/stdlib/behavior/rotate-canvas-3d.ts

@@ -7,7 +7,7 @@ const VALID_TRIGGERS = ['drag', 'directionKeys'];
 
 export interface RotateCanvas3DOptions {
   /**
-   * The way to tranlate the canvas. 'drag' (default) means dragged by mouse, 'directionKeys' means the up/down/left/right key on keyBoard.
+   * The way to translate the canvas. 'drag' (default) means dragged by mouse, 'directionKeys' means the up/down/left/right key on keyBoard.
    */
   trigger?: 'drag' | 'directionKeys';
   /**
@@ -18,7 +18,7 @@ export interface RotateCanvas3DOptions {
    */
   secondaryKey?: string;
   /**
-   * To speed up rotating while pressing and rotate the canvas by direciton keys (trigger = 'directionKeys').
+   * To speed up rotating while pressing and rotate the canvas by direction keys (trigger = 'directionKeys').
    */
   speedUpKey?: string;
   /**

packages/g6/src/stdlib/behavior/scroll-canvas.ts

@@ -222,10 +222,10 @@ export class ScrollCanvas extends Behavior {
       graph.getSpecification().optimize || {};
     const { optimizeZoom } = options;
     const optimize = this.options.enableOptimize || graphBehaviorOptimize;
-    const shouldOptimzie = isNumber(optimize)
+    const shouldOptimize = isNumber(optimize)
       ? graph.getAllNodesData().length > optimize
       : optimize;
-    if (shouldOptimzie) {
+    if (shouldOptimize) {
       const currentZoom = graph.getZoom();
       const newHiddenEdgeIds = graph
         .getAllEdgesData()
@@ -278,18 +278,18 @@ export class ScrollCanvas extends Behavior {
     const { optimizeZoom } = this.options;
 
     // hide the shapes when the zoom ratio is smaller than optimizeZoom
-    // hide the shapes when zoomming
+    // hide the shapes when zooming
     if (currentZoom < optimizeZoom) {
       return;
     }
 
     const { tileBehavior: graphBehaviorOptimize, tileBehaviorSize = 1000 } =
       graph.getSpecification().optimize || {};
     const optimize = this.options.enableOptimize || graphBehaviorOptimize;
-    const shouldOptimzie = isNumber(optimize)
+    const shouldOptimize = isNumber(optimize)
       ? graph.getAllNodesData().length > optimize
       : optimize;
-    if (!shouldOptimzie) {
+    if (!shouldOptimize) {
       this.hiddenEdgeIds = this.hiddenNodeIds = [];
       return;
     }

packages/g6/src/stdlib/behavior/track-canvas-3d.ts

@@ -8,7 +8,7 @@ const VALID_TRIGGERS = ['drag', 'directionKeys'];
 
 export interface TrackCanvas3DOptions {
   /**
-   * The way to tranlate the canvas. 'drag' (default) means dragged by mouse, 'directionKeys' means the up/down/left/right key on keyBoard.
+   * The way to translate the canvas. 'drag' (default) means dragged by mouse, 'directionKeys' means the up/down/left/right key on keyBoard.
    */
   trigger?: 'drag' | 'directionKeys';
   /**

packages/g6/src/stdlib/behavior/zoom-canvas-3d.ts

@@ -9,7 +9,7 @@ const VALID_TRIGGERS = ['wheel', 'upDownKeys'];
 
 export interface ZoomCanvas3DOptions {
   /**
-   * The way to tranlate the canvas. 'drag' (default) means dragged by mouse, 'directionKeys' means the up/down/left/right key on keyBoard.
+   * The way to translate the canvas. 'drag' (default) means dragged by mouse, 'directionKeys' means the up/down/left/right key on keyBoard.
    */
   trigger?: 'wheel' | 'upDownKeys';
   /**

packages/g6/src/stdlib/behavior/zoom-canvas.ts

@@ -124,10 +124,10 @@ export class ZoomCanvas extends Behavior {
       this.options.enableOptimize !== undefined
         ? this.options.enableOptimize
         : graphBehaviorOptimize;
-    const shouldOptimze = isNumber(optimize)
+    const shouldOptimize = isNumber(optimize)
       ? graph.getAllNodesData().length > optimize
       : optimize;
-    if (shouldOptimze) {
+    if (shouldOptimize) {
       this.hiddenEdgeIds = graph
         .getAllEdgesData()
         .map((edge) => edge.id)
@@ -169,11 +169,11 @@ export class ZoomCanvas extends Behavior {
       this.options.enableOptimize !== undefined
         ? this.options.enableOptimize
         : graphBehaviorOptimize;
-    const shouldOptimze = isNumber(optimize)
+    const shouldOptimize = isNumber(optimize)
       ? graph.getAllNodesData().length > optimize
       : optimize;
     this.zooming = false;
-    if (shouldOptimze) {
+    if (shouldOptimize) {
       if (this.tileRequestId) {
         cancelAnimationFrame(this.tileRequestId);
         this.tileRequestId = undefined;