Commit 91c813bc authored by Krzysztof Kutt's avatar Krzysztof Kutt
Browse files

hyperlinks on diagram, improved scrooling and dragging (2012-06-09)

parent 2a1fe6f4
......@@ -187,8 +187,21 @@
break;
}
},
_normalizePoint: function(ev,element){
var $e = $(element);
var off = $e.offset();
var x = ev.pageX - off.left;
var y = ev.pageY - off.top;
return [
Math.round(x*(element.width/$e.width())),
Math.round(y*(element.height/$e.height()))
];
},
_createDOM: function(){
var diagram = this;
this.diagramNode = $('<div class="'+this.settings.diagramClass+'"></div>');
this.diagramNodeImg = $('<div class="'+this.settings.diagramClass+'-image"></div>').appendTo(this.diagramNode);
this.context = $('<canvas></canvas>').appendTo(this.diagramNodeImg).get(0).getContext("2d");
......@@ -199,23 +212,45 @@
if( ev.which === 1 ) {
$(this).data('dragStart',[ev.pageX,ev.pageY]).bind('mousemove.bpmn', function(ev){
var $t = $(this);
var init = $t.data('dragStart');
var init = $t.data('dragCurrent') || $t.data('dragStart');
if( init && Math.sqrt(Math.pow(init[0]-ev.pageX,2)+Math.pow(init[1]-ev.pageY,2)) > 5 ) {
$t.addClass('drag');
$t.scrollLeft($t.scrollLeft()+init[0]-ev.pageX);
$t.scrollTop($t.scrollTop()+init[1]-ev.pageY);
$t.data('dragStart',[ev.pageX,ev.pageY]);
$t.data('dragCurrent',[ev.pageX,ev.pageY]);
}
});
}
}).bind('mouseup.bpmn mouseleave.bpmn',function(){
$(this).data('dragStart',null);
}).bind('mouseup.bpmn mouseleave.bpmn',function(ev){
$(this).data('dragStart',null).data('dragCurrent',null);
$(this).unbind('mousemove.bpmn').removeClass('drag');
}).bind('mousewheel.bpmn',function(ev,delta){
ev.preventDefault();
var $t = $(this);
$t.scrollTop($t.scrollTop()-delta*72);
});
var ct = $t.scrollTop();
$t.scrollTop(ct-delta*72);
if( ct != $t.scrollTop() ) {
ev.preventDefault();
}
}).children('canvas').bind('mouseup.bpmn',function(ev){
var dc = $(this).parent().data('dragCurrent');
if( !dc && diagram.ge ) {
var point = diagram._normalizePoint(ev,this);
var act = diagram.ge.overClickableActivity(point);
if( act ) {
window.location = act.structure.href;
}
}
}).bind('mousemove.bpmn',function(ev){
if( diagram.ge ) {
var point = diagram._normalizePoint(ev,this);
var act = diagram.ge.overClickableActivity(point);
if( act ) {
diagram.diagramNode.css('cursor','pointer');
} else {
diagram.diagramNode.css('cursor','');
}
}
});
this._createMenu();
......@@ -560,6 +595,20 @@
this.spacing = typeof(spacing) != "undefined" ? spacing : 20;
this.flowPaths = {};
this._createElementsList(structure);
this._rememberClickableActivities();
},
_rememberClickableActivities: function(){
var el,m;
this.clickableActivities = [];
for( m in this.mapping ) {
el = this.elements[this.mapping[m][0]][this.mapping[m][1]];
if( el.element === "activity" && ( el.structure.href || el.structure.activities ) ) {
this.clickableActivities.push(el);
}
}
},
_createElementsList: function(structure){
......@@ -886,7 +935,7 @@
if( this.group && this.group.special && this.group.special[bi] ) {
el = this.group.special[bi];
el.setOffsetX(boundingBox[2]-(b+1)*100);
el.setOffsetY(this.structure.markers && this.structure.markers.length ? h-50 : h-65);
el.setOffsetY(h-65);
this.boundary[el.id] = el;
}
}
......@@ -923,12 +972,14 @@
getBoundingBox: function(withAnnots){
var cBB = this._getChildrenBoundingBox();
var bb = [this.offsetX,this.offsetY,cBB[2]+2*this.padding,cBB[3]+2*this.padding];
var mh,b;
var mh,b,nh;
nh = this.structure.markers && this.structure.markers.length ? 10 : 0;
if( this.structure.name ) {
bb[3] += this.context.getTextHeight(this.structure.name,cBB[2])+this.spacing;
}
if( withAnnots ) {
mh = 0;
nh = 0;
for( b in this._getBoundaryEvents(bb) ) {
mh = Math.max(mh,this.boundary[b].getBoundingBox(true)[3]);
}
......@@ -936,6 +987,7 @@
} else if ( !$.isEmptyObject(this._getBoundaryEvents(bb)) ) {
bb[3] += 25;
}
bb[3] += nh;
return bb;
},
......@@ -1225,6 +1277,43 @@
this._drawDebug(debug);
this.context.restore();
},
/**
* Checks if the point is in the clickable activity (the one possesing
* href atribute in its structure) and if so returns it.
*
* @param Array point [x,y] point to check
* @returns The most nested clickable activity the point is in or false
*/
overClickableActivity: function(point) {
var i,bb,found;
if( this.padding ) {
point[0] -= this.padding;
point[1] -= this.padding;
}
if( this.structure.name ) {
var tbb = this.getBoundingBox();
point[1] -= this.context.getTextHeight(this.structure.name,tbb[2]-2*(this.padding||0))+this.spacing;
}
for( i = 0; i < this.clickableActivities.length; i++ ) {
if( this.clickableActivities[i].overClickableActivity ) {
found = this.clickableActivities[i].overClickableActivity([
point[0] - this.clickableActivities[i].offsetX,
point[1] - this.clickableActivities[i].offsetY
]);
if( found ) {
return found;
}
}
if( this.clickableActivities[i].structure.href ) {
bb = this.clickableActivities[i].getBoundingBox(true);
if( Geometry.inside(bb,point) ) {
return this.clickableActivities[i];
}
}
}
return false;
}
});
......@@ -1689,7 +1778,7 @@
if( this.group && this.group.special && this.group.special[bi] ) {
el = this.group.special[bi];
el.setOffsetX(Math.max(140,100*this.structure.boundary.length-40)-(b+1)*100);
el.setOffsetY(this.structure.markers && this.structure.markers.length ? h+20 : h);
el.setOffsetY(h);
this.boundary[el.id] = el;
}
}
......@@ -1702,10 +1791,13 @@
var t = this.getName();
var h = this.context.getTextHeight(t,100);
var w = 140;
var mh,b;
var mh,b,nh;
nh = this.structure.markers && this.structure.markers.length ? 10 : 0;
if ( !$.isEmptyObject(this._getBoundaryEvents()) ) {
mh = 0;
nh = 0;
for( b in this._getBoundaryEvents() ) {
mh = Math.max(mh,this.boundary[b].getBoundingBox(withAnnots)[3]);
}
......@@ -1716,7 +1808,7 @@
}
w = Math.max(w,100*this.structure.boundary.length-40);
}
return [this.offsetX,this.offsetY,w,h+40];
return [this.offsetX,this.offsetY,w,h+nh+40];
},
_drawMessage: function(invert,instantiate){
......@@ -1917,13 +2009,15 @@
var bb = this.getBoundingBox();
if ( this.structure.markers ) {
bb[3] += 10;
ml = this.structure.markers.length;
for( m = 0; m < ml; m++) {
this._drawMarker( bb[0] + bb[2]/2 - ml*10 + m*20, bb[1]+bb[3]-20, this.structure.markers[m] );
}
}
if( this.structure.href ) {
this.context.strokeStyle = '#060';
}
switch( this.structure.activityType ) {
case "call":
......@@ -2002,7 +2096,6 @@
var bb = this.getBoundingBox();
if ( this.structure.markers ) {
bb[3] += 10;
ml = this.structure.markers.length;
for( m = 0; m < ml; m++) {
......@@ -2010,10 +2103,16 @@
}
}
if( this.structure.href ) {
this.context.strokeStyle = '#060';
}
switch( this.structure.activityType ) {
case "event":
if( this.context.setLineDash ) {
this.context.setLineDash([10,5]);
} else if ( this.structure.href ){
this.context.strokeStyle = '#5b5';
} else {
this.context.strokeStyle = '#ccc';
}
......
base simplebpmn
author Urszula Ciaputa
email u.ciaputa@gmail.com
date 2012-06-23
date 2012-06-09
name simplebpmn plugin
desc Simple plugin that allows rendering of the diagrams specified in SimpleBPMN notation
......@@ -24,7 +24,7 @@ class syntax_plugin_simplebpmn_bpmninc extends DokuWiki_Syntax_Plugin {
}
public function getAllowedTypes() {
return array('');
return array();
}
public function getPType() {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment