89 lines
3.1 KiB
TypeScript
89 lines
3.1 KiB
TypeScript
|
/**
|
||
|
|
* @author Martin Karkowski
|
||
|
|
* @email m.karkowski@zema.de
|
||
|
|
* @create date 2020-04-09 09:22:22
|
||
|
|
* @modify date 2020-04-09 09:22:22
|
||
|
|
* @desc [description]
|
||
|
|
*/
|
||
|
|
|
||
|
|
import { openPreview } from './openPreview';
|
||
|
|
import { getSubElements } from '../helpers/data.handlers';
|
||
|
|
import { IGraphToolComponent } from '../interfaces/IGraphTool';
|
||
|
|
import { IBaseNodeOptions } from '../interfaces/IBaseNodeOptions';
|
||
|
|
import { IBaseEdgeOptions } from '../interfaces/IBaseEdgeOptions';
|
||
|
|
import { IMinProvidedDataSet } from '../../gui-components-basic-layout/types/interfaces';
|
||
|
|
|
||
|
|
|
||
|
|
export function enableClusterPreview<N extends IBaseNodeOptions, E extends IBaseEdgeOptions, D extends IMinProvidedDataSet>(component: IGraphToolComponent<N, E, D>, DELAY = 1000) {
|
||
|
|
let ret = null;
|
||
|
|
let nodeID = null;
|
||
|
|
let timer = null;
|
||
|
|
|
||
|
|
let lastContextMenuOpened: number = 0;
|
||
|
|
|
||
|
|
// component.network.on('')
|
||
|
|
component.network.network.on('oncontext', (params) => {
|
||
|
|
// Make shure the Context-Menu is only Opened, if
|
||
|
|
// The event isnt prevented
|
||
|
|
if (params.event.prevent) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
lastContextMenuOpened = Date.now();
|
||
|
|
})
|
||
|
|
|
||
|
|
// Subscribe to a Node Hover. If hover wait the DELAY and then
|
||
|
|
// Openup a preview, if the Node hasnt been blured.
|
||
|
|
component.network.network.on('hoverNode', (params) => {
|
||
|
|
nodeID = params.node;
|
||
|
|
|
||
|
|
if (component.network.network.isCluster(nodeID)) {
|
||
|
|
|
||
|
|
timer = setTimeout(() => {
|
||
|
|
|
||
|
|
const now = Date.now();
|
||
|
|
|
||
|
|
if (!component.network.network.isDragged(nodeID) && (now-lastContextMenuOpened) > DELAY) {
|
||
|
|
|
||
|
|
// Get Nodes in Cluster
|
||
|
|
const nodes = component.network.network.getNodesInCluster(nodeID);
|
||
|
|
const edges = new Set<any>();
|
||
|
|
|
||
|
|
|
||
|
|
// Add All Edges, which are contained in the Cluster
|
||
|
|
for (const node of nodes) {
|
||
|
|
component.network.network.getConnectedEdges(node).map(id => {
|
||
|
|
edges.add(id)
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Create Preview
|
||
|
|
ret = openPreview({
|
||
|
|
nodes: nodes.map(nodeID => component.network.data.nodes.get(nodeID)),
|
||
|
|
edges: Array.from(edges).map(edgeID => component.network.data.edges.get(edgeID)),
|
||
|
|
}, component.layout.currentMousePosition, component.visjsOptions, {
|
||
|
|
mousePosition: 'top-left'
|
||
|
|
})
|
||
|
|
|
||
|
|
ret.network.on('doubleClick', (event) => {
|
||
|
|
// Open up the Settings Tab
|
||
|
|
component.network.network.selectNodes(event.nodes)
|
||
|
|
const selection = getSubElements(component.network, false);
|
||
|
|
component.updateNode(selection);
|
||
|
|
ret.close();
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
}, DELAY);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Clear out the Timer.
|
||
|
|
component.network.network.on('blurNode', (params) => {
|
||
|
|
if (timer){
|
||
|
|
clearTimeout(timer)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|