asystem/editor_types.js

module.exports = function(self) {
    function mmb(t, d) {
        return '<div class="mb"><h3>' + t + '</h3>' + d + '</div>';
    }

    function allchildren(obj_) {
        var obj = typeof(obj_) === "function" ? obj_() : obj_;
        return [].concat.apply([obj], _.map(obj.children, allchildren))
    }

    var _ = require("lodash");
    var opath = require("opath");

    var types = {}

    types.allmodules = function(obj, field) {
        return '<pre>' + self.allchildren().filter(function(a) {
            return a._metas.modules ? true : false
        }).map(function(a) {
            return _.repeat(" ", a.path.split("/").length) + '<a href="#" elepath="' + a.path + '" class="elecontent ' + (a.path === obj.path ? 'active' : '') +
                '">' + a.path + '</a>'
        }).join("\n") + '</pre>';
    }
    types.availablemodules = function(obj, field) {
        var s = '<pre>' + _.map(self.editorTypes(), function(func, name) {
            return name;
        }).join("\n");
        s += "\n";
        s += self.allchildren().filter(function(a) {
            return a.modulefunc
        }).map(function(child) {
            return '<a href="#" class="elecontent" elepath="' + child.path + '">' + child.path + '.modulefunc</a>';
        }).join("\n");
        s += '</pre>';
        return s;
    }

    types.layouttabedit = function(obj, field) {
        field.excludekeys = field.excludekeys || ["layouts"];
        return types.alineedit(obj, field);
    }

    types.alineedit = function(obj, field) {
        var oa = opath.get(obj, field.path);


        /*if(!oa){
            opath.set(obj, field.path,{})
        }
     */

        var excludekeys = ["type", "modules"].concat(field.excludekeys || []);
        console.log("EEEEEEEEEEEEEEEEEEEEEE",excludekeys);
        var tmp = {}

        var s = _.keys(oa).filter(function(key) {
            return excludekeys.indexOf(key) === -1;
        }).map(function(key) {
            if (_.isArray(oa[key])) {
                return _.map(oa[key], function(tab, i) {
                    return '<div class="' + key + '"><label>' + key + '</label><div class="subs">' + types.alineedit(obj, {
                        path: field.path + "." + key + "." + i
                    }) + '</div></div>'
                }).join("\n");

            } else {

                if (typeof(oa[key]) === "function") {
                    tmp[obj.path + '/.' + field.path + '.' + key] = true;
                    return '<div class="' + key + '"><label>' + key + '</label> <textarea class="mini  " data-id="' + obj.path + '/.' + field.path + '.' +
                        key + '" name="' + key + '" >' + oa[key] + '</textarea>' + ((oa.type && types[oa.type] && types[oa.type].settings && types[oa.type].settings[
                            key]) ? types[oa.type].settings[key].info + ' def:' + types[oa.type].settings[key].default : '') + '</div>';

                }



                if (_.isObject(oa[key])) {

                    return '<div class="' + key + '"><label>' + key + '</label><div class="subs">' + _.map(oa[key], function(taba, i) {
                        return '<span>' + i + '</span>' + (typeof(taba) === "boolean" ? types.truefalse(obj, {
                            path: field.path + "." + key + "." + i
                        }) : '<input class="mini"   value="' + taba + '">')
                    }).join("\n") + '</div></div>';

                } else {
                    if (key === "type") {
                        return '<div class="' + key + '"><label>' + key + '</label> <select data-id="' + obj.path + '/.' + field.path + '.' + key + '" class="changetype">' +
                            _.map(types, function(func, name) {
                                return '<option value="' + name + '" ' + (name === oa[key] ? 'selected' : '') + '>' + name + '</option>'
                            }).join("\n") + '</select>' + (types[oa[key]] ? types[oa[key]].help : 'na') + '</div>';

                    } else {

                        if (key.indexOf("data") === 0) {
                            tmp[obj.path + '/.' + field.path + '.' + key] = true;

                            return '<div class="' + key + '"><label>' + key + '</label> <textarea class="mini htmleditor" data-id="' + obj.path + '/.' + field.path + '.' +
                                key + '" name="' + key + '">' + oa[key] + '</textarea>' + ((oa.type && types[oa.type] && types[oa.type].settings && types[oa.type].settings[
                                    key]) ? types[oa.type].settings[key].info + ' def:' + types[oa.type].settings[key].default : '') + '</div>';
                        } else {



                            tmp[obj.path + '/.' + field.path + '.' + key] = true;

                            return '<div class="' + key + '"><label>' + key + '</label> <input class="mini propeditor" data-id="' + obj.path + '/.' + field.path + '.' +
                                key + '" name="' + key + '" value="' + oa[key] + '">' + ((oa.type && types[oa.type] && types[oa.type].settings && types[oa.type].settings[
                                    key]) ? types[oa.type].settings[key].info + ' def:' + types[oa.type].settings[key].default : '') + '</div>';



                        }



                    }


                }


            }
        }).join("\n");


        if (types[oa.type]) {


            s = '<div class="type"><label>type</label> <select  data-id="' + obj.path + '/.' + field.path + '.type" class="changetype" >' + _.map(types, function(func, name) {
                return '<option value="' + name + '" ' + (name === oa.type ? 'selected' : '') + '>' + name + '</option>'
            }).join("\n") + '</select>' + (types[oa.type] ? types[oa.type].help : 'na') + '</div>' + s

            s += _.map(types[oa.type].settings || {}, function(val, key) {
                if (tmp[obj.path + '/.' + field.path + '.' + key]) {
                    return "";
                }
                return '<div class="' + key + '"><label>' + key + '</label> <input class="mini propeditor" data-id="' + obj.path + '/.' + field.path + '.' + key +
                    '" name="' + key + '" value="' + (oa[key] || val.default) + '"> ' + (val.info ? val.info + ' def:' + val.default : '') + '</div>';

            })


        } else {

            s = '<div class="type"><label>type</label> <select  data-id="' + obj.path + '/.' + field.path + '.type" class="changetype" >' + _.map(types, function(func, name) {
                return '<option value="' + name + '" ' + (name === oa.type ? 'selected' : '') + '>' + name + '</option>'
            }).join("\n") + '</select>' + (types[oa.type] ? types[oa.type].help : 'na') + '</div>' + s


        }
        s += '<div class="newprop" data-id="' + obj.path + '/.' + field.path +
            '"><input class="newprop_prop" type="text" placeholder="key" ><input type="text" placeholder="value" class="newprop_value"></div>'

        return s;
    }




    types.elementseditor = function(obj, field) {

        console.log("FFFF", field);
        var template_tab = ""
        template_tab += '<li data-id="{{path}}" data-prop="{{childrenpath}}" class="{{clss}}">';

        if ((!field.show) ||
            (field.show && field.show.tool !== false)
        ) {
            template_tab += '<div class="tool">';
            template_tab += '<span class="expand"> </span>';
            if ((!field.show) ||
                (field.show && field.show.mover !== false)
            ) {
                template_tab += '<span class="hh"> </span>';
            }
            if ((!field.show) ||
                (field.show && field.show.add !== false)
            ) {
                template_tab += '<button tab-index=-1 data-id="{{path}}.{{childrenpath}}" class="addelement">Add</button>';
            }
            if ((!field.show) ||
                (field.show && field.show.modules !== false)
            ) {
                template_tab += '<button tab-index=-1 data-id="{{path}}.modules" class="addmodules">Add module</button>';
            }
            if ((!field.show) ||
                (field.show && field.show.delete !== false)
            ) {
                template_tab += '<button tab-index=-1 data-id="{{path}}" class="deletetab">Delete</button>';
            }
            if ((!field.show) ||
                (field.show && field.show.title !== false)
            ) {
                template_tab += '<input class="mini propeditor" rerender=true data-id="{{path}}.title" value="{{tab.title}}" >';
            }
            if ((!field.show) ||
                (field.show && field.show.name !== false)
            ) {
                template_tab += '<input class="mini propeditor" rerender=true data-id="{{path}}.name" value="{{tab.name}}" >';
            }
            template_tab += '</div>'
        }
        if ((!field.show) ||
            (field.show && field.show.editor !== false)
        ) {
            if (field.defaults) {
                template_tab += '<div class="dde">' + _.map(field.defaults, function(d, k) {
                    return '<input type="text" '
                }).join("\n") + '</div>'

            }
            template_tab += '<div class="edi">{{xtypeselect}}{{alinee}}</div>'
        }



        if ((!field.show) ||
            (field.show && field.show.modules !== false)
        ) {
            template_tab += '<ol class="moda" data-id="{{path}}.modules">{{mods}}</ol>'
        } else {
            if (field.allsamemodule) {
                template_tab += '<ol class="moda" data-id="{{path}}.modules">{{mods}}</ol>'
            }
        }



        if ((!field.show) ||
            (field.show && field.show.children !== false)
        ) {
            template_tab += '<ol class="tubu" data-id="{{path}}.{{childrenpath}}">{{content}}</ol>'
        }
        template_tab += '</li>'


        var template_module = '<li data-id="{{path}}.modules.{{index}}">';

        if ((!field.show) ||
            (field.show && field.show.tool !== false)
        ) {
            template_module += '<div class="tool">'
            template_module += '<span class="expandm"> </span>'
            template_module += '<span class="hh"> </span>'
            template_module += '{{xtypeselect}}'
            template_module += '<span class="deletemod">Delete</span>'
            template_module += '<div class="title">{{mod.type}} {{mod.name}} {{mod.title}}</div>'
            template_module += '</div>'
        }

        template_module += '<div class="modcon"></div>'
        template_module += '</li>'


        var ta3 =
            `<div  >
            <div class="tool"><button data-id="{{obj.path}}/.{{fieldpath}}" data-name="{{dataname}}" class="addelement">Add</button></div>
            <ol class="tibi" data-id="{{obj.path}}/.{{fieldpath}}">
                {{basecontent}}
            </ol>
        </div>`;

        function rec_go(arr, prop, path, func, level_) {
            var level = level_ || 0;
            return _.map((arr || []), function(a, i) {
                if (a[prop] && _.isArray(a[prop])) {
                    return func(a, path + "." + i, rec_go(a[prop], prop, path + "." + i + "." + prop, func, level + 1));
                } else {
                    return func(a, path + "." + i)
                }
            }).join("\n");
        }



        function gmods(tab, path) {
            var arrr = (tab.modules || []);


            return _.map(arrr, function(m, mi) {


                return self.template(template_module, {
                    tab: tab,
                    path: path,
                    mod: m,
                    /*                    datas: types[m.type] ? types[m.type](obj, m) : "na",*/

                    typeselect: '<select  data-id="' + path + '.modules.' + mi + '.type" class="changetype" >' + _.keys(types).filter(
                        function(
                            name) {
                            return name.indexOf("element_") > -1
                        }).map(function(name) {
                        return '<option value="' + name + '" ' + (name === m.type ? 'selected' : '') + '>' + name + '</option>'
                    }).join("\n") + '</select>',
                    index: mi
                })
            }).join("\n")



        }

        var zearr = opath.get(obj, field.path);
        if (field.find) {
            /*  zearr = zearr.filter(function(a) {
                return a.name.indexOf(field.find) > -1
            })*/
        }

        return self.template(ta3, {
            dataname: field.dataname,
            obj: obj,
            childrenpath: field.childrenpath,
            fieldpath: field.path,
            basecontent: rec_go(zearr, field.childrenpath, obj.path + "/." + field.path, function(tab, path, content) {
                /* if(field.find && tab.name.indexOf(field.find)===-1){
                    return "xx:"+field.find+":"+tab.name;
                }*/
                return self.template(template_tab, {
                    clss: field.find && tab.name.indexOf(field.find) === -1 ? "hidden" : "show",
                    tab: tab,
                    path: path,
                    typeselect: '<select  data-id="' + path + '.type" class="changetype" >' + _.keys(types).filter(function(name) {
                        return name.indexOf("element_") > -1
                    }).map(function(name) {
                        return '<option value="' + name + '" ' + (name === tab.type ? 'selected' : '') + '>' + name + '</option>'
                    }).join("\n") + '</select>',
                    childrenpath: field.childrenpath,
                    alinee: types.alineedit(obj, {
                        path: path.split("/.").pop(),
                        excludekeys: [field.childrenpath]
                    }),
                    mods: gmods(tab, path),
                    content: content
                })
            })
        });
    }

    types.elementseditor.help = "elementseditor help";
    types.elementseditor.settings = {
        "path": {
            default: "_data.elements",
            "info": "path to array"
        },
        "childrenpath": {
            default: "elements",
            "info": "array name"
        },
        "show": {
            default: {
                "tool": true,
                "mover": true,
                "add": true,
                "modules": true,
                "children": true,
                "delete": true,
                "editor": true
            },
            "info": "shows"

        }
    };





    types.elementstree = function(obj, field) {


        var ta1 =
            `<li data-id="{{path}}" data-prop="{{childrenpath}}">
                <div class="tool">
                    <div class="title">{{tab.title}}</div>
                </div>
                <div class="edi">
                   
                </div>
                <ol class="moda" data-id="{{path}}.modules">
                    {{mods}}
                </ol>
                <ol class="tubu" data-id="{{path}}.{{childrenpath}}">
                    {{content}}
                </ol>
            </li>`;
        var ta2 =
            `<li data-id="{{path}}.modules.{{index}}">
             <div class="title">{{mod.title}}</div>
             <div>
             {{datas}}
             </div>
            </li>`;
        var ta3 =
            `<div class="t_{{obj.name}} {{field.unc}}">
                <ol class="tibi" data-id="{{obj.path}}/.{{fieldpath}}">
                    {{basecontent}}
                </ol>
             </div>`;




        function rec_go(arr, prop, path, func, level_) {
            var level = level_ || 0;
            return _.map((arr || []), function(a, i) {
                if (a[prop] && _.isArray(a[prop])) {
                    return func(a, path + "." + i, rec_go(a[prop], prop, path + "." + i + "." + prop, func, level + 1));
                } else {
                    return func(a, path + "." + i)
                }
            }).join("\n");
        }
        return self.template(ta3, {
            obj: obj,
            childrenpath: field.childrenpath,
            fieldpath: field.path,
            field: field,
            basecontent: rec_go(opath.get(obj, field.path), field.childrenpath, obj.path + "/." + field.path, function(tab, path, content) {
                return self.template(ta1, {
                    tab: tab,
                    path: path,
                    childrenpath: field.childrenpath,
                    mods: _.map((tab.modules || []), function(m, mi) {

                        return self.template(ta2, {
                            tab: tab,
                            path: path,
                            mod: m,
                            datas: types[m.type] ? types[m.type](obj, m) : "na",
                            index: mi
                        })
                    }).join("\n"),
                    content: content
                })
            })
        });
    }
    types.elementstree.help = "elements view";
    types.elementstree.settings = {
        "path": {
            default: "_data.elements",
            "info": "path to array"
        },
        "childrenpath": {
            default: "elements",
            "info": "array name"
        }
    };




    types.get_renders = function(obj, field) {

        var layouts = obj.getStuff3(field.path, function(a) {
            return a
        }, field.path);

        var yy = {}
        while (layouts.length) {
            var ta = layouts.pop();
            ta.data.map(function(tta) {
                var t = _.cloneDeep(tta);
                t.froma = ta.name;
                var tname = t.name;
                if (t.target) {
                    tname = t.target
                }
                if (t.method) {
                    if (t.method == "replace") {
                        if (yy[tname]) {
                            var tt = yy[tname].froma;
                            yy[tname] = t;
                            yy[tname].froma_replaced = tt;
                        } else {
                            yy[tname] = t;
                        }
                    }
                    if (t.method == "append") {
                        if (yy[tname]) {
                            yy[tname].content = yy[tname].content || []
                            yy[tname].content.push(t);
                        } else {
                            yy[tname] = t;
                        }
                    }
                    if (t.method == "prepend") {
                        if (yy[tname]) {
                            yy[tname].content = yy[tname].content || []
                            yy[tname].content.unshift(t);
                        } else {
                            yy[tname] = t;
                        }
                    }
                } else {
                    if (yy[tname]) {
                        yy[tname].content = yy[tname].content || []
                        yy[tname].content.push(t);
                    } else {
                        yy[tname] = t;
                    }
                }
            })
        }
        return yy;
    }

    types.renderlayout = function(obj, field) {
        console.log("FFFFFFFFFFFFFFFFFFFFFFFFFFFFF", field);


        function rega(a) {

            return self.template(field.data ? field.data : '<div class="{{keya}}" data-froma="{{val.froma}}">{{mods}}{{content}}</div>', {
                keya: a.name,
                val: a,
                mods: (a.modules || []).map(function(m) {
                    return types[m.type] ? types[m.type](obj, m) : self.template(m.data, {
                        obj: obj,
                        m: m,
                        tab: a
                    })
                }).join("\n"),
                content: a[field.childrenpath] ? a[field.childrenpath].map(rega).join("\n") : a.data

            })
        }

        function kmap(a, pa) {
            var s = _.map(a, function(val, key) {
                return self.template(field.data ? (field.data_before + field.data + field.data_after) :
                    '<div id="{{key}}" data-froma="{{val.froma}}">{{selfa}}{{mods}}{{content}}</div>', {
                        key: key,

                        val: val,
                        mods: (val.modules || []).map(function(m) {
                            console.log("MMMM", m)
                            return types[m.type] ? types[m.type](obj, m) : self.template(m.data, {
                                obj: obj,
                                m: m,
                                tab: val
                            })
                        }).join("\n"),
                        selfa: val.data ? self.template(val.data, obj) : "",
                        content: (val[field.childrenpath] || []).map(rega).join("\n") + (val.content || []).map(rega).join("\n")
                    });

            }).join("\n");
            return s;
        }

        var yy = types.get_renders(obj, field);
        var ssa = "";
        if (field.debug) {
            var cont = JSON.stringify(yy, true, 2)
            ssa = '<div style="width: 100%; float: left;">' + '<textarea cols="80" rows="80" style="width: 600px; font-size: 8px;">' + kmap(yy, []) +
                '</textarea>' + '<hr><textarea cols="80" rows="80" style="width: 600px; font-size: 8px;">' + cont +
                '</textarea></div>'

        }




        return self.template(kmap(yy, []).replace("%%CONTENT%%", field.content), obj) + ssa





        console.log("YYYYYYYYYYYYYYY", yy);

        return JSON.stringify(yy, true, 2);


        /*

        var layouts = [];
        var x = obj.getStuff3("_data.layouts", function(a) {
            return a
        }, "_data.layouts").map(function(a) {
            layouts = layouts.concat(a.data);
            return a;
        });








        console.log(layouts, x)



        function rec_go(arr, prop, path, func, level_) {
            var level = level_ || 0;
            return _.map((arr || []), function(a, i) {
                if (a[prop] && _.isArray(a[prop])) {
                    return func(a, path.concat(a.name).join("."), rec_go(a[prop], prop, path.length === 0 && !a.name ? path : path.concat(a.name), func, level + 1));
                } else {
                    return func(a, path.concat(a.name).join("."))
                }
            }).join("\n");
        }

        var s = "";


        var cont = "";
        var obja = {};
        var ps = {};
        var alle = [];
        x.reverse();
        var ind = 0;
        while (x.length) {
            var t = x.shift();
            console.log("TTTTTTTTTT_", t.data, t);

            if (ind === 0) {
                //first
                t.data.map(function(ta) {
                    obja[ta.name] = {
                        data: ta.data,
                        name: ta.name,
                        modules: ta.modules
                    }
                })
            } else {
                t.data.map(function(ta) {
                    if (obja[ta.name]) {
                        obja[ta.name].layouts = obja[ta.name].layouts || []
                        obja[ta.name].layouts.push(ta);
                    } else {
                        //obja[ta.name] = ta
                        console.log("NAAAAAAA", ta.name);
                    }
                })


            }
            ind++
            //   

                      var nn = t.name.split("/").pop();
            rec_go([{
                layouts: t.data
            }], "layouts", [], function(taba, path, content) {
                var ta = _.omit(taba, ["layouts"]);
                ta.path = path;
                ta.from = t.name + "/." + t.from
                alle.push(ta)
            })
 

        }


        cont = JSON.stringify(obja, true, 2)


        function kmap(a, pa) {
            return _.map(a, function(val, key) {
                return _.repeat(" ", pa.length) + '<div class="' + pa.concat(key).join("-") + (pa.length > 0 ? ' ' + key : '') + '" >\n' + _.repeat(" ", pa.length) + (
                        typeof(val) === "object" ? kmap(val, pa.concat(key)) : (["content", "data"].indexOf(key) > -1 ? self.template(val, obj) : val)) + '\n' + _.repeat(
                        " ", pa.length) +
                    '</div>'
            }).join("\n");
        }


        var ssa = '<div style="width: 100%; float: left;">' + '<textarea cols="80" rows="80" style="width: 600px; font-size: 8px;">' + kmap(obja, []) +
            '</textarea>' + '<hr><textarea cols="80" rows="80" style="width: 600px; font-size: 8px;">' + cont +
            '</textarea></div>'


        return self.template(kmap(obja, []).replace("%%CONTENT%%", field.content), obj) + ssa



        return s;


        return rec_go(layouts, "layouts", "layouts", function(tab, path, content) {
            return tab.title + " " + path;

        })

        return layouts.map(function(a) {
            return a.name === obj.path ? types.renderlayout_t(self.oget(a.name), {}) : types.renderlayout_t(self.oget(a.name), {});
        }).join("\n");
    */

    }

    types.renderlayout22 = function(obj, field) {

        var layouts = [];
        var x = obj.getStuff3("_data.layouts", function(a) {
            return a
        }, "_data.layouts").map(function(a) {
            layouts = layouts.concat(a.data);
            return a;
        });

        console.log(layouts, x)



        function rec_go(arr, prop, path, func, level_) {
            var level = level_ || 0;
            return _.map((arr || []), function(a, i) {
                if (a[prop] && _.isArray(a[prop])) {
                    return func(a, path + "." + a.name, rec_go(a[prop], prop, path + "." + a.name, func, level + 1));
                } else {
                    return func(a, path + "." + a.name)
                }
            }).join("\n");
        }

        var s = "";


        var cont = "";
        var obja = {};
        while (x.length) {
            var t = x.pop();
            console.log("T", t.name);

            t.data.map(function(tab) {
                if (tab.target) {} else {
                    console.log("mmmmmmmm      ", tab.name, tab);

                    obja[tab.name] = {
                        "data": tab.data,
                        "modules": tab.modules
                    };

                    rec_go(tab.layouts, "layouts", tab.name, function(taba, path, content) {
                        if (taba.target && !obja[taba.target]) {
                            //    console.log("TTTTT      ", path, taba);
                        } else {

                            //                            console.log(":::::::::::", path, taba);
                            opath.set(obja, path + ".data", taba.data);
                            opath.set(obja, path + ".modules", taba.modules);
                        }


                    })





                    // obja[tab.name] = tab;
                }
            })

            t.data.map(function(tab) {

                rec_go(tab.layouts, "layouts", tab.name, function(taba, path, content) {
                    if (taba.target) {
                        opath.set(obja, taba.target + "." + tab.name + ".data", tab.data);
                        opath.set(obja, taba.target + "." + tab.name + ".modules", tab.modules);
                    }
                })





            })


            t.data.map(function(tab) {
                if (tab.target) {


                    opath.set(obja, tab.target + "." + tab.name + ".data", tab.data);
                    opath.set(obja, tab.target + "." + tab.name + ".modules", tab.modules);

                    rec_go(tab.layouts, "layouts", tab.name, function(taba, path, content) {
                        if (taba.target) {
                            console.log("TTTTT      ", path, taba);
                        } else {
                            opath.set(obja, tab.target + "." + path + ".data", taba.data);
                            opath.set(obja, tab.target + "." + path + ".modules", taba.modules);
                            console.log(":::::::::::", tab.target + "." + path, taba);
                        }

                    })
                }
            })






            /*t.data.map(function(tab){
            if(obja[tab.name]){

            }else{
                if(tab.target){

                    obja[tab.target] = obja[tab.target] || [];
                    obja[tab.target].push(tab);                    
                }else{
                    obja[tab.name]=[tab]
                }

            }

        })*/

        }

        /*
        løb over 2-3 gange ...obja[name] = [] ..push.


*/

        cont = '<pre>' + JSON.stringify(obja, true, 2) + '</pre>'


        function kmap(a, pa) {
            return _.map(a, function(val, key) {
                return _.repeat(" ", pa.length) + '<div class="' + pa.concat(key).join("-") + (pa.length > 0 ? ' ' + key : '') + '" >\n' + _.repeat(" ", pa.length) + (
                        typeof(val) === "object" ? kmap(val, pa.concat(key)) : (key === "content" ? self.template(val, obj) : val)) + '\n' + _.repeat(" ", pa.length) +
                    '</div>'
            }).join("\n");
        }




        return self.template(kmap(obja, []).replace("%%CONTENT%%", field.content), obj) + ' ' + '<textarea cols="80" rows="120" style="width: 600px;">' + kmap(obja, []) +
            '</textarea>'


        return s;


        return rec_go(layouts, "layouts", "layouts", function(tab, path, content) {
            return tab.title + " " + path;

        })

        return layouts.map(function(a) {
            return a.name === obj.path ? types.renderlayout_t(self.oget(a.name), {}) : types.renderlayout_t(self.oget(a.name), {});
        }).join("\n");


    }
    types.renderlayout_t = function(obj, field) {
        var ta1 =
            `<li data-id="{{path}}" data-prop="{{childrenpath}}">
                <div class="tool">
                    <div class="title">{{tab.name}}  {{tab.id}} {{tab.title}}  {{tab.title}}</div>
                </div>
                <div class="edi">
                   
                </div>
                <ol class="moda" data-id="{{path}}.modules">
                    {{mods}}
                </ol>
                <ol class="tubu" data-id="{{path}}.{{childrenpath}}">
                    {{content}}
                </ol>
            </li>`;
        var ta2 =
            `<li data-id="{{path}}.modules.{{index}}">
             <div class="title">{{mod.title}}</div>
             <div>
             {{datas}}
             </div>
            </li>`;
        var ta3 =
            `<div class="t_{{obj.name}} {{field.unc}}">
                <ol class="tibi" data-id="{{obj.path}}/.{{fieldpath}}">
                    {{basecontent}}
                </ol>
             </div>`;




        function rec_go(arr, prop, path, func, level_) {
            var level = level_ || 0;
            return _.map((arr || []), function(a, i) {
                if (a[prop] && _.isArray(a[prop])) {
                    return func(a, path + "." + i, rec_go(a[prop], prop, path + "." + i + "." + prop, func, level + 1));
                } else {
                    return func(a, path + "." + i)
                }
            }).join("\n");
        }

        field.childrenpath = "layouts";
        field.path = "_data.layouts";

        return self.template(ta3, {
            obj: obj,
            childrenpath: field.childrenpath,
            fieldpath: field.path,
            field: field,
            basecontent: rec_go(opath.get(obj, field.path), field.childrenpath, obj.path + "/." + field.path, function(tab, path, content) {
                return self.template(ta1, {
                    tab: tab,
                    path: path,
                    childrenpath: field.childrenpath,
                    mods: _.map((tab.modules || []), function(m, mi) {

                        return self.template(ta2, {
                            tab: tab,
                            path: path,
                            mod: m,
                            datas: types[m.type] ? types[m.type](obj, m) : "na",
                            index: mi
                        })
                    }).join("\n"),
                    content: content
                })
            })
        });
    }
    types.layouteditor = function(obj, field) {


        var layouts = obj.getStuff3("_data.layouts", function(a) {
            return a
        }, "_data.layouts");
        var s = "";
        /*if (!obj._data.layouts || obj._data.layouts.length === 0) {
            s += types.elementseditor(obj, {
                "path": "_data.layouts",
                "childrenpath": "layouts",
                "show": {
                    "title": false,
                    "name": true
                }
            });

        }*/

        s += types.elementseditor(obj, {
            "path": "_data.layouts",
            "childrenpath": "layouts",
            "show": {
                "title": false,
                "name": true
            }
        });


        // var selfi = layouts.shift();

        var yy = {}
        while (layouts.length) {
            var ta = layouts.pop();

            ta.data.map(function(tta) {
                var t = _.clone(tta);
                t.froma = ta.name;
                if (t.method) {
                    if (t.method == "replace") {
                        if (yy[t.name]) {
                            var tt = yy[t.name].froma;
                            yy[t.name] = t;
                            yy[t.name].froma_replaced = tt;
                        } else {
                            yy[t.name] = t;

                        }
                    }
                } else {
                    yy[t.name] = t;
                }
                console.log("TTT", t);

            })


        }

        console.log("YYYYYYYYYYYYYYY", yy);

        return s;



        if (layouts.length === 0) {
            return 'no layout'
        }
        var alltabs = [];
        var sil = layouts.shift();

        layouts.map(function(a) {
            alltabs = alltabs.concat(a.data)
        })

        s += sil.data.map(function(t) {
            return '<h6>' + t.name + '</h6>' + JSON.stringify(t);
        }).join("\n")

        s += alltabs.map(function(t) {
            return '<h3>' + t.name + '</h3>' + JSON.stringify(t);
        }).join("\n")



        return s;


        if (layouts.length > 1) {
            /* s += layouts.map(function(a) {
                return a.name === obj.path ? "FFF" : types.layouteditor_tree(self.oget(a.name), {}, obj);
            }).join("\n");
            */
            //s += types.layouteditor_tree(self.oget(layouts[layouts.length - 1].name), {}, obj)


            /*          types.elementseditor(obj, {
                        "path": "_data.layouts",
                        "childrenpath": "layouts",
                        "find": tab.name,
                        "dataname": tab.name
                    }
*/
        } else {

            s += layouts.map(function(a) {
                return a.name === obj.path ? types.elementseditor(obj, {
                    "path": "_data.layouts",
                    "childrenpath": "layouts",
                    "show": {
                        "title": false,
                        "name": true
                    }
                }) : types.layouteditor_tree(self.oget(a.name), {}, obj);
            }).join("\n");


        }

        return s;


    }
    types.layouteditor_tree = function(obj, field, obj2) {
        var ta1 =
            `<li data-id="{{path}}" data-prop="{{childrenpath}}">
            <div class="tool">
                ddd {{tab.id}}  {{tab.name}}  {{tab.title}}
             </div>
             {{mods}}
            <ol class="tubu" data-id="{{path}}.{{childrenpath}}">
                {{content}}
            </ol>
            <div>{{obj2thing}}</div>

        </li>`;
        var ta2 =
            `<li data-id="{{path}}.modules.{{index}}">
            <div class="tool">
                <div class="title">{{mod.type}} {{mod.name}} {{mod.title}}</div>


            </div>
            <div class="modcon"></div>
        </li>`;
        var ta3 =
            `<div >
            <ol class="tibi" data-id="{{obj.path}}/.{{fieldpath}}">
                {{basecontent}}
            </ol>
         </div>`;

        function rec_go(arr, prop, path, func, level_) {
            var level = level_ || 0;
            return _.map((arr || []), function(a, i) {
                if (a[prop] && _.isArray(a[prop])) {
                    return func(a, path + "." + i, rec_go(a[prop], prop, path + "." + i + "." + prop, func, level + 1));
                } else {
                    return func(a, path + "." + i)
                }
            }).join("\n");
        }
        field.childrenpath = "layouts";
        field.path = "_data.layouts";

        return self.template(ta3, {
            obj: obj,
            childrenpath: field.childrenpath,
            fieldpath: field.path,
            basecontent: rec_go(opath.get(obj, field.path), field.childrenpath, obj.path + "/." + field.path, function(tab, path, content) {
                return self.template(ta1, {
                    obj2thing: types.elementseditor(obj2, {
                        "path": "_data.layouts",
                        "childrenpath": "layouts",
                        "find": tab.name,
                        "dataname": tab.name
                    }),
                    tab: tab,
                    path: path,
                    typeselect: '<select  data-id="' + path + '.type" class="changetype" >' + _.keys(types).filter(function(name) {
                        return name.indexOf("element_") > -1
                    }).map(function(name) {
                        return '<option value="' + name + '" ' + (name === tab.type ? 'selected' : '') + '>' + name + '</option>'
                    }).join("\n") + '</select>',
                    childrenpath: field.childrenpath,
                    alinee: types.alineedit(obj, {
                        path: path.split("/.").pop(),
                        excludekeys: [field.childrenpath]
                    }),
                    mods: _.map((tab.modules || []), function(m, mi) {
                        return self.template(ta2, {
                            tab: tab,
                            path: path,
                            mod: m,
                            typeselect: '<select  data-id="' + path + '.modules.' + mi + '.type" class="changetype" >' + _.keys(types).filter(
                                function(
                                    name) {
                                    return name.indexOf("element_") > -1
                                }).map(function(name) {
                                return '<option value="' + name + '" ' + (name === m.type ? 'selected' : '') + '>' + name + '</option>'
                            }).join("\n") + '</select>',
                            index: mi
                        })
                    }).join("\n"),
                    content: content
                })
            })
        });

    }
    types.layouteditor_editor = function(obj, field) {
        var ta1 =
            `<li data-id="{{path}}" data-prop="{{childrenpath}}">
            <div class="tool">
                 <span class="expand"> </span>
                 <span class="hh"> </span>
                <button tab-index="-1" data-id="{{path}}.{{childrenpath}}" class="addelement">Add</button>
                <button tab-index="-1" data-id="{{path}}" class="deletetab">Delete</button>
                <button tab-index=-1 data-id="{{path}}.modules" class="addmodules" title="Add module">M</button>
                <input class="mini propeditor" rerender=true data-id="{{path}}.name" value="{{tab.name}}" >
                <input class="mini propeditor" rerender=true data-id="{{path}}.target" value="{{tab.target}}" >
 

            </div>
            <div class="edi">
            {{alinee}}

            </div>
            <ol class="moda" data-id="{{path}}.modules">
                {{mods}}
            </ol>
            <ol class="tubu" data-id="{{path}}.{{childrenpath}}">
                {{content}}
            </ol>
        </li>`;
        var ta2 =
            `<li data-id="{{path}}.modules.{{index}}">
            <div class="tool">
                <span class="expand"> </span>
                <span class="hh"> </span>
                {{xtypeselect}}
                <span class="deletemod">Delete</span>
                <div class="title">{{mod.type}}</div>


            </div>


            <div class="modcon"></div>
        </li>`;
        var ta3 =
            `<div id="nested">
            <ol class="tibi" data-id="{{obj.path}}/.{{fieldpath}}">
                {{basecontent}}
            </ol>
            <button data-id="{{obj.path}}/.{{fieldpath}}" class="addelement">Add child</button>
        </div>`;

        function rec_go(arr, prop, path, func, level_) {
            var level = level_ || 0;
            return _.map((arr || []), function(a, i) {
                if (a[prop] && _.isArray(a[prop])) {
                    return func(a, path + "." + i, rec_go(a[prop], prop, path + "." + i + "." + prop, func, level + 1));
                } else {
                    return func(a, path + "." + i)
                }
            }).join("\n");
        }
        field.childrenpath = "layouts";
        field.path = "_data.layouts";

        return self.template(ta3, {
            obj: obj,
            childrenpath: field.childrenpath,
            fieldpath: field.path,
            basecontent: rec_go(opath.get(obj, field.path), field.childrenpath, obj.path + "/." + field.path, function(tab, path, content) {
                return self.template(ta1, {
                    tab: tab,
                    path: path,
                    typeselect: '<select  data-id="' + path + '.type" class="changetype" >' + _.keys(types).filter(function(name) {
                        return name.indexOf("element_") > -1
                    }).map(function(name) {
                        return '<option value="' + name + '" ' + (name === tab.type ? 'selected' : '') + '>' + name + '</option>'
                    }).join("\n") + '</select>',
                    childrenpath: field.childrenpath,
                    alinee: types.layouttabedit(obj, {
                        path: path.split("/.").pop()
                    }),
                    mods: _.map((tab.modules || []), function(m, mi) {
                        return self.template(ta2, {
                            tab: tab,
                            path: path,
                            mod: m,
                            typeselect: '<select  data-id="' + path + '.modules.' + mi + '.type" class="changetype" >' + _.keys(types).filter(
                                function(
                                    name) {
                                    return name.indexOf("element_") > -1
                                }).map(function(name) {
                                return '<option value="' + name + '" ' + (name === m.type ? 'selected' : '') + '>' + name + '</option>'
                            }).join("\n") + '</select>',
                            index: mi
                        })
                    }).join("\n"),
                    content: content
                })
            })
        });
    }







    types.breakpoint_editor = function(obj, field) {
        //  console.log(Object.assign({field: field}, obj ))

        return '<input type="text" value="">'

    }


    types.element_ = function(obj, field) {
        //  console.log(Object.assign({field: field}, obj ))
        return self.template(field.data, Object.assign({
            field: field
        }, obj));
    }
    types.element_rows = function() {
        return self.template(field.data, obj);
    }
    types.element_cols = function() {
        return self.template(field.data, {
            obj: obj,
            field: field
        });
    }
    types.element_link = function() {
        return self.template(field.data, {
            obj: obj,
            field: field
        });
    }
    types.element_image = function() {
        return self.template(field.data, {
            obj: obj,
            field: field
        });
    }



    types.thismodules = function(obj, field) {
        var s = ""
        s += '<pre>' + _.map(obj._metas.modules, function(mod) {
            return mod.type + " : " + mod.title;
        }).join("\n") + '</pre>';
        s += "<textarea class=dataeditor data-id=\"" + obj.path + "/._metas.modules\">" + self.jsonstringify(obj._metas.modules, true, 2) +
            '</textarea>'
        return s;
    }
    types.status = function(obj, field) {
        var aa = []
        _.keys(self.oo).filter(aa => ["trash", ""].indexOf(aa) === -1 && typeof(self.oo[aa]) === "function").map(function(key) {

            aa = [].concat.apply(aa, allchildren(self.oo[key]()).filter(function(a) {
                return a._isdirty
            }))
        })
        var s = ""

        s += '<h3>Dirty pages</h3><table><thead><tr><th>Obj</th><th> </th></tr></thead><tbody>' + aa.map(function(a) {
            return self.template('<tr><td><a href="#{{path}}" class="elecontent" elepath="{{path}}">{{path}}</a></td><td></td></tr>', a)
        }).join("\n") + '</tbody></table><hr><button onclick="siten.saveZip().then((zzs) => zzs.map((zz) => saveAs(zz.blob, zz.filename)))" class="bnt">Save...</button>';



        return s

    }

    types.tree = function(obj, field) {
        return '<pre>' + self.allchildren(field.from ? field.from : undefined).map(function(a) {
            return _.repeat(" ", a.path.split("/").length) + '<a href="#" elepath="' + a.path + '" class="elecontent ' + (a.path === obj.path ? 'active' : '') +
                '">' + a.name + '</a>'
        }).join("\n") + '</pre>';
    }


    types.source = function(obj, field) {
        var s = "";
        s += '<textarea id="sourcen">' + self.jsonstringify(obj.innerExport(""), true, 2) + '</textarea>';
        s += '<hr>'


        return s
    }
    types.sourcefull = function(obj, field) {
        var s = "";
        s += '<textarea id="sourcen">' + self.jsonstringify(obj.exportSync(""), true, 2) + '</textarea>';
        s += '<hr>'


        return s
    }
    types.sourcefulla = function(obj, field) {
        var s = "";
        s += '<div class="status">Edit</div><hr><textarea id="sourcefulla" data-id="' + obj.path + '">' + self.jsonstringify(obj.exportSync(""), true, 2) + '</textarea>';
        s += '<hr>'
        s +=
            '<div class="upload-btn-wrapper"><button class="btn" onclick="$(\'#myupload\').click()">Upload files</button><input id="myupload" type="file" class="afile" style="opacity: 0;" name="file1" multiple data-id="' +
            obj.path +
            '" data-action="browser_handlefilen" data-emit="filesloaded"  /></div> '
        if (!obj._metas.undeletable) {
            s += '<li style="float: right;"><button class="zapele" data-id="' + obj.path +
                '">Delete Permanently</button></li>'

        }
        return s
    }
    types.export = function(obj, field) {
        var s = "";
        s += '<h3>' + obj.path + '</h3>';
        s += '<button onclick="saveAs(new Blob([siten.jsonstringify(siten.oget(\'' + obj.path + '\').exportSync(), true, 2)],{\'type\':\'application/json\'}),\'' + obj.path +
            '.json\')">Save as</button>'
        s += '<hr><button onclick="$(\'#exporta\').val(siten.jsonstringify(siten.oget(\'' + obj.path +
            '\').exportSync(), true, 2))">Export Standard</button><button onclick="$(\'#exporta\').val(siten.jsonstringify(siten.oget(\'' + obj.path +
            '\').exportFlatSync(), true, 2))">Export flat</button>' +
            " Export size: " + ((self.jsonstringify(obj.exportSync("")).length / (1024 * 1024)).toFixed(2) + "mb");

        s += '<textarea id="exporta">' + '</textarea>';
        s += '<hr>'


        return s
    }
    types.globalexport = function(obj, field, run) {

        if (run) {

            var s = "";
            s += '<table><thead><tr><th>Path</th><th>Bytes</th></tr></thead><tbody>' + _.filter(self.oo, function(a) {
                return typeof(a) === "function"
            }).map(function(a) {
                return a()
            }).map(function(a) {
                return '<tr><td>' + a.path + '</td><td>' + ((self.jsonstringify(a.exportSync("")).length / (1))) +
                    '</td><td><button onclick="saveAs(new Blob([siten.jsonstringify(siten.oget(\'' + a.path +
                    '\').exportSync(), true, 2)],{\'type\':\'application/json\'}),\'' + a.path + '.json\')">Save as</button></td></tr>'
            }).join("\n") + '</tbody></table>';
            s += '<textarea id="exportx">' + '</textarea>';
            return s
        } else {

            var s = "";
            s += '<button onclick="$(\'#exportstats\').html(siten.otypes.globalexport({},1))">Calculate</button>';
            s += '<div id="exportstats">' + '</div>';
            return s;
        }
    }
    types.clone = function(obj, field) {
        return "<div class=\"status\"></div> <input type=\"text\" class=cloneeditor data-id=\"" + obj.path + "\" value=\"" + '"> '

    }
    types.delete = function(obj, field) {
        return '<li> <button class="deleteele" data-id="' + obj.path + '">Trash</button>  <button class="zapele" data-id="' + obj.path +
            '">Delete Permanently</button></li>'

    }

    types.keyseditor = function(obj, field) {




    }



    types.allprops = function(obj, field) {


        var stash = [];

        var prot = {}
        var meta = {}
        self.allchildren().map(function(c) {
            var arr = opath.flatten(c._data, "");
            arr.map(function(a) {
                prot[a[0]] = prot[a[0]] || {}
                prot[a[0]][a[1]] = prot[a[0]][a[1]] || 0
                prot[a[0]][a[1]] += 1;
            })

            var arr = opath.flatten(c._metas, "");
            arr.map(function(a) {
                if (a[0].indexOf('_wp_attachment_backup_sizes') > -1) {
                    return;
                }
                meta[a[0]] = meta[a[0]] || {}
                meta[a[0]][a[1]] = meta[a[0]][a[1]] || 0
                meta[a[0]][a[1]] += 1;
            })
        });
        var prota = _.map(prot, function(vala, nama) {
            return nama + " : " + _.size(vala)
        });
        var metas = _.map(meta, function(vala, nama) {
            return nama + " : " + _.size(vala)
        });

        stash.push(["Data Properties", '<pre>' + JSON.stringify(prota, true, 2) + '</pre>'])
        stash.push(["Meta Properties", '<pre>' + JSON.stringify(metas, true, 2) + '</pre>'])

        var ss = ('<div class="stash">' + stash.map(function(a) {
            return '<div class="stt"><div class="st1">' + (a[0] === false ? "" : a[0] + "") + '</div><div class="st2">' + a[1] + '</div></div>'
        }).join("\n") + '</div>');
        return ss



    }
    types.jsfuncs = function(obj, field) {
        var qq = [];
        _.map(_.omit(obj, ignores), function(val, prop) {
            if (typeof(val) === "function") {
                qq.push(["JS " + prop + '<li><button class="deletefunc" data-id="' + obj.path + "/." + prop + '">Delete</button></li>',
                    "<div class=\"status\"></div> <textarea class=jseditor data-id=\"" + obj.path + "/." + prop + "\">" + (obj[prop] + "") +
                    '</textarea> '
                ]);

            }
        })
        qq.push(["JS ", "<input class=\"createfunc\"   data-id=\"" + obj.path + "\"> "]);

        var ss = ('<div class="sas">' + qq.map(function(a) {
            return '<div class="sa"><div class="inn"><div class="saa">' + (a[0] === false ? "" : a[0] + "") + '</div><div class="sab">' + a[1] +
                '</div></div></div>'
        }).join("\n") + '</div>');
        return ss


    }
    types.relations = function(obj, field) {
        var s = "";

        var ss = []
        _.map(obj._relations, function(rels, relname) {
            var relators = _.keys(rels);
            var sss = relators.slice(0, 25).map(function(relator) {
                return '<li elepath="' + relator + '"><a href="#' + relator + '" class="elecontent" title="' + JSON.stringify(rels[relator].context).toHtmlEntities() +
                    '">' + relator + '</a>  <button class="btn unrelate" data-id="' + obj
                    .path + '" data-rel="' + relname + '" data-rela="' + relator + '" >X</button></li> '

            }).join("\n");;
            ss.push([relname + "(" + relators.length + ")", sss]);
        });
        s += ss.map(function(a) {
            return '<div><h3>' + a[0] + '</h3><div>' + a[1] + '</div></div>'

        }).join("\n")


        return s;
    }
    types.relationsadd = function(obj, field) {
        var s = "";


        s += '<li class="relationseditor" data-id="' + obj.path +
            '"><input class="relout" type="text" placeholder="is what " /><em><select  class=uniq_relnames target=".relout"></select>' +
            '</em><hr> to: <input class="relaeditor" placeholder="find obj"><hr> as: <input type="text" class=relin data-id="' +
            obj.path +
            '" placeholder="as what " /> <select  class=uniq_relnames target=".relin"></select><hr> with: <input class="what" type="text" > <button class="relateasto">Relate</button></li>';
        return s;
    }
    types.templatepaths = function(obj, field) {
        return "<div class=\"status\"></div>" + _.map(self.getRenderTemplate(obj), function(a) {
            return '<li elepath="' + a.name + '"  ><a href="#' + a.name + '" class="elecontent" title="' + a.from + ": " + a.data.toHtmlEntities() + '" > ' +
                a.name +
                '</a></li>'
        }).join("\n");
    }
    types.visa = function(obj, fielda) {
        var field = Object.assign({
            "show": {},
            "cap": 1000
        }, fielda)



        setTimeout(function() {


            var statusa = document.getElementById('visastatus');

            var colas = {
                parent: "#000000",
                child: "#ff00ff",
                extends: "#00ff00",
                inherits: "#ff0000",
                isa: "#ff9900",
                hasa: "#00ff99"
            }

            function lokup(tp) {
                return colas[tp];

            }


            var graph = Viva.Graph.graph();
            var graphics = Viva.Graph.View.svgGraphics(),
                nodeSize = 10;

            var oba = obj; // obj.parents[_.keys(obj.parents).shift()] || obj;



            var alle = allchildren(oba).filter(function(c) {
                return true //c.path.indexOf("trash/") === -1 && c.path.indexOf("folders/") === -1 && c.path.indexOf("blobs/") === -1
            });


            /*                alle.slice(0,2).map(addobj);

                            setTimeout(function(){
                            alle.slice(2,20).map(addobj);

                            },2000)
            */
            /*            
                            if(alle.length>0){
                                stepa();
                            }
            */
            var cols = [];

            alle.map(addobj);

            if (obj.parents[_.keys(obj.parents).shift()]) {
                addobj2(obj.parents[_.keys(obj.parents).shift()]);
                cols.unshift([obj.path, _.keys(obj.parents).shift(), "child of"])
            }

            var colsori = cols.length;

            if (cols.length > field.cap) {
                cols = cols.slice(0, field.cap);
                //	cols = cols.filter(function(a){return a[2] !== "isa" })
                //  	cols = cols.filter(function(a){return a[2] !== "child" })
                //  	cols = cols.filter(function(a){return a[2] !== "hasa" })

            }

            function stepa() {
                statusa.innerHTML = ' ' + alle.length + " : " + colsori + " " + field.cap + " " + cols.length;
                var i = 0,
                    c;
                while (i < 10 && cols.length > 0) {
                    i++
                    c = cols.shift();
                    graph.addLink(c[0], c[1], c[2])
                }
                if (cols.length > 0) {
                    setTimeout(stepa, 100)
                } else {
                    statusa.innerHTML = ' ' + alle.length + " : " + colsori + " " + field.cap + " " + cols.length;

                }
            }

            stepa()

            function addobj2(c) {
                // graph.addNode(c.path);

                _.map(c._isa, function(child, name) {
                    cols.push([c.path, child.path, 'isa'])
                });
                _.map(c._hasa, function(child, name) {
                    cols.push([c.path, child.path, 'hasa'])
                });

                _.map(c._extends, function(child, name) {
                    cols.push([c.path, child.path, 'extends'])
                });
                _.map(c._inherits, function(child, name) {
                    cols.push([c.path, child.path, 'inherits'])
                });
                _.map(c._relations, function(rels, relname) {
                    _.map(rels, function(child, name) {
                        cols.push([c.path, name, relname])
                    })
                });

            }



            function addobj(c) {
                // graph.addNode(c.path);

                if (field.show.children) {
                    _.map(c.children, function(child, name) {
                        cols.push([c.path, child().path, 'child'])
                    });
                }


                if (field.show.isa) {
                    _.map(c._isa, function(child, name) {
                        cols.push([c.path, child.path, 'isa'])
                    });
                }
                if (field.show.hasa) {
                    _.map(c._hasa, function(child, name) {
                        cols.push([c.path, child.path, 'hasa'])
                    });
                }

                if (field.show.extends) {
                    _.map(c._extends, function(child, name) {
                        cols.push([c.path, child.path, 'extends'])
                    });
                }
                if (field.show.inherits) {
                    _.map(c._inherits, function(child, name) {
                        cols.push([c.path, child.path, 'inherits'])
                    });
                }
                if (field.show.relations) {
                    _.map(c._relations, function(rels, relname) {
                        _.map(rels, function(child, name) {
                            cols.push([c.path, name, relname + " with " + child.context.d])
                        })
                    });
                }
            }


            var idas = 1;
            var ida = function() {
                return "ida" + (idas++)
            }

            graphics.node(function(node) {
                var ui = Viva.Graph.svg('g');
                var circle = Viva.Graph.svg('circle')
                    .attr('cx', 2)
                    .attr('cy', 2)
                    .attr('r', 2)
                    .attr('fill', obj.path === node.id ? "#ff0000" : "#dadada");
                ui.append(circle);
                var svgText = Viva.Graph.svg('text').attr("fill", obj.path === node.id ? "#ff0000" : "#333333").attr('font-size', obj.path === node.id ? "18px" :
                    "12px").attr('y', '4px').text(node.id.split("/").slice(-2).join("/"));
                ui.append(svgText);
                return ui;
            }).placeNode(function(nodeUI, pos) {
                nodeUI.attr('transform',
                    'translate(' +
                    (pos.x - nodeSize / 2) + ',' + (pos.y - nodeSize / 2) +
                    ')');
            });
            var createMarker = function(id) {
                    return Viva.Graph.svg('marker')
                        .attr('id', id)
                        .attr('viewBox', "0 0 10 10")
                        .attr('refX', "10")
                        .attr('refY', "5")
                        .attr('markerUnits', "strokeWidth")
                        .attr('markerWidth', "10")
                        .attr('markerHeight', "5")
                        .attr('orient', "auto");
                },

                marker = createMarker('Triangle');
            marker.append('path').attr('d', 'M 0 0 L 10 5 L 0 10 z');

            // Marker should be defined only once in <defs> child element of root <svg> element:
            var defs = graphics.getSvgRoot().append('defs');
            defs.append(marker);

            var geom = Viva.Graph.geom();

            graphics.link(function(link) {
                // Notice the Triangle marker-end attribe:

                var isParent = (link.data === 'parent');

                var ui = Viva.Graph.svg('g');
                var p = Viva.Graph.svg('path')
                    .attr('stroke', lokup(link.data) || "#000000")
                    .attr('fill', 'none')
                    .attr('marker-end', 'url(#Triangle)')
                    .attr('id', ida())
                ui.isParent = isParent; // remember for future.
                ui.linka = link.data;
                ui.ry = 50 //- (Math.random() * 100);

                ui.pp = p;



                var svgText = Viva.Graph.svg('text').attr("dy", -4).attr("class", "slabel");

                var textPath = Viva.Graph.svg("textPath");
                textPath.attr("href", "#" + p.id).attr("startOffset", "25%").text(link.data + " >");

                svgText.append(textPath)
                ui.tt = svgText;

                ////<textPath xlink:href="#'+link.id+'">

                //                    svgText.attr('xlink', link.id);


                ui.append(svgText)

                ui.append(p);

                return ui;


            }).placeLink(function(linkUI, fromPos, toPos) {
                // using arc command: http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands
                //var data = 'M' + fromPos.x + ',' + fromPos.y +
                //  ' A 4,' + linkUI.ry + ',-' + linkUI.ry + ',0,1,' + toPos.x + ',' + toPos.y;

                var data = 'M' + fromPos.x + ',' + fromPos.y +
                    ' C ' + (fromPos.x + 50) + ' ' + (fromPos.y + 10) + ',' + (toPos.x - 50) + ' ' + (toPos.y - 10) + ',' + toPos.x + ' ' + toPos.y;



                linkUI.pp.attr("d", data);

                return;
                //  linkUI.tt.attr("y", ((fromPos.y + toPos.y) / 2) - linkUI.ry);
                // linkUI.tt.attr("x", ((fromPos.x + toPos.x) / 2) );




            });



            var layout = Viva.Graph.Layout.forceDirected(graph, {
                springLength: 80,
                springCoeff: 0.00001,
                dragCoeff: 0.001,
                gravity: -1.2
            });




            var renderer = Viva.Graph.View.renderer(graph, {
                graphics: graphics,
                container: document.getElementById('visagraf'),
                layout: layout
            });
            renderer.run();
        }, 200);
        return '<div id="visastatus" >xxxx</div><div id="visagraf" class="svga"></div>'
    }
    types.visa.help = "Shows linked visualization of obj";
    types.visa.settings = {
        "cap": {
            default: 500,
            "info": "Max render object"
        },
        "show": {}
    };





    types.meta = function(obj, field) {
        return "<div class=\"status\"></div> <textarea class=dataeditor data-id=\"" + obj.path + "/._metas\">" + self.jsonstringify(obj._metas, true, 2) + '</textarea>'
    }
    types.data = function(obj, field) {
        return "<div class=\"status\"></div> <textarea class=dataeditor data-id=\"" + obj.path + "/._data\">" + self.jsonstringify(obj._data, true, 2) + '</textarea>'
    }
    types.hasas = function(obj, field) {
        return '<div class="hasas">' + _.map(obj._hasa, function(tob, name) {
            return self.template(
                '<li elepath="{{tob.path}}" pelepath="{{obj.path}}" ><a href="#{{name}}" class="elecontent">{{name}}</a> <button class="btn unhasa">X</button></li>', {
                    tob: tob,
                    obj: obj,
                    name: name
                });
        }).join("\n") + '</div>'
    }
    types.isas = function(obj, field) {
        return '<div class="isas">' + _.map(obj._isa, function(tob, name) {
            return self.template(
                '<li elepath="{{tob.path}}" pelepath="{{obj.path}}" ><a href="#{{name}}" class="elecontent">{{name}}</a> <button class="btn unisa">X</button></li>', {
                    tob: tob,
                    obj: obj,
                    name: name
                });
        }).join("\n") + '</div>' + self.template('<input class=isaeditor data-id="{{obj.path}}" placeholder="find isas here.." />', {
            obj: obj
        });
    }
    types.extends = function(obj, field) {
        return '<div class="extends">' + _.map(obj._extends, function(tob, name) {
            return self.template(
                '<li elepath="{{tob.path}}" pelepath="{{obj.path}}" ><a href="#{{name}}" class="elecontent">{{name}}</a> <button class="btn unextend">X</button></li>', {
                    tob: tob,
                    obj: obj,
                    name: name
                });
        }).join("\n") + '</div>' + self.template('<input class=extendeditor data-id="{{obj.path}}" placeholder="find inheritants here.." />', {
            obj: obj
        });
    }
    types.inherits = function(obj, field) {
        return '<div class="inherits">' + _.map(obj._inherits, function(tob, name) {
            return self.template(
                '<li elepath="{{tob.path}}" pelepath="{{obj.path}}" ><a href="#{{name}}" class="elecontent">{{name}}</a> <button class="btn uninherit">X</button></li>', {
                    tob: tob,
                    obj: obj,
                    name: name
                });
        }).join("\n") + '</div>' + self.template('<input class=inheriteditor data-id="{{obj.path}}" placeholder="find extenders here.." />', {
            obj: obj
        });

    }
    types.children = function(obj, field) {
        var s = '';
        s += mmb("Add child", "<input type=\"text\" class=addchildeditor data-id=\"" + obj.path + "\" value=\"" + '"> ');

        s += '<div class="children">' + _.map(obj.children, function(a) {
            return a().path
        }).map(function(k) {
            return '<li elepath="' + k + '" pelepath="' + obj.path + '"><a href="#' + k + '" class="elecontent" > ' + k +
                '</a>  '
        }).join("\n") + '</div>'
        return s;
    }
    types.parents = function(obj, field) {
        return self.template('{{parents::}}', obj);
    }
    types.path = function(obj, fiels) {
        return "<input type=\"text\" class=patheditor data-id=\"" + obj.path + "\" value=\"" + obj.path + '">';
    }
    types.info = function(obj, field) {
        return "Path:  " + obj.path
    }
    types.upload = function(obj, field) {
        return (
            '<div class="upload-btn-wrapper"><button class="btn" onclick="$(\'#myupload\').click()">Upload files</button><input id="myupload" type="file" class="afile" style="opacity: 0;" name="file1" multiple data-id="' +
            obj.path +
            '" data-action="browser_handlefilen" data-emit="filesloaded"  /></div> ');
    }
    types.content = function(obj, field) {
        var content_type = "<div><input type=\"text\" class=propeditor data-id=\"" + obj.path + "/._metas.type\" value=\"" +
            obj._metas.type +
            '">' + "<select  class=propselector data-id=\"" + obj.path + "/._metas.type\"></select></div>";
        var s = '';

        s += mmb("Title", types.propeditor(obj, {
            "path": "_data.title"
        }))

        if (obj._metas.type && obj._metas.type == "html") {
            s += mmb("Content", "<div class=\"adj\"><div class=\"status\"></div> <textarea class=mceeditor data-id=\"" + obj.path + "/._data.content\">" + obj._data.content +
                '</textarea></div>')
        } else {
            s += mmb("Body", "<div class=\"adj\"><div class=\"status\"></div> <textarea class=htmleditor data-id=\"" + obj.path + "/._data.content\">" + obj._data.content +
                '</textarea></div>')
        }
        s += mmb("Type", content_type);
        return s;
    }
    types.truefalse = function(obj, field) {
        return ' <input type="checkbox" class="truefalse" data-id="' + obj.path + '/.' + field.path + '" ' + (opath.get(obj, field.path) ? 'checked' : '') + '>'
    }
    types.position = function(obj, field) {
        return ' <input type="text" class="propeditor" data-id="' + obj.path + '/.' + field.path + '" value="' + opath.get(obj, field.path) + '">'
    }
    types.rootzip = function(obj, field, run) {
        if (run == 1) {
            var ns = self.oget("namespace")._data;
            var arr = _.filter(self.oo, function(a, k) {
                return typeof(a) === "function" && k !== "namespace"
            }).map(function(a) {
                return a()
            });
            var s = "";
            var total = 0;
            var totallc = 0;
            s +=
                '<table><thead><tr><th class="path">Path</th><th class="filename">Filename</th><th class="nn">Objs</th><th class="nn">Bytes</th><th class="nn">Avg</th></tr></thead><tbody>' +
                arr.map(function(a) {
                    var ll = ((self.jsonstringify(
                        a.exportSync("")).length / (1)));
                    var lc = (a.exportFlatSync().length);
                    total += ll;
                    totallc += lc;
                    return '<tr> <td class="path">' + a.path + ((ns.linked && ns.linked[a.path + ".link"] ? '*' : '')) + '</td><td  class="filename">' + a.path +
                        '.json</td><td class="nn">' + lc + '</td><td class="nn">' + ll +
                        '</td><td class="nn">' + (ll / lc).toFixed(2) + '</td></tr>'
                }).join("\n")
            s += '<tr> <td> </td><td> </td><td class="nn">' + totallc + '</td><td class="nn">' + total + '</td><td class="nn">' + (total / totallc).toFixed(2) +
                '</td></tr>'
            s += '</tbody></table>';
            s += '<hr>Output</h3>';
            s += '<button onclick="$(\'#rootzipresult\').html(siten.otypes.rootzip({},2))">Calculate zip</button>';
            s += '<div id="rootzipresult"></div>'
            return s;
        } else if (run == 2) {
            self.saveZip().then(function(files) {
                var ss = '<table><thead><tr>  <th class="filename">Filename</th> <th class="nn">Size</th> <th class="nn"></th><th class="nn"></th></thead><tbody>' +
                    files.map(function(file) {
                        return '<tr> <td>' + file.filename + '</td> <td class="nn">' + file.blob.size + '</td> <td class="nn"></td> <td class="nn"></td>  </tr>';
                    }).join("\n") + '</tbody></table>';
                $("#rootzipresult").html(ss)
            })
            return 'zipping...'
        } else {
            var s = "";
            s += '<button onclick="$(\'#rootzipstats\').html(siten.otypes.rootzip({},1))">Calculate</button>';
            s += '<div id="rootzipstats">' + '</div>';
            return s;
        }
    }
    types.yearmonth = function(obj, field) {
        var s = "";
        s += '<input class="propeditor" data-id="' + obj.path + '/.' + field.path + '" value="' + opath.get(obj, field.path) + '">'
        return s
    }
    types.checkboxes = function(obj, field) {
        return '<h3>' + field.title + '</h3><table>' + _.map(opath.get(obj, field.path), function(val, key) {

            return '<tr><td>' + key + '</td><td>' + types.truefalse(obj, {
                path: field.path + "." + key
            }) + '</td></tr>';

        }).join("\n") + '</table>';
    }

    types.elements = function(obj, field) {
        return '<table>' + _.map(opath.get(obj, field.path), function(val, key) {

            return '<tr><td>' + key + '</td><td>' + types.truefalse(obj, {
                path: field.path + "." + key + ".visible"
            }) + '</td><td>' + types.position(obj, {
                path: field.path + "." + key + ".x"
            }) + '</td><td>' + types.position(obj, {
                path: field.path + "." + key + ".y"
            }) + '</td></tr>';

        }).join("\n") + '</table>';

    }
    types.template = function(obj, field) {
        return "<textarea class=htmleditor data-id=\"" + obj.path + "/._data.template\">" + obj._data.template +
            '</textarea>'
    }
    types.dataeditor = function(obj, field) {
        var s = "";
        s += '<textarea class="dataeditor" data-id="' + obj.path + '/.' + field.path + '">' + self.jsonstringify(opath.get(obj, field.path), true, 2) + '</textarea>'
        return s
    }
    types.dataeditorarray = function(obj, field) {
        var s = "";
        s += '<textarea class="dataeditorarray" data-id="' + obj.path + '/.' + field.path + '">' + (opath.get(obj, field.path) || []).join("\n") + '</textarea>'
        return s
    },
    types.texteditor = function(obj, field) {
        var s = "";
        s += '<textarea class="htmleditor" data-id="' + obj.path + '/.' + field.path + '">' + opath.get(obj, field.path) + '</textarea>'
        return s
    }
    types.namespaceedit = function(obj, field) {
        var s = "";
        s += '<input class="namespaceedit" value="' + self.name + '">'
        return s
    }
    types.propeditor = function(obj, field) {
        var s = "";
        s += '<input class="propeditor" data-id="' + obj.path + '/.' + field.path + '" value="' + opath.get(obj, field.path) + '">'
        return s
    }

    function sort_by_1_col_alpha(a, b) {
        var x = a[0].toLowerCase(),
            y = b[0].toLowerCase();
        return x < y ? -1 : x > y ? 1 : 0;
    }

    function xflatten(obj, pre) {
        var pre = pre || "";
        var r = [];
        for (var i in obj) {
            if (typeof(obj[i]) === "object") {
                r = r.concat(xflatten(obj[i], (pre.length > 0 ? pre + "." : "") + i));
            } else {
                r.push([(pre.length > 0 ? pre + "." : "") + i, obj[i]]);

            }

        }
        r.sort(sort_by_1_col_alpha)
        return r;


    }

    types.advpropeditor = function(obj, field) {
        var sa = "";
        var oa = opath.get(obj, field.path);

        function rrr(oo, key, path) {
            var s = "";
            if (_.isArray(oo)) {
                s += '<ul>' + _.map(oo, function(val, key) {
                    return rrr(val, key, path + "." + key);
                }).join("\n") + '</ul>';
            } else if (_.isObject(oo)) {

                s += '<ol>' + _.map(oo, function(val, key) {
                    return rrr(val, key, path + "." + key);
                }).join("\n") + '</ol>';

            } else if (_.isBoolean(oo)) {
                s += '<li>' + key + ":" + types.truefalse(obj, {
                    path: path
                }) + '</li>';

            } else if (_.isString(oo)) {
                s += '<li>' + key + ":" + '<input type="text" value="' + oo + '"></li>';

            }
            return s;
        }

        //        var ss = rrr(oa, "", obj.path + "/." + field.path);

        /*        var tt = xflatten(oa, "_metas");

        var ss = tt.map(function(a) {
            var prop = a[0];
            var val = a[1];
            var type =  typeof(val);

            if(type==="boolean"){
                    return '<li>'+prop+' <input type="checkbox" class="truefalse" data-id="' +obj.path+"/."+prop+ '" ' + (val ? 'checked' : '') + '></li>'
            }

            if(type==="string"){
                    return '<li>'+prop+' <input type="text" class="propeditor" data-id="' +obj.path+"/."+prop+ '" value="' + val + '"></li>'
            }
        }).join("\n");

        */

        /*
                _metas.modules = []
                _metas.tabs = []
                _metas.fields  = [];
                
        

            */



        var ss = "";


        //s += '<input class="propeditor" data-id="' + obj.path + '/.' + field.path + '" value="' + opath.get(obj, field.path) + '">'
        return ss
    }

    types.lookup = function(obj, field) {
        var temps = obj.getStuff3(field.path, function(a) {
            return a
        }, field.path)
        var current_name = "",
            current_data = "";
        if (temps.length > 0) {
            current_name = temps[0].name
            current_data = temps[0].data;
        }

        var s = ''; //' <input type="text" data-id="'+obj.path+'/.'+field.path+'" value="' + opath.get(obj,field.path) + '">'



        var path = opath.get(obj, field.path);


        if (current_name !== "" && !path) {
            path = opath.get(self.oget(current_name), field.path);
            s += ' inherit <a elepath="' + path + '" href="#' + path + '" class="elecontent" > ' + path + '</a>';
            s += ' from ' + '<a elepath="' + current_name + '" href="#' + current_name + '" class="elecontent" > ' + current_name + '</a>'
        } else {
            if (!path) {
                s += 'no object selected'
            } else {
                s += 'Current: <li> <a elepath="' + path + '" href="#' + path + '" class="elecontent" > ' + path + '</a> <button class="btn unset" data-id="' + obj.path +
                    '" ele-prop="' + field.path + '">X</button> </li>';

            }
        }

        s += "<br><input class=\"propselector22\" ele-has=\"" + field.has + "\" ele-list=\"" + field.lookup + "\" ele-pick=\"" + field.pick + "\" data-id=\"" + obj.path +
            "\" ele-prop=\"" + field.path + "\" >";




        return s;
    }

    types.lookup2 = function(obj, field) {
        var temps = obj.getStuff3(field.path, function(a) {
            return a
        }, field.path)
        var current_name = "",
            current_data = "";
        if (temps.length > 0) {
            current_name = temps[0].name
            current_data = temps[0].data;
        }

        var s = ''; //' <input type="text" data-id="'+obj.path+'/.'+field.path+'" value="' + opath.get(obj,field.path) + '">'
        s += "<select class=propselector2 data-has=\"" + field.has + "\" data-list=\"" + field.lookup + "\" data-pick=\"" + field.pick + "\" data-id=\"" +
            obj.path + "/." +
            field.path + "\"></select>";

        var path = opath.get(obj, field.path);


        if (current_name !== "" && !path) {
            path = opath.get(self.oget(current_name), field.path);
            s += ' inherit <a elepath="' + path + '" href="#' + path + '" class="elecontent" > ' + path + '</a>';
            s += ' from ' + '<a elepath="' + current_name + '" href="#' + current_name + '" class="elecontent" > ' + current_name + '</a>'
        } else {
            s += '<a elepath="' + path + '" href="#' + path + '" class="elecontent" > ' + path + '</a>';
        }

        return s;
    }




    return types;


}