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

formating

parent 09faba2f
No related branches found
No related tags found
No related merge requests found
...@@ -2,13 +2,12 @@ ...@@ -2,13 +2,12 @@
// cpietsch@gmail.com // cpietsch@gmail.com
// 2015-2018 // 2015-2018
function Canvas() { function Canvas() {
var margin = { var margin = {
top: 20, top: 20,
right: 50, right: 50,
bottom: 30, bottom: 30,
left: 50 left: 50,
}; };
var minHeight = 400; var minHeight = 400;
...@@ -27,10 +26,12 @@ function Canvas() { ...@@ -27,10 +26,12 @@ function Canvas() {
var timeDomain = []; var timeDomain = [];
var loadImagesCue = []; var loadImagesCue = [];
var x = d3.scale.ordinal() var x = d3.scale
.ordinal()
.rangeBands([margin.left, width + margin.left], 0.2); .rangeBands([margin.left, width + margin.left], 0.2);
var Quadtree = d3.geom.quadtree() var Quadtree = d3.geom
.quadtree()
.x(function (d) { .x(function (d) {
return d.x; return d.x;
}) })
...@@ -42,7 +43,8 @@ function Canvas() { ...@@ -42,7 +43,8 @@ function Canvas() {
var maxZoomLevel = utils.isMobile() ? 5000 : 2500; var maxZoomLevel = utils.isMobile() ? 5000 : 2500;
var zoom = d3.behavior.zoom() var zoom = d3.behavior
.zoom()
.scaleExtent([1, maxZoomLevel]) .scaleExtent([1, maxZoomLevel])
.size([width, height]) .size([width, height])
.on("zoom", zoomed) .on("zoom", zoomed)
...@@ -69,7 +71,7 @@ function Canvas() { ...@@ -69,7 +71,7 @@ function Canvas() {
var selectedImage = null; var selectedImage = null;
var drag = false; var drag = false;
var sleep = false var sleep = false;
var stagePadding = 40; var stagePadding = 40;
var imgPadding; var imgPadding;
...@@ -80,13 +82,13 @@ function Canvas() { ...@@ -80,13 +82,13 @@ function Canvas() {
var touchstart = 0; var touchstart = 0;
var vizContainer; var vizContainer;
var spriteClick = false var spriteClick = false;
var state = { var state = {
lastZoomed: 0, lastZoomed: 0,
zoomingToImage: false, zoomingToImage: false,
mode: "time", mode: "time",
init: false init: false,
}; };
var zoomedToImage = false; var zoomedToImage = false;
...@@ -97,32 +99,32 @@ function Canvas() { ...@@ -97,32 +99,32 @@ function Canvas() {
var startScale = 0; var startScale = 0;
var cursorCutoff = 1; var cursorCutoff = 1;
var zooming = false; var zooming = false;
var detailContainer = d3.select(".sidebar") var detailContainer = d3.select(".sidebar");
var timelineData; var timelineData;
var stage, stage1, stage2, stage3, stage4, stage5; var stage, stage1, stage2, stage3, stage4, stage5;
var timelineHover = false; var timelineHover = false;
var tsne = [] var tsne = [];
var tsneIndex = {} var tsneIndex = {};
function canvas() {} function canvas() {}
canvas.rangeBand = function () { canvas.rangeBand = function () {
return rangeBand return rangeBand;
} };
canvas.width = function () { canvas.width = function () {
return width return width;
} };
canvas.height = function () { canvas.height = function () {
return height return height;
} };
canvas.rangeBandImage = function () { canvas.rangeBandImage = function () {
return rangeBandImage return rangeBandImage;
} };
canvas.zoom = zoom canvas.zoom = zoom;
canvas.selectedImage = function () { canvas.selectedImage = function () {
return selectedImage return selectedImage;
} };
canvas.x = x canvas.x = x;
canvas.resize = function () { canvas.resize = function () {
if (!state.init) return; if (!state.init) return;
...@@ -132,10 +134,10 @@ function Canvas() { ...@@ -132,10 +134,10 @@ function Canvas() {
renderer.resize(width + margin.left + margin.right, height); renderer.resize(width + margin.left + margin.right, height);
canvas.makeScales(); canvas.makeScales();
canvas.project(); canvas.project();
} };
canvas.makeScales = function () { canvas.makeScales = function () {
x.rangeBands([margin.left, width + margin.left], 0.2) x.rangeBands([margin.left, width + margin.left], 0.2);
rangeBand = x.rangeBand(); rangeBand = x.rangeBand();
rangeBandImage = x.rangeBand() / collumns; rangeBandImage = x.rangeBand() / collumns;
...@@ -158,19 +160,19 @@ function Canvas() { ...@@ -158,19 +160,19 @@ function Canvas() {
stage5.scale.y = 1 / scale3; stage5.scale.y = 1 / scale3;
stage5.y = height; stage5.y = height;
timeline.rescale(scale1) timeline.rescale(scale1);
cursorCutoff = 1/scale1 * imageSize * 0.48 cursorCutoff = (1 / scale1) * imageSize * 0.48;
zoomedToImageScale = 0.8 / (x.rangeBand() / collumns / width) zoomedToImageScale = 0.8 / (x.rangeBand() / collumns / width);
// console.log("zoomedToImageScale", zoomedToImageScale) // console.log("zoomedToImageScale", zoomedToImageScale)
} };
canvas.init = function (_data, _timeline, _config) { canvas.init = function (_data, _timeline, _config) {
data = _data; data = _data;
config = _config; config = _config;
container = d3.select(".page").append("div").classed("viz", true); container = d3.select(".page").append("div").classed("viz", true);
detailVue._data.structure = config.detail.structure detailVue._data.structure = config.detail.structure;
collumns = config.projection.columns; collumns = config.projection.columns;
imageSize = config.loader.textures.medium.size; imageSize = config.loader.textures.medium.size;
...@@ -181,14 +183,24 @@ function Canvas() { ...@@ -181,14 +183,24 @@ function Canvas() {
} }
PIXI.settings.SCALE_MODE = 1; PIXI.settings.SCALE_MODE = 1;
PIXI.settings.SPRITE_MAX_TEXTURES = Math.min(PIXI.settings.SPRITE_MAX_TEXTURES , 16); PIXI.settings.SPRITE_MAX_TEXTURES = Math.min(
PIXI.settings.SPRITE_MAX_TEXTURES,
16
);
var renderOptions = { var renderOptions = {
resolution: 1, resolution: 1,
antialiasing: false antialiasing: false,
}; };
renderer = new PIXI.WebGLRenderer(width + margin.left + margin.right, height, renderOptions); renderer = new PIXI.WebGLRenderer(
renderer.backgroundColor = parseInt(config.style.canvasBackground.substring(1), 16) width + margin.left + margin.right,
height,
renderOptions
);
renderer.backgroundColor = parseInt(
config.style.canvasBackground.substring(1),
16
);
window.renderer = renderer; window.renderer = renderer;
var renderElem = d3.select(container.node().appendChild(renderer.view)); var renderElem = d3.select(container.node().appendChild(renderer.view));
...@@ -208,7 +220,8 @@ function Canvas() { ...@@ -208,7 +220,8 @@ function Canvas() {
d.type = "timeline"; d.type = "timeline";
}); });
var canvasDomain = d3.nest() var canvasDomain = d3
.nest()
.key(function (d) { .key(function (d) {
return d.year; return d.year;
}) })
...@@ -218,18 +231,18 @@ function Canvas() { ...@@ -218,18 +231,18 @@ function Canvas() {
}) })
.map(function (d) { .map(function (d) {
return d.key; return d.key;
}) });
timeDomain = canvasDomain.map(function (d) { timeDomain = canvasDomain.map(function (d) {
return { return {
key: d, key: d,
values: _timeline.filter(function (e) { values: _timeline.filter(function (e) {
return d == e.year; return d == e.year;
}) }),
} };
}) });
timeline.init(timeDomain) timeline.init(timeDomain);
x.domain(canvasDomain); x.domain(canvasDomain);
canvas.makeScales(); canvas.makeScales();
...@@ -247,11 +260,10 @@ function Canvas() { ...@@ -247,11 +260,10 @@ function Canvas() {
d.sprite = sprite; d.sprite = sprite;
stage3.addChild(sprite); stage3.addChild(sprite);
});
}) vizContainer = d3
.select(".viz")
vizContainer = d3.select(".viz")
.call(zoom) .call(zoom)
.on("mousemove", mousemove) .on("mousemove", mousemove)
.on("dblclick.zoom", null) .on("dblclick.zoom", null)
...@@ -260,14 +272,14 @@ function Canvas() { ...@@ -260,14 +272,14 @@ function Canvas() {
touchstart = new Date() * 1; touchstart = new Date() * 1;
}) })
.on("touchend", function (d) { .on("touchend", function (d) {
var touchtime = (new Date() * 1) - touchstart; var touchtime = new Date() * 1 - touchstart;
if (touchtime > 250) return; if (touchtime > 250) return;
if (selectedImageDistance > 15) return; if (selectedImageDistance > 15) return;
if (selectedImage && !selectedImage.id) return; if (selectedImage && !selectedImage.id) return;
if (selectedImage && !selectedImage.active) return; if (selectedImage && !selectedImage.active) return;
if (drag) return; if (drag) return;
zoomToImage(selectedImage, 1400 / Math.sqrt(Math.sqrt(scale))) zoomToImage(selectedImage, 1400 / Math.sqrt(Math.sqrt(scale)));
}) })
.on("click", function () { .on("click", function () {
console.log("click"); console.log("click");
...@@ -288,8 +300,7 @@ function Canvas() { ...@@ -288,8 +300,7 @@ function Canvas() {
} else { } else {
zoomToImage(selectedImage, 1400 / Math.sqrt(Math.sqrt(scale))); zoomToImage(selectedImage, 1400 / Math.sqrt(Math.sqrt(scale)));
} }
});
})
canvas.project(); canvas.project();
animate(); animate();
...@@ -300,34 +311,30 @@ function Canvas() { ...@@ -300,34 +311,30 @@ function Canvas() {
}; };
canvas.addTsneData = function (d) { canvas.addTsneData = function (d) {
console.time("tsne") console.time("tsne");
var clean = d.map(function (d) { var clean = d.map(function (d) {
return { return {
id: d.id, id: d.id,
x: parseFloat(d.x), x: parseFloat(d.x),
y: parseFloat(d.y) y: parseFloat(d.y),
} };
}) });
var xExtent = d3.extent(clean, function (d) { var xExtent = d3.extent(clean, function (d) {
return d.x return d.x;
}) });
var yExtent = d3.extent(clean, function (d) { var yExtent = d3.extent(clean, function (d) {
return d.y return d.y;
}) });
var x = d3.scale.linear().range([0, 1]).domain(xExtent) var x = d3.scale.linear().range([0, 1]).domain(xExtent);
var y = d3.scale.linear().range([0, 1]).domain(yExtent) var y = d3.scale.linear().range([0, 1]).domain(yExtent);
d.forEach(function (d) { d.forEach(function (d) {
tsneIndex[d.id] = [ tsneIndex[d.id] = [x(d.x), y(d.y)];
x(d.x), });
y(d.y)
]
})
console.timeEnd("tsne")
}
console.timeEnd("tsne");
};
function mousemove(d) { function mousemove(d) {
if (timelineHover) return; if (timelineHover) return;
...@@ -335,12 +342,17 @@ function Canvas() { ...@@ -335,12 +342,17 @@ function Canvas() {
var mouse = d3.mouse(vizContainer.node()); var mouse = d3.mouse(vizContainer.node());
var p = toScreenPoint(mouse); var p = toScreenPoint(mouse);
var distance = 200 var distance = 200;
var best = nearest(p[0] - imgPadding, p[1] - imgPadding, { var best = nearest(
p[0] - imgPadding,
p[1] - imgPadding,
{
d: distance, d: distance,
p: null p: null,
}, quadtree); },
quadtree
);
selectedImageDistance = best.d; selectedImageDistance = best.d;
// console.log(cursorCutoff,scale, scale1, selectedImageDistance) // console.log(cursorCutoff,scale, scale1, selectedImageDistance)
...@@ -352,39 +364,42 @@ function Canvas() { ...@@ -352,39 +364,42 @@ function Canvas() {
} else { } else {
if (best.p && !zoomedToImage) { if (best.p && !zoomedToImage) {
var d = best.p; var d = best.p;
var center = [((d.x + imgPadding) * scale) + translate[0], (height + d.y + imgPadding) * scale + translate[1]]; var center = [
(d.x + imgPadding) * scale + translate[0],
(height + d.y + imgPadding) * scale + translate[1],
];
zoom.center(center); zoom.center(center);
selectedImage = d; selectedImage = d;
} }
container.style("cursor", function () { container.style("cursor", function () {
return ((selectedImageDistance < cursorCutoff) && selectedImage.active) ? "pointer" : "default"; return selectedImageDistance < cursorCutoff && selectedImage.active
? "pointer"
: "default";
}); });
} }
} }
function stackLayout(data, invert) { function stackLayout(data, invert) {
var years = d3
var years = d3.nest() .nest()
.key(function (d) { .key(function (d) {
return d.year; return d.year;
}) })
.entries(data) .entries(data);
years.forEach(function (year) { years.forEach(function (year) {
var startX = x(year.key); var startX = x(year.key);
var total = year.values.length; var total = year.values.length;
year.values.sort(function (a, b) { year.values.sort(function (a, b) {
return b.keywords.length - a.keywords.length; return b.keywords.length - a.keywords.length;
}) });
year.values.forEach(function (d, i) { year.values.forEach(function (d, i) {
var row = (Math.floor(i / collumns) + 2); var row = Math.floor(i / collumns) + 2;
d.ii = i; d.ii = i;
d.x = startX + ((i % collumns) * (rangeBand / collumns)); d.x = startX + (i % collumns) * (rangeBand / collumns);
d.y = (invert ? 1 : -1) * (row * (rangeBand / collumns)); d.y = (invert ? 1 : -1) * (row * (rangeBand / collumns));
d.x1 = d.x * scale1 + imageSize / 2; d.x1 = d.x * scale1 + imageSize / 2;
...@@ -401,52 +416,54 @@ function Canvas() { ...@@ -401,52 +416,54 @@ function Canvas() {
} }
d.order = (invert ? 1 : 1) * (total - i); d.order = (invert ? 1 : 1) * (total - i);
}) });
}) });
} }
canvas.distance = function (a, b) { canvas.distance = function (a, b) {
return Math.sqrt((a[0] - b[0]) * (a[0] - b[0]) + (a[1] - b[1]) * (a[1] - b[1])); return Math.sqrt(
} (a[0] - b[0]) * (a[0] - b[0]) + (a[1] - b[1]) * (a[1] - b[1])
);
};
function toScreenPoint(p) { function toScreenPoint(p) {
var p2 = [0, 0]; var p2 = [0, 0];
p2[0] = p[0] / scale - translate[0] / scale; p2[0] = p[0] / scale - translate[0] / scale;
p2[1] = (p[1] / scale - height) - translate[1] / scale; p2[1] = p[1] / scale - height - translate[1] / scale;
return p2; return p2;
} }
function imageAnimation() { function imageAnimation() {
var sleep = true var sleep = true;
data.forEach(function (d, i) { data.forEach(function (d, i) {
var diff; var diff;
diff = (d.x1 - d.sprite.position.x); diff = d.x1 - d.sprite.position.x;
if (Math.abs(diff) > 0.1) { if (Math.abs(diff) > 0.1) {
d.sprite.position.x += diff * 0.1; d.sprite.position.x += diff * 0.1;
sleep = false; sleep = false;
} }
diff = (d.y1 - d.sprite.position.y); diff = d.y1 - d.sprite.position.y;
if (Math.abs(diff) > 0.1) { if (Math.abs(diff) > 0.1) {
d.sprite.position.y += diff * 0.1 d.sprite.position.y += diff * 0.1;
sleep = false; sleep = false;
} }
diff = (d.alpha - d.sprite.alpha); diff = d.alpha - d.sprite.alpha;
if (Math.abs(diff) > 0.01) { if (Math.abs(diff) > 0.01) {
d.sprite.alpha += diff * 0.2 d.sprite.alpha += diff * 0.2;
sleep = false; sleep = false;
} }
d.sprite.visible = d.sprite.alpha > 0.1; d.sprite.visible = d.sprite.alpha > 0.1;
if (d.sprite2) { if (d.sprite2) {
diff = (d.alpha2 - d.sprite2.alpha); diff = d.alpha2 - d.sprite2.alpha;
if (Math.abs(diff) > 0.01) { if (Math.abs(diff) > 0.01) {
d.sprite2.alpha += diff * 0.2 d.sprite2.alpha += diff * 0.2;
sleep = false; sleep = false;
} }
...@@ -454,38 +471,37 @@ function Canvas() { ...@@ -454,38 +471,37 @@ function Canvas() {
//else d.sprite2.visible = d.visible; //else d.sprite2.visible = d.visible;
} }
}); });
return sleep return sleep;
} }
canvas.wakeup = function () { canvas.wakeup = function () {
sleep = false sleep = false;
} };
canvas.setMode = function (mode) { canvas.setMode = function (mode) {
state.mode = mode state.mode = mode;
canvas.project() canvas.project();
} };
function animate(time) { function animate(time) {
requestAnimationFrame(animate); requestAnimationFrame(animate);
loadImages(); loadImages();
if (sleep) return if (sleep) return;
sleep = imageAnimation(); sleep = imageAnimation();
renderer.render(stage); renderer.render(stage);
} }
function zoomToYear(d) { function zoomToYear(d) {
var xYear = x(d.year); var xYear = x(d.year);
var scale = 1 / (rangeBand * 4 / width); var scale = 1 / ((rangeBand * 4) / width);
var padding = rangeBand * 1.5 var padding = rangeBand * 1.5;
var translateNow = [-scale * (xYear - padding), -scale * (height + d.y)]; var translateNow = [-scale * (xYear - padding), -scale * (height + d.y)];
vizContainer vizContainer
.call(zoom.translate(translate).event) .call(zoom.translate(translate).event)
.transition().duration(2000) .transition()
.call(zoom.scale(scale).translate(translateNow).event) .duration(2000)
.call(zoom.scale(scale).translate(translateNow).event);
} }
function zoomToImage(d, duration) { function zoomToImage(d, duration) {
...@@ -496,7 +512,10 @@ function Canvas() { ...@@ -496,7 +512,10 @@ function Canvas() {
var padding = x.rangeBand() / collumns / 2; var padding = x.rangeBand() / collumns / 2;
var sidbar = width / 8; var sidbar = width / 8;
var scale = 0.8 / (x.rangeBand() / collumns / width); var scale = 0.8 / (x.rangeBand() / collumns / width);
var translateNow = [(-scale * (d.x - padding / 2)) - sidbar, -scale * (height + d.y)]; var translateNow = [
-scale * (d.x - padding / 2) - sidbar,
-scale * (height + d.y),
];
zoomedToImageScale = scale; zoomedToImageScale = scale;
...@@ -506,7 +525,8 @@ function Canvas() { ...@@ -506,7 +525,8 @@ function Canvas() {
vizContainer vizContainer
.call(zoom.translate(translate).event) .call(zoom.translate(translate).event)
.transition().duration(duration) .transition()
.duration(duration)
.call(zoom.scale(scale).translate(translateNow).event) .call(zoom.scale(scale).translate(translateNow).event)
.each("end", function () { .each("end", function () {
zoomedToImage = true; zoomedToImage = true;
...@@ -515,91 +535,88 @@ function Canvas() { ...@@ -515,91 +535,88 @@ function Canvas() {
showDetail(d); showDetail(d);
loadBigImage(d, "click"); loadBigImage(d, "click");
state.zoomingToImage = false; state.zoomingToImage = false;
}) });
} }
function showDetail(d) { function showDetail(d) {
// console.log("show detail", d) // console.log("show detail", d)
detailContainer detailContainer.select(".outer").node().scrollTop = 0;
.select(".outer")
.node()
.scrollTop = 0;
detailContainer detailContainer.classed("hide", false).classed("sneak", utils.isMobile());
.classed("hide", false)
.classed("sneak", utils.isMobile())
// needs to be done better // needs to be done better
var detailData = {} var detailData = {};
for (field in selectedImage) { for (field in selectedImage) {
if (field[0] === '_') detailData[field] = selectedImage[field] if (field[0] === "_") detailData[field] = selectedImage[field];
} }
detailData['_id'] = selectedImage.id detailData["_id"] = selectedImage.id;
detailData['_keywords'] = selectedImage.keywords detailData["_keywords"] = selectedImage.keywords;
detailData['_year'] = selectedImage.year detailData["_year"] = selectedImage.year;
detailData['_imagenum'] = selectedImage.imagenum || 1 detailData["_imagenum"] = selectedImage.imagenum || 1;
detailVue._data.item = detailData detailVue._data.item = detailData;
detailVue._data.id = d.id detailVue._data.id = d.id;
detailVue._data.page = d.page detailVue._data.page = d.page;
} }
canvas.changePage = function (id, page) { canvas.changePage = function (id, page) {
console.log("changePage", id, page, selectedImage); console.log("changePage", id, page, selectedImage);
selectedImage.page = page selectedImage.page = page;
detailVue._data.page = page detailVue._data.page = page;
clearBigImages(); clearBigImages();
loadBigImage(selectedImage) loadBigImage(selectedImage);
} };
function hideTheRest(d) { function hideTheRest(d) {
data.forEach(function (d2) { data.forEach(function (d2) {
if (d2.id !== d.id) { if (d2.id !== d.id) {
d2.alpha = 0; d2.alpha = 0;
d2.alpha2 = 0; d2.alpha2 = 0;
} }
}) });
} }
function showAllImages() { function showAllImages() {
data.forEach(function (d) { data.forEach(function (d) {
d.alpha = d.active ? 1 : 0.2;; d.alpha = d.active ? 1 : 0.2;
d.alpha2 = d.visible ? 1 : 0; d.alpha2 = d.visible ? 1 : 0;
}) });
} }
function zoomed() { function zoomed() {
translate = d3.event.translate; translate = d3.event.translate;
scale = d3.event.scale; scale = d3.event.scale;
if (!startTranslate) startTranslate = translate if (!startTranslate) startTranslate = translate;
drag = startTranslate && translate !== startTranslate; drag = startTranslate && translate !== startTranslate;
// check borders // check borders
var x1 = -1 * translate[0] / scale; var x1 = (-1 * translate[0]) / scale;
var x2 = (x1 + (widthOuter / scale)); var x2 = x1 + widthOuter / scale;
if (d3.event.sourceEvent != null) { if (d3.event.sourceEvent != null) {
if (x1 < 0) { if (x1 < 0) {
translate[0] = 0; translate[0] = 0;
} else if (x2 > widthOuter) { } else if (x2 > widthOuter) {
translate[0] = ((widthOuter * scale) - widthOuter) * -1; translate[0] = (widthOuter * scale - widthOuter) * -1;
} }
zoom.translate([translate[0], translate[1]]); zoom.translate([translate[0], translate[1]]);
x1 = -1 * translate[0] / scale; x1 = (-1 * translate[0]) / scale;
x2 = (x1 + (width / scale)) x2 = x1 + width / scale;
} }
if (zoomedToImageScale != 0 && scale > zoomedToImageScale*0.9 && !zoomedToImage && selectedImage && selectedImage.type == "image") { if (
zoomedToImageScale != 0 &&
scale > zoomedToImageScale * 0.9 &&
!zoomedToImage &&
selectedImage &&
selectedImage.type == "image"
) {
zoomedToImage = true; zoomedToImage = true;
zoom.center(null); zoom.center(null);
zoomedToImageScale = scale; zoomedToImageScale = scale;
hideTheRest(selectedImage); hideTheRest(selectedImage);
showDetail(selectedImage) showDetail(selectedImage);
} }
if (zoomedToImage && zoomedToImageScale * 0.8 > scale) { if (zoomedToImage && zoomedToImageScale * 0.8 > scale) {
...@@ -608,7 +625,7 @@ function Canvas() { ...@@ -608,7 +625,7 @@ function Canvas() {
state.lastZoomed = 0; state.lastZoomed = 0;
showAllImages(); showAllImages();
clearBigImages(); clearBigImages();
detailContainer.classed("hide", true) detailContainer.classed("hide", true);
} }
timeline.update(x1, x2, scale, translate, scale1); timeline.update(x1, x2, scale, translate, scale1);
...@@ -623,19 +640,18 @@ function Canvas() { ...@@ -623,19 +640,18 @@ function Canvas() {
d3.select(".searchbar").classed("hide", false); d3.select(".searchbar").classed("hide", false);
} }
stage2.scale.x = d3.event.scale; stage2.scale.x = d3.event.scale;
stage2.scale.y = d3.event.scale; stage2.scale.y = d3.event.scale;
stage2.x = d3.event.translate[0]; stage2.x = d3.event.translate[0];
stage2.y = d3.event.translate[1]; stage2.y = d3.event.translate[1];
sleep = false sleep = false;
} }
function zoomstart(d) { function zoomstart(d) {
zooming = true; zooming = true;
startTranslate = false; startTranslate = false;
drag = false drag = false;
startScale = scale; startScale = scale;
} }
...@@ -644,7 +660,12 @@ function Canvas() { ...@@ -644,7 +660,12 @@ function Canvas() {
zooming = false; zooming = false;
filterVisible(); filterVisible();
if (zoomedToImage && !selectedImage.big && state.lastZoomed != selectedImage.id && !state.zoomingToImage) { if (
zoomedToImage &&
!selectedImage.big &&
state.lastZoomed != selectedImage.id &&
!state.zoomingToImage
) {
loadBigImage(selectedImage, "zoom"); loadBigImage(selectedImage, "zoom");
} }
} }
...@@ -654,7 +675,7 @@ function Canvas() { ...@@ -654,7 +675,7 @@ function Canvas() {
d.alpha = d.highlight ? 1 : 0.2; d.alpha = d.highlight ? 1 : 0.2;
}); });
canvas.wakeup(); canvas.wakeup();
} };
// canvas.project = function () { // canvas.project = function () {
// sleep = false // sleep = false
...@@ -663,17 +684,16 @@ function Canvas() { ...@@ -663,17 +684,16 @@ function Canvas() {
// } // }
canvas.project = function () { canvas.project = function () {
sleep = false sleep = false;
if (state.mode == "tsne") { if (state.mode == "tsne") {
canvas.projectTSNE(); canvas.projectTSNE();
} else { } else {
canvas.split(); canvas.split();
} }
canvas.resetZoom(); canvas.resetZoom();
} };
canvas.projectTSNE = function () { canvas.projectTSNE = function () {
var marginBottom = -height / 2.5; var marginBottom = -height / 2.5;
var inactive = data.filter(function (d) { var inactive = data.filter(function (d) {
...@@ -689,7 +709,7 @@ function Canvas() { ...@@ -689,7 +709,7 @@ function Canvas() {
// return a.rTSNE - b.rTSNE // return a.rTSNE - b.rTSNE
// }); // });
var dimension = Math.min(width, height) * 0.8 var dimension = Math.min(width, height) * 0.8;
inactive.forEach(function (d, i) { inactive.forEach(function (d, i) {
var r = dimension / 1.9 + Math.random() * 40; var r = dimension / 1.9 + Math.random() * 40;
...@@ -700,19 +720,17 @@ function Canvas() { ...@@ -700,19 +720,17 @@ function Canvas() {
}); });
active.forEach(function (d) { active.forEach(function (d) {
var factor = height / 2; var factor = height / 2;
var tsneEntry = tsneIndex[d.id] var tsneEntry = tsneIndex[d.id];
if (tsneEntry) { if (tsneEntry) {
d.x = (tsneEntry[0] * dimension) + width / 2 - dimension / 2 + margin.left; d.x =
d.y = (tsneEntry[1] * dimension) - dimension / 2 + marginBottom; tsneEntry[0] * dimension + width / 2 - dimension / 2 + margin.left;
d.y = tsneEntry[1] * dimension - dimension / 2 + marginBottom;
} }
// var tsneEntry = tsne.find(function (t) { // var tsneEntry = tsne.find(function (t) {
// return t.id == d.id // return t.id == d.id
// }) // })
});
})
data.forEach(function (d) { data.forEach(function (d) {
d.x1 = d.x * scale1 + imageSize / 2; d.x1 = d.x * scale1 + imageSize / 2;
...@@ -729,12 +747,9 @@ function Canvas() { ...@@ -729,12 +747,9 @@ function Canvas() {
} }
}); });
quadtree = Quadtree(data); quadtree = Quadtree(data);
//chart.resetZoom(); //chart.resetZoom();
};
}
canvas.resetZoom = function () { canvas.resetZoom = function () {
var duration = 1400; var duration = 1400;
...@@ -744,25 +759,26 @@ function Canvas() { ...@@ -744,25 +759,26 @@ function Canvas() {
}); });
var y = -extent[1] - bottomPadding; var y = -extent[1] - bottomPadding;
y = (extent[1] / -3) - bottomPadding y = extent[1] / -3 - bottomPadding;
vizContainer vizContainer
.call(zoom.translate(translate).event) .call(zoom.translate(translate).event)
.transition().duration(duration) .transition()
.call(zoom.translate([0, y]).scale(1).event) .duration(duration)
} .call(zoom.translate([0, y]).scale(1).event);
};
canvas.split = function () { canvas.split = function () {
var active = data.filter(function (d) { var active = data.filter(function (d) {
return d.active; return d.active;
}) });
stackLayout(active, false); stackLayout(active, false);
var inactive = data.filter(function (d) { var inactive = data.filter(function (d) {
return !d.active; return !d.active;
}) });
stackLayout(inactive, true); stackLayout(inactive, true);
quadtree = Quadtree(data); quadtree = Quadtree(data);
} };
function filterVisible() { function filterVisible() {
var zoomScale = scale; var zoomScale = scale;
...@@ -770,11 +786,16 @@ function Canvas() { ...@@ -770,11 +786,16 @@ function Canvas() {
data.forEach(function (d, i) { data.forEach(function (d, i) {
var p = d.sprite.position; var p = d.sprite.position;
var x = (p.x / scale1) + translate[0] / zoomScale; var x = p.x / scale1 + translate[0] / zoomScale;
var y = ((p.y / scale1) + (translate[1]) / zoomScale); var y = p.y / scale1 + translate[1] / zoomScale;
var padding = 5; var padding = 5;
if (x > (-padding) && x < ((width / zoomScale) + padding) && y + height < (height / zoomScale + padding) && y > (height * -1) - padding) { if (
x > -padding &&
x < width / zoomScale + padding &&
y + height < height / zoomScale + padding &&
y > height * -1 - padding
) {
d.visible = true; d.visible = true;
} else { } else {
d.visible = false; d.visible = false;
...@@ -790,11 +811,11 @@ function Canvas() { ...@@ -790,11 +811,11 @@ function Canvas() {
if (d.visible && d.loaded && d.active) d.alpha2 = 1; if (d.visible && d.loaded && d.active) d.alpha2 = 1;
else if (d.visible && !d.loaded && d.active) loadImagesCue.push(d); else if (d.visible && !d.loaded && d.active) loadImagesCue.push(d);
else d.alpha2 = 0; else d.alpha2 = 0;
}) });
} else { } else {
data.forEach(function (d) { data.forEach(function (d) {
d.alpha2 = 0; d.alpha2 = 0;
}) });
} }
} }
...@@ -805,16 +826,16 @@ function Canvas() { ...@@ -805,16 +826,16 @@ function Canvas() {
} }
// console.log("load", d) // console.log("load", d)
var url = config.loader.textures.detail.url + d.id + '.jpg' var url = config.loader.textures.detail.url + d.id + ".jpg";
var texture = new PIXI.Texture.fromImage(url, true) var texture = new PIXI.Texture.fromImage(url, true);
var sprite = new PIXI.Sprite(texture); var sprite = new PIXI.Sprite(texture);
var update = function () { var update = function () {
sleep = false sleep = false;
} };
sprite.on('added', update) sprite.on("added", update);
texture.once('update', update) texture.once("update", update);
sprite.scale.x = d.scaleFactor; sprite.scale.x = d.scaleFactor;
sprite.scale.y = d.scaleFactor; sprite.scale.y = d.scaleFactor;
...@@ -828,51 +849,51 @@ function Canvas() { ...@@ -828,51 +849,51 @@ function Canvas() {
d.sprite2 = sprite; d.sprite2 = sprite;
d.alpha2 = d.highlight; d.alpha2 = d.highlight;
d.loaded = true; d.loaded = true;
sleep = false sleep = false;
} }
function loadBigImage(d) { function loadBigImage(d) {
if (!config.loader.textures.big) { if (!config.loader.textures.big) {
loadMiddleImage(d) loadMiddleImage(d);
return return;
} }
state.lastZoomed = d.id; state.lastZoomed = d.id;
var page = d.page ? '_' + d.page : '' var page = d.page ? "_" + d.page : "";
var url = config.loader.textures.big.url + d.id + page + ".jpg"; var url = config.loader.textures.big.url + d.id + page + ".jpg";
var texture = new PIXI.Texture.fromImage(url, true) var texture = new PIXI.Texture.fromImage(url, true);
var sprite = new PIXI.Sprite(texture); var sprite = new PIXI.Sprite(texture);
var res = config.loader.textures.big.size var res = config.loader.textures.big.size;
var updateSize = function () { var updateSize = function () {
var size = Math.max(texture.width, texture.height) var size = Math.max(texture.width, texture.height);
sprite.scale.x = sprite.scale.y = (imageSize3 / size) * d.scaleFactor; sprite.scale.x = sprite.scale.y = (imageSize3 / size) * d.scaleFactor;
sleep = false sleep = false;
} };
sprite.on('added', updateSize) sprite.on("added", updateSize);
texture.once('update', updateSize) texture.once("update", updateSize);
if (d.imagenum) { if (d.imagenum) {
sprite.on("mousemove", function (s) { sprite.on("mousemove", function (s) {
var pos = s.data.getLocalPosition(s.currentTarget) var pos = s.data.getLocalPosition(s.currentTarget);
s.currentTarget.cursor = pos.x > 0 ? "e-resize" : "w-resize" s.currentTarget.cursor = pos.x > 0 ? "e-resize" : "w-resize";
}) });
sprite.on("click", function (s) { sprite.on("click", function (s) {
if (drag) return if (drag) return;
s.stopPropagation() s.stopPropagation();
spriteClick = true spriteClick = true;
var pos = s.data.getLocalPosition(s.currentTarget) var pos = s.data.getLocalPosition(s.currentTarget);
var dir = pos.x > 0 ? 1 : -1 var dir = pos.x > 0 ? 1 : -1;
var page = d.page + dir var page = d.page + dir;
var nextPage = page var nextPage = page;
if (page > d.imagenum - 1) nextPage = 0 if (page > d.imagenum - 1) nextPage = 0;
if (page < 0) nextPage = d.imagenum - 1 if (page < 0) nextPage = d.imagenum - 1;
canvas.changePage(d.id, nextPage) canvas.changePage(d.id, nextPage);
}) });
sprite.interactive = true; sprite.interactive = true;
} }
...@@ -883,14 +904,14 @@ function Canvas() { ...@@ -883,14 +904,14 @@ function Canvas() {
sprite._data = d; sprite._data = d;
d.big = true; d.big = true;
stage5.addChild(sprite); stage5.addChild(sprite);
sleep = false sleep = false;
} }
function clearBigImages() { function clearBigImages() {
while (stage5.children[0]) { while (stage5.children[0]) {
stage5.children[0]._data.big = false; stage5.children[0]._data.big = false;
stage5.removeChild(stage5.children[0]); stage5.removeChild(stage5.children[0]);
sleep = false sleep = false;
} }
} }
...@@ -916,7 +937,12 @@ function Canvas() { ...@@ -916,7 +937,12 @@ function Canvas() {
//console.log(node, x , x1 , best.d); //console.log(node, x , x1 , best.d);
//return; //return;
// exclude node if point is farther away than best distance in either axis // exclude node if point is farther away than best distance in either axis
if (x < x1 - best.d || x > x2 + best.d || y < y1 - best.d || y > y2 + best.d) { if (
x < x1 - best.d ||
x > x2 + best.d ||
y < y1 - best.d ||
y > y2 + best.d
) {
return best; return best;
} }
// test point if there is one, potentially updating best // test point if there is one, potentially updating best
...@@ -935,17 +961,18 @@ function Canvas() { ...@@ -935,17 +961,18 @@ function Canvas() {
// and then recurse on most likely kids first, so we quickly find a // and then recurse on most likely kids first, so we quickly find a
// nearby point and then exclude many larger rectangles later // nearby point and then exclude many larger rectangles later
var kids = node.nodes; var kids = node.nodes;
var rl = (2 * x > x1 + x2), var rl = 2 * x > x1 + x2,
bt = (2 * y > y1 + y2); bt = 2 * y > y1 + y2;
if (kids[bt * 2 + rl]) best = nearest(x, y, best, kids[bt * 2 + rl]); if (kids[bt * 2 + rl]) best = nearest(x, y, best, kids[bt * 2 + rl]);
if (kids[bt * 2 + (1 - rl)]) best = nearest(x, y, best, kids[bt * 2 + (1 - rl)]); if (kids[bt * 2 + (1 - rl)])
if (kids[(1 - bt) * 2 + rl]) best = nearest(x, y, best, kids[(1 - bt) * 2 + rl]); best = nearest(x, y, best, kids[bt * 2 + (1 - rl)]);
if (kids[(1 - bt) * 2 + (1 - rl)]) best = nearest(x, y, best, kids[(1 - bt) * 2 + (1 - rl)]); if (kids[(1 - bt) * 2 + rl])
best = nearest(x, y, best, kids[(1 - bt) * 2 + rl]);
if (kids[(1 - bt) * 2 + (1 - rl)])
best = nearest(x, y, best, kids[(1 - bt) * 2 + (1 - rl)]);
return best; return best;
} }
return canvas; return canvas;
} }
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment