From 825643f4c35c28af62775a556ae9084e1d910a27 Mon Sep 17 00:00:00 2001
From: Sam El-Husseini <sam.elhusseini@gmail.com>
Date: Mon, 11 Nov 2019 13:19:03 -0800
Subject: [PATCH] Updates to the zelos rendering playground (#3420)

---
 tests/playgrounds/screenshot.js       |  5 +--
 tests/rendering/zelos/index.html      | 49 +++++++++++++++++++++++++--
 tests/rendering/zelos/pxtblockly.html | 21 ++++++++++--
 tests/rendering/zelos/zelos.html      | 39 ++++++++++++++++++---
 4 files changed, 103 insertions(+), 11 deletions(-)

diff --git a/tests/playgrounds/screenshot.js b/tests/playgrounds/screenshot.js
index e6580f89a..70e347729 100644
--- a/tests/playgrounds/screenshot.js
+++ b/tests/playgrounds/screenshot.js
@@ -54,8 +54,9 @@ function svgToPng_(data, width, height, callback) {
  * Create an SVG of the blocks on the workspace.
  * @param {!Blockly.WorkspaceSvg} workspace The workspace.
  * @param {!Function} callback Callback.
+ * @param {string=} customCss Custom CSS to append to the SVG.
  */
-function workspaceToSvg_(workspace, callback) {
+function workspaceToSvg_(workspace, callback, customCss) {
 
   // Go through all text areas and set their value.
   var textAreas = document.getElementsByTagName("textarea");
@@ -87,7 +88,7 @@ function workspaceToSvg_(workspace, callback) {
   var css = [].slice.call(document.head.querySelectorAll('style'))
       .filter(function(el) { return /\.blocklySvg/.test(el.innerText); })[0];
   var style = document.createElement('style');
-  style.innerHTML = css.innerText;
+  style.innerHTML = css.innerText + '\n' + customCss;
   svg.insertBefore(style, svg.firstChild);
 
   var svgAsXML = (new XMLSerializer).serializeToString(svg);
diff --git a/tests/rendering/zelos/index.html b/tests/rendering/zelos/index.html
index 1b85aa938..4516b79be 100644
--- a/tests/rendering/zelos/index.html
+++ b/tests/rendering/zelos/index.html
@@ -37,6 +37,10 @@
       width: 100%;
       height: 500px;
     }
+
+    .output {
+      height: 500px;
+    }
   </style>
 </head>
 
@@ -145,6 +149,18 @@
         <iframe id="pxtblockly" src="./pxtblockly.html"></iframe>
       </div>
     </div>
+    <div class="row">
+      <div class="col">
+        <div id="zelosout">
+          <h2>Zelos Rendering</h2>
+          <img id="zelosoutput" class="output" />
+        </div>
+        <div id="pxtblocklyout">
+          <h2>PXT-Blockly Rendering</h2>
+          <img id="pxtblocklyoutput" class="output" />
+        </div>
+      </div>
+    </div>
   </div>
 
   <script type="text/javascript">
@@ -156,6 +172,25 @@
       selector.value = hash.substring(1);
     }
 
+    window.addEventListener('message', function (msg) {
+      var data = msg.data;
+      if (data.type === 'svg') {
+        var output = document.getElementById(data.from + 'output');
+        output.src = data.text;
+      }
+    });
+
+    var current = 'zelos';
+    var pause = false;
+    document.getElementById('pxtblocklyout').style.display = 'none';
+    setInterval(function () {
+      if (!pause) {
+        document.getElementById(current + 'out').style.display = 'none';
+        current = current == 'zelos' ? 'pxtblockly' : 'zelos';
+        document.getElementById(current + 'out').style.display = 'block';
+      }
+    }, 1000);
+
     pxtblockly.addEventListener('load', function () {
       updateWorkspaces(selector.value);
     });
@@ -179,8 +214,14 @@
           if (rawFile.status === 200 || rawFile.status == 0) {
             var xml = rawFile.responseText;
             if (xml) {
-              pxtblockly.contentWindow.postMessage(xml, '*');
-              zelos.contentWindow.postMessage(xml, '*');
+              pxtblockly.contentWindow.postMessage({
+                type: 'post',
+                xml: xml
+              }, '*');
+              zelos.contentWindow.postMessage({
+                type: 'post',
+                xml: xml
+              }, '*');
             }
           }
         }
@@ -195,10 +236,12 @@
       } else if (e.keyCode === 39) {
         selector.selectedIndex = selector.selectedIndex + 1;
         updateWorkspaces(selector.value);
+      } else if (e.keyCode === 32) {
+        pause = !pause;
       }
     });
 
   </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/tests/rendering/zelos/pxtblockly.html b/tests/rendering/zelos/pxtblockly.html
index 8e454c255..77a282ac4 100644
--- a/tests/rendering/zelos/pxtblockly.html
+++ b/tests/rendering/zelos/pxtblockly.html
@@ -4,6 +4,7 @@
   <script type="text/javascript" src="https://unpkg.com/pxt-blockly@2.1.12/blockly_compressed.js"></script>
   <script type="text/javascript" src="https://unpkg.com/pxt-blockly@2.1.12/blocks_compressed.js"></script>
   <script type="text/javascript" src="https://unpkg.com/pxt-blockly@2.1.12/msg/messages.js"></script>
+  <script type="text/javascript" src="../../playgrounds/screenshot.js"></script>
 </head>
 
 <body>
@@ -12,7 +13,11 @@
     var blocklyDiv = document.getElementById('blocklyDiv');
     var workspace;
     window.addEventListener('message', function (msg) {
-      var xml = msg.data;
+      var data = msg.data;
+      if (data.type !== 'post') {
+        return;
+      }
+      var xml = data.xml;
       try {
         if (workspace) {
           workspace.dispose();
@@ -26,13 +31,25 @@
           drag: true,
           wheel: false,
         },
+        zoom: {
+          wheel: true,
+          startScale: 2,
+        }
       });
 
       try {
         Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xml), workspace);
+        var topBlock = workspace.getTopBlocks()[0];
+        workspaceToSvg_(workspace, function (datauri) {
+          window.parent.postMessage({
+            type: 'svg',
+            from: 'pxtblockly',
+            text: datauri
+          }, '*');
+        });
       } catch { }
     });
   </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/tests/rendering/zelos/zelos.html b/tests/rendering/zelos/zelos.html
index edac39fbb..d1fd73706 100644
--- a/tests/rendering/zelos/zelos.html
+++ b/tests/rendering/zelos/zelos.html
@@ -4,13 +4,26 @@
   <script type="text/javascript" src="../../../blockly_uncompressed.js"></script>
   <script type="text/javascript" src="https://unpkg.com/pxt-blockly@2.1.12/blocks_compressed.js"></script>
   <script type="text/javascript" src="https://unpkg.com/pxt-blockly@2.1.12/msg/messages.js"></script>
+  <script type="text/javascript" src="../../playgrounds/screenshot.js"></script>
 
-  <style>
-    .blocklyText {
+  <style id="blocklycss">
+    .blocklyText,
+    .blocklyHtmlInput {
       font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
       font-weight: bold;
       font-size: 12pt;
     }
+
+    .blocklyNonEditableText>text,
+    .blocklyEditableText>text,
+    .blocklyNonEditableText>g>text,
+    .blocklyEditableText>g>text {
+      fill: #575E75;
+    }
+
+    .blocklyHtmlInput {
+      color: #575E75;
+    }
   </style>
 </head>
 
@@ -26,7 +39,11 @@
     var blocklyDiv = document.getElementById('blocklyDiv');
     var workspace;
     window.addEventListener('message', function (msg) {
-      var xml = msg.data;
+      var data = msg.data;
+      if (data.type !== 'post') {
+        return;
+      }
+      var xml = data.xml;
       try {
         if (workspace) {
           workspace.dispose();
@@ -41,11 +58,25 @@
           drag: true,
           wheel: false,
         },
+        zoom: {
+          wheel: true,
+          startScale: 2,
+        }
       });
 
       try {
         Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xml), workspace);
-      } catch { }
+        var topBlock = workspace.getTopBlocks()[0];
+        workspaceToSvg_(workspace, function (datauri) {
+          window.parent.postMessage({
+            type: 'svg',
+            from: 'zelos',
+            text: datauri
+          }, '*');
+        }, document.getElementById('blocklycss').innerText);
+      } catch (err) {
+        console.error(err);
+      }
     });
   </script>
 </body>