/**
* @author Martin Karkowski
* @email m.karkowski@zema.de
* @create date 2019-04-29 11:30:22
* @modify date 2020-10-29 12:44:40
* @desc [description]
*/
import { faArrowLeft, faArrowRight, faClone, faDownload, faEyeSlash, faFile, faPlusSquare, faPrint, faUpload } from '@fortawesome/free-solid-svg-icons';
import React from 'react';
import { Button, Form } from 'react-bootstrap';
import { IToolbar } from '../../layout/toolbar';
async function openFile(data){
return await data.layout.getDialogData({
content: {
props: {},
component(props: {
onSubmit: (data: string) => void;
onCancel: (error: any) => void
}) {
const showFile = (e) => {
e.preventDefault()
const reader = new FileReader()
reader.onload = async (event) => {
const text = ((event.target).result as string);
// Use the Submit Function
props.onSubmit(text);
};
// Tell the Reader to load the File.
reader.readAsText(e.target.files[0])
}
return (
<>
Select the File:
)
},
},
header: 'Do you want to discard all unstored changes?',
});
}
/**
* Function to extract the Default Toolbar Menu
*/
export function defaultToolbar() {
const toolbar: IToolbar = {
items: [
{
type: 'action',
label: '',
icon: faPlusSquare,
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.
*/
data.network.network.addNodeMode();
// if (( data.component.template as ITemplate).nodes && (data.component.template as ITemplate).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: '',
icon: faArrowRight,
onClick: (data) => {
/**
* Set the graph in the Add-Edge Mode
*/
data.network.network.addEdgeMode();
// if ((data.eid as ITemplate).nodes && (data.component.template as ITemplate).nodes.length === 0 && (data.component.template as ITemplate).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: 'menu',
id: 'fileMenu',
items: [
{
type: 'action',
label: 'New File',
icon: faFile,
onClick: async (data) => {
/** Clearout the Graph and Delete the History */
data.network.clear();
data.network.resetHistory();
if (data.layout.tabs.length > 0) {
const clearAll = await data.layout.getDialogData({
content: {
props: {},
component(props: {
onSubmit: (data: boolean) => void;
onCancel: (error: any) => void
}) {
return (
<>
{' '}
)
},
},
header: 'Do you want to discard all unstored changes?',
});
// Iterate over the Tabs and delete every.
for (const tab of data.layout.props.tabs.items){
// Force to delete the Tabs.
await data.layout.delteTab(tab,clearAll);
}
}
await data.layout.requestTab();
}
},
{
type: 'divider',
},
{
type: 'action',
label: 'Open File',
icon: faUpload,
onClick: async (data) => {
const file = await openFile(data);
}
},
{
type: 'action',
label: 'Import File',
icon: faUpload,
onClick: async (data) => {
const file = await openFile(data);
}
},
{
type: 'action',
label: 'Save File',
icon: faDownload,
onClick: async (data) => {
// Get the Name
const name = await data.layout.getDialogData({
header: 'Enter File-Name',
content: {
component: 'DynamicForm',
props: {
schema: {
type: "string",
description: "Name of the File"
}
}
}
});
// Store the content
}
},
{
type: 'action',
label: 'print',
icon: faPrint,
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',
icon: faArrowLeft,
onClick: (data) => {
/** Undo the Last Action if Possible */
data.network.undo();
}
},
{
type: 'action',
label: 'Redo',
icon: faArrowRight,
onClick: (data) => {
/** Redo the Last Action if Possible */
data.network.redo();
}
},
{
type: 'divider'
},
{
type: 'action',
label: 'add node',
icon: faPlusSquare,
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.
*/
data.network.network.addNodeMode();
// if (( data.component.template as ITemplate).nodes && (data.component.template as ITemplate).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',
icon: faArrowRight,
onClick: (data) => {
/**
* Set the graph in the Add-Edge Mode
*/
data.network.network.addEdgeMode();
// if ((data.eid as ITemplate).nodes && (data.component.template as ITemplate).nodes.length === 0 && (data.component.template as ITemplate).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',
icon: faClone,
onClick: (data) => {
// writeToClipboard(data.component.genCopyData());
}
},
{
type: 'action',
label: 'import from clipboard',
icon: faClone,
onClick: (data) => {
data.component.pasteFromClipboard();
}
},
{
type: 'action',
label: 'upload project-file',
icon: faClone,
onClick: (data) => {
}
},
{
type: 'divider',
},
{
type: 'action',
label: 'hide selected',
icon: faEyeSlash,
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 = {
// /** Set the File-Menu as initally active */
// activeTab: 'fileMenu',
// /** Define the Tabs of the Toolbar */
// tabs: {
// view: {
// label: 'View',
// tooltip: 'Manipulates the View of the Graph',
// menu: {
// items: [
// {
// type: 'action',
// label: 'fit',
// tooltip: 'Fits the Graph',
// icon: 'fa fa-expand',
// onClick: (data) => {
// data.network.network.fit({
// animation: true
// });
// }
// },
// {
// type: 'action',
// label: 'zoom in',
// 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,
// }
// });
// }
// },
// {
// type: 'action',
// label: 'zoom out',
// 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,
// }
// });
// }
// }, {
// type: 'divider'
// },
// {
// type: 'action',
// label: 'view all',
// 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: {
// label: 'Layout',
// 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: [
// { 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' }
// ],
// 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: {
// label: 'Clusters',
// tooltip: 'Add Clusters to the Node',
// // disabled: true,
// menu: {
// items: [
// {
// type: 'action',
// label: 'cluster selected',
// tooltip: 'Clusterize the Selected Elements',
// icon: 'fa fa-cog',
// onClick: (data) => {
// clusterSelected(data.component, false)
// }
// },
// {
// type: 'action',
// label: 'cluster outliners',
// tooltip: 'Clusterize the Selected Elements',
// icon: 'fa fa-cog',
// onClick: (data) => {
// data.network.network.clusterOutliers();
// data.network.save();
// }
// },
// {
// type: 'divider'
// },
// {
// type: 'action',
// label: 'uncluster selected',
// 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();
// }
// },
// {
// type: 'action',
// label: 'view all',
// 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: {
// label: 'Settings',
// tooltip: 'User Settings',
// // disabled: true,
// menu: {
// items: [
// {
// type: 'check',
// label: 'Multiselect',
// 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);
// })
// }
// },
// {
// type: 'divider'
// },
// {
// type: 'check',
// label: 'Navigation Buttons',
// 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);
// })
// }
// },
// {
// type: 'divider'
// },
// {
// id: 'physics',
// type: 'check',
// label: 'physics',
// 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);
// }
// })
// }
// },
// {
// type: 'divider'
// },
// {
// id: 'shadows',
// type: 'check',
// label: 'shadows',
// 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);
// })
// }
// },{
// type: 'divider'
// },
// {
// type: 'check',
// label: 'Edit on Select',
// icon: 'fa fa-check-square',
// checked: additionalOptions.editOnSelect || false,
// onClick: (data) => {
// data.event.done(() => {
// data.component.options.editOnSelect = data.event.item.checked;
// })
// }
// },
// {
// type: 'check',
// label: 'Hide Panel on Deselect',
// icon: 'fa fa-check-square',
// checked: additionalOptions.hidePanelOnDeselect || false,
// onClick: (data) => {
// data.event.done(() => {
// data.component.options.hidePanelOnDeselect = data.event.item.checked;
// })
// }
// },
// ]
// }
// },
// developer: {
// label: 'Developer',
// tooltip: 'Extra Tools for a Developer',
// // disabled: true,
// menu: {
// items: [
// {
// type: 'action',
// label: 'json',
// 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: '',
// 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();
// }
// }
// });
// }
// },
// {
// type: 'action',
// label: 'generate Template',
// tooltip: 'Creates a Template Structure',
// icon: 'fa fa-code',
// onClick: (data) => {
// writeToClipboard(stringifyWithFunctions(data.component.generateTemplateData()));
// }
// },
// {
// type: 'divider'
// },
// {
// type: 'check',
// label: 'Use Version Control',
// icon: 'fa fa-check-square',
// checked: rgetattr(additionalOptions, 'useVersionControl', true),
// onClick: (data) => {
// data.event.done(() => {
// data.component.network.useVersionControl = data.event.item.checked;
// })
// }
// },
// ]
// }
// },
// help: {
// label: 'Help',
// menu: {
// items: [
// {
// type: 'action',
// label: 'Show Help',
// tooltip: 'Clusterize the Selected Elements',
// icon: 'fa fa-info',
// onClick: (data) => {
// // Load the Help Component.
// data.component.layout.openDialogComponent({
// title: 'help',
// component: {
// component: HelpComponent
// },
// buttons: [
// {
// label: 'Close',
// callback(instance, close){
// close();
// },
// status: 'danger'
// }
// ],
// closeOnBackdropClick: true,
// closeOnEsc: true,
// });
// }
// },
// ]
// }
// }
// }
// };
return toolbar;
}