Element System

import { Graph } from '@antv/g6';
import type { NodeOptions, NodeData, NodeStyle, Size, State } from '@antv/g6';

// Node configuration
graph.setNode({
  type: 'circle', // Built-in node types
  style: {
    size: 20,
    fill: '#1783FF',
    stroke: '#fff',
    lineWidth: 2,
    // Label configuration
    labelText: (data) => data.id,
    labelFill: '#000',
    labelFontSize: 12,
    labelPosition: 'center',
    // Icon configuration
    iconText: '\ue602', // Icon font character
    iconFill: '#fff',
    iconFontSize: 16,
    // Badge configuration
    badgeText: '10',
    badgeFill: '#ff4d4f',
    badgeTextFill: '#fff'
  },
  state: {
    selected: {
      fill: '#ff7875',
      stroke: '#ff4d4f',
      lineWidth: 3
    },
    hover: {
      fill: '#40a9ff'
    }
  }
});

import type { EdgeOptions, EdgeData, EdgeStyle } from '@antv/g6';

// Edge configuration
graph.setEdge({
  type: 'line', // Built-in edge types
  style: {
    stroke: '#e2e2e2',
    lineWidth: 1,
    // Arrow configuration
    endArrow: true,
    endArrowType: 'triangle',
    endArrowSize: 10,
    startArrow: false,
    // Label configuration
    labelText: (data) => data.data?.weight,
    labelFill: '#666',
    labelFontSize: 10,
    labelPosition: 'middle',
    labelAutoRotate: true,
    // Loop edge configuration
    loopClockwise: true,
    loopDist: 20
  },
  state: {
    selected: {
      stroke: '#1890ff',
      lineWidth: 3
    },
    hover: {
      stroke: '#40a9ff',
      lineWidth: 2
    }
  }
});

import type { ComboOptions, ComboData, ComboStyle, Padding } from '@antv/g6';

// Combo configuration
graph.setCombo({
  type: 'rect', // Built-in combo types
  style: {
    fill: '#f0f0f0',
    stroke: '#d9d9d9',
    lineWidth: 1,
    radius: 8,
    padding: [10, 10, 10, 10],
    // Collapsed state configuration
    collapsedSize: [30, 30],
    collapsedFill: '#1890ff',
    collapsedMarker: true,
    collapsedMarkerFill: '#fff',
    // Label configuration
    labelText: (data) => data.id,
    labelPosition: 'top'
  },
  state: {
    selected: {
      stroke: '#1890ff',
      lineWidth: 2
    }
  }
});

// Available node types from @antv/g6
import { 
  Circle,      // Circular node
  Diamond,     // Diamond-shaped node
  Donut,       // Donut/ring-shaped node
  Ellipse,     // Elliptical node
  HTML,        // HTML content node
  Hexagon,     // Hexagonal node
  Image,       // Image node
  Rect,        // Rectangular node
  Star,        // Star-shaped node
  Triangle     // Triangular node
} from '@antv/g6';

// Usage example with specific node type
const graph = new Graph({
  node: {
    type: 'diamond',
    style: {
      size: [40, 30], // [width, height] for non-circular nodes
      fill: '#722ed1'
    }
  }
});

// Available edge types from @antv/g6
import { 
  Line,            // Straight line edge
  Cubic,           // Cubic bezier curve edge
  CubicHorizontal, // Horizontal cubic bezier edge
  CubicRadial,     // Radial cubic bezier edge
  CubicVertical,   // Vertical cubic bezier edge
  Polyline,        // Multi-segment line edge
  Quadratic        // Quadratic bezier curve edge
} from '@antv/g6';

// Usage example with curved edge
const graph = new Graph({
  edge: {
    type: 'cubic',
    style: {
      stroke: '#1890ff',
      lineWidth: 2,
      curvature: 0.2 // Control curve intensity
    }
  }
});

// Available combo types from @antv/g6
import { 
  CircleCombo,  // Circular combo
  RectCombo     // Rectangular combo
} from '@antv/g6';

interface NodeData {
  id: ID;                              // Unique identifier
  type?: string;                       // Node type (defaults to graph.node.type)
  data?: Record<string, unknown>;      // Custom data properties
  style?: NodeStyle;                   // Style overrides
  states?: State[];                    // Applied states
  combo?: ID | null;                   // Parent combo ID
  children?: ID[];                     // Child node IDs (for tree graphs)
}

// Example node data
const nodeData: NodeData = {
  id: 'user-001',
  type: 'circle',
  data: {
    name: 'John Doe',
    department: 'Engineering',
    level: 'Senior'
  },
  style: {
    size: 25,
    fill: '#1890ff',
    labelText: 'John Doe'
  },
  states: ['active'],
  combo: 'team-alpha'
};

interface EdgeData {
  id?: ID;                             // Optional unique identifier
  source: ID;                          // Source node ID
  target: ID;                          // Target node ID
  type?: string;                       // Edge type (defaults to graph.edge.type)
  data?: Record<string, unknown>;      // Custom data properties
  style?: EdgeStyle;                   // Style overrides
  states?: State[];                    // Applied states
}

// Example edge data
const edgeData: EdgeData = {
  id: 'connection-001',
  source: 'user-001',
  target: 'user-002',
  type: 'cubic',
  data: {
    weight: 0.8,
    relationship: 'manager'
  },
  style: {
    stroke: '#52c41a',
    lineWidth: 3,
    labelText: 'Reports to'
  }
};

interface ComboData {
  id: ID;                              // Unique identifier
  type?: string;                       // Combo type (defaults to graph.combo.type)
  data?: Record<string, unknown>;      // Custom data properties
  style?: ComboStyle;                  // Style overrides
  states?: State[];                    // Applied states
  combo?: ID | null;                   // Parent combo ID (for nested combos)
  children?: ID[];                     // Child element IDs
}

// Example combo data
const comboData: ComboData = {
  id: 'team-alpha',
  type: 'rect',
  data: {
    name: 'Alpha Team',
    budget: 500000
  },
  style: {
    fill: '#e6f7ff',
    stroke: '#1890ff',
    labelText: 'Alpha Team'
  },
  children: ['user-001', 'user-002']
};

// Get element positions
const position = graph.getElementPosition('node1');

// Move elements
await graph.translateElementTo('node1', [200, 200]);
await graph.translateElementBy('node1', [50, 50]);

// Batch element positioning
await graph.translateElementTo({
  'node1': [100, 100],
  'node2': [300, 150]
});

// Animated movement
await graph.translateElementTo('node1', [400, 300], true);

// Element visibility management
await graph.setElementVisibility('node1', 'visible');
await graph.setElementVisibility('node1', 'hidden');
await graph.showElement(['node1', 'node2']);
await graph.hideElement('edge1', true); // With animation

// Batch visibility
await graph.setElementVisibility({
  'node1': 'visible',
  'node2': 'hidden'
});

// Check visibility
const visibility = graph.getElementVisibility('node1');

// Z-index management
await graph.setElementZIndex('node1', 10);
await graph.frontElement(['node1', 'node2']); // Bring to front

// Batch z-index
await graph.setElementZIndex({
  'node1': 5,
  'edge1': 1
});

// Get z-index
const zIndex = graph.getElementZIndex('node1');

// Apply states to elements
await graph.setElementState('node1', 'selected');
await graph.setElementState('node1', ['selected', 'hover']);

// Batch state management
await graph.setElementState({
  'node1': 'selected',
  'node2': ['hover', 'active']
});

// Remove states
await graph.setElementState('node1', [], true); // Clear all states

// Get current states
const states = graph.getElementState('node1');

// Label styling properties
const labelStyle = {
  labelText: 'Node Label',
  labelFill: '#000',
  labelFontSize: 12,
  labelFontFamily: 'Arial',
  labelFontWeight: 'normal',
  labelPosition: 'center', // 'top' | 'bottom' | 'left' | 'right' | 'center'
  labelOffsetX: 0,
  labelOffsetY: 0,
  labelMaxWidth: 100,
  labelWordWrap: true,
  labelWordWrapWidth: 80,
  labelBackground: true,
  labelBackgroundFill: '#fff',
  labelBackgroundStroke: '#ccc',
  labelBackgroundRadius: 4,
  labelBackgroundPadding: [2, 4]
};

// Icon styling properties
const iconStyle = {
  iconText: '\ue602',      // Icon font character or text
  iconSrc: 'path/to/icon.png', // Image source (alternative to iconText)
  iconFill: '#1890ff',
  iconFontSize: 16,
  iconFontFamily: 'iconfont',
  iconWidth: 20,           // For image icons
  iconHeight: 20,          // For image icons
  iconOffsetX: 0,
  iconOffsetY: 0
};

// Badge styling properties
const badgeStyle = {
  badgeText: '10',
  badgeFill: '#ff4d4f',
  badgeTextFill: '#fff',
  badgeFontSize: 10,
  badgeFontFamily: 'Arial',
  badgeRadius: 8,
  badgeOffsetX: 10,
  badgeOffsetY: -10,
  badgePadding: [2, 6]
};

// Halo (selection outline) styling
const haloStyle = {
  halo: true,
  haloFill: 'transparent',
  haloStroke: '#1890ff',
  haloStrokeWidth: 4,
  haloStrokeOpacity: 0.6,
  haloRadius: 5 // Additional radius beyond element
};

// Collapse/expand tree nodes
await graph.collapseElement('node1', {
  animate: true,
  duration: 300
});

await graph.expandElement('node1', {
  animate: true,
  duration: 300
});

// Check if element is collapsed
import { isCollapsed } from '@antv/g6';
const collapsed = isCollapsed(nodeData);

// Get element render bounds
const bounds = graph.getElementRenderBounds('node1');
// Returns: { x: number, y: number, width: number, height: number }

// Get element render style (computed styles)
const renderStyle = graph.getElementRenderStyle('node1');

// Get element type
import type { ElementType } from '@antv/g6';
const elementType: ElementType = graph.getElementType('node1'); // 'node' | 'edge' | 'combo'

// Query elements by state
const selectedElements = graph.getElementDataByState('node', 'selected');
const hoveredEdges = graph.getElementDataByState('edge', 'hover');

type ID = string | number;
type State = string;
type Size = number | [number] | [number, number] | [number, number, number];
type Padding = number | [number] | [number, number] | [number, number, number, number];

interface BaseStyleProps {
  visibility?: 'visible' | 'hidden';
  fill?: string;
  stroke?: string;
  lineWidth?: number;
  opacity?: number;
  zIndex?: number;
}

interface NodeStyle extends BaseStyleProps {
  x?: number;
  y?: number;
  z?: number;
  size?: Size;
  // Label properties
  labelText?: string | ((data: NodeData) => string);
  labelFill?: string;
  labelFontSize?: number;
  labelPosition?: 'top' | 'bottom' | 'left' | 'right' | 'center';
  // Icon properties
  iconText?: string;
  iconFill?: string;
  iconFontSize?: number;
  // Badge properties
  badgeText?: string;
  badgeFill?: string;
  // Halo properties
  halo?: boolean;
  haloStroke?: string;
}

interface EdgeStyle extends BaseStyleProps {
  // Arrow properties
  endArrow?: boolean;
  startArrow?: boolean;
  endArrowSize?: number;
  startArrowSize?: number;
  // Label properties
  labelText?: string | ((data: EdgeData) => string);
  labelPosition?: 'start' | 'middle' | 'end';
  labelAutoRotate?: boolean;
  // Loop properties
  loopClockwise?: boolean;
  loopDist?: number;
}

interface ComboStyle extends NodeStyle {
  collapsedSize?: Size;
  padding?: Padding;
  collapsedMarker?: boolean;
}

type ElementDatum = NodeData | EdgeData | ComboData;
type Element = Node | Edge | Combo;