root / trunk / web / dojo / dojox / drawing / tools / TextBlock.js @ 13
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 |
} |