root / trunk / web / dojo / dojox / sketch / Figure.js @ 11
History | View | Annotate | Download (10 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.sketch.Figure"]){ |
||
| 9 | dojo._hasResource["dojox.sketch.Figure"]=true; |
||
| 10 | dojo.provide("dojox.sketch.Figure");
|
||
| 11 | dojo.experimental("dojox.sketch");
|
||
| 12 | dojo.require("dojox.gfx");
|
||
| 13 | dojo.require("dojox.sketch.UndoStack");
|
||
| 14 | (function(){
|
||
| 15 | var ta=dojox.sketch;
|
||
| 16 | ta.tools={};
|
||
| 17 | ta.registerTool=function(_1,fn){ |
||
| 18 | ta.tools[_1]=fn; |
||
| 19 | }; |
||
| 20 | ta.Figure=function(_2){ |
||
| 21 | var _3=this; |
||
| 22 | this.annCounter=1; |
||
| 23 | this.shapes=[];
|
||
| 24 | this.image=null; |
||
| 25 | this.imageSrc=null; |
||
| 26 | this.size={w:0,h:0}; |
||
| 27 | this.surface=null; |
||
| 28 | this.group=null; |
||
| 29 | this.node=null; |
||
| 30 | this.zoomFactor=1; |
||
| 31 | this.tools=null; |
||
| 32 | this.obj={};
|
||
| 33 | dojo.mixin(this,_2);
|
||
| 34 | this.selected=[];
|
||
| 35 | this.hasSelections=function(){ |
||
| 36 | return this.selected.length>0; |
||
| 37 | }; |
||
| 38 | this.isSelected=function(_4){ |
||
| 39 | for(var i=0;i<_3.selected.length;i++){ |
||
| 40 | if(_3.selected[i]==_4){
|
||
| 41 | return true; |
||
| 42 | } |
||
| 43 | } |
||
| 44 | return false; |
||
| 45 | }; |
||
| 46 | this.select=function(_5){ |
||
| 47 | if(!_3.isSelected(_5)){
|
||
| 48 | _3.clearSelections(); |
||
| 49 | _3.selected=[_5]; |
||
| 50 | } |
||
| 51 | _5.setMode(ta.Annotation.Modes.View); |
||
| 52 | _5.setMode(ta.Annotation.Modes.Edit); |
||
| 53 | }; |
||
| 54 | this.deselect=function(_6){ |
||
| 55 | var _7=-1; |
||
| 56 | for(var i=0;i<_3.selected.length;i++){ |
||
| 57 | if(_3.selected[i]==_6){
|
||
| 58 | _7=i; |
||
| 59 | break;
|
||
| 60 | } |
||
| 61 | } |
||
| 62 | if(_7>-1){ |
||
| 63 | _6.setMode(ta.Annotation.Modes.View); |
||
| 64 | _3.selected.splice(_7,1);
|
||
| 65 | } |
||
| 66 | return _6;
|
||
| 67 | }; |
||
| 68 | this.clearSelections=function(){ |
||
| 69 | for(var i=0;i<_3.selected.length;i++){ |
||
| 70 | _3.selected[i].setMode(ta.Annotation.Modes.View); |
||
| 71 | } |
||
| 72 | _3.selected=[]; |
||
| 73 | }; |
||
| 74 | this.replaceSelection=function(n,o){ |
||
| 75 | if(!_3.isSelected(o)){
|
||
| 76 | _3.select(n); |
||
| 77 | return;
|
||
| 78 | } |
||
| 79 | var _8=-1; |
||
| 80 | for(var i=0;i<_3.selected.length;i++){ |
||
| 81 | if(_3.selected[i]==o){
|
||
| 82 | _8=i; |
||
| 83 | break;
|
||
| 84 | } |
||
| 85 | } |
||
| 86 | if(_8>-1){ |
||
| 87 | _3.selected.splice(_8,1,n);
|
||
| 88 | } |
||
| 89 | }; |
||
| 90 | this._c=null; |
||
| 91 | this._ctr=null; |
||
| 92 | this._lp=null; |
||
| 93 | this._action=null; |
||
| 94 | this._prevState=null; |
||
| 95 | this._startPoint=null; |
||
| 96 | this._ctool=null; |
||
| 97 | this._start=null; |
||
| 98 | this._end=null; |
||
| 99 | this._absEnd=null; |
||
| 100 | this._cshape=null; |
||
| 101 | this._dblclick=function(e){ |
||
| 102 | var o=_3._fromEvt(e);
|
||
| 103 | if(o){
|
||
| 104 | _3.onDblClickShape(o,e); |
||
| 105 | } |
||
| 106 | }; |
||
| 107 | this._keydown=function(e){ |
||
| 108 | var _9=false; |
||
| 109 | if(e.ctrlKey){
|
||
| 110 | if(e.keyCode===90||e.keyCode===122){ |
||
| 111 | _3.undo(); |
||
| 112 | _9=true;
|
||
| 113 | }else{
|
||
| 114 | if(e.keyCode===89||e.keyCode===121){ |
||
| 115 | _3.redo(); |
||
| 116 | _9=true;
|
||
| 117 | } |
||
| 118 | } |
||
| 119 | } |
||
| 120 | if(e.keyCode===46||e.keyCode===8){ |
||
| 121 | _3._delete(_3.selected); |
||
| 122 | _9=true;
|
||
| 123 | } |
||
| 124 | if(_9){
|
||
| 125 | dojo.stopEvent(e); |
||
| 126 | } |
||
| 127 | }; |
||
| 128 | this._md=function(e){ |
||
| 129 | if(dojox.gfx.renderer=="vml"){ |
||
| 130 | _3.node.focus(); |
||
| 131 | } |
||
| 132 | var o=_3._fromEvt(e);
|
||
| 133 | _3._startPoint={x:e.pageX,y:e.pageY};
|
||
| 134 | _3._ctr=dojo.position(_3.node); |
||
| 135 | var _a={x:_3.node.scrollLeft,y:_3.node.scrollTop}; |
||
| 136 | _3._ctr={x:_3._ctr.x-_a.x,y:_3._ctr.y-_a.y};
|
||
| 137 | var X=e.clientX-_3._ctr.x,Y=e.clientY-_3._ctr.y;
|
||
| 138 | _3._lp={x:X,y:Y};
|
||
| 139 | _3._start={x:X,y:Y};
|
||
| 140 | _3._end={x:X,y:Y};
|
||
| 141 | _3._absEnd={x:X,y:Y};
|
||
| 142 | if(!o){
|
||
| 143 | _3.clearSelections(); |
||
| 144 | _3._ctool.onMouseDown(e); |
||
| 145 | }else{
|
||
| 146 | if(o.type&&o.type()!="Anchor"){ |
||
| 147 | if(!_3.isSelected(o)){
|
||
| 148 | _3.select(o); |
||
| 149 | _3._sameShapeSelected=false;
|
||
| 150 | }else{
|
||
| 151 | _3._sameShapeSelected=true;
|
||
| 152 | } |
||
| 153 | } |
||
| 154 | o.beginEdit(); |
||
| 155 | _3._c=o; |
||
| 156 | } |
||
| 157 | }; |
||
| 158 | this._mm=function(e){ |
||
| 159 | if(!_3._ctr){
|
||
| 160 | return;
|
||
| 161 | } |
||
| 162 | var x=e.clientX-_3._ctr.x;
|
||
| 163 | var y=e.clientY-_3._ctr.y;
|
||
| 164 | var dx=x-_3._lp.x;
|
||
| 165 | var dy=y-_3._lp.y;
|
||
| 166 | _3._absEnd={x:x,y:y};
|
||
| 167 | if(_3._c){
|
||
| 168 | _3._c.setBinding({dx:dx/_3.zoomFactor,dy:dy/_3.zoomFactor});
|
||
| 169 | _3._lp={x:x,y:y};
|
||
| 170 | }else{
|
||
| 171 | _3._end={x:dx,y:dy};
|
||
| 172 | var _b={x:Math.min(_3._start.x,_3._absEnd.x),y:Math.min(_3._start.y,_3._absEnd.y),width:Math.abs(_3._start.x-_3._absEnd.x),height:Math.abs(_3._start.y-_3._absEnd.y)}; |
||
| 173 | if(_b.width&&_b.height){
|
||
| 174 | _3._ctool.onMouseMove(e,_b); |
||
| 175 | } |
||
| 176 | } |
||
| 177 | }; |
||
| 178 | this._mu=function(e){ |
||
| 179 | if(_3._c){
|
||
| 180 | _3._c.endEdit(); |
||
| 181 | }else{
|
||
| 182 | _3._ctool.onMouseUp(e); |
||
| 183 | } |
||
| 184 | _3._c=_3._ctr=_3._lp=_3._action=_3._prevState=_3._startPoint=null;
|
||
| 185 | _3._cshape=_3._start=_3._end=_3._absEnd=null;
|
||
| 186 | }; |
||
| 187 | this.initUndoStack();
|
||
| 188 | }; |
||
| 189 | var p=ta.Figure.prototype;
|
||
| 190 | p.initUndoStack=function(){ |
||
| 191 | this.history=new ta.UndoStack(this); |
||
| 192 | }; |
||
| 193 | p.setTool=function(t){ |
||
| 194 | this._ctool=t;
|
||
| 195 | }; |
||
| 196 | p.gridSize=0;
|
||
| 197 | p._calCol=function(v){ |
||
| 198 | return this.gridSize?(Math.round(v/this.gridSize)*this.gridSize):v; |
||
| 199 | }; |
||
| 200 | p._delete=function(_c,_d){ |
||
| 201 | for(var i=0;i<_c.length;i++){ |
||
| 202 | _c[i].setMode(ta.Annotation.Modes.View); |
||
| 203 | _c[i].destroy(_d); |
||
| 204 | this.remove(_c[i]);
|
||
| 205 | this._remove(_c[i]);
|
||
| 206 | if(!_d){
|
||
| 207 | _c[i].onRemove(); |
||
| 208 | } |
||
| 209 | } |
||
| 210 | _c.splice(0,_c.length);
|
||
| 211 | }; |
||
| 212 | p.onDblClickShape=function(_e,e){ |
||
| 213 | if(_e["onDblClick"]){ |
||
| 214 | _e.onDblClick(e); |
||
| 215 | } |
||
| 216 | }; |
||
| 217 | p.onCreateShape=function(_f){ |
||
| 218 | }; |
||
| 219 | p.onBeforeCreateShape=function(_10){ |
||
| 220 | }; |
||
| 221 | p.initialize=function(_11){ |
||
| 222 | this.node=_11;
|
||
| 223 | this.surface=dojox.gfx.createSurface(_11,this.size.w,this.size.h); |
||
| 224 | this.group=this.surface.createGroup(); |
||
| 225 | this._cons=[];
|
||
| 226 | var es=this.surface.getEventSource(); |
||
| 227 | this._cons.push(dojo.connect(es,"ondraggesture",dojo.stopEvent),dojo.connect(es,"ondragenter",dojo.stopEvent),dojo.connect(es,"ondragover",dojo.stopEvent),dojo.connect(es,"ondragexit",dojo.stopEvent),dojo.connect(es,"ondragstart",dojo.stopEvent),dojo.connect(es,"onselectstart",dojo.stopEvent),dojo.connect(es,"onmousedown",this._md),dojo.connect(es,"onmousemove",this._mm),dojo.connect(es,"onmouseup",this._mu),dojo.connect(es,"onclick",this,"onClick"),dojo.connect(es,"ondblclick",this._dblclick),dojo.connect(_11,"onkeydown",this._keydown)); |
||
| 228 | this.image=this.group.createImage({width:this.imageSize.w,height:this.imageSize.h,src:this.imageSrc}); |
||
| 229 | }; |
||
| 230 | p.destroy=function(_12){ |
||
| 231 | if(!this.node){ |
||
| 232 | return;
|
||
| 233 | } |
||
| 234 | if(!_12){
|
||
| 235 | if(this.history){ |
||
| 236 | this.history.destroy();
|
||
| 237 | } |
||
| 238 | if(this._subscribed){ |
||
| 239 | dojo.unsubscribe(this._subscribed);
|
||
| 240 | delete this._subscribed; |
||
| 241 | } |
||
| 242 | } |
||
| 243 | dojo.forEach(this._cons,dojo.disconnect);
|
||
| 244 | this._cons=[];
|
||
| 245 | dojo.empty(this.node);
|
||
| 246 | this.group=this.surface=null; |
||
| 247 | this.obj={};
|
||
| 248 | this.shapes=[];
|
||
| 249 | }; |
||
| 250 | p.nextKey=function(){ |
||
| 251 | return "annotation-"+this.annCounter++; |
||
| 252 | }; |
||
| 253 | p.draw=function(){ |
||
| 254 | }; |
||
| 255 | p.zoom=function(pct){ |
||
| 256 | this.zoomFactor=pct/100; |
||
| 257 | var w=this.size.w*this.zoomFactor; |
||
| 258 | var h=this.size.h*this.zoomFactor; |
||
| 259 | this.surface.setDimensions(w,h);
|
||
| 260 | this.group.setTransform(dojox.gfx.matrix.scale(this.zoomFactor,this.zoomFactor)); |
||
| 261 | for(var i=0;i<this.shapes.length;i++){ |
||
| 262 | this.shapes[i].zoom(this.zoomFactor); |
||
| 263 | } |
||
| 264 | }; |
||
| 265 | p.getFit=function(){ |
||
| 266 | var wF=(this.node.parentNode.offsetWidth-5)/this.size.w; |
||
| 267 | var hF=(this.node.parentNode.offsetHeight-5)/this.size.h; |
||
| 268 | return Math.min(wF,hF)*100; |
||
| 269 | }; |
||
| 270 | p.unzoom=function(){ |
||
| 271 | this.zoomFactor=1; |
||
| 272 | this.surface.setDimensions(this.size.w,this.size.h); |
||
| 273 | this.group.setTransform();
|
||
| 274 | }; |
||
| 275 | p._add=function(obj){ |
||
| 276 | this.obj[obj._key]=obj;
|
||
| 277 | }; |
||
| 278 | p._remove=function(obj){ |
||
| 279 | if(this.obj[obj._key]){ |
||
| 280 | delete this.obj[obj._key]; |
||
| 281 | } |
||
| 282 | }; |
||
| 283 | p._get=function(key){ |
||
| 284 | if(key&&key.indexOf("bounding")>-1){ |
||
| 285 | key=key.replace("-boundingBox",""); |
||
| 286 | }else{
|
||
| 287 | if(key&&key.indexOf("-labelShape")>-1){ |
||
| 288 | key=key.replace("-labelShape",""); |
||
| 289 | } |
||
| 290 | } |
||
| 291 | return this.obj[key]; |
||
| 292 | }; |
||
| 293 | p._keyFromEvt=function(e){ |
||
| 294 | var key=e.target.id+""; |
||
| 295 | if(key.length==0){ |
||
| 296 | var p=e.target.parentNode;
|
||
| 297 | var _13=this.surface.getEventSource(); |
||
| 298 | while(p&&p.id.length==0&&p!=_13){ |
||
| 299 | p=p.parentNode; |
||
| 300 | } |
||
| 301 | key=p.id; |
||
| 302 | } |
||
| 303 | return key;
|
||
| 304 | }; |
||
| 305 | p._fromEvt=function(e){ |
||
| 306 | return this._get(this._keyFromEvt(e)); |
||
| 307 | }; |
||
| 308 | p.add=function(_14){ |
||
| 309 | for(var i=0;i<this.shapes.length;i++){ |
||
| 310 | if(this.shapes[i]==_14){ |
||
| 311 | return true; |
||
| 312 | } |
||
| 313 | } |
||
| 314 | this.shapes.push(_14);
|
||
| 315 | return true; |
||
| 316 | }; |
||
| 317 | p.remove=function(_15){ |
||
| 318 | var idx=-1; |
||
| 319 | for(var i=0;i<this.shapes.length;i++){ |
||
| 320 | if(this.shapes[i]==_15){ |
||
| 321 | idx=i; |
||
| 322 | break;
|
||
| 323 | } |
||
| 324 | } |
||
| 325 | if(idx>-1){ |
||
| 326 | this.shapes.splice(idx,1); |
||
| 327 | } |
||
| 328 | return _15;
|
||
| 329 | }; |
||
| 330 | p.getAnnotator=function(id){ |
||
| 331 | for(var i=0;i<this.shapes.length;i++){ |
||
| 332 | if(this.shapes[i].id==id){ |
||
| 333 | return this.shapes[i]; |
||
| 334 | } |
||
| 335 | } |
||
| 336 | return null; |
||
| 337 | }; |
||
| 338 | p.convert=function(ann,t){ |
||
| 339 | var _16=t+"Annotation"; |
||
| 340 | if(!ta[_16]){
|
||
| 341 | return;
|
||
| 342 | } |
||
| 343 | var _17=ann.type(),id=ann.id,_18=ann.label,_19=ann.mode,_1a=ann.tokenId;
|
||
| 344 | var _1b,end,_1c,_1d;
|
||
| 345 | switch(_17){
|
||
| 346 | case "Preexisting": |
||
| 347 | case "Lead": |
||
| 348 | _1d={dx:ann.transform.dx,dy:ann.transform.dy};
|
||
| 349 | _1b={x:ann.start.x,y:ann.start.y};
|
||
| 350 | end={x:ann.end.x,y:ann.end.y};
|
||
| 351 | var cx=end.x-((end.x-_1b.x)/2); |
||
| 352 | var cy=end.y-((end.y-_1b.y)/2); |
||
| 353 | _1c={x:cx,y:cy};
|
||
| 354 | break;
|
||
| 355 | case "SingleArrow": |
||
| 356 | case "DoubleArrow": |
||
| 357 | _1d={dx:ann.transform.dx,dy:ann.transform.dy};
|
||
| 358 | _1b={x:ann.start.x,y:ann.start.y};
|
||
| 359 | end={x:ann.end.x,y:ann.end.y};
|
||
| 360 | _1c={x:ann.control.x,y:ann.control.y};
|
||
| 361 | break;
|
||
| 362 | case "Underline": |
||
| 363 | _1d={dx:ann.transform.dx,dy:ann.transform.dy};
|
||
| 364 | _1b={x:ann.start.x,y:ann.start.y};
|
||
| 365 | _1c={x:_1b.x+50,y:_1b.y+50};
|
||
| 366 | end={x:_1b.x+100,y:_1b.y+100};
|
||
| 367 | break;
|
||
| 368 | case "Brace": |
||
| 369 | } |
||
| 370 | var n=new ta[_16](this,id); |
||
| 371 | if(n.type()=="Underline"){ |
||
| 372 | n.transform={dx:_1d.dx+_1b.x,dy:_1d.dy+_1b.y};
|
||
| 373 | }else{
|
||
| 374 | if(n.transform){
|
||
| 375 | n.transform=_1d; |
||
| 376 | } |
||
| 377 | if(n.start){
|
||
| 378 | n.start=_1b; |
||
| 379 | } |
||
| 380 | } |
||
| 381 | if(n.end){
|
||
| 382 | n.end=end; |
||
| 383 | } |
||
| 384 | if(n.control){
|
||
| 385 | n.control=_1c; |
||
| 386 | } |
||
| 387 | n.label=_18; |
||
| 388 | n.token=dojo.lang.shallowCopy(ann.token); |
||
| 389 | n.initialize(); |
||
| 390 | this.replaceSelection(n,ann);
|
||
| 391 | this._remove(ann);
|
||
| 392 | this.remove(ann);
|
||
| 393 | ann.destroy(); |
||
| 394 | n.setMode(_19); |
||
| 395 | }; |
||
| 396 | p.setValue=function(_1e){ |
||
| 397 | var obj=dojox.xml.DomParser.parse(_1e);
|
||
| 398 | var _1f=this.node; |
||
| 399 | this.load(obj,_1f);
|
||
| 400 | }; |
||
| 401 | p.load=function(obj,n){ |
||
| 402 | if(this.surface){ |
||
| 403 | this.destroy(true); |
||
| 404 | } |
||
| 405 | var _20=obj.documentElement;
|
||
| 406 | this.size={w:parseFloat(_20.getAttribute("width"),10),h:parseFloat(_20.getAttribute("height"),10)}; |
||
| 407 | var g=_20.childrenByName("g")[0]; |
||
| 408 | var img=g.childrenByName("image")[0]; |
||
| 409 | this.imageSize={w:parseFloat(img.getAttribute("width"),10),h:parseFloat(img.getAttribute("height"),10)}; |
||
| 410 | this.imageSrc=img.getAttribute("xlink:href"); |
||
| 411 | this.initialize(n);
|
||
| 412 | var ann=g.childrenByName("g"); |
||
| 413 | for(var i=0;i<ann.length;i++){ |
||
| 414 | this._loadAnnotation(ann[i]);
|
||
| 415 | } |
||
| 416 | if(this._loadDeferred){ |
||
| 417 | this._loadDeferred.callback(this); |
||
| 418 | this._loadDeferred=null; |
||
| 419 | } |
||
| 420 | this.onLoad();
|
||
| 421 | }; |
||
| 422 | p.onLoad=function(){ |
||
| 423 | }; |
||
| 424 | p.onClick=function(){ |
||
| 425 | }; |
||
| 426 | p._loadAnnotation=function(obj){ |
||
| 427 | var _21=obj.getAttribute("dojoxsketch:type")+"Annotation"; |
||
| 428 | if(ta[_21]){
|
||
| 429 | var a=new ta[_21](this,obj.id); |
||
| 430 | a.initialize(obj); |
||
| 431 | this.nextKey();
|
||
| 432 | a.setMode(ta.Annotation.Modes.View); |
||
| 433 | this._add(a);
|
||
| 434 | return a;
|
||
| 435 | } |
||
| 436 | return null; |
||
| 437 | }; |
||
| 438 | p.onUndo=function(){ |
||
| 439 | }; |
||
| 440 | p.onBeforeUndo=function(){ |
||
| 441 | }; |
||
| 442 | p.onRedo=function(){ |
||
| 443 | }; |
||
| 444 | p.onBeforeRedo=function(){ |
||
| 445 | }; |
||
| 446 | p.undo=function(){ |
||
| 447 | if(this.history){ |
||
| 448 | this.onBeforeUndo();
|
||
| 449 | this.history.undo();
|
||
| 450 | this.onUndo();
|
||
| 451 | } |
||
| 452 | }; |
||
| 453 | p.redo=function(){ |
||
| 454 | if(this.history){ |
||
| 455 | this.onBeforeRedo();
|
||
| 456 | this.history.redo();
|
||
| 457 | this.onRedo();
|
||
| 458 | } |
||
| 459 | }; |
||
| 460 | p.serialize=function(){ |
||
| 461 | var s="<svg xmlns=\"http://www.w3.org/2000/svg\" "+"xmlns:xlink=\"http://www.w3.org/1999/xlink\" "+"xmlns:dojoxsketch=\"http://dojotoolkit.org/dojox/sketch\" "+"width=\""+this.size.w+"\" height=\""+this.size.h+"\">"+"<g>"+"<image xlink:href=\""+this.imageSrc+"\" x=\"0\" y=\"0\" width=\""+this.size.w+"\" height=\""+this.size.h+"\" />"; |
||
| 462 | for(var i=0;i<this.shapes.length;i++){ |
||
| 463 | s+=this.shapes[i].serialize();
|
||
| 464 | } |
||
| 465 | s+="</g></svg>";
|
||
| 466 | return s;
|
||
| 467 | }; |
||
| 468 | p.getValue=p.serialize; |
||
| 469 | })(); |
||
| 470 | } |