implemented support of emphasize bytes command

e2e.bat

@@ -1,4 +1,4 @@
-@echo off
+pr@echo off
 
 SET appUrl="http://localhost:13270/src/#clear"
 SET confFile=e2e.chrome.js

npm-debug.log

@@ -0,0 +1,45 @@
+0 info it worked if it ends with ok
+1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'serv' ]
+2 info using npm@3.10.10
+3 info using node@v6.10.0
+4 verbose run-script [ 'preserv', 'serv', 'postserv' ]
+5 info lifecycle BitwiseCmd@1.0.0~preserv: BitwiseCmd@1.0.0
+6 silly lifecycle BitwiseCmd@1.0.0~preserv: no script for preserv, continuing
+7 info lifecycle BitwiseCmd@1.0.0~serv: BitwiseCmd@1.0.0
+8 verbose lifecycle BitwiseCmd@1.0.0~serv: unsafe-perm in lifecycle true
+9 verbose lifecycle BitwiseCmd@1.0.0~serv: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/boryslevytskyi/git/BitwiseCmd/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/share/dotnet:/Library/Frameworks/Mono.framework/Versions/Current/Commands
+10 verbose lifecycle BitwiseCmd@1.0.0~serv: CWD: /Users/boryslevytskyi/git/BitwiseCmd
+11 silly lifecycle BitwiseCmd@1.0.0~serv: Args: [ '-c', 'webpack-dev-server --content-base ./src' ]
+12 silly lifecycle BitwiseCmd@1.0.0~serv: Returned: code: 1  signal: null
+13 info lifecycle BitwiseCmd@1.0.0~serv: Failed to exec serv script
+14 verbose stack Error: BitwiseCmd@1.0.0 serv: `webpack-dev-server --content-base ./src`
+14 verbose stack Exit status 1
+14 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:255:16)
+14 verbose stack     at emitTwo (events.js:106:13)
+14 verbose stack     at EventEmitter.emit (events.js:191:7)
+14 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
+14 verbose stack     at emitTwo (events.js:106:13)
+14 verbose stack     at ChildProcess.emit (events.js:191:7)
+14 verbose stack     at maybeClose (internal/child_process.js:877:16)
+14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
+15 verbose pkgid BitwiseCmd@1.0.0
+16 verbose cwd /Users/boryslevytskyi/git/BitwiseCmd
+17 error Darwin 16.5.0
+18 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "serv"
+19 error node v6.10.0
+20 error npm  v3.10.10
+21 error code ELIFECYCLE
+22 error BitwiseCmd@1.0.0 serv: `webpack-dev-server --content-base ./src`
+22 error Exit status 1
+23 error Failed at the BitwiseCmd@1.0.0 serv script 'webpack-dev-server --content-base ./src'.
+23 error Make sure you have the latest version of node.js and npm installed.
+23 error If you do, this is most likely a problem with the BitwiseCmd package,
+23 error not with npm itself.
+23 error Tell the author that this fails on your system:
+23 error     webpack-dev-server --content-base ./src
+23 error You can get information on how to open an issue for this project with:
+23 error     npm bugs BitwiseCmd
+23 error Or if that isn't available, you can get their info via:
+23 error     npm owner ls BitwiseCmd
+23 error There is likely additional logging output above.
+24 verbose exit [ 1, true ]

package.json

@@ -4,7 +4,8 @@
   "description": "Bitwise Operations Console",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "serv": "webpack-dev-server --content-base ./src"
   },
   "repository": {
     "type": "git",
@@ -46,8 +47,5 @@
     "lodash": "^4.17.2",
     "react": "^15.4.0",
     "react-dom": "^15.4.0"
-  },
-  "scripts": {
-    "serv": "webpack-dev-server --content-base ./src"
   }
 }

src/app/commands.js

@@ -19,7 +19,8 @@ export default {
 
             cmd.commands({
                 'help': function(c) {
-                    // TODO: var helpResult = document.querySelector('.result .helpResultTpl');
+                    // TODO: implement latest behavior - pull up help result to the top 
+                    // var helpResult = document.querySelector('.result .helpResultTpl');
                     // if(helpResult != null) {
                     //     moveResultUp(helpResult);
                     //     return;
@@ -31,7 +32,7 @@ export default {
                     appState.clearCommmandResults();
                 },
                 'em': function() {
-                    cmdConfig.emphasizeBytes = !cmdConfig.emphasizeBytes;
+                    appState.toggleEmphasizeBytes();
                 },
                 'dark': function() {
                     appState.setUiTheme('dark');

src/app/components/AppRoot.jsx

@@ -10,8 +10,26 @@ export default class AppRoot extends React.Component {
     refresh() {
         this.setState(this.props.appState);
     }
+    
+    getIndicator(value) {
+        if(value) { 
+            return "on";
+        }
+
+        return "off";
+    }
+
+    getResultViews() {
+        var results = this.state.commandResults.map((r, i) => <DisplayResultView key={i} content={r} input={r.input} inputHash={r.inputHash} appState={this.props.appState} />);
+        return results;
+    }
+
+    toggleEmphasizeBytes() {
+        console.log(this.props.appState);
+        this.props.appState.toggleEmphasizeBytes();
+    }
+
     render() {
-        var results = this.state.commandResults.map((r, i) => <DisplayResultView key={i} content={r} input={r.input} inputHash={r.inputHash} />);
         return <div className={`app-root ${this.state.uiTheme}`}>
                     <div className="header">
                         <h1>Bitwise<span style={{color: "#c5c5c5"}}>Cmd</span></h1>
@@ -32,12 +50,12 @@ export default class AppRoot extends React.Component {
                         <InputBox />
 
                         <span className="configPnl">
-                            <span id="emphasizeBytes" data-cmd="em" className="indicator on" title="Emphasize Bytes">[em]</span>
+                            <span id="emphasizeBytes" data-cmd="em" className={"indicator " + this.getIndicator(this.state.emphasizeBytes)} title="Toggle Emphasize Bytes" onClick={e => this.toggleEmphasizeBytes()}>[em]</span>
                         </span>
                     </div>
 
                     <div id="output">
-                    {results}
+                    {this.getResultViews()}
                     </div>
                 </div>;
     }

src/app/components/results/BitwiseOperationExpressionView.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import * as expression from '../../expression';
 import formatter from '../../formatter';
 import BinaryStringView from './BinaryStringView';
+import BitwiseExpressionViewModel from './models/BitwiseExpressionViewModel'
 
 export default class BitwiseOperationEpxressionView extends React.Component {
     render() {
@@ -21,12 +22,12 @@ export default class BitwiseOperationEpxressionView extends React.Component {
         const expr = this.props.expression;
 
         if(expr instanceof expression.SingleOperandExpression) {
-            const m = BitwiseExpressionViewModel.buildNot(expr);
+            const m = BitwiseExpressionViewModel.buildNot(expr, { emphasizeBytes: this.props.emphasizeBytes });
             return m.items.map((itm, i) => <ExpressionRow key={i} {...itm} maxNumberOfBits={m.maxNumberOfBits} />);
         }
 
         if(expr instanceof expression.MultipleOperandsExpression) {
-            const m = BitwiseExpressionViewModel.buildMultiple(expr);
+            const m = BitwiseExpressionViewModel.buildMultiple(expr, { emphasizeBytes: this.props.emphasizeBytes });
             console.log('Render model', m);
             return m.items.map((itm, i) => <ExpressionRow key={i} {...itm} maxNumberOfBits={m.maxNumberOfBits} />);
         }
@@ -49,81 +50,3 @@ class ExpressionRow extends React.Component {
                 </tr>;
     }
 }
-
-class BitwiseExpressionViewModel {
-
-    constructor() {
-        this.items = [];
-        this.maxNumberOfBits = 0;
-    }
-
-    static buildMultiple (expr) {
-        var op = expr.expressions[0],
-            i = 1, l = expr.expressions.length,
-            ex, m = new BitwiseExpressionViewModel();
-
-        m.addOperand(op);
-
-        for (;i<l;i++) {
-            ex = expr.expressions[i];
-            op = ex.apply(op.value);
-
-            if(ex.isShiftExpression()){
-                m.addShiftExpressionResult(ex, op);
-            } else {
-                m.addExpression(ex);
-                m.addExpressionResult(op);
-            }
-        }
-
-        m.maxNumberOfBits = m.emphasizeBytes(m.maxNumberOfBits);
-        return m;
-    };
-
-    static buildNot (expression) {
-        var m = new BitwiseExpressionViewModel();
-        m.addExpression(expression);
-        m.addExpressionResult(expression.apply());
-        m.maxNumberOfBits = m.emphasizeBytes(m.maxNumberOfBits);
-        return m;
-    };
-
-    addOperand(operand) {
-        this.maxNumberOfBits = Math.max(operand.getLengthInBits(), this.maxNumberOfBits);
-        this.items.push({ sign:'', label: operand.toString(), bin: operand.bin, other: operand.other, css: ''});
-    };
-
-    addExpression(expression) {
-        this.maxNumberOfBits = Math.max(expression.operand1.getLengthInBits(), this.maxNumberOfBits);
-        this.items.push({ sign: expression.sign, label: expression.operand1.toString(), bin: expression.operand1.bin, other: expression.operand1.other, css: ''});
-    };
-
-    addShiftExpressionResult(expression, resultOperand) {
-        this.maxNumberOfBits = Math.max(resultOperand.getLengthInBits(), this.maxNumberOfBits);
-        this.items.push({
-            sign: expression.sign + expression.operand1.input,
-            label: resultOperand.toString(),
-            bin: resultOperand.bin,
-            other: resultOperand.other,
-            css: 'expression-result'});
-    };
-
-    addExpressionResult(operand) {
-        this.maxNumberOfBits = Math.max(operand.getLengthInBits(), this.maxNumberOfBits);
-        this.items.push({ sign:'=', label: operand.toString(), bin: operand.bin, other: operand.other, css: 'expression-result'});
-    };
-
-    emphasizeBytes = function (bits) {
-        // var cmdConfig = app.get('cmdConfig');
-        // if(cmdConfig.emphasizeBytes && bits % 8 != 0) {
-        //     if(bits < 8) {
-        //         return 8;
-        //     }
-
-        //     var n = bits - (bits % 8);
-        //     return n + 8;
-        // }
-        console.warn('[BitwiseExpressionViewModel] emphasizeBytes() not implemented');
-        return bits;
-    };
-}

src/app/components/results/DisplayResultView.jsx

@@ -36,7 +36,7 @@ export default class DisplayResult extends React.Component {
         }
 
         if(result instanceof ExpressionResult) {
-            return <ExpressionResultView result={result} /> 
+            return <ExpressionResultView result={result} emphasizeBytes={this.props.appState.emphasizeBytes} /> 
         }
 
         console.warn('Unknown result:', result);

src/app/components/results/ExpressionResultView.jsx

@@ -10,12 +10,12 @@ export default class ExpressionResultView extends React.Component {
 
         if(expr instanceof expression.ListOfNumbersExpression) {
             return <div>
-                        <ListOfNumbersExpressionView expression={expr} />
+                        <ListOfNumbersExpressionView expression={expr} emphasizeBytes={this.props.emphasizeBytes} />
                     </div>
         }
         if(expr instanceof expression.SingleOperandExpression || expr instanceof expression.MultipleOperandsExpression) {
             return <div>
-                        <BitwiseOperationExpressionView expression={expr} />
+                        <BitwiseOperationExpressionView expression={expr} emphasizeBytes={this.props.emphasizeBytes} />
                     </div>
         }
 

src/app/components/results/ListOfNumbersExpressionView.jsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import formatter from '../../formatter';
 import BinaryStringView from './BinaryStringView';
+import BitwiseExpressionViewModel from './models/BitwiseExpressionViewModel'
+//import calc from '../../calc';
 
 export default class ListOfNumersExpressionView extends React.Component {
     render() {
         const expr = this.props.expression;
-        const numberRows = expr.numbers.map((n, i) => <OperandView key={i} operand={n} maxBitsLegnth={expr.maxBitsLegnth} />);
+        const maxBitsLegnth = BitwiseExpressionViewModel.getNumberOfBits(expr.maxBitsLegnth, this.props.emphasizeBytes);
+        const numberRows = expr.numbers.map((n, i) => <OperandView key={i} operand={n} maxBitsLegnth={maxBitsLegnth} />);
         return <table className="expression">
                         <tbody>
                             {numberRows}

src/app/components/results/models/BitwiseExpressionViewModel.js

@@ -0,0 +1,80 @@
+export default class BitwiseExpressionViewModel {
+
+    constructor({ emphasizeBytes = false } = {}) {
+        this.emphasizeBytes = emphasizeBytes;
+        this.items = [];
+        this.maxNumberOfBits = 0;
+    }
+
+    static buildMultiple (expr, config) {
+        console.log(config);
+        var op = expr.expressions[0],
+            i = 1, l = expr.expressions.length,
+            ex, m = new BitwiseExpressionViewModel(config);
+
+        m.addOperand(op);
+
+        for (;i<l;i++) {
+            ex = expr.expressions[i];
+            op = ex.apply(op.value);
+
+            if(ex.isShiftExpression()){
+                m.addShiftExpressionResult(ex, op);
+            } else {
+                m.addExpression(ex);
+                m.addExpressionResult(op);
+            }
+        }
+
+        m.maxNumberOfBits = BitwiseExpressionViewModel.getNumberOfBits(m.maxNumberOfBits, m.emphasizeBytes);
+        return m;
+    };
+
+    static buildNot (expression, cofig) {
+        console.log(config);
+        var m = new BitwiseExpressionViewModel(config);
+        m.addExpression(expression);
+        m.addExpressionResult(expression.apply());
+        m.maxNumberOfBits = BitwiseExpressionViewModel.getNumberOfBits(m.maxNumberOfBits, m.emphasizeBytes);
+        return m;
+    };
+
+    addOperand(operand) {
+        this.maxNumberOfBits = Math.max(operand.getLengthInBits(), this.maxNumberOfBits);
+        this.items.push({ sign:'', label: operand.toString(), bin: operand.bin, other: operand.other, css: ''});
+    };
+
+    addExpression(expression) {
+        this.maxNumberOfBits = Math.max(expression.operand1.getLengthInBits(), this.maxNumberOfBits);
+        this.items.push({ sign: expression.sign, label: expression.operand1.toString(), bin: expression.operand1.bin, other: expression.operand1.other, css: ''});
+    };
+
+    addShiftExpressionResult(expression, resultOperand) {
+        this.maxNumberOfBits = Math.max(resultOperand.getLengthInBits(), this.maxNumberOfBits);
+        this.items.push({
+            sign: expression.sign + expression.operand1.input,
+            label: resultOperand.toString(),
+            bin: resultOperand.bin,
+            other: resultOperand.other,
+            css: 'expression-result'});
+    };
+
+    addExpressionResult(operand) {
+        this.maxNumberOfBits = Math.max(operand.getLengthInBits(), this.maxNumberOfBits);
+        this.items.push({ sign:'=', label: operand.toString(), bin: operand.bin, other: operand.other, css: 'expression-result'});
+    };
+
+    // TODO: move this method elsewhere. It is also used in LisOfNumbersExpressionView.js
+    static getNumberOfBits = function (bits, emphasizeBytes) {
+        if(emphasizeBytes && bits % 8 != 0) {
+             if(bits < 8) {
+                 return 8;
+             }
+
+             var n = bits - (bits % 8);
+             return n + 8;
+        }
+
+        return bits;
+    };
+}

src/app/index.jsx

@@ -17,8 +17,8 @@ commands.initialize(cmd, appState);
 
 console.log("appState", appState);
 
-// cmd.execute('1');
+cmd.execute('1');
-// cmd.execute('2');
+cmd.execute('2');
 cmd.execute('1|2<<2');
 
 var root = <AppRoot appState={appState} />;

webpack.config.js

@@ -1,7 +1,7 @@
 module.exports = {
     entry: __dirname + "/src/app/index.jsx",
     output: {
-        fileame: 'bundle.js',
+        filename: 'bundle.js',
         path: __dirname + '/src',
         publicPath: 'http://localhost:8080/'
     },
@@ -9,9 +9,9 @@ module.exports = {
     module: {
         loaders: [{
             test: /\.jsx?$/,
-            loader: 'babel',
+            loader: 'babel-loader',
             exclude: /node-modules/,
-            output: { path: __dirname + '/src', filename: 'bundle.js' },
+            //output: { path: __dirname + '/src', filename: 'bundle.js' },
             query: {
                 presets: [require.resolve('babel-preset-es2015'), require.resolve('babel-preset-react')],
                 plugins: [require.resolve('babel-plugin-transform-class-properties')]
@@ -24,6 +24,6 @@ module.exports = {
     //     'react': 'React'
     // },
     resolve: {
-        extensions: ['', '.js', '.jsx']
+        extensions: ['.js', '.jsx']
     }
 };