Skip to content

Commit

Permalink
animation add
Browse files Browse the repository at this point in the history
  • Loading branch information
@yunnniverse
yunnniverse committed Dec 2, 2023
1 parent 4b54fc0 commit 360988f
Show file tree
Hide file tree
Showing 3 changed files with 123 additions and 21 deletions.
36 changes: 27 additions & 9 deletions Frontend/algoverse/src/components/Treesearch/InputForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,39 @@ const InputForm = (props) => {
const { tree } = props;
const [enabled, setEnabled] = useState(false);

const handleInput = (event) => {
const handleInput = async (event) => {
const buttonClass = event.nativeEvent.submitter.className;
event.preventDefault();
if(buttonClass.includes("add-btn")){

if (buttonClass.includes("add-btn")) {
tree.insert(event.target.input.value.toLowerCase());
}
else if(buttonClass.includes("delete-btn")){
tree.all_clear();
event.target.input.value = '';
props.update(tree.toGraph());
} else if (buttonClass.includes("delete-btn")) {
tree.delete(event.target.input.value.toLowerCase());
event.target.input.value = '';
props.update(tree.toGraph());
} else if (buttonClass.includes("select-btn")) {
tree.all_clear();
let target = event.target.input.value.toLowerCase();
let result = tree.binarySearch(target);
console.log(result);
while (result === -1) {
// Wait for 1 second before the next iteration
event.target.input.value = '';
props.update(tree.toGraph());
await new Promise(resolve => setTimeout(resolve, 500));
result = tree.binarySearch(target);
};
event.target.input.value = '';
props.update(tree.toGraph());
}

event.target.input.value = '';
props.update(tree.toGraph());

setEnabled(false);
};



const handleChange = (event) => {
event.preventDefault();
let value = event.target.value.toLowerCase();
Expand All @@ -47,6 +64,7 @@ const InputForm = (props) => {
<Col className={"col-2 center"}> */}
<input type={"submit"} className={"btn btn-primary add-btn"} value={"add"} disabled={!enabled}/>
<input type={"submit"} className={"btn btn-primary delete-btn"} value={"delete"} disabled={!enabled}/>
<input type={"submit"} className={"btn btn-primary select-btn"} value={"binary Search"} disabled={!enabled}/>
</Col>
</Row>
</Form> }
Expand Down
1 change: 1 addition & 0 deletions Frontend/algoverse/src/components/Treesearch/TreeGraph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ const TreeGraph = (props) => {
const initialTree = new BinaryTree(null);
initialNodeValues.forEach(value => initialTree.insert(value));
setTree(initialTree);
initialTree.all_clear();

// Convert the initial tree to graph format and update the representation
const initialGraph = initialTree.toGraph();
Expand Down
107 changes: 95 additions & 12 deletions Frontend/algoverse/src/library/tree/BinaryTree.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ class Node {
this.left = null;
this.right = null;
this.valid = 1; // if this node is deleted, then it will be -1.
// this.visited = false;
this.visited = false;
this.found = false;
// this.created = false;
}

Expand All @@ -27,6 +28,17 @@ class Node {
return 0;
}

all_clear() {
this.visited = false;
this.found = false;
if(this.left){
this.left.all_clear();
}
if(this.right){
this.right.all_clear();
}
}

_handleEqual(item, itemValue, thisValue) {
if (isNaN(item)) {
let index = 1;
Expand Down Expand Up @@ -76,16 +88,55 @@ class Node {
}
}

toSearchGraph(isRoot = true) { // search를 표현하기 위한 것!
let edges = this.parent ?
[
{
from: this.parent.id,
to: this.id
}
] : [];
let nodes = this.value ?
[
{
id: this.id,
label: this.value,
shape: isRoot? "box" : options.nodes.shape,
color: this.visited? "pink" :options.nodes.color
}
] : [];
if (this.left) {
let leftRes = this.left.toSearchGraph(false);
edges = [...edges, ...leftRes.edges];
nodes = [...nodes, ...leftRes.nodes];
}
if (this.right) {
let rightRes = this.right.toSearchGraph(false);
edges = [...edges, ...rightRes.edges];
nodes = [...nodes, ...rightRes.nodes];
}

return {
nodes,
edges
}
}

addLeftChild(item) {
this.visited = true;
this.left ? this.left.insert(item) : this.left = new Node(item, this);
}

addRightChild(item) {
this.visited = true;
this.right ? this.right.insert(item) : this.right = new Node(item, this);
}


insert(item) {
let itemValue = this._convert(item);
this.visted = true;

if (this.value) {
let thisValue = this._convert(this.value);
this._compareValues(item, itemValue, thisValue);
Expand Down Expand Up @@ -159,11 +210,7 @@ class Node {
}
}
return this;
}




}

_findMinNode(node) {
// Helper function to find the node with the minimum value in a subtree
Expand All @@ -174,6 +221,12 @@ class Node {
}

toGraph(isRoot = true) { // 첫 노드에서 시작! 노드 하나하나씩 표현
let color = null;
if (this.found === true){
color = "skyblue";
} else if (this.visited === true){
color = "pink";
}
let edges = this.parent ?
[
{
Expand All @@ -186,7 +239,8 @@ class Node {
{
id: this.id,
label: this.value,
shape: isRoot? "box" : options.nodes.shape
shape: isRoot? "box" : options.nodes.shape,
color: color? color : options.nodes.color
}
] : [];
if (this.left) {
Expand All @@ -203,14 +257,43 @@ class Node {
return {
nodes,
edges
}
}
}

// binarySearch(item){
// let itemValue = this._convert(item);

// }
delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}

binarySearch(item){
let itemValue = this._convert(item);
let thisValue = this._convert(this.value);

if(!this.visited) { //
this.visited = true;
return -1;
}
else {
if (thisValue > itemValue) { // to the right
console.log("to right");
if(this.left) {
return this.left.binarySearch(item);
}
else {
return 1; }
}
else if(thisValue < itemValue) { // to the left
console.log("to left");
if(this.right) {
return this.right.binarySearch(item);
} else { return 1; }
}
else if (thisValue === itemValue) {
console.log("found it");
this.found = true;
return 1;
}
}
}

}

Expand Down

0 comments on commit 360988f

Please sign in to comment.