electron仿製UnrealEngine4 藍圖功能模塊

electron仿製UnrealEngine4藍圖功能模塊

---

1. electron的下載和安裝
2. 右鍵菜單的實現

累的吐血。。。

2017/9/22更新
菜單節點控制

var treeMenuNode = {
    instantObject: function (name,type) {
        var treeMenuNode = new Object();
        // console.log('generate treeMenuNode');

        treeMenuNode.name = arguments[0];
        treeMenuNode.tpye = arguments[1];
        treeMenuNode.childrenNodes = new Array();
        treeMenuNode.setChildrenNodes = function(array){
            // this.childrenNodes = arguments[0].slice();
            this.childrenNodes = arguments[0];
        }
        treeMenuNode.addChild = function(treeMenuNode){
            // console.log('addChild')
            this.childrenNodes.push(arguments[0]);
        }
        treeMenuNode.attacheTo = function(Node){
            // console.log('attacheTo')
            arguments[0].childrenNodes.push(treeMenuNode)
        }
        treeMenuNode.testfunction = function(){

        }
        treeMenuNode.traverse = function(textStack,tempStack){
            // console.log()
            // // console.log()
            // arguments[0].push(treeMenuNode.name);
            if(treeMenuNode.tpye == 'folder')
            {   
                arguments[0].push(
                '<customFolder>'+
                "<customFolderDeatils isOpen='false'>"+
                '>'+
                treeMenuNode.name+
                "</customFolderDeatils>"
                )
                // arguments[1].push(treeMenuNode)
                for(var i = 0;i<treeMenuNode.childrenNodes.length;i++)
                {
                    // console.log('test')
                    treeMenuNode.childrenNodes[i].traverse(arguments[0],arguments[1]);
                }
                arguments[0].push(
                    '</customFolder>'
                )
            }
            else
            {
                arguments[0].push(
                    '<customNode>'+
                    treeMenuNode.name+
                    '</customNode>'
                )
            }
            return;
        }
        return treeMenuNode;
    }
}

var treeMenuOptions = {
    instantObject: function(elem,MenuNodes){
        var treeMenuOptions = new Object();
        treeMenuOptions.elem = arguments[0];
        treeMenuOptions.treeMenuNodes = new Array();
        treeMenuOptions.treeMenuNodes = arguments[1];
        // console.log('generate treeMenuOptions')
        return treeMenuOptions
    }
}

var treeMenu = {
    instantObject: function (MenuOptions) {
        var treeMenu = new Object();
        treeMenu.treeMenuOptions = arguments[0];
        treeMenu.treeTextStack = new Array();
        treeMenu.treeTempStack = new Array();
        treeMenu.spawnTreeMenu = function(){
            for(var i = 0;i<treeMenu.treeMenuOptions.treeMenuNodes.length;i++)
            {
                treeMenu.treeMenuOptions.treeMenuNodes[i].traverse(treeMenu.treeTextStack);
            }
            var x = document.getElementById(treeMenu.treeMenuOptions.elem)
            x.innerHTML = treeMenu.treeTextStack.join('');
        }

        // console.log('generate treeMenu');
        return treeMenu;
    }
}


var treeMenuNode_1_3 = treeMenuNode.instantObject('testobject3');
var treeMenuNode_1_2 = treeMenuNode.instantObject('testobject2');
var treeMenuNode_1_1 = treeMenuNode.instantObject('testobject1');
var treeMenuNode_2_3 = treeMenuNode.instantObject('testobject3');
var treeMenuNode_2_2 = treeMenuNode.instantObject('testobject2');
var treeMenuNode_2_1 = treeMenuNode.instantObject('testobject1');


var treeMenuNode_1 = treeMenuNode.instantObject('object','folder');
var treeMenuNode_2 = treeMenuNode.instantObject('function','folder');
treeMenuNode_1.setChildrenNodes([treeMenuNode_1_1,treeMenuNode_1_2,treeMenuNode_1_3]);
treeMenuNode_2.setChildrenNodes([treeMenuNode_2_1,treeMenuNode_2_2,treeMenuNode_2_3]);


var myTreeMenuOptions = treeMenuOptions.instantObject('test',[treeMenuNode_1,treeMenuNode_2]);
var myTreeMenu = treeMenu.instantObject(myTreeMenuOptions);
myTreeMenu.spawnTreeMenu();
// console.log(myTreeMenu.treeMenuOptions.elem);
console.log(myTreeMenu.treeTextStack.join(''));

function addTree()
{
    var treeMenuNode_1_3 = treeMenuNode.instantObject('testobject3');
    var treeMenuNode_1_2 = treeMenuNode.instantObject('testobject2');
    var treeMenuNode_1_1 = treeMenuNode.instantObject('testobject1');
    var treeMenuNode_2_3 = treeMenuNode.instantObject('testobject3');
    var treeMenuNode_2_2 = treeMenuNode.instantObject('testobject2');
    var treeMenuNode_2_1 = treeMenuNode.instantObject('testobject1');


    var treeMenuNode_1 = treeMenuNode.instantObject('object','folder');
    var treeMenuNode_2 = treeMenuNode.instantObject('function','folder');
    treeMenuNode_1.setChildrenNodes([treeMenuNode_1_1,treeMenuNode_1_2,treeMenuNode_1_3]);
    treeMenuNode_2.setChildrenNodes([treeMenuNode_2_1,treeMenuNode_2_2,treeMenuNode_2_3]);


    var myTreeMenuOptions = treeMenuOptions.instantObject('test',[treeMenuNode_1,treeMenuNode_2]);
    var myTreeMenu = treeMenu.instantObject(myTreeMenuOptions);
    // myTreeMenu.spawnTreeMenu();
    // alert('123')
    // alert(myTreeMenu.treeTextStack.length)
    myTreeMenu.spawnTreeMenu();
}

暫時功能爲：生成樹狀菜單，
需要結合css進行樣式控制
控制js腳本進行摺疊控制。
代碼寫在博客裏面還是有點麻煩，等有空了去git開個倉庫。思路寫博客，代碼存倉庫

2017/9/27
調整項目結構

渲染與頁面分開
3. 節點的實現
4. 通過菜單放置節點
5. 節點的完善
6. 抽象二叉樹的生成
7. LLVM接口調用
8. 程序運行
flag立好了，哈哈哈。