/[suikacvs]/webroot/www/css/noderect/NodeRectViewer.js
Suika

Diff of /webroot/www/css/noderect/NodeRectViewer.js

Parent Directory Parent Directory | Revision Log Revision Log | View Patch Patch

revision 1.12 by wakaba, Sun Jan 4 06:43:03 2009 UTC revision 1.31 by wakaba, Mon Jan 12 13:16:32 2009 UTC
# Line 1  Line 1 
1  if (!window.NodeRectViewer) window.NodeRectViewer = {};  if (!window.NodeRectViewer) window.NodeRectViewer = {};
2    
3  function setCSSPosition (style, value) {  NodeRectViewer.Box = function (rect, coords, refBox) {
   if (value == 'fixed') {  
     if (!window.opera &&  
         /MSIE/.test (navigator.userAgent) &&  
         document.compatMode != 'CSS1Compat') {  
       style.position = 'absolute';  
     } else {  
       style.position = value;  
     }  
   } else {  
     style.position = value;  
   }  
 } // setCSSPosition  
   
 function update (form) {  
   clearHighlight ();  
   form.result.value = '';  
   var el = uu.css (form.selector.value)[parseInt (form.selectorIndex.value) || 0];  
   if (el) {  
     NodeRect.Rect.resetIndex ();  
     var rect;  
     var position = form.coords.value;  
     var type = form.prop.value;  
     var rectClass = form.trace.checked ? NodeRect.Rect.Trace : null;  
     if (type == '') {  
       return;  
     } else if (type == 'cumulativeOffset') {  
       rect = NodeRect.getCumulativeOffsetRect (el, rectClass);  
     } else if (type == 'cumulativeClient') {  
       rect = NodeRect.getCumulativeClientRect (el, rectClass);  
     } else if (type.substring (0, 3) === 'vp.') {  
       var rects = NodeRect.getViewportRects (window);  
       rect = rects[type.substring (3)];  
     } else if (type.substring (0, 4) === 'win.') {  
       var rects = NodeRect.getWindowRects (window);  
       rect = rects[type.substring (4)];  
     } else if (type.substring (0, 7) === 'screen.') {  
       var rects = NodeRect.getScreenRects (window);  
       rect = rects[type.substring (7)];  
     } else {  
       var rects = NodeRect.getElementRects (el);  
       rect = rects[type];  
     }  
     form.result.value = rect.toString ();  
     if (form.trace.checked) {  
       showTrace (rect, position);  
     } else {  
       setHighlight (rect, position);  
     }  
   
     if (NodeRectViewer.controller) NodeRectViewer.controller.setMaxZIndex ();  
   }  
 } // update  
   
 function showTrace (rect, position) {  
   if (rect.prevOp === 'add-offset') {  
     showTrace (rect.prev1, position);  
     showTrace (rect.prev2, position);  
   } else if (rect.prevOp === 'sub-offset') {  
     showTrace (rect.prev1, position);  
     showTrace (rect.prev2, position);  
   } else if (rect.prevOp === 'add-vector') {  
     showTrace (rect.prev1, position);  
     showTrace (rect.prev2, position);  
   } else if (rect.prevOp === 'sub-vector') {  
     showTrace (rect.prev1, position);  
     showTrace (rect.prev2, position);  
   } else if (rect.prevOp === 'in-edge') {  
     showTrace (rect.prev1, position);  
     showTrace (rect.prev2, position);  
   } else if (rect.prevOp === 'out-edge') {  
     showTrace (rect.prev1, position);  
     showTrace (rect.prev2, position);  
   } else if (rect.prevOp === 'topleft') {  
     showTrace (rect.prev1, position);  
   } else if (rect.prevOp === 'topleft-negated') {  
     showTrace (rect.prev1, position);  
   }  
   setHighlight (rect, position);  
 } // showTrace  
   
 NodeRectViewer.Box = function (rect, coords /* viewport or canvas */) {  
4    var self = this;    var self = this;
5    
   this.initialLeft = rect.getRenderedLeft ();  
   this.initialTop = rect.getRenderedTop ();  
   this.width = rect.width;  
   this.height = rect.height;  
   
6    var marker = document.createElement ('div');    var marker = document.createElement ('div');
7    this.element = marker;    this.element = marker;
8    
9    setCSSPosition (marker.style, coords == 'viewport' ? 'fixed' : 'absolute');    marker.style.margin = 0;
10        marker.style.borderWidth = 0;
11    this.setPosition (this.initialLeft, this.initialTop);    marker.style.padding = 0;
12    
13      var left = rect.getRenderedLeft ();
14      var top = rect.getRenderedTop ();
15    
16      if (refBox) {
17        left += refBox.getSourceLeft ();
18        top += refBox.getSourceTop ();
19      }
20    
21      this.setPositionProperty (coords == 'viewport' ? 'fixed' : 'absolute');
22      this.setInitialPosition (left, top);
23    this.setMaxZIndex ();    this.setMaxZIndex ();
24    
25    if (rect instanceof NodeRect.Rect.Vector) {    if (rect instanceof NR.Vector) {
26      this.setBorder (!rect.upward, !rect.leftward, rect.upward, rect.leftward);      this.setBorder (rect.y < 0, rect.x < 0, rect.y >= 0, rect.x >= 0);
27    } else {    } else {
28      this.setBorder (true, true, true, true);      this.setBorder (true, true, true, true);
29    }    }
30    
31    this.setDimension (rect.width, rect.height);    this.setDimension (rect.getRenderedWidth (), rect.getRenderedHeight ());
32    
33      this.sourceLeft = this.left;
34      this.sourceTop = this.top;
35      this.destLeft = this.left + this.width;
36      this.destTop = this.top + this.height;
37    
38      if (rect instanceof NR.Vector) {
39        if (rect.x < 0) {
40          this.sourceLeft = this.left + this.width;
41          this.destLeft = this.left;
42        }
43        if (rect.y < 0) {
44          this.sourceTop = this.top + this.height;
45          this.destTop = this.top;
46        }
47        this.addArrow (this.getSourceLeft (), this.getSourceTop (),
48                       this.getDestinationLeft (), this.getDestinationTop ());
49      }
50    
51    this.setColor (rect.index);    this.setColor (rect.index);
52    this.setOpacity (0.3);    this.setOpacity (0.3);
# Line 124  NodeRectViewer.Box = function (rect, coo Line 67  NodeRectViewer.Box = function (rect, coo
67        self.startDrag (event);        self.startDrag (event);
68      }      }
69    };    };
70    marker.ondblclick = function () {    marker.ondblclick = function (event) {
71        event = event || window.event;
72      if (!self.isClickable (event.target || event.srcElement)) {      if (!self.isClickable (event.target || event.srcElement)) {
73        self.setPosition (self.initialLeft, self.initialTop);        self.setPosition (self.initialLeft, self.initialTop);
74      }      }
# Line 140  NodeRectViewer.Box.prototype.setMaxZInde Line 84  NodeRectViewer.Box.prototype.setMaxZInde
84    this.element.style.zIndex = ++NodeRectViewer.maxZIndex;    this.element.style.zIndex = ++NodeRectViewer.maxZIndex;
85  }; // setMaxZIndex  }; // setMaxZIndex
86    
87    NodeRectViewer.Box.prototype.setPositionProperty = function (value) {
88      var style = this.element.style;
89      if (value == 'fixed') {
90        if (document.all && document.compatMode != 'CSS1Compat') {
91          style.position = 'absolute';
92        } else {
93          style.position = value;
94        }
95      } else {
96        style.position = value;
97      }
98    }; // setPositionProperty
99    
100    NodeRectViewer.Box.prototype.setInitialPosition = function (left, top) {
101      this.initialLeft = left;
102      this.initialTop = top;
103      this.setPosition (this.initialLeft, this.initialTop);
104    }; // setInitialPosition
105    
106    NodeRectViewer.Box.prototype.getSourceLeft = function () {
107      return this.sourceLeft;
108    }; // getSourceLeft
109    
110    NodeRectViewer.Box.prototype.getSourceTop = function () {
111      return this.sourceTop;
112    }; // getSourceTop
113    
114    NodeRectViewer.Box.prototype.getDestinationLeft = function () {
115      return this.destLeft;
116    }; // getDestinationLeft
117    
118    NodeRectViewer.Box.prototype.getDestinationTop = function () {
119      return this.destTop;
120    }; // getDestinationTop
121    
122  NodeRectViewer.Box.prototype.setPosition = function (left, top) {  NodeRectViewer.Box.prototype.setPosition = function (left, top) {
123    if (!isNaN (top + 0)) {    if (!isNaN (top + 0)) {
124      this.element.style.top = top + 'px';      this.element.style.top = top + 'px';
# Line 161  NodeRectViewer.Box.prototype.setDimensio Line 140  NodeRectViewer.Box.prototype.setDimensio
140    if (w < 0 || (w + 0) != w) w = 0;    if (w < 0 || (w + 0) != w) w = 0;
141    if (h < 0 || (h + 0) != h) h = 0;    if (h < 0 || (h + 0) != h) h = 0;
142    
143      this.width = w;
144      this.height = h;
145    
146    var ww = w;    var ww = w;
147    var hh = h;    var hh = h;
148    if (ww < 20) ww = 20;    if (ww < 20) ww = 20;
# Line 190  NodeRectViewer.Box.prototype.setBorder = Line 172  NodeRectViewer.Box.prototype.setBorder =
172      borderEl.style.position = 'absolute';      borderEl.style.position = 'absolute';
173      borderEl.style.top = 0;      borderEl.style.top = 0;
174      borderEl.style.left = 0;      borderEl.style.left = 0;
175        borderEl.style.margin = 0;
176        borderEl.style.padding = 0;
177      borderEl.style.MozBoxSizing = 'border-box';      borderEl.style.MozBoxSizing = 'border-box';
178      borderEl.style.WebkitBoxSizing = 'border-box';      borderEl.style.WebkitBoxSizing = 'border-box';
179      borderEl.style.boxSizing = 'border-box';      borderEl.style.boxSizing = 'border-box';
# Line 263  NodeRectViewer.Box.prototype.setDescript Line 247  NodeRectViewer.Box.prototype.setDescript
247    this.element.appendChild (textEl);    this.element.appendChild (textEl);
248  }; // setDescription  }; // setDescription
249    
 function setHighlight (rect, coords) {  
   var marker = new NodeRectViewer.Box (rect, coords);  
   
   document.body.appendChild (marker.element);  
   if (!document.highlightElements) document.highlightElements = [];  
   document.highlightElements.push (marker.element);  
 }; // setHighlight  
   
250  NodeRectViewer.Box.dragging = null;  NodeRectViewer.Box.dragging = null;
251    
252  if (!NodeRectViewer.Box.activeHandlers) NodeRectViewer.Box.activeHandlers = {};  if (!NodeRectViewer.Box.activeHandlers) NodeRectViewer.Box.activeHandlers = {};
# Line 395  NodeRectViewer.Box.prototype.remove = fu Line 371  NodeRectViewer.Box.prototype.remove = fu
371    this.element.parentNode.removeChild (this.element);    this.element.parentNode.removeChild (this.element);
372  }; // remove  }; // remove
373    
374  function clearHighlight () {  
375    if (document.highlightElements) {  NodeRectViewer.Box.prototype._initCanvas = function () {
376      for (var i in document.highlightElements) {    var canvas = this.element.ownerDocument.createElement ('canvas');
377        var el = document.highlightElements[i];    if (window.uuClass && uuClass.Canvas) {
378        if (el.parentNode) el.parentNode.removeChild (el);  //    uuClass.Canvas (canvas);
     }  
     document.highlightElements = [];  
379    }    }
 }  
380    
381  function NodeRectOnLoad () {    canvas.width = this.width + 20;
382    if (NodeRectViewer.controller) {    canvas.height = this.height + 20;
383      NodeRectViewer.controller.remove ();    canvas.style.display = 'block';
384      canvas.style.position = 'absolute';
385      canvas.style.top = 0;
386      canvas.style.left = 0;
387      canvas.style.zIndex = 10;
388      if (!canvas.getContext) {
389        this.canvas = {notSupported: true};
390        return;
391    }    }
392      var ctx = canvas.getContext ('2d');
393      this.canvas = ctx;
394      this.element.appendChild (canvas);
395    }; // _initCanvas
396    
397    var vpRects = NodeRect.getViewportRects ();  NodeRectViewer.Box.prototype.addArrow = function (x1, y1, x2, y2) {
398      if (!this.canvas) this._initCanvas ();
399      if (this.canvas.notSupported) return;
400      var ctx = this.canvas;
401    
402      ctx.beginPath ();
403    
404      ctx.moveTo (x1, y1);
405      ctx.lineTo (x2, y2);
406    
407      var arrowHeadAngle = Math.PI / 12;
408      var arrowHeadLength = 40;
409    
410      var t = Math.PI + Math.atan2 (y2 - y1, x2 - x1);
411    
412      var ax = Math.cos (arrowHeadAngle);
413      var ay = Math.sin (arrowHeadAngle);
414    
415      var ax_ = ax * Math.cos (t) - ay * Math.sin (t);
416      var ay_ = ax * Math.sin (t) + ay * Math.cos (t);
417    
418      ax_ *= arrowHeadLength;
419      ay_ *= arrowHeadLength;
420    
421      var bx = Math.cos (-arrowHeadAngle);
422      var by = Math.sin (-arrowHeadAngle);
423    
424      var bx_ = bx * Math.cos (t) - by * Math.sin (t);
425      var by_ = bx * Math.sin (t) + by * Math.cos (t);
426    
427      bx_ *= arrowHeadLength;
428      by_ *= arrowHeadLength;
429    
430      ctx.lineTo (x2 + ax_, y2 + ay_);
431    
432      ctx.moveTo (x2, y2);
433      ctx.lineTo (x2 + bx_, y2 + by_);
434    
435      ctx.stroke ();
436    }; // addArrow
437    
438    
439    
440    NodeRectViewer.Controller = function () {
441      var self = this;
442    
443      var vpRects = NR.View.getViewportRects (window);
444    var icb = vpRects.icb;    var icb = vpRects.icb;
445    var wh = NodeRect.Rect.whCSS (document.body, '20em', '11em');  
446      var wh = NR.Rect.whCSS (document.body, '20em', '11em');
447    var controllerRect    var controllerRect
448        = new NodeRect.Rect        = new NR.Rect (0, icb.width, null, null, wh.width, wh.height);
           (null, icb.width, icb.height, null, wh.width, wh.height);  
449    controllerRect.label = 'NodeRect viewer';    controllerRect.label = 'NodeRect viewer';
450    
451    var controller = new NodeRectViewer.Box (controllerRect, 'viewport');    var controller = new NodeRectViewer.Box (controllerRect, 'viewport');
452      this.box = controller;
453    controller.element.style.backgroundColor = '#FFCCFF';    controller.element.style.backgroundColor = '#FFCCFF';
454    controller.element.style.whiteSpace = 'nowrap';    controller.element.style.whiteSpace = 'nowrap';
455    controller.isClickable = function (target) {    controller.isClickable = function (target) {
456      return target.form;      return target !== self.box.element && target !== self.formElement;
457    };    };
458    controller.setOpacity = function () {    controller.setOpacity = function () {
459      this.constructor.prototype.setOpacity.apply (this, [1.0]);      this.constructor.prototype.setOpacity.apply (this, [1.0]);
460    };    };
461      controller.setOpacity (1.0);
462    
463    var cb = ' style="color: green" ';    var cb = ' style="color: green" ';
464    controller.element.innerHTML = '<form>\    controller.element.innerHTML = '<form onsubmit="return false"><div \
465          style="width:98%;height:8em; overflow: auto;\
466          border: groove 2px gray;\
467          background-color:white;color:black;\
468          line-height: 1.1;\
469          white-space: pre;\
470          white-space: -moz-pre-wrap;\
471          white-space: pre-wrap"></div>\
472  \  \
   <textarea name=result style=width:95%;height:6em></textarea>\  
   <br>\  
473  \  \
474    <input name=selector title="Target element selector" value=body \    <input name=selector title="Target element selector" \
475        onchange=update(form) onkeyup=update(form) \        onkeypress=commandInputChanged(event) \
476        style=width:14em>\        style=width:70%>\
   <input name=selectorIndex title="Target element index" value=0 \  
       onchange=update(form) onkeyup=update(form) \  
       style=width:3em>\  
477    <input type=checkbox name=trace title="Show box chain" onclick=update(form)>\    <input type=checkbox name=trace title="Show box chain" onclick=update(form)>\
478    <br>\    <br>\
479  \  \
480    <button type=button onclick=update(form)>Update</button>\    <button type=button onclick=update(form)>Update</button>\
481    <select name=coords title="Layout box(es) with coordinate ..." \    <select name=coords title="Layout box(es) with coordinate ..." \
482        onchange=update(form)>\        onchange=update(form)>\
483    <option selected value=canvas>Canvas\    <option value=canvas>Canvas\
484    <option value=viewport>Viewport\    <option value=viewport>Viewport\
485    </select>\    </select>\
486  \  \
487    <select name=prop title="Show box(es) of ..." onchange=update(form)\    <select name=prop title="Show box(es) of ..." onchange=update(form)>\
488        style="width:10em">\  \
489      <optgroup label="Mouse event">\
490      <option value=ev.viewport>Viewport coordinate\
491      <option value=ev.canvas>Canvas coordinate\
492      <option value=ev.client>Client\
493      <option value=ev.xy>x, y\
494      <option value=ev.offset>Offset\
495      <option value=ev.layer>Layer\
496      <option value=ev.page>Page\
497      <option value=ev.wh>width, height\
498      <option value=ev.screen>Screen\
499    \
500    \ </optgroup><option value>---------\
501  \  \
502    <optgroup label="Element coordinate">\    <optgroup label="Element coordinate">\
   <option value=offset title="offset* attributes">offset\  
503    <option value=client title="client* attributes">client\    <option value=client title="client* attributes">client\
504    <option value=scrollableArea title="scroll* attributes">scroll (width/height)\    <option value=scrollableArea title="scroll* attributes">scroll (width/height)\
505    <option value=scrollState title="scroll* attributes">scroll (top/left)\    <option value=scrollState title="scroll* attributes">scroll (top/left)\
506  \  \
507      <optgroup label="Containing block coordinate">\
508      <option value=offset title="offset* attributes">offset\
509      <option value=x.px>style.pixel\
510      <option value=x.pos>style.pos\
511      <option value=x.currentPx>currentStyle.pixel\
512      <option value=x.currentPos>currentStyle.pos\
513      <option value=x.computedPx>getComputedStyle.pixel\
514      <option value=x.computedPos>getComputedStyle.pos\
515    \
516    <optgroup label="Viewport coordinate">\    <optgroup label="Viewport coordinate">\
517    <option value="boundingClient">getBoundingClientRect</option>\    <option value="boundingClient">getBoundingClientRect</option>\
518  \  \
519    <optgroup label="Canvas coordinate">\    <optgroup label="Canvas coordinate">\
520    <option value="marginEdge"' + cb + '>Margin edge</option>\    <option value=marginBox' + cb + '>Margin box\
521    <option selected value="borderEdge"' + cb + '>Border edge</option>\    <option value=borderBox' + cb + '>Border box\
522    <option value="cumulativeOffset">Cumulative offset</option>\    <option value="cumulativeOffset">Cumulative offset</option>\
523    <option value="paddingEdge">Padding edge</option>\    <option value=x.boxObject>getBoxObjectFor\
524    <option value="cumulativeClient">Cumulative client</option>\    <option value=paddingBox' + cb + '>Padding box\
525    <option value=boxObject>getBoxObjectFor\    <option value=clientAbs>Client (canvas coordinate)</option>\
526      <option value=contentBox' + cb + '>Content box\
527      <option value=x.textRangeBounding>createTextRange ().bounding\
528  \  \
529    <optgroup label="Screen coordinate">\    <optgroup label="Screen coordinate">\
530    <option value=boxObjectScreen>getBoxObjectFor.screen\    <option value=x.boxObjectScreen>getBoxObjectFor.screen\
531  \  \
532    </optgroup><option value>----------\    </optgroup><option value>----------\
533  \  \
# Line 486  function NodeRectOnLoad () { Line 543  function NodeRectOnLoad () {
543    <option value=vp.contentBox' + cb + '>Content box\    <option value=vp.contentBox' + cb + '>Content box\
544    <option value=vp.icb' + cb + '>Initial containing block\    <option value=vp.icb' + cb + '>Initial containing block\
545    <option value=vp.scrollState' + cb + '>Scroll state\    <option value=vp.scrollState' + cb + '>Scroll state\
546    <option value=vp.windowScrollXY>Scroll (x, y)\    <option value=vpx.windowScrollXY>Scroll (x, y)\
547    <option value=vp.windowPageOffset>Page offset\    <option value=vp.windowPageOffset>Page offset\
548    <option value=vp.windowScrollMax>Scroll maximum\    <option value=vpx.windowScrollMax>Scroll maximum\
549    <option value=vp.windowInner>Window inner\    <option value=vpx.windowInner>Window inner\
550    <option value=vp.boundingClientOrigin' + cb + '>Origin of getBoundingClientRect\    <option value=vp.boundingClientOrigin' + cb + '>Origin of getBoundingClientRect (calc)\
551      <option value=boundingClientOrigin>Origin of getBoundingClientRect (element)\
552  \  \
553    <option value=vp.document>Document\    <option value=vpx.document>Document\
554    <option value=vp.deOffset>documentElement.offset\    <option value=vp.deOffset>documentElement.offset\
555    <option value=vp.deClient>documentElement.client\    <option value=vp.deClient>documentElement.client\
556    <option value=vp.deScrollableArea>documentElement.scroll (width, height)\    <option value=vp.deScrollableArea>documentElement.scroll (width, height)\
# Line 514  function NodeRectOnLoad () { Line 572  function NodeRectOnLoad () {
572    </select>\    </select>\
573    </form>';    </form>';
574        
575      controller.element.style.width = 'auto';
576      controller.element.style.height = 'auto';
577    document.body.appendChild (controller.element);    document.body.appendChild (controller.element);
   NodeRectViewer.controller = controller;  
578    
579    update (controller.element.firstChild);    controller.setDimension
580  } // NodeRectOnLoad        (controller.element.offsetWidth, controller.element.offsetHeight);
581      controller.setInitialPosition
582          (icb.width - controller.width, icb.height - controller.height);
583    
584      this.formElement = controller.element.firstChild;
585    
586      this.logElement = this.formElement.firstChild;
587    
588      this.formElement.update = function (form) {
589        self.updateProps (form);
590        if (self.boxType.substring (0, 2) == 'ev') {
591          self.startCapture ();
592          self.addInputLog ('startCapture');
593        } else {
594          self.update ();
595        }
596      };
597      this.formElement.commandInputChanged = function (event) {
598        if (event.keyCode == 13 || event.keyCode == 10) {
599          self.invokeCommand (self.formElement.selector.value);
600          self.formElement.selector.value = '';
601          if (event.preventDefault) event.preventDefault ();
602          event.returnValue = false;
603        }
604      };
605    
606    
607      this.selectorIndex = 0;
608      this.boxType = 'borderBox';
609      this.boxCoord = 'canvas';
610      this.showChain = false;
611      this.selector = 'body';
612      this.addInputLog ('selector = body');
613      this.updateForm ();
614      this.update ();
615    
616      this.formElement.selector.focus ();
617    }; // Controller
618    
619    NodeRectViewer.Controller.prototype.remove = function () {
620      this.clearHighlight ();
621      this.box.remove ();
622    }; // remove
623    
624    NodeRectViewer.Controller.prototype.updateForm = function () {
625      var form = this.formElement;
626      form.prop.value = this.boxType;
627      form.coords.value = this.boxCoord;
628      form.trace.checked = this.showChain;
629    }; // updateForm
630    
631    NodeRectViewer.Controller.prototype.updateProps = function (form) {
632      var newBoxType = form.prop.value;
633      if (newBoxType != this.boxType) {
634        this.boxType = newBoxType;
635        this.addInputLog ("boxType = " + newBoxType);
636      }
637    
638      var newShowChain = form.trace.checked;
639      if (this.showChain != newShowChain) {
640        this.showChain = newShowChain;
641        this.addInputLog ('showChain = ' + newShowChain);
642      }
643    
644      var newBoxCoord = form.coords.value;
645      if (newBoxCoord != this.boxCoord) {
646        this.boxCoord = newBoxCoord;
647        this.addInputLog ('boxCoord = ' + newBoxCoord);
648      }
649    }; // updateProps
650    
651    NodeRectViewer.Controller.prototype.update = function () {
652      this.clearHighlight ();
653    
654      var type = this.boxType;
655      var el = uu.css (this.selector)[this.selectorIndex];
656      if ((type.substring (0, 2) != 'ev' && el) ||
657          (type.substring (0, 2) == 'ev' && this.lastEvent)) {
658        NR.resetIndex ();
659        var rect;
660        var position = this.boxCoord;
661        if (type == '') {
662          return;
663        } else if (type == 'cumulativeOffset') {
664          rect = NR.Element.getCumulativeOffsetRect (el, window);
665        } else if (type == 'boundingClientOrigin') {
666          rect = NR.View.getBoundingClientRectOrigin (window, document);
667        } else if (type.substring (0, 3) === 'vp.') {
668          var rects = NR.View.getViewportRects (window);
669          rect = rects[type.substring (3)];
670        } else if (type.substring (0, 4) === 'vpx.') {
671          var rects = NR.View.getViewportRectsExtra (window);
672          rect = rects[type.substring (4)];
673        } else if (type.substring (0, 4) === 'win.') {
674          var rects = NR.View.getWindowRects (window);
675          rect = rects[type.substring (4)];
676        } else if (type.substring (0, 7) === 'screen.') {
677          var rects = NR.View.getScreenRects (window);
678          rect = rects[type.substring (7)];
679        } else if (type.substring (0, 2) === 'x.') {
680          var rects = NR.Element.getRectsExtra (el, window);
681          rect = rects[type.substring (2)];
682        } else if (type.substring (0, 3) === 'ev.' || !el) {
683          var rects = NR.Event.getRects (this.lastEvent, window);
684          rect = rects[type.substring (3)];
685        } else {
686          var rects = NR.Element.getRects (el, window);
687          rect = rects[type];
688        }
689    
690        if (!rect) {
691          rect = NR.Rect.invalid;
692        }
693    
694        this.addOutputLog (rect.toString ());
695    
696        if (this.showChain) {
697          this.showTrace (rect, position);
698        } else {
699          this.setHighlight (rect, position);
700        }
701    
702        this.box.setMaxZIndex ();
703      }
704    }; // update
705    
706    NodeRectViewer.Controller.prototype.invokeCommand = function (commandStr) {
707      var command = {};
708      var m;
709      if (m = commandStr.match (/^\s*([a-zA-Z0-9]+)\s*=\s*(\S+)\s*$/)) {
710        command.type = m[1];
711        command.arg = m[2];
712      } else if (m = commandStr.match (/^\s*(clear|startCapture|endCapture)\s*$/)) {
713        command.type = m[1];
714      } else if (commandStr == '') {
715        return;
716      } else {
717        command.type = 'selector';
718        command.arg = commandStr;
719      }
720    
721      if (command.type === 'boxType' ||
722          command.type === 'boxCoord') {
723        this[command.type] = command.arg;
724        this.addInputLog (command.type + ' = ' + this[command.type]);
725        this.updateForm ();
726        this.update (this.formElement);
727      } else if (command.type === 'selectorIndex') {
728        this[command.type] = parseInt (command.arg) || 0;
729        this.addInputLog (command.type + ' = ' + this[command.type]);
730        this.updateForm ();
731        this.update (this.formElement);
732      } else if (command.type === 'showChain') {
733        this[command.type] = command.arg && command.arg != "false" ? true : false;
734        this.addInputLog (command.type + ' = ' + this[command.type]);
735        this.updateForm ();
736        this.update (this.formElement);
737      } else if (command.type === 'selector') {
738        this.selector = command.arg;
739        this.addInputLog (command.type + ' = ' + this[command.type]);
740        this.update (this.formElement);
741      } else if ({startCapture: true, endCapture: true}[command.type]) {
742        this.addInputLog (command.type);
743        this[command.type] ();
744      } else if (command.type === 'clear') {
745        this.logElement.innerHTML = '';
746      } else {
747        this.addOutputLog (command.type + ': Command not found');
748      }
749    }; // invokeCommand
750    
751    NodeRectViewer.Controller.prototype.addInputLog = function (s) {
752      var doc = this.logElement.ownerDocument;
753      var entryEl = doc.createElement ('div');
754      entryEl.style.color = 'blue';
755      entryEl.appendChild (doc.createTextNode ('> ' + s));
756      this.logElement.appendChild (entryEl);
757      this.logElement.scrollTop = this.logElement.scrollHeight;
758    }; // addInputLog
759    
760    NodeRectViewer.Controller.prototype.addOutputLog = function (s) {
761      var doc = this.logElement.ownerDocument;
762      var entryEl = doc.createElement ('div');
763      var lines = s.split (/\r?\n/); // to avoid IE bug
764      for (var i = 0; i < lines.length; i++) {
765        entryEl.appendChild (doc.createTextNode (lines[i]));
766        entryEl.appendChild (doc.createElement ('br'));
767      }
768      this.logElement.appendChild (entryEl);
769      this.logElement.scrollTop = this.logElement.scrollHeight;
770    }; // addOutputLog
771    
772    NodeRectViewer.Controller.prototype.showTrace =
773    function (rect, position, refBox) {
774      if (rect.prevOp === 'add-offset') {
775        var b1 = this.showTrace (rect.prev1, position);
776        this.showTrace (rect.prev2, position, b1);
777      } else if (rect.prevOp === 'sub-offset') {
778        var b1 = this.showTrace (rect.prev1, position);
779        this.showTrace (rect.prev2, position, b1);
780      } else if (rect.prevOp === 'add-vector') {
781        var b1 = this.showTrace (rect.prev1, position);
782        this.showTrace (rect.prev2, position, b1);
783      } else if (rect.prevOp === 'sub-vector') {
784        var b1 = this.showTrace (rect.prev1, position);
785        this.showTrace (rect.prev2, position, b1);
786      } else if (rect.prevOp === 'and') {
787        var b1 = this.showTrace (rect.prev1, position);
788        this.showTrace (rect.prev2, position, b1);
789      } else if (rect.prevOp === 'in-edge') {
790        var b1 = this.showTrace (rect.prev1, position);
791        this.showTrace (rect.prev2, position, b1);
792      } else if (rect.prevOp === 'out-edge') {
793        var b1 = this.showTrace (rect.prev1, position);
794        this.showTrace (rect.prev2, position, b1);
795      } else if (rect.prevOp === 'topleft') {
796        this.showTrace (rect.prev1, position);
797      } else if (rect.prevOp === 'negate') {
798        this.showTrace (rect.prev1, position);
799      }
800    
801      return this.setHighlight (rect, position, refBox);
802    }; // showTrace
803    
804    NodeRectViewer.Controller.prototype.setHighlight =
805    function (rect, coords, refBox) {
806      var marker = new NodeRectViewer.Box (rect, coords, refBox);
807    
808      document.body.appendChild (marker.element);
809      if (!this.highlightElements) this.highlightElements = [];
810      this.highlightElements.push (marker.element);
811    
812      return marker;
813    }; // setHighlight
814    
815    NodeRectViewer.Controller.prototype.clearHighlight = function () {
816      if (this.highlightElements) {
817        for (var i in this.highlightElements) {
818          var el = this.highlightElements[i];
819          if (el.parentNode) el.parentNode.removeChild (el);
820        }
821        this.highlightElements = [];
822      }
823    }; // clearHighlight
824    
825    NodeRectViewer.Controller.prototype.startCapture = function () {
826      NodeRectViewer.addClickHandler ();
827    }; // startCapture
828    
829    NodeRectViewer.Controller.prototype.endCapture = function () {
830      NodeRectViewer.removeClickHandler ();
831    }; // endCapture
832    
833    NodeRectViewer.Controller.prototype.onclick = function (ev) {
834      var cbox = this.box.element;
835      var el = ev.target;
836      while (el) {
837        if (el == cbox) return;
838        el = el.parentNode;
839      }
840    
841      this.lastEvent = ev;
842      this.update ();
843    
844      this.endCapture ();
845      this.addInputLog ('endCapture');
846    
847      ev.stopPropagation ();
848      ev.preventDefault ();
849    }; // onclick
850    
851    if (!NodeRectViewer.activeHandlers) NodeRectViewer.activeHandlers = {};
852    
853    NodeRectViewer.removeClickHandler = function () {
854      if (NodeRectViewer.activeHandlers.clickHandler) {
855        if (window.removeEventListener) {
856          window.removeEventListener
857              ('click', NodeRectViewer.activeHandlers.clickHandler, true);
858        } else if (document.detachEvent) {
859          document.detachEvent
860              ('onclick', NodeRectViewer.activeHandlers.clickHandler);
861        }
862        delete NodeRectViewer.activeHandlers.clickHandler;
863      }
864    }; // removeClickHandler
865    NodeRectViewer.removeClickHandler ();
866    
867    NodeRectViewer.addClickHandler = function () {
868      if (NodeRectViewer.activeHandlers.clickHandler) {
869        NodeRectViewer.removeClickHandler ();
870      }
871      if (window.addEventListener) {
872        window.addEventListener ('click', NodeRectViewer.clickHandler, true);
873        NodeRectViewer.activeHandlers.clickHandler = NodeRectViewer.clickHandler;
874      } else if (document.attachEvent) {
875        document.attachEvent ('onclick', NodeRectViewer.clickHandler);
876        NodeRectViewer.activeHandlers.clickHandler = NodeRectViewer.clickHandler;
877      }
878    }; // addClickHandler
879    
880    NodeRectViewer.clickHandler = function (event) {
881      if (NodeRectViewer.controller) {
882        NodeRectViewer.controller.onclick (event || window.event);
883      }
884    }; // clickHandler
885    
886    
887    
888    function NROnLoad () {
889      if (NodeRectViewer.controller) {
890        NodeRectViewer.controller.remove ();
891      }
892    
893      NodeRectViewer.controller = new NodeRectViewer.Controller ();
894    } // NROnLoad
895    
896  var s = document.createElement ('script');  var s = document.createElement ('script');
897  s.src = "http://uupaa-js.googlecode.com/svn/trunk/uupaa.js";  s.src = "http://uupaa-js.googlecode.com/svn/trunk/uupaa.js";
898  document.body.appendChild (s);  document.body.appendChild (s);
899    
900    /*
901    if (!window.uuClass) window.uuClass = {};
902    
903    var s = document.createElement ('script');
904    s.src = "http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-color.js/uupaa-color.mini.js";
905    document.body.appendChild (s);
906    
907    var s = document.createElement ('script');
908    s.src = "http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-excanvas.js/uupaa-excanvas.js";
909    document.body.appendChild (s);
910    */
911    
912  var s = document.createElement ('script');  var s = document.createElement ('script');
913  s.src = "http://suika.fam.cx/www/css/noderect/NodeRect.js?" + Math.random ();  s.src = "http://suika.fam.cx/www/css/noderect/NodeRect.js?" + Math.random ();
914  document.body.appendChild (s);  document.body.appendChild (s);
Legend:
Removed from v.1.12  
changed lines
  Added in v.1.31
admin@suikawiki.org
 ViewVC Help
Powered by ViewVC 1.1.24