Skip to content

Commit 496171e

Browse files
https-samhttps-sam
committed
auto re-render at window resize
1 parent 4f75920 commit 496171e

3 files changed

Lines changed: 158 additions & 89 deletions

File tree

‎src/components/Canvas/Description/SortingCanvasDescription.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import NormalParagraph from "./NormalParagraph";
1010
import { InputHandler } from "../../InputHandler/InputHandler";
1111

1212
const SortingCanvasDescription = ({ maxBarsToShowHeight }) => {
13-
console.log(maxBarsToShowHeight);
1413
return (
1514
<div className="z-10 self-center font-sans max-w-[90vw] text-gray-700 dark:text-white mt-10 xl:mt-0 md:pt-0">
1615
<p className="text-[1.3em] md:text-[2.2em] font-bold mb-5">

‎src/components/Canvas/InputField.js‎

Lines changed: 155 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,136 +1,203 @@
1-
import React, { Component } from 'react'
2-
import { InputHandler } from '../InputHandler/InputHandler.js'
3-
import { Strategy } from '../Strategy/Strategy.js';
4-
import { Options } from './options/Options.js';
5-
import { ReactComponent as Play } from '../../img/play.svg'
6-
import { ReactComponent as Replay } from '../../img/replay.svg'
7-
import { ReactComponent as Loading } from '../../img/spinLoading.svg'
8-
import AlgorithmSelection from './AlgorithmSelection.js';
9-
import ShowValue from './ShowValue.js';
10-
import { Animation } from '../Animation/Animation.js';
11-
12-
1+
import React, { Component } from "react";
2+
import { InputHandler } from "../InputHandler/InputHandler.js";
3+
import { Strategy } from "../Strategy/Strategy.js";
4+
import { Options } from "./options/Options.js";
5+
import { ReactComponent as Play } from "../../img/play.svg";
6+
import { ReactComponent as Replay } from "../../img/replay.svg";
7+
import { ReactComponent as Loading } from "../../img/spinLoading.svg";
8+
import AlgorithmSelection from "./AlgorithmSelection.js";
9+
import ShowValue from "./ShowValue.js";
10+
import { Animation } from "../Animation/Animation.js";
1311

1412
class InputField extends Component {
15-
1613
constructor(props) {
1714
super(props);
1815
this.InputHandler = new InputHandler();
19-
this.name = props.name;
20-
this.timeouts = Animation.getTimeouts() || [];
16+
this.name = props.name;
17+
this.timeouts = Animation.getTimeouts() || [];
2118
this.Strategy = new Strategy();
2219
this.state = {
23-
algorithm: localStorage.getItem("algorithm") || 'Heap', // SG 07/16/2022 20:00 defalt algorithm set to heap
20+
algorithm: localStorage.getItem("algorithm") || "Heap", // SG 07/16/2022 20:00 defalt algorithm set to heap
2421
animating: false,
25-
}
22+
};
2623
}
2724

2825
displayErrorMessage() {
29-
if(this.props.InputHandler.state.inputArrayLength < 2) {
30-
document.getElementById('sort-canvas-error-msg').innerHTML ="Array size should at least be 2"
31-
return false;
26+
if (this.props.InputHandler.state.inputArrayLength < 2) {
27+
document.getElementById("sort-canvas-error-msg").innerHTML =
28+
"Array size should at least be 2";
29+
return false;
3230
}
3331

34-
document.getElementById('sort-canvas-error-msg').innerHTML = '';
32+
document.getElementById("sort-canvas-error-msg").innerHTML = "";
3533
return true;
3634
}
3735

3836
scrollDown() {
39-
if(this.displayErrorMessage()) {
40-
window.scroll({ // SG 07/10/2022 18:55 for mobile devices
37+
if (this.displayErrorMessage()) {
38+
window.scroll({
39+
// SG 07/10/2022 18:55 for mobile devices
4140
top: 1000,
42-
behavior: 'smooth'
41+
behavior: "smooth",
4342
});
4443
return true;
4544
} else {
4645
return false;
4746
}
4847
}
4948

50-
5149
render() {
52-
const {inputArrayLength, options} = this.props.InputHandler.state;
50+
const { inputArrayLength, options } = this.props.InputHandler.state;
5351
const { algorithm } = this.state;
5452
const { inputArray, generatedArray } = this.props;
55-
console.log(this.state.animating);
56-
53+
5754
const loadingComponent = (width, margin) => {
5855
return (
59-
<div className={`${margin} cursor-not-allowed relative w-[${width}] h-[2.6em] p-3 group rounded-lg flex dark:bg-lightBlue2 bg-lightGreen`}>
60-
<Loading className="fill-white absolute scale-[.8] top-[50%] left-[50%] right-[50%] -translate-x-[50%] -translate-y-[50%]"/>
56+
<div
57+
className={`${margin} cursor-not-allowed relative w-[${width}] h-[2.6em] p-3 group rounded-lg flex dark:bg-lightBlue2 bg-lightGreen`}
58+
>
59+
<Loading className="fill-white absolute scale-[.8] top-[50%] left-[50%] right-[50%] -translate-x-[50%] -translate-y-[50%]" />
6160
</div>
62-
)
63-
}
61+
);
62+
};
6463

6564
return (
66-
<div className="flex flex-col dark:bg-darkGray bg-gray-100 shadow-lg shadow-gray-200" id="input-field-sort">
67-
68-
<div className={`flex items-center justify-center py-4 md:py-1 w-sreen gap-4 flex-wrap`}>
69-
65+
<div
66+
className="flex flex-col dark:bg-darkGray bg-gray-100 shadow-lg shadow-gray-200"
67+
id="input-field-sort"
68+
>
69+
<div
70+
className={`flex items-center justify-center py-4 md:py-1 w-sreen gap-4 flex-wrap`}
71+
>
7072
<div className={`flex justify-center items-center h-full sm:mb-0`}>
71-
<input placeholder={`Array size (MAX ${InputHandler.getAllowedMaxInputSize()})`} value={inputArrayLength === 0 ? '' : inputArrayLength} onChange={(e) => {
72-
if(!this.state.animating) {
73-
// SG 07/07/2022 21:03 Input validation, only accepts a number that is less than the allowed array size
74-
(Number(e.target.value) || !e.target.value)
75-
&& (e.target.value <= InputHandler.getAllowedMaxInputSize())
76-
? this.props.InputHandler.setState({inputArrayLength: e.target.value.replace(/\D/g, '')})
77-
: this.props.InputHandler.setState({inputArrayLength: InputHandler.getAllowedMaxInputSize()})
73+
<input
74+
placeholder={`Array size (MAX ${InputHandler.getAllowedMaxInputSize()})`}
75+
value={inputArrayLength === 0 ? "" : inputArrayLength}
76+
onChange={(e) => {
77+
if (!this.state.animating) {
78+
// SG 07/07/2022 21:03 Input validation, only accepts a number that is less than the allowed array size
79+
(Number(e.target.value) || !e.target.value) &&
80+
e.target.value <= InputHandler.getAllowedMaxInputSize()
81+
? this.props.InputHandler.setState({
82+
inputArrayLength: e.target.value.replace(/\D/g, ""),
83+
})
84+
: this.props.InputHandler.setState({
85+
inputArrayLength: InputHandler.getAllowedMaxInputSize(),
86+
});
87+
}
88+
}}
89+
className={`${
90+
this.state.animating && "cursor-not-allowed"
91+
} outline-none placeholder:text-[.95em] h-[2.6em] w-[50%] text-[1em] bg-gray-200 px-2 dark:bg-gray-600 text-gray-700 dark:text-gray-100 rounded-md text-center font-semibold sm:w-100`}
92+
maximum={InputHandler.getAllowedMaxInputSize()}
93+
/>
94+
{this.state.animating ? (
95+
loadingComponent("3.2em", "ml-3")
96+
) : (
97+
<button
98+
onClick={() => {
99+
if (this.scrollDown()) {
100+
this.props.InputHandler.setState({
101+
generatedArray:
102+
InputHandler.handleInputRequest(inputArrayLength),
103+
});
78104
}
79105
}}
80-
className={`${this.state.animating && 'cursor-not-allowed'} outline-none placeholder:text-[.95em] h-[2.6em] w-[50%] text-[1em] bg-gray-200 px-2 dark:bg-gray-600 text-gray-700 dark:text-gray-100 rounded-md text-center font-semibold sm:w-100`}
81-
maximum={InputHandler.getAllowedMaxInputSize()}
82-
/>
83-
{this.state.animating ? loadingComponent("3.2em", "ml-3") : <button onClick={() => {
84-
if(this.scrollDown()) {
85-
this.props.InputHandler.setState({generatedArray: InputHandler.handleInputRequest(inputArrayLength)});
86-
}
87-
}} className=" p-[.7em] text-[.92em] w-[10.8em] ml-3 rounded-md text-white font-semibold hover:scale-[1.02] hover:bg-lightGreen transition duration-200 ease-in-out dark:bg-lightBlue2 bg-lightGreen dark:text-white hover:shadow-custom-md-blue dark:hover:shadow-custom-md-lightBlue">Generate Array</button>}
88-
106+
className=" p-[.7em] text-[.92em] w-[10.8em] ml-3 rounded-md text-white font-semibold hover:scale-[1.02] hover:bg-lightGreen transition duration-200 ease-in-out dark:bg-lightBlue2 bg-lightGreen dark:text-white hover:shadow-custom-md-blue dark:hover:shadow-custom-md-lightBlue"
107+
>
108+
Generate Array
109+
</button>
110+
)}
89111
</div>
90-
91-
92-
<div className="flex gap-5 md:gap-10 flex-wrap justify-center items-center">
93112

94-
<Options options={this.props.InputHandler} algorithm={algorithm} animating={this.state.animating}/>
113+
<div className="flex gap-5 md:gap-10 flex-wrap justify-center items-center">
114+
<Options
115+
options={this.props.InputHandler}
116+
algorithm={algorithm}
117+
animating={this.state.animating}
118+
/>
95119

96120
<div className="flex self-center gap-3 justify-center items-center">
97-
<AlgorithmSelection strategy={this.Strategy} options={this}/>
98-
99-
{this.state.animating ? loadingComponent("3.2em") : <div id="sort-play-btn" clickable="true" onClick={async () => {
100-
if(generatedArray.length === 0){
101-
document.getElementById('sort-canvas-error-msg').innerHTML ="Please generate an array first"
102-
} else {
103-
this.setState({...this.state, animating: true})
104-
this.scrollDown();
105-
this.Strategy.setOptions = options;
106-
localStorage.setItem('options', JSON.stringify(options));
107-
await this.Strategy.perform(options, inputArray);
108-
this.setState({...this.state, animating: false})
109-
}
110-
}
111-
} className={`relative w-[3.2em] h-[2.6em] p-3 group rounded-lg flex ${this.state.algorithm && inputArrayLength ? "dark:bg-lightBlue2 bg-lightGreen cursor-pointer hover:shadow-custom-md-blue dark:hover:shadow-custom-md-lightBlue transition-all duration-200 ease-in-out" : "bg-gray-600 cursor-not-allowed"}`}>
112-
<Play className={`absolute left-[50%] top-[50%] -translate-x-[50%] -translate-y-[50%] scale-[1.1] mr-auto ml-auto transition-all duration-200 ease-in-out ${this.state.algorithm && "group-hover:scale-[1.2]"}`}/>
113-
</div>}
114-
115-
116-
{this.state.animating ? loadingComponent("3.2em") : <div className="self-center group">
117-
<div id="sort-replay-btn" clickable="true" onClick={() => { //TODO need to make sure to kill setTimeout
118-
if(this.scrollDown()) {
119-
this.props.InputHandler.setState({generatedArray: InputHandler.handleInputRequest(inputArrayLength)});
120-
}
121-
}} className={`p-3 w-[3.2em] group h-[2.6em] rounded-lg flex ${this.state.algorithm && inputArrayLength? "dark:bg-lightBlue2 bg-lightGreen cursor-pointer hover:shadow-custom-md-blue dark:hover:shadow-custom-md-lightBlue" : "bg-gray-600 cursor-not-allowed"} relative`}>
122-
<Replay className={` ${this.state.algorithm && inputArrayLength && "group-hover:rotate-[330deg]"} scale-[.9] absolute left-[50%] top-[50%] -translate-x-[50%] -translate-y-[50%] transition-all duration-200 ease-out`}/>
121+
<AlgorithmSelection strategy={this.Strategy} options={this} />
122+
123+
{this.state.animating ? (
124+
loadingComponent("3.2em")
125+
) : (
126+
<div
127+
id="sort-play-btn"
128+
clickable="true"
129+
onClick={async () => {
130+
if (generatedArray.length === 0) {
131+
document.getElementById(
132+
"sort-canvas-error-msg"
133+
).innerHTML = "Please generate an array first";
134+
} else {
135+
this.setState({ ...this.state, animating: true });
136+
this.scrollDown();
137+
this.Strategy.setOptions = options;
138+
localStorage.setItem("options", JSON.stringify(options));
139+
await this.Strategy.perform(options, inputArray);
140+
this.setState({ ...this.state, animating: false });
141+
}
142+
}}
143+
className={`relative w-[3.2em] h-[2.6em] p-3 group rounded-lg flex ${
144+
this.state.algorithm && inputArrayLength
145+
? "dark:bg-lightBlue2 bg-lightGreen cursor-pointer hover:shadow-custom-md-blue dark:hover:shadow-custom-md-lightBlue transition-all duration-200 ease-in-out"
146+
: "bg-gray-600 cursor-not-allowed"
147+
}`}
148+
>
149+
<Play
150+
className={`absolute left-[50%] top-[50%] -translate-x-[50%] -translate-y-[50%] scale-[1.1] mr-auto ml-auto transition-all duration-200 ease-in-out ${
151+
this.state.algorithm && "group-hover:scale-[1.2]"
152+
}`}
153+
/>
154+
</div>
155+
)}
156+
157+
{this.state.animating ? (
158+
loadingComponent("3.2em")
159+
) : (
160+
<div className="self-center group">
161+
<div
162+
id="sort-replay-btn"
163+
clickable="true"
164+
onClick={() => {
165+
//TODO need to make sure to kill setTimeout
166+
if (this.scrollDown()) {
167+
this.props.InputHandler.setState({
168+
generatedArray:
169+
InputHandler.handleInputRequest(inputArrayLength),
170+
});
171+
}
172+
}}
173+
className={`p-3 w-[3.2em] group h-[2.6em] rounded-lg flex ${
174+
this.state.algorithm && inputArrayLength
175+
? "dark:bg-lightBlue2 bg-lightGreen cursor-pointer hover:shadow-custom-md-blue dark:hover:shadow-custom-md-lightBlue"
176+
: "bg-gray-600 cursor-not-allowed"
177+
} relative`}
178+
>
179+
<Replay
180+
className={` ${
181+
this.state.algorithm &&
182+
inputArrayLength &&
183+
"group-hover:rotate-[330deg]"
184+
} scale-[.9] absolute left-[50%] top-[50%] -translate-x-[50%] -translate-y-[50%] transition-all duration-200 ease-out`}
185+
/>
186+
</div>
123187
</div>
124-
</div>}
125-
{!this.state.animating && <ShowValue mainCanvasInputHandler={this.props.InputHandler} inputArrayLength={inputArrayLength}/>}
188+
)}
189+
{!this.state.animating && (
190+
<ShowValue
191+
mainCanvasInputHandler={this.props.InputHandler}
192+
inputArrayLength={inputArrayLength}
193+
/>
194+
)}
126195
</div>
127196
</div>
128197
</div>
129198
</div>
130-
)
199+
);
131200
}
132201
}
133202

134-
135-
136-
export {InputField};
203+
export { InputField };

‎src/components/Canvas/MainSortingCanvas.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,9 @@ class MainCanvas extends Component {
4747
options: { ...this.state.options, defaultBarColor: "white" },
4848
});
4949
}
50+
window.addEventListener("resize", () => {
51+
this.forceUpdate();
52+
});
5053
}
5154

5255
render() {

0 commit comments

Comments
 (0)