153 lines
4.7 KiB
TypeScript
153 lines
4.7 KiB
TypeScript
/**
|
|
* @author Martin Karkowski
|
|
* @email m.karkowski@zema.de
|
|
* @create date 2019-09-17 19:42:00
|
|
* @modify date 2020-03-12 14:16:31
|
|
* @desc [description]
|
|
*/
|
|
|
|
import { generateNetworkAtElement } from '../user-interface/helpers';
|
|
import { IUndoRedoGraph } from '../interfaces/IGraph';
|
|
import { IVisjsOptions } from '../interfaces/IVisjsOptions';
|
|
|
|
/**
|
|
* Function to create a Preview
|
|
* @param graphData The Graph Data
|
|
* @param position The Position
|
|
* @param visjsOptions The Options of the Graph
|
|
* @param options
|
|
*/
|
|
export function openPreview<N, E>(graphData: {nodes: N[], edges: E[]}, position : {x:number, y:number}, visjsOptions: IVisjsOptions = {
|
|
autoResize: false,
|
|
manipulation: {
|
|
enabled: false,
|
|
},
|
|
interaction: {
|
|
dragNodes: true,
|
|
dragView: true,
|
|
hideEdgesOnDrag: false,
|
|
hideNodesOnDrag: false,
|
|
hover: true,
|
|
keyboard: {
|
|
enabled: true
|
|
},
|
|
multiselect: false,
|
|
navigationButtons: false,
|
|
selectable: true,
|
|
zoomView: true
|
|
},
|
|
physics: false
|
|
},
|
|
options: {
|
|
/** Width of the Preview */
|
|
width?: number,
|
|
/** Height of the Preview */
|
|
height?: number,
|
|
/** Background-Color of the Preview */
|
|
backgroundColor?: string,
|
|
/** Reference for the Position */
|
|
mousePosition?: 'top-left' | 'bottom-right'
|
|
} = {}
|
|
) {
|
|
let visjsNetwork = null;
|
|
|
|
let div: HTMLDivElement = null;
|
|
let background: HTMLDivElement = null;
|
|
/** Delete Old Preview */
|
|
if (document.getElementById("previewWindow")){
|
|
div = document.getElementById("previewWindow") as HTMLDivElement;
|
|
document.getElementById("previewWindow").outerHTML = '';
|
|
} else {
|
|
div = document.createElement("div");
|
|
}
|
|
|
|
/** Delete Old Preview */
|
|
if (document.getElementById("previewWindowBackground")){
|
|
div = document.getElementById("previewWindowBackground") as HTMLDivElement;
|
|
document.getElementById("previewWindowBackground").outerHTML = '';
|
|
} else {
|
|
background = document.createElement("div");
|
|
}
|
|
|
|
/** Define the Background */
|
|
background.style.width = '100%';
|
|
background.style.height = '100%';
|
|
background.style.zIndex = (Number.MAX_SAFE_INTEGER-1).toString();
|
|
background.style.backgroundColor = "rgba(0,0,0,0.5)"
|
|
background.style.top = '0px';
|
|
background.style.left = '0px';
|
|
background.style.position = 'fixed';
|
|
background.id = "previewWindowBackground";
|
|
|
|
/** Add the DIV to the Body. */
|
|
document.getElementsByTagName("body")[0].appendChild(background);
|
|
|
|
if (!options.width) {
|
|
options.width = 700;
|
|
}
|
|
if (!options.height) {
|
|
options.height = 400;
|
|
}
|
|
if (!options.mousePosition) {
|
|
options.mousePosition = 'bottom-right';
|
|
}
|
|
|
|
const xOffset = options.mousePosition === 'bottom-right' ? 0 - options.width : 0;
|
|
const yOffset = options.mousePosition === 'bottom-right' ? 0 - options.height : 0;
|
|
|
|
// Create new div on mouse position
|
|
div.style.width = options.width.toString() + 'px';
|
|
div.style.height = options.height.toString() + 'px';
|
|
div.style.backgroundColor = options.backgroundColor || "white";
|
|
div.style.borderWidth = "5px";
|
|
div.style.borderColor = "grey";
|
|
div.style.borderRadius = "10px";
|
|
div.style.zIndex = Number.MAX_SAFE_INTEGER.toString();
|
|
div.id = "previewWindow";
|
|
|
|
|
|
div.style.position = "absolute";
|
|
/** Position the DIV -> TODO */
|
|
div.style.left = (position.x + xOffset).toString() + "px";
|
|
div.style.top = (position.y + yOffset).toString() + "px";
|
|
|
|
/** Add the DIV to the Body. */
|
|
document.getElementsByTagName("body")[0].appendChild(div);
|
|
|
|
// Show clustered Elements in div
|
|
try {
|
|
/** Dont use the Stack. */
|
|
visjsNetwork = generateNetworkAtElement(document.getElementById("previewWindow"), visjsOptions, 0);
|
|
visjsNetwork.network.clear();
|
|
/** Load the Data */
|
|
(visjsNetwork.network as IUndoRedoGraph<N,E>).loadData(graphData);
|
|
/** Fit the Graph */
|
|
(visjsNetwork.network as IUndoRedoGraph<N,E>).network.fit({ animation: false });
|
|
} catch {
|
|
|
|
}
|
|
|
|
const close = () => {
|
|
|
|
if (document.getElementById("previewWindow") != undefined) {
|
|
document.getElementById("previewWindow").outerHTML = "";
|
|
}
|
|
|
|
if (document.getElementById("previewWindowBackground") != undefined) {
|
|
document.getElementById("previewWindowBackground").outerHTML = "";
|
|
}
|
|
|
|
if (visjsNetwork) {
|
|
(visjsNetwork.network as IUndoRedoGraph<N,E>).destroy();
|
|
visjsNetwork = null;
|
|
}
|
|
}
|
|
|
|
|
|
background.onclick = close;
|
|
|
|
return {
|
|
network: visjsNetwork.network,
|
|
close
|
|
}
|
|
} |