wiki.erg.be/map
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases Wiki Activity

other changes

Browse Source
This commit is contained in:
Michael Murtaugh
2019-07-10 09:04:59 +02:00
parent 5ac253c712
commit 7e379b97c9
7 changed files with 447 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/wikimap.js
View File

@@ -1,7 +1,7 @@
import { event, select, selectAll} from 'd3-selection';
import { values, set, map } from 'd3-collection';
import { drag } from 'd3-drag';
import { zoom } from 'd3-zoom';
import { zoom, zoomIdentity, zoomTransform } from 'd3-zoom';
import { forceSimulation, forceLink, forceManyBody, forceCenter, forceX, forceY, forceRadial } from 'd3-force';
import { Wiki, Page } from './wiki.js';
import EventEmitter from 'eventemitter3';
@@ -15,8 +15,8 @@ export class Map {
var width = 600,
height = 600;
this.zoom_level = opts.zoom || 1.5;
this.apiurl = opts.apiurl;
this.init_svg(opts.svg);
this.categorylabel = opts.categorylabel || "Category";
this.symbols_src = opts.symbols;
this.categorydiv = select(opts.categorydiv);
@@ -29,6 +29,7 @@ export class Map {
// this.net = new ForceNet({});
// this.net.on("nodeclick", this.nodeclick.bind(this));
this.svg = null;
this.init_svg(opts.svg);
this.historylinks = {};
this.links = null;
this.highlight_category = null;
@@ -114,9 +115,9 @@ export class Map {
this.rect = this.svg.append("rect")
.attr("width", 1000)
.attr("height", 1000)
.style("fill", "none")
.style("pointer-events", "all")
.call(this.zoom);
.style("fill", "none");
// .style("pointer-events", "all")
// .call(this.zoom);
this.content = this.svg.append("g")
.attr("id", "content"),
this.linksg = this.content.append("g")
@@ -205,11 +206,17 @@ export class Map {
this.categorydiv
.selectAll("div.cat")
.classed("highlight", d=> d.page ? d.page.highlight : false);
var data = {nodes: this.wiki.get_nodes(), links: values(this.all_links_by_key)};
var data = {nodes: this.get_nodes(), links: values(this.all_links_by_key)};
this.update_node_counts()
this.update_graph(data);
}
get_nodes () {
var nodes = this.wiki.get_nodes();
nodes = nodes.filter(d => d.linked || d.active || d.active2 || d.highlight);
return nodes;
}
async set_active_page (page) {
console.log("wikimap: set_active_page:", page.title);
if (page === this.active_page) {
@@ -275,10 +282,13 @@ export class Map {
this.active_page = page;
this.active_page.active = true;
this.linked_nodes_set_active(this.active_page, true);
setTimeout(() => {
this.centerOnItem(page, 1000);
}, 1000);
this.events.emit("page", this.active_page);
var data = {nodes: this.wiki.get_nodes(), links: values(this.all_links_by_key)};
var data = {nodes: this.get_nodes(), links: values(this.all_links_by_key)};
this.update_node_counts()
this.update_graph(data);
// this.update_nodes();
@@ -475,6 +485,44 @@ export class Map {
this.simulation.alpha(0.5).restart();
}
centerOnItem(item, duration) {
var bounds = this.svg.node().getBoundingClientRect();
var curt = zoomTransform(this.rect.node());
console.log("centerOnItem", this.zoom_level, "item", item);
var zoom_level = this.zoom_level ? this.zoom_level : curt.k;
var ITEM_SIZE = 36;
if (item && item.x !== undefined) {
var transform = function () {
return zoomIdentity
.translate(bounds.width / 2, bounds.height / 2)
.scale(zoom_level)
.translate(-item.x, -item.y);
};
if (duration) {
this.rect.transition().duration(duration).call(this.zoom.transform, transform);
} else {
this.rect.call(this.zoom.transform, transform);
}
} else {
console.log("NO ITEM");
var transform = function () {
return zoomIdentity
.scale(1);
};
this.rect.call(this.zoom.transform, transform);
}
}
do_zoom (f, transition) {
this.rect.call(this.zoom.scaleBy, f);
}
zoom_in () {
this.do_zoom(1.25);
}
zoom_out () {
this.do_zoom(1/1.25);
}
}