1 | define([ |
---|
2 | "dojo/_base/kernel", |
---|
3 | "dojo/_base/lang", |
---|
4 | "dojo/_base/declare", |
---|
5 | "dojo/_base/json", |
---|
6 | "./Anchor", |
---|
7 | "./_Plugin" |
---|
8 | ], function(dojo){ |
---|
9 | dojo.declare("dojox.sketch.AnnotationTool", dojox.sketch._Plugin, { |
---|
10 | onMouseDown: function(e){ |
---|
11 | this._omd=true; |
---|
12 | }, |
---|
13 | onMouseMove: function(e,rect){ |
---|
14 | if(!this._omd){ |
---|
15 | return; |
---|
16 | } |
---|
17 | if(this._cshape){ |
---|
18 | this._cshape.setShape(rect); |
---|
19 | } else { |
---|
20 | this._cshape=this.figure.surface.createRect(rect) |
---|
21 | .setStroke({color:"#999", width:1, style:"ShortDot"}) |
---|
22 | .setFill([255,255,255,0.7]); |
---|
23 | this._cshape.getEventSource().setAttribute("shape-rendering","crispEdges"); |
---|
24 | } |
---|
25 | }, |
---|
26 | onMouseUp: function(e){ |
---|
27 | if(!this._omd){ |
---|
28 | return; |
---|
29 | } |
---|
30 | this._omd=false; |
---|
31 | var f=this.figure; |
---|
32 | if(this._cshape){ |
---|
33 | f.surface.remove(this._cshape); |
---|
34 | delete this._cshape; |
---|
35 | } |
---|
36 | if(!(f._startPoint.x==e.pageX&&f._startPoint.y==e.pageY)){ |
---|
37 | // The minimum number of pixels one has to travel before a shape |
---|
38 | // gets drawn. |
---|
39 | var limit=10; |
---|
40 | if(Math.max( |
---|
41 | limit, |
---|
42 | Math.abs(f._absEnd.x-f._start.x), |
---|
43 | Math.abs(f._absEnd.y-f._start.y) |
---|
44 | )>limit){ |
---|
45 | this._create(f._start, f._end); |
---|
46 | } |
---|
47 | } |
---|
48 | }, |
---|
49 | _create: function(start,end){ |
---|
50 | // create a new shape, needs to be accessible from the |
---|
51 | // dragging functions. |
---|
52 | var f=this.figure; |
---|
53 | var _=f.nextKey(); |
---|
54 | var a=new (this.annotation)(f, _); |
---|
55 | a.transform={ |
---|
56 | dx:f._calCol(start.x/f.zoomFactor), |
---|
57 | dy:f._calCol(start.y/f.zoomFactor) |
---|
58 | }; |
---|
59 | a.end={ |
---|
60 | x:f._calCol(end.x/f.zoomFactor), |
---|
61 | y:f._calCol(end.y/f.zoomFactor) |
---|
62 | }; |
---|
63 | if(a.control){ |
---|
64 | a.control={ |
---|
65 | x:f._calCol((end.x/2)/f.zoomFactor), |
---|
66 | y:f._calCol((end.y/2)/f.zoomFactor) |
---|
67 | }; |
---|
68 | } |
---|
69 | f.onBeforeCreateShape(a); |
---|
70 | a.initialize(); |
---|
71 | f.select(a); |
---|
72 | f.onCreateShape(a); |
---|
73 | f.history.add(dojox.sketch.CommandTypes.Create,a); |
---|
74 | } |
---|
75 | }); |
---|
76 | |
---|
77 | dojox.sketch.Annotation=function(figure, id){ |
---|
78 | // for editing stuff. |
---|
79 | this.id=this._key=id; |
---|
80 | this.figure=figure; |
---|
81 | this.mode=dojox.sketch.Annotation.Modes.View; |
---|
82 | this.shape=null; // dojox.gfx.Group |
---|
83 | this.boundingBox=null; // rect for boundaries |
---|
84 | this.hasAnchors=true; |
---|
85 | this.anchors={}; // dojox.sketch.Anchor |
---|
86 | this._properties={ |
---|
87 | 'stroke':{ color:"blue", width:2 }, |
---|
88 | 'font': {family:"Arial", size:16, weight:"bold"}, |
---|
89 | 'fill': "blue", |
---|
90 | 'label': "" |
---|
91 | }; |
---|
92 | |
---|
93 | if(this.figure){ |
---|
94 | this.figure.add(this); |
---|
95 | } |
---|
96 | }; |
---|
97 | |
---|
98 | var p=dojox.sketch.Annotation.prototype; |
---|
99 | p.constructor=dojox.sketch.Annotation; |
---|
100 | p.type=function(){ return ''; }; |
---|
101 | p.getType=function(){ return dojox.sketch.Annotation; }; |
---|
102 | p.onRemove=function(noundo){ |
---|
103 | //this.figure._delete([this],noundo); |
---|
104 | this.figure.history.add(dojox.sketch.CommandTypes.Delete, this, this.serialize()); |
---|
105 | }; |
---|
106 | p.property=function(name,/*?*/value){ |
---|
107 | var r; |
---|
108 | name=name.toLowerCase(); |
---|
109 | if(this._properties[name]!==undefined){ |
---|
110 | r=this._properties[name]; |
---|
111 | } |
---|
112 | if(arguments.length>1){ |
---|
113 | this._properties[name]=value; |
---|
114 | if(r!=value){ |
---|
115 | this.onPropertyChange(name,r); |
---|
116 | } |
---|
117 | } |
---|
118 | return r; |
---|
119 | }; |
---|
120 | p.onPropertyChange=function(name,oldvalue){}; |
---|
121 | p.onCreate=function(){ |
---|
122 | this.figure.history.add(dojox.sketch.CommandTypes.Create,this); |
---|
123 | } |
---|
124 | p.onDblClick=function(e){ |
---|
125 | var l=prompt('Set new text:',this.property('label')); |
---|
126 | if(l!==false){ |
---|
127 | this.beginEdit(dojox.sketch.CommandTypes.Modify); |
---|
128 | this.property('label',l); |
---|
129 | this.draw(); |
---|
130 | this.endEdit(); |
---|
131 | } |
---|
132 | } |
---|
133 | p.initialize=function(){ }; |
---|
134 | p.destroy=function(){ }; |
---|
135 | p.draw=function(){ }; |
---|
136 | p.apply=function(obj){ }; |
---|
137 | p.serialize=function(){ }; |
---|
138 | p.getBBox=function(){ }; |
---|
139 | p.beginEdit=function(type){ |
---|
140 | if(!this._type){ |
---|
141 | this._type=type||dojox.sketch.CommandTypes.Move; |
---|
142 | this._prevState=this.serialize(); |
---|
143 | } |
---|
144 | }; |
---|
145 | p.endEdit=function(){ |
---|
146 | if(this._prevState!=this.serialize()){ |
---|
147 | this.figure.history.add(this._type,this,this._prevState); |
---|
148 | } |
---|
149 | this._type=this._prevState=''; |
---|
150 | }; |
---|
151 | p.calculate={ |
---|
152 | slope:function(p1, p2){ |
---|
153 | if(!(p1.x-p2.x)){ return 0; } |
---|
154 | return ((p1.y-p2.y)/(p1.x-p2.x)); |
---|
155 | }, |
---|
156 | dx:function(p1, p2, dy){ |
---|
157 | var s=this.slope(p1,p2); |
---|
158 | if(s==0){ return s; } |
---|
159 | return dy/s; |
---|
160 | }, |
---|
161 | dy:function(p1, p2, dx){ |
---|
162 | return this.slope(p1,p2)*dx; |
---|
163 | } |
---|
164 | }; |
---|
165 | p.drawBBox=function(){ |
---|
166 | var r=this.getBBox(); |
---|
167 | if(!this.boundingBox){ |
---|
168 | this.boundingBox=this.shape.createRect(r) |
---|
169 | .moveToBack() |
---|
170 | .setStroke({color:"#999", width:1, style:"Dash"}) |
---|
171 | .setFill([238,238,238,0.3]); |
---|
172 | this.boundingBox.getEventSource().setAttribute("id",this.id+"-boundingBox"); |
---|
173 | this.boundingBox.getEventSource().setAttribute("shape-rendering","crispEdges"); |
---|
174 | this.figure._add(this); |
---|
175 | } else { |
---|
176 | this.boundingBox.setShape(r); |
---|
177 | } |
---|
178 | }; |
---|
179 | p.setBinding=function(pt){ |
---|
180 | this.transform.dx+=pt.dx; |
---|
181 | this.transform.dy+=pt.dy; |
---|
182 | this.draw(); |
---|
183 | }; |
---|
184 | //p.doChange=function(pt){ }; |
---|
185 | p.getTextBox=function(zoomfactor){ |
---|
186 | var fp=this.property('font'); |
---|
187 | //_getTextBox expect style camlCase properties, do it manually here |
---|
188 | var f = {fontFamily:fp.family,fontSize:fp.size,fontWeight:fp.weight}; |
---|
189 | if(zoomfactor){ |
---|
190 | f.fontSize = Math.floor(f.fontSize/zoomfactor); |
---|
191 | } |
---|
192 | return dojox.gfx._base._getTextBox(this.property('label'),f); |
---|
193 | }; |
---|
194 | p.setMode=function(m){ |
---|
195 | if(this.mode==m){ return; } |
---|
196 | this.mode=m; |
---|
197 | var method="disable"; |
---|
198 | if(m==dojox.sketch.Annotation.Modes.Edit){ method="enable"; } |
---|
199 | if(method=="enable"){ |
---|
200 | // draw the bounding box |
---|
201 | this.drawBBox(); |
---|
202 | this.figure._add(this); |
---|
203 | } else { |
---|
204 | if(this.boundingBox){ |
---|
205 | if(this.shape){ this.shape.remove(this.boundingBox); } |
---|
206 | this.boundingBox=null; |
---|
207 | } |
---|
208 | } |
---|
209 | for(var p in this.anchors){ |
---|
210 | this.anchors[p][method](); |
---|
211 | } |
---|
212 | }; |
---|
213 | p.zoom=function(pct){ |
---|
214 | pct = pct || this.figure.zoomFactor; |
---|
215 | if(this.labelShape){ |
---|
216 | var f=dojo.clone(this.property('font')); |
---|
217 | f.size=Math.ceil(f.size/pct)+"px"; |
---|
218 | this.labelShape.setFont(f); |
---|
219 | } |
---|
220 | |
---|
221 | for(var n in this.anchors){ |
---|
222 | this.anchors[n].zoom(pct); |
---|
223 | } |
---|
224 | |
---|
225 | //In VML, path are always the same width no matter scaling factors, |
---|
226 | //so aways use 1 for VML |
---|
227 | if(dojox.gfx.renderer=='vml'){ |
---|
228 | pct=1; |
---|
229 | } |
---|
230 | if(this.pathShape){ |
---|
231 | var s=dojo.clone(this.property('stroke')); |
---|
232 | s.width=pct>1?s.width:Math.ceil(s.width/pct)+"px"; |
---|
233 | this.pathShape.setStroke(s); |
---|
234 | } |
---|
235 | }; |
---|
236 | p.writeCommonAttrs=function(){ |
---|
237 | return 'id="' + this.id + '" dojoxsketch:type="' + this.type() + '"' |
---|
238 | + ' transform="translate('+ this.transform.dx + "," + this.transform.dy + ')"' |
---|
239 | + (this.data?(' ><![CDATA[data:'+dojo.toJson(this.data)+']]'):''); |
---|
240 | }; |
---|
241 | p.readCommonAttrs=function(obj){ |
---|
242 | var i=0,cs=obj.childNodes,c; |
---|
243 | while((c=cs[i++])){ |
---|
244 | if(c.nodeType==4){ //CDATA |
---|
245 | if(c.nodeValue.substr(0,11)=='properties:'){ |
---|
246 | this._properties=dojo.fromJson(c.nodeValue.substr(11)); |
---|
247 | }else if(c.nodeValue.substr(0,5)=='data:'){ |
---|
248 | this.data=dojo.fromJson(c.nodeValue.substr(5)); |
---|
249 | }else{ |
---|
250 | console.error('unknown CDATA node in node ',obj); |
---|
251 | } |
---|
252 | } |
---|
253 | } |
---|
254 | |
---|
255 | if(obj.getAttribute('transform')){ |
---|
256 | var t=obj.getAttribute('transform').replace("translate(",""); |
---|
257 | var pt=t.split(","); |
---|
258 | this.transform.dx=parseFloat(pt[0],10); |
---|
259 | this.transform.dy=parseFloat(pt[1],10); |
---|
260 | } |
---|
261 | }; |
---|
262 | dojox.sketch.Annotation.Modes={ View:0, Edit:1 }; |
---|
263 | dojox.sketch.Annotation.register=function(name,toolclass){ |
---|
264 | var cls=dojox.sketch[name+'Annotation']; |
---|
265 | dojox.sketch.registerTool(name, function(p){ |
---|
266 | dojo.mixin(p, { |
---|
267 | shape: name, |
---|
268 | annotation:cls |
---|
269 | }); |
---|
270 | return new (toolclass || dojox.sketch.AnnotationTool)(p); |
---|
271 | }); |
---|
272 | }; |
---|
273 | |
---|
274 | return dojox.sketch.Annotation; |
---|
275 | }); |
---|