/* This file is part of CPEE. CPEE is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. CPEE is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with CPEE (file COPYING in the main directory). If not, see . */ // TODO: changes in svg-script: // 1) drawing functions // 2) creation of svg-container (Bug: arrows on lines) // 3) after-function to insert using namespace of description // WfAdaptor: // Handles interaction between Illustartor and Description // e.g. Event fires to Adaptor to insert Element and Illustrator and Description do it function WfAdaptor(theme_base,doit) { // Controller {{{ // public variables {{{ this.illustrator; this.description; this.elements = {}; this.theme_base = theme_base; this.theme_dir = theme_base.replace(/theme.js/,''); // }}} // private variables {{{ var illustrator; var description; var self = this; // }}} // helper funtions this.set_description = function(desc,auto_update) { // public {{{ this.description.set_description(desc,auto_update); } // }}} this.get_description = function() { // public {{{ return description.get_description(); } // }}} this.notify = function() { // public {{{ } // }}} this.set_svg_container = function (container) { // {{{ illustrator.set_container(container); // TODO: shadowing the container element } // }}} // initialize this.illustrator = illustrator = new WfIllustrator(this); this.description = description = new WfDescription(this, this.illustrator); this.update = function(doit){ doit(self); }; $.getScript(theme_base, function() { manifestation = new WFAdaptorManifestation(self); illustrator.noarrow = manifestation.noarrow; illustrator.compact = manifestation.compact == true ? true : false; description.source = manifestation.source; var deferreds = []; // copy parent stuff for(element in manifestation.elements) { if (!manifestation.elements[element].description) { if (manifestation.elements[element].parent) { // take from parent if empty manifestation.elements[element].description = manifestation.elements[manifestation.elements[element].parent].description; } } if (!manifestation.elements[element].adaptor) { if (manifestation.elements[element].parent) { // take from parent if empty manifestation.elements[element].adaptor = manifestation.elements[manifestation.elements[element].parent].adaptor; } } } // doit for(element in manifestation.resources) { deferreds.push( $.ajax({ type: "GET", dataType: "xml", url: manifestation.resources[element], context: element, success: function(res){ manifestation.resources[this] = $(res.documentElement); } }) ); } for(element in manifestation.elements) { if (manifestation.elements[element].illustrator) { if (manifestation.elements[element].illustrator.svg) { deferreds.push( $.ajax({ type: "GET", dataType: "xml", url: manifestation.elements[element].illustrator.svg, context: element, success: function(res){ manifestation.elements[this].illustrator.svg = $(res.documentElement); } }) ); } illustrator.elements[element] = manifestation.elements[element].illustrator; illustrator.elements[element].type = manifestation.elements[element].type || 'abstract'; } if (manifestation.elements[element].description) { if ( typeof manifestation.elements[element].description === 'string' ) { manifestation.elements[element].description = [ manifestation.elements[element].description ]; } if ($.isArray(manifestation.elements[element].description)) { _.each(manifestation.elements[element].description,function(val,ind){ deferreds.push( $.ajax({ type: "GET", dataType: "xml", url: val, context: element, success: function(res){ manifestation.elements[this].description = $(res.documentElement); description.elements[this] = manifestation.elements[this].description; } }) ); }); } } if (manifestation.elements[element].adaptor) { self.elements[element] = manifestation.elements[element].adaptor; } } $.when.apply($, deferreds).then(function(x) { doit(self); }); }); } // }}} // WfIllustrator: // Is in charge of displaying the Graph. It is further able insert and remove elements with given ID's from the illsutration. function WfIllustrator(wf_adaptor) { // View {{{ // Variable {{{ // public this.height = 40; this.width = 40; this.noarrow = []; this.elements = {}; // the svgs this.svg = {}; this.draw = {}; this.compact = true; // private var self = this; var adaptor = null; // }}} // Generic Functions {{{ this.set_container = function(con) { // {{{ self.svg.container = con; self.svg.container.append($X('' + ' ' + ' ' + ' ' + '')); self.svg.defs = {}; self.svg.defs['unknown'] = $X('' + '' + '?' + ''); for(element in self.elements) if(self.elements[element].svg) { var sym = $X('').append(self.elements[element].svg.clone().children()); // append all children to symbol $.each(self.elements[element].svg.attr('class').split(/\s+/), function(index, item) { sym.addClass(item); }); // copy all classes from the root node self.svg.defs[element] = sym; } } // }}} var clear = this.clear = function() { // {{{ $('> :not(defs)', self.svg.container).each(function() {$(this).remove()}); } // }}} this.set_svg = function(graph) { // {{{ if(graph.max.row < 1) graph.max.row = 1; if(graph.max.col < 1) graph.max.col = 1; self.svg.container.attr({'height': (graph.max.row+0.3)*self.height, 'style': "min-width: " + (graph.max.col+0.55)*self.width + "px"}); self.svg.container.append(graph.svg); } // }}} this.get_node_by_svg_id = function(svg_id) { // {{{ return $('[element-id = \'' + svg_id + '\'] g.activities', self.svg.container); } // }}} this.get_elements = function() { // {{{ return $('g.element', self.svg.container); } // }}} // }}} // Helper Functions {{{ var draw_label = this.draw.draw_label = function (tname, id, label, row, col, group) { // {{{ var g = $X(''); var spli = $(label.split(/\n/)); spli.each(function(k,v) { var tspan = $X(''); if (k == 0) { tspan.text((label != '' ? '◤ ' : '') + v); } else { tspan.text(v); tspan.attr('dy','15'); tspan.attr('dx','15'); } g.append(tspan); }); bind_event(g,tname); if(group) { group.find('g.element[element-id=' + id + ']').append(g); } else {self.svg.container.children('g:first').append(g);} return g; } // }}} var draw_symbol = this.draw.draw_symbol = function (tname, sym_name, id, title, row, col, group) { // {{{ if(self.elements[sym_name] == undefined || self.elements[sym_name].svg == undefined) sym_name = 'unknown'; var g = $X('' + '' + '' + '0' + ',' + '0' + '' + '' + ''); var sym = self.svg.defs[sym_name].clone(); var tit = $X(''); tit.text(title); sym.prepend(tit); sym.attr('class','activities'); $(g[0].childNodes[0]).append(sym); // Binding events for symbol bind_event(sym,tname); if(group) {group.append(g);} else {self.svg.container.children('g:first').append(g);} return g; } // }}} var bind_event = this.draw.bind_event = function(sym,tname) { //{{{ for(event_name in adaptor.elements[tname]) { sym.bind(event_name, {'function_call':adaptor.elements[tname][event_name]}, function(e) { e.data.function_call($(this).parents('.element:first').attr('element-id'),e)}); if(event_name == 'mousedown') sym.bind('contextmenu', false); } } //}}} var draw_border = this.draw.draw_border = function(id, p1, p2, group) { // {{{ group.prepend($X('')); } // }}} var draw_tile = this.draw.draw_tile = function(id, p1, p2, group) { // {{{ group.prepend($X('')); } // }}} var draw_connection = this.draw.draw_connection = function(group, start, end, max_line, num_lines, arrow) { // {{{ if(((end['row']-start['row']) == 0) && ((end['col']-start['col']) == 0)) return; var line; if (arrow) line = $X(''); else line = $X(''); if (end['row']-start['row'] == 0 || end['col']-start['col'] == 0) { // straight line line.attr("d", "M " + String(start['col']*self.width) + "," + String(start['row']*self.height-15) +" "+ String(end['col']*self.width) + "," + String(end['row']*self.height-15) ); } else if (end['row']-start['row'] > 0) { // downwards if (end['col']-start['col'] > 0) {// left - right if (self.compact) { line.attr("d", "M " + String(start['col']*self.width) + "," + String(start['row']*self.height-15) +" "+ String(start['col']*self.width+14) + "," + String((end['row']-1)*self.height) +" "+ // first turn of hotizontal-line going away from node String(end['col']*self.width) + "," + String((end['row']-1)*self.height) +" "+ String(end['col']*self.width) + "," + String(end['row']*self.height-15) ); } else { line.attr("d", "M " + String(start['col']*self.width) + "," + String(start['row']*self.height-15) +" "+ String(end['col']*self.width) + "," + String(start['row']*self.height-15) +" "+ String(end['col']*self.width) + "," + String(end['row']*self.height-15) ); } } else { // right - left line.attr("d", "M " + String(start['col']*self.width) + "," + String(start['row']*self.height-15) +" "+ String(start['col']*self.width) + "," + String(end['row']*self.height-35) +" "+ String(end['col']*self.width+14) + "," + String(end['row']*self.height-35) +" "+ // last turn of horizontal-line going into the node String(end['col']*self.width) + "," + String(end['row']*self.height-15) ); } } else if(end['row']-start['row'] < 0) { // upwards if(num_lines > 1) {// ??? no idea line.attr("d", "M " + String(start['col']*self.width) + "," + String(start['row']*self.height-15) +" "+ String(start['col']*self.width) + "," + String((max_line-1)*self.height+5) +" "+ String(end['col']*self.width+20) + "," + String((max_line-1)*self.height+5) +" "+ String(end['col']*self.width+20) + "," + String(end['row']*self.height+25)+" "+ String(end['col']*self.width) + "," + String(end['row']*self.height-15) ); } else { line.attr("d", "M " + String(start['col']*self.width) + "," + String(start['row']*self.height-15) +" "+ String(end['col']*self.width+20) + "," + String(start['row']*self.height-15) +" "+ String(end['col']*self.width+20) + "," + String(end['row']*self.height+25)+" "+ String(end['col']*self.width) + "," + String(end['row']*self.height-15) ); } } // Seems to solve injection groups-line problem, but I guess it will cause problem when collapsing elements //if(group) {group.prepend(line);} //else {self.svg.container.append(line);} } // }}} // }}} // Initialize {{{ adaptor = wf_adaptor; // }}} } // }}} // WfDescription: // Manages the description. Is is further able to add/remove elements from the controlflow description. function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{ // public variables this.elements = {}; // the rngs this.source = null; // private variables var self = this; var adaptor; var illustrator; var description; var id_counter = {}; var update_illustrator = true; var labels = []; // Set Labels //{{{ this.set_labels = function(graph) { if (illustrator.compact == false) { if (labels.length > 0) { _.each(labels,function(a,key) { illustrator.draw.draw_label(a.tname, a.element_id, a.label, a.row, graph.max.col + 1, graph.svg); }); } } } //}}} // Generic Functions {{{ this.set_description = function(desc, auto_update) { // public {{{ if(auto_update != undefined) update_illustrator = auto_update; if(typeof desc == "string") { description = $($.parseXML(desc)); } else if(desc instanceof jQuery) { description = desc; } else { alert("WfDescription: unknown description type:\nConstructor-Name: " + desc.constructor + " / TypeOf: " + (typeof desc)); description = null; } id_counter = {}; labels = []; illustrator.clear(); var graph = parse(description.children('description').get(0), {'row':0,'col':0,final:false}); self.set_labels(graph); // set labels illustrator.set_svg(graph); } // }}} var gd = this.get_description = function() { // public {{{ var serxml = $(description.get(0).documentElement).clone(true); serxml.removeAttr('svg-id'); serxml.removeAttr('svg-type'); serxml.removeAttr('svg-subtype'); serxml.removeAttr('svg-label'); $('*[svg-id]',serxml).each(function(){ $(this).removeAttr('svg-id'); }); $('*[svg-type]',serxml).each(function(){ $(this).removeAttr('svg-type'); }); $('*[svg-subtype]',serxml).each(function(){ $(this).removeAttr('svg-subtype'); }); $('*[svg-label]',serxml).each(function(){ $(this).removeAttr('svg-label'); }); return serxml.serializeXML(); } // }}} this.get_node_by_svg_id = function(svg_id) { // {{{ return $('[svg-id = \'' + svg_id + '\']', description); } // }}} var context_eval = this.context_eval = function(what) { // {{{ return eval(what); } // }}} var get_free_id = this.get_free_id = function(other) { // {{{ var existing = new Array(); if (other) { if ($(other).attr('id')) { existing.push($(other).attr('id')); } $(other).find("[id]").each(function(k,v){ existing.push($(v).attr('id')); }); } $('*[id]', description).each(function(){existing.push($(this).attr('id'))}); var id = 1; while ($.inArray('a' + id,existing) != -1) { id += 1; } return 'a' + id; } // }}} var refresh = this.refresh = function(doit) { id_counter = {}; labels = []; illustrator.clear(); var graph = parse(description.children('description').get(0), {'row':0,'col':0}); self.set_labels(graph); // set labels illustrator.set_svg(graph); doit(self); } var update = this.update = function(svgid) { // {{{ id_counter = {}; if(update_illustrator){ labels = []; illustrator.clear(); var graph = parse(description.children('description').get(0), {'row':0,'col':0}); self.set_labels(graph); illustrator.set_svg(graph); } var newn = $('*[new=true]',description); newn.removeAttr('new'); if (newn.attr('svg-id') != undefined) adaptor.notify(newn.attr('svg-id')); else if (svgid != undefined) adaptor.notify(svgid); else if (newn.parent('[svg-id]').length > 0) adaptor.notify(newn.parent('[svg-id]').attr('svg-id')); else console.info('Something went horribly wrong'); } // }}} // }}} // Adaption functions {{{ this.insert_after = function(new_node, target, source_opts) { // {{{ if ($.isArray(new_node)) { $.each(new_node,function(k,v){ var nn = self.source(v,source_opts); target.after(nn); nn.attr('new','true'); }); } else { var nn = self.source(new_node,source_opts); target.after(nn); nn.attr('new','true'); } update(); } // }}} this.insert_first_into = function(new_node, target, source_opts) { // {{{ if ($.isArray(new_node)) { $.each(new_node,function(k,v){ var nn = self.source(v,source_opts); target.prepend(nn); nn.attr('new','true'); }); } else { var nn = self.source(new_node,source_opts); target.prepend(nn); nn.attr('new','true'); } update(); } // }}} this.insert_last_into = function(new_node, target) { // {{{ if ($.isArray(new_node)) { $.each(new_node,function(k,v){ var nn = self.source(v); target.append(nn); nn.attr('new','true'); }); } else { var nn = self.source(new_node); target.append(nn); nn.attr('new','true'); } update(); } // }}} this.remove = function(selector, target) {//{{{ var svgid; if(selector == undefined) { svgid = target.attr('svg-id'); target.remove() } else { svgid = $(selector, target).attr('svg-id'); if (!svgid) { svgid = target.attr('svg-id'); } $(selector, target).remove(); } update(svgid); } // }}} // }}} // Helper Functions {{{ var parse = function(root, parent_pos) { // private {{{ var pos = jQuery.extend(true, {}, parent_pos); var max = {'row': 0,'col': 0}; var prev = [parent_pos]; // connects parent with child(s), depending on the expansion var endnodes = []; var root_expansion = illustrator.elements[root.tagName].expansion(root); var block = {'max':{}}; // e.g. {'max':{'row':0,'col':0}, 'endpoints':[]}; var collapsed = false; var group = $X(''); if(root_expansion == 'horizontal') pos.row++; if(illustrator.elements[root.tagName].col_shift(root) == true && root_expansion != 'horizontal') pos.col++; if(root .tagName == 'description') { // First parsing {{{ pos.row++; max.row++; $(root).attr('svg-id','description'); group.attr('element-id','group-description'); illustrator.draw.draw_symbol('start', 'start', 'description', 'START', pos.row, pos.col, group); } // }}} $(root).children().each(function() { var tname = this.tagName; pos.final = illustrator.elements[tname].final ? true : false; // Calculate next position {{{ if($(this).attr('collapsed') == undefined || $(this).attr('collapsed') == 'false') { collapsed = false; } else { collapsed = true; } if(root_expansion == 'vertical') pos.row++; if(root_expansion == 'horizontal') { pos.col++; if (!illustrator.compact) { if (block.max.row) { pos.row = block.max.row + 1; } } } if(illustrator.elements[tname] != undefined && illustrator.elements[tname].type == 'complex' && !collapsed) { if(illustrator.elements[tname] != undefined && !illustrator.elements[tname].svg) pos.row--; // TODO: Remaining problem is the order inside the svg. Thats why the connection is above the icon block = parse(this, jQuery.extend(true, {}, pos)); group.append(block.svg); block.svg.attr('id', 'group-' + $(this).attr('svg-id')); if(illustrator.elements[tname].endnodes == 'aggregate') endnodes = []; // resets endpoints e.g. potential preceding primitive } else { if(illustrator.elements[tname] != undefined && illustrator.elements[tname].type == 'primitive' && illustrator.elements[tname].svg) { // This enables "invisble" elements, by returning undefined in the SVG function (e.g. constraints) block.max.row = pos.row; block.max.col = pos.col; block.endnodes = (!collapsed ? [pos] : [jQuery.extend(true, {}, pos)]); block.svg = group; } } // }}} // Set SVG-ID and labels {{{ if($(this).attr('id') == undefined) { if(id_counter[tname] == undefined) id_counter[tname] = -1; $(this).attr('svg-id', tname + '_' + (++id_counter[tname])); } else { $(this).attr('svg-id', $(this).attr('id')); } if (illustrator.elements[tname].label) { var lab = illustrator.elements[tname].label(this); $(this).attr('svg-label', lab); labels.push({row: pos.row, element_id: $(this).attr('svg-id'), tname: tname, label: lab}); } else { $(this).attr('svg-label', ''); } // }}} // Draw symbol {{{ var sym_name = ''; if(!illustrator.elements[tname]) {sym_name = 'unknown';} else if(typeof illustrator.elements[tname].resolve_symbol == 'function') {sym_name = illustrator.elements[tname].resolve_symbol(this);} else if(typeof illustrator.elements[tname].resolve_symbol == 'string') {sym_name = illustrator.elements[tname].resolve_symbol;} else {sym_name = tname;} $(this).attr('svg-type',tname); $(this).attr('svg-subtype',sym_name); if((illustrator.elements[tname] && illustrator.elements[tname].svg) || sym_name == 'unknown') { var g = illustrator.draw.draw_symbol(tname, sym_name, $(this).attr('svg-id'), $(this).attr('svg-label'), pos.row, pos.col, block.svg).addClass(illustrator.elements[tname] ? illustrator.elements[tname].type : 'primitive unknown'); if (illustrator.elements[sym_name].info) { var info = illustrator.elements[sym_name].info(this); _.each(info,function(val,key) { g.attr(key, val); }); } } else { console.log("no icon "+ tname);} if(illustrator.elements[tname] && illustrator.elements[tname].border) illustrator.draw.draw_border($(this).attr('svg-id'), pos, block.max, block.svg); if(illustrator.elements[tname] && illustrator.elements[tname].type == 'complex') illustrator.draw.draw_tile($(this).attr('svg-id'), pos, block.max, block.svg); // }}} // Calculate Connection {{{ if(illustrator.elements[tname] != undefined && illustrator.elements[tname].closeblock) { // Close Block if element e.g. loop for(node in block.endnodes) { if (!block.endnodes[node].final) { illustrator.draw.draw_connection(group, block.endnodes[node], pos, block.max.row+1, block.endnodes.length, true); } } } if(illustrator.elements[tname] != undefined && illustrator.elements[tname].endnodes != 'this') { for(i in block.endnodes) endnodes.push(block.endnodes[i]); // collects all endpoints from different childs e.g. alternatives from choose } else { endnodes = [jQuery.extend(true, {}, pos)]; } // sets this element as only endpoint (aggregate) if(prev[0].row == 0 || prev[0].col == 0) { // this enforces the connection from description to the first element illustrator.draw.draw_connection(group, { row: 1, col: 1 }, pos, null, null, true); } else { if ($.inArray(tname,illustrator.noarrow) == -1) { for (node in prev) { if (!prev[node].final) illustrator.draw.draw_connection(group, prev[node], pos, null, null, true); } } else { for(node in prev) { if (!prev[node].final) illustrator.draw.draw_connection(group, prev[node], pos, null, null, false); } } } // }}} // Prepare next iteration {{{ if(root_expansion == 'vertical') { prev = jQuery.extend(true, {}, endnodes); pos.row = block.max.row;} // covers e.g. input's for alternative, parallel_branch, ... everything with horizontal expansion if(root_expansion == 'horizontal') pos.col = block.max.col; if(max.row < block.max.row) max.row = block.max.row; if(max.col < block.max.col) max.col = block.max.col; // }}} }); if($(root).children().length == 0) { // empty complex found endnodes = [parent_pos]; max.row = parent_pos.row; max.col = parent_pos.col; } if(illustrator.elements[root.tagName].endnodes == 'this' && illustrator.elements[root.tagName].closeblock == false) {endnodes = [prev];} // closeblock == false, allows loop to close himselfe return {'endnodes': endnodes, 'max':max, 'svg':group}; } // }}} // }}} // Initialze {{{ adaptor = wf_adaptor; illustrator = wf_illustrator; // }}} } // }}}