source: Dev/branches/rest-dojo-ui/client/dojox/sketch/PreexistingAnnotation.js @ 256

Last change on this file since 256 was 256, checked in by hendrikvanantwerpen, 13 years ago

Reworked project structure based on REST interaction and Dojo library. As
soon as this is stable, the old jQueryUI branch can be removed (it's
kept for reference).

File size: 5.2 KB
Line 
1define(["dojo/_base/kernel", "dojo/_base/lang", "./Annotation", "./Anchor"], function(dojo){
2        dojo.getObject("sketch", true, dojox);
3
4        var ta=dojox.sketch;
5        ta.PreexistingAnnotation=function(figure, id){
6                ta.Annotation.call(this, figure, id);
7                this.transform={dx:0, dy:0};
8                this.start={ x:0, y:0 };
9                this.end={ x:200, y:200 };
10                this.radius=8;
11                this.textPosition={ x:196, y:196 };
12                this.textOffset=4;
13                this.textAlign="end";
14
15                //this.property('label',this.id);
16                this.rectShape=null;
17                this.labelShape=null;
18
19                this.anchors.start=new ta.Anchor(this, "start");
20                this.anchors.end=new ta.Anchor(this, "end");
21        };
22        ta.PreexistingAnnotation.prototype=new ta.Annotation;
23        var p=ta.PreexistingAnnotation.prototype;
24        p.constructor=ta.PreexistingAnnotation;
25
26        p.type=function(){ return 'Preexisting' };
27        p.getType=function(){ return ta.PreexistingAnnotation; };
28
29        p._pos=function(){
30                var x=Math.min(this.start.x, this.end.x);
31                var y=Math.min(this.start.y, this.end.y);
32                var w=Math.max(this.start.x, this.end.x);
33                var h=Math.max(this.start.y, this.end.y);
34                this.start={ x:x, y:y };
35                this.end={ x:w, y:h };
36                this.textPosition={ x:this.end.x-this.textOffset, y:this.end.y-this.textOffset };
37        };
38        p.apply=function(obj){
39                if(!obj){ return; }
40                if(obj.documentElement){ obj=obj.documentElement; }
41                this.readCommonAttrs(obj);
42               
43                for(var i=0; i<obj.childNodes.length; i++){
44                        var c=obj.childNodes[i];
45                        if(c.localName=="text"){
46                                this.property('label',c.childNodes.length?c.childNodes[0].nodeValue:'');
47                        }
48                        else if(c.localName=="rect"){
49                                if(c.getAttribute('x')!==null){ this.start.x=parseFloat(c.getAttribute('x'), 10); }
50                                if(c.getAttribute('width')!==null){ this.end.x=parseFloat(c.getAttribute('width'), 10)+parseFloat(c.getAttribute('x'), 10); }
51                                if(c.getAttribute('y')!==null){ this.start.y=parseFloat(c.getAttribute('y'), 10); }
52                                if(c.getAttribute('height')!==null){ this.end.y=parseFloat(c.getAttribute('height'), 10)+parseFloat(c.getAttribute('y'), 10); }
53                                if(c.getAttribute('r')!==null){ this.radius=parseFloat(c.getAttribute('r'),10); }
54                                var stroke=this.property('stroke');
55                                var style=c.getAttribute('style');
56                                var m=style.match(/stroke:([^;]+);/);
57                                if(m){
58                                        stroke.color=m[1];
59                                        this.property('fill',m[1]);
60                                }
61                                m=style.match(/stroke-width:([^;]+);/);
62                                if(m){
63                                        stroke.width=m[1];
64                                }
65                                this.property('stroke',stroke);
66                        }
67                }
68        };
69        p.initialize=function(obj){
70                this.apply(obj);
71                this._pos();
72
73                //      create either from scratch or based on the passed node
74                this.shape=this.figure.group.createGroup();
75                this.shape.getEventSource().setAttribute("id", this.id);
76                //if(this.transform.dx || this.transform.dy){ this.shape.setTransform(this.transform); }
77                this.rectShape=this.shape.createRect({
78                                x:this.start.x,
79                                y: this.start.y,
80                                width: this.end.x-this.start.x,
81                                height:this.end.y-this.start.y,
82                                r:this.radius
83                        })
84                        //.setStroke({color:this.property('fill'), width:1})
85                        .setFill([255,255,255,0.1]);
86                this.rectShape.getEventSource().setAttribute("shape-rendering","crispEdges");
87                this.labelShape=this.shape.createText({
88                                x:this.textPosition.x,
89                                y:this.textPosition.y,
90                                text:this.property('label'),
91                                align:this.textAlign
92                        })
93                        //.setFont(font)
94                        .setFill(this.property('fill'));
95                this.labelShape.getEventSource().setAttribute('id',this.id+"-labelShape");
96                this.draw();
97        };
98        p.destroy=function(){
99                if(!this.shape){ return; }
100                this.shape.remove(this.rectShape);
101                this.shape.remove(this.labelShape);
102                this.figure.group.remove(this.shape);
103                this.shape=this.rectShape=this.labelShape=null;
104        };
105        p.getBBox=function(){
106                var x=Math.min(this.start.x, this.end.x);
107                var y=Math.min(this.start.y, this.end.y);
108                var w=Math.max(this.start.x, this.end.x)-x;
109                var h=Math.max(this.start.y, this.end.y)-y;
110                return { x:x-2, y:y-2, width:w+4, height:h+4 };
111        };
112        p.draw=function(obj){
113                this.apply(obj);
114                this._pos();
115                this.shape.setTransform(this.transform);
116                this.rectShape.setShape({
117                                x:this.start.x,
118                                y: this.start.y,
119                                width: this.end.x-this.start.x,
120                                height:this.end.y-this.start.y,
121                                r:this.radius
122                        })
123                        //.setStroke({ color:this.property('fill'), width:1 })
124                        .setFill([255,255,255,0.1]);
125
126                this.labelShape.setShape({
127                                x:this.textPosition.x,
128                                y:this.textPosition.y,
129                                text:this.property('label')
130                        })
131                        .setFill(this.property('fill'));
132                this.zoom();
133        };
134        p.zoom=function(pct){
135                if(this.rectShape){
136                        pct = pct || this.figure.zoomFactor;
137                        ta.Annotation.prototype.zoom.call(this,pct);
138                        pct = dojox.gfx.renderer=='vml'?1:pct;
139                        this.rectShape.setStroke({color:this.property('fill'), width:1/pct});
140                }
141        };
142        p.serialize=function(){
143                var s=this.property('stroke');
144                return '<g '+this.writeCommonAttrs()+'>'
145                        + '<rect style="stroke:'+s.color+';stroke-width:1;fill:none;" '
146                        + 'x="' + this.start.x + '" '
147                        + 'width="' + (this.end.x-this.start.x) + '" '
148                        + 'y="' + this.start.y + '" '
149                        + 'height="' + (this.end.y-this.start.y) + '" '
150                        + 'rx="' + this.radius + '" '
151                        + 'ry="' + this.radius + '" '
152                        + ' />'
153                        + '<text style="fill:'+s.color+';text-anchor:'+this.textAlign+'" font-weight="bold" '
154                        + 'x="' + this.textPosition.x + '" '
155                        + 'y="' + this.textPosition.y + '">'
156                        + this.property('label')
157                        + '</text>'
158                        + '</g>';
159        };
160
161        ta.Annotation.register("Preexisting");
162        return dojox.sketch.PreexistingAnnotation;
163});
Note: See TracBrowser for help on using the repository browser.