Add println and printf to LogRenderer

64json · 64json · commit 71591c63027f · 2019-01-24T14:24:40.000-05:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.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",
diff --git a/src/backend/tracers/js/worker.js b/src/backend/tracers/js/worker.js
@@ -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 => {
diff --git a/src/frontend/core/datas/GraphData.js b/src/frontend/core/datas/GraphData.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);
     }
   }
 
diff --git a/src/frontend/core/datas/LogData.js b/src/frontend/core/datas/LogData.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));
   }
 }
 
diff --git a/src/frontend/core/renderers/LogRenderer/index.jsx b/src/frontend/core/renderers/LogRenderer/index.jsx
@@ -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 }} />
     );
   }
 }
diff --git a/src/frontend/core/renderers/LogRenderer/stylesheet.scss b/src/frontend/core/renderers/LogRenderer/stylesheet.scss
@@ -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;
+}

Original file line number	Diff line number	Diff line change
`@@ -231,7 +231,7 @@ class GraphData extends Data {`
`231`	`231`	`if (weight !== undefined) node.weight = weight;`
`232`	`232`	`node.visitedCount += visit ? 1 : -1;`
`233`	`233`	`if (this.logData) {`
`234`		`- this.logData.print(visit ? (source \|\| '') + ' -> ' + target : (source \|\| '') + ' <- ' + target);`
	`234`	`+ this.logData.println(visit ? (source \|\| '') + ' -> ' + target : (source \|\| '') + ' <- ' + target);`
`235`	`235`	`}`
`236`	`236`	`}`
`237`	`237`
`@@ -249,7 +249,7 @@ class GraphData extends Data {`
`249`	`249`	`const node = this.findNode(target);`
`250`	`250`	`node.selectedCount += select ? 1 : -1;`
`251`	`251`	`if (this.logData) {`
`252`		`- this.logData.print(select ? (source \|\| '') + ' => ' + target : (source \|\| '') + ' <= ' + target);`
	`252`	`+ this.logData.println(select ? (source \|\| '') + ' => ' + target : (source \|\| '') + ' <= ' + target);`
`253`	`253`	`}`
`254`	`254`	`}`
`255`	`255`