diff --git a/aas-gui/Frontend/aas-web-gui/src/components/MainWindow.vue b/aas-gui/Frontend/aas-web-gui/src/components/MainWindow.vue index 0c2b93f..c0ce756 100644 --- a/aas-gui/Frontend/aas-web-gui/src/components/MainWindow.vue +++ b/aas-gui/Frontend/aas-web-gui/src/components/MainWindow.vue @@ -113,21 +113,23 @@ export default defineComponent({ curCol = e.target.parentElement; // the current element that will be scaled nxtCol = curCol.nextElementSibling; // selects the divider if(nxtCol) nxtCol = nxtCol.nextElementSibling; // the next element that will be scaled too - pageX = e.pageX; // the current x position of the mouse + pageX = parseInt(e.pageX); // the current x position of the mouse curColWidth = parseInt(curCol.offsetWidth); // the current width of the current element if(nxtCol) nxtColWidth = parseInt(nxtCol.offsetWidth); // the current width of the next element }); // Eventlistener to scale the current and next Window when the mouse is moved document.addEventListener('mousemove', function(e: any) { - if(!curCol) return; // if no element is selected return - let screenWidth = document.getElementsByTagName('html')[0].clientWidth; // the width of the screen (Window) excluding the scrollbar - let navigationDrawer: any = document.getElementsByClassName('leftMenu')[0]; // the width of the navigation drawer - let isDrawerOpen: boolean = navigationDrawer.style.transform == 'translateX(0%)'; // checks if the navigation drawer is open - screenWidth = screenWidth - (isDrawerOpen ? 336 : 0); // if the navigation drawer is open subtract the width of the navigation drawer from the screen width - let diffX = parseInt(e.pageX) - pageX; // amount the header was dragged (minus - left, plus - right) - // TODO: prevent negative width - if(curCol) curCol.style.width = (100 - ((screenWidth - curColWidth - diffX) / screenWidth) * 100) + '%'; // scale the current Column (Window) - if(nxtCol) nxtCol.style.width = (100 - ((screenWidth - nxtColWidth + diffX) / screenWidth) * 100) + '%'; // scale the next Column (Window) if it exists + if(!curCol) return; // if no element is selected return + let screenWidth = document.documentElement.clientWidth; // the width of the screen (Window) excluding the scrollbar + let navigationDrawer: any = document.getElementsByClassName('leftMenu')[0]; // the width of the navigation drawer + let isDrawerOpen: boolean = navigationDrawer.style.transform == 'translateX(0px)'; // checks if the navigation drawer is open + screenWidth = screenWidth - (isDrawerOpen ? navigationDrawer.clientWidth : 0); // if the navigation drawer is open subtract the width of the navigation drawer from the screen width + let diffX = parseInt(e.pageX) - pageX; // amount the header was dragged (minus - left, plus - right) + let minimalColWith = 200; + if ((curColWidth + diffX) >= minimalColWith && (nxtColWidth - diffX) >= minimalColWith) { + if(curCol) curCol.style.width = (100 - ((screenWidth - (curColWidth + diffX)) / screenWidth) * 100) + '%'; // scale the current Column (Window) + if(nxtCol) nxtCol.style.width = (100 - ((screenWidth - (nxtColWidth - diffX)) / screenWidth) * 100) + '%'; // scale the next Column (Window) if it exists + } }); // Eventlistener to clear the local Variables mouse up document.addEventListener('mouseup', function() {