384 lines
7.7 KiB
JavaScript
384 lines
7.7 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 list.
|
|
var rect_list = new Konva.Rect({
|
|
x: 150,
|
|
y: 280,
|
|
id:"code_rec1",
|
|
stroke: '#555',
|
|
strokeWidth: 5,
|
|
fill: '#ddd',
|
|
width: 1300,
|
|
height: 520,
|
|
shadowColor: 'black',
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 10,
|
|
shadowOffsetY: 10,
|
|
shadowOpacity: 0.2,
|
|
cornerRadius: 10,
|
|
});
|
|
layer.add(rect_list);
|
|
|
|
// Create a function to draw list nodes
|
|
function drawListNode(x, y, label, id){
|
|
// the rectangle represents list nodes.
|
|
// for the value.
|
|
let rect1 = new Konva.Rect({
|
|
x: x,
|
|
y: y,
|
|
id:"list_node_rec_" + id,
|
|
stroke: '#555',
|
|
strokeWidth: 5,
|
|
fill: '#ddd',
|
|
width: 100,
|
|
height: 50,
|
|
});
|
|
layer.add(rect1);
|
|
|
|
// for the next pointer.
|
|
let rect2 = new Konva.Rect({
|
|
x: x,
|
|
y: y+50,
|
|
id:"next_rec_" + id,
|
|
stroke: '#555',
|
|
strokeWidth: 5,
|
|
fill: '#ddd',
|
|
width: 100,
|
|
height: 50,
|
|
});
|
|
layer.add(rect2);
|
|
|
|
// for the prev pointer.
|
|
let rect3 = new Konva.Rect({
|
|
x: x,
|
|
y: y+100,
|
|
id:"prev_rec_" + id,
|
|
stroke: '#555',
|
|
strokeWidth: 5,
|
|
fill: '#ddd',
|
|
width: 100,
|
|
height: 50,
|
|
});
|
|
layer.add(rect3);
|
|
|
|
// value
|
|
var text = new Konva.Text({
|
|
x: x + 45,
|
|
y: y + 20,
|
|
text: label,
|
|
id: "node_value_" + id,
|
|
fontSize: 20,
|
|
fontFamily: 'Calibri',
|
|
fill: 'black'
|
|
});
|
|
layer.add(text);
|
|
|
|
// the text "next"
|
|
var text_next = new Konva.Text({
|
|
x: x + 30,
|
|
y: y + 70,
|
|
text: "next",
|
|
id: "node_next_" + id,
|
|
fontSize: 20,
|
|
fontFamily: 'Calibri',
|
|
fill: 'black'
|
|
});
|
|
layer.add(text_next);
|
|
|
|
// the text "prev"
|
|
var text_prev = new Konva.Text({
|
|
x: x + 35,
|
|
y: y + 120,
|
|
text: "prev",
|
|
id: "node_prev_" + id,
|
|
fontSize: 20,
|
|
fontFamily: 'Calibri',
|
|
fill: 'black'
|
|
});
|
|
layer.add(text_prev);
|
|
|
|
var arrow_next = new Konva.Arrow({
|
|
points: [x+65, y+80, x+120, y+85, x+250, y],
|
|
tension: 0.5,
|
|
pointerLength: 10,
|
|
pointerWidth: 10,
|
|
id: "arrow_next_" + id,
|
|
fill: 'green',
|
|
stroke: 'green',
|
|
strokeWidth: 5,
|
|
});
|
|
layer.add(arrow_next);
|
|
|
|
var arrow_prev = new Konva.Arrow({
|
|
points: [x+33, y+130, x-20, y+200, x-300, y+180, x-250, y],
|
|
tension: 0.5,
|
|
pointerLength: 10,
|
|
pointerWidth: 10,
|
|
id: "arrow_prev_" + id,
|
|
fill: 'orange',
|
|
stroke: 'orange',
|
|
strokeWidth: 5,
|
|
});
|
|
layer.add(arrow_prev);
|
|
}
|
|
|
|
drawListNode(300, 460, '13', 1);
|
|
drawListNode(550, 460, '1', 2);
|
|
drawListNode(800, 460, '3', 3);
|
|
drawListNode(1050, 460, '9', 4);
|
|
var targetPts = [1050+65, 539, 1050+100, 542, 1552, 462];
|
|
stage.find('#arrow_next_4').points(targetPts);
|
|
targetPts = [333, 590, 220, 550, 260, 400, 1552, 462];
|
|
stage.find('#arrow_prev_1').points(targetPts);
|
|
//drawListNode(1300, 460, '9', 4);
|
|
|
|
var text_null = new Konva.Text({
|
|
x: 1555,
|
|
y: 460,
|
|
text: "NULL",
|
|
id: "node_text_null",
|
|
fontSize: 20,
|
|
fontFamily: 'Calibri',
|
|
fill: 'black'
|
|
});
|
|
layer.add(text_null);
|
|
|
|
let rect_stack = new Konva.Rect({
|
|
x: 1500,
|
|
y: 50,
|
|
id:"rec_p",
|
|
stroke: '#555',
|
|
strokeWidth: 5,
|
|
fill: '#ddd',
|
|
width: 100,
|
|
height: 250,
|
|
});
|
|
layer.add(rect_stack);
|
|
|
|
let rect_p = new Konva.Rect({
|
|
x: 1500,
|
|
y: 100,
|
|
id:"rec_p",
|
|
stroke: '#555',
|
|
strokeWidth: 5,
|
|
fill: '#ddd',
|
|
width: 100,
|
|
height: 50,
|
|
});
|
|
|
|
var text_p = new Konva.Text({
|
|
x: 1545,
|
|
y: 110,
|
|
text: "p",
|
|
id: 'text_p',
|
|
fontSize: 26,
|
|
fontFamily: 'Calibri',
|
|
fill: '#17202a'
|
|
});
|
|
|
|
var arrow_p = new Konva.Arrow({
|
|
points: [1542, 123, 550, 455],
|
|
tension: 0.5,
|
|
pointerLength: 10,
|
|
pointerWidth: 10,
|
|
id: 'arrow_p',
|
|
fill: 'yellow',
|
|
stroke: 'yellow',
|
|
strokeWidth: 5,
|
|
});
|
|
layer.add(rect_p);
|
|
layer.add(text_p);
|
|
layer.add(arrow_p);
|
|
|
|
// the code rectangle.
|
|
var rect_code = new Konva.Rect({
|
|
x: 150,
|
|
y: 80,
|
|
id:"rec_code",
|
|
stroke: '#555',
|
|
strokeWidth: 5,
|
|
fill: '#ddd',
|
|
width: 750,
|
|
height: 100,
|
|
shadowColor: 'black',
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 10,
|
|
shadowOffsetY: 10,
|
|
shadowOpacity: 0.2,
|
|
cornerRadius: 10,
|
|
});
|
|
layer.add(rect_code);
|
|
|
|
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: 750,
|
|
padding: 20,
|
|
});
|
|
}
|
|
|
|
var code_list=[
|
|
"0. p->next->prev = p->prev;",
|
|
"1. p->prev->next = p->next;",
|
|
"2. delete p;",
|
|
];
|
|
|
|
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(160,80+(i*20),code_list[i],i+1+100);
|
|
layer.add(t);
|
|
}
|
|
|
|
// draw the image
|
|
layer.draw();
|
|
stage.add(layer);
|
|
|
|
function hide_next() {
|
|
stage.find('#arrow_next_1').hide();
|
|
stage.find('#arrow_next_2').hide();
|
|
stage.find('#arrow_next_3').hide();
|
|
stage.find('#arrow_next_4').hide();
|
|
stage.find('#arrow_next_5').hide();
|
|
layer.draw();
|
|
}
|
|
|
|
function show_next() {
|
|
stage.find('#arrow_next_1').show();
|
|
stage.find('#arrow_next_2').show();
|
|
stage.find('#arrow_next_3').show();
|
|
stage.find('#arrow_next_4').show();
|
|
stage.find('#arrow_next_5').show();
|
|
layer.draw();
|
|
}
|
|
|
|
function hide_prev() {
|
|
stage.find('#arrow_prev_1').hide();
|
|
stage.find('#arrow_prev_2').hide();
|
|
stage.find('#arrow_prev_3').hide();
|
|
stage.find('#arrow_prev_4').hide();
|
|
stage.find('#arrow_prev_5').hide();
|
|
layer.draw();
|
|
}
|
|
|
|
function show_prev() {
|
|
stage.find('#arrow_prev_1').show();
|
|
stage.find('#arrow_prev_2').show();
|
|
stage.find('#arrow_prev_3').show();
|
|
stage.find('#arrow_prev_4').show();
|
|
stage.find('#arrow_prev_5').show();
|
|
layer.draw();
|
|
}
|
|
|
|
var pc2=1;
|
|
// remove 1 from this list.
|
|
function list_remove_nextstep() {
|
|
if(pc2 == 1){
|
|
makeBold_list(1);
|
|
targetPts = [835, 590, 635, 670, 200, 690, 295, 460];
|
|
stage.find('#arrow_prev_3').points(targetPts);
|
|
layer.draw();
|
|
pc2=pc2+1;
|
|
}else if(pc2 == 2){
|
|
makeBold_list(2);
|
|
targetPts = [367, 540, 500, 420, 800, 460];
|
|
stage.find('#arrow_next_1').points(targetPts);
|
|
layer.draw();
|
|
pc2=pc2+1;
|
|
}else if(pc2 == 3){
|
|
makeBold_list(3);
|
|
var shape = stage.find('#list_node_rec_2');
|
|
shape.to({
|
|
opacity: 0,
|
|
duration: 2,
|
|
});
|
|
shape = stage.find('#next_rec_2');
|
|
shape.to({
|
|
opacity: 0,
|
|
duration: 2,
|
|
});
|
|
shape = stage.find('#prev_rec_2');
|
|
shape.to({
|
|
opacity: 0,
|
|
duration: 2,
|
|
});
|
|
shape = stage.find('#node_value_2');
|
|
shape.to({
|
|
opacity: 0,
|
|
duration: 2,
|
|
});
|
|
shape = stage.find('#node_next_2');
|
|
shape.to({
|
|
opacity: 0,
|
|
duration: 2,
|
|
});
|
|
shape = stage.find('#node_prev_2');
|
|
shape.to({
|
|
opacity: 0,
|
|
duration: 2,
|
|
});
|
|
shape = stage.find('#arrow_prev_2');
|
|
shape.to({
|
|
opacity: 0,
|
|
duration: 2,
|
|
});
|
|
shape = stage.find('#arrow_next_2');
|
|
shape.to({
|
|
opacity: 0,
|
|
duration: 2,
|
|
});
|
|
layer.draw();
|
|
pc2=pc2+1;
|
|
}else if(pc2 == 4){
|
|
makeBold_list(-1);
|
|
shape = stage.find('#arrow_p');
|
|
shape.to({
|
|
opacity: 0,
|
|
duration: 2,
|
|
});
|
|
shape = stage.find('#text_p');
|
|
shape.to({
|
|
opacity: 0,
|
|
duration: 2,
|
|
});
|
|
layer.draw();
|
|
pc2=pc2+1;
|
|
}else if(pc2 == 5){
|
|
alert("End of animation! Refresh the page if you want to re-run the animation.");
|
|
layer.draw();
|
|
pc2=pc2+1;
|
|
}
|
|
}
|
|
|
|
/* vim: set ts=4: */
|