testing svg canvas

philogb · Aug 28, 2009 · 4e48a4a · 4e48a4a
1 parent 79d419c
commit 4e48a4a
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 13 deletions.
diff --git a/Source/Canvas.js b/Source/Canvas.js
@@ -214,7 +214,11 @@ this.Canvas = (function(){
         }
         mainContainer.appendChild(canvas);
         mainContainer.appendChild(labelContainer);
-        get(opt.injectInto).appendChild(mainContainer);
+        if($type(opt.injectInto) == 'string') {
+          get(opt.injectInto).appendChild(mainContainer);
+        } else {
+          opt.injectInto.appendChild(mainContainer);
+        }
 
         //create contexts
         ctx = canvas.getContext('2d');

diff --git a/Source/Graph.Plot.js b/Source/Graph.Plot.js
@@ -92,12 +92,12 @@ Graph.Plot = {
       (end code)
     */
     getLabelContainer: function() {
-        return this.labelContainer? this.labelContainer : this.labelContainer = document.getElementById(this.viz.config.labelContainer);
+        return this.labelContainer? this.labelContainer : this.labelContainer = document.getElementById('svg-labelcontainer');//this.viz.config.labelContainer);
     },
 
     /*
        Method: getLabel
-    
+      
        Lazy fetcher for the label DOM element.
 
        Parameters:
@@ -188,8 +188,8 @@ Graph.Plot = {
     disposeLabel: function(id) {
         var elem = this.getLabel(id);
         if(elem && elem.parentNode) {
-      elem.parentNode.removeChild(elem);
-    }  
+          elem.parentNode.removeChild(elem);
+        }  
     },
 
     /*
@@ -411,16 +411,26 @@ Graph.Plot = {
     plotLabel: function(canvas, node, controller) {
     var id = node.id, tag = this.getLabel(id);
         if(!tag && !(tag = document.getElementById(id))) {
-            tag = document.createElement('div');
+            var ns = 'http://www.w3.org/2000/svg';
+            tag = document.createElementNS(ns, 'svg:text');
+            var tspan = document.createElementNS(ns, 'svg:tspan');
+            tspan.appendChild(document.createTextNode('some text node'));
+            tag.appendChild(tspan);
+
+            //tag = document.createElement('div');
             var container = this.getLabelContainer();
             container.appendChild(tag);
-            tag.id = id;
-            tag.className = 'node';
-            tag.style.position = 'absolute';
-            controller.onCreateLabel(tag, node);
+            tag.setAttribute('id', id);
+            tag.setAttribute('class', 'node');
+            tag.setAttribute('font-size', '22');
+            tag.setAttribute('fill','red');
+            //tag.id = id;
+            //tag.className = 'node';
+            //tag.style.position = 'absolute';
+            //controller.onCreateLabel(tag, node);
             this.labels[node.id] = tag;
         }
-    this.placeLabel(tag, node, controller);
+        this.placeLabel(tag, node, controller);
     },
 
   /*
@@ -442,8 +452,8 @@ Graph.Plot = {
         var ctx = canvas.getCtx();
 
         ctx.lineWidth = width;
-    ctx.fillStyle = color;
-    ctx.strokeStyle = color; 
+        ctx.fillStyle = color;
+        ctx.strokeStyle = color; 
 
         var f = node.data && node.data.$type || nconfig.type;
         this.nodeTypes[f].call(this, node, canvas, animating);

diff --git a/Source/RGraph.js b/Source/RGraph.js
@@ -527,10 +527,16 @@ RGraph.Plot = new Class({
             x: Math.round(pos.x + radius.width/2),
             y: Math.round(pos.y + radius.height/2)
         };
+        tag.setAttribute('x', labelPos.x);
+        tag.setAttribute('y', labelPos.y);
+        tag.setAttribute('transform', 'rotate(' + node.pos.theta * 360 / (Math.PI *2) 
+          + ' ' + labelPos.x + ' ' + labelPos.y + ')');
+/*
         var style = tag.style;
         style.left = labelPos.x + 'px';
         style.top  = labelPos.y + 'px';
         style.display = this.fitsInCanvas(labelPos, canvas)? '' : 'none';
+*/
         controller.onPlaceLabel(tag, node);
   }
 });

diff --git a/make.py b/make.py
@@ -109,5 +109,7 @@ def make_build(fancy=False):
     f.close()
     print "Done. Compressing Library..."
     system('java -jar Extras/' + YC + ' Jit/jit.js > Jit/jit-yc.js')
+    print "Done. Zipping..."
+    system('zip -r Jit/ Jit.zip')
     print "Done, I guess."
 if __name__ == "__main__": main()
diff --git a/tests.py b/tests.py
@@ -93,6 +93,19 @@
             """,
             'Extras': ['excanvas.js'],
             'Example':True
+        },
+        {
+            'Title': 'SVG label interface',
+            'Description': 
+            """
+            You can do the following operations with the RGraph<br /><br />
+            1.- Removing subtrees or nodes<br /><br />
+            2.- Removing edges<br /><br />
+            3.- Adding another graph, also called sum<br /><br />
+            4.- Morphing (or transforming) the graph into another one<br />
+            """,
+            'Extras': ['excanvas.js'],
+            'Example':False
         }]
     ,