diff --git a/src/anim/AnimationMain.js b/src/anim/AnimationMain.js index 89d250f4..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 === '' ? 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) { @@ -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 }); diff --git a/src/css/AlgoScreen.css b/src/css/AlgoScreen.css index 86508558..51f76f90 100644 --- a/src/css/AlgoScreen.css +++ b/src/css/AlgoScreen.css @@ -33,12 +33,26 @@ /* 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; + height: 100%; + min-width: 100%; + width: min-content; +} + +div#x-ScrollContainer { + flex: 1; + overflow-x: auto; } .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%; + height: 100svh; /* keeps the page full height like an app*/ + display: flex; + flex-flow: column; } .VisualizationMainPage #toggle { @@ -79,12 +93,14 @@ .VisualizationMainPage .viewport { position: relative; + flex: 1; /* to grow and take up available space */ } .VisualizationMainPage #generalAnimationControlSection { background: var(--control); border-top: 2px var(--border) solid; transition: all 0.4s ease 0s; + min-height: 70px; } .VisualizationMainPage #GeneralAnimationControls { diff --git a/src/screens/AlgoScreen.js b/src/screens/AlgoScreen.js index c494ca2b..134b3b11 100644 --- a/src/screens/AlgoScreen.js +++ b/src/screens/AlgoScreen.js @@ -56,11 +56,17 @@ const AlgoScreen = ({ theme, toggleTheme }) => { } const updateDimensions = () => { - animManagRef.current.changeSize(document.body.clientWidth); + canvasRef.current.height = 100; + canvasRef.current.width = 50; + animManagRef.current.changeSize(document.getElementById("canvasContainer").clientWidth - 1, 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); }; @@ -136,81 +142,76 @@ const AlgoScreen = ({ theme, toggleTheme }) => { +
+
+
+
+
+ {hasPseudoCode && pseudocodeType === 'none' && ( + + )} + {hasPseudoCode && pseudocodeType === 'english' && ( + + )} + {hasPseudoCode && pseudocodeType === 'code' && ( + + )} + {bigOModals(algoName) && ( + + )} + {infoModals[algoName] && ( + + )} +
+
-
-
-
-
- {hasPseudoCode && pseudocodeType === 'none' && ( - - )} - {hasPseudoCode && pseudocodeType === 'english' && ( - +
+ + {moreInfoEnabled && ( +
+
{infoModals[algoName]}
+
)} - {hasPseudoCode && pseudocodeType === 'code' && ( - - )} - {bigOModals(algoName) && ( - - )} - {infoModals[algoName] && ( - + {bigOEnabled && ( +
+
{bigOModals(algoName)}
+
)}
-
- -
- - {moreInfoEnabled && ( -
-
{infoModals[algoName]}
-
- )} - {bigOEnabled && ( -
-
{bigOModals(algoName)}
-
- )} -
-
-
+
+
+
- -
);