From dab6c076abc986e5110d145bd96d8adb127b1de3 Mon Sep 17 00:00:00 2001 From: Theo Date: Fri, 31 Jan 2025 14:05:46 -0500 Subject: [PATCH 1/8] got rid of footer (there's already a back button at the top) --- src/screens/AlgoScreen.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/screens/AlgoScreen.js b/src/screens/AlgoScreen.js index c494ca2b..5892ef44 100644 --- a/src/screens/AlgoScreen.js +++ b/src/screens/AlgoScreen.js @@ -205,12 +205,6 @@ const AlgoScreen = ({ theme, toggleTheme }) => {
- - ); From 78e29270e68ff56d4d9dcab3fb764383b1b4bfa7 Mon Sep 17 00:00:00 2001 From: Theo Date: Fri, 31 Jan 2025 15:29:13 -0500 Subject: [PATCH 2/8] feat: automatic canvas resizing --- src/anim/AnimationMain.js | 2 +- src/css/AlgoScreen.css | 7 +++++++ src/screens/AlgoScreen.js | 11 ++++++++--- 3 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/anim/AnimationMain.js b/src/anim/AnimationMain.js index 89d250f4..fbd1d97a 100644 --- a/src/anim/AnimationMain.js +++ b/src/anim/AnimationMain.js @@ -312,7 +312,7 @@ export default class AnimationManager extends EventListener { width = width == null || width === '' ? 1500 : parseInt(width); let height = getCookie('VisualizationHeight'); - height = height == null || height === '' ? 555 : parseInt(height); + height = height == null || height === '' ? 100 : parseInt(height); canvas.width = width; canvas.height = height; diff --git a/src/css/AlgoScreen.css b/src/css/AlgoScreen.css index 86508558..1dcb0af1 100644 --- a/src/css/AlgoScreen.css +++ b/src/css/AlgoScreen.css @@ -33,12 +33,18 @@ /* padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */ background: #ffffff; font-family: 'Roboto', Helvetica Neue, Helvetica, Arial, sans-serif; + display: flex; + flex-direction: column; + flex: 1; } .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: 100%; /* keeps the page full height like an app*/ + display: flex; + flex-flow: column; } .VisualizationMainPage #toggle { @@ -79,6 +85,7 @@ .VisualizationMainPage .viewport { position: relative; + flex:1; /* to grow and take up available space */ } .VisualizationMainPage #generalAnimationControlSection { diff --git a/src/screens/AlgoScreen.js b/src/screens/AlgoScreen.js index 5892ef44..a87dcf49 100644 --- a/src/screens/AlgoScreen.js +++ b/src/screens/AlgoScreen.js @@ -56,11 +56,16 @@ const AlgoScreen = ({ theme, toggleTheme }) => { } const updateDimensions = () => { - animManagRef.current.changeSize(document.body.clientWidth); + canvasRef.current.height = 100; + animManagRef.current.changeSize(document.body.clientWidth, document.getElementById("canvasContainer").clientHeight -1); }; + window.addEventListener('resize', updateDimensions); + // TODO: invistagate why 0 ms causes extra 3 pixels to be added to height + setTimeout(updateDimensions,10) + return () => { window.removeEventListener('resize', updateDimensions); }; @@ -187,8 +192,8 @@ const AlgoScreen = ({ theme, toggleTheme }) => { -
- +
+ {moreInfoEnabled && (
{infoModals[algoName]}
From eb588918fb9e5f0e632dc5f581350f928910e2d1 Mon Sep 17 00:00:00 2001 From: Theo Date: Fri, 31 Jan 2025 15:42:19 -0500 Subject: [PATCH 3/8] feat: removed set canvas height button/input --- src/anim/AnimationMain.js | 92 +-------------------------------------- 1 file changed, 2 insertions(+), 90 deletions(-) diff --git a/src/anim/AnimationMain.js b/src/anim/AnimationMain.js index fbd1d97a..a4f73aa1 100644 --- a/src/anim/AnimationMain.js +++ b/src/anim/AnimationMain.js @@ -84,54 +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'); @@ -272,7 +224,7 @@ export default class AnimationManager extends EventListener { /> ); - let tableEntry = document.createElement('td'); + const tableEntry = document.createElement('td'); const controlBar = document.getElementById('GeneralAnimationControls'); @@ -291,7 +243,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); @@ -306,47 +258,10 @@ export default class AnimationManager extends EventListener { element.setAttribute('style', 'width:200px'); - addDivisorToAnimationBar(animBarRef); - - let width = getCookie('VisualizationWidth'); - width = width == null || width === '' ? 1500 : parseInt(width); - - let height = getCookie('VisualizationHeight'); - height = height == null || height === '' ? 100 : 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) { @@ -393,14 +308,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 }); From 4ab6d71984b238e8a60739648f48dad63030358c Mon Sep 17 00:00:00 2001 From: Theo Date: Fri, 31 Jan 2025 18:24:53 -0500 Subject: [PATCH 4/8] chore: algoScreen.css formating --- src/css/AlgoScreen.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/css/AlgoScreen.css b/src/css/AlgoScreen.css index 1dcb0af1..b99fdc34 100644 --- a/src/css/AlgoScreen.css +++ b/src/css/AlgoScreen.css @@ -34,8 +34,8 @@ background: #ffffff; font-family: 'Roboto', Helvetica Neue, Helvetica, Arial, sans-serif; display: flex; - flex-direction: column; - flex: 1; + flex-direction: column; + flex: 1; } .VisualizationMainPage #container { @@ -43,8 +43,8 @@ /* 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: 100%; /* keeps the page full height like an app*/ - display: flex; - flex-flow: column; + display: flex; + flex-flow: column; } .VisualizationMainPage #toggle { @@ -85,7 +85,7 @@ .VisualizationMainPage .viewport { position: relative; - flex:1; /* to grow and take up available space */ + flex: 1; /* to grow and take up available space */ } .VisualizationMainPage #generalAnimationControlSection { From a0fa8faca8f4d3ec472f4e59502289cf4893a5a1 Mon Sep 17 00:00:00 2001 From: Theo Date: Fri, 31 Jan 2025 19:22:04 -0500 Subject: [PATCH 5/8] style: only scroll mainContainer on x overflow --- src/css/AlgoScreen.css | 9 ++- src/screens/AlgoScreen.js | 126 +++++++++++++++++++------------------- 2 files changed, 72 insertions(+), 63 deletions(-) diff --git a/src/css/AlgoScreen.css b/src/css/AlgoScreen.css index b99fdc34..159a2771 100644 --- a/src/css/AlgoScreen.css +++ b/src/css/AlgoScreen.css @@ -35,7 +35,14 @@ font-family: 'Roboto', Helvetica Neue, Helvetica, Arial, sans-serif; display: flex; flex-direction: column; - flex: 1; + height: 100%; + min-width: 100%; + width: min-content; +} + +div#x-ScrollContainer { + flex: 1; + overflow-x: scroll; } .VisualizationMainPage #container { diff --git a/src/screens/AlgoScreen.js b/src/screens/AlgoScreen.js index a87dcf49..9b429013 100644 --- a/src/screens/AlgoScreen.js +++ b/src/screens/AlgoScreen.js @@ -57,6 +57,7 @@ const AlgoScreen = ({ theme, toggleTheme }) => { const updateDimensions = () => { canvasRef.current.height = 100; + canvasRef.current.width = 50; animManagRef.current.changeSize(document.body.clientWidth, document.getElementById("canvasContainer").clientHeight -1); }; @@ -141,73 +142,74 @@ const AlgoScreen = ({ theme, toggleTheme }) => {
+
+
+
+
+
+ {hasPseudoCode && pseudocodeType === 'none' && ( + + )} + {hasPseudoCode && pseudocodeType === 'english' && ( + + )} + {hasPseudoCode && pseudocodeType === 'code' && ( + + )} + {bigOModals(algoName) && ( + + )} + {infoModals[algoName] && ( + + )} +
+
-
-
-
-
- {hasPseudoCode && pseudocodeType === 'none' && ( - - )} - {hasPseudoCode && pseudocodeType === 'english' && ( - - )} - {hasPseudoCode && pseudocodeType === 'code' && ( - - )} - {bigOModals(algoName) && ( - +
+ + {moreInfoEnabled && ( +
+
{infoModals[algoName]}
+
)} - {infoModals[algoName] && ( - + {bigOEnabled && ( +
+
{bigOModals(algoName)}
+
)}
-
-
- - {moreInfoEnabled && ( -
-
{infoModals[algoName]}
-
- )} - {bigOEnabled && ( -
-
{bigOModals(algoName)}
-
- )} -
- -
-
+
+
+
From dd7f77728a7a315a21ed98ccc53ae2c52664768b Mon Sep 17 00:00:00 2001 From: Theo Date: Fri, 31 Jan 2025 20:04:00 -0500 Subject: [PATCH 6/8] fix: during x overflow the canvas exapnds with the buttons --- src/screens/AlgoScreen.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/screens/AlgoScreen.js b/src/screens/AlgoScreen.js index 9b429013..134b3b11 100644 --- a/src/screens/AlgoScreen.js +++ b/src/screens/AlgoScreen.js @@ -58,7 +58,7 @@ const AlgoScreen = ({ theme, toggleTheme }) => { const updateDimensions = () => { canvasRef.current.height = 100; canvasRef.current.width = 50; - animManagRef.current.changeSize(document.body.clientWidth, document.getElementById("canvasContainer").clientHeight -1); + animManagRef.current.changeSize(document.getElementById("canvasContainer").clientWidth - 1, document.getElementById("canvasContainer").clientHeight -1); }; From 3fb88348efd64e8bcf4d58853ed09f425df71479 Mon Sep 17 00:00:00 2001 From: Theo Date: Fri, 31 Jan 2025 20:08:56 -0500 Subject: [PATCH 7/8] style: switch from 100% to svh to attmpt to mitigate vertical scroll on mobile --- src/css/AlgoScreen.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/css/AlgoScreen.css b/src/css/AlgoScreen.css index 159a2771..9328531d 100644 --- a/src/css/AlgoScreen.css +++ b/src/css/AlgoScreen.css @@ -49,7 +49,8 @@ div#x-ScrollContainer { 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: 100%; /* keeps the page full height like an app*/ + height: 100%; + height: 100svh; /* keeps the page full height like an app*/ display: flex; flex-flow: column; } From cf9abcb7d633a8233c252ce10d5b17cc405836c0 Mon Sep 17 00:00:00 2001 From: dumax315 Date: Tue, 4 Feb 2025 12:05:06 -0500 Subject: [PATCH 8/8] fix: ensures bottom controls height is incorperated into updateDimensions results --- src/css/AlgoScreen.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/css/AlgoScreen.css b/src/css/AlgoScreen.css index 9328531d..51f76f90 100644 --- a/src/css/AlgoScreen.css +++ b/src/css/AlgoScreen.css @@ -42,7 +42,7 @@ div#x-ScrollContainer { flex: 1; - overflow-x: scroll; + overflow-x: auto; } .VisualizationMainPage #container { @@ -100,6 +100,7 @@ div#x-ScrollContainer { background: var(--control); border-top: 2px var(--border) solid; transition: all 0.4s ease 0s; + min-height: 70px; } .VisualizationMainPage #GeneralAnimationControls {