or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

behavior-system.mdcontrollers.mdgraph-management.mdindex.mditem-management.mdshape-system.mdutilities.md
tile.json

graph-management.mddocs/

Graph Management

Core graph operations providing complete graph lifecycle management including data loading, rendering, item manipulation, view control, zoom operations, coordinate transformations, and state management.

Capabilities

AbstractGraph Class

The main abstract graph class that must be extended to create functional graph instances.

/**
 * Abstract graph class providing comprehensive graph management capabilities
 * Must be extended with layout, event, and canvas controller implementations
 */
abstract class AbstractGraph {
  constructor(cfg: GraphOptions);
  
  // Abstract methods that must be implemented
  protected abstract initLayoutController(): void;
  protected abstract initEventController(): void;
  protected abstract initCanvas(): void;
  
  // Lifecycle methods
  destroy(): void;
}

Usage Example:

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

class MyGraph extends AbstractGraph {
  protected initLayoutController() {
    // Initialize your layout controller
  }
  
  protected initEventController() {
    // Initialize your event controller
  }
  
  protected initCanvas() {
    // Initialize your canvas/renderer
  }
}

Configuration Management

Get and set graph configuration values dynamically.

/**
 * Get configuration value by key
 * @param key - Configuration key
 * @returns Configuration value
 */
get<T = any>(key: string): T;

/**
 * Set configuration value
 * @param key - Configuration key or object of key-value pairs
 * @param value - Configuration value (when key is string)
 * @returns Graph instance for chaining
 */
set<T = any>(key: string | object, value?: T): AbstractGraph;

/**
 * Get default configuration
 * @returns Default graph configuration
 */
getDefaultCfg(): Partial<GraphOptions>;

Data Operations

Load, change, and manipulate graph data.

/**
 * Load graph data
 * @param data - Graph data containing nodes, edges, and combos
 */
data(data?: GraphData | TreeGraphData): void;

/**
 * Render the graph with current data
 */
render(): void;

/**
 * Refresh the entire graph display
 */
refresh(): void;

/**
 * Refresh only item positions without full rerender
 */
refreshPositions(): void;

/**
 * Animate to new positions
 */
positionsAnimate(): void;

/**
 * Change graph data with optional undo/redo support
 * @param data - New graph data
 * @param stack - Whether to add to undo/redo stack
 * @returns Graph instance
 */
changeData(data?: GraphData | TreeGraphData, stack?: boolean): AbstractGraph;

/**
 * Save current graph data
 * @returns Current graph data
 */
save(): TreeGraphData | GraphData;

/**
 * Clear all graph data and display
 * @returns Graph instance
 */
clear(): AbstractGraph;

/**
 * Read and load graph data
 * @param data - Graph data to load
 */
read(data: GraphData): void;

Item CRUD Operations

Create, read, update, and delete graph items.

/**
 * Find item by ID
 * @param id - Item ID
 * @returns Found item or undefined
 */
findById(id: string): Item;

/**
 * Add new item to graph
 * @param type - Item type ('node', 'edge', 'combo')
 * @param model - Item configuration
 * @param stack - Whether to add to undo/redo stack
 * @returns Created item
 */
addItem(type: ITEM_TYPE, model: ModelConfig, stack?: boolean): Item;

/**
 * Add new item to graph (alias for addItem)
 */
add(type: ITEM_TYPE, model: ModelConfig, stack?: boolean): Item;

/**
 * Update existing item
 * @param item - Item instance or ID
 * @param cfg - Updated configuration
 * @param stack - Whether to add to undo/redo stack
 */
updateItem(item: Item | string, cfg: Partial<NodeConfig> | EdgeConfig, stack?: boolean): void;

/**
 * Update existing item (alias for updateItem)
 */
update(item: Item | string, cfg: Partial<NodeConfig> | EdgeConfig, stack?: boolean): void;

/**
 * Remove item from graph
 * @param item - Item instance or ID
 * @param stack - Whether to add to undo/redo stack
 */
removeItem(item: Item | string, stack?: boolean): void;

/**
 * Remove item from graph (alias for removeItem)
 */
remove(item: Item | string, stack?: boolean): void;

/**
 * Refresh specific item display
 * @param item - Item instance or ID
 */
refreshItem(item: Item | string): void;

Item Visibility Control

Control item visibility and focus.

/**
 * Show hidden item
 * @param item - Item instance or ID
 * @param stack - Whether to add to undo/redo stack
 */
showItem(item: Item | string, stack?: boolean): void;

/**
 * Hide visible item
 * @param item - Item instance or ID
 * @param stack - Whether to add to undo/redo stack
 */
hideItem(item: Item | string, stack?: boolean): void;

/**
 * Focus on specific item with optional animation
 * @param item - Item instance or ID
 * @param animate - Whether to animate the focus
 * @param animateCfg - Animation configuration
 */
focusItem(item: Item | string, animate?: boolean, animateCfg?: GraphAnimateConfig): void;

Item State Management

Manage item states for styling and interaction.

/**
 * Set item state
 * @param item - Item instance or ID
 * @param state - State name
 * @param value - State value
 */
setItemState(item: Item | string, state: string, value: string | boolean): void;

/**
 * Set state as priority (highest precedence)
 * @param item - Item instance or ID
 * @param state - State name
 */
priorityState(item: Item | string, state: string): void;

/**
 * Clear item states
 * @param item - Item instance or ID
 * @param states - Specific states to clear (all if not specified)
 */
clearItemStates(item: Item | string, states?: string | string[]): void;

Item Queries

Search and filter graph items.

/**
 * Get all nodes
 * @returns Array of all nodes
 */
getNodes(): INode[];

/**
 * Get all edges
 * @returns Array of all edges
 */
getEdges(): IEdge[];

/**
 * Get all combos
 * @returns Array of all combos
 */
getCombos(): ICombo[];

/**
 * Find first item matching predicate
 * @param type - Item type to search
 * @param fn - Search predicate function
 * @returns First matching item or undefined
 */
find<T extends Item>(type: ITEM_TYPE, fn: (item: T, index?: number) => boolean): T | undefined;

/**
 * Find all items matching predicate
 * @param type - Item type to search
 * @param fn - Search predicate function
 * @returns Array of matching items
 */
findAll<T extends Item>(type: ITEM_TYPE, fn: (item: T, index?: number) => boolean): T[];

/**
 * Find all items with specific state
 * @param type - Item type to search
 * @param state - State name
 * @returns Array of items with the state
 */
findAllByState<T extends Item>(type: ITEM_TYPE, state: string): T[];

View and Zoom Control

Control graph view, zoom, and positioning.

/**
 * Get/set minimum zoom ratio
 */
getMinZoom(): number;
setMinZoom(ratio: number): void;

/**
 * Get/set maximum zoom ratio
 */
getMaxZoom(): number;
setMaxZoom(ratio: number): void;

/**
 * Get current zoom ratio
 * @returns Current zoom ratio
 */
getZoom(): number;

/**
 * Zoom by ratio from center or specified point
 * @param ratio - Zoom ratio multiplier
 * @param center - Zoom center point
 */
zoom(ratio: number, center?: Point): void;

/**
 * Zoom to specific ratio
 * @param toRatio - Target zoom ratio
 * @param center - Zoom center point
 */
zoomTo(toRatio: number, center?: Point): void;

/**
 * Fit graph to view with optional padding
 * @param padding - Padding around fitted content
 */
fitView(padding?: Padding): void;

/**
 * Center graph without scaling
 */
fitCenter(): void;

Coordinate Transformations

Convert between different coordinate systems.

/**
 * Convert client coordinates to graph coordinates
 * @param clientX - Client X coordinate
 * @param clientY - Client Y coordinate
 * @returns Graph coordinates
 */
getPointByClient(clientX: number, clientY: number): Point;

/**
 * Convert graph coordinates to client coordinates
 * @param x - Graph X coordinate
 * @param y - Graph Y coordinate
 * @returns Client coordinates
 */
getClientByPoint(x: number, y: number): Point;

/**
 * Convert canvas coordinates to graph coordinates
 * @param canvasX - Canvas X coordinate
 * @param canvasY - Canvas Y coordinate
 * @returns Graph coordinates
 */
getPointByCanvas(canvasX: number, canvasY: number): Point;

/**
 * Convert graph coordinates to canvas coordinates
 * @param x - Graph X coordinate
 * @param y - Graph Y coordinate
 * @returns Canvas coordinates
 */
getCanvasByPoint(x: number, y: number): Point;

Movement and Translation

Move and translate the graph view.

/**
 * Translate graph by delta amounts
 * @param dx - X translation amount
 * @param dy - Y translation amount
 */
translate(dx: number, dy: number): void;

/**
 * Move graph to absolute position
 * @param x - Target X position
 * @param y - Target Y position
 */
moveTo(x: number, y: number): void;

Canvas and Container Access

Access underlying graphics and DOM elements.

/**
 * Get root graphics group
 * @returns Root graphics group
 */
getGroup(): IGroup;

/**
 * Get DOM container element
 * @returns Container HTML element
 */
getContainer(): HTMLElement;

/**
 * Get canvas width
 * @returns Canvas width in pixels
 */
getWidth(): number;

/**
 * Get canvas height
 * @returns Canvas height in pixels
 */
getHeight(): number;

/**
 * Change canvas size
 * @param width - New width
 * @param height - New height
 * @returns Graph instance
 */
changeSize(width: number, height: number): AbstractGraph;

Layout Management

Control graph layout algorithms.

/**
 * Update layout configuration
 * @param cfg - New layout configuration
 */
updateLayout(cfg: LayoutConfig): void;

/**
 * Execute current layout algorithm
 */
layout(): void;

Mode and Behavior Management

Manage interaction modes and behaviors.

/**
 * Get current interaction mode
 * @returns Current mode name
 */
getCurrentMode(): string;

/**
 * Set interaction mode
 * @param mode - Mode name to activate
 * @returns Graph instance
 */
setMode(mode: string): AbstractGraph;

/**
 * Add behaviors to modes
 * @param behaviors - Behaviors to add
 * @param modes - Target modes
 * @returns Graph instance
 */
addBehaviors(behaviors: string | ModeOption | ModeType[], modes: string | string[]): AbstractGraph;

/**
 * Remove behaviors from modes
 * @param behaviors - Behaviors to remove
 * @param modes - Target modes
 * @returns Graph instance
 */
removeBehaviors(behaviors: string | ModeOption | ModeType[], modes: string | string[]): AbstractGraph;

Combo Operations

Manage combo (group) items and their hierarchical relationships.

/**
 * Create new combo from existing items
 * @param combo - Combo configuration or ID
 * @param elements - Array of item IDs to include in combo
 * @returns Created combo item
 */
createCombo(combo: string | ComboConfig, elements: string[]): ICombo;

/**
 * Dissolve combo and release its children
 * @param item - Combo instance or ID
 * @returns Graph instance
 */
uncombo(item: string | ICombo): AbstractGraph;

/**
 * Update combo tree structure
 * @param item - Item to move
 * @param parentId - New parent combo ID
 * @param stack - Whether to add to undo/redo stack
 */
updateComboTree(item: string | INode | ICombo, parentId?: string, stack?: boolean): void;

/**
 * Collapse combo to hide its children
 * @param combo - Combo instance or ID
 */
collapseCombo(combo: string | ICombo): void;

/**
 * Expand combo to show its children
 * @param combo - Combo instance or ID
 */
expandCombo(combo: string | ICombo): void;

/**
 * Toggle combo collapse state
 * @param combo - Combo instance or ID
 */
collapseExpandCombo(combo: string | ICombo): void;

/**
 * Update all combos in the graph
 */
updateCombos(): void;

/**
 * Update specific combo
 * @param combo - Combo instance or ID
 */
updateCombo(combo: string | ICombo): void;

/**
 * Get combo children
 * @param combo - Combo instance or ID
 * @returns Object containing child nodes and combos
 */
getComboChildren(combo: string | ICombo): { nodes: INode[]; combos: ICombo[] };

Hull Operations

Create and manage hull shapes around groups of items.

/**
 * Create hull around items
 * @param cfg - Hull configuration
 * @returns Created hull instance
 */
createHull(cfg: HullCfg): Hull;

/**
 * Get all hulls in the graph
 * @returns Array of hull instances
 */
getHulls(): Hull[];

/**
 * Get hull by ID
 * @param hullId - Hull ID
 * @returns Hull instance or undefined
 */
getHullById(hullId: string): Hull;

/**
 * Remove hull from graph
 * @param hull - Hull instance or ID
 */
removeHull(hull: Hull | string): void;

Graph Algorithms

Built-in graph analysis algorithms.

/**
 * Get neighboring nodes
 * @param node - Node instance or ID
 * @param type - Neighbor type filter
 * @returns Array of neighboring nodes
 */
getNeighbors(node: string | INode, type?: 'source' | 'target' | undefined): INode[];

/**
 * Get node degree (number of connections)
 * @param node - Node instance or ID
 * @param type - Degree type ('in', 'out', 'total', 'all')
 * @returns Node degree value or object
 */
getNodeDegree(node: string | INode, type?: 'in' | 'out' | 'total' | 'all' | undefined): Number | Object;

/**
 * Get adjacency matrix
 * @param cache - Whether to cache result
 * @param directed - Whether graph is directed
 * @returns Adjacency matrix
 */
getAdjMatrix(cache: boolean, directed?: boolean): Number | Object;

/**
 * Get shortest path matrix
 * @param cache - Whether to cache result
 * @param directed - Whether graph is directed
 * @returns Shortest path matrix
 */
getShortestPathMatrix(cache: boolean, directed?: boolean): Number | Object;

Animation Control

Control graph animations.

/**
 * Check if graph is currently animating
 * @returns True if animating
 */
isAnimating(): boolean;

/**
 * Stop all current animations
 */
stopAnimate(): void;

Painting Control

Control graph rendering and painting.

/**
 * Set automatic painting mode
 * @param auto - Whether to enable auto paint
 */
setAutoPaint(auto: boolean): void;

/**
 * Trigger automatic paint if enabled
 */
autoPaint(): void;

/**
 * Force paint the graph
 */
paint(): void;

Configuration Functions

Configure default styling for graph items.

/**
 * Configure default node properties
 * @param nodeFn - Function to configure node defaults
 * @returns Graph instance
 */
node(nodeFn: (config: NodeConfig) => Partial<NodeConfig>): AbstractGraph;

/**
 * Configure default edge properties
 * @param edgeFn - Function to configure edge defaults
 * @returns Graph instance
 */
edge(edgeFn: (config: EdgeConfig) => Partial<EdgeConfig>): AbstractGraph;

/**
 * Configure default combo properties
 * @param comboFn - Function to configure combo defaults
 * @returns Graph instance
 */
combo(comboFn: (config: ComboConfig) => Partial<ComboConfig>): AbstractGraph;

Event Handling

Standard EventEmitter interface for graph events.

/**
 * Add event listener
 * @param eventName - Event name
 * @param callback - Event handler function
 * @param once - Whether to trigger only once
 * @returns Graph instance
 */
on(eventName: string, callback: (e: IG6GraphEvent) => void, once?: boolean): AbstractGraph;

/**
 * Remove event listener
 * @param eventName - Event name
 * @param callback - Event handler function
 * @returns Graph instance
 */
off(eventName: string, callback: (e: IG6GraphEvent) => void): AbstractGraph;

/**
 * Emit event
 * @param eventName - Event name
 * @param eventObj - Event object
 * @returns Graph instance
 */
emit(eventName: string, eventObj: IG6GraphEvent): AbstractGraph;

Undo/Redo Stack

Manage undo and redo operations.

/**
 * Get undo stack
 * @returns Undo stack instance
 */
getUndoStack(): Stack;

/**
 * Get redo stack
 * @returns Redo stack instance
 */
getRedoStack(): Stack;

/**
 * Get stack data for serialization
 * @returns Stack data object
 */
getStackData(): { undoStack: StackData[]; redoStack: StackData[] };

/**
 * Clear all stack data
 */
clearStack(): void;

/**
 * Push action to stack
 * @param action - Action name
 * @param data - Action data
 * @param stackType - Stack type ('undo' or 'redo')
 */
pushStack(action?: string, data?: unknown, stackType?: 'redo' | 'undo'): void;

Types

interface GraphOptions {
  container: string | HTMLElement;
  width: number;
  height: number;
  renderer?: string;
  fitView?: boolean;
  fitCenter?: boolean;
  layout?: LayoutConfig;
  fitViewPadding?: Padding;
  groupByTypes?: boolean;
  directed?: boolean;
  groupStyle?: { style?: { [key: string]: ShapeStyle } };
  autoPaint?: boolean;
  modes?: Modes;
  defaultNode?: Partial<NodeStyle>;
  defaultEdge?: Partial<EdgeStyle>;
  defaultCombo?: Partial<ComboStyle>;
  nodeStateStyles?: StateStyles;
  edgeStateStyles?: StateStyles;
  comboStateStyles?: StateStyles;
  plugins?: any[];
  animate?: boolean;
  animateCfg?: GraphAnimateConfig;
  minZoom?: number;
  maxZoom?: number;
  groupType?: string;
  linkCenter?: boolean;
  enabledStack?: boolean;
  maxStep?: number;
  tooltips?: [];
}

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

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

type ITEM_TYPE = 'node' | 'edge' | 'combo';

interface Point {
  x: number;
  y: number;
}

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

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

interface Modes {
  [modeName: string]: (string | ModeOption)[];
}

interface ModeOption {
  type: string;
  [key: string]: any;
}

type ModeType = string | ModeOption;

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

interface Stack {
  // Stack interface details
}

interface StackData {
  // Stack data interface details
}