oe-feel-designer.html

<!--
©2015-2016 EdgeVerve Systems Limited (a fully owned Infosys subsidiary), Bangalore, India. All Rights Reserved.
-->
<link rel="import" href="all-imports.html">
<link rel="import" href="elements/oe-feel-editor.html">
<link rel="import" href="elements/oe-feel-footer.html">
<link rel="import" href="elements/oe-feel-component.html">
<dom-module id="oe-feel-designer">
    <template>
        <style>
            :host {
                position: relative;
                display: block;
                box-sizing: border-box;
                height: calc(100vh - 40px);
            }

            .component-container {
                height: 100%;
            }
        </style>
        <div class="component-container layout vertical">
            <div class="component-workspace layout horizontal flex">
                <oe-feel-editor id="editor" 
                on-editor-panel-closed="_EditorClosed"
                on-editor-panel-opened="_EditorOpened"
                services="{{serviceList}}"
                decision-graph="[[_getCurrentGraph(_currentStackIndex)]]"></oe-feel-editor>
            </div>
        </div>
        <oe-feel-footer studio-footer hidden></oe-feel-footer>
    </template>
    <script>
        Polymer({
            is: "oe-feel-designer",
            listeners: {
                'decision-graph-selected': '_graphSelected',
                'add-feel-component': '_handleAddNode',
                'delete-component': '_handleDeleteNode',
                'update-component-position': '_handlePositionUpdate',
                'undo-decision-graph': '_handleUndoGraph',
                'redo-decision-graph': '_handleRedoGraph',
                'validation-complete':'_handleValidationResult',
                'update-connection': '_handleConnectionUpdate',
                'delete-connection':'_handleDeleteConnection',
                'update-node-data': '_updateNodeData',
                'init-save-graph':'_initSaveGraph',
                'init-save-graph-as':'_initSaveAsGraph',
                'load-decision-table':'_loadDecisionTable'
            },
            attached:function(){
                this._clearStack();
            },
            _clearStack: function () {
                this.set('curGraphStack', []);
                this.set('_currentStackIndex', -1);
            },
            _getCurrentGraph: function (index) {
                if (index > -1) {
                    var graph = JSON.parse(JSON.stringify(this.curGraphStack[index]));
                    return graph;
                }else{
                    return null;
                }
            },
            _pushToStack: function (graph) {
                this.curGraphStack.splice(this._currentStackIndex + 1);
                this.push('curGraphStack', JSON.parse(JSON.stringify(graph)));
                this.set('_currentStackIndex', this._currentStackIndex + 1);
                this._footerFire('stack-updated', {
                    curIndex: this._currentStackIndex,
                    stackLength: this.curGraphStack.length
                })
            },
            _footerFire: function (name, detail) {
                this.fire('oe-studio-footer-action', {
                    'event': name,
                    'payload': detail
                });
            },
            _EditorOpened:function(e){
                this._footerFire('change-toolbar-display',{show:false});
            },
            _EditorClosed:function(e){
                this._footerFire('change-toolbar-display',{show:true});
            },
            //Event Handlers
            _graphSelected: function (e) {
                var self = this;
                this.$.editor.fire('reset-workspace-view');
                this._clearStack();
                if(!e.detail){
                    this.set('curGraphStack',[]);
                    this.set('_currentStackIndex',0);
                    return;
                }
                var graph = e.detail.graph;
                this.set('serviceList',e.detail.service);
                if (graph) {
                    this._pushToStack(graph);
                    this._handleValidateGraph();
                }
            },
            _handleAddNode: function (e) {
                var node = e.detail;
                var decisiongraph = this._getCurrentGraph(this._currentStackIndex);
                var feel = this._getFEEL(node);
                if (feel && feel.length > 0) {
                    decisiongraph.data[node.name] = feel;
                }
                decisiongraph.graph.nodes.push(node);
                this._pushToStack(decisiongraph);
                this._handleValidateGraph();
            },
            _handleDeleteNode: function (e) {
                var nodeToDelete = e.detail;
                var decisiongraph = this._getCurrentGraph(this._currentStackIndex);
                var removeIndex = decisiongraph.graph.nodes.findIndex(function (node) {
                    return node.id === nodeToDelete.id;
                });
                decisiongraph.graph.nodes.splice(removeIndex, 1);
                decisiongraph.graph.connections = decisiongraph.graph.connections.filter(function (
                    connection) {
                    return (connection.from !== nodeToDelete.i && nodeToDelete.i !== connection.to);
                });
                delete decisiongraph.data[nodeToDelete.name];
                this._pushToStack(decisiongraph);
            },
            _handlePositionUpdate: function (e) {
                var detail = e.detail;
                var decisiongraph = this._getCurrentGraph(this._currentStackIndex);
                var updatedNode = decisiongraph.graph.nodes.find(function (node) {
                    return node.i === detail.nodeIndex
                });
                updatedNode.x = detail.x;
                updatedNode.y = detail.y;
                this._pushToStack(decisiongraph);
            },
            _handleUndoGraph: function () {
                if (this._currentStackIndex > 0) {
                    this.set('_currentStackIndex', this._currentStackIndex - 1);
                    this._footerFire('stack-updated', {
                        curIndex: this._currentStackIndex,
                        stackLength: this.curGraphStack.length
                    })
                }
            },
            _handleRedoGraph: function () {
                if (this._currentStackIndex < (this.curGraphStack.length - 1)) {
                    this.set('_currentStackIndex', this._currentStackIndex + 1);
                    this._footerFire('stack-updated', {
                        curIndex: this._currentStackIndex,
                        stackLength: this.curGraphStack.length
                    })
                }
            },
            _handleValidateGraph:function(){
                var decisiongraph = this._getCurrentGraph(this._currentStackIndex);
                this._footerFire('validate-graph',decisiongraph);
            },
            _handleValidationResult:function(e){
                var result = e.detail;
                var decisiongraph = this._getCurrentGraph(this._currentStackIndex);
                decisiongraph.graph.nodes.forEach(function(node){
                    if(result[node.name]){
                        node.__validity = result[node.name]
                    };
                });
                this.set('curGraphStack.'+this._currentStackIndex,decisiongraph);
                var stackIndex = this._currentStackIndex;
                this.set('_currentStackIndex',-1);
                this.set('_currentStackIndex',stackIndex);
            },
            _handleConnectionUpdate: function (event) {
                var newConnection = event.detail;
                var decisiongraph = this._getCurrentGraph(this._currentStackIndex);
                var prevIndex = decisiongraph.graph.connections.findIndex(function (conn) {
                    return conn.from == newConnection.from && conn.to == newConnection.to;
                });
                if (prevIndex >= 0) {
                    decisiongraph.graph.connections.splice(prevIndex, 1, newConnection);
                } else {
                    decisiongraph.graph.connections.push(newConnection);
                }
                this._pushToStack(decisiongraph);
            },
            _handleDeleteConnection:function(event){
                var newConnection = event.detail;
                var decisiongraph = this._getCurrentGraph(this._currentStackIndex);
                var prevIndex = decisiongraph.graph.connections.findIndex(function (conn) {
                    return conn.from == newConnection.from && conn.to == newConnection.to;
                });
                if (prevIndex >= 0) {
                    decisiongraph.graph.connections.splice(prevIndex, 1);
                }
                this._pushToStack(decisiongraph);
            },
            _initSaveGraph:function(){
                var decisiongraph = this._getCurrentGraph(this._currentStackIndex);
                this._footerFire('save-graph',decisiongraph);
            },
            _initSaveAsGraph:function(){
                var decisiongraph = this._getCurrentGraph(this._currentStackIndex);
                this._footerFire('save-graph-as',decisiongraph);
            },
            _updateNodeData: function (event) {
                var detail = event.detail;
                var decisiongraph = this._getCurrentGraph(this._currentStackIndex);
                if(detail.node.__meta){
                    this._footerFire('save-decision-table',detail);
                    return;
                }
                var oldNode = decisiongraph.graph.nodes.find(function (node) {
                    return node.id === detail.node.id;
                });
                delete decisiongraph.data[oldNode.name];
                oldNode.data = detail.data;
                oldNode.name = detail.node.name;
                var feel = this._getFEEL(oldNode);
                if (feel && feel.length > 0) {
                    decisiongraph.data[oldNode.name] = feel;
                }
                detail.cb && detail.cb();
                this._pushToStack(decisiongraph);
                this._handleValidateGraph();
            },

            //FEEl Creation
            _getFEEL: function (node) {
                var feelStr = "";
                switch (node.nodeType) {
                    case "DECISION_TABLE":
                        feelStr = this._getDecisionTableFEEL(node.data, node.name);
                        break;
                    case "BOXED_INVOCATION":
                        feelStr = this._getInvocationFEEL(node.data);
                        break;
                    case "BOXED_CONTEXT":
                        feelStr = this._getContextFEEL(node.data, node.name);
                        break;
                    case "BUSINESS_MODEL":
                        if (node.data.decisionType === "DECISION_TABLE") {
                            feelStr = this._getDecisionTableFEEL(node.data.data, node.name)
                        } else {
                            feelStr = this._getContextFEEL(node.data.data, node.name);
                        }
                        break;
                    default:break;
                }
                return feelStr;
            },
            _getDecisionTableFEEL: function (data, name) {

                function getArrayString(arr) {
                    return "[" + arr.map(function (s) {
                        return "'" + s + "'";
                    }) + "]"
                }

                function valueArr(arr){
                    return "["+arr.map(function(s){
                        return "["+s+"]"
                    })+"]";
                }

                var feel = "decision table(";
                feel += "input expression list : " + getArrayString(data.inputExpressionList) + ",";
                
                if(data.outputs.length == 1){
                    feel += "outputs : \""+ data.outputs[0]+"\",";
                }else{
                    feel += "outputs : " + getArrayString(data.outputs) + ",";
                }
                feel += "input values list : " + valueArr(data.inputValues) + ",";
                feel += "output values : " + valueArr(data.outputValues)+ ",";
                feel += "rule list : [" + data.ruleList.map(function (arr) {
                    return "["+arr.map(function(s){return "'"+s+"'"}).join(",")+"]"
                }) + "],";
                feel += "id : '" + name + "',";
                feel += "hit policy : '" + data.hitPolicy + "')";
                return feel;
            },
            _getInvocationFEEL: function (data) {
                var feel = "" + data.target + " (";
                feel += data.parameters.map(function (param) {
                    return param.key + " : " + param.value + "";
                });
                feel += ")";
                return feel;
            },
            _getContextFEEL: function (data, name) {
                var feel = "{";
                feel += data.parameters.map(function (param) {
                    return param.key + " : " + param.value + "";
                });
                switch (data.result.type) {
                    case "DECISION_TABLE":
                        feel += ",result : " + this._getDecisionTableFEEL(data.result.data, name);
                        break;
                    case "literal-expression":
                        feel += ",result : " + data.result.value;
                        break;
                    case "none":
                        break;
                    default:
                        break;
                }
                feel += "}";
                return feel;
            },
            //Decision Table Hanlders
            _loadDecisionTable:function(event){
                var table = event.detail;
                if(!table.decisionRules){
                    this.$.editor._closeSetting();
                    return;
                }
                var data = JSON.parse(table.decisionRules);
                data.inputValues = data.inputValues || data.inputValuesList.slice();
                delete data.inputValuesList;
                var decisionNode = {
                    name : table.name,
                    data : data,
                    nodeType:"DECISION_TABLE",
                    __meta:table
                }
                this.$.editor.fire('open-node-setting',decisionNode);
            }
        })
    </script>
</dom-module>