/*
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;
// }}}
} // }}}