From 00bfd32c00e9e3ea792d1bca145950d4884f01f4 Mon Sep 17 00:00:00 2001 From: Bappy Date: Thu, 20 Jul 2023 00:56:47 +0600 Subject: [PATCH 01/10] AV-07: Added linked to the menu and folder structured of linked list --- src/algorithms/linked-list/Linked-List.vue | 15 +++++++++++++++ src/components/menu.vue | 1 + src/routes/router.js | 2 ++ 3 files changed, 18 insertions(+) create mode 100644 src/algorithms/linked-list/Linked-List.vue diff --git a/src/algorithms/linked-list/Linked-List.vue b/src/algorithms/linked-list/Linked-List.vue new file mode 100644 index 0000000..d7166c9 --- /dev/null +++ b/src/algorithms/linked-list/Linked-List.vue @@ -0,0 +1,15 @@ + + + + + \ No newline at end of file diff --git a/src/components/menu.vue b/src/components/menu.vue index d377540..86e203a 100644 --- a/src/components/menu.vue +++ b/src/components/menu.vue @@ -22,6 +22,7 @@ { id: 1, label: 'Home', route: '/' }, { id: 2, label: 'Searching Algorithm', route: '/search' }, { id: 3, label: 'Sorting Algorithm', route: '/sort' }, + { id: 4, label: 'Linked List', route: '/linked-list' }, // Add more menu items for other algorithms ]; diff --git a/src/routes/router.js b/src/routes/router.js index df27c7e..9e3eead 100644 --- a/src/routes/router.js +++ b/src/routes/router.js @@ -2,11 +2,13 @@ import { createRouter, createWebHistory } from 'vue-router'; import SearchView from './../algorithms/search/Search.vue'; import homeView from './../algorithms/algorithms.vue'; import SortView from './../algorithms/sort/Sort.vue'; +import LinkedList from './../algorithms/linked-list/Linked-List.vue'; const routes = [ { path: '/', component: homeView }, { path: '/search', component: SearchView }, { path: '/sort', component: SortView }, + { path: '/linked-list', component: LinkedList }, // Add more routes for other algorithm components ]; From 7c767274b32d07ecef7c09ce68ff1e5d51e5c15b Mon Sep 17 00:00:00 2001 From: Bappy Date: Tue, 8 Aug 2023 23:38:51 +0600 Subject: [PATCH 02/10] AV-07: Linked list initialized with add features --- src/algorithms/linked-list/Linked-List.vue | 184 ++++++++++++++++++++- 1 file changed, 183 insertions(+), 1 deletion(-) diff --git a/src/algorithms/linked-list/Linked-List.vue b/src/algorithms/linked-list/Linked-List.vue index d7166c9..228fbe5 100644 --- a/src/algorithms/linked-list/Linked-List.vue +++ b/src/algorithms/linked-list/Linked-List.vue @@ -1,12 +1,194 @@ From 706e77159865793ca8a87141929cbd28a1363621 Mon Sep 17 00:00:00 2001 From: Bappy Date: Wed, 9 Aug 2023 02:54:06 +0600 Subject: [PATCH 03/10] AV-07: Linked enhanced with search and insert feature with animation --- src/algorithms/linked-list/Linked-List.vue | 156 +++++++++++++++++---- 1 file changed, 129 insertions(+), 27 deletions(-) diff --git a/src/algorithms/linked-list/Linked-List.vue b/src/algorithms/linked-list/Linked-List.vue index 228fbe5..6fe0c85 100644 --- a/src/algorithms/linked-list/Linked-List.vue +++ b/src/algorithms/linked-list/Linked-List.vue @@ -2,12 +2,24 @@

Linked List

-
- - +
+ Search result found at: "{{ result }}" +
+ +
+ Searched item not found! +
+
+ + + +
+
+ +
- - + +
@@ -16,6 +28,7 @@ constructor(data) { this.data = data; this.next = null; + this.element = null; } } @@ -24,8 +37,9 @@ this.head = null; } - append(data) { + append(data, element) { const newNode = new Node(data); + newNode.element = element; if (!this.head) { this.head = newNode; return; @@ -55,13 +69,18 @@ data() { return { linkedList: undefined, + result: "", + showSuccessResult: false, + showFailureResult: false, xAxis: 20, arrowXAxis: 0, circleRadius: 5, elements: [], circleContainer: undefined, showInputForm: false, - insertedValue: undefined, + showSearchForm: false, + targetValue: null, + insertedValue: null, } }, @@ -82,16 +101,41 @@ }, - toggleForm() { + toggleInsertForm() { + this.showSuccessResult = false; + this.showFailureResult = false; this.showInputForm = !this.showInputForm; + if (this.showSearchForm) { + this.showSearchForm = !this.showSearchForm; + } + + }, + toggleSearchForm() { + this.showSuccessResult = false; + this.showFailureResult = false; + this.showSearchForm = !this.showSearchForm; + if (this.showInputForm) { + this.showInputForm = !this.showInputForm; + } }, - formSubmitAction() { + insertFormSubmitAction() { if (this.insertedValue > 0) { + this.appendIntoLinkedList(this.insertedValue); - this.createArrow((this.xAxis - this.circleRadius * 20) + 70); - this.createCircle(this.insertedValue); this.showInputForm = false; + this.insertedValue = null; + } else { + console.error("You've added negative number"); + } + }, + + searchFormSubmitAction() { + if (this.insertedValue > 0) { + + this.appendIntoLinkedList(this.insertedValue); + this.showInputForm = false; + this.insertedValue = null; } else { console.error("You've added negative number"); } @@ -117,13 +161,15 @@ .attr('dy', '.4em') // Vertical alignment adjustment .attr('text-anchor', 'middle') // Horizontal alignment .text(num); - if(createArrow){ - this.createArrow(this.xAxis+70); + if (createArrow) { + this.createArrow(this.xAxis + 70); } this.elements.push({circle: circle, text: text}); this.xAxis += this.circleRadius * 20; + return circle; + // this.circleContainer.append('circle') // .attr('cx', 90) // .attr('cy', 100) @@ -133,7 +179,7 @@ // }, - createArrow(arrowX){ + createArrow(arrowX) { const arrowLength = 20; const arrowY = 100; // Line 1: Horizontal line @@ -166,32 +212,88 @@ appendIntoLinkedList(num, pos) { if (!pos) { - this.linkedList.append(num); + const ele = this.createCircle(num); + this.createArrow((this.xAxis - this.circleRadius * 20) + 70); + this.linkedList.append(num, ele); + } + }, + + async searchIntoLinkedList() { + this.showSuccessResult = false; + this.showFailureResult = false; + if (this.targetValue > 0) { + this.showSearchForm = false; + let current = this.linkedList.head; + let found; + let pos = 1; + while (current) { + found = current.data == this.targetValue; + current.element.transition() + .duration(1000).attr('fill', "pink"); + await new Promise(resolve => setTimeout(resolve, 1000)); + if (found) { + current.element.transition() + .duration(1000).attr('fill', "green"); + break; + } + current = current.next; + pos++; + } + if (found) { + this.result = pos; + this.showSuccessResult = true; + console.log("target found"); + } else { + this.showFailureResult = true; + } + this.targetValue = null; } }, - generateLinkedList() { - let current = this.linkedList.head; - while (current) { - this.createCircle(current.data, current.next); - current = current.next; + generateLinkedList(nums) { + for (const n of nums) { + this.appendIntoLinkedList(n); } } }, mounted() { this.createContainer(); this.linkedList = new LinkedList(); - this.linkedList.append(1); - this.linkedList.append(2); - this.linkedList.append(3); - this.linkedList.append(5); - this.linkedList.append(7); - this.generateLinkedList(); - + this.generateLinkedList([1, 2, 3]) }, } \ No newline at end of file From 15c0bac0479b403dd28ae1b1720734982432961a Mon Sep 17 00:00:00 2001 From: Bappy Date: Thu, 10 Aug 2023 20:05:03 +0600 Subject: [PATCH 04/10] AV-07: linked-list search refined --- src/algorithms/linked-list/Linked-List.vue | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/src/algorithms/linked-list/Linked-List.vue b/src/algorithms/linked-list/Linked-List.vue index 6fe0c85..50f2fb5 100644 --- a/src/algorithms/linked-list/Linked-List.vue +++ b/src/algorithms/linked-list/Linked-List.vue @@ -183,7 +183,7 @@ const arrowLength = 20; const arrowY = 100; // Line 1: Horizontal line - this.circleContainer.append('line') + const line1 = this.circleContainer.append('line') .attr('x1', arrowX - arrowLength - 20) .attr('y1', arrowY) .attr('x2', arrowX) @@ -192,7 +192,7 @@ .attr('stroke-width', 2); // Line 2: Diagonal line (left) - this.circleContainer.append('line') + const line2 = this.circleContainer.append('line') .attr('x1', arrowX - 10) .attr('y1', arrowY - 5) .attr('x2', arrowX - arrowLength + 20) @@ -201,20 +201,22 @@ .attr('stroke-width', 2); // Line 3: Diagonal line (right) - this.circleContainer.append('line') + const line3 = this.circleContainer.append('line') .attr('x1', arrowX - 10) .attr('y1', arrowY + 5) .attr('x2', arrowX - arrowLength + 20) .attr('y2', arrowY) .attr('stroke', 'black') .attr('stroke-width', 2); + + return [line1, line2, line3]; }, appendIntoLinkedList(num, pos) { if (!pos) { - const ele = this.createCircle(num); - this.createArrow((this.xAxis - this.circleRadius * 20) + 70); - this.linkedList.append(num, ele); + const circle = this.createCircle(num); + const line = this.createArrow((this.xAxis - this.circleRadius * 20) + 70); + this.linkedList.append(num, {circle: circle, lines: line}); } }, @@ -228,11 +230,15 @@ let pos = 1; while (current) { found = current.data == this.targetValue; - current.element.transition() + current.element.circle.transition() .duration(1000).attr('fill', "pink"); + await new Promise(resolve => setTimeout(resolve, 1200)); + for(const line of current.element.lines){ + line.transition().duration(300).attr('stroke', "pink"); + } await new Promise(resolve => setTimeout(resolve, 1000)); if (found) { - current.element.transition() + current.element.circle.transition() .duration(1000).attr('fill', "green"); break; } From fba09a26e003fa5edfcacdfcf8d00cb3515fd173 Mon Sep 17 00:00:00 2001 From: Bappy Date: Sun, 20 Aug 2023 01:37:28 +0600 Subject: [PATCH 05/10] AV-07: updated linked list arrow design and animation --- src/algorithms/linked-list/Linked-List.vue | 29 ++++++++++++++-------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/src/algorithms/linked-list/Linked-List.vue b/src/algorithms/linked-list/Linked-List.vue index 50f2fb5..a9dba7f 100644 --- a/src/algorithms/linked-list/Linked-List.vue +++ b/src/algorithms/linked-list/Linked-List.vue @@ -3,7 +3,7 @@

Linked List

- Search result found at: "{{ result }}" + Searched item {{ targetValue }} found at: "{{ result }}"
@@ -28,7 +28,7 @@ constructor(data) { this.data = data; this.next = null; - this.element = null; + this.element = {}; } } @@ -39,8 +39,9 @@ append(data, element) { const newNode = new Node(data); - newNode.element = element; + newNode.element.circle = element.circle; if (!this.head) { + newNode.element.lines = element.lines; this.head = newNode; return; } @@ -49,6 +50,7 @@ while (current.next) { current = current.next; } + current.element.lines = element.lines; current.next = newNode; } @@ -215,7 +217,11 @@ appendIntoLinkedList(num, pos) { if (!pos) { const circle = this.createCircle(num); - const line = this.createArrow((this.xAxis - this.circleRadius * 20) + 70); + let line; + if(this.linkedList.head){ + line = this.createArrow((this.xAxis - this.circleRadius * 40) + 70); + } + this.linkedList.append(num, {circle: circle, lines: line}); } }, @@ -231,17 +237,20 @@ while (current) { found = current.data == this.targetValue; current.element.circle.transition() - .duration(1000).attr('fill', "pink"); - await new Promise(resolve => setTimeout(resolve, 1200)); - for(const line of current.element.lines){ - line.transition().duration(300).attr('stroke', "pink"); - } - await new Promise(resolve => setTimeout(resolve, 1000)); + .duration(500).attr('fill', "pink"); + await new Promise(resolve => setTimeout(resolve, 600)); if (found) { current.element.circle.transition() .duration(1000).attr('fill', "green"); break; } + await new Promise(resolve => setTimeout(resolve, 600)); + if(current.next){ + for (const line of current.element.lines) { + line.transition().duration(300).attr('stroke', "pink"); + } + await new Promise(resolve => setTimeout(resolve, 300)); + } current = current.next; pos++; } From 0b2b8470b9870f49f5f7aafa0fec984ae386aea6 Mon Sep 17 00:00:00 2001 From: Bappy Date: Sun, 20 Aug 2023 16:30:17 +0600 Subject: [PATCH 06/10] AV-07: initially added delete operation to linked list --- src/algorithms/linked-list/Linked-List.vue | 90 +++++++++++++++++----- 1 file changed, 69 insertions(+), 21 deletions(-) diff --git a/src/algorithms/linked-list/Linked-List.vue b/src/algorithms/linked-list/Linked-List.vue index a9dba7f..8c4b28b 100644 --- a/src/algorithms/linked-list/Linked-List.vue +++ b/src/algorithms/linked-list/Linked-List.vue @@ -18,8 +18,13 @@ +
+ + +
+
@@ -39,7 +44,8 @@ append(data, element) { const newNode = new Node(data); - newNode.element.circle = element.circle; + newNode.element.circle = element.circle.circle; + newNode.element.text = element.circle.text; if (!this.head) { newNode.element.lines = element.lines; this.head = newNode; @@ -81,6 +87,7 @@ circleContainer: undefined, showInputForm: false, showSearchForm: false, + showDeleteForm: false, targetValue: null, insertedValue: null, } @@ -100,39 +107,43 @@ .duration(1000) // Animation duration in milliseconds .attr('fill', 'rgba(0, 255, 0, 0.8)'); } - }, toggleInsertForm() { this.showSuccessResult = false; this.showFailureResult = false; this.showInputForm = !this.showInputForm; - if (this.showSearchForm) { - this.showSearchForm = !this.showSearchForm; - } - + this.hideDeleteForm(); + this.hideSearchForm(); }, + toggleSearchForm() { this.showSuccessResult = false; this.showFailureResult = false; this.showSearchForm = !this.showSearchForm; - if (this.showInputForm) { - this.showInputForm = !this.showInputForm; - } + this.hideDeleteForm(); + this.hideInsertForm(); }, - insertFormSubmitAction() { - if (this.insertedValue > 0) { + toggleDeleteForm() { + this.showSuccessResult = false; + this.showFailureResult = false; + this.hideInsertForm(); + this.hideSearchForm(); + this.showDeleteForm = !this.showDeleteForm; + }, - this.appendIntoLinkedList(this.insertedValue); - this.showInputForm = false; - this.insertedValue = null; - } else { - console.error("You've added negative number"); - } + hideDeleteForm(){ + this.showDeleteForm = false; + }, + hideInsertForm(){ + this.showInputForm = false; + }, + hideSearchForm(){ + this.showSearchForm = false; }, - searchFormSubmitAction() { + insertFormSubmitAction() { if (this.insertedValue > 0) { this.appendIntoLinkedList(this.insertedValue); @@ -170,7 +181,7 @@ this.xAxis += this.circleRadius * 20; - return circle; + return {circle: circle, text: text}; // this.circleContainer.append('circle') // .attr('cx', 90) @@ -218,7 +229,7 @@ if (!pos) { const circle = this.createCircle(num); let line; - if(this.linkedList.head){ + if (this.linkedList.head) { line = this.createArrow((this.xAxis - this.circleRadius * 40) + 70); } @@ -226,6 +237,43 @@ } }, + removeItemFromLinkedList() { + let current = this.linkedList.head; + + while (current) { + if (current.data == this.targetValue) { + console.log("Item found to delete"); + const currentCircleXAxis = parseFloat( current.element.circle.attr('cx')); + const currentTextX = parseFloat( current.element.text.attr('x')); + current.element.circle.remove(); + current.element.text.remove(); + + for(const line of current.element.lines){ + line.remove(); + } + current.next?.element.circle.transition() + .duration(1000) + .attr('cx', currentCircleXAxis); + current.next?.element.text.transition() + .duration(1000) + .attr('x', currentTextX); + current.data = current.next.data; + current.element = current.next.element; + if (current.next) { + current.next = current.next.next; + } else { + current.next = null; + } + console.log() + + + break; + } + current = current.next; + } + this.targetValue = null; + }, + async searchIntoLinkedList() { this.showSuccessResult = false; this.showFailureResult = false; @@ -245,7 +293,7 @@ break; } await new Promise(resolve => setTimeout(resolve, 600)); - if(current.next){ + if (current.next) { for (const line of current.element.lines) { line.transition().duration(300).attr('stroke', "pink"); } From 63465299c017aec46fb61f025b62882212a28a09 Mon Sep 17 00:00:00 2001 From: Bappy Date: Sun, 20 Aug 2023 16:30:17 +0600 Subject: [PATCH 07/10] AV-07: initially added delete operation to linked list --- src/algorithms/linked-list/Linked-List.vue | 90 +++++++++++++++++----- 1 file changed, 69 insertions(+), 21 deletions(-) diff --git a/src/algorithms/linked-list/Linked-List.vue b/src/algorithms/linked-list/Linked-List.vue index a9dba7f..8c4b28b 100644 --- a/src/algorithms/linked-list/Linked-List.vue +++ b/src/algorithms/linked-list/Linked-List.vue @@ -18,8 +18,13 @@ +
+ + +
+ @@ -39,7 +44,8 @@ append(data, element) { const newNode = new Node(data); - newNode.element.circle = element.circle; + newNode.element.circle = element.circle.circle; + newNode.element.text = element.circle.text; if (!this.head) { newNode.element.lines = element.lines; this.head = newNode; @@ -81,6 +87,7 @@ circleContainer: undefined, showInputForm: false, showSearchForm: false, + showDeleteForm: false, targetValue: null, insertedValue: null, } @@ -100,39 +107,43 @@ .duration(1000) // Animation duration in milliseconds .attr('fill', 'rgba(0, 255, 0, 0.8)'); } - }, toggleInsertForm() { this.showSuccessResult = false; this.showFailureResult = false; this.showInputForm = !this.showInputForm; - if (this.showSearchForm) { - this.showSearchForm = !this.showSearchForm; - } - + this.hideDeleteForm(); + this.hideSearchForm(); }, + toggleSearchForm() { this.showSuccessResult = false; this.showFailureResult = false; this.showSearchForm = !this.showSearchForm; - if (this.showInputForm) { - this.showInputForm = !this.showInputForm; - } + this.hideDeleteForm(); + this.hideInsertForm(); }, - insertFormSubmitAction() { - if (this.insertedValue > 0) { + toggleDeleteForm() { + this.showSuccessResult = false; + this.showFailureResult = false; + this.hideInsertForm(); + this.hideSearchForm(); + this.showDeleteForm = !this.showDeleteForm; + }, - this.appendIntoLinkedList(this.insertedValue); - this.showInputForm = false; - this.insertedValue = null; - } else { - console.error("You've added negative number"); - } + hideDeleteForm(){ + this.showDeleteForm = false; + }, + hideInsertForm(){ + this.showInputForm = false; + }, + hideSearchForm(){ + this.showSearchForm = false; }, - searchFormSubmitAction() { + insertFormSubmitAction() { if (this.insertedValue > 0) { this.appendIntoLinkedList(this.insertedValue); @@ -170,7 +181,7 @@ this.xAxis += this.circleRadius * 20; - return circle; + return {circle: circle, text: text}; // this.circleContainer.append('circle') // .attr('cx', 90) @@ -218,7 +229,7 @@ if (!pos) { const circle = this.createCircle(num); let line; - if(this.linkedList.head){ + if (this.linkedList.head) { line = this.createArrow((this.xAxis - this.circleRadius * 40) + 70); } @@ -226,6 +237,43 @@ } }, + removeItemFromLinkedList() { + let current = this.linkedList.head; + + while (current) { + if (current.data == this.targetValue) { + console.log("Item found to delete"); + const currentCircleXAxis = parseFloat( current.element.circle.attr('cx')); + const currentTextX = parseFloat( current.element.text.attr('x')); + current.element.circle.remove(); + current.element.text.remove(); + + for(const line of current.element.lines){ + line.remove(); + } + current.next?.element.circle.transition() + .duration(1000) + .attr('cx', currentCircleXAxis); + current.next?.element.text.transition() + .duration(1000) + .attr('x', currentTextX); + current.data = current.next.data; + current.element = current.next.element; + if (current.next) { + current.next = current.next.next; + } else { + current.next = null; + } + console.log() + + + break; + } + current = current.next; + } + this.targetValue = null; + }, + async searchIntoLinkedList() { this.showSuccessResult = false; this.showFailureResult = false; @@ -245,7 +293,7 @@ break; } await new Promise(resolve => setTimeout(resolve, 600)); - if(current.next){ + if (current.next) { for (const line of current.element.lines) { line.transition().duration(300).attr('stroke', "pink"); } From 6607fb56b14b29300da94cfcbfcc5ed1f358ee4f Mon Sep 17 00:00:00 2001 From: Bappy Date: Sun, 10 Sep 2023 00:34:25 +0600 Subject: [PATCH 08/10] AV-07: Linked list updated with delete node with arrow --- src/algorithms/linked-list/Linked-List.vue | 724 +++++++++++---------- 1 file changed, 368 insertions(+), 356 deletions(-) diff --git a/src/algorithms/linked-list/Linked-List.vue b/src/algorithms/linked-list/Linked-List.vue index 669cf1a..a10f78c 100644 --- a/src/algorithms/linked-list/Linked-List.vue +++ b/src/algorithms/linked-list/Linked-List.vue @@ -1,376 +1,388 @@ \ No newline at end of file From d4dec20eaa02987be7314cfe246b92d22630ac58 Mon Sep 17 00:00:00 2001 From: Bappy Date: Sun, 10 Sep 2023 00:34:25 +0600 Subject: [PATCH 09/10] AV-07: Linked list updated with delete node with update of arrow position --- src/algorithms/linked-list/Linked-List.vue | 724 +++++++++++---------- 1 file changed, 368 insertions(+), 356 deletions(-) diff --git a/src/algorithms/linked-list/Linked-List.vue b/src/algorithms/linked-list/Linked-List.vue index 669cf1a..a10f78c 100644 --- a/src/algorithms/linked-list/Linked-List.vue +++ b/src/algorithms/linked-list/Linked-List.vue @@ -1,376 +1,388 @@ \ No newline at end of file From 935f7df233d8a98a9388d0558c4ee14eabe7d4cc Mon Sep 17 00:00:00 2001 From: Bappy Date: Mon, 11 Sep 2023 01:09:08 +0600 Subject: [PATCH 10/10] AV-07: linked list refined some code --- src/algorithms/linked-list/Linked-List.vue | 103 +++++++++++---------- 1 file changed, 56 insertions(+), 47 deletions(-) diff --git a/src/algorithms/linked-list/Linked-List.vue b/src/algorithms/linked-list/Linked-List.vue index a10f78c..c172996 100644 --- a/src/algorithms/linked-list/Linked-List.vue +++ b/src/algorithms/linked-list/Linked-List.vue @@ -63,7 +63,7 @@ class LinkedList { display() { let current = this.head; while (current) { - console.log(current.data); + console.log("data: ", current.data, " Element: ", current.element); current = current.next; } } @@ -155,7 +155,6 @@ export default { }, createCircle(num, createArrow) { - const finalRadius = 20; const circle = this.circleContainer.append('circle') @@ -182,14 +181,6 @@ export default { this.xAxis += this.circleRadius * 20; return {circle: circle, text: text}; - - // this.circleContainer.append('circle') - // .attr('cx', 90) - // .attr('cy', 100) - // .attr('r', finalRadius) - // .attr('fill', 'red'); - // - // }, createArrow(groupX) { @@ -227,9 +218,11 @@ export default { }, appendIntoLinkedList(num, pos) { + if (!pos) { const circle = this.createCircle(num); let arrow; + if (this.linkedList.head) { arrow = this.createArrow((this.xAxis - this.circleRadius * 40) + 70); } @@ -238,100 +231,115 @@ export default { } }, - - deleteNode(node, cx, x, arrowX) { - if (node) { - const currentCircleXAxis = parseFloat(node.element.circle.attr('cx')); - const currentTextX = parseFloat(node.element.text.attr('x')); - let nextArrow; - if (node.element.arrow) { - nextArrow = parseFloat(node.element.arrow.attr('transform').split('(')[1].split(',')[0]); - } - - console.log(cx, currentCircleXAxis, x, currentTextX); - node.element.circle.transition() - .duration(1000) - .attr('cx', cx); - - node.element.text.transition() - .duration(1000) - .attr('x', x); - if (node.element.arrow) { - console.log("arrowx:", nextArrow, arrowX); - node.element.arrow.attr('transform', `translate(${arrowX}, 0)`); - console.log(parseFloat(node.element.arrow.attr('transform').replace(/[^\d.-]/g, ''))); - } - this.deleteNode(node.next, currentCircleXAxis, currentTextX, nextArrow) - } - - }, - removeItemFromLinkedList() { let current = this.linkedList.head; let prev = current; while (current) { if (current.data === this.targetValue) { - const currentCircleXAxis = parseFloat(current.element.circle.attr('cx')); - const currentTextX = parseFloat(current.element.text.attr('x')); + let currentCircleXAxis = parseFloat(current.element.circle.attr('cx')); + let currentTextX = parseFloat(current.element.text.attr('x')); let currentArrowX; + if (current.element.arrow) { currentArrowX = parseFloat(current.element.arrow.attr('transform').replace(/[^\d.-]/g, '')) / 10; - } else if (prev) { + } else if (prev.element.arrow) { prev.element.arrow.remove(); + prev.element.arrow = null; } current.element.circle.remove(); current.element.text.remove(); - if (current.next) { - current.data = current.next.data; + if (current.next) { if (current.element.arrow) { - current.element.arrow.remove() + current.element.arrow.remove(); + current.element.arrow = null; + } + + if (current === this.linkedList.head) { + this.linkedList.head = current.next; + } else { + prev.next = current.next; } - current.element = current.next.element; - this.deleteNode(current.next, currentCircleXAxis, currentTextX, currentArrowX); + + current = current.next; + while (current) { + current.element.circle.transition() + .duration(1000) + .attr('cx', currentCircleXAxis); + + current.element.text.transition() + .duration(1000) + .attr('x', currentTextX); + + if (current.element.arrow) { + current.element.arrow.attr('transform', `translate(${currentArrowX}, 0)`); + } + + currentCircleXAxis = parseFloat(current.element.circle.attr('cx')); + currentTextX = parseFloat(current.element.text.attr('x')); + + if (current.element.arrow) { + currentArrowX = parseFloat(current.element.arrow.attr('transform').split('(')[1].split(',')[0]); + } + current = current.next; + } + + } else if (current === this.linkedList.head) { + this.linkedList.head = current.next; + } else if (prev) { + prev.next = null; } this.xAxis -= this.circleRadius * 20; break; } + prev = current; current = current.next; } + this.targetValue = null; }, async searchIntoLinkedList() { this.showSuccessResult = false; this.showFailureResult = false; + if (this.targetValue > 0) { this.showSearchForm = false; let current = this.linkedList.head; let found; let pos = 1; + while (current) { found = current.data === this.targetValue; current.element.circle.transition() .duration(500).attr('fill', "pink"); + await new Promise(resolve => setTimeout(resolve, 600)); + if (found) { current.element.circle.transition() .duration(1000).attr('fill', "green"); break; } + await new Promise(resolve => setTimeout(resolve, 600)); + if (current.next) { if (current.element.arrow) { current.element.arrow.selectAll('line').transition().duration(300).attr('stroke', "pink"); } await new Promise(resolve => setTimeout(resolve, 300)); } + current = current.next; pos++; } + if (found) { this.result = pos; this.showSuccessResult = true; - console.log("target found"); } else { this.showFailureResult = true; } @@ -345,6 +353,7 @@ export default { } } }, + mounted() { this.createContainer(); this.linkedList = new LinkedList();