git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojox/gfx/demos/inspector.html

   1 <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" >
   2 <head>
   3 <title>Inspect DojoX GFX JSON</title>
   4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5 <style type="text/css">
   6         @import "../../../dojo/resources/dojo.css";
   7         @import "../../../dijit/tests/css/dijitTests.css";
   8         td.cell { padding: 1em 1em 0em 0em; }
   9         td.note { font-size: 80%; }
  10 </style>
  11 <!--
  12 The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend
  13 <script type="text/javascript" src="Silverlight.js"></script>
  14 -->
  15 <script type="text/javascript" src="../../../dojo/dojo.js"></script>
  16 <script type="text/javascript">
  17 dojo.require("dojox.gfx");
  18 dojo.require("dojox.gfx.move");
  19 dojo.require("dojox.gfx.utils");
  20
  21 surface = null;
  22 container_pos = null;
  23 mover = null;
  24
  25 init = function(){
  26         // initialize graphics
  27         var container = dojo.byId("gfx");
  28         surface = dojox.gfx.createSurface(container, 500, 500);
  29         container_pos = dojo.coords(container, true);
  30         // wire UI
  31         dojo.connect(dojo.byId("load"), "onclick", onLoad);
  32         dojo.connect(dojo.byId("add"),  "onclick", onAdd);
  33         // handle moves
  34         dojo.subscribe("/gfx/move/start", function(m){ mover = m; });
  35         dojo.subscribe("/gfx/move/stop", function(){ mover = null; });
  36         // handle shape operations
  37         dojo.connect(document, "onkeydown", onKeyDown);
  38         // cancel text selection and text dragging
  39         dojo.connect(container, "ondragstart",   dojo, "stopEvent");
  40         dojo.connect(container, "onselectstart", dojo, "stopEvent");
  41 };
  42
  43 onLoad = function(){
  44         var s = dojo.byId("source");
  45         if(!s.value){
  46                 alert("Name of the file is required.");
  47                 return;
  48         }
  49         dojo.xhrGet({
  50                 url:                    s.value,
  51                 preventCache:   true,
  52                 handleAs:               "json",
  53                 load:                   loadObjects,
  54                 error:                  function(r){ alert("Error: " + r); }
  55         });
  56 };
  57
  58 mainObject = null;
  59 names = [];
  60
  61 loadObjects = function(r){
  62         if(!r){
  63                 alert("Wrong JSON object. Did you type the file name correctly?");
  64                 return;
  65         }
  66         mainObject = r;
  67         // clear old object names
  68         names = [];
  69         var s = dojo.byId("names"), ni = dojo.byId("names_info");
  70         ni.innerHTML = "";
  71         while(s.childNodes.length){ s.removeChild(s.lastChild); }
  72         // find new names
  73         findNames(s, dojo.byId("named").checked, "", mainObject);
  74         ni.innerHTML = " (" + names.length + ")";
  75 };
  76
  77 findNames = function(selector, named_only, prefix, o){
  78         if(o instanceof Array){
  79                 for(var i = 0; i < o.length; ++i){
  80                         findNames(selector, named_only, prefix, o[i]);
  81                 }
  82                 return;
  83         }
  84         if(named_only && !("name" in o)) return;
  85         var name = ("name" in o) ? o.name : "*",
  86                 full = prefix ? prefix + "/" + name : name,
  87                 opt  = document.createElement("option");
  88         opt.value = names.length;
  89         opt.innerHTML = full;
  90         names.push(o);
  91         selector.appendChild(opt);
  92         if("children" in o){
  93                 findNames(selector, named_only, full, o.children);
  94         }
  95 };
  96
  97 onAdd = function(){
  98         var s = dojo.byId("names");
  99         for(var i = 0; i < s.options.length; ++i){
 100                 var opt = s.options[i];
 101                 if(!opt.selected) continue;
 102                 var object = names[Number(opt.value)];
 103                 var group = surface.createGroup();
 104                 dojox.gfx.utils.deserialize(group, object);
 105                 new dojox.gfx.Moveable(group); // make it moveable as whole
 106         }
 107 };
 108
 109 // event handling
 110
 111 onKeyDown = function(e){
 112         if(!mover) return;
 113         switch(e.keyCode){
 114                 case "f".charCodeAt(0): case "F".charCodeAt(0):
 115                         mover.shape.moveToFront();
 116                         break;
 117                 case "b".charCodeAt(0): case "B".charCodeAt(0):
 118                         mover.shape.moveToBack();
 119                         break;
 120                 case "q".charCodeAt(0): case "Q".charCodeAt(0):
 121                         mover.shape.applyLeftTransform(dojox.gfx.matrix.rotategAt(-15, mover.lastX - container_pos.x, mover.lastY - container_pos.y));
 122                         break;
 123                 case "w".charCodeAt(0): case "W".charCodeAt(0):
 124                         mover.shape.applyLeftTransform(dojox.gfx.matrix.rotategAt(15, mover.lastX - container_pos.x, mover.lastY - container_pos.y));
 125                         break;
 126                 case "d".charCodeAt(0): case "D".charCodeAt(0):
 127                         mover.shape.parent.remove(mover.shape);
 128                         mover.shape.rawNode = null;
 129                         mover.destroy();
 130                         break;
 131         }
 132         dojo.stopEvent(e);
 133 };
 134
 135 dojo.addOnLoad(init);
 136 </script>
 137 </head>
 138 <body>
 139         <h1>Inspect DojoX GFX JSON</h1>
 140         <p>Help: load a file, select an object, and add it, move it around, or apply operations to selected items:<br />
 141         F &mdash; bring to front, B &mdash; bring to back, Q &mdash; rotate CCW, W &mdash; rotate CW, D &mdash; delete.<br />
 142         (all operations work on currently dragged item).</p>
 143         <p><strong>VML note:</strong> VML doesn't process PNG images with opacity correctly.</p>
 144         <table><tr>
 145                 <td align="left" valign="top" class="cell"><div id="gfx" style="width: 500px; height: 500px; border: solid 1px black;"></div></td>
 146                 <td align="left" valign="top" class="cell"><table>
 147                         <tr><td>Source:</td></tr>
 148                         <tr><td><input type="text" id="source" value="data/Lars.json" size="30" />&nbsp;<button id="load">Load</button><br />
 149                         <input type="checkbox" id="named" checked="checked" />&nbsp;<label for="named">Load only named objects</label></td></tr>
 150                         <tr><td class="note"><em>Available sources:</em></td></tr>
 151                         <tr><td class="note"><em>data/Lars.json &mdash; vectors from SVG</em></td></tr>
 152                         <tr><td class="note"><em>data/Nils.json &mdash; vectors from SVG</em></td></tr>
 153                         <tr><td class="note"><em>data/LarsDreaming.json &mdash; vectors from SVG</em></td></tr>
 154                         <tr><td class="note"><em>data/buratino.json &mdash; images</em></td></tr>
 155                         <tr><td class="note"><em>data/transform.json &mdash; from dojox.gfx</em></td></tr>
 156                         <tr><td>&nbsp;</td></tr>
 157                         <tr><td>Objects<span id="names_info"></span>:</td></tr>
 158                         <tr><td><select id="names" multiple="multiple" size="10" style="width: 300px;"></select></td></tr>
 159                         <tr><td><button id="add">Add Selected</button></td></tr>
 160                         <tr><td class="note"><div  style="width: 300px;">Object names are hierarchical and separated by "/". Adding a selected object creates a group for this object.
 161                         A higher-level object (a group) always includes lower-level objects as children.</div></td></tr>
 162                 </table></td>
 163         </tr></table>
 164 </body>
 165 </html>