CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-antv--g6-core

A Graph Visualization Framework core library providing fundamental mechanisms for rendering, layout, analysis, interaction, and animation of graph data structures

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

@antv/g6-core

@antv/g6-core is the core library of the G6 graph visualization framework, providing fundamental mechanisms for rendering, layout, analysis, interaction, and animation of graph data structures. It offers a comprehensive set of built-in nodes and edges with flexible configuration options, over 10 steerable interaction behaviors for user engagement, and more than 10 powerful layout algorithms for optimal graph organization.

Package Information

  • Package Name: @antv/g6-core
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @antv/g6-core

Core Imports

import { 
  AbstractGraph, 
  AbstractLayout, 
  AbstractEvent,
  registerNode, 
  registerEdge, 
  registerCombo, 
  registerBehavior, 
  Util,
  Arrow,
  Marker
} from "@antv/g6-core";

For CommonJS:

const { 
  AbstractGraph, 
  AbstractLayout, 
  AbstractEvent,
  registerNode, 
  registerEdge, 
  registerCombo, 
  registerBehavior, 
  Util,
  Arrow,
  Marker
} = require("@antv/g6-core");

Default import:

import G6Core from "@antv/g6-core";
// Provides: { version, AbstractGraph, Util, registerNode, registerEdge, registerCombo, registerBehavior, Arrow, Marker, AbstractLayout, AbstractEvent }

Basic Usage

import { AbstractGraph } from "@antv/g6-core";

// Extend AbstractGraph to create your own graph class
class MyGraph extends AbstractGraph {
  protected initLayoutController() {
    // Initialize layout controller
  }
  
  protected initEventController() {
    // Initialize event controller  
  }
  
  protected initCanvas() {
    // Initialize canvas
  }
}

// Create graph instance
const graph = new MyGraph({
  container: 'graph-container',
  width: 800,
  height: 600,
  modes: {
    default: ['drag-canvas', 'zoom-canvas']
  }
});

// Load data
graph.data({
  nodes: [
    { id: 'node1', x: 100, y: 100, label: 'Node 1' },
    { id: 'node2', x: 200, y: 200, label: 'Node 2' }
  ],
  edges: [
    { source: 'node1', target: 'node2', label: 'Edge 1' }
  ]
});

// Render the graph
graph.render();

Architecture

G6-core is built around several key components:

  • AbstractGraph: The main graph class providing complete graph management capabilities
  • Item System: Node, Edge, and Combo classes for representing graph elements
  • Shape System: Registration and rendering system for custom visual elements
  • Behavior System: Interaction handling with customizable behaviors
  • Controller System: Abstract controllers for layout and event management
  • Utility System: Math, graphics, and path operation utilities

Capabilities

Graph Management

Core graph operations including data loading, rendering, item manipulation, view control, and lifecycle management.

abstract class AbstractGraph {
  constructor(cfg: GraphOptions);
  
  // Data operations
  data(data?: GraphData): void;
  render(): void;
  refresh(): void;
  changeData(data?: GraphData, stack?: boolean): AbstractGraph;
  
  // Item operations
  addItem(type: ITEM_TYPE, model: ModelConfig, stack?: boolean): Item;
  updateItem(item: Item | string, cfg: Partial<NodeConfig> | EdgeConfig, stack?: boolean): void;
  removeItem(item: Item | string, stack?: boolean): void;
  
  // View operations
  fitView(padding?: Padding): void;
  zoom(ratio: number, center?: Point): void;
  translate(dx: number, dy: number): void;
}

interface GraphOptions {
  container: string | HTMLElement;
  width: number;
  height: number;
  renderer?: string;
  fitView?: boolean;
  fitViewPadding?: Padding;
  layout?: LayoutConfig;
  modes?: Modes;
  defaultNode?: Partial<NodeConfig>;
  defaultEdge?: Partial<EdgeConfig>;
  defaultCombo?: Partial<ComboConfig>;
  nodeStateStyles?: StateStyles;
  edgeStateStyles?: StateStyles;
  comboStateStyles?: StateStyles;
  plugins?: any[];
  animate?: boolean;
  animateCfg?: GraphAnimateConfig;
  minZoom?: number;
  maxZoom?: number;
  enabledStack?: boolean;
  maxStep?: number;
  groupByTypes?: boolean;
  autoPaint?: boolean;
  pixelRatio?: number;
  localRefresh?: boolean;
  groupType?: string;
  linkCenter?: boolean;
}

interface LayoutConfig {
  type?: string;
  [key: string]: unknown;
}

interface ModeOption {
  type: string;
  delegate?: boolean;
  delegateStyle?: object;
  updateEdge?: boolean;
  trigger?: string;
  enableDelegate?: boolean;
  maxZoom?: number;
  minZoom?: number;
  enableOptimize?: boolean;
  optimizeZoom?: number;
  multiple?: boolean;
  activeState?: string;
  comboActiveState?: string;
  selectedState?: string;
  onlyChangeComboSize?: boolean;
  includeEdges?: boolean;
  direction?: 'x' | 'y';
  scalableRange?: number;
  offset?: number;
  key?: string;
  edgeConfig?: EdgeConfig;
  functionName?: string;
  functionParams?: any[];
}

type ModeType = string | ModeOption;
type Modes = { [mode: string]: ModeType[]; };

interface StateStyles {
  [stateName: string]: ShapeStyle;
}

interface GraphAnimateConfig {
  duration?: number;
  easing?: string;
  callback?: () => void;
  delay?: number;
}

interface TreeGraphData {
  id: string;
  children?: TreeGraphData[];
  [key: string]: any;
}

interface ComboTree {
  id: string;
  parentId?: string;
  children?: ComboTree[];
  depth?: number;
  [key: string]: any;
}

interface NodeIdxMap {
  [nodeId: string]: number;
}

interface StackData {
  action: string;
  data: {
    before: object;
    after: object;
  };
}

interface HullCfg {
  id: string;
  members?: string[];
  type?: 'round-convex-hull' | 'smooth-convex-hull' | 'bubble';
  padding?: number;
  style?: ShapeStyle;
}

interface GraphData {
  nodes?: NodeConfig[];
  edges?: EdgeConfig[];
  combos?: ComboConfig[];
}

Graph Management

Item Management

Complete system for managing graph items (nodes, edges, combos) including creation, updates, state management, and interactions.

interface INode extends IItemBase {
  // Edge connections
  getEdges(): IEdge[];
  getInEdges(): IEdge[];
  getOutEdges(): IEdge[];
  
  // Connection points
  getLinkPointByAnchor(index: number): IPoint;
  getAnchorPoints(): IPoint[] | number[][];
  
  // Neighbors
  getNeighbors(type?: 'source' | 'target'): INode[];
}

interface IEdge extends IItemBase {
  setSource(source: INode | ICombo): void;
  setTarget(target: INode | ICombo): void;
  getSource(): INode | ICombo;
  getTarget(): INode | ICombo;
}

interface ICombo extends INode {
  getChildren(): { nodes: INode[]; combos: ICombo[] };
  addChild(item: INode | ICombo): boolean;
  removeChild(item: ICombo | INode): boolean;
}

Item Management

Shape System

Registration and management system for custom node, edge, and combo shapes with built-in arrow and marker utilities.

function registerNode(type: string, shapeObj: ShapeOptions): void;
function registerEdge(type: string, shapeObj: ShapeOptions): void;
function registerCombo(type: string, shapeObj: ShapeOptions): void;

interface ShapeOptions {
  draw(cfg?: ModelConfig, group?: IGroup): IShape;
  afterDraw?(cfg?: ModelConfig, group?: IGroup, rst?: IShape): void;
  update(cfg: ModelConfig, item: Item): void;
  setState?(name?: string, value?: string | boolean, item?: Item): void;
  getAnchorPoints?(cfg?: ModelConfig): number[][];
}

// Arrow utilities
declare const Arrow: {
  triangle(width?: number, length?: number, d?: number): string;
  vee(width?: number, length?: number, d?: number): string;
  circle(r?: number, d?: number): string;
  rect(width?: number, length?: number, d?: number): string;
  diamond(width?: number, length?: number, d?: number): string;
};

Shape System

Behavior System

Interaction behavior system allowing registration of custom behaviors and event handling for graph interactions.

function registerBehavior(type: string, behavior: BehaviorOption): void;

interface BehaviorOption {
  getEvents(): { [key in G6Event]?: string };
  getDefaultCfg?(): object;
  shouldBegin?(e?: IG6GraphEvent): boolean;
  shouldUpdate?(e?: IG6GraphEvent): boolean;
  shouldEnd?(e?: IG6GraphEvent): boolean;
  bind?(graph: IAbstractGraph): void;
  unbind?(graph: IAbstractGraph): void;
}

enum G6Event {
  CLICK = 'click',
  DBLCLICK = 'dblclick',
  MOUSEDOWN = 'mousedown',
  MOUSEUP = 'mouseup',
  MOUSEMOVE = 'mousemove',
  MOUSEENTER = 'mouseenter',
  MOUSELEAVE = 'mouseleave',
  MOUSEOVER = 'mouseover',
  MOUSEOUT = 'mouseout',
  DRAG = 'drag',
  DRAGSTART = 'dragstart',
  DRAGEND = 'dragend',
  DRAGENTER = 'dragenter',
  DRAGLEAVE = 'dragleave',
  DROP = 'drop',
  KEYDOWN = 'keydown',
  KEYUP = 'keyup',
  WHEEL = 'wheel',
  FOCUS = 'focus',
  BLUR = 'blur',
  NODE_CLICK = 'node:click',
  NODE_DBLCLICK = 'node:dblclick',
  NODE_MOUSEDOWN = 'node:mousedown',
  NODE_MOUSEUP = 'node:mouseup',
  NODE_MOUSEMOVE = 'node:mousemove',
  NODE_MOUSEENTER = 'node:mouseenter',
  NODE_MOUSELEAVE = 'node:mouseleave',
  NODE_MOUSEOVER = 'node:mouseover',
  NODE_MOUSEOUT = 'node:mouseout',
  NODE_DRAGSTART = 'node:dragstart',
  NODE_DRAG = 'node:drag',
  NODE_DRAGEND = 'node:dragend',
  NODE_DRAGENTER = 'node:dragenter',
  NODE_DRAGLEAVE = 'node:dragleave',
  NODE_DROP = 'node:drop',
  EDGE_CLICK = 'edge:click',
  EDGE_DBLCLICK = 'edge:dblclick',
  EDGE_MOUSEDOWN = 'edge:mousedown',
  EDGE_MOUSEUP = 'edge:mouseup',
  EDGE_MOUSEMOVE = 'edge:mousemove',
  EDGE_MOUSEENTER = 'edge:mouseenter',
  EDGE_MOUSELEAVE = 'edge:mouseleave',
  EDGE_MOUSEOVER = 'edge:mouseover',
  EDGE_MOUSEOUT = 'edge:mouseout',
  COMBO_CLICK = 'combo:click',
  COMBO_DBLCLICK = 'combo:dblclick',
  COMBO_MOUSEDOWN = 'combo:mousedown',
  COMBO_MOUSEUP = 'combo:mouseup',
  COMBO_MOUSEMOVE = 'combo:mousemove',
  COMBO_MOUSEENTER = 'combo:mouseenter',
  COMBO_MOUSELEAVE = 'combo:mouseleave',
  COMBO_MOUSEOVER = 'combo:mouseover',
  COMBO_MOUSEOUT = 'combo:mouseout',
  COMBO_DRAGSTART = 'combo:dragstart',
  COMBO_DRAG = 'combo:drag',
  COMBO_DRAGEND = 'combo:dragend',
  COMBO_DRAGENTER = 'combo:dragenter',
  COMBO_DRAGLEAVE = 'combo:dragleave',
  COMBO_DROP = 'combo:drop',
  CANVAS_CLICK = 'canvas:click',
  CANVAS_DBLCLICK = 'canvas:dblclick',
  CANVAS_MOUSEDOWN = 'canvas:mousedown',
  CANVAS_MOUSEUP = 'canvas:mouseup',
  CANVAS_MOUSEMOVE = 'canvas:mousemove',
  CANVAS_MOUSEENTER = 'canvas:mouseenter',
  CANVAS_MOUSELEAVE = 'canvas:mouseleave',
  CANVAS_DRAGSTART = 'canvas:dragstart',
  CANVAS_DRAG = 'canvas:drag',
  CANVAS_DRAGEND = 'canvas:dragend',
  VIEWPORTCHANGE = 'viewportchange',
  BEFOREITEMENTER = 'beforeitementer',
  AFTERITEMENTER = 'afteritementer',
  BEFOREITEMLEAVE = 'beforeitemleave',
  AFTERITEMLEAVE = 'afteritemleave',
  AFTERITEMSELECTED = 'afteritemselected',
  AFTERITEMUNSELECTED = 'afteritemunselected',
  AFTERUPDATEITEM = 'afterupdateitem',
  BEFOREUPDATEITEM = 'beforeupdateitem',
  AFTERADDITEM = 'afteradditem',
  BEFOREADDITEM = 'beforeadditem',
  AFTERREMOVEITEM = 'afterremoveitem',
  BEFOREREMOVEITEM = 'beforeremoveitem',
  AFTERITEMSTATECHANGE = 'afteritemstatechange',
  AFTERLAYOUT = 'afterlayout',
  BEFORELAYOUT = 'beforelayout',
  GRAPHSTATECHANGE = 'graphstatechange',
  AFTERCHANGEDATA = 'afterchangedata',
  BEFORECHANGEDATA = 'beforechangedata',
  AFTERRENDER = 'afterrender',
  BEFORERENDER = 'beforerender',
  AFTERCREATEEDGE = 'aftercreateedge',
  BEFORECREATEEDGE = 'beforecreateedge'
}

Behavior System

Layout and Event Controllers

Abstract controller classes for implementing custom layout and event handling systems.

abstract class AbstractLayout {
  graph: IAbstractGraph;
  destroyed: boolean;
  
  constructor(graph: IAbstractGraph);
  
  // Abstract methods to implement
  abstract getLayoutType(): string;
  abstract layout(success?: () => void): boolean;
  
  // Implemented methods
  init(): void;
  getType(): string;
  refreshLayout(): void;
  destroy(): void;
  getData(): GraphData;
  getNodeSize(node: INode): [number, number] | number;
}

abstract class AbstractEvent {
  graph: IAbstractGraph;
  destroyed: boolean;
  
  constructor(graph: IAbstractGraph);
  
  // Abstract methods to implement
  abstract initEvents(): void;
  abstract destroy(): void;
}

Controllers

Utilities

Comprehensive utility functions for mathematical operations, graphics calculations, and path manipulations.

declare const Util: {
  // Math utilities (30+ functions)
  distance(p1: Point, p2: Point): number;
  getLineIntersect(p0: Point, p1: Point, p2: Point, p3: Point): Point | null;
  applyMatrix(point: Point, matrix: Matrix, tag?: 0 | 1): Point;
  invertMatrix(point: Point, matrix: Matrix, tag?: 0 | 1): Point;
  getCircleCenterByPoints(p1: Point, p2: Point, p3: Point): Point;
  getRectIntersectByPoint(rect: IRect, point: Point): Point | null;
  getCircleIntersectByPoint(circle: ICircle, point: Point): Point | null;
  getEllipseIntersectByPoint(ellipse: IEllipse, point: Point): Point;
  isPointInPolygon(points: number[][], x: number, y: number): boolean;
  intersectBBox(box1: Partial<IBBox>, box2: Partial<IBBox>): boolean;
  isPolygonsIntersect(points1: number[][], points2: number[][]): boolean;
  
  // Graphics utilities (15+ functions)
  getBBox(element: IShapeBase, group: IGroup): IBBox;
  getLabelPosition(pathShape: IShapeBase, percent: number): LabelStyle;
  calculationItemsBBox(items: Item[]): IBBox;
  getPointsCenter(points: IPoint[]): IPoint;
  getLetterWidth(letter: string, fontSize: number): number;
  getTextSize(text: string, fontSize: number): [number, number];
  
  // Path utilities (10+ functions)
  getSpline(points: IPoint[]): any[];
  pointsToPolygon(points: IPoint[], z?: boolean): string;
  getControlPoint(startPoint: IPoint, endPoint: IPoint, percent?: number, offset?: number): IPoint;
  getClosedSpline(points: IPoint[]): any[];
  pathToPoints(path: any[]): IPoint[];
  
  // Transformation utilities
  translate(group: IGroup, vec: Point): void;
  move(group: IGroup, point: Point): void;
  scale(group: IGroup, ratio: number | number[]): void;
  rotate(group: IGroup, angle: number): void;
  
  // Algorithm utilities
  floydWarshall(adjMatrix: Matrix[]): Matrix[];
  getAdjMatrix(data: GraphData, directed: boolean): Matrix[];
  getDegree(n: number, nodeIdxMap: NodeIdxMap, edges: EdgeConfig[]): number[];
  
  // Utility functions
  formatPadding(padding: Padding): number[];
  cloneEvent(e: IG6GraphEvent): IG6GraphEvent;
  isViewportChanged(matrix: Matrix): boolean;
  isNaN(input: any): boolean;
};

Utilities

Arrow and Marker Utilities

Built-in utilities for creating arrow heads and markers for edges.

declare const Arrow: {
  triangle(width?: number, length?: number, d?: number): string;
  vee(width?: number, length?: number, d?: number): string;
  circle(r?: number, d?: number): string;
  rect(width?: number, length?: number, d?: number): string;
  diamond(width?: number, length?: number, d?: number): string;
};

declare const Marker: {
  [key: string]: (r?: number, d?: number) => string;
};

Core Types

type Item = INode | IEdge | ICombo;
type ITEM_TYPE = 'node' | 'edge' | 'combo' | 'vedge';

interface IPoint {
  x: number;
  y: number;
  anchorIndex?: number;
}

type IPointTuple = [number, number];
type Matrix = number[];

interface IBBox {
  x: number;
  y: number;
  width: number;
  height: number;
  centerX?: number;
  centerY?: number;
}

interface IRect extends IPoint {
  width: number;
  height: number;
}

interface ICircle extends IPoint {
  r: number;
}

interface IEllipse extends IPoint {
  rx: number;
  ry: number;
}

type Padding = number | string | number[];
type SourceTarget = 'source' | 'target';

interface ArrowConfig {
  d?: number;
  path?: string;
  stroke?: string;
  fill?: string;
}

type LoopConfig = Partial<{
  dist: number;
  position: string;
  clockwise: boolean;
}>;

interface ModelConfig {
  type?: string;
  label?: string;
  x?: number;
  y?: number;
  size?: number | number[];
  color?: string;
  visible?: boolean;
}

interface NodeConfig extends ModelConfig {
  id: string;
  groupId?: string;
  comboId?: string;
  anchorPoints?: number[][];
}

interface EdgeConfig extends ModelConfig {
  id?: string;
  source?: string;
  target?: string;
  controlPoints?: IPoint[];
  curveOffset?: number | number[];
}

interface ComboConfig extends ModelConfig {
  id: string;
  parentId?: string;
  children?: ComboTree[];
  padding?: number | number[];
}

interface ShapeStyle {
  x?: number;
  y?: number;
  r?: number;
  radius?: number;
  width?: number;
  height?: number;
  offset?: number | number[];
  stroke?: string | null;
  strokeOpacity?: number;
  fill?: string | null;
  fillOpacity?: number;
  lineWidth?: number;
  lineAppendWidth?: number;
  lineDash?: number[];
  path?: string | object[];
  points?: object[];
  matrix?: number[];
  opacity?: number;
  size?: number | number[];
  endArrow?: boolean | ArrowConfig;
  startArrow?: boolean | ArrowConfig;
  shadowColor?: string;
  shadowBlur?: number;
  shadowOffsetX?: number;
  shadowOffsetY?: number;
  cursor?: string;
  position?: string;
  fontSize?: number;
  fontFamily?: string;
  fontStyle?: string;
  fontWeight?: string | number;
  fontVariant?: string;
  textAlign?: string;
  textBaseline?: string;
  fill?: string;
  stroke?: string;
  lineHeight?: number;
  background?: {
    fill?: string;
    stroke?: string;
    lineWidth?: number;
    radius?: number | number[];
    padding?: number | number[];
  };
  keepVisualSize?: boolean;
  [key: string]: any;
}

interface IG6GraphEvent {
  item: Item | null;
  canvasX: number;
  canvasY: number;
  clientX: number;
  clientY: number;
  x: number;
  y: number;
  wheelDelta: number;
  detail: number;
  key?: string;
  target: IShapeBase & ICanvas;
  type: string;
  bubbles: boolean;
  cancelable: boolean;
  currentTarget: object;
  defaultPrevented: boolean;
  eventPhase: number;
  isTrusted: boolean;
  timeStamp: number;
  preventDefault(): void;
  stopPropagation(): void;
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@antv/g6-core@4.0.x
Publish Source
CLI
Badge
tessl/npm-antv--g6-core badge