Skip to content

Commit 2837bf4

Browse files
lucianktluciankt
committed
Merge changes
1 parent 54b3c7b commit 2837bf4

File tree

7 files changed

+649
-35
lines changed

7 files changed

+649
-35
lines changed

‎src/AlgoList.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const algoMap = {
77
LVA: ['LVA', algos.LVA],
88
BogoSort: ['Bogo Sort', algos.BogoSort],
99
ArrayList: ['ArrayList', algos.ArrayList, true],
10-
LinkedList: ['Singly LinkedList', algos.LinkedList],
10+
LinkedList: ['Singly LinkedList', algos.LinkedList, true],
1111
DoublyLinkedList: ['Doubly LinkedList', algos.DoublyLinkedList, true],
1212
CircularlyLinkedList: ['Circularly LinkedList', algos.CircularlyLinkedList, true],
1313
StackArray: ['Stack (Array)', algos.StackArray, true],

‎src/algo/LinkedList.js

Lines changed: 186 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import Algorithm, {
3232
addLabelToAlgorithmBar,
3333
} from './Algorithm';
3434
import { act } from '../anim/AnimationMain';
35+
import pseudocodeText from '../pseudocode.json'
3536

3637
const INFO_MSG_X = 25;
3738
const INFO_MSG_Y = 15;
@@ -66,13 +67,17 @@ const TAIL_LABEL_Y = 500;
6667
const HEAD_ELEM_WIDTH = 30;
6768
const HEAD_ELEM_HEIGHT = 30;
6869

70+
const CODE_START_X = 135;
71+
const CODE_START_Y = 230;
72+
6973
const SIZE = 32;
7074

7175
export default class LinkedList extends Algorithm {
7276
constructor(am, w, h) {
7377
super(am, w, h);
7478
this.addControls();
7579
this.nextIndex = 0;
80+
this.commands = [];
7681
this.setup();
7782
this.initialIndex = this.nextIndex;
7883
}
@@ -222,9 +227,9 @@ export default class LinkedList extends Algorithm {
222227
this.tailEnabled = !this.tailEnabled;
223228
this.implementAction(this.clearAll.bind(this));
224229
if (this.tailEnabled) {
225-
this.animationManager.setAllLayers([0, 1]);
230+
this.animationManager.setAllLayers([0, 1, 32]); // To make pseudocode display by default you need to add "32" to this array
226231
} else {
227-
this.animationManager.setAllLayers([0]);
232+
this.animationManager.setAllLayers([0, 32]);
228233
}
229234
}
230235

@@ -286,11 +291,16 @@ export default class LinkedList extends Algorithm {
286291
this.cmd(act.setLayer, this.tailID, 1);
287292

288293
if (this.tailEnabled) {
289-
this.animationManager.setAllLayers([0, 1]);
294+
this.animationManager.setAllLayers([0, 1, 32]);
290295
} else {
291-
this.animationManager.setAllLayers([0]);
296+
this.animationManager.setAllLayers([0, 32]);
292297
}
293298

299+
// Pseudocode
300+
this.pseudocode = pseudocodeText.SinglyLinkedList;
301+
302+
this.resetIndex = this.nextIndex;
303+
294304
this.animationManager.startNewAnimation(this.commands);
295305
this.animationManager.skipForward();
296306
this.animationManager.clearHistory();
@@ -319,7 +329,7 @@ export default class LinkedList extends Algorithm {
319329
if (index >= 0 && index <= this.size) {
320330
this.addValueField.value = '';
321331
this.addIndexField.value = '';
322-
this.implementAction(this.add.bind(this), addVal, index);
332+
this.implementAction(this.add.bind(this), addVal, index, false, false, true, false);
323333
} else {
324334
this.implementAction(
325335
this.setInfoText.bind(this),
@@ -339,7 +349,7 @@ export default class LinkedList extends Algorithm {
339349
if (this.addValueField.value !== '') {
340350
const addVal = parseInt(this.addValueField.value);
341351
this.addValueField.value = '';
342-
this.implementAction(this.add.bind(this), addVal, 0);
352+
this.implementAction(this.add.bind(this), addVal, 0, true, false, false, false);
343353
} else {
344354
this.implementAction(this.setInfoText.bind(this), 'Missing input data.');
345355
this.shake(this.addFrontButton);
@@ -350,7 +360,7 @@ export default class LinkedList extends Algorithm {
350360
if (this.addValueField.value !== '') {
351361
const addVal = parseInt(this.addValueField.value);
352362
this.addValueField.value = '';
353-
this.implementAction(this.add.bind(this), addVal, this.size);
363+
this.implementAction(this.add.bind(this), addVal, this.size, false, true, false, false);
354364
} else {
355365
this.implementAction(this.setInfoText.bind(this), 'Missing input data.');
356366
this.shake(this.addBackButton);
@@ -362,7 +372,7 @@ export default class LinkedList extends Algorithm {
362372
const index = this.removeField.value;
363373
if (index >= 0 && index < this.size) {
364374
this.removeField.value = '';
365-
this.implementAction(this.remove.bind(this), index);
375+
this.implementAction(this.remove.bind(this), index, false, false, true);
366376
} else {
367377
let errorMsg = 'Cannot remove from an empty list.';
368378
if (this.size === 1) {
@@ -381,7 +391,7 @@ export default class LinkedList extends Algorithm {
381391

382392
removeFrontCallback() {
383393
if (this.size > 0) {
384-
this.implementAction(this.remove.bind(this), 0);
394+
this.implementAction(this.remove.bind(this), 0, true, false, false);
385395
} else {
386396
this.implementAction(this.setInfoText.bind(this), 'Cannot remove from an empty list.');
387397
this.shake(this.removeFrontButton);
@@ -390,7 +400,7 @@ export default class LinkedList extends Algorithm {
390400

391401
removeBackCallback() {
392402
if (this.size > 0) {
393-
this.implementAction(this.remove.bind(this), this.size - 1);
403+
this.implementAction(this.remove.bind(this), this.size - 1, false, true, false);
394404
} else {
395405
this.implementAction(this.setInfoText.bind(this), 'Cannot remove from an empty list.');
396406
this.shake(this.removeBackButton);
@@ -413,7 +423,7 @@ export default class LinkedList extends Algorithm {
413423
i--;
414424
} else {
415425
set.add(val);
416-
this.implementAction(this.add.bind(this), val, 0);
426+
this.implementAction(this.add.bind(this), val, 0, false, true, false, true);
417427
}
418428
this.animationManager.skipForward();
419429
this.animationManager.clearHistory();
@@ -424,24 +434,108 @@ export default class LinkedList extends Algorithm {
424434
this.implementAction(this.clearAll.bind(this));
425435
}
426436

427-
traverse(startIndex, endIndex) {
437+
traverse(startIndex, endIndex, runningAddBack) {
438+
this.unhighlight(4, 0, this.addBackCodeID);
439+
this.unhighlight(6, 0, this.addIndexCodeID);
428440
for (let i = startIndex; i <= endIndex; i++) {
441+
this.unhighlight(6, 0, this.addBackCodeID);
442+
this.unhighlight(8, 0, this.addIndexCodeID);
429443
this.cmd(act.step);
444+
430445
this.cmd(act.setHighlight, this.linkedListElemID[i], 1);
431446
if (i > 0) {
432447
this.cmd(act.setHighlight, this.linkedListElemID[i - 1], 0);
433448
}
449+
450+
if (runningAddBack) {
451+
this.highlight(6, 0, this.addBackCodeID);
452+
} else {
453+
this.highlight(8, 0, this.addIndexCodeID);
454+
}
455+
this.cmd(act.step);
434456
}
435457
this.cmd(act.step);
436458
}
437459

438-
add(elemToAdd, index) {
460+
add(elemToAdd, index, isAddFront, isAddBack, isAddIndex, skipPseudocode) {
439461
this.commands = [];
440462
this.setInfoText('');
441463

464+
if (!skipPseudocode) {
465+
this.addIndexCodeID = this.addCodeToCanvasBaseAll(
466+
this.pseudocode,
467+
'addIndex',
468+
CODE_START_X,
469+
CODE_START_Y,
470+
);
471+
this.addFrontCodeID = this.addCodeToCanvasBaseAll(
472+
this.pseudocode,
473+
'addFront',
474+
CODE_START_X + 370,
475+
CODE_START_Y,
476+
);
477+
this.addBackCodeID = this.addCodeToCanvasBaseAll(
478+
this.pseudocode,
479+
'addBack',
480+
CODE_START_X + 640,
481+
CODE_START_Y,
482+
);
483+
}
484+
485+
if (isAddFront) {
486+
this.highlight(0, 0, this.addFrontCodeID);
487+
} else if (isAddBack) {
488+
this.highlight(0, 0, this.addBackCodeID);
489+
} else if (isAddIndex) {
490+
this.highlight(0, 0, this.addIndexCodeID);
491+
}
492+
493+
const runningAddFront = isAddFront || (isAddIndex && index === 0); // addfront is called directly or addindex
494+
const runningAddBack = isAddBack || (isAddIndex && index === this.size && !runningAddFront); // addback is called directly or addindex
495+
const runningAddIndexOnly = !runningAddFront && !runningAddBack; // addindex is called directly
496+
497+
if (isAddIndex) {
498+
if (runningAddFront) {
499+
this.cmd(act.step);
500+
this.highlight(1, 0, this.addIndexCodeID);
501+
this.highlight(2, 0, this.addIndexCodeID);
502+
this.highlight(0, 0, this.addFrontCodeID);
503+
} else if (runningAddBack) {
504+
this.cmd(act.step);
505+
this.highlight(3, 0, this.addIndexCodeID);
506+
this.highlight(4, 0, this.addIndexCodeID);
507+
this.highlight(0, 0, this.addBackCodeID);
508+
}
509+
}
510+
511+
this.cmd(act.step);
512+
442513
const labPushID = this.nextIndex++;
443514
const labPushValID = this.nextIndex++;
444515

516+
if (runningAddFront) {
517+
this.highlight(1, 0, this.addFrontCodeID);
518+
} else if (runningAddBack) {
519+
this.highlight(1, 0, this.addBackCodeID);
520+
} else {
521+
this.highlight(5, 0, this.addIndexCodeID);
522+
}
523+
524+
this.cmd(act.step);
525+
526+
if (runningAddBack && this.size > 0) {
527+
this.unhighlight(1, 0, this.addBackCodeID);
528+
this.highlight(3, 0, this.addBackCodeID);
529+
this.cmd(act.step);
530+
this.highlight(4, 0, this.addBackCodeID);
531+
this.cmd(act.step);
532+
this.unhighlight(4, 0, this.addBackCodeID);
533+
this.highlight(5, 0, this.addBackCodeID);
534+
} else if (runningAddIndexOnly) {
535+
this.highlight(6, 0, this.addIndexCodeID);
536+
this.cmd(act.step);
537+
this.highlight(7, 0, this.addIndexCodeID);
538+
}
445539
for (let i = this.size - 1; i >= index; i--) {
446540
this.arrayData[i + 1] = this.arrayData[i];
447541
this.linkedListElemID[i + 1] = this.linkedListElemID[i];
@@ -452,9 +546,9 @@ export default class LinkedList extends Algorithm {
452546
this.cmd(act.setText, this.leftoverLabelID, '');
453547

454548
if (this.tailEnabled && index === this.size) {
455-
this.traverse(this.size - 1, this.size);
549+
this.traverse(this.size - 1, this.size, runningAddBack);
456550
} else {
457-
this.traverse(0, index - 1);
551+
this.traverse(0, index - 1, runningAddBack);
458552
}
459553

460554
this.cmd(
@@ -473,6 +567,29 @@ export default class LinkedList extends Algorithm {
473567
this.cmd(act.createLabel, labPushID, 'Adding Value: ', PUSH_LABEL_X, PUSH_LABEL_Y);
474568
this.cmd(act.createLabel, labPushValID, elemToAdd, PUSH_ELEMENT_X, PUSH_ELEMENT_Y);
475569

570+
if (runningAddFront) {
571+
if (this.size === 0) {
572+
this.highlight(2, 0, this.addFrontCodeID);
573+
} else {
574+
this.unhighlight(1, 0, this.addFrontCodeID);
575+
this.highlight(3, 0, this.addFrontCodeID);
576+
this.cmd(act.step);
577+
this.highlight(4, 0, this.addFrontCodeID);
578+
this.highlight(5, 0, this.addFrontCodeID);
579+
this.highlight(6, 0, this.addFrontCodeID);
580+
}
581+
} else if (runningAddBack) {
582+
if (this.size === 0) {
583+
this.highlight(2, 0, this.addBackCodeID);
584+
}
585+
} else {
586+
this.unhighlight(7, 0, this.addIndexCodeID);
587+
this.unhighlight(8, 0, this.addIndexCodeID);
588+
this.highlight(10, 0, this.addIndexCodeID);
589+
this.highlight(11, 0, this.addIndexCodeID);
590+
this.highlight(12, 0, this.addIndexCodeID);
591+
}
592+
476593
this.cmd(act.step);
477594

478595
this.cmd(act.move, labPushValID, LINKED_LIST_INSERT_X, LINKED_LIST_INSERT_Y);
@@ -504,6 +621,11 @@ export default class LinkedList extends Algorithm {
504621
this.linkedListElemID[index - 1],
505622
this.linkedListElemID[index],
506623
);
624+
if (runningAddBack) {
625+
this.unhighlight(5, 0, this.addBackCodeID);
626+
this.unhighlight(6, 0, this.addBackCodeID);
627+
this.highlight(7, 0, this.addBackCodeID);
628+
}
507629
} else {
508630
this.cmd(
509631
act.disconnect,
@@ -527,20 +649,67 @@ export default class LinkedList extends Algorithm {
527649
}
528650

529651
this.cmd(act.setHighlight, this.linkedListElemID[index - 1], 0);
530-
531652
this.cmd(act.step);
653+
654+
if (runningAddFront) {
655+
this.unhighlight(1, 0, this.addFrontCodeID);
656+
this.unhighlight(2, 0, this.addFrontCodeID);
657+
this.unhighlight(3, 0, this.addFrontCodeID);
658+
this.unhighlight(4, 0, this.addFrontCodeID);
659+
this.unhighlight(5, 0, this.addFrontCodeID);
660+
this.unhighlight(6, 0, this.addFrontCodeID);
661+
this.highlight(8, 0, this.addFrontCodeID);
662+
} else if (runningAddBack) {
663+
this.unhighlight(1, 0, this.addBackCodeID);
664+
this.unhighlight(2, 0, this.addBackCodeID);
665+
this.unhighlight(3, 0, this.addBackCodeID);
666+
this.unhighlight(7, 0, this.addBackCodeID);
667+
this.highlight(9, 0, this.addBackCodeID);
668+
} else {
669+
this.unhighlight(8, 0, this.addIndexCodeID);
670+
this.unhighlight(10, 0, this.addIndexCodeID);
671+
this.unhighlight(11, 0, this.addIndexCodeID);
672+
this.unhighlight(12, 0, this.addIndexCodeID);
673+
this.highlight(13, 0, this.addIndexCodeID);
674+
}
675+
532676
this.size = this.size + 1;
533677
this.resetNodePositions();
534678
this.cmd(act.delete, labPushID);
535679
this.cmd(act.step);
536680

681+
if (!skipPseudocode) {
682+
this.removeCode(this.addFrontCodeID);
683+
this.removeCode(this.addBackCodeID);
684+
this.removeCode(this.addIndexCodeID);
685+
}
686+
537687
return this.commands;
538688
}
539689

540-
remove(index) {
690+
remove(index, isRemoveFront, isRemoveBack, isRemoveIndex) {
541691
this.commands = [];
542692
this.setInfoText('');
543693

694+
this.removeIndexCodeID = this.addCodeToCanvasBaseAll(
695+
this.pseudocode,
696+
'removeIndex',
697+
CODE_START_X,
698+
CODE_START_Y,
699+
);
700+
this.removeFrontCodeID = this.addCodeToCanvasBaseAll(
701+
this.pseudocode,
702+
'removeFront',
703+
CODE_START_X + 325,
704+
CODE_START_Y,
705+
);
706+
this.removeBackCodeID = this.addCodeToCanvasBaseAll(
707+
this.pseudocode,
708+
'removeBack',
709+
CODE_START_X + 620,
710+
CODE_START_Y,
711+
);
712+
544713
index = parseInt(index);
545714
const labPopID = this.nextIndex++;
546715
const labPopValID = this.nextIndex++;

0 commit comments

Comments
 (0)