or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

geometry.md graph.md index.md model.md plugins.md registry.md shapes.md utilities.md view-system.md

tile.json

Registry System

Registration and management system for all X6 extensions including shapes, connectors, routers, tools, and other customizable components. The registry system provides a unified way to register, retrieve, and manage all extensible parts of X6.

Capabilities

Base Registry Class

Generic registration system used by all X6 component registries.

/**
 * Generic registry class for managing registered entities
 * @template T - Type of entities being registered
 */
class Registry<T> {
  /**
   * Register an entity with a name
   * @param name - Unique name for the entity
   * @param entity - Entity to register
   * @param force - Force overwrite existing registration
   * @returns Registered entity
   */
  register(name: string, entity: T, force?: boolean): T;
  
  /**
   * Unregister an entity by name
   * @param name - Name of entity to remove
   * @returns Unregistered entity or null
   */
  unregister(name: string): T | null;
  
  /**
   * Get registered entity by name
   * @param name - Name of entity to retrieve
   * @returns Registered entity or null
   */
  get(name: string): T | null;
  
  /**
   * Check if entity is registered
   * @param name - Name to check
   * @returns True if entity exists
   */
  exist(name: string): boolean;
  
  /**
   * Get all registered names
   * @returns Array of registered names
   */
  keys(): string[];
  
  /**
   * Get all registered entities
   * @returns Array of registered entities
   */
  values(): T[];
  
  /**
   * Clear all registrations
   */
  clear(): void;
  
  /**
   * Get registry entries as key-value pairs
   * @returns Array of [name, entity] pairs
   */
  entries(): [string, T][];
}

Attribute Registry

Registry for custom SVG/HTML attributes used in cell styling.

/**
 * Registry for custom cell attributes
 */
const attrRegistry: Registry<AttrDefinition>;

interface AttrDefinition {
  /** Attribute name */
  name: string;
  
  /** Attribute processor function */
  set?: (this: CellView, value: any, attr: any, elem: Element, attrs: any) => void;
  
  /** Attribute getter function */
  get?: (this: CellView, elem: Element) => any;
  
  /** Attribute qualifier function */
  qualify?: (this: CellView, value: any, attr: any, elem: Element) => boolean;
  
  /** Default attribute value */
  default?: any;
}

// Pre-registered attributes
interface BuiltInAttrs {
  // Text attributes
  'text': AttrDefinition;
  'textWrap': AttrDefinition;
  'textPath': AttrDefinition;
  'lineHeight': AttrDefinition;
  
  // Transform attributes
  'transform': AttrDefinition;
  'matrix': AttrDefinition;
  
  // Connection attributes
  'connection': AttrDefinition;
  'atConnectionLength': AttrDefinition;
  'atConnectionRatio': AttrDefinition;
  'atConnectionLengthKeepGradient': AttrDefinition;
  'atConnectionRatioKeepGradient': AttrDefinition;
  
  // Reference attributes
  'ref': AttrDefinition;
  'refX': AttrDefinition;
  'refY': AttrDefinition;
  'refWidth': AttrDefinition;
  'refHeight': AttrDefinition;
  'refRx': AttrDefinition;
  'refRy': AttrDefinition;
  'refCx': AttrDefinition;
  'refCy': AttrDefinition;
  'refR': AttrDefinition;
  'refD': AttrDefinition;
  'refDx': AttrDefinition;
  'refDy': AttrDefinition;
  'refX2': AttrDefinition;
  'refY2': AttrDefinition;
  'refPoints': AttrDefinition;
  
  // Event attributes
  'event': AttrDefinition;
  'magnet': AttrDefinition;
  'port': AttrDefinition;
  
  // Style attributes
  'style': AttrDefinition;
  'class': AttrDefinition;
  'html': AttrDefinition;
  'title': AttrDefinition;
}

Usage Examples:

import { attrRegistry } from "@antv/x6";

// Register custom attribute
attrRegistry.register('customFill', {
  set(value, { node }) {
    const color = typeof value === 'string' ? value : `rgb(${value.r}, ${value.g}, ${value.b})`;
    this.attr('body/fill', color);
  }
});

// Use custom attribute
const node = graph.addNode({
  attrs: {
    body: {
      customFill: { r: 255, g: 100, b: 100 }
    }
  }
});

Background Registry

Registry for graph background patterns and styles.

/**
 * Registry for background patterns
 */
const backgroundRegistry: Registry<BackgroundDefinition>;

interface BackgroundDefinition {
  /** Background processor function */
  set: (this: Graph, options: any) => void;
  
  /** Background cleanup function */
  clear?: (this: Graph) => void;
  
  /** Default options */
  defaults?: any;
}

// Built-in backgrounds
interface BuiltInBackgrounds {
  'image': BackgroundDefinition;
  'color': BackgroundDefinition;
}

Connection Point Registry

Registry for algorithms determining where edges connect to nodes.

/**
 * Registry for connection point algorithms
 */
const connectionPointRegistry: Registry<ConnectionPointDefinition>;

type ConnectionPointDefinition = (
  line: Line,
  view: CellView,
  magnet: Element,
  options: any
) => Point;

// Built-in connection points
interface BuiltInConnectionPoints {
  'boundary': ConnectionPointDefinition;
  'bbox': ConnectionPointDefinition;
  'rect': ConnectionPointDefinition;
  'anchor': ConnectionPointDefinition;
}

Connector Registry

Registry for edge path generation algorithms.

/**
 * Registry for edge connector algorithms
 */
const connectorRegistry: Registry<ConnectorDefinition>;

type ConnectorDefinition = (
  sourcePoint: Point,
  targetPoint: Point,
  vertices: Point[],
  args: any,
  view: EdgeView
) => Path | string;

// Built-in connectors
interface BuiltInConnectors {
  'normal': ConnectorDefinition;
  'straight': ConnectorDefinition;
  'rounded': ConnectorDefinition;
  'smooth': ConnectorDefinition;
  'jumpover': ConnectorDefinition;
}

Usage Examples:

import { connectorRegistry } from "@antv/x6";

// Register custom connector
connectorRegistry.register('zigzag', (sourcePoint, targetPoint, vertices, args) => {
  const { horizontal = true } = args;
  const midPoint = horizontal 
    ? { x: sourcePoint.x, y: targetPoint.y }
    : { x: targetPoint.x, y: sourcePoint.y };
  
  return `M ${sourcePoint.x} ${sourcePoint.y} L ${midPoint.x} ${midPoint.y} L ${targetPoint.x} ${targetPoint.y}`;
});

// Use custom connector
const edge = graph.addEdge({
  source: node1,
  target: node2,
  connector: {
    name: 'zigzag',
    args: { horizontal: false }
  }
});

Router Registry

Registry for edge routing algorithms that determine edge paths.

/**
 * Registry for edge routing algorithms
 */
const routerRegistry: Registry<RouterDefinition>;

type RouterDefinition = (
  vertices: Point[],
  args: any,
  view: EdgeView
) => Point[];

// Built-in routers
interface BuiltInRouters {
  'normal': RouterDefinition;
  'orthogonal': RouterDefinition;
  'manhattan': RouterDefinition;
  'metro': RouterDefinition;
  'oneSide': RouterDefinition;
}

Usage Examples:

import { routerRegistry } from "@antv/x6";

// Register custom router
routerRegistry.register('diagonal', (vertices, args, view) => {
  const source = view.getSourcePoint();
  const target = view.getTargetPoint();
  
  // Create diagonal path with single midpoint
  const midPoint = {
    x: (source.x + target.x) / 2,
    y: (source.y + target.y) / 2
  };
  
  return [midPoint];
});

// Use custom router
const edge = graph.addEdge({
  router: 'diagonal'
});

Anchor Registry

Registry for node and edge anchor point algorithms.

/**
 * Registry for node anchor point algorithms
 */
const nodeAnchorRegistry: Registry<NodeAnchorDefinition>;

/**
 * Registry for edge anchor point algorithms
 */
const edgeAnchorRegistry: Registry<EdgeAnchorDefinition>;

type NodeAnchorDefinition = (
  view: NodeView,
  magnet: Element,
  reference: Point,
  options: any
) => Point;

type EdgeAnchorDefinition = (
  view: EdgeView,
  magnet: Element,
  reference: Point,
  options: any
) => Point;

// Built-in node anchors
interface BuiltInNodeAnchors {
  'center': NodeAnchorDefinition;
  'top': NodeAnchorDefinition;
  'right': NodeAnchorDefinition;
  'bottom': NodeAnchorDefinition;
  'left': NodeAnchorDefinition;
  'topLeft': NodeAnchorDefinition;
  'topRight': NodeAnchorDefinition;
  'bottomLeft': NodeAnchorDefinition;
  'bottomRight': NodeAnchorDefinition;
  'bbox': NodeAnchorDefinition;
  'nodeCenter': NodeAnchorDefinition;
}

// Built-in edge anchors
interface BuiltInEdgeAnchors {
  'source': EdgeAnchorDefinition;
  'target': EdgeAnchorDefinition;
  'connectionRatio': EdgeAnchorDefinition;
  'connectionLength': EdgeAnchorDefinition;
  'connectionPerpendicular': EdgeAnchorDefinition;
  'connectionClosest': EdgeAnchorDefinition;
}

Filter Registry

Registry for SVG filter effects applied to cells.

/**
 * Registry for SVG filter effects
 */
const filterRegistry: Registry<FilterDefinition>;

interface FilterDefinition {
  /** Filter markup generation */
  markup?: Markup | ((args: any) => Markup);
  
  /** Filter arguments */
  args?: any;
  
  /** Filter processor function */
  set?: (this: CellView, args: any) => void;
}

// Built-in filters
interface BuiltInFilters {
  'dropShadow': FilterDefinition;
  'blur': FilterDefinition;
  'glow': FilterDefinition;
  'sepia': FilterDefinition;
  'grayscale': FilterDefinition;
  'invert': FilterDefinition;
  'brightness': FilterDefinition;
  'contrast': FilterDefinition;
  'hueRotate': FilterDefinition;
  'saturate': FilterDefinition;
}

Grid Registry

Registry for graph grid patterns and configurations.

/**
 * Registry for grid patterns
 */
const gridRegistry: Registry<GridDefinition>;

interface GridDefinition {
  /** Grid pattern markup */
  markup: Markup | ((options: any) => Markup);
  
  /** Grid update function */
  update?: (this: Graph, elem: Element, options: any) => void;
  
  /** Default options */
  defaults?: any;
}

// Built-in grids
interface BuiltInGrids {
  'dot': GridDefinition;
  'fixedDot': GridDefinition;
  'mesh': GridDefinition;
  'doubleMesh': GridDefinition;
}

Highlighter Registry

Registry for cell highlighting effects and animations.

/**
 * Registry for highlighting effects
 */
const highlighterRegistry: Registry<HighlighterDefinition>;

interface HighlighterDefinition {
  /** Highlight function */
  highlight: (this: CellView, elem: Element, options: any) => void;
  
  /** Unhighlight function */
  unhighlight: (this: CellView, elem: Element, options: any) => void;
  
  /** Default options */
  defaults?: any;
}

// Built-in highlighters
interface BuiltInHighlighters {
  'stroke': HighlighterDefinition;
  'className': HighlighterDefinition;
  'opacity': HighlighterDefinition; 
  'mask': HighlighterDefinition;
}

Marker Registry

Registry for SVG markers used on edges (arrow heads, etc.).

/**
 * Registry for SVG markers
 */
const markerRegistry: Registry<MarkerDefinition>;

interface MarkerDefinition {
  /** Marker markup */
  markup: Markup | ((options: any) => Markup);
  
  /** Default attributes */
  attrs?: CellAttrs;
  
  /** Default options */
  defaults?: any;
}

// Built-in markers
interface BuiltInMarkers {
  'block': MarkerDefinition;
  'classic': MarkerDefinition;
  'diamond': MarkerDefinition;
  'cross': MarkerDefinition;
  'async': MarkerDefinition;
  'openAsync': MarkerDefinition;
  'oval': MarkerDefinition;
  'circle': MarkerDefinition;
  'circlePlus': MarkerDefinition;
  'ellipse': MarkerDefinition;
}

Port Layout Registry

Registry for algorithms positioning ports on nodes.

/**
 * Registry for port layout algorithms
 */
const portLayoutRegistry: Registry<PortLayoutDefinition>;

/**
 * Registry for port label layout algorithms
 */
const portLabelLayoutRegistry: Registry<PortLabelLayoutDefinition>;

type PortLayoutDefinition = (
  portsPositionArgs: PortPositionArgs[],
  elemBBox: Rectangle,
  groupOptions: any
) => PortPositionResult[];

type PortLabelLayoutDefinition = (
  portPosition: PortPositionResult,
  elemBBox: Rectangle,
  labelOptions: any
) => PortLabelPositionResult;

interface PortPositionArgs {
  id: string;
  group: string;
  args: any;
}

interface PortPositionResult {
  portId: string;
  position: Point;
  angle: number;
  attrs: CellAttrs;
}

interface PortLabelPositionResult {
  position: Point;
  angle: number;
  attrs: CellAttrs;
}

// Built-in port layouts
interface BuiltInPortLayouts {
  'left': PortLayoutDefinition;
  'right': PortLayoutDefinition;
  'top': PortLayoutDefinition;
  'bottom': PortLayoutDefinition;
  'line': PortLayoutDefinition;
  'absolute': PortLayoutDefinition;
  'ellipse': PortLayoutDefinition;
  'ellipseSpread': PortLayoutDefinition;
}

// Built-in port label layouts
interface BuiltInPortLabelLayouts {
  'side': PortLabelLayoutDefinition;
  'inside': PortLabelLayoutDefinition;
  'outside': PortLabelLayoutDefinition;
  'radial': PortLabelLayoutDefinition;
  'radialOriented': PortLabelLayoutDefinition;
}

Tool Registry

Registry for interactive tools attached to nodes and edges.

/**
 * Registry for node tools
 */
const nodeToolRegistry: Registry<NodeToolDefinition>;

/**
 * Registry for edge tools
 */
const edgeToolRegistry: Registry<EdgeToolDefinition>;

interface NodeToolDefinition {
  /** Tool constructor */
  new (options?: any): NodeTool;
}

interface EdgeToolDefinition {
  /** Tool constructor */
  new (options?: any): EdgeTool;
}

interface NodeTool {
  name: string;
  view: NodeView;
  options: any;
  render(): this;
  update(): this;
  remove(): this;
  show(): this;
  hide(): this;
  focus(): this;
  blur(): this;
}

interface EdgeTool {
  name: string;
  view: EdgeView;
  options: any;
  render(): this;
  update(): this;
  remove(): this;
  show(): this;
  hide(): this;
  focus(): this;
  blur(): this;
}

// Built-in node tools
interface BuiltInNodeTools {
  'button': NodeToolDefinition;
  'boundary': NodeToolDefinition;
}

// Built-in edge tools  
interface BuiltInEdgeTools {
  'vertices': EdgeToolDefinition;
  'segments': EdgeToolDefinition;
  'boundary': EdgeToolDefinition;
  'button': EdgeToolDefinition;
  'sourceArrowhead': EdgeToolDefinition;
  'targetArrowhead': EdgeToolDefinition;
}

Registration Examples

import { 
  attrRegistry, 
  connectorRegistry, 
  routerRegistry,
  markerRegistry,
  highlighterRegistry 
} from "@antv/x6";

// Register custom attribute
attrRegistry.register('gradientFill', {
  set(value, { cell }) {
    if (typeof value === 'object') {
      const gradient = `linear-gradient(${value.angle || 0}deg, ${value.colors.join(', ')})`;
      this.attr('body/fill', gradient);
    }
  }
});

// Register custom connector
connectorRegistry.register('curved', (source, target, vertices, args) => {
  const { curvature = 0.2 } = args;
  const dx = target.x - source.x;
  const dy = target.y - source.y;
  const controlX = source.x + dx * curvature;
  const controlY = source.y + dy * curvature;
  
  return `M ${source.x} ${source.y} Q ${controlX} ${controlY} ${target.x} ${target.y}`;
});

// Register custom marker
markerRegistry.register('arrow', {
  markup: {
    tagName: 'path',
    attributes: {
      d: 'M 0 -5 L 10 0 L 0 5 Z'
    }
  },
  attrs: {
    fill: 'context-stroke',
    stroke: 'none'
  }
});

// Register custom highlighter
highlighterRegistry.register('pulse', {
  highlight(elem, options) {
    const { color = 'red', duration = 1000 } = options;
    elem.style.outline = `2px solid ${color}`;
    elem.style.animation = `pulse ${duration}ms infinite`;
  },
  
  unhighlight(elem) {
    elem.style.outline = '';
    elem.style.animation = '';
  }
});

// Use registered components
const node = graph.addNode({
  attrs: {
    body: {
      gradientFill: {
        angle: 45,
        colors: ['#ff6b6b', '#4ecdc4']
      }
    }
  }
});

const edge = graph.addEdge({
  connector: {
    name: 'curved',
    args: { curvature: 0.3 }
  },
  attrs: {
    line: {
      targetMarker: 'arrow'
    }
  }
});

node.highlight({ highlighter: 'pulse', color: 'blue' });

Types

// Base registry types
interface Registry<T> {
  register(name: string, entity: T, force?: boolean): T;
  unregister(name: string): T | null;
  get(name: string): T | null;
  exist(name: string): boolean;
  keys(): string[];
  values(): T[];
  clear(): void;
  entries(): [string, T][];
}

// Geometry types for registry functions
interface Point {
  x: number;
  y: number;
}

interface Rectangle {
  x: number;
  y: number;
  width: number;
  height: number;
}

interface Line {
  start: Point;
  end: Point;
}

interface Path {
  serialize(): string;
  bbox(): Rectangle;
  length(): number;
  pointAt(t: number): Point;
  tangentAt(t: number): Point;
}

// Markup types
type Markup = 
  | string 
  | Markup.JSONMarkup 
  | (string | Markup.JSONMarkup)[];

namespace Markup {
  interface JSONMarkup {
    tagName: string;
    selector?: string;
    attributes?: { [key: string]: any };
    children?: (string | JSONMarkup)[];
  }
}

// Attribute types
interface CellAttrs {
  [selector: string]: {
    [attrName: string]: any;
  };
}

// Utility types
type KeyValue = { [key: string]: any };

Version

Tile

Files

registry.md.css-3qkkll{font-size:var(--chakra-font-sizes-sm);font-weight:var(--chakra-font-weights-normal);color:var(--chakra-colors-gray-300);}docs/

Registry System

Capabilities

Base Registry Class

Attribute Registry

Background Registry

Connection Point Registry

Connector Registry

Router Registry

Anchor Registry

Filter Registry

Grid Registry

Highlighter Registry

Marker Registry

Port Layout Registry

Tool Registry

Registration Examples

Types

registry.mddocs/