17
17
import { algorithmDisplayNames } from ' ../stores/algorithmMap.js' ;
18
18
import { waitUntilResume , delay , pauseIfNeeded , log } from ' ../stores/utils.js' ;
19
19
20
-
21
- currentStep .set (0 );
22
- algorithmStatus .set (' idle' );
23
- consoleLog .set ([]);
24
20
const displayName = algorithmDisplayNames [get (selectedAlgorithm )];
25
- activeLine .set (- 1 );
26
21
27
22
let elementValue = 6 ;
28
23
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
+
38
27
let highlightedEdge: [Point , Point ] | null = null ;
39
28
let hullEdges: [Point , Point ][] = [];
40
29
44
33
};
45
34
46
35
function generateRandomPoints(n ): Point [] {
36
+ // Ensure input is within bounds
37
+ n = Math .max (3 , Math .min (20 , n ));
38
+
47
39
const width = 500 ;
48
40
const height = 300 ;
49
41
const margin = 20 ;
57
49
return points ;
58
50
}
59
51
52
+ // Update totalSteps when points change
53
+ $ : totalSteps .set (convexHullCounter (points ));
54
+
60
55
onMount (() => {
61
- totalSteps . set ( convexHullCounter ( points ) );
56
+ resetParameters ( );
62
57
});
63
58
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
+
64
69
function convexHullCounter(points : Point []): number {
65
70
let steps = 0 ;
66
71
for (let i = 0 ; i < points .length ; i ++ ) {
95
100
async function restartAlgorithm() {
96
101
if (get (algorithmStatus ) === ' finished' ) {
97
102
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
+ });
108
110
});
109
- }); }
111
+ }
110
112
}
111
113
112
114
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
+
123
118
consoleLog .update ((logs ) => [... logs , ` ${displayName } indítása... ` ]);
124
119
125
- points = generateRandomPoints (elementValue );
126
120
totalSteps .set (convexHullCounter (points ));
127
121
await convexHull (points );
128
- activeLine .set (- 1 );
122
+ activeLine .set ({ start: - 1 , end: - 1 } );
129
123
130
124
consoleLog .update ((logs ) => [... logs , ' A futás befejeződött!' ]);
131
125
algorithmStatus .set (' finished' );
132
126
await restartAlgorithm ();
133
127
}
134
128
129
+ // Handle manual input validation
130
+ function handleInputChange() {
131
+ if (elementValue < 3 ) elementValue = 3 ;
132
+ if (elementValue > 20 ) elementValue = 20 ;
133
+ }
134
+
135
135
async function convexHull(points : Point []) {
136
+ hullEdges = []; // Clear previous hull edges
137
+
136
138
for (let i = 0 ; i < points .length ; i ++ ) {
137
139
for (let j = i + 1 ; j < points .length ; j ++ ) {
138
140
let a = points [i ];
139
141
let b = points [j ];
140
142
141
143
highlightedEdge = [a , b ];
142
144
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 );
143
148
await pauseIfNeeded ();
144
- await delay (Math .max (100 , 900 - get (speed ) * 8 ));
145
149
146
150
let allOnOneSide = true ;
147
151
let side = null ;
148
152
149
153
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 ();
152
157
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 ();
155
161
continue ;
156
162
}
157
163
let p = points [k ];
158
164
let val = crossProduct (a , b , p );
159
165
if (val !== 0 ) {
160
166
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 ();
163
170
side = val > 0 ;
164
171
} 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 ();
167
175
allOnOneSide = false ;
168
176
break ;
169
177
}
170
178
}
171
179
}
172
180
173
181
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 ();
176
185
log (` Él hozzáadva a konvex burokhoz ` );
177
186
hullEdges .push ([a , b ]);
178
187
hullEdges = [... hullEdges ];
186
195
return (b .x - a .x ) * (c .y - a .y ) - (b .y - a .y ) * (c .x - a .x );
187
196
}
188
197
189
- selectedAlgorithmSourceCode .set (`
190
- function convexHull(points) {
198
+ selectedAlgorithmSourceCode .set (` function convexHull(points) {
191
199
let hullEdges = [];
192
- \n
200
+
193
201
for (let i = 0; i < points.length; i++) {
194
202
for (let j = i + 1; j < points.length; j++){
195
- \n
203
+
196
204
let a = points[i];
197
205
let b = points[j];
198
- \n
206
+
199
207
let allOnOneSide = true;
200
208
let side = null;
201
- \n
209
+
202
210
for (let k = 0; k < points.length; k++){
211
+
203
212
if (k === i || k === j) continue;
213
+
204
214
let p = points[k];
205
215
let val = crossProduct(a, b, p);
216
+
206
217
if (val !== 0) {
207
218
if (side === null) side = val > 0;
208
219
else if (val > 0 !== side) {
@@ -211,7 +222,7 @@ function convexHull(points) {
211
222
}
212
223
}
213
224
}
214
- \n
225
+
215
226
if (allOnOneSide) {
216
227
hullEdges.push([a, b]);
217
228
}
@@ -220,17 +231,23 @@ function convexHull(points) {
220
231
} ` );
221
232
</script >
222
233
223
- <div class =" control-buttons " >
234
+ <div class =" custom-input " >
224
235
<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
+ />
226
245
</div >
227
246
228
247
<Controls {currentStep } {totalSteps } on:start ={startAlgorithm } />
229
248
230
249
<div class =" graph-container" >
231
250
<svg class =" svg" width =" 500" height =" 300" >
232
-
233
-
234
251
<!-- Aktuálisan vizsgált él -->
235
252
{#if highlightedEdge }
236
253
<line
@@ -267,7 +284,7 @@ function convexHull(points) {
267
284
border : 1px solid #ccc ;
268
285
border-radius : 4px ;
269
286
}
270
- .control-buttons {
287
+ .custom-input {
271
288
display : flex ;
272
289
justify-content : center ;
273
290
align-items : center ;
@@ -276,12 +293,17 @@ function convexHull(points) {
276
293
border-bottom : #484848 3px solid ;
277
294
}
278
295
279
- .control-buttons input {
296
+ .custom-input input {
280
297
width : 55px ;
281
298
padding : 0.5rem ;
282
299
margin-right : 10px ;
283
300
border-radius : 5px ;
284
301
background-color : #2f2f2f ;
285
302
border : 3px solid #505050 ;
286
303
}
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