CSG construction must now be done in a main() function instead of in global scope; Added CSG properties and connectors; file processing is now done in the background (Web Workers); STL file is now downloaded instead of copied from a text area

processfile.html

@@ -8,9 +8,6 @@
 
 body {
   font: 14px/20px 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  max-width: 600px;
-  margin: 0 auto;
-  padding: 10px;
 }
 
 pre, code, textarea {
@@ -25,9 +22,6 @@ pre, textarea {
   padding: 10px;
   width: 100%;
 }
-textarea {
-  height: 200px;
-}
 textarea:focus {
   outline: none;
 }
@@ -55,90 +49,27 @@ textarea:focus {
 }
 
 a { color: inherit; }
-.viewer { width: 200px; height: 200px; background: #EEE url(images.png); }
-#combined .viewer { width: 150px; height: 150px; }
-table { border-collapse: collapse; margin: 0 auto; }
-td { padding: 5px; text-align: center; }
-td code { background: none; border: none; color: inherit; }
-canvas { cursor: move; }
-#errdiv {
-  border: 2px solid red;
-  display: none;
-  margin: 5px;
-}
 
-#needchrome {
-  display: none;
-}
+canvas { cursor: move; }
 
   </style>
 <script>
 
-var gViewer=null;
-var gSolid=new CSG();
-
 var gCurrentFile = null;
 
-function isChrome()
-{
-  return (navigator.userAgent.search("Chrome") >= 0);
-}
+var gProcessor=null;
 
 function onload()
 {
-  var needchromediv = document.getElementById("needchrome");
-  if(needchromediv)
-  {
-    if(!isChrome())
-    {
-      needchromediv.style.display="block";
-    }
-  }
   try
   {
-    var containerelement = document.getElementById("viewer");
-    gViewer = new OpenJsCad.Viewer(containerelement, 600, 600, 50);
+    gProcessor = new OpenJsCad.Processor(document.getElementById("viewer"));
     setupDragDrop();
   } catch (e) {
     alert(e.toString());
   }
 }
 
-function updateSolid()
-{
-  if(gViewer.supported())
-  {
-    var code=document.getElementById('code').value;
-    if(code != gSolidSource)
-    {
-      gSolidSource=code;
-      var errtxt = "";
-      var csg = new CSG();
-      try {
-        csg = OpenJsCad.javaScriptToSolid(code);
-      } catch (e) {
-        errtxt = 'Error: <code>' + e.toString().replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;') + '</code>';
-      }
-      gSolid = csg;      
-      var errdiv=document.getElementById('error');
-      errdiv.innerHTML = errtxt;
-      errdiv.style.display = (errtxt == "")? "none":"block";
-      gViewer.setCsg(gSolid);
-      var stlarea = document.getElementById('stloutput');
-      stlarea.style.display = "none";
-    }
-  }
-}
-
-function getStl()
-{
-  updateSolid();
-  var stl=gSolid.toStlString();
-  var stlarea = document.getElementById('stloutput');
-  stlarea.value=stl;
-  stlarea.style.display = "inline";
-}
-
 function setupDragDrop()
 {
   // Check for the various File API support.
@@ -206,8 +137,6 @@ function fileChanged()
 
 function parseFile()
 {
-  setErrorText("");
-  gSolid=new CSG();
   if(gCurrentFile)
   {
     var reader = new FileReader();
@@ -215,78 +144,45 @@ function parseFile()
       var txt = evt.target.result;
     };
     reader.onloadend = function(evt) {
-      if (evt.target.readyState == FileReader.DONE)
+      try
       {
-        var jscadscript = evt.target.result;
-        if(jscadscript == "")
+        if (evt.target.readyState == FileReader.DONE)
         {
-          alert("Could not read file. This may be due to security restrictions: in Google Chrome the File API only works if this html page is on a web server. Accessing this page from your hard drive does not work.");
-          gViewer.setCsg(gSolid);
+          var jscadscript = evt.target.result;
+          if(jscadscript == "")
+          {
+            throw new Error("Could not read file. This may be due to security restrictions: in Google Chrome the File API only works if this html page is on a web server. Accessing this page from your hard drive does not work.");
+            if(gProcessor) gProcessor.clearViewer();
+          }
+          else
+          {         
+            if(gProcessor)
+            {
+              gProcessor.setJsCad(jscadscript);
+            }
+          }
         }
         else
-        {         
-          parseJscad(jscadscript);
+        {
+          throw new Error("Failed to read file");
+          if(gProcessor) gProcessor.clearViewer();
         }
       }
-      else
+      catch(e)
       {
-        alert("Failed to read file");
-        gViewer.setCsg(gSolid);
+        alert(e.toString());
       }
     };
     reader.readAsText(gCurrentFile, "UTF-8");
   }
 }
 
-function parseJscad(script)
-{
-  try
-  {
-    var csg = OpenJsCad.javaScriptToSolid(script);
-    gSolid = csg;      
-    gViewer.setCsg(gSolid);
-    setErrorText("");
-  }
-  catch(e)
-  {
-    gSolid = new CSG();
-    gViewer.setCsg(gSolid);
-    setErrorText(e.toString());
-  }
-  enableItems();
-  var stlarea = document.getElementById('stloutput');
-  stlarea.style.display = "none";
-}
-
-function enableItems()
-{
-  var hassolid = (gSolid.polygons.length > 0);
-  document.getElementById('getstlbutton').style.display = hassolid? "inline":"none";  
-}
-
-function setErrorText(errtxt)
-{
-  var errdiv = document.getElementById("errdiv");
-  errdiv.style.display = (errtxt == "")? "none":"block";
-  errdiv.innerHTML = errtxt;
-}
-
-function getStl()
-{
-  var stl=gSolid.toStlString();
-  var stlarea = document.getElementById('stloutput');
-  stlarea.value=stl;
-  stlarea.style.display = "inline";
-}
-
 </script>
 <title>OpenJsCad parser</title> 
 <body onload="onload()">
 <h1>OpenJsCad parser</h1>
-<div id="needchrome">Please note: OpenJsCad currently only runs reliably on Google Chrome!</div>
-<div id="viewer" class="viewer" style="background-image:none;width:600px;height:600px;"></div>
+<div id="viewer"></div>
 <br>
-<div id="errdiv"></div>
 <div id="filedropzone">
   <div id="filedropzone_empty">Drop your .jscad file here</div>
   <div id="filedropzone_filled">
@@ -297,23 +193,23 @@ function getStl()
     </div>
   </div>
 </div>
-<textarea id="stloutput" readonly style="width: 80%; height: 100px; display: none;"></textarea><br>
 <br>
 <h2>Instructions:</h2>
 Create a new file in your favorite text editor. To get started enter the following text:
 <br>
-<pre>
-var cube = CSG.roundedCube({radius: 10, roundradius: 2, resolution: 16});
-var sphere = CSG.sphere({radius: 10, resolution: 16}).translate([5, 5, 5]);
-return cube.union(sphere);
+<pre>function main() {
+  var cube = CSG.roundedCube({radius: 10, roundradius: 2, resolution: 16});
+  var sphere = CSG.sphere({radius: 10, resolution: 16}).translate([5, 5, 5]);
+  return cube.union(sphere);
+}
 </pre>
 Save this to a file on your desktop with .jscad extension. Then drag &amp; drop the file from your desktop
 to the box above (marked with 'drop your .jscad file here).<br><br>
 The 3d model should now appear. You can continue to make changes to your .jscad file. Just press Reload 
 to parse the changes, you do not need to drag &amp; drop the file again.
 <br><br>  
-When finished press Get STL to generate the STL file. Copy &amp; paste the STL text to a file with
-.stl extension.
+When finished press Generate STL to generate the STL file. Then click Save STL and save it to
+a file with .stl extension.
 <br><br>  
 For more information about OpenJsCad see the <a href="index.html">introduction</a>.
 </body>