Add println and printf to LogRenderer

Author: 64json

package-lock.json

@@ -19,7 +19,9 @@
   },
   "keywords": [
     "algorithm",
-    "visualizer"
+    "data-structure",
+    "visualization",
+    "animation"
   ],
   "author": {
     "name": "Jinseo Jason Park",
@@ -94,6 +96,7 @@
     "remove-markdown": "^0.3.0",
     "sass-loader": "^7.0.3",
     "screenfull": "^3.3.2",
+    "sprintf-js": "^1.1.2",
     "style-loader": "^0.21.0",
     "uglifyjs-webpack-plugin": "^1.2.4",
     "webpack": "^4.5.0",

package.json

@@ -1,5 +1,5 @@
 const process = { env: { ALGORITHM_VISUALIZER: '1' } };
-importScripts('https://unpkg.com/algorithm-visualizer/dist/algorithm-visualizer.js');
+importScripts('https://unpkg.com/algorithm-visualizer@latest/dist/algorithm-visualizer.js');
 importScripts('https://unpkg.com/babel-standalone@6/babel.min.js');
 
 const sandbox = code => {

src/backend/tracers/js/worker.js

@@ -231,7 +231,7 @@ class GraphData extends Data {
     if (weight !== undefined) node.weight = weight;
     node.visitedCount += visit ? 1 : -1;
     if (this.logData) {
-      this.logData.print(visit ? (source || '') + ' -> ' + target : (source || '') + ' <- ' + target);
+      this.logData.println(visit ? (source || '') + ' -> ' + target : (source || '') + ' <- ' + target);
     }
   }
 
@@ -249,7 +249,7 @@ class GraphData extends Data {
     const node = this.findNode(target);
     node.selectedCount += select ? 1 : -1;
     if (this.logData) {
-      this.logData.print(select ? (source || '') + ' => ' + target : (source || '') + ' <= ' + target);
+      this.logData.println(select ? (source || '') + ' => ' + target : (source || '') + ' <= ' + target);
     }
   }
 

src/frontend/core/datas/GraphData.js

@@ -1,3 +1,4 @@
+import { sprintf } from 'sprintf-js';
 import { Data } from '/core/datas';
 import { LogRenderer } from '/core/renderers';
 
@@ -6,13 +7,21 @@ class LogData extends Data {
     return LogRenderer;
   }
 
-  set(messages = []) {
-    this.messages = messages;
+  set(log = '') {
+    this.log = log;
     super.set();
   }
 
   print(message) {
-    this.messages.push(message);
+    this.log += message;
+  }
+
+  println(message) {
+    this.print(message + '\n');
+  }
+
+  printf(format, ...args) {
+    this.print(sprintf(format, ...args));
   }
 }
 

src/frontend/core/datas/LogData.js

@@ -11,21 +11,15 @@ class LogRenderer extends Renderer {
 
   componentDidUpdate(prevProps, prevState, snapshot) {
     super.componentDidUpdate(prevProps, prevState, snapshot);
-    const { lastChild } = this.element.current;
-    if (lastChild) lastChild.scrollIntoView();
+    const div = this.element.current;
+    div.scrollTop = div.scrollHeight;
   }
 
   renderData() {
-    const { messages } = this.props.data;
+    const { log } = this.props.data;
 
     return (
-      <div className={styles.log} ref={this.element}>
-        {
-          messages.map((message, i) => (
-            <span className={styles.message} key={i} dangerouslySetInnerHTML={{ __html: message }} />
-          ))
-        }
-      </div>
+      <div className={styles.log} ref={this.element} dangerouslySetInnerHTML={{ __html: log }} />
     );
   }
 }

src/frontend/core/renderers/LogRenderer/index.jsx

@@ -8,8 +8,6 @@
   flex-direction: column;
   overflow-y: auto;
   font-family: $font-family-monospace;
-
-  .message {
-    margin: 2px 0;
-  }
-}
+  white-space: pre-wrap;
+  line-height: 1.6;
+}