git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojox/gfx/svg_attach.js

   1 dojo.require("dojox.gfx.svg");
   2
   3 dojo.experimental("dojox.gfx.svg_attach");
   4
   5 (function(){
   6         dojox.gfx.attachNode = function(node){
   7                 // summary: creates a shape from a Node
   8                 // node: Node: an SVG node
   9                 if(!node) return null;
  10                 var s = null;
  11                 switch(node.tagName.toLowerCase()){
  12                         case dojox.gfx.Rect.nodeType:
  13                                 s = new dojox.gfx.Rect(node);
  14                                 attachRect(s);
  15                                 break;
  16                         case dojox.gfx.Ellipse.nodeType:
  17                                 s = new dojox.gfx.Ellipse(node);
  18                                 attachShape(s, dojox.gfx.defaultEllipse);
  19                                 break;
  20                         case dojox.gfx.Polyline.nodeType:
  21                                 s = new dojox.gfx.Polyline(node);
  22                                 attachShape(s, dojox.gfx.defaultPolyline);
  23                                 break;
  24                         case dojox.gfx.Path.nodeType:
  25                                 s = new dojox.gfx.Path(node);
  26                                 attachShape(s, dojox.gfx.defaultPath);
  27                                 break;
  28                         case dojox.gfx.Circle.nodeType:
  29                                 s = new dojox.gfx.Circle(node);
  30                                 attachShape(s, dojox.gfx.defaultCircle);
  31                                 break;
  32                         case dojox.gfx.Line.nodeType:
  33                                 s = new dojox.gfx.Line(node);
  34                                 attachShape(s, dojox.gfx.defaultLine);
  35                                 break;
  36                         case dojox.gfx.Image.nodeType:
  37                                 s = new dojox.gfx.Image(node);
  38                                 attachShape(s, dojox.gfx.defaultImage);
  39                                 break;
  40                         case dojox.gfx.Text.nodeType:
  41                                 var t = node.getElementsByTagName("textPath");
  42                                 if(t && t.length){
  43                                         s = new dojox.gfx.TextPath(node);
  44                                         attachShape(s, dojox.gfx.defaultPath);
  45                                         attachTextPath(s);
  46                                 }else{
  47                                         s = new dojox.gfx.Text(node);
  48                                         attachText(s);
  49                                 }
  50                                 attachFont(s);
  51                                 break;
  52                         default:
  53                                 //console.debug("FATAL ERROR! tagName = " + node.tagName);
  54                                 return null;
  55                 }
  56                 if(!(s instanceof dojox.gfx.Image)){
  57                         attachFill(s);
  58                         attachStroke(s);
  59                 }
  60                 attachTransform(s);
  61                 return s;       // dojox.gfx.Shape
  62         };
  63
  64         dojox.gfx.attachSurface = function(node){
  65                 // summary: creates a surface from a Node
  66                 // node: Node: an SVG node
  67                 var s = new dojox.gfx.Surface();
  68                 s.rawNode = node;
  69                 var def_elems = node.getElementsByTagName("defs");
  70                 if(def_elems.length == 0){
  71                         return null;    // dojox.gfx.Surface
  72                 }
  73                 s.defNode = def_elems[0];
  74                 return s;       // dojox.gfx.Surface
  75         };
  76
  77         var attachFill = function(object){
  78                 // summary: deduces a fill style from a node.
  79                 // object: dojox.gfx.Shape: an SVG shape
  80                 var fill = object.rawNode.getAttribute("fill");
  81                 if(fill == "none"){
  82                         object.fillStyle = null;
  83                         return;
  84                 }
  85                 var fillStyle = null, gradient  = dojox.gfx.svg.getRef(fill);
  86                 if(ref){
  87                         switch(gradient.tagName.toLowerCase()){
  88                                 case "lineargradient":
  89                                         fillStyle = _getGradient(dojox.gfx.defaultLinearGradient, gradient);
  90                                         dojo.forEach(["x1", "y1", "x2", "y2"], function(x){
  91                                                 fillStyle[x] = gradient.getAttribute(x);
  92                                         });
  93                                         break;
  94                                 case "radialgradient":
  95                                         fillStyle = _getGradient(dojox.gfx.defaultRadialGradient, gradient);
  96                                         dojo.forEach(["cx", "cy", "r"], function(x){
  97                                                 fillStyle[x] = gradient.getAttribute(x);
  98                                         });
  99                                         fillStyle.cx = gradient.getAttribute("cx");
 100                                         fillStyle.cy = gradient.getAttribute("cy");
 101                                         fillStyle.r  = gradient.getAttribute("r");
 102                                         break;
 103                                 case "pattern":
 104                                         fillStyle = dojo.lang.shallowCopy(dojox.gfx.defaultPattern, true);
 105                                         dojo.forEach(["x", "y", "width", "height"], function(x){
 106                                                 fillStyle[x] = gradient.getAttribute(x);
 107                                         });
 108                                         fillStyle.src = gradient.firstChild.getAttributeNS(dojox.gfx.svg.xmlns.xlink, "href");
 109                                         break;
 110                         }
 111                 }else{
 112                         fillStyle = new dojo.Color(fill);
 113                         var opacity = rawNode.getAttribute("fill-opacity");
 114                         if(opacity != null){ fillStyle.a = opacity; }
 115                 }
 116                 object.fillStyle = fillStyle;
 117         };
 118
 119         var _getGradient = function(defaultGradient, gradient){
 120                 var fillStyle = dojo.clone(defaultGradient);
 121                 fillStyle.colors = [];
 122                 for(var i = 0; i < gradient.childNodes.length; ++i){
 123                         fillStyle.colors.push({
 124                                 offset: gradient.childNodes[i].getAttribute("offset"),
 125                                 color:  new dojo.Color(gradient.childNodes[i].getAttribute("stop-color"))
 126                         });
 127                 }
 128                 return fillStyle;
 129         };
 130
 131         var attachStroke = function(object){
 132                 // summary: deduces a stroke style from a node.
 133                 // object: dojox.gfx.Shape: an SVG shape
 134                 var rawNode = object.rawNode, stroke = rawNode.getAttribute("stroke");
 135                 if(stroke == null || stroke == "none"){
 136                         object.strokeStyle = null;
 137                         return;
 138                 }
 139                 var strokeStyle = object.strokeStyle = dojo.clone(dojox.gfx.defaultStroke);
 140                 var color = new dojo.Color(stroke);
 141                 if(color){
 142                         strokeStyle.color = color;
 143                         strokeStyle.color.a = rawNode.getAttribute("stroke-opacity");
 144                         strokeStyle.width = rawNode.getAttribute("stroke-width");
 145                         strokeStyle.cap = rawNode.getAttribute("stroke-linecap");
 146                         strokeStyle.join = rawNode.getAttribute("stroke-linejoin");
 147                         if(strokeStyle.join == "miter"){
 148                                 strokeStyle.join = rawNode.getAttribute("stroke-miterlimit");
 149                         }
 150                         strokeStyle.style = rawNode.getAttribute("dojoGfxStrokeStyle");
 151                 }
 152         };
 153
 154         var attachTransform = function(object){
 155                 // summary: deduces a transformation matrix from a node.
 156                 // object: dojox.gfx.Shape: an SVG shape
 157                 var matrix = object.rawNode.getAttribute("transform");
 158                 if(matrix.match(/^matrix\(.+\)$/)){
 159                         var t = matrix.slice(7, -1).split(",");
 160                         object.matrix = dojox.gfx.matrix.normalize({
 161                                 xx: parseFloat(t[0]), xy: parseFloat(t[2]),
 162                                 yx: parseFloat(t[1]), yy: parseFloat(t[3]),
 163                                 dx: parseFloat(t[4]), dy: parseFloat(t[5])
 164                         });
 165                 }else{
 166                         object.matrix = null;
 167                 }
 168         };
 169
 170         var attachFont = function(object){
 171                 // summary: deduces a font style from a Node.
 172                 // object: dojox.gfx.Shape: an SVG shape
 173                 var fontStyle = object.fontStyle = dojo.clone(dojox.gfx.defaultFont),
 174                         r = object.rawNode;
 175                 fontStyle.style = r.getAttribute("font-style");
 176                 fontStyle.variant = r.getAttribute("font-variant");
 177                 fontStyle.weight = r.getAttribute("font-weight");
 178                 fontStyle.size = r.getAttribute("font-size");
 179                 fontStyle.family = r.getAttribute("font-family");
 180         };
 181
 182         var attachShape = function(object, def){
 183                 // summary: builds a shape from a node.
 184                 // object: dojox.gfx.Shape: an SVG shape
 185                 // def: Object: a default shape template
 186                 var shape = object.shape = dojo.clone(def), r = object.rawNode;
 187                 for(var i in shape) {
 188                         shape[i] = r.getAttribute(i);
 189                 }
 190         };
 191
 192         var attachRect = function(object){
 193                 // summary: builds a rectangle shape from a node.
 194                 // object: dojox.gfx.Shape: an SVG shape
 195                 attachShape(object, dojox.gfx.defaultRect);
 196                 object.shape.r = Math.min(object.rawNode.getAttribute("rx"), object.rawNode.getAttribute("ry"));
 197         };
 198
 199         var attachText = function(object){
 200                 // summary: builds a text shape from a node.
 201                 // object: dojox.gfx.Shape: an SVG shape
 202                 var shape = object.shape = dojo.clone(dojox.gfx.defaultText),
 203                         r = object.rawNode;
 204                 shape.x = r.getAttribute("x");
 205                 shape.y = r.getAttribute("y");
 206                 shape.align = r.getAttribute("text-anchor");
 207                 shape.decoration = r.getAttribute("text-decoration");
 208                 shape.rotated = parseFloat(r.getAttribute("rotate")) != 0;
 209                 shape.kerning = r.getAttribute("kerning") == "auto";
 210                 shape.text = r.firstChild.nodeValue;
 211         };
 212
 213         var attachTextPath = function(object){
 214                 // summary: builds a textpath shape from a node.
 215                 // object: dojox.gfx.Shape: an SVG shape
 216                 var shape = object.shape = dojo.clone(dojox.gfx.defaultTextPath),
 217                         r = object.rawNode;
 218                 shape.align = r.getAttribute("text-anchor");
 219                 shape.decoration = r.getAttribute("text-decoration");
 220                 shape.rotated = parseFloat(r.getAttribute("rotate")) != 0;
 221                 shape.kerning = r.getAttribute("kerning") == "auto";
 222                 shape.text = r.firstChild.nodeValue;
 223         };
 224 })();