Merge pull request #35 from UZ9/ryder/dynamic-canvas-scaling

Dynamic viewport scaling

Author: kathy-tran07

src/anim/AnimationMain.js

@@ -84,55 +84,6 @@ function setCookie(cookieName, value, expireDays) {
 
 const ANIMATION_SPEED_DEFAULT = 75;
 
-// TODO:  Move these out of global space into animation manager?
-
-function controlKey(keyASCII) {
-	return (
-		keyASCII === 8 ||
-		keyASCII === 9 ||
-		keyASCII === 37 ||
-		keyASCII === 38 ||
-		keyASCII === 39 ||
-		keyASCII === 40 ||
-		keyASCII === 46
-	);
-}
-
-function returnSubmit(field, func, maxSize, intOnly) {
-	if (maxSize !== undefined) {
-		field.size = maxSize;
-	}
-	return function (event) {
-		let keyASCII = 0;
-		if (window.event) {
-			// IE
-			keyASCII = event.keyCode;
-		} else if (event.which) {
-			// Netscape/Firefox/Opera
-			keyASCII = event.which;
-		}
-
-		if (keyASCII === 13) {
-			func();
-			return false;
-		} else if (
-			keyASCII === 59 ||
-			keyASCII === 45 ||
-			keyASCII === 46 ||
-			keyASCII === 190 ||
-			keyASCII === 173
-		) {
-			return false;
-		} else if (
-			(maxSize !== undefined && field.value.length >= maxSize) ||
-			(intOnly && (keyASCII < 48 || keyASCII > 57))
-		) {
-			if (!controlKey(keyASCII)) return false;
-		}
-		return true;
-	};
-}
-
 function addControlToAnimationBar(animBarRef, type, name, callback) {
 	const element = document.createElement('input');
 
@@ -276,7 +227,7 @@ export default class AnimationManager extends EventListener {
 			/>
 		);
 
-		let tableEntry = document.createElement('td');
+		const tableEntry = document.createElement('td');
 
 		const controlBar = document.getElementById('GeneralAnimationControls');
 
@@ -295,7 +246,7 @@ export default class AnimationManager extends EventListener {
 		midLevel = document.createElement('tr');
 		bottomLevel = document.createElement('td');
 		bottomLevel.align = 'center';
-		let txtNode = document.createTextNode('Animation Speed');
+		const txtNode = document.createTextNode('Animation Speed');
 		midLevel.appendChild(bottomLevel);
 		bottomLevel.classList.add('txt-node');
 		bottomLevel.appendChild(txtNode);
@@ -312,45 +263,10 @@ export default class AnimationManager extends EventListener {
 
 		addDivisorToAnimationBar(animBarRef);
 
-		let width = getCookie('VisualizationWidth');
-		width = width == null || width === '' ? 1500 : parseInt(width);
-
-		let height = getCookie('VisualizationHeight');
-		height = height == null || height === '' ? 555 : parseInt(height);
-
-		canvas.width = width;
-		canvas.height = height;
-
-		tableEntry = document.createElement('td');
-		txtNode = document.createTextNode('Canvas height:');
-		tableEntry.classList.add('txt-node');
-		tableEntry.appendChild(txtNode);
-		controlBar.appendChild(tableEntry);
-
-		this.heightEntry = addControlToAnimationBar(animBarRef, 'Text', canvas.height, () =>
-			returnSubmit(
-				this.heightEntry,
-				() =>
-					this.changeSize(
-						document.documentElement.clientWidth,
-						parseInt(this.heightEntry.value),
-					),
-				4,
-				true,
-			),
-		);
-
-		this.heightEntry.size = 4;
-		this.sizeButton = addControlToAnimationBar(animBarRef, 'Button', 'Change Canvas Size', () =>
-			this.changeSize(),
-		);
-
 		this.addListener('AnimationStarted', this, this.animStarted);
 		this.addListener('AnimationEnded', this, this.animEnded);
 		this.addListener('AnimationWaiting', this, this.animWaiting);
 		this.addListener('AnimationUndoUnavailable', this, this.animUndoUnavailable);
-		this.objectManager.width = canvas.width;
-		this.objectManager.height = canvas.height;
 	}
 
 	lerp(from, to, percent) {
@@ -397,14 +313,11 @@ export default class AnimationManager extends EventListener {
 		if (width > 100) {
 			canvas.width = width;
 			this.animatedObjects.width = width;
-			setCookie('VisualizationWidth', String(width), 30);
 		}
 		if (height > 100) {
 			canvas.height = height;
 			this.animatedObjects.height = height;
-			setCookie('VisualizationHeight', String(height), 30);
 		}
-		this.heightEntry.value = canvas.height;
 
 		this.animatedObjects.draw();
 		this.fireEvent('CanvasSizeChanged', { width: canvas.width, height: canvas.height });

src/css/AlgoScreen.css

@@ -34,15 +34,22 @@
 }
 
 .VisualizationMainPage #mainContent {
-	/* padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
 	background: #ffffff;
+	width: 100vw;
 	font-family: 'Roboto', Helvetica Neue, Helvetica, Arial, sans-serif;
+	flex: 1;
+	flex-direction: column;
+	display: flex;
+	overflow: hidden;
 }
 
 .VisualizationMainPage #container {
 	background: #ffffff;
 	/* margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
 	text-align: left; /* this overrides the text-align: center on the body element. */
+	height: 100vh;
+	display: flex;
+	flex-direction: column;
 }
 
 .VisualizationMainPage #toggle {
@@ -83,7 +90,10 @@
 }
 
 .VisualizationMainPage .viewport {
+	display: flex;
 	position: relative;
+	flex: 1;
+	overflow: hidden;
 }
 
 .VisualizationMainPage #generalAnimationControlSection {
@@ -126,12 +136,6 @@
 	color: white;
 }
 
-.VisualizationMainPage #container {
-	background: #ffffff;
-	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
-	text-align: left; /* this overrides the text-align: center on the body element. */
-}
-
 .VisualizationMainPage #footer a:visited {
 	text-decoration: none;
 	color: white;
@@ -623,6 +627,10 @@ input[type='checkbox'] {
 		flex-direction: column;
 		gap: 8px;
 	}
+
+	.VisualizationMainPage #mainContent {
+		overflow-x: auto;
+	}
 }
 
 /* Pseudocode Icon */
@@ -1055,3 +1063,8 @@ input[type='checkbox'] {
 	color: white !important;
 	border: none !important;
 }
+
+#canvas {
+	width: 100%;
+	height: 100%;
+}

src/css/App.css

@@ -676,11 +676,35 @@ input::placeholder {
 
 	.side-panel {
 		width: 100%;
+		position: static;
+		padding: 0;
+		border: none;
 	}
 
 	.content a {
 		width: 100%;
 	}
+
+	.outer-flex {
+		flex-direction: column;
+		width: 100%;
+		margin: 0;
+	}
+
+	.inner-flex button.button {
+		margin: 5% 0 0 0;
+		width: 100%;
+		border: none;
+	}
+
+	.dsa-filter {
+		border: none;
+	}
+
+	#blob-container {
+		position: static;
+		padding-bottom: 1rem;
+	}
 }
 
 @media screen and (min-width: 1000px) {

src/modals/BigOModals.js

@@ -58,7 +58,7 @@ const ToggleBlurCell = ({ text, width, force }) => {
 		<td
 			style={{ width: width }}
 			className={isBlurred ? 'blur big_o_cell' : 'big_o_cell'}
-			onClick={() => isBlurred ? setIsBlurred(false) : setIsBlurred(true)}
+			onClick={() => (isBlurred ? setIsBlurred(false) : setIsBlurred(true))}
 		>
 			{applyEquationClass(text, force)}
 		</td>

src/screens/AlgoScreen.js

@@ -71,11 +71,16 @@ const AlgoScreen = ({ theme, toggleTheme }) => {
 			}
 
 			const updateDimensions = () => {
-				animManagRef.current.changeSize(document.body.clientWidth);
+				animManagRef.current.changeSize(
+					canvasRef.current.clientWidth,
+					canvasRef.current.clientHeight,
+				);
 			};
 
 			window.addEventListener('resize', updateDimensions);
 
+			updateDimensions();
+
 			return () => {
 				window.removeEventListener('resize', updateDimensions);
 			};
@@ -284,7 +289,7 @@ const AlgoScreen = ({ theme, toggleTheme }) => {
 					</div>
 
 					<div className="viewport">
-						<canvas id="canvas" width={0} height="505" ref={canvasRef}></canvas>
+						<canvas id="canvas" ref={canvasRef}></canvas>
 						{infoModalEnabled && (
 							<div
 								className={`modal info-modal ${

src/screens/HomeScreen.js

@@ -109,10 +109,6 @@ const HomeScreen = ({ theme, toggleTheme }) => {
 											}
 										/>
 									</div>
-									{/* Blob Gimmick */}
-									<div id="blob-container">
-										<Blob />
-									</div>
 									<div className="mid-flex">
 										<div className="inner-flex">
 											<SearchFilter filteredAlgoList={filteredAlgoList} />
@@ -131,9 +127,15 @@ const HomeScreen = ({ theme, toggleTheme }) => {
 										)}
 									</div>
 								</div>
+
+								{/* Blob Gimmick */}
+								<div id="blob-container">
+									<Blob />
+								</div>
 							</>
 						}
 					/>
+
 					<Route path="/about" element={<AboutScreen />} />
 				</Routes>
 			</div>