Topology editor technical design

[grdw]

Technical

There is one global class called GraphEditor. This serves purely as an interface between the other components. When you're at the new form the GraphEditor will take a default hierarchical data.

var GraphEditor = (function () {
    'use strict';

    function addNode() {
        // Draw a node <circle/>
        this.graphData.add(this, { <Form data/> });
    }

    function removeNode() {
        // Remove a node <circle/>
        this.graphData.delete(this);
    }

    function updateNode() {
        this.graphData.update(this, { <Form data/> });
    }

    function showForm() {
    }

    GraphEditor.prototype = {
        initialize: function (data) {
            // Draw the node structure from data
            // - node (click -> showForm())
            // - addButton (click -> addNode())
        },

        updateHiddenForm: function () {
            $("textarea.graph").text(HierarchyTransfomer.toHierarchy(this.graphData.data));
        }
    }

    function GraphEditor(data) {
        this.flatData  = HierarchyTransfomer.fromHierarch(data);
        this.graphData = new GraphData(this.flatData);
    }

    return GraphEditor;
}());

In the class above there are two components visible the GraphData being one of them. I don't want to flood the DOM with lots of data- elements (like the TechnologiesForm). Instead I want to keep the data in the Javascript window somewhere or as a mere part of the GraphData instance. This is a sort of CRUD like interface:

var GraphData = (function () {
    'use strict';

    GraphData.prototype = {
        add: function (domEl, data) {
            var newId = "N" + new Date().getTime();
            this.data[newId] = $.extend(data, parent_id: domEl.getAttribute('data-id'));
        },

        update: function (domEl) {
        },

        remove: function (domEl) {
        }        
    }

    function GraphData(data) {
         this.data = data;
    }

    return GraphData;
}());

This module should be able to take hierarchal data like:

{ 
   name: "HV",
   children: [ { name: "MV" } ] 
}

to:

{  
  "<identifier-hv>":   { name: "HV" },
   "<identifier-mv>":  { name: "MV", parent: "<identifier-hv>" }
}

and the other way around.

var HierarchyTransformer = (function () {
    'use strict';

    return {
        fromHierarchy: function (data) {},
        toHierarchy: function (data) {}
    }
} ());