[1349] | 1 | /*********************************************************************** |
---|
| 2 | ** Title.........: Online Image Editor Interface |
---|
| 3 | ** Version.......: 1.0 |
---|
| 4 | ** Author........: Xiang Wei ZHUO <wei@zhuo.org> |
---|
| 5 | ** Filename......: EditorContents.js |
---|
| 6 | ** Last changed..: 31 Aug 2003 |
---|
| 7 | ** Notes.........: Handles most of the interface routines for the ImageEditor. |
---|
| 8 | **/ |
---|
| 9 | |
---|
| 10 | |
---|
| 11 | function MM_findObj(n, d) { //v4.01 |
---|
| 12 | var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { |
---|
| 13 | d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} |
---|
| 14 | if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; |
---|
| 15 | for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); |
---|
| 16 | if(!x && d.getElementById) x=d.getElementById(n); return x; |
---|
| 17 | } |
---|
| 18 | |
---|
| 19 | var pic_x, pic_y; |
---|
| 20 | function P7_Snap() { //v2.62 by PVII |
---|
| 21 | var x,y,ox,bx,oy,p,tx,a,b,k,d,da,e,el,args=P7_Snap.arguments;a=parseInt(a); |
---|
| 22 | for (k=0; k<(args.length-3); k+=4) |
---|
| 23 | if ((g=MM_findObj(args[k]))!=null) { |
---|
| 24 | el=eval(MM_findObj(args[k+1])); |
---|
| 25 | a=parseInt(args[k+2]);b=parseInt(args[k+3]); |
---|
| 26 | x=0;y=0;ox=0;oy=0;p="";tx=1;da="document.all['"+args[k]+"']"; |
---|
| 27 | if(document.getElementById) { |
---|
| 28 | d="document.getElementsByName('"+args[k]+"')[0]"; |
---|
| 29 | if(!eval(d)) {d="document.getElementById('"+args[k]+"')";if(!eval(d)) {d=da;}} |
---|
| 30 | }else if(document.all) {d=da;} |
---|
| 31 | if (document.all || document.getElementById) { |
---|
| 32 | while (tx==1) {p+=".offsetParent"; |
---|
| 33 | if(eval(d+p)) {x+=parseInt(eval(d+p+".offsetLeft"));y+=parseInt(eval(d+p+".offsetTop")); |
---|
| 34 | }else{tx=0;}} |
---|
| 35 | ox=parseInt(g.offsetLeft);oy=parseInt(g.offsetTop);var tw=x+ox+y+oy; |
---|
| 36 | if(tw==0 || (navigator.appVersion.indexOf("MSIE 4")>-1 && navigator.appVersion.indexOf("Mac")>-1)) { |
---|
| 37 | ox=0;oy=0;if(g.style.left){x=parseInt(g.style.left);y=parseInt(g.style.top); |
---|
| 38 | }else{var w1=parseInt(el.style.width);bx=(a<0)?-5-w1:-10; |
---|
| 39 | a=(Math.abs(a)<1000)?0:a;b=(Math.abs(b)<1000)?0:b; |
---|
| 40 | //alert(event.clientX); |
---|
| 41 | if (event == null) x=document.body.scrollLeft + bx; |
---|
| 42 | else x=document.body.scrollLeft + event.clientX + bx; |
---|
| 43 | if (event == null) y=document.body.scrollTop; |
---|
| 44 | else y=document.body.scrollTop + event.clientY;}} |
---|
| 45 | }else if (document.layers) {x=g.x;y=g.y;var q0=document.layers,dd=""; |
---|
| 46 | for(var s=0;s<q0.length;s++) {dd='document.'+q0[s].name; |
---|
| 47 | if(eval(dd+'.document.'+args[k])) {x+=eval(dd+'.left');y+=eval(dd+'.top');break;}}} |
---|
| 48 | if(el) {e=(document.layers)?el:el.style; |
---|
| 49 | var xx=parseInt(x+ox+a),yy=parseInt(y+oy+b); |
---|
| 50 | //alert(xx+":"+yy); |
---|
| 51 | if(navigator.appName=="Netscape" && parseInt(navigator.appVersion)>4){xx+="px";yy+="px";} |
---|
| 52 | if(navigator.appVersion.indexOf("MSIE 5")>-1 && navigator.appVersion.indexOf("Mac")>-1){ |
---|
| 53 | xx+=parseInt(document.body.leftMargin);yy+=parseInt(document.body.topMargin); |
---|
| 54 | xx+="px";yy+="px";}e.left=xx;e.top=yy;} |
---|
| 55 | pic_x = parseInt(xx); pic_y = parseInt(yy); |
---|
| 56 | //alert(xx+":"+yy); |
---|
| 57 | } |
---|
| 58 | } |
---|
| 59 | |
---|
| 60 | var ie=document.all |
---|
| 61 | var ns6=document.getElementById&&!document.all |
---|
| 62 | |
---|
| 63 | var dragapproved=false |
---|
| 64 | var z,x,y,status, ant, canvas, content, pic_width, pic_height, image, resizeHandle, oa_w, oa_h, oa_x, oa_y, mx2, my2; |
---|
| 65 | |
---|
| 66 | |
---|
| 67 | function init_resize() |
---|
| 68 | { |
---|
| 69 | if(mode == "scale") |
---|
| 70 | { |
---|
| 71 | P7_Snap('theImage','ant',0,0); |
---|
| 72 | |
---|
| 73 | if (canvas == null) |
---|
| 74 | canvas = MM_findObj("imgCanvas"); |
---|
| 75 | |
---|
| 76 | if (pic_width == null || pic_height == null) |
---|
| 77 | { |
---|
| 78 | image = MM_findObj("theImage"); |
---|
| 79 | pic_width = image.width; |
---|
| 80 | pic_height = image.height; |
---|
| 81 | } |
---|
| 82 | |
---|
| 83 | if (ant == null) |
---|
| 84 | ant = MM_findObj("ant"); |
---|
| 85 | |
---|
| 86 | ant.style.left = pic_x; ant.style.top = pic_y; |
---|
| 87 | ant.style.width = pic_width; ant.style.height = pic_height; |
---|
| 88 | ant.style.visibility = "visible"; |
---|
| 89 | |
---|
| 90 | drawBoundHandle(); |
---|
| 91 | jg_doc.paint(); |
---|
| 92 | } |
---|
| 93 | } |
---|
| 94 | |
---|
| 95 | function init() |
---|
| 96 | { |
---|
| 97 | init_crop(); |
---|
| 98 | init_resize(); |
---|
| 99 | var markerImg = MM_findObj('markerImg', window.top.document); |
---|
| 100 | |
---|
| 101 | if (markerImg.src.indexOf("t_white.gif")>0) |
---|
| 102 | toggleMarker() ; |
---|
| 103 | } |
---|
| 104 | |
---|
| 105 | function init_crop() |
---|
| 106 | { |
---|
| 107 | //if(mode == "crop") { |
---|
| 108 | P7_Snap('theImage','ant',0,0); |
---|
| 109 | //} |
---|
| 110 | } |
---|
| 111 | |
---|
| 112 | function setMode(newMode) |
---|
| 113 | { |
---|
| 114 | mode = newMode; |
---|
| 115 | reset(); |
---|
| 116 | } |
---|
| 117 | |
---|
| 118 | function reset() |
---|
| 119 | { |
---|
| 120 | if (ant == null) |
---|
| 121 | ant = MM_findObj("ant"); |
---|
| 122 | |
---|
| 123 | ant.style.visibility = "hidden"; |
---|
| 124 | ant.style.left = 0; |
---|
| 125 | ant.style.top = 0; |
---|
| 126 | ant.style.width = 0; |
---|
| 127 | ant.style.height = 0; |
---|
| 128 | |
---|
| 129 | mx2 = null; |
---|
| 130 | my2 = null; |
---|
| 131 | |
---|
| 132 | jg_doc.clear(); |
---|
| 133 | if(mode != 'measure') |
---|
| 134 | showStatus(); |
---|
| 135 | |
---|
| 136 | if(mode == "scale") { |
---|
| 137 | init_resize(); |
---|
| 138 | } |
---|
| 139 | |
---|
| 140 | P7_Snap('theImage','ant',0,0); |
---|
| 141 | } |
---|
| 142 | |
---|
| 143 | function toggleMarker() |
---|
| 144 | { |
---|
| 145 | //alert("Toggle"); |
---|
| 146 | if (ant == null) |
---|
| 147 | ant = MM_findObj("ant"); |
---|
| 148 | |
---|
| 149 | if(ant.className=="selection") |
---|
| 150 | ant.className="selectionWhite"; |
---|
| 151 | else |
---|
| 152 | ant.className="selection"; |
---|
| 153 | |
---|
| 154 | if (jg_doc.getColor() == "#000000") |
---|
| 155 | jg_doc.setColor("#FFFFFF"); |
---|
| 156 | else |
---|
| 157 | jg_doc.setColor("#000000"); |
---|
| 158 | |
---|
| 159 | drawBoundHandle |
---|
| 160 | jg_doc.paint(); |
---|
| 161 | } |
---|
| 162 | |
---|
| 163 | |
---|
| 164 | function move(e) |
---|
| 165 | { |
---|
| 166 | if (dragapproved) |
---|
| 167 | { |
---|
| 168 | //z.style.left=ns6? temp1+e.clientX-x: temp1+event.clientX-x |
---|
| 169 | //z.style.top=ns6? temp2+e.clientY-y : temp2+event.clientY-y |
---|
| 170 | var w = ns6? temp1+e.clientX - x : temp1+event.clientX - x; |
---|
| 171 | var h = ns6? temp2+e.clientY - y : temp2+event.clientY - y; |
---|
| 172 | |
---|
| 173 | //alert(canvas.style.left); |
---|
| 174 | /*if (status !=null) |
---|
| 175 | { |
---|
| 176 | status.innerHTML = "x:"+x+" y:"+y+" w:"+w+" h:"+h+" can_h:"+pic_height; |
---|
| 177 | status.innerHTML += " can_w:"+pic_width+" px:"+pic_x+" py:"+pic_y; |
---|
| 178 | status.innerHTML += " pix:"+image.style.left+" piy:"+image.style.top+" obj:"+obj.id; |
---|
| 179 | }*/ |
---|
| 180 | |
---|
| 181 | /*jg_doc.clear(); |
---|
| 182 | jg_doc.fillRectPattern(0,0,Math.abs(w),Math.abs(h),pattern); |
---|
| 183 | jg_doc.paint(); |
---|
| 184 | */ |
---|
| 185 | if (ant != null) |
---|
| 186 | { |
---|
| 187 | if (w >= 0) |
---|
| 188 | { |
---|
| 189 | ant.style.left = x; |
---|
| 190 | ant.style.width = w; |
---|
| 191 | } |
---|
| 192 | else |
---|
| 193 | { |
---|
| 194 | ant.style.left = x+w; |
---|
| 195 | ant.style.width = -1*w; |
---|
| 196 | } |
---|
| 197 | |
---|
| 198 | if (h >= 0) |
---|
| 199 | { |
---|
| 200 | ant.style.top = y; |
---|
| 201 | ant.style.height = h; |
---|
| 202 | } |
---|
| 203 | else |
---|
| 204 | { |
---|
| 205 | ant.style.top = y+h; |
---|
| 206 | ant.style.height = -1*h |
---|
| 207 | } |
---|
| 208 | } |
---|
| 209 | |
---|
| 210 | showStatus(); |
---|
| 211 | return false |
---|
| 212 | } |
---|
| 213 | } |
---|
| 214 | |
---|
| 215 | function moveContent(e) |
---|
| 216 | { |
---|
| 217 | if (dragapproved) |
---|
| 218 | { |
---|
| 219 | |
---|
| 220 | var dx =ns6? oa_x + e.clientX-x: oa_x + event.clientX-x |
---|
| 221 | var dy =ns6? oa_y + e.clientY-y : oa_y + event.clientY-y |
---|
| 222 | |
---|
| 223 | |
---|
| 224 | /*if (status !=null) |
---|
| 225 | { |
---|
| 226 | status.innerHTML = "x:"+x+" y:"+y+" dx:"+dx+" dy:"+dy; |
---|
| 227 | }*/ |
---|
| 228 | |
---|
| 229 | ant.style.left = dx; |
---|
| 230 | ant.style.top = dy; |
---|
| 231 | |
---|
| 232 | showStatus(); |
---|
| 233 | |
---|
| 234 | return false; |
---|
| 235 | } |
---|
| 236 | } |
---|
| 237 | |
---|
| 238 | function moveHandle(e) |
---|
| 239 | { |
---|
| 240 | if (dragapproved) |
---|
| 241 | { |
---|
| 242 | var w = ns6? e.clientX - x : event.clientX - x; |
---|
| 243 | var h = ns6? e.clientY - y : event.clientY - y; |
---|
| 244 | |
---|
| 245 | switch(resizeHandle) |
---|
| 246 | { |
---|
| 247 | |
---|
| 248 | case "s-resize": |
---|
| 249 | if (oa_h + h >= 0) |
---|
| 250 | ant.style.height = oa_h + h; |
---|
| 251 | break; |
---|
| 252 | case "e-resize": |
---|
| 253 | if(oa_w + w >= 0) |
---|
| 254 | ant.style.width = oa_w + w; |
---|
| 255 | break; |
---|
| 256 | case "n-resize": |
---|
| 257 | if (oa_h - h >= 0) |
---|
| 258 | { |
---|
| 259 | ant.style.top = oa_y + h; |
---|
| 260 | ant.style.height = oa_h - h; |
---|
| 261 | } |
---|
| 262 | break; |
---|
| 263 | case "w-resize": |
---|
| 264 | if(oa_w - w >= 0) { |
---|
| 265 | ant.style.left = oa_x + w; |
---|
| 266 | ant.style.width = oa_w - w; |
---|
| 267 | }break; |
---|
| 268 | case "nw-resize": |
---|
| 269 | if(oa_h - h >= 0 && oa_w - w >= 0) { |
---|
| 270 | ant.style.left = oa_x + w; |
---|
| 271 | ant.style.width = oa_w - w; |
---|
| 272 | ant.style.top = oa_y + h; |
---|
| 273 | ant.style.height = oa_h - h; |
---|
| 274 | } |
---|
| 275 | break; |
---|
| 276 | case "ne-resize": |
---|
| 277 | if (oa_h - h >= 0 && oa_w + w >= 0){ |
---|
| 278 | ant.style.top = oa_y + h; |
---|
| 279 | ant.style.height = oa_h - h; |
---|
| 280 | ant.style.width = oa_w + w; |
---|
| 281 | } |
---|
| 282 | break; |
---|
| 283 | case "se-resize": |
---|
| 284 | if (oa_h + h >= 0 && oa_w + w >= 0) |
---|
| 285 | { |
---|
| 286 | ant.style.height = oa_h + h; |
---|
| 287 | ant.style.width = oa_w + w; |
---|
| 288 | } |
---|
| 289 | break; |
---|
| 290 | case "sw-resize": |
---|
| 291 | if (oa_h + h >= 0 && oa_w - w >= 0) |
---|
| 292 | { |
---|
| 293 | ant.style.height = oa_h + h; |
---|
| 294 | ant.style.left = oa_x + w; |
---|
| 295 | ant.style.width = oa_w - w; |
---|
| 296 | } |
---|
| 297 | } |
---|
| 298 | |
---|
| 299 | showStatus(); |
---|
| 300 | return false; |
---|
| 301 | |
---|
| 302 | } |
---|
| 303 | } |
---|
| 304 | |
---|
| 305 | function drags(e) |
---|
| 306 | { |
---|
| 307 | if (!ie&&!ns6) |
---|
| 308 | return |
---|
| 309 | |
---|
| 310 | var firedobj=ns6? e.target : event.srcElement |
---|
| 311 | var topelement=ns6? "HTML" : "BODY" |
---|
| 312 | |
---|
| 313 | while (firedobj.tagName!=topelement&& |
---|
| 314 | !(firedobj.className=="crop" |
---|
| 315 | || firedobj.className=="handleBox" |
---|
| 316 | || firedobj.className=="selection" || firedobj.className=="selectionWhite")) |
---|
| 317 | { |
---|
| 318 | firedobj=ns6? firedobj.parentNode : firedobj.parentElement |
---|
| 319 | } |
---|
| 320 | |
---|
| 321 | if(firedobj.className=="handleBox") { |
---|
| 322 | |
---|
| 323 | if(content != null) { |
---|
| 324 | if(content.width != null && content.height != null) { |
---|
| 325 | content.width = 0; |
---|
| 326 | content.height = 0; |
---|
| 327 | } |
---|
| 328 | //alert(content.width+":"+content.height); |
---|
| 329 | } |
---|
| 330 | resizeHandle = firedobj.id; |
---|
| 331 | |
---|
| 332 | /*if(status!=null) { |
---|
| 333 | status.innerHTML = " obj:"+firedobj.id; |
---|
| 334 | }*/ |
---|
| 335 | |
---|
| 336 | x=ns6? e.clientX: event.clientX |
---|
| 337 | y=ns6? e.clientY: event.clientY |
---|
| 338 | |
---|
| 339 | oa_w = parseInt(ant.style.width); |
---|
| 340 | oa_h = parseInt(ant.style.height); |
---|
| 341 | oa_x = parseInt(ant.style.left); |
---|
| 342 | oa_y = parseInt(ant.style.top); |
---|
| 343 | |
---|
| 344 | dragapproved=true |
---|
| 345 | document.onmousemove=moveHandle; |
---|
| 346 | return false; |
---|
| 347 | } |
---|
| 348 | else |
---|
| 349 | if((firedobj.className == "selection" || firedobj.className=="selectionWhite")&& mode == "crop") { |
---|
| 350 | |
---|
| 351 | x=ns6? e.clientX: event.clientX |
---|
| 352 | y=ns6? e.clientY: event.clientY |
---|
| 353 | |
---|
| 354 | oa_x = parseInt(ant.style.left); |
---|
| 355 | oa_y = parseInt(ant.style.top); |
---|
| 356 | |
---|
| 357 | dragapproved=true |
---|
| 358 | document.onmousemove=moveContent; |
---|
| 359 | return false; |
---|
| 360 | } |
---|
| 361 | else |
---|
| 362 | if (firedobj.className=="crop" && mode == "crop") |
---|
| 363 | { |
---|
| 364 | if(content != null) { |
---|
| 365 | if(content.width != null && content.height != null) { |
---|
| 366 | content.width = 0; |
---|
| 367 | content.height = 0; |
---|
| 368 | } |
---|
| 369 | //alert(content.width+":"+content.height); |
---|
| 370 | } |
---|
| 371 | |
---|
| 372 | if (status == null) |
---|
| 373 | status = MM_findObj("status"); |
---|
| 374 | |
---|
| 375 | if (ant == null) |
---|
| 376 | ant = MM_findObj("ant"); |
---|
| 377 | |
---|
| 378 | if (canvas == null) |
---|
| 379 | canvas = MM_findObj("imgCanvas"); |
---|
| 380 | if(content == null) { |
---|
| 381 | content = MM_findObj("cropContent"); |
---|
| 382 | } |
---|
| 383 | |
---|
| 384 | if (pic_width == null || pic_height == null) |
---|
| 385 | { |
---|
| 386 | image = MM_findObj("theImage"); |
---|
| 387 | pic_width = image.width; |
---|
| 388 | pic_height = image.height; |
---|
| 389 | } |
---|
| 390 | |
---|
| 391 | ant.style.visibility = "visible"; |
---|
| 392 | |
---|
| 393 | obj = firedobj; |
---|
| 394 | dragapproved=true |
---|
| 395 | z=firedobj |
---|
| 396 | temp1=parseInt(z.style.left+0) |
---|
| 397 | temp2=parseInt(z.style.top+0) |
---|
| 398 | x=ns6? e.clientX: event.clientX |
---|
| 399 | y=ns6? e.clientY: event.clientY |
---|
| 400 | document.onmousemove=move |
---|
| 401 | return false |
---|
| 402 | } |
---|
| 403 | else if(firedobj.className=="crop" && mode == "measure") { |
---|
| 404 | |
---|
| 405 | if (ant == null) |
---|
| 406 | ant = MM_findObj("ant"); |
---|
| 407 | |
---|
| 408 | if (canvas == null) |
---|
| 409 | canvas = MM_findObj("imgCanvas"); |
---|
| 410 | |
---|
| 411 | x=ns6? e.clientX: event.clientX |
---|
| 412 | y=ns6? e.clientY: event.clientY |
---|
| 413 | |
---|
| 414 | //jg_doc.draw |
---|
| 415 | dragapproved=true |
---|
| 416 | document.onmousemove=measure |
---|
| 417 | |
---|
| 418 | return false |
---|
| 419 | } |
---|
| 420 | } |
---|
| 421 | |
---|
| 422 | function measure(e) |
---|
| 423 | { |
---|
| 424 | if (dragapproved) |
---|
| 425 | { |
---|
| 426 | mx2 = ns6? e.clientX : event.clientX; |
---|
| 427 | my2 = ns6? e.clientY : event.clientY; |
---|
| 428 | |
---|
| 429 | jg_doc.clear(); |
---|
| 430 | jg_doc.setStroke(Stroke.DOTTED); |
---|
| 431 | jg_doc.drawLine(x,y,mx2,my2); |
---|
| 432 | jg_doc.paint(); |
---|
| 433 | showStatus(); |
---|
| 434 | return false; |
---|
| 435 | } |
---|
| 436 | } |
---|
| 437 | |
---|
| 438 | function setMarker(nx,ny,nw,nh) |
---|
| 439 | { |
---|
| 440 | if (ant == null) |
---|
| 441 | ant = MM_findObj("ant"); |
---|
| 442 | |
---|
| 443 | if (canvas == null) |
---|
| 444 | canvas = MM_findObj("imgCanvas"); |
---|
| 445 | if(content == null) { |
---|
| 446 | content = MM_findObj("cropContent"); |
---|
| 447 | } |
---|
| 448 | |
---|
| 449 | if (pic_width == null || pic_height == null) |
---|
| 450 | { |
---|
| 451 | image = MM_findObj("theImage"); |
---|
| 452 | pic_width = image.width; |
---|
| 453 | pic_height = image.height; |
---|
| 454 | } |
---|
| 455 | |
---|
| 456 | ant.style.visibility = "visible"; |
---|
| 457 | |
---|
| 458 | nx = pic_x + nx; |
---|
| 459 | ny = pic_y + ny; |
---|
| 460 | |
---|
| 461 | if (nw >= 0) |
---|
| 462 | { |
---|
| 463 | ant.style.left = nx; |
---|
| 464 | ant.style.width = nw; |
---|
| 465 | } |
---|
| 466 | else |
---|
| 467 | { |
---|
| 468 | ant.style.left = nx+nw; |
---|
| 469 | ant.style.width = -1*nw; |
---|
| 470 | } |
---|
| 471 | |
---|
| 472 | if (nh >= 0) |
---|
| 473 | { |
---|
| 474 | ant.style.top = ny; |
---|
| 475 | ant.style.height = nh; |
---|
| 476 | } |
---|
| 477 | else |
---|
| 478 | { |
---|
| 479 | ant.style.top = ny+nh; |
---|
| 480 | ant.style.height = -1*nh |
---|
| 481 | } |
---|
| 482 | |
---|
| 483 | |
---|
| 484 | } |
---|
| 485 | |
---|
| 486 | function max(x,y) |
---|
| 487 | { |
---|
| 488 | if(y > x) |
---|
| 489 | return x; |
---|
| 490 | else |
---|
| 491 | return y; |
---|
| 492 | } |
---|
| 493 | |
---|
| 494 | function drawBoundHandle() |
---|
| 495 | { |
---|
| 496 | if(ant == null || ant.style == null) |
---|
| 497 | return false; |
---|
| 498 | |
---|
| 499 | var ah = parseInt(ant.style.height); |
---|
| 500 | var aw = parseInt(ant.style.width); |
---|
| 501 | var ax = parseInt(ant.style.left); |
---|
| 502 | var ay = parseInt(ant.style.top); |
---|
| 503 | |
---|
| 504 | jg_doc.drawHandle(ax-15,ay-15,30,30,"nw-resize"); //upper left |
---|
| 505 | jg_doc.drawHandle(ax-15,ay+ah-15,30,30,"sw-resize"); //lower left |
---|
| 506 | jg_doc.drawHandle(ax+aw-15,ay-15,30,30,"ne-resize"); //upper right |
---|
| 507 | jg_doc.drawHandle(ax+aw-15,ay+ah-15,30,30,"se-resize"); //lower right |
---|
| 508 | |
---|
| 509 | jg_doc.drawHandle(ax+max(15,aw/10),ay-8,aw-2*max(15,aw/10),8,"n-resize"); //top middle |
---|
| 510 | jg_doc.drawHandle(ax+max(15,aw/10),ay+ah,aw-2*max(15,aw/10),8,"s-resize"); //bottom middle |
---|
| 511 | jg_doc.drawHandle(ax-8, ay+max(15,ah/10),8,ah-2*max(15,ah/10),"w-resize"); //left middle |
---|
| 512 | jg_doc.drawHandle(ax+aw, ay+max(15,ah/10),8,ah-2*max(15,ah/10),"e-resize"); //right middle |
---|
| 513 | |
---|
| 514 | |
---|
| 515 | |
---|
| 516 | jg_doc.drawHandleBox(ax-4,ay-4,8,8,"nw-resize"); //upper left |
---|
| 517 | jg_doc.drawHandleBox(ax-4,ay+ah-4,8,8,"sw-resize"); //lower left |
---|
| 518 | jg_doc.drawHandleBox(ax+aw-4,ay-4,8,8,"ne-resize"); //upper right |
---|
| 519 | jg_doc.drawHandleBox(ax+aw-4,ay+ah-4,8,8,"se-resize"); //lower right |
---|
| 520 | |
---|
| 521 | jg_doc.drawHandleBox(ax+aw/2-4,ay-4,8,8,"n-resize"); //top middle |
---|
| 522 | jg_doc.drawHandleBox(ax+aw/2-4,ay+ah-4,8,8,"s-resize"); //bottom middle |
---|
| 523 | jg_doc.drawHandleBox(ax-4, ay+ah/2-4,8,8,"w-resize"); //left middle |
---|
| 524 | jg_doc.drawHandleBox(ax+aw-4, ay+ah/2-4,8,8,"e-resize"); //right middle |
---|
| 525 | |
---|
| 526 | //jg_doc.paint(); |
---|
| 527 | } |
---|
| 528 | |
---|
| 529 | function showStatus() |
---|
| 530 | { |
---|
| 531 | if(ant == null || ant.style == null) { |
---|
| 532 | return false; |
---|
| 533 | } |
---|
| 534 | |
---|
| 535 | if(mode == "measure") { |
---|
| 536 | //alert(pic_x); |
---|
| 537 | mx1 = x - pic_x; |
---|
| 538 | my1 = y - pic_y; |
---|
| 539 | |
---|
| 540 | mw = mx2 - x; |
---|
| 541 | mh = my2 - y; |
---|
| 542 | |
---|
| 543 | md = parseInt(Math.sqrt(mw*mw + mh*mh)*100)/100; |
---|
| 544 | |
---|
| 545 | ma = (Math.atan(-1*mh/mw)/Math.PI)*180; |
---|
| 546 | if(mw < 0 && mh < 0) |
---|
| 547 | ma = ma+180; |
---|
| 548 | |
---|
| 549 | if (mw <0 && mh >0) |
---|
| 550 | ma = ma - 180; |
---|
| 551 | |
---|
| 552 | ma = parseInt(ma*100)/100; |
---|
| 553 | |
---|
| 554 | if (m_sx != null && !isNaN(mx1)) |
---|
| 555 | m_sx.innerHTML = mx1+" px"; |
---|
| 556 | if (m_sy != null && !isNaN(my1)) |
---|
| 557 | m_sy.innerHTML = my1+" px"; |
---|
| 558 | if(m_w != null && !isNaN(mw)) |
---|
| 559 | m_w.innerHTML = mw + " px"; |
---|
| 560 | if(m_h != null && !isNaN(mh)) |
---|
| 561 | m_h.innerHTML = mh + " px"; |
---|
| 562 | |
---|
| 563 | if(m_d != null && !isNaN(md)) |
---|
| 564 | m_d.innerHTML = md + " px"; |
---|
| 565 | if(m_a != null && !isNaN(ma)) |
---|
| 566 | m_a.innerHTML = ma + "° "; |
---|
| 567 | |
---|
| 568 | if(r_ra != null &&!isNaN(ma)) |
---|
| 569 | r_ra.value = ma; |
---|
| 570 | |
---|
| 571 | //alert("mx1:"+mx1+" my1"+my1); |
---|
| 572 | return false; |
---|
| 573 | } |
---|
| 574 | |
---|
| 575 | var ah = parseInt(ant.style.height); |
---|
| 576 | var aw = parseInt(ant.style.width); |
---|
| 577 | var ax = parseInt(ant.style.left); |
---|
| 578 | var ay = parseInt(ant.style.top); |
---|
| 579 | |
---|
| 580 | var cx = ax-pic_x<0?0:ax-pic_x; |
---|
| 581 | var cy = ay-pic_y<0?0:ay-pic_y; |
---|
| 582 | cx = cx>pic_width?pic_width:cx; |
---|
| 583 | cy = cy>pic_height?pic_height:cy; |
---|
| 584 | |
---|
| 585 | var cw = ax-pic_x>0?aw:aw-(pic_x-ax); |
---|
| 586 | var ch = ay-pic_y>0?ah:ah-(pic_y-ay); |
---|
| 587 | |
---|
| 588 | ch = ay+ah<pic_y+pic_height?ch:ch-(ay+ah-pic_y-pic_height); |
---|
| 589 | cw = ax+aw<pic_x+pic_width?cw:cw-(ax+aw-pic_x-pic_width); |
---|
| 590 | |
---|
| 591 | ch = ch<0?0:ch; cw = cw<0?0:cw; |
---|
| 592 | |
---|
| 593 | if (ant.style.visibility == "hidden") |
---|
| 594 | { |
---|
| 595 | cx = ""; cy = ""; cw=""; ch=""; |
---|
| 596 | } |
---|
| 597 | |
---|
| 598 | if(mode == 'crop') { |
---|
| 599 | if(t_cx != null) |
---|
| 600 | t_cx.value = cx; |
---|
| 601 | if (t_cy != null) |
---|
| 602 | t_cy.value = cy; |
---|
| 603 | if(t_cw != null) |
---|
| 604 | t_cw.value = cw; |
---|
| 605 | if (t_ch != null) |
---|
| 606 | t_ch.value = ch; |
---|
| 607 | } |
---|
| 608 | else if(mode == 'scale') { |
---|
| 609 | |
---|
| 610 | var sw = aw, sh = ah; |
---|
| 611 | |
---|
| 612 | if (s_sw.value.indexOf('%')>0 && s_sh.value.indexOf('%')>0) |
---|
| 613 | { |
---|
| 614 | sw = cw/pic_width; |
---|
| 615 | sh = ch/pic_height; |
---|
| 616 | } |
---|
| 617 | if (s_sw != null) |
---|
| 618 | s_sw.value = sw; |
---|
| 619 | if (s_sh != null) |
---|
| 620 | s_sh.value = sh; |
---|
| 621 | } |
---|
| 622 | |
---|
| 623 | } |
---|
| 624 | |
---|
| 625 | function dragStopped() |
---|
| 626 | { |
---|
| 627 | dragapproved=false; |
---|
| 628 | |
---|
| 629 | if(ant == null || ant.style == null) { |
---|
| 630 | return false; |
---|
| 631 | } |
---|
| 632 | |
---|
| 633 | if(mode == "measure") { |
---|
| 634 | jg_doc.drawLine(x-4,y,x+4,y); |
---|
| 635 | jg_doc.drawLine(x,y-4,x,y+4); |
---|
| 636 | jg_doc.drawLine(mx2-4,my2,mx2+4,my2); |
---|
| 637 | jg_doc.drawLine(mx2,my2-4,mx2,my2+4); |
---|
| 638 | |
---|
| 639 | jg_doc.paint(); |
---|
| 640 | showStatus(); |
---|
| 641 | return false; |
---|
| 642 | } |
---|
| 643 | var ah = parseInt(ant.style.height); |
---|
| 644 | var aw = parseInt(ant.style.width); |
---|
| 645 | var ax = parseInt(ant.style.left); |
---|
| 646 | var ay = parseInt(ant.style.top); |
---|
| 647 | jg_doc.clear(); |
---|
| 648 | |
---|
| 649 | if(content != null) { |
---|
| 650 | if(content.width != null && content.height != null) { |
---|
| 651 | content.width = aw-1; |
---|
| 652 | content.height = ah-1; |
---|
| 653 | } |
---|
| 654 | //alert(content.width+":"+content.height); |
---|
| 655 | } |
---|
| 656 | if(mode == "crop") { |
---|
| 657 | //alert(pic_y); |
---|
| 658 | jg_doc.fillRectPattern(pic_x,pic_y,pic_width,ay-pic_y,pattern); |
---|
| 659 | |
---|
| 660 | var h1 = ah; |
---|
| 661 | var y1 = ay; |
---|
| 662 | if (ah+ay >= pic_height+pic_y) |
---|
| 663 | h1 = pic_height+pic_y-ay; |
---|
| 664 | else if (ay <= pic_y) |
---|
| 665 | { |
---|
| 666 | h1 = ay+ah-pic_y; |
---|
| 667 | y1 = pic_y; |
---|
| 668 | } |
---|
| 669 | jg_doc.fillRectPattern(pic_x,y1,ax-pic_x,h1,pattern); |
---|
| 670 | jg_doc.fillRectPattern(ax+aw,y1,pic_x+pic_width-ax-aw,h1,pattern); |
---|
| 671 | jg_doc.fillRectPattern(pic_x,ay+ah,pic_width,pic_height+pic_y-ay-ah,pattern); |
---|
| 672 | } |
---|
| 673 | else if(mode == "scale") { |
---|
| 674 | //alert("Resizing: iw:"+image.width+" nw:"+aw); |
---|
| 675 | document.theImage.height = ah; |
---|
| 676 | document.theImage.width = aw; |
---|
| 677 | document.theImage.style.height = ah+" px"; |
---|
| 678 | document.theImage.style.width = aw+" px"; |
---|
| 679 | |
---|
| 680 | P7_Snap('theImage','ant',0,0); |
---|
| 681 | |
---|
| 682 | //alert("After Resizing: iw:"+image.width+" nw:"+aw); |
---|
| 683 | } |
---|
| 684 | |
---|
| 685 | drawBoundHandle(); |
---|
| 686 | jg_doc.paint(); |
---|
| 687 | |
---|
| 688 | showStatus(); |
---|
| 689 | return false; |
---|
| 690 | } |
---|
| 691 | |
---|
| 692 | document.onmousedown=drags |
---|
| 693 | document.onmouseup=dragStopped; |
---|
| 694 | |
---|