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

simplebpmn/js/bpmn.js

@@ -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';
                     }

simplebpmn/plugin.info.txt

 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

simplebpmn/syntax/bpmninc.php

@@ -24,7 +24,7 @@ class syntax_plugin_simplebpmn_bpmninc extends DokuWiki_Syntax_Plugin {
     }
     
     public function getAllowedTypes() {
-        return array('');
+        return array();
     }
 
     public function getPType() {