Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found
Select Git revision
  • main
1 result

Target

Select target project
  • stdarunte/sorting-visualizer
1 result
Select Git revision
  • main
1 result
Show changes
Commits on Source (2)
async function BubbleSort(EingangsArray, updateBars, setColor, sortSpeed){
let abortFlag = {isAborted: false};
export default async function BubbleSort(EingangsArray, updateBars, setColor, sortSpeed) {
const len = EingangsArray.length;
for(let i = 0; i< len -1; ++i){
for(let k=0; k< len -1-i; k++){
for (let i = 0; i < len - 1; ++i) {
if (abortFlag.isAborted) return;
for (let k = 0; k < len - 1 - i; k++) {
if (abortFlag.isAborted) return;
let tmp;
if (k == len -2-i){
setColor([(len-1-i)]);
if (k == len - 2 - i) {
setColor([len - 1 - i]);
}
if(EingangsArray[k] > EingangsArray[k+1]){
if (EingangsArray[k] > EingangsArray[k + 1]) {
tmp = EingangsArray[k];
EingangsArray[k] = EingangsArray[k+1];
EingangsArray[k+1] = tmp;
EingangsArray[k] = EingangsArray[k + 1];
EingangsArray[k + 1] = tmp;
}
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);
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;
// Split array
const cuttingEdge = Math.floor((startIdx + endIdx) / 2);
// Recursively sort both halves
await MergeSort(EingangsArray, startIdx, cuttingEdge, arrayCopy, updateBars, setColor, sortSpeed);
await MergeSort(EingangsArray, cuttingEdge + 1, endIdx, arrayCopy, updateBars, setColor, sortSpeed);
await MergeSort(EingangsArray, startIdx, cuttingEdge, arrayCopy, updateBars, setColor, sortSpeed, abortFlag);
await MergeSort(EingangsArray, cuttingEdge + 1, endIdx, arrayCopy, updateBars, setColor, sortSpeed, abortFlag);
// Merge halves back togeteher
await merge(EingangsArray, startIdx, cuttingEdge, endIdx, arrayCopy, updateBars, setColor, sortSpeed);
// Merge halves back together
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 j = middleIdx + 1;
let k = startIdx;
const bars = document.querySelectorAll('.bar'); // get all bars
const sortSpeedSwitch = Number(sortSpeed);
// index exist?
const isValidIndex = (index) => index >= 0 && index < bars.length;
......@@ -53,6 +56,12 @@ async function merge(EingangsArray, startIdx, middleIdx, endIdx, arrayCopy, upda
await updateArrayState(EingangsArray, arrayCopy, startIdx, endIdx, updateBars, sortSpeed);
if (isValidIndex(i - 1)) bars[i - 1].style.backgroundColor = ''; // default colr
if (isValidIndex(j - 1)) bars[j - 1].style.backgroundColor = '';
if (abortFlag.isAborted) {
bars.forEach(bar => {
bar.style.backgroundColor = '';
});
return;
}
k++;
}
......@@ -73,6 +82,7 @@ async function merge(EingangsArray, startIdx, middleIdx, endIdx, arrayCopy, upda
arrayCopy[k] = EingangsArray[i];
await updateArrayState(EingangsArray, arrayCopy, startIdx, endIdx, updateBars, sortSpeed);
if (isValidIndex(i)) bars[i].style.backgroundColor = '';
if (abortFlag.isAborted) return;
i++;
k++;
......@@ -94,6 +104,7 @@ async function merge(EingangsArray, startIdx, middleIdx, endIdx, arrayCopy, upda
arrayCopy[k] = EingangsArray[j];
await updateArrayState(EingangsArray, arrayCopy, startIdx, endIdx, updateBars, sortSpeed);
if (isValidIndex(j)) bars[j].style.backgroundColor = '';
if (abortFlag.isAborted) return;
j++;
k++;
......@@ -116,7 +127,11 @@ async function updateArrayState(EingangsArray, arrayCopy, startIdx, endIdx, upda
}
export default async function startMergeSort(EingangsArray, updateBars, setFinish, sortSpeed) {
abortFlag.isAborted = false;
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 './SortingVisualizer.css'
import BubbleSort from "./BubbleSort";
import startMergeSort from "./MergeSort.js";
import BubbleSort, {abortBubbleSort} from "./BubbleSort";
import startMergeSort, {abortMergeSort} from "./MergeSort.js";
import RangeSlider from 'react-bootstrap-range-slider';
import 'react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css';
import {Dropdown} from 'react-bootstrap';
......@@ -44,7 +44,7 @@ function SortingVisualizer() {
}
function generateArray(numberBars) {
return Array.from({length: numberBars}, () => getRandomArbitrary(20, 400));
return Array.from({length: numberBars}, () => getRandomArbitrary(20, 450));
}
async function handleSorting() {
......@@ -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(() => {
if (alreadySorted == 0) {
setIsSorted(true);
......@@ -166,9 +180,9 @@ function SortingVisualizer() {
</Dropdown.Menu>
</Dropdown>
<button id='startButton' className="Button" disabled={sorting}
<button id='startButton' className="Button"
style={{background: `${sorting ? 'red' : ''}`}} onClick={() => {
handleButton()
sorting ? stopSorting() : handleButton()
}}>{sorting ? 'Sorting...' : 'Sort!'}</button>
</div>
<div className='DivArray'>
......