691 lines
20 KiB
TypeScript
691 lines
20 KiB
TypeScript
/**
|
|
* @author Martin Karkowski
|
|
* @email m.karkowski@zema.de
|
|
* @create date 2019-04-24 09:31:13
|
|
* @modify date 2020-10-29 17:44:41
|
|
* @desc [description]
|
|
*/
|
|
|
|
import { EventEmitter } from 'events';
|
|
/** Import Undo-Stack */
|
|
import * as SimpleUndo from 'simple-undo';
|
|
import { dynamicSort } from '../../../lib/helpers/arrayMethods';
|
|
import { deepClone, rsetattr } from '../../../lib/helpers/objectMethods';
|
|
import * as vis from '../../visjs/vis';
|
|
import { flattenData } from './helpers/data.handlers';
|
|
import { sortNodes } from './helpers/sort.nodes';
|
|
import { IBaseEdgeOptions } from './interfaces/IBaseEdgeOptions';
|
|
import { IBaseNodeOptions } from './interfaces/IBaseNodeOptions';
|
|
import { IBasicTemplate } from './interfaces/IBasicTemplate';
|
|
import { IClusters } from './interfaces/IClusters';
|
|
import { IEvent } from './interfaces/IEvents';
|
|
import { IBaseGraph, IUndoRedoGraph } from './interfaces/IGraph';
|
|
import { INetwork } from './interfaces/INetwork';
|
|
import { IVisjsOptions } from './interfaces/IVisjsOptions';
|
|
import { stringify, parse } from '../../../lib/helpers/jsonMethods'
|
|
import { generateId } from '../../../lib/helpers/idMethods';
|
|
|
|
|
|
export class BaseGraph<N, E> implements IBaseGraph<N, E> {
|
|
|
|
public visNetwork: any;
|
|
private _data: { nodes: any, edges: any };
|
|
private _emitter: EventEmitter;
|
|
|
|
/**
|
|
* Containing the SVG-Drawing
|
|
*/
|
|
public drawing: any;
|
|
|
|
public get network() {
|
|
return this.visNetwork;
|
|
}
|
|
|
|
public get edges(): Array<IBaseEdgeOptions<E>> {
|
|
return this._data.edges.get();
|
|
}
|
|
|
|
public get nodes(): Array<IBaseNodeOptions<N>> {
|
|
return this._data.nodes.get();
|
|
}
|
|
|
|
public get data() {
|
|
return this._data;
|
|
}
|
|
|
|
public get emitter() {
|
|
return this._emitter;
|
|
}
|
|
|
|
constructor(
|
|
/** The Reference, where the Graph should be rednered in */
|
|
protected _reference: React.RefObject<any>,
|
|
/** The SVG Options. See Options on http://visjs.org/docs/network/ */
|
|
options: IVisjsOptions = {
|
|
edges: { smooth: false },
|
|
physics: {
|
|
enabled: false,
|
|
},
|
|
}
|
|
) {
|
|
/** Create the corresponding Data Sets */
|
|
this._data = {
|
|
nodes: new vis.DataSet(),
|
|
edges: new vis.DataSet()
|
|
};
|
|
|
|
/** If no custom method for adding an edge, is provided => generate one */
|
|
if (options.manipulation === undefined || options.manipulation === false) {
|
|
options.manipulation = {};
|
|
rsetattr(options, 'manipulation.enabled', false);
|
|
}
|
|
|
|
options.autoResize = false;
|
|
|
|
// Element Height = Viewport height - element.offset.top - desired bottom margin
|
|
// options.height = _parent.current
|
|
options.height = (_reference.current.parentElement.clientHeight - 48).toString() + 'px'
|
|
|
|
/** Create the VIS-Network */
|
|
this.visNetwork = new vis.Network(_reference.current, this._data, options);
|
|
|
|
/** Create an extra Emitter */
|
|
this._emitter = new EventEmitter();
|
|
this._emitter.setMaxListeners(Number.MAX_SAFE_INTEGER - 1);
|
|
}
|
|
|
|
public addNode(element: Array<IBaseNodeOptions<N>> | IBaseNodeOptions<N>) {
|
|
/** Add the Node Data. */
|
|
if (Array.isArray(element)) {
|
|
/** Make shure Flattend Data is used. */
|
|
this._data.nodes.add(flattenData(element));
|
|
} else {
|
|
|
|
this._data.nodes.add(element);
|
|
}
|
|
}
|
|
|
|
public loadJSON(data: string, overwrite = true, unsafe = true) {
|
|
/** Read In the JSON File */
|
|
const content = parse(data, unsafe);
|
|
/** Load the Data itself */
|
|
this.loadData(content, overwrite)
|
|
}
|
|
|
|
public getJSON(unsafe = true){
|
|
const content = this.getData();
|
|
return stringify(unsafe);
|
|
}
|
|
|
|
public userAddNode(){
|
|
const _this = this;
|
|
|
|
return new Promise<IBaseNodeOptions<any>>((resolve,reject) => {
|
|
_this.network.addNodeMode();
|
|
_this.once('addNode', resolve);
|
|
_this.once('mode', (mode)=> {
|
|
if (mode !== 'none' && mode !== 'add-node'){
|
|
reject(mode)
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
public userAddEdge(){
|
|
const _this = this;
|
|
|
|
return new Promise<IBaseEdgeOptions<any>>((resolve,reject) => {
|
|
_this.network.addEdgeMode();
|
|
_this.once('addEdge', resolve);
|
|
_this.once('mode', (mode)=> {
|
|
if (mode !== 'none' && mode !== 'add-edge'){
|
|
reject(mode)
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
public disableEditMode(){
|
|
this.network.disableEditMode();
|
|
}
|
|
|
|
public removeNode(id: string | number) {
|
|
try {
|
|
/** Try removing the Node */
|
|
this.visNetwork.body.data
|
|
|
|
this._data.nodes.remove({ id });
|
|
} catch (err) {
|
|
console.error('Removing Node' + err);
|
|
}
|
|
}
|
|
|
|
public updateNode(options: Array<IBaseNodeOptions<N>> | IBaseNodeOptions<N>) {
|
|
try {
|
|
/** Try updateing the Node. */
|
|
this._data.nodes.update(options);
|
|
} catch (err) {
|
|
console.error('Upadting Node' + err);
|
|
}
|
|
}
|
|
|
|
public getNode<T=N>(id) {
|
|
return this._data.nodes.get(id) as IBaseNodeOptions<T>;
|
|
}
|
|
|
|
public getEdge<T=E>(id) {
|
|
return this._data.edges.get(id) as IBaseEdgeOptions<T>;
|
|
}
|
|
|
|
public clearNodes() {
|
|
this._data.nodes.clear();
|
|
}
|
|
|
|
public clearEdges() {
|
|
this._data.edges.clear();
|
|
}
|
|
|
|
public addEdge(values: IBaseEdgeOptions<E> | Array<IBaseEdgeOptions<E>>) {
|
|
/** Add the Node Data. */
|
|
this._data.edges.add(values);
|
|
}
|
|
|
|
public updateEdge(values: IBaseEdgeOptions<E> | Array<IBaseEdgeOptions<E>>) {
|
|
try {
|
|
/** Try to Update the Edge-Data */
|
|
this._data.edges.update(values);
|
|
} catch (err) {
|
|
console.error('Upadting Edge' + err);
|
|
}
|
|
}
|
|
|
|
public removeEdge(id: string | number) {
|
|
try {
|
|
/** Try to remove the Edge */
|
|
this._data.edges.remove({ id });
|
|
} catch (err) {
|
|
console.error('Removing Edge' + err);
|
|
}
|
|
}
|
|
|
|
public clear() {
|
|
/** Clearsout existing Nodes and Edges */
|
|
this.clearNodes();
|
|
this.clearEdges();
|
|
}
|
|
|
|
public destroy() {
|
|
/** Destroys the complete Rendered Graph */
|
|
this.visNetwork.destroy();
|
|
}
|
|
|
|
/** Function to fully fit the Graph */
|
|
public fit(options: {
|
|
nodes?: Array<string>,
|
|
animation?: boolean | {
|
|
duration?: number,
|
|
easingFunction?: String
|
|
}
|
|
} = {
|
|
animation: true
|
|
}) {
|
|
/**
|
|
* Afterwards use this Elements to Perform the
|
|
* Animation and zoom, that all Nodes are Viewable.
|
|
*/
|
|
this.network.fit(options);
|
|
}
|
|
|
|
public hasNode(id: string): boolean {
|
|
return this._data.nodes.get(id) !== null;
|
|
}
|
|
|
|
public on(eventName: IEvent, callback: (...args) => void): () => void {
|
|
|
|
const _self = this;
|
|
|
|
switch (eventName) {
|
|
case 'click':
|
|
/** Make a difference between a Click event and e.g. a select Event. */
|
|
let counter = 0;
|
|
let timer: any = null;
|
|
|
|
const func = (...args) => {
|
|
counter++;
|
|
if (counter === 1) {
|
|
timer = setTimeout(() => {
|
|
callback(...args);
|
|
counter = 0;
|
|
}, 200);
|
|
} else {
|
|
counter = 0;
|
|
clearTimeout(timer);
|
|
}
|
|
};
|
|
|
|
return this.network.subscribe(eventName, func);
|
|
case 'addEdge':
|
|
case 'removeEdge':
|
|
case 'updateEdge':
|
|
this._data.edges.on(eventName.split('Edge')[0], callback);
|
|
return () => {
|
|
_self._data.edges.off(eventName.split('Edge')[0], callback);
|
|
};
|
|
case 'addNode':
|
|
case 'removeNode':
|
|
case 'updateNode':
|
|
this._data.nodes.on(eventName.split('Node')[0], callback);
|
|
return () => {
|
|
_self._data.nodes.off(eventName.split('Node')[0], callback);
|
|
};
|
|
case 'dataUpdate':
|
|
const events = [
|
|
'add',
|
|
'remove',
|
|
'update'
|
|
]
|
|
|
|
for (const type of ['edges', 'nodes']) {
|
|
for (const event of events) {
|
|
this._data[type].on(event, callback);
|
|
}
|
|
}
|
|
|
|
return () => {
|
|
for (const type of ['edges', 'nodes']) {
|
|
for (const event of events) {
|
|
this._data[type].off(event, callback);
|
|
}
|
|
}
|
|
};
|
|
default:
|
|
return this.visNetwork.subscribe(eventName, (...args) => {
|
|
callback(...args);
|
|
});
|
|
}
|
|
}
|
|
|
|
public getClusters() {
|
|
|
|
const clusters: {
|
|
[index: string]: {
|
|
nodes: Array<string>,
|
|
clusters: Array<string>,
|
|
options: IBaseNodeOptions,
|
|
}
|
|
} = {};
|
|
|
|
// Iterate over all Nodes of the Graph.
|
|
// Find their clusters. Based on their order
|
|
// Define an arry containing all array etc.
|
|
for (const node of this.nodes) {
|
|
// Get all Nodes in Cluster
|
|
const res = this.visNetwork.findNode(node.id) as Array<string>;
|
|
// Remove the First-Element
|
|
res.pop()
|
|
|
|
let first = true;
|
|
let lastCluster: string = '';
|
|
|
|
// Iterate over the used Clusters.
|
|
// If its the first cluster, add the node
|
|
// Otherwise add the last cluster.
|
|
for (const cluster of res.reverse()) {
|
|
|
|
// If the Cluster isnt know => create an obect, describing the Cluster.
|
|
if (clusters[cluster] === undefined) {
|
|
|
|
clusters[cluster] = {
|
|
nodes: new Array<string>(),
|
|
clusters: new Array<string>(),
|
|
options: {
|
|
id: cluster
|
|
}
|
|
}
|
|
|
|
// Test if the Cluster has special Ids.
|
|
if (this.visNetwork.clustering.body.nodes[cluster]) {
|
|
clusters[cluster].options = this.visNetwork.clustering.body.nodes[cluster].options;
|
|
clusters[cluster].options.id = cluster
|
|
}
|
|
}
|
|
|
|
// Add the Node the the first Cluster only
|
|
if (first) {
|
|
clusters[cluster].nodes.push(node.id);
|
|
} else {
|
|
clusters[cluster].clusters.push(lastCluster);
|
|
}
|
|
|
|
lastCluster = cluster;
|
|
first = false;
|
|
}
|
|
}
|
|
|
|
// Define the Return type.
|
|
const ret: IClusters = [];
|
|
|
|
// Add all clsuters.
|
|
for (const key of Object.getOwnPropertyNames(clusters)) {
|
|
ret.push(Object.assign(clusters[key], { id: key }));
|
|
}
|
|
|
|
return ret.sort(dynamicSort('clusters.length'));
|
|
}
|
|
|
|
public readinClusters(clusters: Array<{
|
|
nodes: Array<string>,
|
|
clusters: Array<string>,
|
|
id: string,
|
|
options: IBaseNodeOptions,
|
|
}>) {
|
|
|
|
for (const cluster of clusters) {
|
|
// Automatically create a cluster.
|
|
this.network.cluster({
|
|
joinCondition(node: IBaseNodeOptions) {
|
|
return cluster.nodes.indexOf(node.id) !== -1 || cluster.clusters.indexOf(node.id) !== -1
|
|
},
|
|
clusterNodeProperties: cluster.options,
|
|
});
|
|
}
|
|
}
|
|
|
|
public once(eventName: IEvent, callback: (...args) => void): () => void {
|
|
|
|
let func = (...args) => { };
|
|
const _self = this;
|
|
|
|
switch (eventName) {
|
|
case 'click':
|
|
/** Make a difference between a Click event and e.g. a select Event. */
|
|
let counter = 0;
|
|
let timer: any = null;
|
|
|
|
func = (...args) => {
|
|
counter++;
|
|
if (counter === 1) {
|
|
timer = setTimeout(() => {
|
|
callback(...args);
|
|
counter = 0;
|
|
}, 200);
|
|
} else {
|
|
counter = 0;
|
|
clearTimeout(timer);
|
|
}
|
|
};
|
|
|
|
return this.network.once(eventName, func);
|
|
case 'addEdge':
|
|
case 'removeEdge':
|
|
case 'updateEdge':
|
|
func = (...args) => {
|
|
callback(...args);
|
|
_self._data.edges.off(eventName.split('Edge')[0], func);
|
|
}
|
|
|
|
this._data.edges.on(eventName.split('Edge')[0], func);
|
|
break;
|
|
case 'addNode':
|
|
case 'removeNode':
|
|
case 'updateNode':
|
|
func = (...args) => {
|
|
callback(...args);
|
|
_self._data.nodes.off(eventName.split('Node')[0], func);
|
|
}
|
|
|
|
this._data.nodes.on(eventName.split('Node')[0], func);
|
|
break;
|
|
default:
|
|
return this.visNetwork.once(eventName, callback);
|
|
}
|
|
}
|
|
|
|
public useVersionControl = true;
|
|
public version: string = '20200713';
|
|
public name: string;
|
|
public id: string = generateId();
|
|
|
|
public getData(name: string = this.name, id: string = this.id, version: string = this.version): INetwork<N, E> {
|
|
|
|
const position = this.network.getViewPosition();
|
|
const scale = this.network.getScale();
|
|
|
|
return {
|
|
nodes: this.nodes,
|
|
edges: this.edges,
|
|
clusters: this.getClusters(),
|
|
version,
|
|
name,
|
|
id,
|
|
view: {
|
|
position,
|
|
scale
|
|
}
|
|
};
|
|
}
|
|
|
|
public resize(){
|
|
this.network.setSize(undefined, this._reference.current.parentElement.offsetHeight.toString() + 'px');
|
|
this.network.redraw();
|
|
}
|
|
|
|
/**
|
|
* Function to load a Cluster.
|
|
* @param data
|
|
* @param clear
|
|
* @param cluster
|
|
*/
|
|
public loadData(data: INetwork<N, E>,
|
|
clear = true,
|
|
cluster = true) {
|
|
let somethingLoaded = false;
|
|
|
|
if (this.useVersionControl && ((data.version && data.version != this.version) || !data.version)) {
|
|
throw Error('File Version not compatible');
|
|
}
|
|
|
|
if (clear) {
|
|
this.clear();
|
|
}
|
|
|
|
let adaptViewport = false;
|
|
|
|
if (data?.nodes) {
|
|
somethingLoaded = true;
|
|
adaptViewport = true;
|
|
|
|
this.addNode(sortNodes(data.nodes));
|
|
if (data.edges) {
|
|
this.addEdge(data.edges);
|
|
}
|
|
if (cluster && data.clusters) {
|
|
this.readinClusters(data.clusters);
|
|
}
|
|
|
|
// Get the View.
|
|
if (data.view) {
|
|
this.network.moveTo({
|
|
position: data.view.position,
|
|
scale: data.view.scale,
|
|
animation: false
|
|
});
|
|
|
|
adaptViewport = false;
|
|
}
|
|
}
|
|
|
|
if (somethingLoaded && adaptViewport) {
|
|
this.fit({
|
|
animation: false,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
export class UndoRedoGraph<N, E> extends BaseGraph<N, E> implements IUndoRedoGraph<N, E> {
|
|
|
|
/**
|
|
* Element for the Undo / Redo Queue
|
|
*/
|
|
private _stack: SimpleUndo;
|
|
/**
|
|
* Flag to Toggle Loading and disabling
|
|
* Elements
|
|
*/
|
|
public disableUndoRedo = false;
|
|
private _stateCounter = 0;
|
|
private _currentCounter = 0;
|
|
|
|
public undoEnabled = false;
|
|
public redoEnabled = false;
|
|
|
|
constructor(
|
|
/** The Reference, where the Graph should be rednered in */
|
|
reference: React.RefObject<any>,
|
|
/** The SVG Options. See Options on http://visjs.org/docs/network/ */
|
|
options: IVisjsOptions = {
|
|
edges: { smooth: false },
|
|
physics: {
|
|
enabled: false,
|
|
},
|
|
},
|
|
maxStackLength = 100
|
|
) {
|
|
super(reference,options);
|
|
|
|
const _self = this;
|
|
|
|
if (maxStackLength > 0) {
|
|
/** Stack containing the Steps */
|
|
this._stack = new SimpleUndo({
|
|
maxLength: maxStackLength,
|
|
provider: (callback: (data: any) => void) => {
|
|
|
|
callback(_self.getData());
|
|
|
|
// Raise the State Counters
|
|
_self._stateCounter = _self._stack.count();
|
|
_self._currentCounter = _self._stack.count();
|
|
|
|
|
|
// Update the Undo / Redo Flags
|
|
_self._updateFlags();
|
|
},
|
|
});
|
|
// Save the Initial State
|
|
this.save();
|
|
|
|
this.on('dragEnd', (params) => {
|
|
// Make shure the Position is only stored,
|
|
// nodes are dragged and not the View.
|
|
if (!_self.disableUndoRedo && params.nodes.length > 0) {
|
|
_self.network.storePositions();
|
|
}
|
|
});
|
|
|
|
// Link the Emitter with the Updates.
|
|
const events = [
|
|
'addNode',
|
|
'removeNode',
|
|
'updateNode',
|
|
'addEdge',
|
|
'removeEdge',
|
|
'updateEdge'
|
|
];
|
|
|
|
// Function to Update the Stack.
|
|
const _updateStack = () => {
|
|
_self.save();
|
|
};
|
|
|
|
for (const event of events) {
|
|
this.on(event as any, _updateStack);
|
|
}
|
|
}
|
|
}
|
|
|
|
public save() {
|
|
if (!this.disableUndoRedo && this._stack) {
|
|
this._stack.save();
|
|
}
|
|
}
|
|
|
|
public undo() {
|
|
if (this._stack) {
|
|
const _self = this;
|
|
|
|
this._stack.undo((data) => {
|
|
|
|
// Prevent Storing the Content
|
|
_self.disableUndoRedo = true;
|
|
|
|
// Update the Current Counter;
|
|
_self._currentCounter--;
|
|
|
|
// Remove the current Graph.
|
|
_self.clear();
|
|
|
|
// Only if Data are available => Load them
|
|
if (data !== null) {
|
|
// Add the Edges and Nodes
|
|
_self.loadData(data);
|
|
}
|
|
|
|
// Update the Flags
|
|
_self._updateFlags();
|
|
|
|
// Enable storing updates again.
|
|
_self.disableUndoRedo = false;
|
|
});
|
|
}
|
|
}
|
|
|
|
private _updateFlags() {
|
|
this.redoEnabled = (this._currentCounter < this._stateCounter);
|
|
this.undoEnabled = (this._currentCounter > 0);
|
|
}
|
|
|
|
public redo() {
|
|
if (this._stack) {
|
|
const _self = this;
|
|
this._stack.redo((data) => {
|
|
// Only if Data are available => Load them
|
|
if (data != null) {
|
|
|
|
// Prevent Storing the Content during REDO operation
|
|
_self.disableUndoRedo = true;
|
|
|
|
_self.loadData(data);
|
|
|
|
// Update the Flags
|
|
_self._updateFlags();
|
|
|
|
// Enable storing updates again.
|
|
_self.disableUndoRedo = false;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
public resetHistory() {
|
|
if (this._stack) {
|
|
// Define the State
|
|
const state = {
|
|
nodes: this.nodes,
|
|
edges: this.edges,
|
|
};
|
|
|
|
this._stack.initialize(state);
|
|
this._stack.clear();
|
|
|
|
// Raise the State Counters
|
|
this._stateCounter = this._stack.count();
|
|
this._currentCounter = this._stack.count();
|
|
|
|
// Update the Undo / Redo Flags
|
|
this._updateFlags();
|
|
}
|
|
}
|
|
}
|