Core functionality for creating cytoscape instances, managing graph data, viewport control, and graph-level operations.
Creates a new cytoscape instance with configuration options.
/**
* Creates a new cytoscape instance
* @param options - Configuration options for the instance
* @returns Core cytoscape instance
*/
function cytoscape(options?: CytoscapeOptions): Core;
interface CytoscapeOptions {
// Core options
container?: HTMLElement | null;
elements?: ElementDefinition[] | Promise<ElementDefinition[]>;
style?: StylesheetJson | Promise<StylesheetJson>;
layout?: LayoutOptions;
data?: Record<string, any>;
// Viewport options
zoom?: number;
pan?: Position;
minZoom?: number;
maxZoom?: number;
// Interaction options
zoomingEnabled?: boolean;
userZoomingEnabled?: boolean;
panningEnabled?: boolean;
userPanningEnabled?: boolean;
boxSelectionEnabled?: boolean;
selectionType?: "additive" | "single";
touchTapThreshold?: number;
desktopTapThreshold?: number;
autolock?: boolean;
autoungrabify?: boolean;
autounselectify?: boolean;
// Rendering options
pixelRatio?: number | "auto";
motionBlur?: boolean;
motionBlurOpacity?: number;
wheelSensitivity?: number;
textureOnViewport?: boolean;
hideEdgesOnViewport?: boolean;
hideLabelsOnViewport?: boolean;
}Usage Examples:
// Basic instance
const cy = cytoscape({
container: document.getElementById("cy"),
elements: [
{ data: { id: "a" } },
{ data: { id: "b" } },
{ data: { id: "ab", source: "a", target: "b" } }
]
});
// Advanced configuration
const cy = cytoscape({
container: document.getElementById("cy"),
elements: await fetch('/api/graph-data').then(r => r.json()),
style: await fetch('/styles/graph.json').then(r => r.json()),
layout: { name: "cose" },
zoom: 1.5,
pan: { x: 100, y: 50 },
boxSelectionEnabled: true,
selectionType: "additive"
});Register extensions to add functionality to cytoscape.
/**
* Register an extension with cytoscape
* @param extension - Extension object or function
*/
cytoscape.use(extension: any): void;
/**
* Register an extension by type and name
* @param type - Extension type ("core", "collection", "layout")
* @param name - Extension name
* @param extension - Extension implementation
*/
cytoscape(type: string, name: string, extension: any): void;
/**
* Get a registered extension
* @param type - Extension type
* @param name - Extension name
* @returns Extension instance
*/
cytoscape(type: string, name: string): any;Add, remove, and batch manipulate graph elements.
interface Core {
/**
* Add elements to the graph
* @param elements - Elements to add
* @returns Collection of added elements
*/
add(elements: ElementDefinition | ElementDefinition[]): Collection;
/**
* Remove elements from the graph
* @param elements - Elements to remove
* @returns Core instance for chaining
*/
remove(elements: Collection | string): Core;
/**
* Get all elements or filter by selector
* @param selector - Optional selector to filter elements
* @returns Collection of elements
*/
elements(selector?: string): Collection;
/**
* Get all nodes or filter by selector
* @param selector - Optional selector to filter nodes
* @returns Collection of nodes
*/
nodes(selector?: string): Collection;
/**
* Get all edges or filter by selector
* @param selector - Optional selector to filter edges
* @returns Collection of edges
*/
edges(selector?: string): Collection;
/**
* Select elements by selector (alias for elements)
* @param selector - CSS-like selector
* @returns Collection of matching elements
*/
$(selector: string): Collection;
/**
* Get element by ID
* @param id - Element ID
* @returns Collection containing the element
*/
getElementById(id: string): Collection;
/**
* Check if element with ID exists
* @param id - Element ID
* @returns True if element exists
*/
hasElementWithId(id: string): boolean;
}Control zoom, pan, and viewport transformations.
interface Core {
/**
* Get or set zoom level
* @param level - Zoom level to set
* @returns Current zoom level or Core instance
*/
zoom(level?: number): number | Core;
/**
* Get or set pan position
* @param position - Pan position to set
* @returns Current pan position or Core instance
*/
pan(position?: Position): Position | Core;
/**
* Pan by relative offset
* @param offset - Relative pan offset
* @returns Core instance
*/
panBy(offset: Position): Core;
/**
* Fit viewport to elements
* @param elements - Elements to fit to (defaults to all)
* @param padding - Padding around elements
* @returns Core instance
*/
fit(elements?: Collection, padding?: number): Core;
/**
* Center viewport on elements
* @param elements - Elements to center on (defaults to all)
* @returns Core instance
*/
center(elements?: Collection): Core;
/**
* Reset viewport to initial state
* @returns Core instance
*/
reset(): Core;
/**
* Get or set minimum zoom level
* @param zoom - Minimum zoom to set
* @returns Current minimum zoom or Core instance
*/
minZoom(zoom?: number): number | Core;
/**
* Get or set maximum zoom level
* @param zoom - Maximum zoom to set
* @returns Current maximum zoom or Core instance
*/
maxZoom(zoom?: number): number | Core;
}Enable/disable user interactions and control behavior.
interface Core {
/**
* Get or set zooming enabled state
* @param enabled - Whether zooming is enabled
* @returns Current state or Core instance
*/
zoomingEnabled(enabled?: boolean): boolean | Core;
/**
* Get or set user zooming enabled state
* @param enabled - Whether user zooming is enabled
* @returns Current state or Core instance
*/
userZoomingEnabled(enabled?: boolean): boolean | Core;
/**
* Get or set panning enabled state
* @param enabled - Whether panning is enabled
* @returns Current state or Core instance
*/
panningEnabled(enabled?: boolean): boolean | Core;
/**
* Get or set user panning enabled state
* @param enabled - Whether user panning is enabled
* @returns Current state or Core instance
*/
userPanningEnabled(enabled?: boolean): boolean | Core;
/**
* Get or set box selection enabled state
* @param enabled - Whether box selection is enabled
* @returns Current state or Core instance
*/
boxSelectionEnabled(enabled?: boolean): boolean | Core;
}Manage graph-level data and temporary scratch space.
interface Core {
/**
* Get or set graph-level data
* @param key - Data key (optional)
* @param value - Data value (optional)
* @returns Data value or Core instance
*/
data(key?: string, value?: any): any | Core;
/**
* Remove graph-level data
* @param keys - Keys to remove (optional, removes all if not specified)
* @returns Core instance
*/
removeData(keys?: string | string[]): Core;
/**
* Get or set scratch data
* @param namespace - Scratch namespace
* @param key - Data key (optional)
* @param value - Data value (optional)
* @returns Scratch data or Core instance
*/
scratch(namespace: string, key?: string, value?: any): any | Core;
/**
* Remove scratch data
* @param namespace - Scratch namespace
* @param key - Data key (optional, removes all in namespace if not specified)
* @returns Core instance
*/
removeScratch(namespace: string, key?: string): Core;
}Optimize performance with batch operations.
interface Core {
/**
* Start batching operations for performance
* @returns Core instance
*/
startBatch(): Core;
/**
* End batching operations
* @returns Core instance
*/
endBatch(): Core;
/**
* Execute function in batch mode
* @param fn - Function to execute in batch
* @returns Core instance
*/
batch(fn: () => void): Core;
}Mount, unmount, and destroy cytoscape instances.
interface Core {
/**
* Mount instance to DOM container
* @param container - DOM element to mount to
* @returns Core instance
*/
mount(container: HTMLElement): Core;
/**
* Unmount instance from DOM
* @returns Core instance
*/
unmount(): Core;
/**
* Destroy the instance and clean up resources
* @returns Core instance
*/
destroy(): Core;
/**
* Force render/redraw
* @returns Core instance
*/
forceRender(): Core;
/**
* Invalidate size calculations (call after container resize)
* @returns Core instance
*/
invalidateSize(): Core;
}Export graph data and images.
interface Core {
/**
* Export graph as JSON
* @returns Graph data as JSON object
*/
json(): any;
/**
* Export graph as PNG image
* @param options - PNG export options
* @returns Base64 PNG data URL or Promise
*/
png(options?: ExportOptions): string | Promise<Blob>;
/**
* Export graph as JPEG image
* @param options - JPEG export options
* @returns Base64 JPEG data URL or Promise
*/
jpg(options?: ExportOptions): string | Promise<Blob>;
}
interface ExportOptions {
output?: "base64uri" | "base64" | "blob";
bg?: string;
full?: boolean;
scale?: number;
maxWidth?: number;
maxHeight?: number;
}Access cytoscape version and utilities.
/**
* Cytoscape version string
*/
cytoscape.version: string;
/**
* Enable or disable warnings
* @param enabled - Whether warnings are enabled
*/
cytoscape.warnings(enabled: boolean): void;
/**
* Access to Stylesheet class
*/
cytoscape.stylesheet: any;