Fixe overflow problem

This commit is contained in:
Borys_Levytskyi
2016-11-24 18:44:56 +02:00
9 changed files with 120 additions and 55 deletions

View File

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

View File

@@ -1,51 +1,63 @@
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.commands({
'help': function(c) {
// var helpResult = document.querySelector('.result .helpResultTpl');
// if(helpResult != null) {
// moveResultUp(helpResult);
// return;
// }
appState.addCommandResult(new HelpResult(c.input));
},
'clear': function() {
appState.clearCommmandResults();
},
'em': function() {
cmdConfig.emphasizeBytes = !cmdConfig.emphasizeBytes;
},
'dark': function() {
cmdConfig.theme = 'dark';
},
'light': function () {
cmdConfig.theme = 'light';
},
'about': function() {
var aboutResult = document.querySelector('.result .aboutTpl');
if(aboutResult != null) {
moveResultUp(aboutResult);
return;
}
return new app.models.ViewResult('aboutTpl');
},
'-debug': function() {
app.debugMode = true;
console.log('debug is on');
},
'-notrack': function () {}
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');
// if(helpResult != null) {
// moveResultUp(helpResult);
// return;
// }
appState.addCommandResult(new HelpResult(c.input));
},
'clear': function() {
appState.clearCommmandResults();
},
'em': function() {
cmdConfig.emphasizeBytes = !cmdConfig.emphasizeBytes;
},
'dark': function() {
cmdConfig.theme = 'dark';
},
'light': function () {
cmdConfig.theme = 'light';
},
'about': function() {
var aboutResult = document.querySelector('.result .aboutTpl');
if(aboutResult != null) {
moveResultUp(aboutResult);
return;
}
return new app.models.ViewResult('aboutTpl');
},
'-debug': function() {
app.debugMode = true;
console.log('debug is on');
},
'-notrack': function () {}
});
cmd.command({
canHandle: () => true,
handle: (c) => appState.addCommandResult(new UnknownCommandResult(c.input))
})
});
}
}

View File

@@ -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>
}
}

View File

@@ -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>;
}
}

View File

@@ -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>
};
}

View File

@@ -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() {
return this.input;
}
static toHexString (hex) {
return hex.indexOf('-') == 0 ? '-0x' + hex.substr(1) : '0x' + hex;
};
}
export class SingleOperandExpression {
@@ -232,6 +232,4 @@ export class Expression {
};
}
export default expression;
export var parser = expression;

View File

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

View File

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

View File

@@ -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; }