Commit 60cc321d authored by gijs's avatar gijs

Improved highlighting.

parent 84ece21d
......@@ -10,7 +10,114 @@
<object id="timeline" data="timeline.svg" type="image/svg+xml" style="max-height:90vh"></object>
<script src="raphael.min.js"></script>
<script>
function getTarget(segment) {
const timeline = [
[
[0],
[0, 1, 2, 3],
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
[0]
],
[
[0, 1, 2, 3, 4],
[0, 1, 2, 3, 4, 5, 6, 7],
[0]
],
[
[0, 1, 2, 3, 4, 5],
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
[0]
]
];
function timelineSubset(loop, day, event) {
var buff = timeline[loop];
if (typeof(day) !== "undefined") {
buff = buff[day];
if(typeof(event) !== "undefined") {
buff = buff[event];
}
}
return buff
}
function getLength(input) {
if (Array.isArray(input)) {
// If the subpath has an uneven amount of children
// on of them is positioned in the middle of the loop
// therefor we loose a point on the loop
var length = (input.length % 2 == 0) ? 3 : 2;
for (var i=0;i<input.length;i++) {
length += getLength(input[i]);
}
return length;
} else {
return 3;
}
}
// If the parent(path) has an even amount of children, and the child
// is located over the half of the path we have to insert and extra
// point (top of the loop)
function middlepointCompensation (parent, key) {
if (key > 0 && key * 2 > parent.length && parent.length % 2 == 0) {
return 1;
} else {
return 0;
}
}
function getStart(loop, day, event) {
var coord = 1, l = 0, d = 0, e = 0;
while (l < loop) {
coord += getLength(timelineSubset(l));
l++;
};
if (typeof(day) !== "undefined") {
coord++;
while (d < day) {
coord += getLength(timelineSubset(l, d));
d++;
}
coord += middlepointCompensation(timelineSubset(l), d);
if (typeof(event) !== "undefined") {
coord++;
while (e < event) {
coord += getLength(timelineSubset(l,d,e));
e++;
}
coord += middlepointCompensation(timelineSubset(l,d), e);
}
}
return coord;
}
function getEnd(loop, day, event) {
var start = getStart(loop, day, event);
if (typeof(event) !== 'undefined') {
return start + getLength(timelineSubset(loop, day, event));
} else if (typeof(day) !== 'undefined') {
return start + getLength(timelineSubset(loop, day));
}
return start + getLength(timelineSubset(loop));
}
function getSegmentCoords(segment) {
if (segment[0] == 'C') {
return [segment[5], segment[6]];
} else {
......@@ -18,36 +125,134 @@
}
}
function getSubpathFromSegments(segments, start, end) {
subset = [];
if (start > 0 || segments[start][0] !== 'M') {
subset.push(['M'].concat(getSegmentCoords(segments[start-1])));
}
return subset.concat(segments.slice(start, end+1));
}
function makeCoordinateString(x, y) {
return x + ' ' + y;
}
function makePathString(segments) {
var pathstring = '';
for (var s = 0; s < segments.length;s++) {
var command = segments[s][0];
coordinates = [];
for (var c=1; c < segments[s].length; c+=2) {
coordinates.push(makeCoordinateString(segments[s][c], segments[s][c+1]));
}
pathstring += command + coordinates.join(',');
}
return pathstring
}
window.addEventListener('load', function () {
const timeline = document.querySelector('#timeline').contentDocument.rootElement,
paths = timeline.querySelectorAll('path'),
const timelineEl = document.querySelector('#timeline').contentDocument.rootElement,
paths = timelineEl.querySelectorAll('path'),
path = paths[5]; //document.querySelector('#timeline').contentDocument.createElement('path');
var segments = Raphael.parsePathString(paths[4].getAttribute('d'));
console.log(segments)
path.setAttribute("style", "stroke:rgb(100%,0%,0%); stroke-width:5.0;fill:none;");
s = 0;
loop = function () {
if (segments.length > 0) {
if (s > 0 && s == segments.length) {
s = 0;
loop();
} else if (segments[s][0] !== 'C') {
s++;
loop();
} else {
getTarget(segments[s])
path.setAttribute('d', 'M' + (getTarget(segments[s-1])).join(' ') + segments[s].join(' ') + segments[s+1].join(' '))
}
var l = 1;
var d = 1;
var e = 1;
function drawActive(start, end) {
var subset = getSubpathFromSegments(segments, start+1, end-1),
pathstring = makePathString(subset);
path.setAttribute('d', pathstring);
}
function drawActiveEvent() {
drawActive(getStart(l, d, e), getEnd(l, d, e),)
}
function drawActiveDay() {
drawActive(getStart(l, d), getEnd(l, d),)
}
function drawActiveLoop() {
drawActive(getStart(l), getEnd(l))
}
function nextLoop () {
if (++l > timeline.length) {
l = 1;
}
d = 0;
e = 0;
drawActiveLoop();
}
function previousLoop() {
if (--l == 0) {
l = timeline.length;
}
d = timeline[l-1].length + 1;
e = timeline[l-1][timeline[l-1].length-1].length + 1;
drawActiveLoop();
}
function nextDay () {
if (++d > timeline[l-1].length) {
nextLoop();
} else {
e = 0;
drawActiveDay();
}
}
function previousDay() {
if (--d == 0) {
previousLoop();
} else {
console.warn('Segments empty');
e = timeline[Math.min(l-1, 0)][Math.min(d-1, 0)].length + 1;
drawActiveDay();
}
}
timeline.appendChild(path);
loop();
function nextEvent() {
if (++e > timeline[l-1][d-1].length) {
nextDay();
} else {
drawActiveEvent();
}
}
function previousEvent() {
if (--e == 0) {
previousDay();
} else {
drawActiveEvent();
}
}
window.addEventListener('wheel', function (e) {
s += (e.deltaY > 0) ? 1 : -1;
loop();
})
(e.deltaY > 0) ? nextEvent() : previousEvent();
// drawActiveEvent();
// (e.deltaY > 0) ? nextDay() : previousDay();
// drawActiveDay();
// (e.deltaY > 0) ? nextLoop() : previousLoop();
// drawActiveLoop();
});
drawActiveEvent();
// drawActiveDay();
// drawActiveLoop();
});
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment