Skip to content
Snippets Groups Projects
Commit c65f3f1d authored by Christopher Pietsch's avatar Christopher Pietsch
Browse files

cleanup

parent 4f0eb86c
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
js/canvas.js
+ 730
− 839
View file @ c65f3f1d
......@@ -49,9 +49,6 @@ function Canvas() {
.on("zoomend", zoomend)
.on("zoomstart", zoomstart);
// d3.select("body")
// .on("keydown", keydown);
var canvas;
var config;
var container;
......@@ -60,7 +57,6 @@ function Canvas() {
var data;
var rangeBand = 0;
var rangeBandImage = 0;
// var imageSize = 50;
var imageSize = 256;
var imageSize2 = 1024;
var imageSize3 = 4000;
......@@ -73,6 +69,7 @@ function Canvas() {
var selectedImage = null;
var drag = false;
var sleep = false
var stagePadding = 40;
var imgPadding;
......@@ -102,7 +99,7 @@ function Canvas() {
var detailContainer = d3.select(".sidebar")
var timelineData;
var stage, stage1, stage2, stage3, stage4, stage5;
var timelineHover = false;
function canvas() {}
......@@ -116,13 +113,10 @@ function Canvas() {
canvas.resize = function() {
if (!state.init) return;
// console.log("resize")
width = window.innerWidth - margin.left - margin.right;
height = window.innerHeight < minHeight ? minHeight : window.innerHeight;
widthOuter = window.innerWidth;
renderer.resize(width + margin.left + margin.right, height);
canvas.makeScales();
canvas.project();
}
......@@ -163,7 +157,6 @@ function Canvas() {
container = d3.select(".page").append("div").classed("viz", true);
detailVue._data.structure = config.detail.structure
collumns = config.projection.columns;
imageSize = config.loader.textures.medium.size;
imageSize2 = config.loader.textures.detail.size;
......@@ -195,7 +188,6 @@ function Canvas() {
stage2.addChild(stage4);
stage2.addChild(stage5);
// timeline cleaning
_timeline.forEach(function(d) {
d.type = "timeline";
});
......@@ -204,7 +196,6 @@ function Canvas() {
.key(function(d) { return d.year; })
.entries(_data.concat(_timeline))
.sort(function(a, b) { return a.key - b.key; })
// .sort(function(a, b) { return d3.descending(a.key, b.key) })
.map(function(d) { return d.key; })
timeDomain = canvasDomain.map(function(d) {
......@@ -264,7 +255,6 @@ function Canvas() {
if (timelineHover) return;
// console.log(selectedImage)
if (Math.abs(zoomedToImageScale - scale) < 0.1) {
canvas.resetZoom();
} else {
......@@ -276,7 +266,6 @@ function Canvas() {
canvas.project();
animate();
// selectedImage = data.find(d => d.id == 88413)
// showDetail(selectedImage)
state.init = true;
......@@ -297,7 +286,6 @@ function Canvas() {
selectedImageDistance = best.d;
if (bottomZooming && best.p && best.p.ii < 3 && selectedImageDistance > 7) {
// console.log("bottom");
selectedImage = null;
zoom.center(null);
container.style("cursor", "default");
......@@ -307,7 +295,6 @@ function Canvas() {
// todo iprove that bitch
var center = [((d.x + imgPadding) * scale) + translate[0], (height + d.y + imgPadding) * scale + translate[1]];
zoom.center(center);
selectedImage = d;
}
......@@ -325,7 +312,6 @@ function Canvas() {
.key(function(d) {
return d.year;
})
// .sortKeys(d3.ascending)
.entries(data)
years.forEach(function(year) {
......@@ -334,7 +320,6 @@ function Canvas() {
year.values.sort(function(a, b) {
return b.keywords.length - a.keywords.length;
})
//console.log(year.values)
year.values.forEach(function(d, i) {
var row = (Math.floor(i / collumns) + 2);
......@@ -368,8 +353,6 @@ function Canvas() {
function toScreenPoint(p) {
var p2 = [0, 0];
// console.log("t",translate,scale)
p2[0] = p[0] / scale - translate[0] / scale;
p2[1] = (p[1] / scale - height) - translate[1] / scale;
......@@ -415,7 +398,7 @@ function Canvas() {
return sleep
}
var sleep = false
canvas.wakeup = function() { sleep = false }
function animate(time) {
......@@ -440,25 +423,15 @@ function Canvas() {
}
function zoomToImage(d, duration) {
// console.log("detail", d)
state.zoomingToImage = true;
zoom.center(null);
loadMiddleImage(d);
d3.select(".tagcloud").classed("hide", true);
var padding = x.rangeBand() / collumns / 2;
var sidbar = width / 8;
// var padding = 0;
var scale = 0.8 / (x.rangeBand() / collumns / width);
var translateNow = [(-scale * (d.x - padding / 2)) - sidbar, -scale * (height + d.y)];
//console.log(scale, translateNow);
zoomedToImageScale = scale;
setTimeout(function() {
......@@ -470,16 +443,11 @@ function Canvas() {
.transition().duration(duration)
.call(zoom.scale(scale).translate(translateNow).event)
.each("end", function() {
zoomedToImage = true;
selectedImage = d;
hideTheRest(d);
showDetail(d);
loadBigImage(d, "click");
state.zoomingToImage = false;
})
}
......@@ -521,11 +489,8 @@ function Canvas() {
function hideTheRest(d) {
// c("hide", d.id)
data.forEach(function(d2) {
if (d2.id !== d.id) {
// d2.sprite.alpha = 0;
// d2.sprite.visible = false;
d2.alpha = 0;
d2.alpha2 = 0;
......@@ -536,38 +501,19 @@ function Canvas() {
function showAllImages() {
data.forEach(function(d) {
d.alpha = d.active ? 1 : 0.2;;
//d.visible = d.active;
d.alpha2 = d.visible ? 1 : 0;
//d.sprite.visible = true;
})
}
var timelineHover = false;
function zoomed() {
translate = d3.event.translate;
scale = d3.event.scale;
if (!startTranslate) startTranslate = translate
drag = startTranslate && translate !== startTranslate;
// check borders
var x1 = -1 * translate[0] / scale;
var x2 = (x1 + (widthOuter / scale));
var y1 = (translate[1] + height * scale);
var e1 = -extent[1] - bottomPadding;
var y2 = (e1 - height) * scale + height;
var e2 = extent[0] - bottomPadding;
var y3 = (e2 + height) * -scale;
// console.log(translate[1],e2, y3);
if (d3.event.sourceEvent != null) {
if (x1 < 0) {
translate[0] = 0;
......@@ -575,10 +521,6 @@ function Canvas() {
translate[0] = ((widthOuter * scale) - widthOuter) * -1;
}
if (translate[1] < y2) {
// translate[1] = y2;
}
zoom.translate([translate[0], translate[1]]);
x1 = -1 * translate[0] / scale;
......@@ -637,7 +579,6 @@ function Canvas() {
filterVisible();
if (zoomedToImage && !selectedImage.big && state.lastZoomed != selectedImage.id && !state.zoomingToImage) {
//c("loadbig after zoom")
loadBigImage(selectedImage, "zoom");
}
}
......@@ -661,16 +602,12 @@ function Canvas() {
extent = d3.extent(data, function(d) { return d.y; });
var y = -extent[1] - bottomPadding;
// console.log(extent, y)
y = (extent[1] / -3) - bottomPadding
// y = - bottomPadding
//bottomZooming = (y<-30 && y>-40);
vizContainer
.call(zoom.translate(translate).event)
.transition().duration(duration)
.call(zoom.translate([0, y]).scale(1).event)
//.each("end", canvas.split)
}
canvas.split = function() {
......@@ -678,22 +615,15 @@ function Canvas() {
return d.active;
})
stackLayout(active, false);
var inactive = data.filter(function(d) {
return !d.active;
})
stackLayout(inactive, true);
// console.time("Quadtree")
quadtree = Quadtree(data);
// console.timeEnd("Quadtree");
}
function filterVisible() {
var zoomScale = scale;
if (zoomedToImage) return;
data.forEach(function(d, i) {
......@@ -702,24 +632,16 @@ function Canvas() {
var y = ((p.y / scale1) + (translate[1]) / zoomScale);
var padding = 5;
// c(x,y,p, translate, zoomScale, scale, height/zoomScale, y+height)
if (x > (-padding) && x < ((width / zoomScale) + padding) && y + height < (height / zoomScale + padding) && y > (height * -1) - padding) {
//d.sprite.alpha = 1;
d.visible = true;
// d.alpha = 1;
} else {
//d.sprite.alpha = 0.5;
d.visible = false;
// d.alpha = 0;
}
});
var visible = data.filter(function(d) {
return d.visible;
});
//c(visible.length);
if (visible.length < 40) {
data.forEach(function(d) {
......@@ -730,11 +652,8 @@ function Canvas() {
} else {
data.forEach(function(d) {
d.alpha2 = 0;
//if(d.sprite2) d.sprite2.visible = false;
})
}
}
function loadMiddleImage(d) {
......@@ -762,13 +681,9 @@ function Canvas() {
sprite.position.x = d.x * scale2 + imageSize2 / 2;
sprite.position.y = d.y * scale2 + imageSize2 / 2;
sprite._data = d;
stage4.addChild(sprite);
d.sprite2 = sprite;
d.alpha2 = d.highlight;
d.loaded = true;
sleep = false
}
......@@ -809,7 +724,6 @@ function Canvas() {
var pos = s.data.getLocalPosition(s.currentTarget)
var dir = pos.x > 0 ? 1 : -1
var page = d.page + dir
// var nextPage = Math.min(Math.max(page, 0), d.imagenum-1)
var nextPage = page
if (page > d.imagenum - 1) nextPage = 0
if (page < 0) nextPage = d.imagenum - 1
......@@ -825,9 +739,6 @@ function Canvas() {
sprite.position.y = d.y * scale3 + imageSize3 / 2;
sprite._data = d;
d.big = true;
// console.log(sprite, "done")
stage5.addChild(sprite);
sleep = false
}
......@@ -852,26 +763,6 @@ function Canvas() {
}
}
// function translateUpDown(dir) {
// var translateNow = [translate[0], translate[1] + dir * 10 * scale];
// svg
// .call(zoom.translate(translate).event)
// .transition().duration(1000)
// .call(zoom.translate(translateNow).event)
// }
// function getSiblingImage(active, dir) {
// if (!active) return;
// return data.filter(function(d) {
// return (d.order == active.order + dir && d.year == active.year);
// })[0];
// }
function nearest(x, y, best, node) {
// mike bostock https://bl.ocks.org/mbostock/4343214
var x1 = node.x1,
......
js/viz.js
+ 66
− 69
View file @ c65f3f1d
// ,--.
// ,---, ,--/ /| .--.--.
// ,---.,`--.' |,---,': / ' ,--, / / '.
......@@ -99,8 +98,6 @@ function init() {
tags.reset();
canvas.split();
})
}
d3.select(".slidebutton")
.on("click", function() {
......@@ -113,6 +110,6 @@ d3.select(".infobutton")
var s = !d3.select(".infobar").classed("sneak");
d3.select(".infobar").classed("sneak", s)
})
}
d3.select(".browserInfo").classed("show", utils.isMobile());
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment