Skip to content

Commit 4fd3672

Browse files
committed
Finished
1 parent a464f35 commit 4fd3672

File tree

3 files changed

+197
-147
lines changed

3 files changed

+197
-147
lines changed

src/algorithms/ConvexHull.svelte

Lines changed: 85 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -17,24 +17,13 @@
1717
import { algorithmDisplayNames } from '../stores/algorithmMap.js';
1818
import { waitUntilResume, delay, pauseIfNeeded, log } from '../stores/utils.js';
1919
20-
21-
currentStep.set(0);
22-
algorithmStatus.set('idle');
23-
consoleLog.set([]);
2420
const displayName = algorithmDisplayNames[get(selectedAlgorithm)];
25-
activeLine.set(-1);
2621
2722
let elementValue = 6;
2823
29-
let points = [
30-
{ x: 50, y: 50 },
31-
{ x: 450, y: 50 },
32-
{ x: 250, y: 100 },
33-
{ x: 400, y: 250 },
34-
{ x: 100, y: 200 },
35-
{ x: 250, y: 280 }
36-
];
37-
24+
// Reactive declaration - when elementValue changes, points will update automatically
25+
$: points = generateRandomPoints(elementValue);
26+
3827
let highlightedEdge: [Point, Point] | null = null;
3928
let hullEdges: [Point, Point][] = [];
4029
@@ -44,6 +33,9 @@
4433
};
4534
4635
function generateRandomPoints(n): Point[] {
36+
// Ensure input is within bounds
37+
n = Math.max(3, Math.min(20, n));
38+
4739
const width = 500;
4840
const height = 300;
4941
const margin = 20;
@@ -57,10 +49,23 @@
5749
return points;
5850
}
5951
52+
// Update totalSteps when points change
53+
$: totalSteps.set(convexHullCounter(points));
54+
6055
onMount(() => {
61-
totalSteps.set(convexHullCounter(points));
56+
resetParameters();
6257
});
6358
59+
function resetParameters() {
60+
currentStep.set(0);
61+
algorithmStatus.set('idle');
62+
consoleLog.set([]);
63+
activeLine.set({ start: -1, end: -1 });
64+
65+
hullEdges = [];
66+
hullEdges = [...hullEdges];
67+
}
68+
6469
function convexHullCounter(points: Point[]): number {
6570
let steps = 0;
6671
for (let i = 0; i < points.length; i++) {
@@ -95,84 +100,88 @@
95100
async function restartAlgorithm() {
96101
if (get(algorithmStatus) === 'finished') {
97102
return new Promise((resolve) => {
98-
const unsub = resumeSignal.subscribe(() => {
99-
if (get(algorithmStatus) === 'idle') {
100-
consoleLog.set([]);
101-
currentStep.set(0);
102-
hullEdges = [];
103-
hullEdges = [...hullEdges];
104-
105-
unsub();
106-
resolve();
107-
}
103+
const unsub = resumeSignal.subscribe(() => {
104+
if (get(algorithmStatus) === 'idle') {
105+
resetParameters();
106+
unsub();
107+
resolve();
108+
}
109+
});
108110
});
109-
}); }
111+
}
110112
}
111113
112114
async function startAlgorithm() {
113-
consoleLog.set([]);
114-
currentStep.set(0);
115-
hullEdges = [];
116-
117-
if (elementValue < 3) {
118-
elementValue = 3;
119-
} else if (elementValue > 20) {
120-
elementValue = 20;
121-
}
122-
115+
// No need to regenerate points here, as they're already reactive
116+
// No need to clamp elementValue here as it's done in generateRandomPoints
117+
123118
consoleLog.update((logs) => [...logs, `${displayName} indítása...`]);
124119
125-
points = generateRandomPoints(elementValue);
126120
totalSteps.set(convexHullCounter(points));
127121
await convexHull(points);
128-
activeLine.set(-1);
122+
activeLine.set({ start: -1, end: -1 });
129123
130124
consoleLog.update((logs) => [...logs, 'A futás befejeződött!']);
131125
algorithmStatus.set('finished');
132126
await restartAlgorithm();
133127
}
134128
129+
// Handle manual input validation
130+
function handleInputChange() {
131+
if (elementValue < 3) elementValue = 3;
132+
if (elementValue > 20) elementValue = 20;
133+
}
134+
135135
async function convexHull(points: Point[]) {
136+
hullEdges = []; // Clear previous hull edges
137+
136138
for (let i = 0; i < points.length; i++) {
137139
for (let j = i + 1; j < points.length; j++) {
138140
let a = points[i];
139141
let b = points[j];
140142
141143
highlightedEdge = [a, b];
142144
log(`Vizsgálat: él (${a.x}, ${a.y}) → (${b.x}, ${b.y})`);
145+
activeLine.set({ start: 7, end: 8 });
146+
147+
await delay(900 - get(speed) * 8);
143148
await pauseIfNeeded();
144-
await delay(Math.max(100, 900 - get(speed) * 8));
145149
146150
let allOnOneSide = true;
147151
let side = null;
148152
149153
for (let k = 0; k < points.length; k++) {
150-
activeLine.set(17);
151-
await delay(Math.max(100, 900 - get(speed) * 8));
154+
activeLine.set({ start: 13, end: 13 });
155+
await delay(900 - get(speed) * 8);
156+
await pauseIfNeeded();
152157
if (k === i || k === j) {
153-
activeLine.set(18);
154-
await delay(Math.max(100, 900 - get(speed) * 8));
158+
activeLine.set({ start: 15, end: 15 });
159+
await delay(900 - get(speed) * 8);
160+
await pauseIfNeeded();
155161
continue;
156162
}
157163
let p = points[k];
158164
let val = crossProduct(a, b, p);
159165
if (val !== 0) {
160166
if (side === null) {
161-
activeLine.set(22);
162-
await delay(Math.max(100, 900 - get(speed) * 8));
167+
activeLine.set({ start: 21, end: 21 });
168+
await delay(900 - get(speed) * 8);
169+
await pauseIfNeeded();
163170
side = val > 0;
164171
} else if (val > 0 !== side) {
165-
activeLine.set(23);
166-
await delay(Math.max(100, 900 - get(speed) * 8));
172+
activeLine.set({ start: 22, end: 25 });
173+
await delay(900 - get(speed) * 8);
174+
await pauseIfNeeded();
167175
allOnOneSide = false;
168176
break;
169177
}
170178
}
171179
}
172180
173181
if (allOnOneSide) {
174-
activeLine.set(32);
175-
await delay(Math.max(200, 900 - get(speed) * 8));
182+
activeLine.set({ start: 29, end: 31 });
183+
await delay(900 - get(speed) * 8);
184+
await pauseIfNeeded();
176185
log(`Él hozzáadva a konvex burokhoz`);
177186
hullEdges.push([a, b]);
178187
hullEdges = [...hullEdges];
@@ -186,23 +195,25 @@
186195
return (b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x);
187196
}
188197
189-
selectedAlgorithmSourceCode.set(`
190-
function convexHull(points) {
198+
selectedAlgorithmSourceCode.set(`function convexHull(points) {
191199
let hullEdges = [];
192-
\n
200+
193201
for (let i = 0; i < points.length; i++) {
194202
for (let j = i + 1; j < points.length; j++){
195-
\n
203+
196204
let a = points[i];
197205
let b = points[j];
198-
\n
206+
199207
let allOnOneSide = true;
200208
let side = null;
201-
\n
209+
202210
for (let k = 0; k < points.length; k++){
211+
203212
if (k === i || k === j) continue;
213+
204214
let p = points[k];
205215
let val = crossProduct(a, b, p);
216+
206217
if (val !== 0) {
207218
if (side === null) side = val > 0;
208219
else if (val > 0 !== side) {
@@ -211,7 +222,7 @@ function convexHull(points) {
211222
}
212223
}
213224
}
214-
\n
225+
215226
if (allOnOneSide) {
216227
hullEdges.push([a, b]);
217228
}
@@ -220,17 +231,23 @@ function convexHull(points) {
220231
}`);
221232
</script>
222233

223-
<div class="control-buttons">
234+
<div class="custom-input">
224235
<div>Pontok száma:</div>
225-
<input class="custom-input" type="number" bind:value={elementValue} max="20" min="3" />
236+
<input
237+
class="custom-input"
238+
type="number"
239+
disabled={$algorithmStatus !== 'idle'}
240+
bind:value={elementValue}
241+
on:change={handleInputChange}
242+
max="20"
243+
min="3"
244+
/>
226245
</div>
227246

228247
<Controls {currentStep} {totalSteps} on:start={startAlgorithm} />
229248

230249
<div class="graph-container">
231250
<svg class="svg" width="500" height="300">
232-
233-
234251
<!-- Aktuálisan vizsgált él -->
235252
{#if highlightedEdge}
236253
<line
@@ -267,7 +284,7 @@ function convexHull(points) {
267284
border: 1px solid #ccc;
268285
border-radius: 4px;
269286
}
270-
.control-buttons {
287+
.custom-input {
271288
display: flex;
272289
justify-content: center;
273290
align-items: center;
@@ -276,12 +293,17 @@ function convexHull(points) {
276293
border-bottom: #484848 3px solid;
277294
}
278295
279-
.control-buttons input {
296+
.custom-input input {
280297
width: 55px;
281298
padding: 0.5rem;
282299
margin-right: 10px;
283300
border-radius: 5px;
284301
background-color: #2f2f2f;
285302
border: 3px solid #505050;
286303
}
287-
</style>
304+
.custom-input input:disabled {
305+
opacity: 0.6;
306+
cursor: not-allowed;
307+
border-color: #3a3a3a;
308+
}
309+
</style>

0 commit comments

Comments
 (0)