Fchart E

</div>
<script>
var flowInfo = {key_list: [], block: {}, max_height: 0, max_width: 0, color: {}, color_cnt: 0};
document.querySelectorAll(".block").forEach(function(e) {
var key = e.getAttribute("id");
flowInfo.key_list.push(key);
var vec = e.getAttribute("data-vector");
if(vec.toLowerCase() == "none") {
vec = [];
}else {
vec = vec.split(/ |\,|\:|\;/).filter(function(r) {
return r;
});
}
flowInfo.block[key] = {};
flowInfo.block[key].for = vec;
flowInfo.block[key].height = e.scrollHeight;
if(flowInfo.max_height < e.scrollHeight) {
flowInfo.max_height = e.scrollHeight;
}
flowInfo.block[key].width = e.scrollWidth;
if(flowInfo.max_width < e.scrollWidth) {
flowInfo.max_width = e.scrollWidth;
}
});

flowInfo.genColor = function() {
flowInfo.color_cnt++;
switch(flowInfo.color_cnt % 3) {
case 0:
return "rgb(" + Math.random() * 200 + "," + Math.random() * 100 + "," + Math.random() * 200 + ")";
break;
case 1:
return "rgb(" + Math.random() * 100 + "," + Math.random() * 200 + "," + Math.random() * 200 + ")";
break;
case 2:
return "rgb(" + Math.random() * 200 + "," + Math.random() * 200 + "," + Math.random() * 100 + ")";
break;
}
}

for(k of flowInfo.key_list) {
var b = flowInfo.block[k];
var e = document.getElementById(k);
e.style.width = b.width * 0.8 + "px";
e.style.display = "block";
e.style.paddingLeft = b.width * 0.1 + "px";
e.style.paddingRight = b.width * 0.1 + "px";
flowInfo.color[k] = flowInfo.genColor();
}
flowInfo.canvas = document.createElement("canvas");
document.body.appendChild(flowInfo.canvas);

flowInfo.draw = function() {
if(flowInfo.canvas.width !== window.outerWidth) {
for(k of flowInfo.key_list) {
var e = document.getElementById(k);
var pos = e.getBoundingClientRect();
flowInfo.block[k].x = window.pageXOffset + pos.left;
flowInfo.block[k].y = window.pageYOffset + pos.top;
}

var bs = document.querySelectorAll(".block");
var last_key = bs[bs.length - 1].getAttribute("id");

flowInfo.canvas.height = flowInfo.block[last_key].y + flowInfo.block[last_key].height;
flowInfo.canvas.width = window.outerWidth;

flowInfo.ctx = flowInfo.canvas.getContext("2d");

flowInfo.ctx.clearRect(0, 0, flowInfo.canvas.width, flowInfo.canvas.height);
var dec = 0.7;
for(var k of flowInfo.key_list) {
var tgt = flowInfo.block[k].for.map(function(r) {
return flowInfo.block[r];
});

for(var i = 0; i < tgt.length; i++) {
var startCenter = {x: flowInfo.block[k].x + flowInfo.block[k].width / 2, y: flowInfo.block[k].y + flowInfo.block[k].height / (tgt.length * 2) * (tgt.length * 2 - tgt.length + i)};
var defX = (flowInfo.canvas.width - flowInfo.block[k].width) / 4 * (0.7 ** i) * dec;
var endCenter = {x: tgt[i].x + tgt[i].width / 2, y: tgt[i].y + tgt[i].height / (tgt.length * 2) * (tgt.length - i)};

flowInfo.ctx.strokeStyle = flowInfo.color[k];

flowInfo.ctx.beginPath();
flowInfo.ctx.moveTo(startCenter.x, startCenter.y);
flowInfo.ctx.lineTo(startCenter.x + defX, startCenter.y);
flowInfo.ctx.closePath();
flowInfo.ctx.stroke();
flowInfo.ctx.beginPath();
flowInfo.ctx.moveTo(startCenter.x + defX, startCenter.y);
flowInfo.ctx.lineTo(startCenter.x + defX, endCenter.y);
flowInfo.ctx.closePath();
flowInfo.ctx.stroke();
flowInfo.ctx.beginPath();
flowInfo.ctx.moveTo(startCenter.x + defX, endCenter.y);
flowInfo.ctx.lineTo(startCenter.x, endCenter.y);
flowInfo.ctx.closePath();
flowInfo.ctx.stroke();
}
dec *= -0.9;
}
}
wait(flowInfo.draw, 500);
}
async function wait(callback, ms) {
await new Promise(resolve => setTimeout(resolve, ms));
return callback();
}
flowInfo.draw();

</script>
[[/html]]

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License