Skip to content

Commit 7d3bf8a

Browse files
authored
Merge pull request #82 from kraklo/feature/mask-renderer
FEAT: Implement Mask and Binary Renderer Authored by: Radix Sort Team @kraklo, @kam-zhan-yue, and others (cause I cant find your tags ._.)
2 parents 5c209f8 + bb20317 commit 7d3bf8a

File tree

5 files changed

+150
-0
lines changed

5 files changed

+150
-0
lines changed
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
@import "../../common/stylesheet/index";
2+
3+
.container {
4+
flex-direction: column;
5+
}
6+
7+
.outline {
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
min-height: 30px;
12+
min-width: 120px;
13+
border: 1px solid;
14+
font-size: 20px;
15+
color: var(--mid-header-font);
16+
background: var(--array-2d-row-col-bg);
17+
text-align: center;
18+
margin-bottom: 10px;
19+
}
20+
21+
.title {
22+
font-size: 14px;
23+
color: var(--mid-header-font);
24+
text-align: center;
25+
}
26+
27+
.highlighted {
28+
color: red;
29+
}
Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React, { useCallback } from 'react';
2+
import styles from './BinaryRenderer.module.scss';
3+
import PropTypes from 'prop-types';
4+
5+
const BinaryRenderer = ({ header, data, maxBits, highlight }) => {
6+
const binary = useCallback(() => {
7+
let binaryString = data.toString(2);
8+
if (binaryString.length < maxBits) {
9+
binaryString = binaryString.padStart(maxBits, '0');
10+
}
11+
return binaryString.split('').map((bit, index) => {
12+
// If index is on highlight, return a highlighted span, else just
13+
// return a normal span. Need to adjust the index as the string
14+
// starts at 0, but the 0th position is the last bit
15+
const adjustedIndex = binaryString.length - index - 1;
16+
return (
17+
<span key={index} className={highlight.includes(adjustedIndex) ? styles.highlighted : ""}>
18+
{bit}
19+
</span>
20+
);
21+
});
22+
}, [data, maxBits, highlight]);
23+
24+
return (
25+
<div className={styles.container}>
26+
<div className={styles.outline}>
27+
{binary()}
28+
</div>
29+
<div className={styles.title}>
30+
{header}
31+
</div>
32+
</div>
33+
);
34+
}
35+
36+
BinaryRenderer.propTypes = ({
37+
header: PropTypes.string.isRequired,
38+
data: PropTypes.number.isRequired,
39+
maxBits: PropTypes.number,
40+
highlight: PropTypes.array,
41+
});
42+
43+
export default BinaryRenderer;
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@import "../../common/stylesheet/index";
2+
3+
.container {
4+
margin-top: 10px;
5+
display: flex;
6+
flex-direction: row;
7+
gap: 25px;
8+
}
Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react';
2+
import Renderer from '../../common/Renderer';
3+
import styles from './MaskRenderer.module.scss';
4+
import BinaryRenderer from '../BinaryRenderer';
5+
6+
class MaskRenderer extends Renderer {
7+
constructor(props) {
8+
super(props)
9+
this.centerX = 0;
10+
this.centerY = 0;
11+
this.zoom = 100;
12+
this.elementRef = React.createRef();
13+
this.togglePan(true);
14+
this.toggleZoom(true);
15+
}
16+
17+
renderData() {
18+
const { binaryData, maskData, maxBits, highlight } = this.props.data;
19+
return (
20+
<div className={styles.container}>
21+
<BinaryRenderer
22+
header={"Binary Rep"}
23+
data={binaryData}
24+
maxBits={maxBits}
25+
highlight={highlight}
26+
/>
27+
<BinaryRenderer
28+
header={"Mask"}
29+
data={maskData}
30+
maxBits={maxBits}
31+
highlight={highlight}
32+
/>
33+
</div>
34+
);
35+
}
36+
}
37+
38+
export default MaskRenderer;
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// eslint-disable-next-line import/no-unresolved
2+
import Tracer from '../common/Tracer';
3+
import MaskRenderer from './MaskRenderer/index';
4+
5+
class MaskTracer extends Tracer {
6+
getRendererClass() {
7+
return MaskRenderer;
8+
}
9+
10+
init() {
11+
super.init();
12+
this.maxBits = 0;
13+
this.binaryData = 0;
14+
this.maskData = 0;
15+
this.highlight = [];
16+
}
17+
18+
setMaxBits(bits) {
19+
this.maxBits = bits;
20+
}
21+
22+
setBinary(data) {
23+
this.binaryData = data;
24+
}
25+
26+
setMask(maskDecimal, maskIndex) {
27+
this.maskData = maskDecimal;
28+
this.highlight = typeof maskIndex === "number" ? [maskIndex] : maskIndex;
29+
}
30+
}
31+
32+
export default MaskTracer;

0 commit comments

Comments
 (0)