From 3ff599bb98de1bdfe349a34b7e4a0578620098b0 Mon Sep 17 00:00:00 2001 From: BorysLevytskyi Date: Thu, 11 May 2023 11:48:22 +0200 Subject: [PATCH] Improve UI --- src/expression/Operand.ts | 3 +- .../components/BitwiseResultView.tsx | 50 +++++++++++-------- .../components/BitwiseResultViewModel.ts | 10 ++-- src/expression/expression.ts | 2 +- 4 files changed, 37 insertions(+), 28 deletions(-) diff --git a/src/expression/Operand.ts b/src/expression/Operand.ts index 8066562..0ea874a 100644 --- a/src/expression/Operand.ts +++ b/src/expression/Operand.ts @@ -1,7 +1,6 @@ -import {numberParser} from './numberParser'; import { ExpressionElement as ExpressionElement } from './expression-interfaces'; import { NumberBase } from '../core/formatter'; -import { INT32_MAX_VALUE, INT32_MIN_VALUE, INT64_MAX_VALUE, INT64_MIN_VALUE, UINT64_MAX_VALUE } from '../core/const'; +import { INT64_MAX_VALUE, INT64_MIN_VALUE, UINT64_MAX_VALUE } from '../core/const'; import { Integer, JsNumber, isInteger, asInteger } from '../core/Integer'; var globalId : number = 1; diff --git a/src/expression/components/BitwiseResultView.tsx b/src/expression/components/BitwiseResultView.tsx index 1546a62..a7f470f 100644 --- a/src/expression/components/BitwiseResultView.tsx +++ b/src/expression/components/BitwiseResultView.tsx @@ -26,8 +26,9 @@ export default class BitwiseResultView extends React.ComponentError: {text} } - var rows = this.getRows(model!, isListOfNumbers); + const showInfoColumn : boolean = model.items + .map(i => willInfoColumnBeVisible(i.expressionElement, model!.maxNumberOfBits, allowSignChange)) + .filter(p => p == true) + .length > 0; + + var rows = this.getRows(model!, showInfoColumn, allowSignChange); return @@ -47,31 +53,31 @@ export default class BitwiseResultView extends React.Component } - getRows(model: BitwiseResultViewModel, allowSignChange : boolean): JSX.Element[] { + getRows(model: BitwiseResultViewModel, showInfoColumn : boolean, allowSignChange : boolean): JSX.Element[] { this.maxSeenLengthNumberOfBits = Math.max(model.maxNumberOfBits, this.maxSeenLengthNumberOfBits); return model.items.map((itm, i) => - this.onBitFlipped()} />); } onBitFlipped() { this.forceUpdate(); - //this.setState({d:new Date()}); } } -type ExpressionRowProps = { +type ExpressionElementRowProps = { sign: string, css: string, bitSize: number, @@ -80,14 +86,15 @@ type ExpressionRowProps = { allowFlipBits: boolean, allowSignChange: boolean, expressionItem: ExpressionElement, - onBitFlipped: any + onBitFlipped: any, + showInfoColumn: boolean } -class ExpressionRow extends React.Component { +class ExpressionElementTableRow extends React.Component { infoWasShown: boolean = false; - constructor(props: ExpressionRowProps) { + constructor(props: ExpressionElementRowProps) { super(props); this.state = { operand: null }; } @@ -110,8 +117,8 @@ class ExpressionRow extends React.Component { onFlipBit={args => this.flipBit(args)} /> - - ;; + + ; } getLabel(): string { @@ -170,12 +177,7 @@ class ExpressionRow extends React.Component { getInfo(maxNumberOfBits:number) { const op = this.props.expressionItem.getUnderlyingOperand(); - const allBitsDisplayed = op.value.maxBitSize != 32 || op.value.maxBitSize <= maxNumberOfBits; const { allowSignChange } = this.props; - const hasLabel = op.label.length > 0; - - if(!allBitsDisplayed && !hasLabel && !this.infoWasShown) - return null; this.infoWasShown = true; @@ -194,14 +196,22 @@ class ExpressionRow extends React.Component { children.push({text.trim()}); - if(allBitsDisplayed) + if(this.props.maxNumberOfBits >= op.value.maxBitSize) { if(allowSignChange) children.push(); else if(!op.value.signed) children.push( {signedStr}) } - + return {children} } +} + +function willInfoColumnBeVisible(expr: ExpressionElement, maxNumberOfBits: number, allowSignChange : boolean) { + + const op = expr.getUnderlyingOperand(); + const allBitsDisplayed = op.value.maxBitSize != 32 || op.value.maxBitSize <= maxNumberOfBits; + const hasLabel = op.label.length > 0; + return allBitsDisplayed || hasLabel; } \ No newline at end of file diff --git a/src/expression/components/BitwiseResultViewModel.ts b/src/expression/components/BitwiseResultViewModel.ts index 173c2c8..5569e26 100644 --- a/src/expression/components/BitwiseResultViewModel.ts +++ b/src/expression/components/BitwiseResultViewModel.ts @@ -11,7 +11,7 @@ type Config = { type ExpressionRowModel = { sign: string; css: string; - expression: ExpressionElement; + expressionElement: ExpressionElement; allowFlipBits: boolean; label: string; maxBitSize: number; @@ -84,7 +84,7 @@ export default class BitwiseResultViewModel { this.items.push({ sign:'', css: '', - expression: expr, + expressionElement: expr, allowFlipBits: this.allowFlipBits, label: '', maxBitSize: expr.value.maxBitSize, @@ -102,7 +102,7 @@ export default class BitwiseResultViewModel { sign: expr.operator, css: '', label: this.getLabel(resultNumber), - expression: expr.operand, + expressionElement: expr.operand, allowFlipBits: this.allowFlipBits, maxBitSize: resultNumber.value.maxBitSize }); @@ -115,7 +115,7 @@ export default class BitwiseResultViewModel { this.items.push({ sign: expr.operator + formatter.numberToString(child.value, child.base), css: 'expression-result', - expression: resultExpr, + expressionElement: resultExpr, allowFlipBits: false, label: '', maxBitSize: resultExpr.value.maxBitSize @@ -128,7 +128,7 @@ export default class BitwiseResultViewModel { this.items.push({ sign:'=', css: 'expression-result', - expression: expr, + expressionElement: expr, allowFlipBits: false, label: '', maxBitSize: expr.value.maxBitSize diff --git a/src/expression/expression.ts b/src/expression/expression.ts index 2f09b08..ba0ad5d 100644 --- a/src/expression/expression.ts +++ b/src/expression/expression.ts @@ -3,7 +3,7 @@ import Operator from './Operator' import ListOfNumbers from './ListOfNumbers'; import BitwiseOperation from './BitwiseOperation'; import { Expression, ExpressionElement } from './expression-interfaces'; -import { numberParser, numberRegexString } from './numberParser'; +import { numberParser } from './numberParser'; export { default as Operand } from './Operand'; export { default as Operator } from './Operator';
{this.getAlternative()}{this.getInfo(maxNumberOfBits)}
{this.props.showInfoColumn ? this.getInfo(maxNumberOfBits) : null}