/[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.26 by wakaba, Mon Jan 12 05:46:39 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    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    var vpRects = NodeRect.getViewportRects ();    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)>\
       style="width:10em">\  
488  \  \
489    <optgroup label="Element coordinate">\    <optgroup label="Element coordinate">\
490    <option value=offset title="offset* attributes">offset\    <option value=offset title="offset* attributes">offset\
# Line 463  function NodeRectOnLoad () { Line 497  function NodeRectOnLoad () {
497  \  \
498    <optgroup label="Canvas coordinate">\    <optgroup label="Canvas coordinate">\
499    <option value="marginEdge"' + cb + '>Margin edge</option>\    <option value="marginEdge"' + cb + '>Margin edge</option>\
500    <option selected value="borderEdge"' + cb + '>Border edge</option>\    <option value="borderEdge"' + cb + '>Border edge</option>\
501    <option value="cumulativeOffset">Cumulative offset</option>\    <option value="cumulativeOffset">Cumulative offset</option>\
502    <option value="paddingEdge">Padding edge</option>\    <option value="paddingEdge">Padding edge</option>\
503    <option value="cumulativeClient">Cumulative client</option>\    <option value=x.boxObject>getBoxObjectFor\
   <option value=boxObject>getBoxObjectFor\  
504  \  \
505    <optgroup label="Screen coordinate">\    <optgroup label="Screen coordinate">\
506    <option value=boxObjectScreen>getBoxObjectFor.screen\    <option value=x.boxObjectScreen>getBoxObjectFor.screen\
507  \  \
508    </optgroup><option value>----------\    </optgroup><option value>----------\
509  \  \
# Line 486  function NodeRectOnLoad () { Line 519  function NodeRectOnLoad () {
519    <option value=vp.contentBox' + cb + '>Content box\    <option value=vp.contentBox' + cb + '>Content box\
520    <option value=vp.icb' + cb + '>Initial containing block\    <option value=vp.icb' + cb + '>Initial containing block\
521    <option value=vp.scrollState' + cb + '>Scroll state\    <option value=vp.scrollState' + cb + '>Scroll state\
522    <option value=vp.windowScrollXY>Scroll (x, y)\    <option value=vpx.windowScrollXY>Scroll (x, y)\
523    <option value=vp.windowPageOffset>Page offset\    <option value=vp.windowPageOffset>Page offset\
524    <option value=vp.windowScrollMax>Scroll maximum\    <option value=vpx.windowScrollMax>Scroll maximum\
525    <option value=vp.windowInner>Window inner\    <option value=vpx.windowInner>Window inner\
526    <option value=vp.boundingClientOrigin' + cb + '>Origin of getBoundingClientRect\    <option value=vp.boundingClientOrigin' + cb + '>Origin of getBoundingClientRect\
527  \  \
528    <option value=vp.document>Document\    <option value=vpx.document>Document\
529    <option value=vp.deOffset>documentElement.offset\    <option value=vp.deOffset>documentElement.offset\
530    <option value=vp.deClient>documentElement.client\    <option value=vp.deClient>documentElement.client\
531    <option value=vp.deScrollableArea>documentElement.scroll (width, height)\    <option value=vp.deScrollableArea>documentElement.scroll (width, height)\
# Line 514  function NodeRectOnLoad () { Line 547  function NodeRectOnLoad () {
547    </select>\    </select>\
548    </form>';    </form>';
549        
550      controller.element.style.width = 'auto';
551      controller.element.style.height = 'auto';
552    document.body.appendChild (controller.element);    document.body.appendChild (controller.element);
   NodeRectViewer.controller = controller;  
553    
554    update (controller.element.firstChild);    controller.setDimension
555  } // NodeRectOnLoad        (controller.element.offsetWidth, controller.element.offsetHeight);
556      controller.setInitialPosition
557          (icb.width - controller.width, icb.height - controller.height);
558    
559      this.formElement = controller.element.firstChild;
560    
561      this.logElement = this.formElement.firstChild;
562    
563      this.formElement.update = function (form) {
564        self.updateProps (form);
565        self.update ();
566      };
567      this.formElement.commandInputChanged = function (event) {
568        if (event.keyCode == 13 || event.keyCode == 10) {
569          self.invokeCommand (self.formElement.selector.value);
570          self.formElement.selector.value = '';
571          if (event.preventDefault) event.preventDefault ();
572          event.returnValue = false;
573        }
574      };
575    
576    
577      this.selectorIndex = 0;
578      this.boxType = 'borderEdge';
579      this.boxCoord = 'canvas';
580      this.showChain = false;
581      this.selector = 'body';
582      this.addInputLog ('selector = body');
583      this.updateForm ();
584      this.update ();
585    
586      this.formElement.selector.focus ();
587    }; // Controller
588    
589    NodeRectViewer.Controller.prototype.remove = function () {
590      this.clearHighlight ();
591      this.box.remove ();
592    }; // remove
593    
594    NodeRectViewer.Controller.prototype.updateForm = function () {
595      var form = this.formElement;
596      form.prop.value = this.boxType;
597      form.coords.value = this.boxCoord;
598      form.trace.checked = this.showChain;
599    }; // updateForm
600    
601    NodeRectViewer.Controller.prototype.updateProps = function (form) {
602      var newBoxType = form.prop.value;
603      if (newBoxType != this.boxType) {
604        this.boxType = newBoxType;
605        this.addInputLog ("boxType = " + newBoxType);
606      }
607    
608      var newShowChain = form.trace.checked;
609      if (this.showChain != newShowChain) {
610        this.showChain = newShowChain;
611        this.addInputLog ('showChain = ' + newShowChain);
612      }
613    
614      var newBoxCoord = form.coords.value;
615      if (newBoxCoord != this.boxCoord) {
616        this.boxCoord = newBoxCoord;
617        this.addInputLog ('boxCoord = ' + newBoxCoord);
618      }
619    }; // updateProps
620    
621    NodeRectViewer.Controller.prototype.update = function () {
622      this.clearHighlight ();
623    
624      var el = uu.css (this.selector)[this.selectorIndex];
625      if (el) {
626        NR.resetIndex ();
627        var rect;
628        var position = this.boxCoord;
629        var type = this.boxType;
630        if (type == '') {
631          return;
632        } else if (type == 'cumulativeOffset') {
633          rect = NR.Element.getCumulativeOffsetRect (el, window);
634        } else if (type.substring (0, 3) === 'vp.') {
635          var rects = NR.View.getViewportRects (window);
636          rect = rects[type.substring (3)];
637        } else if (type.substring (0, 4) === 'vpx.') {
638          var rects = NR.View.getViewportRectsExtra (window);
639          rect = rects[type.substring (4)];
640        } else if (type.substring (0, 4) === 'win.') {
641          var rects = NR.View.getWindowRects (window);
642          rect = rects[type.substring (4)];
643        } else if (type.substring (0, 7) === 'screen.') {
644          var rects = NR.View.getScreenRects (window);
645          rect = rects[type.substring (7)];
646        } else if (type.substring (0, 2) === 'x.') {
647          var rects = NR.Element.getRectsExtra (el);
648          rect = rects[type.substring (2)];
649        } else {
650          var rects = NR.Element.getRects (el, window);
651          rect = rects[type];
652        }
653    
654        if (!rect) {
655          rect = NR.Rect.invalid;
656        }
657    
658        this.addOutputLog (rect.toString ());
659    
660        if (this.showChain) {
661          this.showTrace (rect, position);
662        } else {
663          this.setHighlight (rect, position);
664        }
665    
666        this.box.setMaxZIndex ();
667      }
668    }; // update
669    
670    NodeRectViewer.Controller.prototype.invokeCommand = function (commandStr) {
671      var command = {};
672      var m;
673      if (m = commandStr.match (/^\s*([a-zA-Z0-9]+)\s*=\s*(\S+)\s*$/)) {
674        command.type = m[1];
675        command.arg = m[2];
676      } else if (commandStr.match (/^\s*clear\s*$/)) {
677        command.type = 'clear';
678      } else if (commandStr == '') {
679        return;
680      } else {
681        command.type = 'selector';
682        command.arg = commandStr;
683      }
684    
685      if (command.type === 'boxType' ||
686          command.type === 'boxCoord') {
687        this[command.type] = command.arg;
688        this.addInputLog (command.type + ' = ' + this[command.type]);
689        this.updateForm ();
690        this.update (this.formElement);
691      } else if (command.type === 'selectorIndex') {
692        this[command.type] = parseInt (command.arg) || 0;
693        this.addInputLog (command.type + ' = ' + this[command.type]);
694        this.updateForm ();
695        this.update (this.formElement);
696      } else if (command.type === 'showChain') {
697        this[command.type] = command.arg && command.arg != "false" ? true : false;
698        this.addInputLog (command.type + ' = ' + this[command.type]);
699        this.updateForm ();
700        this.update (this.formElement);
701      } else if (command.type === 'selector') {
702        this.selector = command.arg;
703        this.addInputLog (command.type + ' = ' + this[command.type]);
704        this.update (this.formElement);
705      } else if (command.type === 'clear') {
706        this.logElement.innerHTML = '';
707      } else {
708        this.addOutputLog (command.type + ': Command not found');
709      }
710    }; // invokeCommand
711    
712    NodeRectViewer.Controller.prototype.addInputLog = function (s) {
713      var doc = this.logElement.ownerDocument;
714      var entryEl = doc.createElement ('div');
715      entryEl.style.color = 'blue';
716      entryEl.appendChild (doc.createTextNode ('> ' + s));
717      this.logElement.appendChild (entryEl);
718      this.logElement.scrollTop = this.logElement.scrollHeight;
719    }; // addInputLog
720    
721    NodeRectViewer.Controller.prototype.addOutputLog = function (s) {
722      var doc = this.logElement.ownerDocument;
723      var entryEl = doc.createElement ('div');
724      var lines = s.split (/\r?\n/); // to avoid IE bug
725      for (var i = 0; i < lines.length; i++) {
726        entryEl.appendChild (doc.createTextNode (lines[i]));
727        entryEl.appendChild (doc.createElement ('br'));
728      }
729      this.logElement.appendChild (entryEl);
730      this.logElement.scrollTop = this.logElement.scrollHeight;
731    }; // addOutputLog
732    
733    NodeRectViewer.Controller.prototype.showTrace =
734    function (rect, position, refBox) {
735      if (rect.prevOp === 'add-offset') {
736        var b1 = this.showTrace (rect.prev1, position);
737        this.showTrace (rect.prev2, position, b1);
738      } else if (rect.prevOp === 'sub-offset') {
739        var b1 = this.showTrace (rect.prev1, position);
740        this.showTrace (rect.prev2, position, b1);
741      } else if (rect.prevOp === 'add-vector') {
742        var b1 = this.showTrace (rect.prev1, position);
743        this.showTrace (rect.prev2, position, b1);
744      } else if (rect.prevOp === 'sub-vector') {
745        var b1 = this.showTrace (rect.prev1, position);
746        this.showTrace (rect.prev2, position, b1);
747      } else if (rect.prevOp === 'and') {
748        var b1 = this.showTrace (rect.prev1, position);
749        this.showTrace (rect.prev2, position, b1);
750      } else if (rect.prevOp === 'in-edge') {
751        var b1 = this.showTrace (rect.prev1, position);
752        this.showTrace (rect.prev2, position, b1);
753      } else if (rect.prevOp === 'out-edge') {
754        var b1 = this.showTrace (rect.prev1, position);
755        this.showTrace (rect.prev2, position, b1);
756      } else if (rect.prevOp === 'topleft') {
757        this.showTrace (rect.prev1, position);
758      } else if (rect.prevOp === 'negate') {
759        this.showTrace (rect.prev1, position);
760      }
761    
762      return this.setHighlight (rect, position, refBox);
763    }; // showTrace
764    
765    NodeRectViewer.Controller.prototype.setHighlight =
766    function (rect, coords, refBox) {
767      var marker = new NodeRectViewer.Box (rect, coords, refBox);
768    
769      document.body.appendChild (marker.element);
770      if (!this.highlightElements) this.highlightElements = [];
771      this.highlightElements.push (marker.element);
772    
773      return marker;
774    }; // setHighlight
775    
776    NodeRectViewer.Controller.prototype.clearHighlight = function () {
777      if (this.highlightElements) {
778        for (var i in this.highlightElements) {
779          var el = this.highlightElements[i];
780          if (el.parentNode) el.parentNode.removeChild (el);
781        }
782        this.highlightElements = [];
783      }
784    }; // clearHighlight
785    
786    function NROnLoad () {
787      if (NodeRectViewer.controller) {
788        NodeRectViewer.controller.remove ();
789      }
790    
791      NodeRectViewer.controller = new NodeRectViewer.Controller ();
792    } // NROnLoad
793    
794  var s = document.createElement ('script');  var s = document.createElement ('script');
795  s.src = "http://uupaa-js.googlecode.com/svn/trunk/uupaa.js";  s.src = "http://uupaa-js.googlecode.com/svn/trunk/uupaa.js";
796  document.body.appendChild (s);  document.body.appendChild (s);
797    
798    /*
799    if (!window.uuClass) window.uuClass = {};
800    
801    var s = document.createElement ('script');
802    s.src = "http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-color.js/uupaa-color.mini.js";
803    document.body.appendChild (s);
804    
805    var s = document.createElement ('script');
806    s.src = "http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-excanvas.js/uupaa-excanvas.js";
807    document.body.appendChild (s);
808    */
809    
810  var s = document.createElement ('script');  var s = document.createElement ('script');
811  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 ();
812  document.body.appendChild (s);  document.body.appendChild (s);
Legend:
Removed from v.1.12  
changed lines
  Added in v.1.26
admin@suikawiki.org
 ViewVC Help
Powered by ViewVC 1.1.24