@playcanvas/pcui-graph
Version:
A PCUI plugin for creating node-based graphs
240 lines (239 loc) • 8.87 kB
TypeScript
export default Graph;
/**
* Represents a new Graph.
*/
declare class Graph extends Element {
/**
* Creates a new Graph.
*
* @param {object} schema - The graph schema.
* @param {object} [options] - The graph configuration. Optional.
* @param {object} [options.initialData] - The graph data to initialize the graph with.
* @param {HTMLElement} [options.dom] - If supplied, the graph will be attached to this element.
* @param {object[]} [options.contextMenuItems] - The context menu items to add to the graph.
* @param {boolean} [options.readOnly] - Whether the graph is read only. Optional. Defaults to
* false.
* @param {boolean} [options.passiveUIEvents] - If true, the graph will not update its data and
* view upon user interaction. Instead, these interactions can be handled explicitly by
* listening to fired events. Optional. Defaults to false.
* @param {boolean} [options.incrementNodeNames] - Whether the graph should increment the node
* name when a node with the same name already exists. Optional. Defaults to false.
* @param {boolean} [options.restrictTranslate] - Whether the graph should restrict the
* translate graph operation to the graph area. Optional. Defaults to false.
* @param {boolean} [options.edgeHoverEffect] - Whether the graph should show an edge highlight
* effect when the mouse is hovering over edges. Optional. Defaults to true.
* @param {object} [options.defaultStyles] - Used to override the graph's default styling. Check
* ./constants.js for a full list of style properties.
* @param {object} [options.adjustVertices] - If true, multiple edges connected between two
* nodes will be spaced apart.
*/
constructor(schema: object, options?: {
initialData?: object;
dom?: HTMLElement;
contextMenuItems?: object[];
readOnly?: boolean;
passiveUIEvents?: boolean;
incrementNodeNames?: boolean;
restrictTranslate?: boolean;
edgeHoverEffect?: boolean;
defaultStyles?: object;
adjustVertices?: object;
});
_graphSchema: object;
_graphData: Observer;
_contextMenuItems: object[];
_suppressGraphDataEvents: boolean;
_config: {
readOnly: boolean;
passiveUIEvents: boolean;
incrementNodeNames: boolean;
restrictTranslate: boolean;
edgeHoverEffect: boolean;
includeFonts: any;
adjustVertices: object;
useGlobalPCUI: boolean;
defaultStyles: {
initialScale: number;
initialPosition: {
x: number;
y: number;
};
background: {
color: string;
gridSize: number;
};
node: {
fill: string;
fillSecondary: string;
stroke: string;
strokeSelected: string;
strokeHover: string;
textColor: string;
textColorSecondary: string;
includeIcon: boolean;
icon: string;
iconColor: string;
baseHeight: number;
baseWidth: number;
textAlignMiddle: boolean;
lineHeight: number;
};
edge: {
stroke: string;
strokeSelected: string;
strokeWidth: number;
strokeWidthSelected: number;
targetMarker: boolean;
connectionStyle: string;
};
};
};
/**
* The current graph data. Contains an object with any nodes and edges present in the graph.
* This can be passed into the graph constructor to reload the current graph.
*
* @type {object}
*/
get data(): object;
_buildGraphFromData(): void;
view: GraphView;
_selectedItem: SelectedItem;
_addCanvasContextMenu(): void;
/**
* Select a node in the current graph.
*
* @param {object} node - The node to select
*/
selectNode(node: object): void;
/**
* Select an edge in the current graph.
*
* @param {object} edge - The edge to select
* @param {number} edgeId - The edge id of the edge to select
*/
selectEdge(edge: object, edgeId: number): void;
/**
* Deselect the currently selected item in the graph.
*/
deselectItem(): void;
_isValidEdge(edgeType: any, source: any, target: any): any;
/**
* Add an edge to the graph.
*
* @param {object} edge - The edge to add.
* @param {number} edgeId - The edge id for the new edge.
*/
createEdge(edge: object, edgeId: number): void;
_onEdgeConnected(edgeType: any, from: any, to: any): void;
_createUnconnectedEdgeForNode(node: any, edgeType: any): void;
_onCreateEdge(edgeId: any, edge: any): void;
_onNodeSelected(node: any): void;
suppressNodeSelect: boolean;
_onNodePositionUpdated(nodeId: any, pos: any): void;
_onNodeAttributeUpdated(nodeId: any, attribute: any, value: any): void;
_initializeNodeContextMenuItems(node: any, items: any): any;
/**
* Add a node to the graph.
*
* @param {object} node - The node to add.
*/
createNode(node: object): void;
/**
* Update the position of a node.
*
* @param {number} nodeId - The node to add.
* @param {object} pos - The new position, given as an object containing x and y properties.
*/
updateNodePosition(nodeId: number, pos: object): void;
/**
* Update the value of an attribute of a node.
*
* @param {number} nodeId - The node to update.
* @param {string} attributeName - The name of the attribute to update.
* @param {object} value - The new value for the attribute.
*/
updateNodeAttribute(nodeId: number, attributeName: string, value: object): void;
/**
* Set the error state of a node attribute.
*
* @param {number} nodeId - The node to update.
* @param {string} attributeName - The name of the attribute to update.
* @param {boolean} value - Whether the attribute should be set in the error state.
*/
setNodeAttributeErrorState(nodeId: number, attributeName: string, value: boolean): void;
/**
* Update the type of a node.
*
* @param {number} nodeId - The node to update.
* @param {string} nodeType - The new type for the node.
*/
updateNodeType(nodeId: number, nodeType: string): void;
_deleteNode(nodeId: any): {
node: any;
edges: string[];
edgeData: {};
};
/**
* Delete a node from the graph.
*
* @param {number} nodeId - The node to delete.
*/
deleteNode(nodeId: number): void;
/**
* Delete an edge from the graph.
*
* @param {string} edgeId - The edge to delete.
*/
deleteEdge(edgeId: string): void;
/**
* Set the center of the viewport to the given position.
*
* @param {number} posX - The x position to set the center of the viewport to.
* @param {number} posY - The y position to set the center of the viewport to.
*/
setGraphPosition(posX: number, posY: number): void;
/**
* Get the current center position of the viewport in the graph.
*
* @returns {object} The current center position of the viewport in the graph as an object
* containing x and y.
*/
getGraphPosition(): object;
/**
* Set the scale of the graph.
*
* @param {number} scale - The new scale of the graph.
*/
setGraphScale(scale: number): void;
/**
* Get the current scale of the graph.
*
* @returns {number} The current scale of the graph.
*/
getGraphScale(): number;
/**
* Convert a position in window space to a position in graph space.
*
* @param {object} pos - A position in the window, as an object containing x and y.
* @returns {object} The position in the graph based on the given window position, as an object
* containing x and y.
*/
getWindowToGraphPosition(pos: object): object;
/**
* Add an event listener to the graph.
*
* @param {string} eventName - The name of the event to listen for.
* @param {Function} callback - The callback to call when the event is triggered.
*/
on(eventName: string, callback: Function): void;
_dispatchEvent(action: any, data: any): void;
_registerInternalEventListeners(): void;
}
declare namespace Graph {
export { GRAPH_ACTIONS };
}
import { Element } from '@playcanvas/pcui';
import { Observer } from '@playcanvas/observer';
import GraphView from './graph-view.js';
import SelectedItem from './selected-item.js';
import { GRAPH_ACTIONS } from './constants.js';