mirrors/BitwiseCmd
1
0
Fork 0
mirror of https://github.com/BorysLevytskyi/BitwiseCmd.git synced 2025-12-10 06:52:05 +01:00
Code Issues Projects Releases Wiki Activity

Add space between bytes

Browse Source
This commit is contained in:
boryslevytskyi
2017-05-13 20:18:15 +03:00
parent 65d9a2acdd
commit f6d9efd1b8
5 changed files with 39 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/app/components/results/BinaryStringView.jsx
View File

@@ -2,14 +2,7 @@ import React from 'react';
export default class BinaryStringView extends React.Component {
render() {
const str = this.props.binaryString;
const chars = str.split('');
const allowFlipBits = this.props.allowFlipBits || false;
const css = allowFlipBits ? ' flipable' : ''
const classNames = { '0': `zero${css}`, '1' : `one ${css}` };
const children = chars.map((c, i) => <span className={classNames[c]} key={i} onClick={e => this.onBitClick(i, e)}>{c}</span>);
return <span>{children}</span>
return <span>{this.getChildren()}</span>
}
onBitClick(index, e) {
@@ -21,4 +14,33 @@ export default class BinaryStringView extends React.Component {
this.props.onFlipBit(index);
}
}
getChildren() {
var bits = this.createBits(this.props.binaryString.split(''));
if(this.props.emphasizeBytes) {
return this.splitIntoBytes(bits);
}
return bits;
}
createBits(bitChars) {
const allowFlipBits = this.props.allowFlipBits || false;
const css = allowFlipBits ? ' flipable' : ''
const classNames = { '0': `zero${css}`, '1' : `one ${css}` };
return bitChars.map((c, i) => <span className={classNames[c]} key={i} onClick={e => this.onBitClick(i, e)}>{c}</span>);
}
splitIntoBytes(bits) {
const bytes = [];
var key = 0;
while(bits.length > 0) {
bytes.push(<span key={key++} className="byte">{bits.splice(0, 8)}</span>);
}
return bytes;
}
}

8
src/app/components/results/BitwiseOperationExpressionView.jsx
View File

@@ -23,13 +23,13 @@ export default class BitwiseOperationEpxressionView extends React.Component {
if(expr instanceof expression.SingleOperandExpression) {
const m = BitwiseExpressionViewModel.buildNot(expr, { emphasizeBytes: this.props.emphasizeBytes });
return m.items.map((itm, i) => <ExpressionRow key={i} {...itm} maxNumberOfBits={m.maxNumberOfBits} />);
return m.items.map((itm, i) => <ExpressionRow key={i} {...itm} emphasizeBytes={this.props.emphasizeBytes} maxNumberOfBits={m.maxNumberOfBits} />);
}
if(expr instanceof expression.MultipleOperandsExpression) {
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} />);
return m.items.map((itm, i) => <ExpressionRow key={i} {...itm} emphasizeBytes={this.props.emphasizeBytes} maxNumberOfBits={m.maxNumberOfBits} />);
}
return null;
@@ -38,13 +38,13 @@ export default class BitwiseOperationEpxressionView extends React.Component {
class ExpressionRow extends React.Component {
render() {
const { sign, label, bin, other, css, maxNumberOfBits } = this.props;
const { sign, label, bin, other, css, maxNumberOfBits, emphasizeBytes } = this.props;
return <tr className={css}>
<td className="sign">{sign}</td>
<td className="label">{label}</td>
<td className="bin">
<BinaryStringView binaryString={formatter.padLeft(bin, maxNumberOfBits, '0')} allowFlipBits={false}/>
<BinaryStringView emphasizeBytes={emphasizeBytes} binaryString={formatter.padLeft(bin, maxNumberOfBits, '0')} allowFlipBits={false}/>
</td>
<td className="other">{other}</td>
</tr>;

4
src/app/components/results/DisplayResultView.jsx
View File

@@ -23,7 +23,9 @@ export default class DisplayResult extends React.Component {
}
renderUnknown() {
return <div className="error">Sorry, i don't know what <strong>{this.props.input}</strong> is :(</div>
return <div className="result">
<div className="error">¯\_(ツ)_/¯ Sorry, i don't know what <strong>{this.props.input}</strong> is</div>
</div>
}
findResultComponent(result) {

1
src/app/components/results/HelpResultView.jsx
View File

@@ -35,7 +35,6 @@ export default class HelpResultView extends React.Component {
<li><code>&lt;&lt;</code> — left shift</li>
<li><code>&gt;&gt;</code> — sign propagating right shift</li>
<li><code>&gt;&gt;&gt;</code> — zero-fill right shift</li>
</ul>
</p>
</div>

4
src/app/components/results/ListOfNumbersExpressionView.jsx
View File

@@ -8,7 +8,7 @@ export default class ListOfNumersExpressionView extends React.Component {
render() {
const expr = this.props.expression;
const maxBitsLegnth = BitwiseExpressionViewModel.getNumberOfBits(expr.maxBitsLegnth, this.props.emphasizeBytes);
const numberRows = expr.numbers.map((n, i) => <OperandView key={i} operand={n} maxBitsLegnth={maxBitsLegnth} />);
const numberRows = expr.numbers.map((n, i) => <OperandView key={i} operand={n} maxBitsLegnth={maxBitsLegnth} emphasizeBytes={this.props.emphasizeBytes} />);
return <table className="expression">
<tbody>
{numberRows}
@@ -28,7 +28,7 @@ class OperandView extends React.Component {
return <tr data-kind={op.kind}>
<td className="label">{op.input}</td>
<td className="bin"><BinaryStringView binaryString={binaryString} allowFlipBits={true} onFlipBit={e => this.flipBit(e)} /></td>
<td className="bin"><BinaryStringView emphasizeBytes={this.props.emphasizeBytes} binaryString={binaryString} allowFlipBits={true} onFlipBit={e => this.flipBit(e)} /></td>
<td className="other">{op.other}</td>
</tr>;
};