Feature/av 07 linked list Enhancement

src/algorithms/linked-list/Linked-List.vue

@@ -0,0 +1,397 @@
+<template>
+  <div>
+    <h1>Linked List</h1>
+    <div ref="circleContainer"></div>
+    <div v-if="showSuccessResult" class="success-message">
+      Searched item {{ targetValue }} found at: "{{ result }}"
+    </div>
+
+    <div v-if="showFailureResult" class="fail-message">
+      Searched item not found!
+    </div>
+    <hr>
+    <form v-if="showInputForm" @submit.prevent="insertFormSubmitAction">
+      <input v-model="insertedValue" type="number" name="Number" placeholder="Enter Number">
+      <button type="submit">Add</button>
+    </form>
+    <form v-if="showSearchForm" @submit.prevent="searchIntoLinkedList">
+      <input v-model="targetValue" type="number" name="Number" placeholder="Enter Number">
+      <button type="submit">Search</button>
+    </form>
+    <form v-if="showDeleteForm" @submit.prevent="removeItemFromLinkedList">
+      <input v-model="targetValue" type="number" name="Number" placeholder="Enter Number">
+      <button type="submit">Delete</button>
+    </form>
+    <button @click="toggleSearchForm">Search</button>
+    <button @click="toggleInsertForm">Insert</button>
+    <button @click="toggleDeleteForm">Delete Node</button>
+  </div>
+</template>
+
+<script>
+class Node {
+  constructor(data) {
+    this.data = data;
+    this.next = null;
+    this.element = {};
+  }
+}
+
+class LinkedList {
+  constructor() {
+    this.head = null;
+  }
+
+  append(data, element) {
+    const newNode = new Node(data);
+    newNode.element.circle = element.circle.circle;
+    newNode.element.text = element.circle.text;
+    if (!this.head) {
+      newNode.element.arrow = element.arrow;
+      this.head = newNode;
+      return;
+    }
+
+    let current = this.head;
+    while (current.next) {
+      current = current.next;
+    }
+    current.element.arrow = element.arrow;
+    current.next = newNode;
+  }
+
+  display() {
+    let current = this.head;
+    while (current) {
+      console.log("data: ", current.data, " Element: ", current.element);
+      current = current.next;
+    }
+  }
+}
+
+
+import * as d3 from 'd3';
+
+export default {
+  name: "Linked-List",
+  data() {
+    return {
+      linkedList: undefined,
+      result: "",
+      showSuccessResult: false,
+      showFailureResult: false,
+      xAxis: 20,
+      arrowXAxis: 0,
+      circleRadius: 5,
+      elements: [],
+      circleContainer: undefined,
+      showInputForm: false,
+      showSearchForm: false,
+      showDeleteForm: false,
+      targetValue: null,
+      insertedValue: null,
+    }
+  },
+
+  methods: {
+    createContainer() {
+      this.circleContainer = d3.select(this.$refs.circleContainer)
+          .append('svg')
+          .attr('width', 500)
+          .attr('height', 200);
+    },
+
+    change() {
+      for (const element of this.elements) {
+        element.circle.transition()
+            .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;
+      this.hideDeleteForm();
+      this.hideSearchForm();
+    },
+
+    toggleSearchForm() {
+      this.showSuccessResult = false;
+      this.showFailureResult = false;
+      this.showSearchForm = !this.showSearchForm;
+      this.hideDeleteForm();
+      this.hideInsertForm();
+    },
+
+    toggleDeleteForm() {
+      this.showSuccessResult = false;
+      this.showFailureResult = false;
+      this.hideInsertForm();
+      this.hideSearchForm();
+      this.showDeleteForm = !this.showDeleteForm;
+    },
+
+    hideDeleteForm() {
+      this.showDeleteForm = false;
+    },
+    hideInsertForm() {
+      this.showInputForm = false;
+    },
+    hideSearchForm() {
+      this.showSearchForm = false;
+    },
+
+    insertFormSubmitAction() {
+      if (this.insertedValue > 0) {
+
+        this.appendIntoLinkedList(this.insertedValue);
+        this.showInputForm = false;
+        this.insertedValue = null;
+      } else {
+        console.error("You've added negative number");
+      }
+    },
+
+    createCircle(num, createArrow) {
+      const finalRadius = 20;
+
+      const circle = this.circleContainer.append('circle')
+          .attr('cx', this.xAxis)
+          .attr('cy', 100)
+          .attr('r', this.circleRadius)
+          .attr('fill', 'rgba(0, 0, 255, 0.5)')
+          .attr('opacity', .5);
+      circle.transition()
+          .duration(1000) // Animation duration in milliseconds
+          .attr('r', finalRadius);
+
+      const text = this.circleContainer.append('text')
+          .attr('x', this.xAxis)
+          .attr('y', 100)
+          .attr('dy', '.4em') // Vertical alignment adjustment
+          .attr('text-anchor', 'middle') // Horizontal alignment
+          .text(num);
+      if (createArrow) {
+        this.createArrow(this.xAxis + 70);
+      }
+      this.elements.push({circle: circle, text: text});
+
+      this.xAxis += this.circleRadius * 20;
+
+      return {circle: circle, text: text};
+    },
+
+    createArrow(groupX) {
+      const arrowLength = 20;
+      const arrowY = 100;
+
+      const linesGroup = this.circleContainer.append('g')
+          .attr('transform', `translate(${groupX}, 0)`); // Set the group's x position
+
+      linesGroup.append('line')
+          .attr('x1', -arrowLength - 20) // Relative to the group's x position
+          .attr('y1', arrowY)
+          .attr('x2', 0) // Relative to the group's x position
+          .attr('y2', arrowY)
+          .attr('stroke', 'black')
+          .attr('stroke-width', 2);
+
+      linesGroup.append('line')
+          .attr('x1', -10) // Relative to the group's x position
+          .attr('y1', arrowY - 5)
+          .attr('x2', -arrowLength + 20) // Relative to the group's x position
+          .attr('y2', arrowY)
+          .attr('stroke', 'black')
+          .attr('stroke-width', 2);
+
+      linesGroup.append('line')
+          .attr('x1', -10) // Relative to the group's x position
+          .attr('y1', arrowY + 5)
+          .attr('x2', -arrowLength + 20) // Relative to the group's x position
+          .attr('y2', arrowY)
+          .attr('stroke', 'black')
+          .attr('stroke-width', 2);
+
+      return linesGroup;
+    },
+
+    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);
+        }
+
+        this.linkedList.append(num, {circle: circle, arrow: arrow});
+      }
+    },
+
+    removeItemFromLinkedList() {
+      let current = this.linkedList.head;
+      let prev = current;
+      while (current) {
+
+        if (current.data === this.targetValue) {
+          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.element.arrow) {
+            prev.element.arrow.remove();
+            prev.element.arrow = null;
+          }
+          current.element.circle.remove();
+          current.element.text.remove();
+
+          if (current.next) {
+            if (current.element.arrow) {
+              current.element.arrow.remove();
+              current.element.arrow = null;
+            }
+
+            if (current === this.linkedList.head) {
+              this.linkedList.head = current.next;
+            } else {
+              prev.next = current.next;
+            }
+
+            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;
+        } else {
+          this.showFailureResult = true;
+        }
+        this.targetValue = null;
+      }
+    },
+
+    generateLinkedList(nums) {
+      for (const n of nums) {
+        this.appendIntoLinkedList(n);
+      }
+    }
+  },
+
+  mounted() {
+    this.createContainer();
+    this.linkedList = new LinkedList();
+    this.generateLinkedList([1, 2, 3])
+  },
+}
+</script>
+
+<style scoped>
+.success-message {
+  background-color: #4caf50;
+  color: white;
+  padding: 10px;
+  border-radius: 5px;
+  margin-top: 10px;
+}
+
+.fail-message {
+  background-color: #af3e2e;
+  color: white;
+  padding: 10px;
+  border-radius: 5px;
+  margin-top: 10px;
+}
+
+button {
+  background-color: #3c3f41;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  margin: 5px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+input {
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+</style>