export PicSVG and add playbox to pictcl page

Author: noyesno

diagram/pictcl.html

@@ -120,9 +120,19 @@ <h2>Quick Example</h2>
 </section
 </article>
 
-<aside>
-  <textarea style="display:block;width:100%;margin:1em 0"></textarea>
-</aside>
+<section>
+  <a name="playbox"></a>
+  <aside>
+    <svg id="pictcl-svg"></svg>
+<textarea id="pictcl-input" style="display:block;width:100%;min-height:7em;margin:1em 0">
+line
+box "PicTcl"
+arrow
+</textarea>
+    <p>
+      <button id="pictcl-trigger" type="button">Draw Diagram</button>
+    </p>
+  </aside>
 
 
 <pre>
@@ -131,11 +141,12 @@ <h2>Quick Example</h2>
 circle -down
 circle -padx 0
 </pre>
+</section>
 
 </main>
 
 <script type="module">
-import PicDiagram from './pictcl.js';
+import PicDiagram, {PicSVG} from './pictcl.js';
 
 PicDiagram(document.querySelector("#demo-a1"));
 PicDiagram(document.querySelector("#demo-a2"));
@@ -148,4 +159,12 @@ <h2>Quick Example</h2>
 
 PicDiagram("code.lang-pictcl");
 
+document.querySelector("#pictcl-trigger").addEventListener('click', function(){
+  var pictcl_code = document.querySelector("#pictcl-input");
+  var pictcl_svg = pictcl_code.parentElement.querySelector("svg");
+  var new_svg = PicSVG.createElement("svg");
+  pictcl_svg.parentElement.replaceChild(new_svg, pictcl_svg);
+  PicDiagram(new_svg, pictcl_code.value);
+});
+
 </script>

diagram/pictcl.js

@@ -333,7 +333,7 @@ function PicDiagram(el, pictcl_code){
     figure.appendChild(newsvg);
     figure.appendChild(preNode);
     svg = newsvg; 
-    pictcl_code = el.textContent;
+    pictcl_code = pictcl_code || el.textContent;
     preNode.style.display = 'none';
     svg.addEventListener('dblclick', function(){
       if(preNode.style.display == 'none'){
@@ -344,7 +344,7 @@ function PicDiagram(el, pictcl_code){
     });
   }else{
     svg = el;
-    pictcl_code = el.parentElement.querySelector("script[type='text/pictcl']").text;
+    pictcl_code = pictcl_code || el.parentElement.querySelector("script[type='text/pictcl']").text;
   }
 
   svg.setAttribute("stroke", "black");
@@ -367,3 +367,4 @@ function PicDiagram(el, pictcl_code){
 
 
 export default PicDiagram;
+export {PicSVG};

diagram/tcl.js

@@ -238,7 +238,7 @@ function TclInterp () {
     var res  = "";
     interp.inLoop = true;
     interp.code = interp.OK;
-    for(i in list) {
+    for(var i in list) {
        interp.setVar(args[1],interp.objectify(list[i]));
        interp.eval(body);
        if(interp.code == interp.BRK) break;
@@ -886,7 +886,7 @@ function TclParser(text) {
     return this.OK;
   }
   this.parseList = function () {
-    level = 0;
+    var level = 0;
     this.start = this.index;
     while (true) {
       if (this.len == 0) {