i2g/menu.js
/** Set up a group of context menu functions. */
Set up a group of context menu functions.
Set up a group of context menu functions .
function svgMenu(i2g) {
        var uploadFile;
        $.contextMenu.types.label = function(item, opt, root) {
            var uploadText = $('<div>Please input a file</div>')
                .appendTo(this);
            uploadFile = $('<input type = "file" multiple size = "50">')
                .appendTo(this);
            var uploadFileDemo = $('<div/>')
                .appendTo(this);
            uploadFile.on('change', function() {
                var x = uploadFile[0];
                var txt = "";
                if ('files' in x) {
                    if (x.files.length == 0) {
                        txt = "Select one or more files.";
                    } else {
                        for (var i = 0; i < x.files.length; i++) {
                            txt += "<br><strong>" + (i+1) + ". file</strong><br>";
                            var file = x.files[i];
                            if ('name' in file) {
                                txt += "name: " + file.name + "<br>";
                            }
                            if ('size' in file) {
                                txt += "size: " + file.size + " bytes <br>";
                            }
                        }
                    }
                }
                else {
                    if (x.value == "") {
                        txt += "Select one or more files.";
                    } else {
                        txt += "The files property is not supported by your browser!";
                        txt  += "<br>The path of the selected file: " + x.value; 
                    }
                }
                uploadFileDemo.html(txt);
            });
        };
        $.contextMenu({
            selector: i2g.container,
            callback: function(key, options) {
                var newNodeType,
                    menuIndex = i2g.subI2g == null ? 0 : 3,
                    newNodePosition = $(".context-menu-root:eq(" + menuIndex + ")").position();
                if(key == 'uploadFile') {
                    var x = uploadFile[0].files[0];
                    var reader = new FileReader();
                    reader.onload = function(){
                        var graphData = JSON.parse(reader.result);
                        i2g.model
                            .removeNodes({all: true});
                        i2g.update();
                        i2g.model
                            .addNodes(graphData.nodes);
                        i2g.update();
                        i2g.model
                            .addLinks(graphData.links);
                        i2g.update();
                    };
                    reader.readAsText(x);
                } else if(key == 'saveFile') {
                    var graphData = ({
                        nodes: i2g.model.getNodes(),
                        links: i2g.model.getLinks()
                    });
                    var fileName = options.inputs["downloadFileName"].$input.val();
                    download(graphData, fileName);
                } else if(key == 'addNode') {
                    var svgWidth = i2g.svg.attr('width');
                    var svgHeight = i2g.svg.attr('height');
                    var addNewNode = function(newNodeLabel, newNodeType, newSize, newColor, newNodeProvenance, newNodeSubGraph) {
                        i2g.model.addNodes({
                            label: newNodeLabel,
                            type: newNodeType,
                            size: newSize,
                            color: newColor,
                            provenance: newNodeProvenance,
                            subGraph: newNodeSubGraph,
                            x: (newNodePosition.left / svgWidth),
                            y: (newNodePosition.top / svgHeight),
                            datalink: false
                        });
                        i2g.update();
                    }
                    widget({
                        container: $("#PadModal"),
                        category: "nodePanel",
                        label: 'New Node',
                        type: 'default',
                        size: 1,
                        color: 'default',
                        provenance: [],
                        width: 200,
                        marginTop: newNodePosition.top + 10,
                        marginLeft: newNodePosition.left + 10,
                        callback: addNewNode
                    });
                }
            },
            items: {
                addNode: {
                    name: "Add node",
                    icon: "fa-plus-square"
                },
                importGraph: {
                    name: "Import graph",
                    icon: "fa-upload",
                    items: {
                        uploadFileName: {
                            name: "Please input a file",
                            type: 'label',
                            callback: function(){ return false; }
                        },
                        sep1: "---------",
                        uploadFile: {
                            name: "upload file",
                            icon: "fa-folder-open"
                        }
                    }
                },
                exportGraph: {
                    name: "Export graph",
                    icon: "fa-download",
                    items: {
                        downloadFileName: {
                            name: "Please input the file name",
                            type: 'text',
                            value: ""
                        },
                        sep1: "---------",
                        saveFile: {
                            name: "Save file",
                            icon: "fa-floppy-o"
                        }
                    }
                },
            }
        });
    }
function svgMenu ( i2g ) { var uploadFile ; $ . contextMenu . types . label = function ( item , opt , root ) { var uploadText = $ ( '<div>Please input a file</div>' ) . appendTo ( this ) ; uploadFile = $ ( '<input type = "file" multiple size = "50">' ) . appendTo ( this ) ; var uploadFileDemo = $ ( '<div/>' ) . appendTo ( this ) ; uploadFile . on ( 'change' , function ( ) { var x = uploadFile [ 0 ] ; var txt = "" ; if ( 'files' in x ) { if ( x . files . length == 0 ) { txt = "Select one or more files." ; } else { for ( var i = 0 ; i < x . files . length ; i ++ ) { txt += "<br><strong>" + ( i + 1 ) + ". file</strong><br>" ; var file = x . files [ i ] ; if ( 'name' in file ) { txt += "name: " + file . name + "<br>" ; } if ( 'size' in file ) { txt += "size: " + file . size + " bytes <br>" ; } } } } else { if ( x . value == "" ) { txt += "Select one or more files." ; } else { txt += "The files property is not supported by your browser!" ; txt += "<br>The path of the selected file: " + x . value ; } } uploadFileDemo . html ( txt ) ; } ) ; } ; $ . contextMenu ( { selector : i2g . container , callback : function ( key , options ) { var newNodeType , menuIndex = i2g . subI2g == null ? 0 : 3 , newNodePosition = $ ( ".context-menu-root:eq(" + menuIndex + ")" ) . position ( ) ; if ( key == 'uploadFile' ) { var x = uploadFile [ 0 ] . files [ 0 ] ; var reader = new FileReader ( ) ; reader . onload = function ( ) { var graphData = JSON . parse ( reader . result ) ; i2g . model . removeNodes ( { all : true } ) ; i2g . update ( ) ; i2g . model . addNodes ( graphData . nodes ) ; i2g . update ( ) ; i2g . model . addLinks ( graphData . links ) ; i2g . update ( ) ; } ; reader . readAsText ( x ) ; } else if ( key == 'saveFile' ) { var graphData = ( { nodes : i2g . model . getNodes ( ) , links : i2g . model . getLinks ( ) } ) ; var fileName = options . inputs [ "downloadFileName" ] . $input . val ( ) ; download ( graphData , fileName ) ; } else if ( key == 'addNode' ) { var svgWidth = i2g . svg . attr ( 'width' ) ; var svgHeight = i2g . svg . attr ( 'height' ) ; var addNewNode = function ( newNodeLabel , newNodeType , newSize , newColor , newNodeProvenance , newNodeSubGraph ) { i2g . model . addNodes ( { label : newNodeLabel , type : newNodeType , size : newSize , color : newColor , provenance : newNodeProvenance , subGraph : newNodeSubGraph , x : ( newNodePosition . left / svgWidth ) , y : ( newNodePosition . top / svgHeight ) , datalink : false } ) ; i2g . update ( ) ; } widget ( { container : $ ( "#PadModal" ) , category : "nodePanel" , label : 'New Node' , type : 'default' , size : 1 , color : 'default' , provenance : [ ] , width : 200 , marginTop : newNodePosition . top + 10 , marginLeft : newNodePosition . left + 10 , callback : addNewNode } ) ; } } , items : { addNode : { name : "Add node" , icon : "fa-plus-square" } , importGraph : { name : "Import graph" , icon : "fa-upload" , items : { uploadFileName : { name : "Please input a file" , type : 'label' , callback : function ( ) { return false ; } } , sep1 : "---------" , uploadFile : { name : "upload file" , icon : "fa-folder-open" } } } , exportGraph : { name : "Export graph" , icon : "fa-download" , items : { downloadFileName : { name : "Please input the file name" , type : 'text' , value : "" } , sep1 : "---------" , saveFile : { name : "Save file" , icon : "fa-floppy-o" } } } , } } ) ; }
Set up a group of context menu functions.
Set up a group of context menu functions .
// this === item.$node /*
            <div>Please input a file<div>
            <input type="file" id="myFile" multiple size="50">
            <div id="demo"></div>
            */ // If the browser does not support the files property, it will return the path of the selected file instead.