Fixe overflow problem

src/app/cmd.js

@@ -55,7 +55,7 @@ var cmd = {
     };
 
     function displayCommandError(input, message) {
-        console.error('[displayCommandError] not implemented');
+        console.error(message)
     }
 
     function invokeHandler (input, handler) {

src/app/commands.js

@@ -1,11 +1,23 @@
 import appState from './appState';
 import HelpResult from './models/HelpResult';
 import UnknownCommandResult from './models/UnknownCommandResult';
+import ExpressionResult from './models/ExpressionResult';
+import * as expression from './expression';
 
 var cmdConfig = {};
 
 export default {
     initialize (cmd) {
+
+            cmd.command({
+                   canHandle: (input) => expression.parser.canParse(input),
+                   handle: function(c) {
+                       var expr = expression.parser.parse(c.input);
+                       console.log(expr);
+                       appState.addCommandResult(new ExpressionResult(c.input, expr));
+                   }         
+             })
+
             cmd.commands({
                 'help': function(c) {
                     // var helpResult = document.querySelector('.result .helpResultTpl');
@@ -46,6 +58,6 @@ export default {
         cmd.command({
             canHandle: () => true,
             handle: (c) => appState.addCommandResult(new UnknownCommandResult(c.input))
-        })
+        });
     }
  }

src/app/components/results/DisplayResultView.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import HelpResultView from './HelpResultView';
 import HelpResult from '../../models/HelpResult';
 import UnknownCommandResult from '../../models/UnknownCommandResult';
-
+import HelpResultView from './HelpResultView';
+import ExpressionResult from '../../models/ExpressionResult';
+import ExpressionResultView from './ExpressionResultView';
 
 export default class DisplayResult extends React.Component {
     render() {
@@ -12,7 +13,7 @@ export default class DisplayResult extends React.Component {
         }
 
         return <div className="result">
-                        <div className="input mono"><span className="cur">&gt;</span>{this.props.content.input}<a class="hashLink" title="Link for this expression" href={window.location.pathname + '#' + this.props.inputHash}>#</a></div>
+                        <div className="input mono"><span className="cur">&gt;</span>{this.props.content.input}<a className="hashLink" title="Link for this expression" href={window.location.pathname + '#' + this.props.inputHash}>#</a></div>
                         <div className="content">
                             {this.findResultComponent(this.props.content)}
                         </div>
@@ -28,6 +29,11 @@ export default class DisplayResult extends React.Component {
             return <HelpResultView key={key} content={result} />
         }
 
+        if(result instanceof ExpressionResult) {
+            return <ExpressionResultView key={key} result={result} /> 
+        }
+
+        console.warn('Unknow result', result);
         return <span>Unknown result {typeof result}</span>
     }
 }

src/app/components/results/ExpressionResultView.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import ListOfNumbersExpressionView from './ListOfNumbersExpressionView';
+import * as expression from '../../expression'; 
+
+export default class ExpressionResultView extends React.Component {
+    render() {
+        var expr = this.props.result.expression;
+        if(expr instanceof expression.ListOfNumbersExpression) {
+            return <ListOfNumbersExpressionView expression={expr} />
+        }
+
+        return <b>Expression: {expr.expressionString}</b>;
+    } 
+}

src/app/components/results/ListOfNumbersExpressionView.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+export default class ListOfNumersExpressionView extends React.Component {
+    render() {
+        const expr = this.props.expression;
+        const numberViews = expr.numbers.map((n, i) => <OperandView key={i} operand={n} />) 
+        return <table className="expression" cellspacing="0">
+                    {numberViews}        
+               </table>
+    }
+}
+
+class OperandView extends React.Component {
+    render() {
+        const op = this.props.operand;
+        console.log(op);
+        // const bitsSize = this.propsю;
+         // .padLeft(m.bitsSize, '0')
+        return  <tr data-kind={op.kind}>
+            <td className="label">{op.input}</td>
+            <td className="bin">{op.bin}</td>
+            <td className="other">{op.other}</td>
+        </tr>
+    };
+}

src/app/expression.js

@@ -121,10 +121,6 @@ export class Operand {
             this.other = this.kind == 'dec' ? this.hex : this.dec;
         }
                 
-        toHexString (hex) {
-            return hex.indexOf('-') == 0 ? '-0x' + hex.substr(1) : '0x' + hex;
-        };
-
         getLengthInBits() {
             if(this.value < 0) {
                 return 32;
@@ -154,6 +150,10 @@ export class Operand {
         }
     };
 
+    toString() {
+        return this.input;
+    }
+    
     static getBase(kind){
         switch (kind){
             case 'bin': return 2;
@@ -171,9 +171,9 @@ export class Operand {
         return new Operand(str);
     };
 
-    toString() {
+    static toHexString (hex) {
-        return this.input;
+            return hex.indexOf('-') == 0 ? '-0x' + hex.substr(1) : '0x' + hex;
-    }
+     };
 }
 
 export class SingleOperandExpression {
@@ -232,6 +232,4 @@ export class Expression {
     };
 }
   
-
+export var parser = expression;
-    
-export default expression;

src/app/index.jsx

@@ -8,8 +8,9 @@ import AppRoot from './components/AppRoot';
 
 commands.initialize(cmd);
 
-cmd.execute('help');
+cmd.execute('1');
-cmd.execute('bluh');
+cmd.execute('2');
+cmd.execute('3');
 
 var root = <AppRoot appState={appState} />;
 ReactDOM.render(root, document.getElementById('root'));

src/app/models/ExpressionResult.js

@@ -0,0 +1,8 @@
+import CommandResult from './CommandResult';
+
+export default class ExpressionResult extends CommandResult {
+    constructor(input, expression) {
+        super(input);
+        this.expression = expression;
+    }
+}

src/css/styles.css

@@ -1,6 +1,6 @@
-body { padding:0; margin:0; height: 100% }
+body { padding:0; margin:0; height: 100%; overflow: hidden; }
 html { height: 100% }
-#root { font-family: Verdana; font-size: 0.8em; margin: 0; padding: 20px 100px 0 100px; height: 100% }
+#root { font-family: Verdana; font-size: 0.8em; margin: 0; padding: 20px 100px 0 100px; height: 100%; overflow: auto; }
 code { font-size: 1.2em; font-weight: bold; }
 
 .top-links { position: absolute; right: 10px; top: 10px; list-style-type: none; margin: 0 }
@@ -71,6 +71,7 @@ code { font-size: 1.2em; font-weight: bold; }
 
 /* Dark */
 .dark { background: #121212; color: white;}
+.dark .expression { color: white;}
 .dark .expressionInput { background: #121212; color: white; }
 .dark a, .dark a:visited { color: white; }
 .dark .indicator { color: #555; }