root / trunk / web / dojo / dojox / drawing / tools / TextBlock.js
History | View | Annotate | Download (9.63 KB)
1 |
/*
|
---|---|
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 |
} |