ngx-cytoscapejs
Version:
Cytoscape.js Angular Wrapper
111 lines (110 loc) • 5.24 kB
TypeScript
import { AfterViewInit, ElementRef, EventEmitter, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
import { Core, CytoscapeOptions } from 'cytoscape';
import { CxAttributeNameMap } from '../interface/cx-attribute-name-map.interface';
import { CxConverter } from '../enum/cx-converter.enum';
import * as i0 from "@angular/core";
/**
* This component handles rendering the Cytoscape.js graph.
*/
export declare class CytoscapejsComponent implements AfterViewInit, OnChanges, OnDestroy {
/**
* Object containing information about a graph. Must conform to [CytoscapeOptions]{@link https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/cytoscape/index.d.ts}. A specified container is ignored.
* Should not be defined, if you are using {@link cxData} to build a graph.
*/
cytoscapeOptions: CytoscapeOptions;
/**
* Responsible for automatically resizing the graph when the browser window changes its size.
* If true, resizing the graph is triggered.
* If false, changes in window size are ignored.
*/
autoFit: boolean;
/**
* Responsible for applying the background color specified in the CX file to the canvas.
* If true, the network's background color will be set to the color specified in the CX.
* If false, the network's background color will be white.
*/
applyCxBackgroundColor: boolean;
/**
* Object containing information about a graph. Must conform to [CX data model]{@link https://home.ndexbio.org/data-model/}.
* Should not be defined, if you are using {@link cytoscapeOptions} to build a graph.
*/
cxData: any;
/**
* List of {@link CxConverter}s you wish to use for conversion of your {@link cxData}.
* Arrange the converters in the order, in which they are to be executed, e.g. the first converter you specify will be tried first.
* The first successful conversion result will be rendered.
*/
cxConverters: CxConverter[];
/**
* Each time a new [Cytoscape.js core]{@link https://js.cytoscape.org/#core} is built, this output is firing an event containing the recent core.
*/
coreChanged: EventEmitter<Core>;
/**
* Each time a new [Cytoscape.js core]{@link https://js.cytoscape.org/#core} is built using [cx2js]{@link https://github.com/cytoscape/cx2js} the
* resulting attributeNameMap object is emitted as well.
*/
cxAttributeNameMapChanged: EventEmitter<CxAttributeNameMap>;
/**
* Reference to the HTMLElement that is used as a [container]{@link https://js.cytoscape.org/#core/initialisation} for the graph.
*
* @internal
*/
cyElementRef: ElementRef;
/**
* Represents a state in the [Angular lifecycle]{@link https://angular.io/guide/lifecycle-hooks} indicating, that the view has been initialized.
*
* @internal
*/
private isViewInitialized;
/**
* [Cytoscape.js core]{@link https://js.cytoscape.org/#core} that is rendered.
*
* @internal
*/
private core;
/**
* Serves as an indicator, when the component has been destroyed.
*
* @internal
*/
private destroy$;
/**
* Service responsible for conversion
*
* @internal
*/
private cxService;
/**
* [Angular lifecycle]{@link https://angular.io/guide/lifecycle-hooks} which is called as soon as the view has been initialized.
* Used to subscribe to any window resize event. Triggers initial rendering.
*/
ngAfterViewInit(): void;
/**
* [Angular lifecycle]{@link https://angular.io/guide/lifecycle-hooks} which is called every time, an input property changes its value.
* Used to update the graph's visualization.
*
* @param {SimpleChanges} changes Object containing all changes
*/
ngOnChanges(changes: SimpleChanges): void;
/**
* [Angular lifecycle]{@link https://angular.io/guide/lifecycle-hooks} which is called as soon as the component is destroyed.
* Used to unsubscribe from window resize events.
*/
ngOnDestroy(): void;
/**
* Based on the user's input, this method decides, if rendering can happen and which input is to be used.
*/
private preRender;
/**
* Renders the graph using [CytoscapeOptions]{@link https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/cytoscape/index.d.ts}.
*
* @param {CytoscapeOptions} options Object containing graph information
*/
private render;
/**
* Resizes and repositions the graph to fit the current window size.
*/
private fit;
static ɵfac: i0.ɵɵFactoryDeclaration<CytoscapejsComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<CytoscapejsComponent, "cytoscapejs", never, { "cytoscapeOptions": { "alias": "cytoscapeOptions"; "required": false; }; "autoFit": { "alias": "autoFit"; "required": false; }; "applyCxBackgroundColor": { "alias": "applyCxBackgroundColor"; "required": false; }; "cxData": { "alias": "cxData"; "required": false; }; "cxConverters": { "alias": "cxConverters"; "required": false; }; }, { "coreChanged": "coreChanged"; "cxAttributeNameMapChanged": "cxAttributeNameMapChanged"; }, never, never, true, never>;
}