Skip to content
Snippets Groups Projects
Commit a0286aa1 authored by Daniel Runte's avatar Daniel Runte
Browse files

Merge branch 'feature/quit-Sorting' into 'main'

Added option to pause sorting

See merge request !4
parents 304cbddf 10e3a3b1
No related branches found
No related tags found
1 merge request!4Added option to pause sorting
Pipeline #224151 passed
async function BubbleSort(EingangsArray, updateBars, setColor, sortSpeed){ let abortFlag = {isAborted: false};
export default async function BubbleSort(EingangsArray, updateBars, setColor, sortSpeed) {
const len = EingangsArray.length; const len = EingangsArray.length;
for(let i = 0; i< len -1; ++i){ for (let i = 0; i < len - 1; ++i) {
for(let k=0; k< len -1-i; k++){ if (abortFlag.isAborted) return;
for (let k = 0; k < len - 1 - i; k++) {
if (abortFlag.isAborted) return;
let tmp; let tmp;
if (k == len -2-i){ if (k == len - 2 - i) {
setColor([(len-1-i)]); setColor([len - 1 - i]);
} }
if(EingangsArray[k] > EingangsArray[k+1]){ if (EingangsArray[k] > EingangsArray[k + 1]) {
tmp = EingangsArray[k]; tmp = EingangsArray[k];
EingangsArray[k] = EingangsArray[k+1]; EingangsArray[k] = EingangsArray[k + 1];
EingangsArray[k+1] = tmp; EingangsArray[k + 1] = tmp;
} }
updateBars([...EingangsArray]); updateBars([...EingangsArray]);
await new Promise(resolve => setTimeout(resolve, sortSpeed)); // Pause für Animation await new Promise(resolve => setTimeout(resolve, sortSpeed));
} }
} }
setColor([(len-len)]); setColor([len - len]);
console.log(EingangsArray); console.log(EingangsArray);
return EingangsArray; return EingangsArray;
} }
export default BubbleSort;
\ No newline at end of file export function abortBubbleSort() {
abortFlag.isAborted = true;
}
async function MergeSort(EingangsArray, startIdx, endIdx, arrayCopy, updateBars, setColor, sortSpeed) { let abortFlag = {isAborted: false};
async function MergeSort(EingangsArray, startIdx, endIdx, arrayCopy, updateBars, setColor, sortSpeed, abortFlag) {
if (abortFlag.isAborted) return;
if (startIdx >= endIdx) return; if (startIdx >= endIdx) return;
// Split array // Split array
const cuttingEdge = Math.floor((startIdx + endIdx) / 2); const cuttingEdge = Math.floor((startIdx + endIdx) / 2);
// Recursively sort both halves // Recursively sort both halves
await MergeSort(EingangsArray, startIdx, cuttingEdge, arrayCopy, updateBars, setColor, sortSpeed); await MergeSort(EingangsArray, startIdx, cuttingEdge, arrayCopy, updateBars, setColor, sortSpeed, abortFlag);
await MergeSort(EingangsArray, cuttingEdge + 1, endIdx, arrayCopy, updateBars, setColor, sortSpeed); await MergeSort(EingangsArray, cuttingEdge + 1, endIdx, arrayCopy, updateBars, setColor, sortSpeed, abortFlag);
// Merge halves back togeteher // Merge halves back together
await merge(EingangsArray, startIdx, cuttingEdge, endIdx, arrayCopy, updateBars, setColor, sortSpeed); await merge(EingangsArray, startIdx, cuttingEdge, endIdx, arrayCopy, updateBars, setColor, sortSpeed, abortFlag);
} }
async function merge(EingangsArray, startIdx, middleIdx, endIdx, arrayCopy, updateBars, setColor, sortSpeed) { async function merge(EingangsArray, startIdx, middleIdx, endIdx, arrayCopy, updateBars, setColor, sortSpeed, abortFlag) {
if (abortFlag.isAborted) return;
let i = startIdx; let i = startIdx;
let j = middleIdx + 1; let j = middleIdx + 1;
let k = startIdx; let k = startIdx;
const bars = document.querySelectorAll('.bar'); // get all bars const bars = document.querySelectorAll('.bar'); // get all bars
const sortSpeedSwitch = Number(sortSpeed); const sortSpeedSwitch = Number(sortSpeed);
// index exist? // index exist?
const isValidIndex = (index) => index >= 0 && index < bars.length; const isValidIndex = (index) => index >= 0 && index < bars.length;
...@@ -53,6 +56,12 @@ async function merge(EingangsArray, startIdx, middleIdx, endIdx, arrayCopy, upda ...@@ -53,6 +56,12 @@ async function merge(EingangsArray, startIdx, middleIdx, endIdx, arrayCopy, upda
await updateArrayState(EingangsArray, arrayCopy, startIdx, endIdx, updateBars, sortSpeed); await updateArrayState(EingangsArray, arrayCopy, startIdx, endIdx, updateBars, sortSpeed);
if (isValidIndex(i - 1)) bars[i - 1].style.backgroundColor = ''; // default colr if (isValidIndex(i - 1)) bars[i - 1].style.backgroundColor = ''; // default colr
if (isValidIndex(j - 1)) bars[j - 1].style.backgroundColor = ''; if (isValidIndex(j - 1)) bars[j - 1].style.backgroundColor = '';
if (abortFlag.isAborted) {
bars.forEach(bar => {
bar.style.backgroundColor = '';
});
return;
}
k++; k++;
} }
...@@ -73,6 +82,7 @@ async function merge(EingangsArray, startIdx, middleIdx, endIdx, arrayCopy, upda ...@@ -73,6 +82,7 @@ async function merge(EingangsArray, startIdx, middleIdx, endIdx, arrayCopy, upda
arrayCopy[k] = EingangsArray[i]; arrayCopy[k] = EingangsArray[i];
await updateArrayState(EingangsArray, arrayCopy, startIdx, endIdx, updateBars, sortSpeed); await updateArrayState(EingangsArray, arrayCopy, startIdx, endIdx, updateBars, sortSpeed);
if (isValidIndex(i)) bars[i].style.backgroundColor = ''; if (isValidIndex(i)) bars[i].style.backgroundColor = '';
if (abortFlag.isAborted) return;
i++; i++;
k++; k++;
...@@ -94,6 +104,7 @@ async function merge(EingangsArray, startIdx, middleIdx, endIdx, arrayCopy, upda ...@@ -94,6 +104,7 @@ async function merge(EingangsArray, startIdx, middleIdx, endIdx, arrayCopy, upda
arrayCopy[k] = EingangsArray[j]; arrayCopy[k] = EingangsArray[j];
await updateArrayState(EingangsArray, arrayCopy, startIdx, endIdx, updateBars, sortSpeed); await updateArrayState(EingangsArray, arrayCopy, startIdx, endIdx, updateBars, sortSpeed);
if (isValidIndex(j)) bars[j].style.backgroundColor = ''; if (isValidIndex(j)) bars[j].style.backgroundColor = '';
if (abortFlag.isAborted) return;
j++; j++;
k++; k++;
...@@ -116,7 +127,11 @@ async function updateArrayState(EingangsArray, arrayCopy, startIdx, endIdx, upda ...@@ -116,7 +127,11 @@ async function updateArrayState(EingangsArray, arrayCopy, startIdx, endIdx, upda
} }
export default async function startMergeSort(EingangsArray, updateBars, setFinish, sortSpeed) { export default async function startMergeSort(EingangsArray, updateBars, setFinish, sortSpeed) {
abortFlag.isAborted = false;
const arrayCopy = [...EingangsArray]; const arrayCopy = [...EingangsArray];
await MergeSort(EingangsArray, 0, EingangsArray.length - 1, arrayCopy, updateBars, setFinish, sortSpeed, abortFlag);
}
await MergeSort(EingangsArray, 0, EingangsArray.length - 1, arrayCopy, updateBars, setFinish, sortSpeed); export function abortMergeSort() {
abortFlag.isAborted = true;
} }
import {useState, useEffect} from 'react'; import {useState, useEffect} from 'react';
import './SortingVisualizer.css' import './SortingVisualizer.css'
import BubbleSort from "./BubbleSort"; import BubbleSort, {abortBubbleSort} from "./BubbleSort";
import startMergeSort from "./MergeSort.js"; import startMergeSort, {abortMergeSort} from "./MergeSort.js";
import RangeSlider from 'react-bootstrap-range-slider'; import RangeSlider from 'react-bootstrap-range-slider';
import 'react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css'; import 'react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css';
import {Dropdown} from 'react-bootstrap'; import {Dropdown} from 'react-bootstrap';
...@@ -44,7 +44,7 @@ function SortingVisualizer() { ...@@ -44,7 +44,7 @@ function SortingVisualizer() {
} }
function generateArray(numberBars) { function generateArray(numberBars) {
return Array.from({length: numberBars}, () => getRandomArbitrary(20, 400)); return Array.from({length: numberBars}, () => getRandomArbitrary(20, 450));
} }
async function handleSorting() { async function handleSorting() {
...@@ -88,6 +88,20 @@ function SortingVisualizer() { ...@@ -88,6 +88,20 @@ function SortingVisualizer() {
} }
} }
async function stopSorting() {
switch (Algo) {
case 'BubbleSort':
abortBubbleSort();
break;
case 'MergeSort':
abortMergeSort();
break;
}
await new Promise(resolve => setTimeout(resolve, 200));
document.getElementById('startButton').innerText = 'Reset!';
setIsSorted(true);
}
useEffect(() => { useEffect(() => {
if (alreadySorted == 0) { if (alreadySorted == 0) {
setIsSorted(true); setIsSorted(true);
...@@ -166,9 +180,9 @@ function SortingVisualizer() { ...@@ -166,9 +180,9 @@ function SortingVisualizer() {
</Dropdown.Menu> </Dropdown.Menu>
</Dropdown> </Dropdown>
<button id='startButton' className="Button" disabled={sorting} <button id='startButton' className="Button"
style={{background: `${sorting ? 'red' : ''}`}} onClick={() => { style={{background: `${sorting ? 'red' : ''}`}} onClick={() => {
handleButton() sorting ? stopSorting() : handleButton()
}}>{sorting ? 'Sorting...' : 'Sort!'}</button> }}>{sorting ? 'Sorting...' : 'Sort!'}</button>
</div> </div>
<div className='DivArray'> <div className='DivArray'>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment