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