root / trunk / web / dojo / dojox / drawing / tools / TextBlock.js
History | View | Annotate | Download (9.63 KB)
1 | 9 | andrej.cim | /*
|
---|---|---|---|
2 | Copyright (c) 2004-2010, The Dojo Foundation All Rights Reserved.
|
||
3 | Available via Academic Free License >= 2.1 OR the modified BSD license.
|
||
4 | see: http://dojotoolkit.org/license for details
|
||
5 | */
|
||
6 | |||
7 | |||
8 | if(!dojo._hasResource["dojox.drawing.tools.TextBlock"]){ |
||
9 | dojo._hasResource["dojox.drawing.tools.TextBlock"]=true; |
||
10 | dojo.provide("dojox.drawing.tools.TextBlock");
|
||
11 | dojo.require("dojox.drawing.stencil.Text");
|
||
12 | (function(){
|
||
13 | var _1;
|
||
14 | dojo.addOnLoad(function(){
|
||
15 | _1=dojo.byId("conEdit");
|
||
16 | if(!_1){
|
||
17 | console.error("A contenteditable div is missing from the main document. See 'dojox.drawing.tools.TextBlock'");
|
||
18 | }else{
|
||
19 | _1.parentNode.removeChild(_1); |
||
20 | } |
||
21 | }); |
||
22 | dojox.drawing.tools.TextBlock=dojox.drawing.util.oo.declare(dojox.drawing.stencil.Text,function(_2){
|
||
23 | if(_2.data){
|
||
24 | var d=_2.data;
|
||
25 | var _3=d.text;
|
||
26 | var w=!d.width?this.style.text.minWidth:d.width=="auto"?"auto":Math.max(d.width,this.style.text.minWidth); |
||
27 | var h=this._lineHeight; |
||
28 | _3=this.typesetter(_3);
|
||
29 | if(_3&&w=="auto"){ |
||
30 | var o=this.measureText(this.cleanText(_3,false),w); |
||
31 | w=o.w; |
||
32 | h=o.h; |
||
33 | }else{
|
||
34 | this._text=""; |
||
35 | } |
||
36 | this.points=[{x:d.x,y:d.y},{x:d.x+w,y:d.y},{x:d.x+w,y:d.y+h},{x:d.x,y:d.y+h}]; |
||
37 | if(d.showEmpty||_3){
|
||
38 | this.editMode=true; |
||
39 | dojo.disconnect(this._postRenderCon);
|
||
40 | this._postRenderCon=null; |
||
41 | this.connect(this,"render",this,"onRender",true); |
||
42 | if(d.showEmpty){
|
||
43 | this._text=_3||""; |
||
44 | this.edit();
|
||
45 | }else{
|
||
46 | if(_3&&d.editMode){
|
||
47 | this._text=""; |
||
48 | this.edit();
|
||
49 | }else{
|
||
50 | if(_3){
|
||
51 | this.render(_3);
|
||
52 | } |
||
53 | } |
||
54 | } |
||
55 | setTimeout(dojo.hitch(this,function(){ |
||
56 | this.editMode=false; |
||
57 | }),100);
|
||
58 | } |
||
59 | }else{
|
||
60 | this.connectMouse();
|
||
61 | this._postRenderCon=dojo.connect(this,"render",this,"_onPostRender"); |
||
62 | } |
||
63 | },{draws:true,baseRender:false,type:"dojox.drawing.tools.TextBlock",selectOnExec:true,showEmpty:false,onDrag:function(_4){ |
||
64 | if(!this.parentNode){ |
||
65 | this.showParent(_4);
|
||
66 | } |
||
67 | var s=this._startdrag,e=_4.page; |
||
68 | this._box.left=(s.x<e.x?s.x:e.x);
|
||
69 | this._box.top=s.y;
|
||
70 | this._box.width=(s.x<e.x?e.x-s.x:s.x-e.x)+this.style.text.pad; |
||
71 | dojo.style(this.parentNode,this._box.toPx()); |
||
72 | },onUp:function(_5){ |
||
73 | if(!this._downOnCanvas){ |
||
74 | return;
|
||
75 | } |
||
76 | this._downOnCanvas=false; |
||
77 | var c=dojo.connect(this,"render",this,function(){ |
||
78 | dojo.disconnect(c); |
||
79 | this.onRender(this); |
||
80 | }); |
||
81 | this.editMode=true; |
||
82 | this.showParent(_5);
|
||
83 | this.created=true; |
||
84 | this.createTextField();
|
||
85 | this.connectTextField();
|
||
86 | },showParent:function(_6){ |
||
87 | if(this.parentNode){ |
||
88 | return;
|
||
89 | } |
||
90 | var x=_6.pageX||10; |
||
91 | var y=_6.pageY||10; |
||
92 | this.parentNode=dojo.doc.createElement("div"); |
||
93 | this.parentNode.id=this.id; |
||
94 | var d=this.style.textMode.create; |
||
95 | this._box={left:x,top:y,width:_6.width||1,height:_6.height&&_6.height>8?_6.height:this._lineHeight,border:d.width+"px "+d.style+" "+d.color,position:"absolute",zIndex:500,toPx:function(){ |
||
96 | var o={};
|
||
97 | for(var nm in this){ |
||
98 | o[nm]=typeof (this[nm])=="number"&&nm!="zIndex"?this[nm]+"px":this[nm]; |
||
99 | } |
||
100 | return o;
|
||
101 | }}; |
||
102 | dojo.style(this.parentNode,this._box); |
||
103 | document.body.appendChild(this.parentNode);
|
||
104 | },createTextField:function(_7){ |
||
105 | var d=this.style.textMode.edit; |
||
106 | this._box.border=d.width+"px "+d.style+" "+d.color; |
||
107 | this._box.height="auto"; |
||
108 | this._box.width=Math.max(this._box.width,this.style.text.minWidth*this.mouse.zoom); |
||
109 | dojo.style(this.parentNode,this._box.toPx()); |
||
110 | this.parentNode.appendChild(_1);
|
||
111 | dojo.style(_1,{height:_7?"auto":this._lineHeight+"px",fontSize:(this.textSize/this.mouse.zoom)+"px",fontFamily:this.style.text.family}); |
||
112 | _1.innerHTML=_7||"";
|
||
113 | return _1;
|
||
114 | },connectTextField:function(){ |
||
115 | if(this._textConnected){ |
||
116 | return;
|
||
117 | } |
||
118 | this._textConnected=true; |
||
119 | this.mouse.setEventMode("TEXT"); |
||
120 | this.keys.editMode(true); |
||
121 | var _8,_9,_a,_b,_c=this,_d=false,_e=function(){ |
||
122 | dojo.forEach([_8,_9,_a,_b],function(c){
|
||
123 | dojo.disconnect(c); |
||
124 | }); |
||
125 | _c._textConnected=false;
|
||
126 | _c.keys.editMode(false);
|
||
127 | _c.mouse.setEventMode(); |
||
128 | _c.execText(); |
||
129 | }; |
||
130 | _8=dojo.connect(_1,"keyup",this,function(_f){ |
||
131 | if(dojo.trim(_1.innerHTML)&&!_d){
|
||
132 | dojo.style(_1,"height","auto"); |
||
133 | _d=true;
|
||
134 | }else{
|
||
135 | if(dojo.trim(_1.innerHTML).length<2&&_d){ |
||
136 | dojo.style(_1,"height",this._lineHeight+"px"); |
||
137 | _d=false;
|
||
138 | } |
||
139 | } |
||
140 | if(_f.keyCode==13||_f.keyCode==27){ |
||
141 | dojo.stopEvent(_f); |
||
142 | _e(); |
||
143 | } |
||
144 | }); |
||
145 | _9=dojo.connect(_1,"keydown",this,function(evt){ |
||
146 | if(evt.keyCode==13||evt.keyCode==27){ |
||
147 | dojo.stopEvent(evt); |
||
148 | } |
||
149 | }); |
||
150 | _a=dojo.connect(document,"mouseup",this,function(evt){ |
||
151 | if(!this._onAnchor&&evt.target.id!="conEdit"){ |
||
152 | dojo.stopEvent(evt); |
||
153 | _e(); |
||
154 | }else{
|
||
155 | _1.blur(); |
||
156 | setTimeout(function(){
|
||
157 | _1.focus(); |
||
158 | },200);
|
||
159 | } |
||
160 | }); |
||
161 | this.createAnchors();
|
||
162 | _b=dojo.connect(this.mouse,"setZoom",this,function(evt){ |
||
163 | _e(); |
||
164 | }); |
||
165 | _1.focus(); |
||
166 | this.onDown=function(){ |
||
167 | }; |
||
168 | this.onDrag=function(){ |
||
169 | }; |
||
170 | setTimeout(dojo.hitch(this,function(){ |
||
171 | _1.focus(); |
||
172 | this.onUp=function(){ |
||
173 | if(!_c._onAnchor&&this.parentNode){ |
||
174 | _c.disconnectMouse(); |
||
175 | _e(); |
||
176 | _c.onUp=function(){ |
||
177 | }; |
||
178 | } |
||
179 | }; |
||
180 | }),500);
|
||
181 | },execText:function(){ |
||
182 | var d=dojo.marginBox(this.parentNode); |
||
183 | var w=Math.max(d.w,this.style.text.minWidth); |
||
184 | var txt=this.cleanText(_1.innerHTML,true); |
||
185 | _1.innerHTML="";
|
||
186 | _1.blur(); |
||
187 | this.destroyAnchors();
|
||
188 | txt=this.typesetter(txt);
|
||
189 | var o=this.measureText(txt,w); |
||
190 | var sc=this.mouse.scrollOffset(); |
||
191 | var org=this.mouse.origin; |
||
192 | var x=this._box.left+sc.left-org.x; |
||
193 | var y=this._box.top+sc.top-org.y; |
||
194 | x*=this.mouse.zoom;
|
||
195 | y*=this.mouse.zoom;
|
||
196 | w*=this.mouse.zoom;
|
||
197 | o.h*=this.mouse.zoom;
|
||
198 | this.points=[{x:x,y:y},{x:x+w,y:y},{x:x+w,y:y+o.h},{x:x,y:y+o.h}]; |
||
199 | this.editMode=false; |
||
200 | if(!o.text){
|
||
201 | this._text=""; |
||
202 | this._textArray=[];
|
||
203 | } |
||
204 | this.render(o.text);
|
||
205 | this.onChangeText(this.getText()); |
||
206 | },edit:function(){ |
||
207 | this.editMode=true; |
||
208 | var _10=this.getText()||""; |
||
209 | if(this.parentNode||!this.points){ |
||
210 | return;
|
||
211 | } |
||
212 | var d=this.pointsToData(); |
||
213 | var sc=this.mouse.scrollOffset(); |
||
214 | var org=this.mouse.origin; |
||
215 | var obj={pageX:(d.x)/this.mouse.zoom-sc.left+org.x,pageY:(d.y)/this.mouse.zoom-sc.top+org.y,width:d.width/this.mouse.zoom,height:d.height/this.mouse.zoom}; |
||
216 | this.remove(this.shape,this.hit); |
||
217 | this.showParent(obj);
|
||
218 | this.createTextField(_10.replace("/n"," ")); |
||
219 | this.connectTextField();
|
||
220 | if(_10){
|
||
221 | this.setSelection(_1,"end"); |
||
222 | } |
||
223 | },cleanText:function(txt,_11){ |
||
224 | var _12=function(str){ |
||
225 | var _13={"<":"<",">":">","&":"&"}; |
||
226 | for(var nm in _13){ |
||
227 | str=str.replace(new RegExp(nm,"gi"),_13[nm]); |
||
228 | } |
||
229 | return str;
|
||
230 | }; |
||
231 | if(_11){
|
||
232 | dojo.forEach(["<br>","<br/>","<br />","\\n","\\r"],function(br){ |
||
233 | txt=txt.replace(new RegExp(br,"gi")," "); |
||
234 | }); |
||
235 | } |
||
236 | txt=txt.replace(/ /g," "); |
||
237 | txt=_12(txt); |
||
238 | txt=dojo.trim(txt); |
||
239 | txt=txt.replace(/\s{2,}/g," "); |
||
240 | return txt;
|
||
241 | },measureText:function(str,_14){ |
||
242 | var r="(<br\\s*/*>)|(\\n)|(\\r)"; |
||
243 | this.showParent({width:_14||"auto",height:"auto"}); |
||
244 | this.createTextField(str);
|
||
245 | var txt=""; |
||
246 | var el=_1;
|
||
247 | el.innerHTML="X";
|
||
248 | var h=dojo.marginBox(el).h;
|
||
249 | el.innerHTML=str; |
||
250 | if(!_14||new RegExp(r,"gi").test(str)){ |
||
251 | txt=str.replace(new RegExp(r,"gi"),"\n"); |
||
252 | el.innerHTML=str.replace(new RegExp(r,"gi"),"<br/>"); |
||
253 | }else{
|
||
254 | if(dojo.marginBox(el).h==h){
|
||
255 | txt=str; |
||
256 | }else{
|
||
257 | var ar=str.split(" "); |
||
258 | var _15=[[]];
|
||
259 | var _16=0; |
||
260 | el.innerHTML="";
|
||
261 | while(ar.length){
|
||
262 | var _17=ar.shift();
|
||
263 | el.innerHTML+=_17+" ";
|
||
264 | if(dojo.marginBox(el).h>h){
|
||
265 | _16++; |
||
266 | _15[_16]=[]; |
||
267 | el.innerHTML=_17+" ";
|
||
268 | } |
||
269 | _15[_16].push(_17); |
||
270 | } |
||
271 | dojo.forEach(_15,function(ar,i){
|
||
272 | _15[i]=ar.join(" ");
|
||
273 | }); |
||
274 | txt=_15.join("\n");
|
||
275 | el.innerHTML=txt.replace("\n","<br/>"); |
||
276 | } |
||
277 | } |
||
278 | var dim=dojo.marginBox(el);
|
||
279 | _1.parentNode.removeChild(_1); |
||
280 | dojo.destroy(this.parentNode);
|
||
281 | this.parentNode=null; |
||
282 | return {h:dim.h,w:dim.w,text:txt}; |
||
283 | },_downOnCanvas:false,onDown:function(obj){ |
||
284 | this._startdrag={x:obj.pageX,y:obj.pageY}; |
||
285 | dojo.disconnect(this._postRenderCon);
|
||
286 | this._postRenderCon=null; |
||
287 | this._downOnCanvas=true; |
||
288 | },createAnchors:function(){ |
||
289 | this._anchors={};
|
||
290 | var _18=this; |
||
291 | var d=this.style.anchors,b=d.width,w=d.size-b*2,h=d.size-b*2,p=(d.size)/2*-1+"px"; |
||
292 | var s={position:"absolute",width:w+"px",height:h+"px",backgroundColor:d.fill,border:b+"px "+d.style+" "+d.color}; |
||
293 | if(dojo.isIE){
|
||
294 | s.paddingLeft=w+"px";
|
||
295 | s.fontSize=w+"px";
|
||
296 | } |
||
297 | var ss=[{top:p,left:p},{top:p,right:p},{bottom:p,right:p},{bottom:p,left:p}]; |
||
298 | for(var i=0;i<4;i++){ |
||
299 | var _19=(i==0)||(i==3); |
||
300 | var id=this.util.uid(_19?"left_anchor":"right_anchor"); |
||
301 | var a=dojo.create("div",{id:id},this.parentNode); |
||
302 | dojo.style(a,dojo.mixin(dojo.clone(s),ss[i])); |
||
303 | var md,mm,mu;
|
||
304 | var md=dojo.connect(a,"mousedown",this,function(evt){ |
||
305 | _19=evt.target.id.indexOf("left")>-1; |
||
306 | _18._onAnchor=true;
|
||
307 | var _1a=evt.pageX;
|
||
308 | var _1b=this._box.width; |
||
309 | dojo.stopEvent(evt); |
||
310 | mm=dojo.connect(document,"mousemove",this,function(evt){ |
||
311 | var x=evt.pageX;
|
||
312 | if(_19){
|
||
313 | this._box.left=x;
|
||
314 | this._box.width=_1b+_1a-x;
|
||
315 | }else{
|
||
316 | this._box.width=x+_1b-_1a;
|
||
317 | } |
||
318 | dojo.style(this.parentNode,this._box.toPx()); |
||
319 | }); |
||
320 | mu=dojo.connect(document,"mouseup",this,function(evt){ |
||
321 | _1a=this._box.left;
|
||
322 | _1b=this._box.width;
|
||
323 | dojo.disconnect(mm); |
||
324 | dojo.disconnect(mu); |
||
325 | _18._onAnchor=false;
|
||
326 | _1.focus(); |
||
327 | dojo.stopEvent(evt); |
||
328 | }); |
||
329 | }); |
||
330 | this._anchors[id]={a:a,cons:[md]}; |
||
331 | } |
||
332 | },destroyAnchors:function(){ |
||
333 | for(var n in this._anchors){ |
||
334 | dojo.forEach(this._anchors[n].con,dojo.disconnect,dojo);
|
||
335 | dojo.destroy(this._anchors[n].a);
|
||
336 | } |
||
337 | },setSelection:function(_1c,_1d){ |
||
338 | console.warn("setSelection:");
|
||
339 | if(dojo.doc.selection){
|
||
340 | var r=dojo.body().createTextRange();
|
||
341 | r.moveToElementText(_1c); |
||
342 | r.collapse(false);
|
||
343 | r.select(); |
||
344 | }else{
|
||
345 | var _1e=function(_1f,_20){ |
||
346 | _20=_20||[]; |
||
347 | for(var i=0;i<_1f.childNodes.length;i++){ |
||
348 | var n=_1f.childNodes[i];
|
||
349 | if(n.nodeType==3){ |
||
350 | _20.push(n); |
||
351 | }else{
|
||
352 | if(n.tagName&&n.tagName.toLowerCase()=="img"){ |
||
353 | _20.push(n); |
||
354 | } |
||
355 | } |
||
356 | if(n.childNodes&&n.childNodes.length){
|
||
357 | _1e(n,_20); |
||
358 | } |
||
359 | } |
||
360 | return _20;
|
||
361 | }; |
||
362 | _1c.focus(); |
||
363 | var _21=dojo.global.getSelection();
|
||
364 | _21.removeAllRanges(); |
||
365 | r=dojo.doc.createRange(); |
||
366 | r.selectNodeContents(_1c); |
||
367 | var _22=_1e(_1c);
|
||
368 | if(_1d=="end"){ |
||
369 | r.setStart(_22[_22.length-1],_22[_22.length-1].textContent.length); |
||
370 | r.setEnd(_22[_22.length-1],_22[_22.length-1].textContent.length); |
||
371 | }else{
|
||
372 | if(_1d=="beg"||_1d=="start"){ |
||
373 | r.setStart(_22[0],0); |
||
374 | r.setEnd(_22[0],0); |
||
375 | }else{
|
||
376 | if(_1d=="all"){ |
||
377 | r.setStart(_22[0],0); |
||
378 | r.setEnd(_22[_22.length-1],_22[_22.length-1].textContent.length); |
||
379 | } |
||
380 | } |
||
381 | } |
||
382 | _21.addRange(r); |
||
383 | } |
||
384 | }}); |
||
385 | dojox.drawing.tools.TextBlock.setup={name:"dojox.drawing.tools.TextBlock",tooltip:"Text Tool",iconClass:"iconText"}; |
||
386 | dojox.drawing.register(dojox.drawing.tools.TextBlock.setup,"tool");
|
||
387 | })(); |
||
388 | } |