source: branches/1.2/workflow/js/htmlarea/plugins/UploadImage/popups/ImageEditor/jscripts/EditorContent.js @ 1349

Revision 1349, 18.8 KB checked in by niltonneto, 15 years ago (diff)

Ticket #561 - Inclusão do módulo Workflow faltante nessa versão.

  • Property svn:executable set to *
Line 
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
11function 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
19var pic_x, pic_y;
20function 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
60var ie=document.all
61var ns6=document.getElementById&&!document.all
62
63var dragapproved=false
64var 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
67function 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
95function 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
105function init_crop()
106{
107    //if(mode == "crop") {
108        P7_Snap('theImage','ant',0,0);
109    //}
110}
111
112function setMode(newMode)
113{
114    mode = newMode;
115    reset();
116}
117
118function 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
143function 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
164function 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
215function 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
238function 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
305function 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
422function 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
438function 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
486function max(x,y)
487{
488    if(y > x)
489        return x;
490    else
491        return y;
492}
493
494function 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
529function 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 + "&deg; ";
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
625function 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
692document.onmousedown=drags
693document.onmouseup=dragStopped;
694
Note: See TracBrowser for help on using the repository browser.