diff --git a/src/anim/AnimationMain.js b/src/anim/AnimationMain.js
index 0623ac0..286e0d3 100644
--- a/src/anim/AnimationMain.js
+++ b/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 });
diff --git a/src/css/AlgoScreen.css b/src/css/AlgoScreen.css
index 6c6fd4b..9564e80 100644
--- a/src/css/AlgoScreen.css
+++ b/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%;
+}
diff --git a/src/css/App.css b/src/css/App.css
index d6be427..49469b5 100644
--- a/src/css/App.css
+++ b/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) {
diff --git a/src/modals/BigOModals.js b/src/modals/BigOModals.js
index 3ec41a3..fb95ecc 100644
--- a/src/modals/BigOModals.js
+++ b/src/modals/BigOModals.js
@@ -58,7 +58,7 @@ const ToggleBlurCell = ({ text, width, force }) => {
| isBlurred ? setIsBlurred(false) : setIsBlurred(true)}
+ onClick={() => (isBlurred ? setIsBlurred(false) : setIsBlurred(true))}
>
{applyEquationClass(text, force)}
|
diff --git a/src/screens/AlgoScreen.js b/src/screens/AlgoScreen.js
index 464d359..3f20ea3 100644
--- a/src/screens/AlgoScreen.js
+++ b/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 }) => {
-
+
{infoModalEnabled && (
{
}
/>
- {/* Blob Gimmick */}
-
-
-
@@ -131,9 +127,15 @@ const HomeScreen = ({ theme, toggleTheme }) => {
)}
+
+ {/* Blob Gimmick */}
+
+
+
}
/>
+
} />