484 lines
10 KiB
JavaScript
484 lines
10 KiB
JavaScript
// Author: Jidong Xiao
|
|
// first we need to create a stage
|
|
var stage = new Konva.Stage({
|
|
container: 'container', // id of container <div>
|
|
width: 2000,
|
|
height: 1000
|
|
});
|
|
|
|
// then create layer
|
|
var layer = new Konva.Layer();
|
|
|
|
// add the layer to the stage
|
|
stage.add(layer);
|
|
|
|
// the rectangle which contains the stack nodes.
|
|
var rect2 = new Konva.Rect({
|
|
x: 870,
|
|
y: 420,
|
|
id:"code_rec1",
|
|
stroke: '#555',
|
|
strokeWidth: 5,
|
|
fill: '#ddd',
|
|
width: 100,
|
|
height: 310,
|
|
shadowColor: 'black',
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 10,
|
|
shadowOffsetY: 10,
|
|
shadowOpacity: 0.2,
|
|
cornerRadius: 10,
|
|
});
|
|
layer.add(rect2);
|
|
|
|
// the rectangle which contains the list.
|
|
var rect3 = new Konva.Rect({
|
|
x: 1050,
|
|
y: 420,
|
|
id:"code_rec1",
|
|
stroke: '#555',
|
|
strokeWidth: 5,
|
|
fill: '#ddd',
|
|
width: 500,
|
|
height: 310,
|
|
shadowColor: 'black',
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 10,
|
|
shadowOffsetY: 10,
|
|
shadowOpacity: 0.2,
|
|
cornerRadius: 10,
|
|
});
|
|
layer.add(rect3);
|
|
|
|
// create a function to draw stack nodes
|
|
function drawStackNode(x, y, label, id){
|
|
// the rectangle represents list nodes.
|
|
let rect1 = new Konva.Rect({
|
|
x: x,
|
|
y: y,
|
|
id:"node_rec_" + id,
|
|
stroke: '#555',
|
|
strokeWidth: 5,
|
|
fill: '#ddd',
|
|
width: 100,
|
|
height: 50,
|
|
shadowColor: 'black',
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 10,
|
|
shadowOffsetY: 10,
|
|
shadowOpacity: 0.2,
|
|
cornerRadius: 10,
|
|
});
|
|
layer.add(rect1);
|
|
|
|
// name of the pointer
|
|
var text1 = new Konva.Text({
|
|
x: x - 50,
|
|
y: y + 20,
|
|
text: label,
|
|
id: "node_index_" + id,
|
|
fontSize: 20,
|
|
fontFamily: 'Calibri',
|
|
fill: 'black'
|
|
});
|
|
layer.add(text1);
|
|
}
|
|
|
|
// create a function to draw list nodes
|
|
function drawListNode(x, y, label, id){
|
|
// the rectangle represents list nodes.
|
|
let rect1 = new Konva.Rect({
|
|
x: x,
|
|
y: y,
|
|
id:"list_node_rec_" + id,
|
|
stroke: '#555',
|
|
strokeWidth: 5,
|
|
fill: '#ddd',
|
|
width: 40,
|
|
height: 50,
|
|
});
|
|
layer.add(rect1);
|
|
|
|
let rect2 = new Konva.Rect({
|
|
x: x + 40,
|
|
y: y,
|
|
id:"list_node_pointer_rec_" + id,
|
|
stroke: '#555',
|
|
strokeWidth: 5,
|
|
fill: '#ddd',
|
|
width: 80,
|
|
height: 50,
|
|
});
|
|
layer.add(rect2);
|
|
|
|
var text = new Konva.Text({
|
|
x: x + 15,
|
|
y: y + 20,
|
|
text: label,
|
|
id: "list_node_text_" + id,
|
|
fontSize: 20,
|
|
fontFamily: 'Calibri',
|
|
fill: 'black'
|
|
});
|
|
layer.add(text);
|
|
|
|
var arrow = new Konva.Arrow({
|
|
points: [x+80, y+25, x+150, y+25],
|
|
tension: 0.5,
|
|
pointerLength: 10,
|
|
pointerWidth: 10,
|
|
id: "list_arrow_" + id,
|
|
fill: 'green',
|
|
stroke: 'green',
|
|
strokeWidth: 5,
|
|
visible: false,
|
|
});
|
|
layer.add(arrow);
|
|
}
|
|
|
|
var text_null = new Konva.Text({
|
|
x: 1605,
|
|
y: 475,
|
|
text: "NULL",
|
|
id: "node_text_null",
|
|
fontSize: 20,
|
|
fontFamily: 'Calibri',
|
|
fill: 'black'
|
|
});
|
|
layer.add(text_null);
|
|
|
|
var text_stack = new Konva.Text({
|
|
x: 895,
|
|
y: 380,
|
|
text: "Stack",
|
|
id: "node_text_stack",
|
|
fontSize: 20,
|
|
fontFamily: 'Calibri',
|
|
fill: 'black'
|
|
});
|
|
layer.add(text_stack);
|
|
|
|
var text_heap = new Konva.Text({
|
|
x: 1255,
|
|
y: 380,
|
|
text: "Heap",
|
|
id: "node_text_heap",
|
|
fontSize: 20,
|
|
fontFamily: 'Calibri',
|
|
fill: 'black'
|
|
});
|
|
layer.add(text_heap);
|
|
|
|
var rect_console = new Konva.Rect({
|
|
x: 150,
|
|
y: 400,
|
|
id:"console_rect",
|
|
stroke: '#555',
|
|
strokeWidth: 5,
|
|
fill: '#ddd',
|
|
width: 400,
|
|
height: 200,
|
|
shadowColor: 'black',
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 10,
|
|
shadowOffsetY: 10,
|
|
shadowOpacity: 0.2,
|
|
cornerRadius: 10,
|
|
});
|
|
layer.add(rect_console);
|
|
|
|
var consoleLabel = new Konva.Text({
|
|
x: 280,
|
|
y: 635,
|
|
id:"console_label",
|
|
text: "Console",
|
|
fontSize: 28,
|
|
fontFamily: 'Calibri',
|
|
fill: '#000000',
|
|
});
|
|
|
|
var consoleText = new Konva.Text({
|
|
x: 140,
|
|
y: 400,
|
|
id:"console_text",
|
|
text: "",
|
|
fontSize: 28,
|
|
fontFamily: 'Calibri',
|
|
fill: '#581845',
|
|
});
|
|
layer.add(consoleLabel);
|
|
layer.add(consoleText);
|
|
|
|
var message=["$",
|
|
"",
|
|
"",
|
|
"",
|
|
""];
|
|
|
|
function updateMessage(msg,i) {
|
|
stage.find('#text_msg'+i).text(msg);
|
|
}
|
|
|
|
function makeText(x,y,str,id) {
|
|
let text = new Konva.Text({
|
|
x: x,
|
|
y: y,
|
|
text: str,
|
|
id: 'text_'+id,
|
|
fontSize: 18,
|
|
fontFamily: 'Calibri',
|
|
fill: '#000000',
|
|
width: 400,
|
|
padding: 20,
|
|
// align: 'center',
|
|
});
|
|
layer.add(text);
|
|
}
|
|
|
|
// draw that $ sign, which is a command line prompt.
|
|
makeText(155,420,message[0],'msg0');
|
|
|
|
var arrow_p = new Konva.Arrow({
|
|
points: [1100, 605, 1100, 535],
|
|
tension: 0.5,
|
|
pointerLength: 10,
|
|
pointerWidth: 10,
|
|
id: 'arrow_p',
|
|
fill: 'yellow',
|
|
stroke: 'yellow',
|
|
strokeWidth: 5,
|
|
});
|
|
|
|
// the node code rectangle.
|
|
var rect1 = new Konva.Rect({
|
|
x: 150,
|
|
y: 30,
|
|
id:"code_rec1",
|
|
stroke: '#555',
|
|
strokeWidth: 5,
|
|
fill: '#ddd',
|
|
width: 400,
|
|
height: 160,
|
|
shadowColor: 'black',
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 10,
|
|
shadowOffsetY: 10,
|
|
shadowOpacity: 0.2,
|
|
cornerRadius: 10,
|
|
});
|
|
|
|
var nodeLabel = new Konva.Text({
|
|
x: 280,
|
|
y: 235,
|
|
id:"node_label",
|
|
text: "Node Definition",
|
|
fontSize: 28,
|
|
fontFamily: 'Calibri',
|
|
fill: '#000000',
|
|
});
|
|
|
|
layer.add(nodeLabel);
|
|
layer.add(rect1);
|
|
|
|
// the main code rectangle.
|
|
var rect_list = new Konva.Rect({
|
|
x: 850,
|
|
y: 30,
|
|
id:"code_rec_list",
|
|
stroke: '#555',
|
|
strokeWidth: 5,
|
|
fill: '#ddd',
|
|
width: 650,
|
|
height: 300,
|
|
shadowColor: 'black',
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 10,
|
|
shadowOffsetY: 10,
|
|
shadowOpacity: 0.2,
|
|
cornerRadius: 10,
|
|
});
|
|
layer.add(rect_list);
|
|
|
|
function makeCode(x,y,str,id) {
|
|
return new Konva.Text({
|
|
x: x,
|
|
y: y,
|
|
text: str,
|
|
id: 'line'+id,
|
|
fontSize: 18,
|
|
fontFamily: 'Calibri',
|
|
fill: '#000000',
|
|
width: 650,
|
|
padding: 20,
|
|
});
|
|
}
|
|
|
|
var code=[
|
|
"0. template <class T>",
|
|
"1. class Node {",
|
|
"2. public:",
|
|
"3. \t\t\t T value;",
|
|
"4. \t\t\t Node* next;",
|
|
"5. }",
|
|
];
|
|
|
|
// write the code fragment into the code box.
|
|
for (let i=0;i<code.length;i++){
|
|
// the array starts from index 0, but we want ids to be counted from index 1.
|
|
let t=makeCode(160,30+(i*20),code[i],i+1);
|
|
layer.add(t);
|
|
}
|
|
|
|
var code_list=[
|
|
"0. int main() {",
|
|
"1. \t\t\t Node<int>* head;",
|
|
"2. \t\t\t head = new Node<int>;",
|
|
"3. \t\t\t head->value = 6;",
|
|
"4. \t\t\t head->next = NULL;",
|
|
"5. \t\t\t Node<int>* q = new Node<int>;",
|
|
"6. \t\t\t q->value = 8;",
|
|
"7. \t\t\t q->next = NULL;",
|
|
"8. \t\t\t head->next = q;",
|
|
"9. \t\t\t cout << \"1st value: \" << head->value << endl;",
|
|
"10. \t\t\tcout << \"2nd value: \" << head->next->value << endl;",
|
|
"11. }",
|
|
];
|
|
|
|
function makeBold_list(id){
|
|
for(let i=1; i<=code_list.length; i++){
|
|
if(i!=id){
|
|
// regarding the parentheses, we must add the two numbers first.
|
|
stage.find('#line'+(i+100)).fontStyle('normal');
|
|
}else{
|
|
stage.find('#line'+(i+100)).fontStyle('bold');
|
|
}
|
|
}
|
|
}
|
|
|
|
// write the code fragment into the code box.
|
|
for (let i=0;i<code_list.length;i++){
|
|
// the array starts from index 0, but we want ids to be counted from index 1.
|
|
// here we add 100 so as to differentiate from the code array.
|
|
let t=makeCode(860,30+(i*20),code_list[i],i+1+100);
|
|
layer.add(t);
|
|
}
|
|
|
|
// draw the image
|
|
layer.draw();
|
|
stage.add(layer);
|
|
|
|
var arrow1 = new Konva.Arrow({
|
|
points: [910, 535, 1030, 485, 1075, 485],
|
|
tension: 0.5,
|
|
pointerLength: 10,
|
|
pointerWidth: 10,
|
|
id: "arrow1",
|
|
fill: 'green',
|
|
stroke: 'green',
|
|
strokeWidth: 5,
|
|
});
|
|
|
|
var arrow2 = new Konva.Arrow({
|
|
points: [910, 585, 1030, 635, 1235, 585],
|
|
tension: 0.5,
|
|
pointerLength: 10,
|
|
pointerWidth: 10,
|
|
id: "arrow2",
|
|
fill: 'green',
|
|
stroke: 'green',
|
|
strokeWidth: 5,
|
|
});
|
|
|
|
layer.draw();
|
|
|
|
var targetPts = [1160, 485, 1200, 435, 1600, 485];
|
|
// create the animation
|
|
var tween = new Konva.Tween({
|
|
node: arrow2,
|
|
points: targetPts,
|
|
duration: 2, // animation duration in seconds
|
|
easing: Konva.Easings.Linear
|
|
});
|
|
|
|
|
|
var pc=1;
|
|
// creating the list.
|
|
function nextstep() {
|
|
if(pc == 1){
|
|
makeBold_list(pc);
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 2){
|
|
makeBold_list(pc);
|
|
drawStackNode(870, 500, 'head', 1);
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 3){
|
|
makeBold_list(pc);
|
|
drawListNode(1080, 460, '?', 1);
|
|
layer.add(arrow1);
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 4){
|
|
makeBold_list(pc);
|
|
stage.find('#list_node_text_1').text('6');
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 5){
|
|
makeBold_list(pc);
|
|
stage.find('#list_arrow_1').points(targetPts);
|
|
stage.find('#list_arrow_1').visible('true');
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 6){
|
|
makeBold_list(pc);
|
|
drawStackNode(870, 550, 'q', 2);
|
|
drawListNode(1240, 560, '?', 2);
|
|
layer.add(arrow2);
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 7){
|
|
makeBold_list(pc);
|
|
stage.find('#list_node_text_2').text('8');
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 8){
|
|
makeBold_list(pc);
|
|
targetPts = [1310, 585, 1350, 600, 1600, 485];
|
|
stage.find('#list_arrow_2').points(targetPts);
|
|
stage.find('#list_arrow_2').visible('true');
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 9){
|
|
makeBold_list(pc);
|
|
targetPts = [1160, 485, 1200, 555, 1240, 585];
|
|
stage.find('#list_arrow_1').points(targetPts);
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 10){
|
|
makeBold_list(pc);
|
|
updateMessage("$ 1st value: 6",0);
|
|
makeText(155,440,message[1],'msg1');
|
|
updateMessage("$",1);
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 11){
|
|
makeBold_list(pc);
|
|
updateMessage("$ 2nd value: 8",1);
|
|
makeText(155,460,message[2],'msg2');
|
|
updateMessage("$",2);
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 12){
|
|
makeBold_list(pc);
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 13){
|
|
alert("End of animation! Refresh the page if you want to re-run the animation.");
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}
|
|
}
|
|
|
|
/* vim: set ts=4: */
|