2020-10-25 20:14:51 +00:00
/ * *
* @author Martin Karkowski
* @email m . karkowski @zema . de
* @create date 2019 - 04 - 29 11 :30 : 22
* @modify date 2020 - 07 - 22 21 :57 : 09
* @desc [ description ]
* /
import { generateGraphOptions } from './default.graph-options' ;
import { clusterSelected } from '../addons/cluster.selected' ;
import { IVisjsOptions } from '../interfaces/IVisjsOptions' ;
import { ICallbackData } from '../interfaces/IGraphTool' ;
2020-10-27 19:22:41 +00:00
import { IToolbar } from '../../layout/toolbar'
2020-10-25 20:14:51 +00:00
declare const $ : any ;
declare const w2prompt : any ;
declare const w2popup : any ;
declare const jsPDF : any ;
declare const JSONEditor : any ;
/ * *
* Function to extract the Default Toolbar Menu
* /
2020-10-27 19:22:41 +00:00
export function defaultToolbar < N , E , D extends ICallbackData < N , E > > ( graphOptions : IVisjsOptions = generateGraphOptions ( ) , additionalOptions : { [ index : string ] : any } = { } ) {
2020-10-25 20:14:51 +00:00
/ * *
* Function to Determine the Graph - Layout , based on the Hierarchical Layout
* /
const getCurrentLayout = ( ) = > {
let initalLayout = 'normal' ;
2020-10-27 19:22:41 +00:00
if ( rgettattr ( graphOptions , 'layout.hierarchical' , false ) === true || rgetattr ( graphOptions , 'layout.hierarchical.enabled' , false ) === true ) {
2020-10-25 20:14:51 +00:00
initalLayout = 'h_' + ( rgetattr ( graphOptions , 'layout.hierarchical.direction' , 'ud' ) as string ) . toLowerCase ( )
}
return initalLayout ;
}
2020-10-27 19:22:41 +00:00
const toolbar : IToolbar < D > = {
items : [
{
type : 'menu' ,
id : 'fileMenu' ,
items : [
{
type : 'action' ,
label : 'New File' ,
onClick : ( data ) = > {
/** Clearout the Graph and Delete the History */
data . network . clear ( ) ;
data . network . resetHistory ( ) ;
}
} ,
{
type : 'divider' ,
} ,
{
type : 'action' ,
label : 'Load File' ,
onClick : ( data ) = > {
// Todo
}
} ,
{
type : 'action' ,
label : 'Import File' ,
onClick : ( data ) = > {
}
} ,
{
type : 'action' ,
label : 'Save File' ,
onClick : ( data ) = > {
// Todo
}
} ,
{
type : 'action' ,
label : 'print' ,
onClick : ( data ) = > {
/** Function, which should render the CANVAS as PDF */
/** Therefore extract the real Canvas-Object */
const canvas = data . network . network . body . container . getElementsByTagName ( 'canvas' ) [ 0 ] ;
const imgData = canvas . toDataURL ( 'image/jpeg' , 1.0 ) ;
const pdf = new jsPDF ( ) ;
pdf . addImage ( imgData , 'JPEG' , 0 , 0 ) ;
pdf . save ( 'download.pdf' ) ;
}
}
] ,
label : 'File'
} ,
{
type : 'menu' ,
id : 'editMenu' ,
label : 'edit' ,
items : [
{
type : 'action' ,
label : 'Undo' ,
onClick : ( data ) = > {
/** Undo the Last Action if Possible */
data . network . undo ( ) ;
}
} ,
{
type : 'action' ,
label : 'Redo' ,
icon : 'fa fa-arrow-right' ,
onClick : ( data ) = > {
/** Redo the Last Action if Possible */
data . network . redo ( ) ;
}
} ,
{
type : 'divider'
} ,
{
type : 'action' ,
label : 'add node' ,
tooltip : 'Add a new Node Element in the Center of the current View' ,
icon : 'fa fa-plus-square' ,
onClick : ( data ) = > {
/ * *
* Add a new Node in the Center of the Screen .
* Therefore extract the Center - Position of the
* Graph and call the addNode Function .
*
* This will result in opening up the corresponding
* Editor .
* /
// if (( data.component.template as ITemplate<N,E>).nodes && (data.component.template as ITemplate<N,E>).nodes.length > 0){
// const pos = data.network.network.getViewPosition();
// data.component.addNode(pos);
// } else {
// data.network.showMessage('info', 'No Template Selected!', 'Please select a template for a Node in the Sidebar!', 5000);
// }
}
} ,
{
type : 'action' ,
label : 'add edge' ,
tooltip : 'Add a new Node Element' ,
icon : 'fa fa-arrow-right' ,
onClick : ( data ) = > {
/ * *
* Set the graph in the Add - Edge Mode
* /
// if ((data.eid as ITemplate<N,E>).nodes && (data.component.template as ITemplate<N,E>).nodes.length === 0 && (data.component.template as ITemplate<N,E>).edges.length === 1){
// data.network.network.addEdgeMode();
// } else {
// data.network.showMessage('info', 'No Template Selected!', 'Please select a template for an Edge in the Sidebar!', 5000);
// }
}
} ,
{
type : 'divider' ,
} ,
{
type : 'action' ,
label : 'export to clipboard' ,
tooltip : 'Copy the selected elements to the Clipboard' ,
icon : 'fa fa-clone' ,
onClick : ( data ) = > {
// writeToClipboard(data.component.genCopyData());
}
} ,
{
type : 'action' ,
label : 'import from clipboard' ,
tooltip : 'Imports elements from the Clipboard. They can be pasted by pressing "ctrl+v" later on.' ,
icon : 'fa fa-clone' ,
onClick : ( data ) = > {
data . component . pasteFromClipboard ( ) ;
}
} ,
{
type : 'action' ,
label : 'upload project-file' ,
tooltip : 'Opens ' ,
icon : 'fa fa-clone' ,
onClick : ( data ) = > {
// Iterate over the selected
data . component . disableHotkeys ( ) ;
w2prompt ( {
label : 'name' ,
value : 'default' ,
attrs : 'style="width: 200px"' ,
title : 'Paste the Template below' ,
ok_label : 'save' ,
cancel_label : 'cancel' ,
width : 300 ,
height : 200 ,
onClose ( ) {
data . component . enableHotkeys ( ) ;
}
} ) . ok ( ( content ) = > {
// data.component.copyTemplate = content;
} ) ;
}
} ,
{
type : 'divider' ,
} ,
{
// id: 'color1',
type : 'color' ,
onRefresh : ( data ) = > {
if ( data . event && data . event . item && typeof data . event . item . color === 'string' ) {
data . network . disableStoringContent = true ;
// Extract the Base Color
const color = data . event . item . color . startsWith ( '#' ) ? data . event . item . color : '#' + data . event . item . color ;
let mustUpdate = false ;
// Update the New Color
for ( const id of data . selectedNodes ) {
const node = data . network . getNode ( id ) ;
if ( node . color !== color ) {
node . color = color ;
data . network . updateNode ( node ) ;
mustUpdate = true ;
}
}
data . network . disableStoringContent = false ;
callImmediate ( ( ) = > {
if ( mustUpdate ) {
data . network . save ( ) ;
}
} ) ;
}
}
} , {
type : 'divider'
} ,
{
type : 'action' ,
label : 'hide selected' ,
tooltip : 'Hide the Selected Element' ,
icon : 'fa fa-eye-slash' ,
onClick : ( data ) = > {
/ * *
* Callback which whill hide the selected Elements .
* Therefore disable storingContent on Updates , cause
* every data . options of the Selected Elements are updated .
* /
data . network . disableStoringContent = true ;
data . network . network . setVisibilityOfNodes ( data . selectedNodes , false ) ;
data . network . network . storePositions ( ) ;
/** Iterate over the selected Elements and hide the Node */
for ( const id of data . selectedNodes ) {
const node = data . network . getNode ( id ) ;
node . hidden = true ;
/** Update the data.options */
data . network . updateNode ( node ) ;
}
/** Iterate over the selected Elements and hide the Edge */
for ( const id of data . selectedEdges ) {
const edge = data . network . getEdge ( id ) ;
edge . hidden = true ;
/** Update the data.options */
data . network . updateEdge ( edge ) ;
}
/** Activate Redo/Undo Tracking again */
data . network . disableStoringContent = false ;
/** Store the current state */
data . network . save ( ) ;
}
} ,
]
}
]
}
const config : IToolbar < D > = {
2020-10-25 20:14:51 +00:00
/** Set the File-Menu as initally active */
activeTab : 'fileMenu' ,
/** Define the Tabs of the Toolbar */
tabs : {
edit : {
2020-10-27 19:22:41 +00:00
label : 'Edit' ,
2020-10-25 20:14:51 +00:00
tooltip : 'Edit Actions for the Network' ,
menu : {
items : [
{
id : 'undo' ,
2020-10-27 19:22:41 +00:00
type : 'action' ,
2020-10-25 20:14:51 +00:00
tooltip : 'Undo' ,
icon : 'fa fa-arrow-left' ,
onClick : ( data ) = > {
/** Undo the Last Action if Possible */
data . network . undo ( ) ;
}
} ,
{
2020-10-27 19:22:41 +00:00
type : 'action' ,
2020-10-25 20:14:51 +00:00
tooltip : 'Redo' ,
icon : 'fa fa-arrow-right' ,
onClick : ( data ) = > {
/** Redo the Last Action if Possible */
data . network . redo ( ) ;
}
} ,
{
2020-10-27 19:22:41 +00:00
type : 'divider'
2020-10-25 20:14:51 +00:00
} ,
{
2020-10-27 19:22:41 +00:00
type : 'action' ,
label : 'add node' ,
2020-10-25 20:14:51 +00:00
tooltip : 'Add a new Node Element in the Center of the current View' ,
icon : 'fa fa-plus-square' ,
onClick : ( data ) = > {
/ * *
* Add a new Node in the Center of the Screen .
* Therefore extract the Center - Position of the
* Graph and call the addNode Function .
*
* This will result in opening up the corresponding
* Editor .
* /
// if (( data.component.template as ITemplate<N,E>).nodes && (data.component.template as ITemplate<N,E>).nodes.length > 0){
// const pos = data.network.network.getViewPosition();
// data.component.addNode(pos);
// } else {
// data.network.showMessage('info', 'No Template Selected!', 'Please select a template for a Node in the Sidebar!', 5000);
// }
}
} ,
{
2020-10-27 19:22:41 +00:00
type : 'action' ,
label : 'add edge' ,
2020-10-25 20:14:51 +00:00
tooltip : 'Add a new Node Element' ,
icon : 'fa fa-arrow-right' ,
onClick : ( data ) = > {
/ * *
* Set the graph in the Add - Edge Mode
* /
// if ((data.eid as ITemplate<N,E>).nodes && (data.component.template as ITemplate<N,E>).nodes.length === 0 && (data.component.template as ITemplate<N,E>).edges.length === 1){
// data.network.network.addEdgeMode();
// } else {
// data.network.showMessage('info', 'No Template Selected!', 'Please select a template for an Edge in the Sidebar!', 5000);
// }
}
} ,
{
2020-10-27 19:22:41 +00:00
type : 'divider' ,
2020-10-25 20:14:51 +00:00
} ,
{
2020-10-27 19:22:41 +00:00
type : 'action' ,
label : 'export to clipboard' ,
2020-10-25 20:14:51 +00:00
tooltip : 'Copy the selected elements to the Clipboard' ,
icon : 'fa fa-clone' ,
onClick : ( data ) = > {
// writeToClipboard(data.component.genCopyData());
}
} ,
{
2020-10-27 19:22:41 +00:00
type : 'action' ,
label : 'import from clipboard' ,
2020-10-25 20:14:51 +00:00
tooltip : 'Imports elements from the Clipboard. They can be pasted by pressing "ctrl+v" later on.' ,
icon : 'fa fa-clone' ,
onClick : ( data ) = > {
data . component . pasteFromClipboard ( ) ;
}
} ,
{
2020-10-27 19:22:41 +00:00
type : 'action' ,
label : 'upload project-file' ,
2020-10-25 20:14:51 +00:00
tooltip : 'Opens ' ,
icon : 'fa fa-clone' ,
onClick : ( data ) = > {
// Iterate over the selected
data . component . disableHotkeys ( ) ;
w2prompt ( {
label : 'name' ,
value : 'default' ,
attrs : 'style="width: 200px"' ,
title : 'Paste the Template below' ,
2020-10-27 19:22:41 +00:00
ok_label : 'save' ,
cancel_label : 'cancel' ,
2020-10-25 20:14:51 +00:00
width : 300 ,
height : 200 ,
onClose ( ) {
data . component . enableHotkeys ( ) ;
}
} ) . ok ( ( content ) = > {
// data.component.copyTemplate = content;
} ) ;
}
} ,
{
2020-10-27 19:22:41 +00:00
type : 'divider' ,
2020-10-25 20:14:51 +00:00
} ,
{
// id: 'color1',
type : 'color' ,
onRefresh : ( data ) = > {
if ( data . event && data . event . item && typeof data . event . item . color === 'string' ) {
data . network . disableStoringContent = true ;
// Extract the Base Color
const color = data . event . item . color . startsWith ( '#' ) ? data . event . item . color : '#' + data . event . item . color ;
let mustUpdate = false ;
// Update the New Color
for ( const id of data . selectedNodes ) {
const node = data . network . getNode ( id ) ;
if ( node . color !== color ) {
node . color = color ;
data . network . updateNode ( node ) ;
mustUpdate = true ;
}
}
data . network . disableStoringContent = false ;
callImmediate ( ( ) = > {
if ( mustUpdate ) {
data . network . save ( ) ;
}
} ) ;
}
}
} , {
2020-10-27 19:22:41 +00:00
type : 'divider'
2020-10-25 20:14:51 +00:00
} ,
{
2020-10-27 19:22:41 +00:00
type : 'action' ,
label : 'hide selected' ,
2020-10-25 20:14:51 +00:00
tooltip : 'Hide the Selected Element' ,
icon : 'fa fa-eye-slash' ,
onClick : ( data ) = > {
/ * *
* Callback which whill hide the selected Elements .
* Therefore disable storingContent on Updates , cause
* every data . options of the Selected Elements are updated .
* /
data . network . disableStoringContent = true ;
data . network . network . setVisibilityOfNodes ( data . selectedNodes , false ) ;
data . network . network . storePositions ( ) ;
/** Iterate over the selected Elements and hide the Node */
for ( const id of data . selectedNodes ) {
const node = data . network . getNode ( id ) ;
node . hidden = true ;
/** Update the data.options */
data . network . updateNode ( node ) ;
}
/** Iterate over the selected Elements and hide the Edge */
for ( const id of data . selectedEdges ) {
const edge = data . network . getEdge ( id ) ;
edge . hidden = true ;
/** Update the data.options */
data . network . updateEdge ( edge ) ;
}
/** Activate Redo/Undo Tracking again */
data . network . disableStoringContent = false ;
/** Store the current state */
data . network . save ( ) ;
}
} ,
]
}
} ,
view : {
2020-10-27 19:22:41 +00:00
label : 'View' ,
2020-10-25 20:14:51 +00:00
tooltip : 'Manipulates the View of the Graph' ,
menu : {
items : [
{
2020-10-27 19:22:41 +00:00
type : 'action' ,
label : 'fit' ,
2020-10-25 20:14:51 +00:00
tooltip : 'Fits the Graph' ,
icon : 'fa fa-expand' ,
onClick : ( data ) = > {
data . network . network . fit ( {
animation : true
} ) ;
}
} ,
{
2020-10-27 19:22:41 +00:00
type : 'action' ,
label : 'zoom in' ,
2020-10-25 20:14:51 +00:00
tooltip : 'Zoom in the Graph' ,
icon : 'fa fa-search-plus' ,
onClick : ( data ) = > {
const position = data . network . network . getViewPosition ( ) ;
const currentScale = data . network . network . getScale ( ) ;
data . network . network . moveTo ( {
position ,
scale : currentScale + 0.1 ,
animation : {
duration : 100 ,
}
} ) ;
}
} ,
{
2020-10-27 19:22:41 +00:00
type : 'action' ,
label : 'zoom out' ,
2020-10-25 20:14:51 +00:00
tooltip : 'Zooms out the Graph' ,
icon : 'fa fa-search-minus' ,
onClick : ( data ) = > {
const position = data . network . network . getViewPosition ( ) ;
const currentScale = data . network . network . getScale ( ) ;
data . network . network . moveTo ( {
position ,
scale : currentScale - 0.1 ,
animation : {
duration : 100 ,
}
} ) ;
}
} , {
2020-10-27 19:22:41 +00:00
type : 'divider'
2020-10-25 20:14:51 +00:00
} ,
{
2020-10-27 19:22:41 +00:00
type : 'action' ,
label : 'view all' ,
2020-10-25 20:14:51 +00:00
tooltip : 'Show all hidden Elements' ,
icon : 'fa fa-eye' ,
onClick : ( data ) = > {
const nodes = data . network . nodes ;
const edges = data . network . edges ;
for ( const node of nodes ) {
node . hidden = false ;
}
for ( const edge of edges ) {
edge . hidden = false ;
}
data . network . updateNode ( nodes ) ;
data . network . updateEdge ( edges ) ;
}
} ,
]
}
} ,
layout : {
2020-10-27 19:22:41 +00:00
label : 'Layout' ,
2020-10-25 20:14:51 +00:00
tooltip : 'Options to Manipulate the Layout of the Graph' ,
// disabled: true,
menu : {
items : [
{
id : 'item2' ,
type : 'menu-radio' ,
text ( item ) {
const text = item . selected ;
const el = this . get ( 'item2:' + item . selected ) ;
return el . text ;
} ,
selected : getCurrentLayout ( ) ,
items : [
2020-10-27 19:22:41 +00:00
{ id : 'h_ud' , label : 'Hierarchical: UD' , icon : 'fa fa-arrow-down' } ,
{ id : 'h_du' , label : 'Hierarchical: DU' , icon : 'fa fa-arrow-up' } ,
{ id : 'h_lr' , label : 'Hierarchical: LR' , icon : 'fa fa-arrow-right' } ,
{ id : 'h_rl' , label : 'Hierarchical: RL' , icon : 'fa fa-arrow-left' } ,
{ id : 'normal' , label : 'Normal View-Mode' }
2020-10-25 20:14:51 +00:00
] ,
onRefresh ( data ) {
data . event . done ( ( ) = > {
const before = getCurrentLayout ( ) ;
if ( data . event . item . selected != before ) {
// Update the data.options object
if ( typeof rgetattr ( data . options , 'layout.hierarchical' , { } ) === 'boolean' ) {
rsetattr ( data . options , 'layout.hierarchical' , { } )
}
// Based on the Selection, update the Elements
switch ( data . event . item . selected ) {
case 'normal' :
rsetattr ( data . options , 'layout.hierarchical.enabled' , false )
break ;
default :
const direction = ( data . event . item . selected as string ) . slice ( 2 ) . toUpperCase ( ) ;
rsetattr ( data . options , 'layout.hierarchical.enabled' , true ) ;
rsetattr ( data . options , 'layout.hierarchical.direction' , direction ) ;
break ;
}
data . component . visjsOptions = data . options ;
// Store the New data.options
data . network . network . storePositions ( ) ;
const nodes = data . network . nodes ;
const edges = data . network . edges ;
const clusters = data . network . getClusters ( ) ;
data . network . clear ( ) ;
data . network . network . setOptions ( data . options ) ;
data . network . addNode ( nodes ) ;
data . network . addEdge ( edges ) ;
data . network . readinClusters ( clusters ) ;
}
} ) ;
}
} ,
]
}
} ,
cluster : {
2020-10-27 19:22:41 +00:00
label : 'Clusters' ,
2020-10-25 20:14:51 +00:00
tooltip : 'Add Clusters to the Node' ,
// disabled: true,
menu : {
items : [
{
2020-10-27 19:22:41 +00:00
type : 'action' ,
label : 'cluster selected' ,
2020-10-25 20:14:51 +00:00
tooltip : 'Clusterize the Selected Elements' ,
icon : 'fa fa-cog' ,
onClick : ( data ) = > {
clusterSelected ( data . component , false )
}
} ,
{
2020-10-27 19:22:41 +00:00
type : 'action' ,
label : 'cluster outliners' ,
2020-10-25 20:14:51 +00:00
tooltip : 'Clusterize the Selected Elements' ,
icon : 'fa fa-cog' ,
onClick : ( data ) = > {
data . network . network . clusterOutliers ( ) ;
data . network . save ( ) ;
}
} ,
{
2020-10-27 19:22:41 +00:00
type : 'divider'
2020-10-25 20:14:51 +00:00
} ,
{
2020-10-27 19:22:41 +00:00
type : 'action' ,
label : 'uncluster selected' ,
2020-10-25 20:14:51 +00:00
tooltip : '' ,
icon : 'fa fa-cog' ,
onClick : ( data ) = > {
for ( const node of data . selectedNodes ) {
if ( data . network . network . isCluster ( node ) ) {
data . network . network . openCluster ( node )
}
}
data . network . save ( ) ;
}
} ,
{
2020-10-27 19:22:41 +00:00
type : 'action' ,
label : 'view all' ,
2020-10-25 20:14:51 +00:00
tooltip : 'Show all hidden Elements' ,
icon : 'fa fa-eye' ,
onClick : ( data ) = > {
const nodesToUpdate = data . network . nodes ;
for ( const node of nodesToUpdate ) {
node . hidden = false ;
}
data . network . updateNode ( nodesToUpdate ) ;
}
} ,
]
}
} ,
settings : {
2020-10-27 19:22:41 +00:00
label : 'Settings' ,
2020-10-25 20:14:51 +00:00
tooltip : 'User Settings' ,
// disabled: true,
menu : {
items : [
{
type : 'check' ,
2020-10-27 19:22:41 +00:00
label : 'Multiselect' ,
2020-10-25 20:14:51 +00:00
icon : 'fa fa-check-square' ,
checked : rgetattr ( graphOptions , 'interaction.multiselect' , false ) ,
onClick : ( data ) = > {
data . event . done ( ( ) = > {
rsetattr ( data . options , 'interaction.multiselect' , data . event . item . checked ) ;
data . component . visjsOptions = data . options ;
data . network . network . setOptions ( data . options ) ;
} )
}
} ,
{
2020-10-27 19:22:41 +00:00
type : 'divider'
2020-10-25 20:14:51 +00:00
} ,
{
type : 'check' ,
2020-10-27 19:22:41 +00:00
label : 'Navigation Buttons' ,
2020-10-25 20:14:51 +00:00
icon : 'fa fa-check-square' ,
checked : rgetattr ( graphOptions , 'interaction.navigationButtons' , false ) ,
onClick : ( data ) = > {
data . event . done ( ( ) = > {
rsetattr ( data . options , 'interaction.navigationButtons' , data . event . item . checked ) ;
data . component . visjsOptions = data . options ;
data . network . network . setOptions ( data . options ) ;
} )
}
} ,
{
2020-10-27 19:22:41 +00:00
type : 'divider'
2020-10-25 20:14:51 +00:00
} ,
{
id : 'physics' ,
type : 'check' ,
2020-10-27 19:22:41 +00:00
label : 'physics' ,
2020-10-25 20:14:51 +00:00
icon : 'fa fa-check-square' ,
checked : rgetattr ( graphOptions , 'physics' , false ) === true || rgetattr ( graphOptions , 'physics.enabled' , false ) === true ,
onClick : ( data ) = > {
data . event . done ( ( ) = > {
if ( typeof data . options . physics == 'boolean' ) {
data . options . physics = data . event . item . checked ;
rsetattr ( data . options , 'physics' , data . event . item . checked ) ;
data . component . visjsOptions = data . options ;
data . network . network . setOptions ( data . options ) ;
} else {
rsetattr ( data . options , 'physics.enabled' , data . event . item . checked ) ;
data . component . visjsOptions = data . options ;
data . network . network . setOptions ( data . options ) ;
}
} )
}
} ,
{
2020-10-27 19:22:41 +00:00
type : 'divider'
2020-10-25 20:14:51 +00:00
} ,
{
id : 'shadows' ,
type : 'check' ,
2020-10-27 19:22:41 +00:00
label : 'shadows' ,
2020-10-25 20:14:51 +00:00
icon : 'fa fa-check-square' ,
checked : rgetattr ( graphOptions , 'nodes.shadow' , false ) === true || rgetattr ( graphOptions , 'nodes.shadow.enabled' , false ) === true ,
onClick : ( data ) = > {
data . event . done ( ( ) = > {
if ( data . options . nodes && typeof data . options . nodes . shadow == 'boolean' ) {
data . options . nodes . shadow = data . event . item . checked ;
rsetattr ( data . options , 'nodes.shadow' , data . event . item . checked ) ;
} else {
rsetattr ( data . options , 'nodes.shadow.enabled' , data . event . item . checked ) ;
}
if ( data . options . edges && typeof data . options . edges . shadow == 'boolean' ) {
data . options . edges . shadow = data . event . item . checked ;
rsetattr ( data . options , 'edges.shadow' , data . event . item . checked ) ;
} else {
rsetattr ( data . options , 'edges.shadow.enabled' , data . event . item . checked ) ;
}
data . component . visjsOptions = data . options ;
data . network . network . setOptions ( data . options ) ;
} )
}
} , {
2020-10-27 19:22:41 +00:00
type : 'divider'
2020-10-25 20:14:51 +00:00
} ,
{
type : 'check' ,
2020-10-27 19:22:41 +00:00
label : 'Edit on Select' ,
2020-10-25 20:14:51 +00:00
icon : 'fa fa-check-square' ,
checked : additionalOptions.editOnSelect || false ,
onClick : ( data ) = > {
data . event . done ( ( ) = > {
data . component . options . editOnSelect = data . event . item . checked ;
} )
}
} ,
{
type : 'check' ,
2020-10-27 19:22:41 +00:00
label : 'Hide Panel on Deselect' ,
2020-10-25 20:14:51 +00:00
icon : 'fa fa-check-square' ,
checked : additionalOptions.hidePanelOnDeselect || false ,
onClick : ( data ) = > {
data . event . done ( ( ) = > {
data . component . options . hidePanelOnDeselect = data . event . item . checked ;
} )
}
} ,
]
}
} ,
developer : {
2020-10-27 19:22:41 +00:00
label : 'Developer' ,
2020-10-25 20:14:51 +00:00
tooltip : 'Extra Tools for a Developer' ,
// disabled: true,
menu : {
items : [
{
2020-10-27 19:22:41 +00:00
type : 'action' ,
label : 'json' ,
2020-10-25 20:14:51 +00:00
tooltip : 'Shows the current data as JSON' ,
icon : 'fa fa-code' ,
onClick : ( data ) = > {
let editor : any = null ;
const speed = 0.3 ;
w2popup . open ( {
id : 'test' ,
title : 'Debug window' ,
maximized : true ,
body : '<div id="jsonviewer" style="width:100%;height:100%"></div>' ,
showMax : true ,
speed ,
width : 500 ,
height : 500 ,
onOpen ( event ) {
setTimeout ( ( ) = > {
// Generate the Editor
const editorOptions = {
// modes: ['tree', 'view', 'code', 'text']
mode : 'view' ,
search : 'true' ,
mainMenuBar : false
} ;
editor = new JSONEditor ( document . getElementById ( 'jsonviewer' ) , editorOptions , {
nodes : data.network.nodes ,
edges : data.network.edges
} ) ;
} , speed * 1000 + 0.050 )
} ,
onClose ( event ) {
if ( editor ) {
editor . destroy ( ) ;
}
}
} ) ;
}
} ,
{
2020-10-27 19:22:41 +00:00
type : 'action' ,
label : 'generate Template' ,
2020-10-25 20:14:51 +00:00
tooltip : 'Creates a Template Structure' ,
icon : 'fa fa-code' ,
onClick : ( data ) = > {
writeToClipboard ( stringifyWithFunctions ( data . component . generateTemplateData ( ) ) ) ;
}
} ,
{
2020-10-27 19:22:41 +00:00
type : 'divider'
2020-10-25 20:14:51 +00:00
} ,
{
type : 'check' ,
2020-10-27 19:22:41 +00:00
label : 'Use Version Control' ,
2020-10-25 20:14:51 +00:00
icon : 'fa fa-check-square' ,
checked : rgetattr ( additionalOptions , 'useVersionControl' , true ) ,
onClick : ( data ) = > {
data . event . done ( ( ) = > {
data . component . network . useVersionControl = data . event . item . checked ;
} )
}
} ,
]
}
} ,
help : {
2020-10-27 19:22:41 +00:00
label : 'Help' ,
2020-10-25 20:14:51 +00:00
menu : {
items : [
{
2020-10-27 19:22:41 +00:00
type : 'action' ,
label : 'Show Help' ,
2020-10-25 20:14:51 +00:00
tooltip : 'Clusterize the Selected Elements' ,
icon : 'fa fa-info' ,
onClick : ( data ) = > {
// Load the Help Component.
data . component . layout . openDialogComponent < HelpComponent > ( {
title : 'help' ,
component : {
component : HelpComponent
} ,
buttons : [
{
label : 'Close' ,
callback ( instance , close ) {
close ( ) ;
} ,
status : 'danger'
}
] ,
closeOnBackdropClick : true ,
closeOnEsc : true ,
} ) ;
}
} ,
]
}
}
}
} ;
return config ;
}