Changeset 7033

Timestamp:

01/16/07 13:00:00 (2 years ago)

Author:

elazutkin

Message:

dojo.gfx: 1st cut of text (unfinished)

Location:

trunk

Files:

• src/gfx/common.js (modified) (3 diffs)
• src/gfx/matrix.js (modified) (1 diff)
• src/gfx/shape.js (modified) (8 diffs)
• src/gfx/svg.js (modified) (6 diffs)
• src/gfx/vml.js (modified) (9 diffs)
• tests/gfx/test_text.html (added)

trunk/src/gfx/common.js

@@ -17 +17 @@
         defaultLine:     {type: "line",     x1: 0, y1: 0, x2: 100, y2: 100},
         defaultImage:    {type: "image",    x: 0, y: 0, width: 0, height: 0, src: ""},
+        defaultText:     {type: "text",     x: 0, y: 0, text: "",
+                align: "left", decoration: "none", rotated: false, kerning: true, spacing: "normal" },
+        defaultTextPath: {type: "textpath", text: ""},
 
-        // default geometric attributes (a stroke, and fills)
+        // default geometric attributes
         defaultStroke: {color: "black", width: 1, cap: "butt", join: 4},
         defaultLinearGradient: {type: "linear", x1: 0, y1: 0, x2: 100, y2: 100, 
@@ -25 +28 @@
                 colors: [{offset: 0, color: "black"}, {offset: 1, color: "white"}]},
         defaultPattern: {type: "pattern", x: 0, y: 0, width: 0, height: 0, src: ""},
+        defaultFont: {type: "font", style: "normal", variant: "normal", weight: "normal", 
+                size: "10pt", family: "serif"},
 
         normalizeColor: function(/*Color*/ color){
@@ -75 +80 @@
                 return addSpace ? " " + val : val; // String
         },
+        // font operations
+        makeFontString: function(font){
+                // summary: converts a font object to a CSS font string
+                // font:        Object: font object (see dojo.gfx.defaultFont)
+                return font.style + " " + font.variant + " " + font.weight + " " + font.size + " " + font.family; // Object
+        },
+        splitFontString: function(str){
+                // summary: converts a CSS font string to a font object
+                // str:         String: a CSS font string
+                var font = dojo.lang.shallowCopy(dojo.gfx.defaultFont);
+                var t = str.split(/\s+/);
+                do{
+                        if(t.length < 5){ break; }
+                        font.style  = t[0];
+                        font.varian = t[1];
+                        font.weight = t[2];
+                        var i = t[3].indexOf("/");
+                        font.size = i < 0 ? t[3] : t[3].substring(0, i);
+                        var j = 4;
+                        if(i < 0){
+                                if(t[4] == "/"){
+                                        j = 6;
+                                        break;
+                                }
+                                if(t[4].substr(0, 1) == "/"){
+                                        j = 5;
+                                        break;
+                                }
+                        }
+                        if(j + 3 > t.length){ break; }
+                        font.size = t[j];
+                        font.family = t[j + 1];
+                }while(false);
+                return font;    // Object
+        },
         
         // a constant used to split a SVG/VML path into primitive components

trunk/src/gfx/matrix.js

@@ -395 +395 @@
         
 });
+
+// propagate Matrix2D up
+dojo.gfx.Matrix2D = dojo.gfx.matrix.Matrix2D;

trunk/src/gfx/shape.js

@@ -218 +218 @@
                 // summary: returns the cumulative ("real") transformation matrix
                 //      by combining the shape's matrix with its parent's matrix
-                return this.parentMatrix ? new dojo.gfx.matrix.Matrix2D([this.parentMatrix, this.matrix]) : this.matrix;        // dojo.gfx.matrix.Matrix
+                return this.parentMatrix ? new dojo.gfx.matrix.Matrix2D([this.parentMatrix, this.matrix]) : this.matrix;        // dojo.gfx.Matrix2D
         }
 });
 
 dojo.declare("dojo.gfx.shape.VirtualGroup", dojo.gfx.Shape,
-
         function() {
                 // summary: a virtual group of shapes, which can be used 
@@ -276 +275 @@
 
 dojo.declare("dojo.gfx.shape.Rect", dojo.gfx.Shape,
-        
         function(rawNode) {
                 // summary: a generic rectangle
@@ -291 +289 @@
 
 dojo.declare("dojo.gfx.shape.Ellipse", dojo.gfx.Shape,
-function(rawNode) {
-        // summary: a generic ellipse
-        // rawNode: Node: a DOM Node
-        this.shape = dojo.lang.shallowCopy(dojo.gfx.defaultEllipse, true);
-        this.attach(rawNode);
-},
+        function(rawNode) {
+                // summary: a generic ellipse
+                // rawNode: Node: a DOM Node
+                this.shape = dojo.lang.shallowCopy(dojo.gfx.defaultEllipse, true);
+                this.attach(rawNode);
+        },
 {
         getBoundingBox: function(){
@@ -310 +308 @@
 
 dojo.declare("dojo.gfx.shape.Circle", dojo.gfx.Shape,
-function(rawNode) {
-        // summary: a generic circle
-        //      (this is a helper object, which is defined for convenience)
-        // rawNode: Node: a DOM Node
-        this.shape = dojo.lang.shallowCopy(dojo.gfx.defaultCircle, true);
-        this.attach(rawNode);
-},
+        function(rawNode) {
+                // summary: a generic circle
+                //      (this is a helper object, which is defined for convenience)
+                // rawNode: Node: a DOM Node
+                this.shape = dojo.lang.shallowCopy(dojo.gfx.defaultCircle, true);
+                this.attach(rawNode);
+        },
 {
         getBoundingBox: function(){
@@ -330 +328 @@
 
 dojo.declare("dojo.gfx.shape.Line", dojo.gfx.Shape,
-function(rawNode) {
-        // summary: a generic line
-        //      (this is a helper object, which is defined for convenience)
-        // rawNode: Node: a DOM Node
-        this.shape = dojo.lang.shallowCopy(dojo.gfx.defaultLine, true);
-        this.attach(rawNode);
-},
+        function(rawNode) {
+                // summary: a generic line
+                //      (this is a helper object, which is defined for convenience)
+                // rawNode: Node: a DOM Node
+                this.shape = dojo.lang.shallowCopy(dojo.gfx.defaultLine, true);
+                this.attach(rawNode);
+        },
 {
         getBoundingBox: function(){
@@ -354 +352 @@
 
 dojo.declare("dojo.gfx.shape.Polyline", dojo.gfx.Shape,
-function(rawNode) {
-        // summary: a generic polyline/polygon
-        //      (this is a helper object, which is defined for convenience)
-        // rawNode: Node: a DOM Node
-        this.shape = dojo.lang.shallowCopy(dojo.gfx.defaultPolyline, true);
-        this.attach(rawNode);
-},
+        function(rawNode) {
+                // summary: a generic polyline/polygon
+                //      (this is a helper object, which is defined for convenience)
+                // rawNode: Node: a DOM Node
+                this.shape = dojo.lang.shallowCopy(dojo.gfx.defaultPolyline, true);
+                this.attach(rawNode);
+        },
 {
         getBoundingBox: function(){
@@ -388 +386 @@
 
 dojo.declare("dojo.gfx.shape.Image", dojo.gfx.Shape,
-function(rawNode) {
-        // summary: a generic image
-        //      (this is a helper object, which is defined for convenience)
-        // rawNode: Node: a DOM Node
-        this.shape = dojo.lang.shallowCopy(dojo.gfx.defaultImage, true);
-        this.attach(rawNode);
-},
+        function(rawNode) {
+                // summary: a generic image
+                //      (this is a helper object, which is defined for convenience)
+                // rawNode: Node: a DOM Node
+                this.shape = dojo.lang.shallowCopy(dojo.gfx.defaultImage, true);
+                this.attach(rawNode);
+        },
 {
         getBoundingBox: function(){
@@ -410 +408 @@
         }
 });
+
+dojo.declare("dojo.gfx.shape.Text", dojo.gfx.Shape,
+        function(rawNode) {
+                // summary: a generic text
+                // rawNode: Node: a DOM Node
+                this.fontStyle = null;
+                this.shape = dojo.lang.shallowCopy(dojo.gfx.defaultText, true);
+                this.attach(rawNode);
+        },
+        {}
+);
+
+dojo.gfx._font = {
+        getFont: function(){
+                // summary: returns the current font object or null (see dojo.gfx.defaultFont) 
+                return this.fontStyle;  // Object
+        }
+};
+
+dojo.lang.extend(dojo.gfx.shape.Text, dojo.gfx._font);
+delete dojo.gfx._font;

trunk/src/gfx/svg.js

@@ -239 +239 @@
                 if(rawNode){
                         var fill = rawNode.getAttribute("fill");
-                        if(fill == "none"){ return; }
+                        if(fill == "none"){ return null; }
                         var ref  = dojo.gfx.svg.getRef(fill);
                         if(ref){
@@ -291 +291 @@
                 // summary: deduces a stroke style from a Node.
                 // rawNode: Node: an SVG node
-                if(!rawNode){ return; }
+                if(!rawNode){ return null; }
                 var stroke = rawNode.getAttribute("stroke");
                 if(stroke == null || stroke == "none") return null;
@@ -493 +493 @@
 dojo.gfx.Path.nodeType = "path";
 
-dojo.gfx._creators = {
+dojo.declare("dojo.gfx.Text", dojo.gfx.shape.Text, {
+        // summary: an anchored text (SVG)
+
+        attachShape: function(rawNode){
+                // summary: builds a text shape from a Node.
+                // rawNode: Node: an SVG node
+                var shape = null;
+                if(rawNode){
+                        shape = dojo.lang.shallowCopy(dojo.gfx.defaultText, true);
+                        shape.x = rawNode.getAttribute("x");
+                        shape.y = rawNode.getAttribute("y");
+                        shape.align = rawNode.getAttribute("text-anchor");
+                        shape.decoration = rawNode.getAttribute("text-decoration");
+                        shape.rotated = parseFloat(rawNode.getAttribute("rotate")) != 0;
+                        shape.kerning = rawNode.getAttribute("kerning") == "auto";
+                        shape.text = rawNode.firstChild.nodeValue;
+                }
+                return shape;   // dojo.gfx.shape.Text
+        },
+        setShape: function(newShape){
+                // summary: sets a text shape object (SVG)
+                // newShape: Object: a text shape object
+                this.shape = dojo.gfx.makeParameters(this.shape, newShape);
+                this.bbox = null;
+                var r = this.rawNode;
+                var s = this.shape;
+                r.setAttribute("x", s.x);
+                r.setAttribute("y", s.y);
+                r.setAttribute("text-anchor", s.align);
+                r.setAttribute("text-decoration", s.decoration);
+                r.setAttribute("rotate", s.rotated ? 90 : 0);
+                r.setAttribute("kerning", s.kerning ? "auto" : 0);
+                r.appendChild(document.createTextNode(s.text));
+                return this;    // self
+        }
+});
+dojo.gfx.Text.nodeType = "text";
+
+dojo.gfx.svg._font = {
+        setFont: function(font){
+                // summary: sets a font object (SVG)
+                // font: Object: a font object (see dojo.gfx.defaultFont) or a string
+                var f = this.fontStyle = typeof font == "string" ? dojo.gfx.splitFontString(font) :
+                        dojo.gfx.makeParameters(dojo.gfx.defaultFont, font);
+                // next line doesn't work in Firefox 2 or Opera 9
+                //this.rawNode.setAttribute("font", dojo.gfx.makeFontString(this.fontStyle));
+                this.rawNode.setAttribute("font-style", f.style);
+                this.rawNode.setAttribute("font-variant", f.variant);
+                this.rawNode.setAttribute("font-weight", f.weight);
+                this.rawNode.setAttribute("font-size", f.size);
+                this.rawNode.setAttribute("font-family", f.family);
+        },
+        attachFont: function(rawNode){
+                // summary: deduces a font style from a Node.
+                // rawNode: Node: an SVG node
+                if(!rawNode){ return null; }
+                var fontStyle = dojo.lang.shallowCopy(dojo.gfx.defaultFont, true);
+                fontStyle.style = rawNode.getAttribute("font-style");
+                fontStyle.variant = rawNode.getAttribute("font-variant");
+                fontStyle.weight = rawNode.getAttribute("font-weight");
+                fontStyle.size = rawNode.getAttribute("font-size");
+                fontStyle.family = rawNode.getAttribute("font-family");
+                return fontStyle;       // Object
+        },
+        attach: function(rawNode){
+                // summary: reconstructs all shape parameters from a Node.
+                // rawNode: Node: an SVG node
+                dojo.gfx.Shape.prototype.attach.call(this, rawNode);
+                if(rawNode) {
+                        this.fontStyle = this.attachFont(rawNode);
+                }
+        }
+};
+
+dojo.lang.extend(dojo.gfx.Text, dojo.gfx.svg._font);
+delete dojo.gfx.svg._font;
+
+dojo.gfx.svg._creators = {
         // summary: SVG shape creators
         createPath: function(path){
@@ -530 +607 @@
                 // image: Object: an image object (see dojo.gfx.defaultImage)
                 return this.createObject(dojo.gfx.Image, image);        // dojo.gfx.Image
+        },
+        createText: function(text){
+                // summary: creates an SVG text shape
+                // text: Object: a text object (see dojo.gfx.defaultText)
+                return this.createObject(dojo.gfx.Text, text);  // dojo.gfx.Text
         },
         createGroup: function(){
@@ -599 +681 @@
                         s = new dojo.gfx.Image();
                         break;
+                case dojo.gfx.Text.nodeType:
+                        s = new dojo.gfx.Text();
+                        break;
                 default:
                         dojo.debug("FATAL ERROR! tagName = " + node.tagName);
@@ -658 +743 @@
 };
 
-dojo.lang.extend(dojo.gfx.Group, dojo.gfx._creators);
-dojo.lang.extend(dojo.gfx.Surface, dojo.gfx._creators);
-
-delete dojo.gfx._creators;
+dojo.lang.extend(dojo.gfx.Group, dojo.gfx.svg._creators);
+dojo.lang.extend(dojo.gfx.Surface, dojo.gfx.svg._creators);
+
+delete dojo.gfx.svg._creators;
 
 // Gradient and pattern

trunk/src/gfx/vml.js

@@ -47 +47 @@
 
 dojo.gfx.vml.normalizedLength = function(len) {
-        // summary: converts any length value to points
+        // summary: converts any length value to pixels
         // len: String: a length, e.g., "12pc"
         if(len.length == 0) return 0;
@@ -331 +331 @@
                         this.rawNode = rawNode;
                         this.shape = this.attachShape(rawNode);
+                        if("attachFill" in this){
+                                this.fontStyle = this.attachFont(rawNode);
+                        }
                         this.fillStyle = this.attachFill(rawNode);
                         this.strokeStyle = this.attachStroke(rawNode);
@@ -615 +618 @@
 dojo.gfx.Polyline.nodeType = "shape";
 
-dojo.declare("dojo.gfx.Image", dojo.gfx.shape.Image, {
+dojo.declare("dojo.gfx.Image", dojo.gfx.shape.Image,
+        function(rawNode){
+                if(rawNode) rawNode.setAttribute("dojoGfxType", "image");
+        }, {
         // summary: an image (VML)
         
@@ -688 +694 @@
         }
 });
-dojo.gfx.Image.nodeType = "image";
+dojo.gfx.Image.nodeType = "div";
 
 dojo.gfx.path._calcArc = function(alpha){
@@ -1129 +1135 @@
 dojo.gfx.Path.nodeType = "shape";
 
-
-dojo.gfx._creators = {
+dojo.declare("dojo.gfx.Text", dojo.gfx.shape.Text, 
+        function(rawNode){
+                if(rawNode) rawNode.setAttribute("dojoGfxType", "text");
+                this.fontStyle = null;
+        }, {
+        // summary: an anchored text (SVG)
+
+        attachShape: function(rawNode){
+                // summary: builds a text shape from a Node.
+                // rawNode: Node: an SVG node
+                var shape = null;
+                /*
+                if(rawNode){
+                        shape = dojo.lang.shallowCopy(dojo.gfx.defaultText, true);
+                        shape.x = rawNode.getAttribute("x");
+                        shape.y = rawNode.getAttribute("y");
+                        shape.align = rawNode.getAttribute("text-anchor");
+                        shape.decoration = rawNode.getAttribute("text-decoration");
+                        shape.rotated = parseFloat(rawNode.getAttribute("rotate")) != 0;
+                        shape.text = rawNode.firstChild.nodeValue;
+                }
+                */
+                return shape;   // dojo.gfx.shape.Text
+        },
+        _alignment: {start: "left", middle: "center", end: "right"},
+        setShape: function(newShape){
+                // summary: sets a text shape object (SVG)
+                // newShape: Object: a text shape object
+                this.shape = dojo.gfx.makeParameters(this.shape, newShape);
+                this.bbox = null;
+                var r = this.rawNode;
+                var s = this.shape;
+                var x = s.x;
+                var y = s.y.toFixed();
+                switch(s.align){
+                        case "middle":
+                                x -= 5;
+                                break;
+                        case "end":
+                                x -= 10;
+                                break;
+                }
+                this.rawNode.path.v = "m" + x.toFixed() + "," + y + 
+                        "l" + (x + 10).toFixed() + "," + y + "e";
+                // find path and text path
+                var p = null, t = null;
+                var c = r.childNodes;
+                for(var i = 0; i < c.length; ++i){
+                        var tag = c[i].tagName;
+                        if(tag == "path"){
+                                p = c[i];
+                                if(t) break;
+                        }else if(tag == "textpath"){
+                                t = c[i];
+                                if(p) break;
+                        }
+                }
+                if(!p){
+                        p = document.createElement("v:path");
+                        r.appendChild(p);
+                }
+                if(!t){
+                        t = document.createElement("v:textpath");
+                        r.appendChild(t);
+                }
+                p.textPathOk = true;
+                t.on = true;
+                var a = this._alignment[s.align];
+                t.style["v-text-anchor"] = "bottom";
+                t.style["v-text-align"] = a ? a : "left";
+                t.style["text-decoration"] = s.decoration;
+                t.style["v-rotate-letters"] = s.rotated;
+                t.style["v-text-kern"] = s.kerning;
+                t.string = s.text;
+                return this.setTransform(this.matrix);  // self
+        },
+        setFont: function(font){
+                // summary: sets a font object (SVG)
+                // font: Object: a font object (see dojo.gfx.defaultFont) or a string
+                var f = this.fontStyle = typeof font == "string" ? 
+                        dojo.gfx.splitFontString(font) :
+                        dojo.gfx.makeParameters(dojo.gfx.defaultFont, font);
+                var c = this.rawNode.childNodes;
+                for(var i = 0; i < c.length; ++i){
+                        if(c[i].tagName == "textpath"){
+                                c[i].style.font = dojo.gfx.makeFontString(f);
+                                break;
+                        }
+                }
+                return this.setTransform(this.matrix);  // self
+        },
+        attachFont: function(rawNode){
+                // summary: deduces a font style from a Node.
+                // rawNode: Node: an SVG node
+                if(!rawNode){ return null; }
+                var fontStyle = dojo.lang.shallowCopy(dojo.gfx.defaultFont, true);
+                var c = this.rawNode.childNodes;
+                for(var i = 0; i < c.length; ++i){
+                        if(c[i].tagName == "textpath"){
+                                var s = c[i].style;
+                                fontStyle.style = s.fontstyle;
+                                fontStyle.variant = s.fontvariant;
+                                fontStyle.weight = s.fontweight;
+                                fontStyle.size = s.fontsize;
+                                fontStyle.family = s.fontfamily;
+                                break;
+                        }
+                }
+                return fontStyle;       // Object
+        },
+        attachTransform: function(rawNode) {
+                // summary: deduces a transformation matrix from a Node.
+                // rawNode: Node: an VML node
+                var matrix = dojo.gfx.Shape.prototype.attachTransform.call(this);
+                if(matrix){
+                        matrix = dojo.gfx.matrix.multiply(matrix, {dy: dojo.gfx.vml.normalizedLength(this.fontStyle.size) * 0.4});
+                }
+                return matrix;  // dojo.gfx.Matrix2D
+        },
+        _getRealMatrix: function(){
+                // summary: returns the cumulative ("real") transformation matrix
+                //      by combining the shape's matrix with its parent's matrix;
+                //      it makes a correction for a font size
+                var matrix = dojo.gfx.Shape.prototype._getRealMatrix.call(this);
+                if(matrix){
+                        matrix = dojo.gfx.matrix.multiply(matrix, 
+                                {dy: -dojo.gfx.vml.normalizedLength(this.fontStyle ? this.fontStyle.size : "10pt") * 0.4});
+                }
+                return matrix;  // dojo.gfx.Matrix2D
+        }
+});
+dojo.gfx.Text.nodeType = "shape";
+
+dojo.gfx.vml._creators = {
         // summary: VML shape creators
         createPath: function(path){
-                // summary: creates an SVG path shape
+                // summary: creates a SVG path shape
                 // path: Object: a path object (see dojo.gfx.defaultPath)
                 return this.createObject(dojo.gfx.Path, path, true);    // dojo.gfx.Path
         },
         createRect: function(rect){
-                // summary: creates an VML rectangle shape
+                // summary: creates a VML rectangle shape
                 // rect: Object: a path object (see dojo.gfx.defaultRect)
                 return this.createObject(dojo.gfx.Rect, rect);  // dojo.gfx.Rect
         },
         createCircle: function(circle){
-                // summary: creates an VML circle shape
+                // summary: creates a VML circle shape
                 // circle: Object: a circle object (see dojo.gfx.defaultCircle)
                 return this.createObject(dojo.gfx.Circle, circle);      // dojo.gfx.Circle
         },
         createEllipse: function(ellipse){
-                // summary: creates an VML ellipse shape
+                // summary: creates a VML ellipse shape
                 // ellipse: Object: an ellipse object (see dojo.gfx.defaultEllipse)
                 return this.createObject(dojo.gfx.Ellipse, ellipse);    // dojo.gfx.Ellipse
         },
         createLine: function(line){
-                // summary: creates an VML line shape
+                // summary: creates a VML line shape
                 // line: Object: a line object (see dojo.gfx.defaultLine)
                 return this.createObject(dojo.gfx.Line, line, true);    // dojo.gfx.Line
         },
         createPolyline: function(points){
-                // summary: creates an VML polyline/polygon shape
+                // summary: creates a VML polyline/polygon shape
                 // points: Object: a points object (see dojo.gfx.defaultPolyline)
                 //      or an Array of points
@@ -1164 +1302 @@
         },
         createImage: function(image){
-                // summary: creates an VML image shape
+                // summary: creates a VML image shape
                 // image: Object: an image object (see dojo.gfx.defaultImage)
                 if(!this.rawNode) return null;
@@ -1181 +1319 @@
                 return shape;   // dojo.gfx.Image
         },
+        createText: function(text){
+                // summary: creates a VML text shape
+                // text: Object: a text object (see dojo.gfx.defaultText)
+                return this.createObject(dojo.gfx.Text, text, true);    // dojo.gfx.Text
+        },
         createGroup: function(){
-                // summary: creates an VML group shape
+                // summary: creates a VML group shape
                 return this.createObject(dojo.gfx.Group, null, true);   // dojo.gfx.Group
         },
@@ -1206 +1349 @@
 };
 
-dojo.lang.extend(dojo.gfx.Group, dojo.gfx._creators);
-dojo.lang.extend(dojo.gfx.Surface, dojo.gfx._creators);
-
-delete dojo.gfx._creators;
+dojo.lang.extend(dojo.gfx.Group, dojo.gfx.vml._creators);
+dojo.lang.extend(dojo.gfx.Surface, dojo.gfx.vml._creators);
+
+delete dojo.gfx.vml._creators;