+
-
+
+
+
@@ -753,5 +815,12 @@
Type:
no
-
-
\ No newline at end of file
+
+
+
+
+
+
+
+
+
diff --git a/libs/jquery.ui.touch-punch.min.js b/libs/jquery.ui.touch-punch.min.js
new file mode 100644
index 000000000..31272ce6f
--- /dev/null
+++ b/libs/jquery.ui.touch-punch.min.js
@@ -0,0 +1,11 @@
+/*!
+ * jQuery UI Touch Punch 0.2.3
+ *
+ * Copyright 2011–2014, Dave Furfero
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ *
+ * Depends:
+ * jquery.ui.widget.js
+ * jquery.ui.mouse.js
+ */
+!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);
\ No newline at end of file
diff --git a/libs/polylabel.min.js b/libs/polylabel.min.js
new file mode 100644
index 000000000..e2faf0b1e
--- /dev/null
+++ b/libs/polylabel.min.js
@@ -0,0 +1 @@
+!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).polylabel=t()}}(function(){return function t(n,e,r){function o(a,u){if(!e[a]){if(!n[a]){var f="function"==typeof require&&require;if(!u&&f)return f(a,!0);if(i)return i(a,!0);var h=new Error("Cannot find module '"+a+"'");throw h.code="MODULE_NOT_FOUND",h}var s=e[a]={exports:{}};n[a][0].call(s.exports,function(t){var e=n[a][1][t];return o(e||t)},s,s.exports,t,n,e,r)}return e[a].exports}for(var i="function"==typeof require&&require,a=0;a
n!=l[1]>n&&t<(l[0]-d[0])*(n-d[1])/(l[1]-d[1])+d[0]&&(r=!r),o=Math.min(o,a(t,n,d,l))}return(r?1:-1)*Math.sqrt(o)}(t,n,r),this.max=this.d+this.h*Math.SQRT2}function a(t,n,e,r){var o=e[0],i=e[1],a=r[0]-o,u=r[1]-i;if(0!==a||0!==u){var f=((t-o)*a+(n-i)*u)/(a*a+u*u);f>1?(o=r[0],i=r[1]):f>0&&(o+=a*f,i+=u*f)}return(a=t-o)*a+(u=n-i)*u}n.exports=function(t,n,e){var a,u,f,h;n=n||1;for(var s=0;sf)&&(f=d[0]),(!s||d[1]>h)&&(h=d[1])}for(var l=f-a,p=h-u,c=Math.min(l,p),v=c/2,g=new r(null,o),x=a;xw.d&&(w=b,e&&console.log("found best %d after %d probes",Math.round(1e4*b.d)/1e4,m)),b.max-w.d<=n||(v=b.h/2,g.push(new i(b.x-v,b.y-v,v,t)),g.push(new i(b.x+v,b.y-v,v,t)),g.push(new i(b.x-v,b.y+v,v,t)),g.push(new i(b.x+v,b.y+v,v,t)),m+=4)}e&&(console.log("num probes: "+m),console.log("best distance: "+w.d));return[w.x,w.y]}},{tinyqueue:2}],2:[function(t,n,e){"use strict";function r(t,n){if(!(this instanceof r))return new r(t,n);if(this.data=t||[],this.length=this.data.length,this.compare=n||o,t)for(var e=Math.floor(this.length/2);e>=0;e--)this._down(e)}function o(t,n){return tn?1:0}function i(t,n,e){var r=t[n];t[n]=t[e],t[e]=r}n.exports=r,r.prototype={push:function(t){this.data.push(t),this.length++,this._up(this.length-1)},pop:function(){var t=this.data[0];return this.data[0]=this.data[this.length-1],this.length--,this.data.pop(),this._down(0),t},peek:function(){return this.data[0]},_up:function(t){for(var n=this.data,e=this.compare;t>0;){var r=Math.floor((t-1)/2);if(!(e(n[t],n[r])<0))break;i(n,r,t),t=r}},_down:function(t){for(var n=this.data,e=this.compare,r=this.length;;){var o=2*t+1,a=o+1,u=t;if(o>>1],e)>=0?o=a+1:r=a;return o},e.exports=function(){function t(t){var e;this.options=t,this.comparator=this.options.comparator,this.data=(null!=(e=this.options.initialValues)?e.slice(0):void 0)||[],this.data.sort(this.comparator).reverse()}return t.prototype.queue=function(t){var e;e=r(this.data,t,this.comparator),this.data.splice(e,0,t)},t.prototype.dequeue=function(){return this.data.pop()},t.prototype.peek=function(){return this.data[this.data.length-1]},t.prototype.clear=function(){this.data.length=0},t}()},{}],4:[function(t,e,i){e.exports=function(){function t(t){var e,i,r,o,a,n,s,h;for(this.comparator=(null!=t?t.comparator:void 0)||function(t,e){return t-e},this.pageSize=(null!=t?t.pageSize:void 0)||512,this.length=0,s=0;1<a;0<=a?++i:--i)e.push(null);if(this._memory=[],this._mask=this.pageSize-1,t.initialValues)for(r=0,o=(n=t.initialValues).length;r0&&(this._write(1,e),this._bubbleDown(1,e)),t},t.prototype.peek=function(){return this._read(1)},t.prototype.clear=function(){this.length=0,this._memory.length=0},t.prototype._write=function(t,e){var i;for(i=t>>this._shift;i>=this._memory.length;)this._memory.push(this._emptyMemoryPageTemplate.slice(0));return this._memory[i][t&this._mask]=e},t.prototype._read=function(t){return this._memory[t>>this._shift][t&this._mask]},t.prototype._bubbleUp=function(t,e){var i,r,o,a;for(i=this.comparator;t>1&&(r=t&this._mask,t3?o=t&~this._mask|r>>1:r<2?(o=t-this.pageSize>>this._shift,o+=o&~(this._mask>>1),o|=this.pageSize>>1):o=t-2,!(i(a=this._read(o),e)<0));)this._write(o,e),this._write(t,a),t=o},t.prototype._bubbleDown=function(t,e){var i,r,o,a,n;for(n=this.comparator;tthis._mask&&!(t&this._mask-1)?i=r=t+2:t&this.pageSize>>1?(i=(t&~this._mask)>>1,r=(i=(i|=t&this._mask>>1)+1<0)for(t=e=1,i=this.data.length;1<=i?ei;t=1<=i?++e:--e)this._bubbleUp(t)},t.prototype.queue=function(t){this.data.push(t),this._bubbleUp(this.data.length-1)},t.prototype.dequeue=function(){var t,e;return e=this.data[0],t=this.data.pop(),this.data.length>0&&(this.data[0]=t,this._bubbleDown(0)),e},t.prototype.peek=function(){return this.data[0]},t.prototype.clear=function(){this.length=0,this.data.length=0},t.prototype._bubbleUp=function(t){for(var e,i;t>0&&(e=t-1>>>1,this.comparator(this.data[t],this.data[e])<0);)i=this.data[e],this.data[e]=this.data[t],this.data[t]=i,t=e},t.prototype._bubbleDown=function(t){var e,i,r,o,a;for(e=this.data.length-1;o=(i=1+(t<<1))+1,r=t,i<=e&&this.comparator(this.data[i],this.data[r])<0&&(r=i),o<=e&&this.comparator(this.data[o],this.data[r])<0&&(r=o),r!==t;)a=this.data[r],this.data[r]=this.data[t],this.data[t]=a,t=r},t}()},{}]},{},[1])(1)});
\ No newline at end of file
diff --git a/libs/quantize.min.js b/libs/quantize.min.js
new file mode 100644
index 000000000..4d8228eb9
--- /dev/null
+++ b/libs/quantize.min.js
@@ -0,0 +1 @@
+if(!pv)var pv={map:function(r,n){var o={};return n?r.map(function(r,t){return o.index=t,n.call(o,r)}):r.slice()},naturalOrder:function(r,n){return rn?1:0},sum:function(r,n){var o={};return r.reduce(n?function(r,t,u){return o.index=u,r+n.call(o,t)}:function(r,n){return r+n},0)},max:function(r,n){return Math.max.apply(null,n?pv.map(r,n):r)}};var MMCQ=function(){var r=5,n=8-r,o=1e3,t=.75;function u(n,o,t){return(n<<2*r)+(o<s/2){for(u=n.copy(),e=n.copy(),i=(o=c-n[f])<=(t=n[a]-c)?Math.min(n[a]-1,~~(c+t/2)):Math.max(n[f],~~(c-1-o/2));!p[i];)i++;for(v=l[i];!v&&p[i-1];)v=l[--i];return u[a]=i,e[f]=u[a]+1,[u,e]}}}return i.prototype={volume:function(r){var n=this;return n._volume&&!r||(n._volume=(n.r2-n.r1+1)*(n.g2-n.g1+1)*(n.b2-n.b1+1)),n._volume},count:function(r){var n=this,o=n.histo;if(!n._count_set||r){var t,e,i,c=0;for(t=n.r1;t<=n.r2;t++)for(e=n.g1;e<=n.g2;e++)for(i=n.b1;i<=n.b2;i++)c+=o[u(t,e,i)]||0;n._count=c,n._count_set=!0}return n._count},copy:function(){var r=this;return new i(r.r1,r.r2,r.g1,r.g2,r.b1,r.b2,r.histo)},avg:function(n){var o=this,t=o.histo;if(!o._avg||n){var e,i,c,f,a=0,v=1<<8-r,s=0,p=0,l=0;for(i=o.r1;i<=o.r2;i++)for(c=o.g1;c<=o.g2;c++)for(f=o.b1;f<=o.b2;f++)a+=e=t[u(i,c,f)]||0,s+=e*(i+.5)*v,p+=e*(c+.5)*v,l+=e*(f+.5)*v;o._avg=a?[~~(s/a),~~(p/a),~~(l/a)]:[~~(v*(o.r1+o.r2+1)/2),~~(v*(o.g1+o.g2+1)/2),~~(v*(o.b1+o.b2+1)/2)]}return o._avg},contains:function(r){var o=this,t=r[0]>>n;return gval=r[1]>>n,bval=r[2]>>n,t>=o.r1&&t<=o.r2&&gval>=o.g1&&gval<=o.g2&&bval>=o.b1&&bval<=o.b2}},c.prototype={push:function(r){this.vboxes.push({vbox:r,color:r.avg()})},palette:function(){return this.vboxes.map(function(r){return r.color})},size:function(){return this.vboxes.size()},map:function(r){for(var n=this.vboxes,o=0;o251&&t[1]>251&&t[2]>251&&(r[o].color=[255,255,255])}},{quantize:function(a,v){if(v++,!a.length||v<2||v>256)return!1;var s,p,l,h,b,g,m=(s=a,g=new Array(1<<3*r),s.forEach(function(r){l=r[0]>>n,h=r[1]>>n,b=r[2]>>n,p=u(l,h,b),g[p]=(g[p]||0)+1}),g);m.forEach(function(){});var x,_,d,w,z,M,y,k,O,E,q=(x=m,z=1e6,M=0,y=1e6,k=0,O=1e6,E=0,a.forEach(function(r){_=r[0]>>n,d=r[1]>>n,w=r[2]>>n,_M&&(M=_),dk&&(k=d),wE&&(E=w)}),new i(z,M,y,k,O,E,x)),A=new e(function(r,n){return pv.naturalOrder(r.count(),n.count())});function C(r,n){for(var t,u=1,e=0;e=n)return;if(e++>o)return}else r.push(t),e++}A.push(q),C(A,t*v);for(var Q=new e(function(r,n){return pv.naturalOrder(r.count()*r.volume(),n.count()*n.volume())});A.size();)Q.push(A.pop());C(Q,v-Q.size());for(var j=new c;Q.size();)j.push(Q.pop());return j}}}();
\ No newline at end of file
diff --git a/script.js b/script.js
index 174b63eb2..a6031ba0d 100644
--- a/script.js
+++ b/script.js
@@ -3,7 +3,7 @@
fantasyMap();
function fantasyMap() {
// Version control
- var version = "0.55b";
+ var version = "0.56b";
document.title += " v. " + version;
// Declare variables
@@ -19,8 +19,8 @@ function fantasyMap() {
overlay = viewbox.append("g").attr("id", "overlay"),
cults = viewbox.append("g").attr("id", "cults"),
routes = viewbox.append("g").attr("id", "routes"),
- roads = routes.append("g").attr("id", "roads"),
- trails = routes.append("g").attr("id", "trails"),
+ roads = routes.append("g").attr("id", "roads").attr("data-type", "land"),
+ trails = routes.append("g").attr("id", "trails").attr("data-type", "land"),
rivers = viewbox.append("g").attr("id", "rivers"),
terrain = viewbox.append("g").attr("id", "terrain"),
regions = viewbox.append("g").attr("id", "regions"),
@@ -29,46 +29,42 @@ function fantasyMap() {
neutralBorders = borders.append("g").attr("id", "neutralBorders"),
coastline = viewbox.append("g").attr("id", "coastline"),
lakes = viewbox.append("g").attr("id", "lakes"),
- searoutes = routes.append("g").attr("id", "searoutes"),
+ searoutes = routes.append("g").attr("id", "searoutes").attr("data-type", "sea"),
labels = viewbox.append("g").attr("id", "labels"),
icons = viewbox.append("g").attr("id", "icons"),
burgs = icons.append("g").attr("id", "burgs"),
ruler = viewbox.append("g").attr("id", "ruler"),
- debug = viewbox.append("g").attr("id", "debug");
+ debug = viewbox.append("g").attr("id", "debug"),
+ capitals = labels.append("g").attr("id", "capitals"),
+ towns = labels.append("g").attr("id", "towns"),
+ countries = labels.append("g").attr("id", "countries");
- // Declare styles
- viewbox.on("touchmove mousemove", moved).on("click", clicked);
- landmass.attr("fill", "#eef6fb");
- coastline.attr("opacity", .5).attr("stroke", "#1f3846").attr("stroke-width", .7).attr("filter", "url(#dropShadow)");
- regions.attr("opacity", .55);
- stateBorders.attr("opacity", .8).attr("stroke", "#56566d").attr("stroke-width", .5).attr("stroke-dasharray", "1.2 1.5").attr("stroke-linecap", "butt");
- neutralBorders.attr("opacity", .8).attr("stroke", "#56566d").attr("stroke-width", .3).attr("stroke-dasharray", "1 1.5").attr("stroke-linecap", "butt");
- cults.attr("opacity", .6);
- rivers.attr("fill", "#5d97bb");
- lakes.attr("fill", "#a6c1fd").attr("stroke", "#477794").attr("stroke-width", .3);
- burgs.attr("fill", "#ffffff").attr("stroke", "#3e3e4b");
- roads.attr("opacity", .8).attr("stroke", "#d06324").attr("stroke-width", .4).attr("stroke-dasharray", "1 2").attr("stroke-linecap", "round");
- trails.attr("opacity", .8).attr("stroke", "#d06324").attr("stroke-width", .1).attr("stroke-dasharray", ".5 1").attr("stroke-linecap", "round");
- searoutes.attr("opacity", .8).attr("stroke", "#ffffff").attr("stroke-width", .2).attr("stroke-dasharray", "1 2").attr("stroke-linecap", "round");
- grid.attr("stroke", "#808080").attr("stroke-width", .1);
- ruler.style("display", "none").attr("filter", "url(#dropShadow)");
- overlay.attr("stroke", "#808080").attr("stroke-width", .5);
+ // main data variables
+ var voronoi, diagram, polygons, points = [], sample;
// Common variables
- var mapWidth, mapHeight,
- customization, history = [], historyStage = -1, elSelected,
+ var graphWidth, graphHeight, // voronoi graph extention, should be stable for each map
+ svgWidth, svgHeight, // svg canvas resolution, can vary for each map
+ allowResize = true,
+ modules = {}, customization, history = [], historyStage = 0, elSelected,
cells = [], land = [], riversData = [], manors = [], states = [],
- queue = [], chain = {}, island = 0, cultureTree, manorTree, shift = false;
+ queue = [], chain = {}, fonts = [],
+ island = 0, cultureTree, manorTree;
- // canvas
+ // canvas
var canvas = document.getElementById("canvas"),
- ctx = canvas.getContext("2d");
+ ctx = canvas.getContext("2d");
// Color schemes;
var color = d3.scaleSequential(d3.interpolateSpectral),
colors8 = d3.scaleOrdinal(d3.schemeSet2),
colors20 = d3.scaleOrdinal(d3.schemeCategory20);
-
+
+ // D3 drag and zoom behavior
+ var scale = 1, viewX = 0, viewY = 0, initView = [1, 0, 0];
+ var zoom = d3.zoom().scaleExtent([1, 20]).on("zoom", zoomed);
+ svg.call(zoom);
+
// randomize options
var graphSize = +sizeInput.value,
manorsCount = manorsOutput.innerHTML = +manorsInput.value,
@@ -78,66 +74,38 @@ function fantasyMap() {
sharpness = +sharpnessInput.value,
precipitation = +precInput.value;
- // Groups for labels
- var fonts = ["Amatic+SC:700", "Georgia", "Times New Roman", "Arial", "Comic Sans MS", "Lucida Sans Unicode", "Verdana", "Courier New"],
- size = rn(10 - capitalsCount / 20),
- capitals = labels.append("g").attr("id", "capitals").attr("fill", "#3e3e4b").attr("opacity", 1).attr("font-family", "Amatic SC").attr("data-font", "Amatic+SC:700").attr("font-size", size).attr("data-size", size),
- towns = labels.append("g").attr("id", "towns").attr("fill", "#3e3e4b").attr("opacity", 1).attr("font-family", "Amatic SC").attr("data-font", "Amatic+SC:700").attr("font-size", 4).attr("data-size", 4),
- size = rn(18 - capitalsCount / 6),
- countries = labels.append("g").attr("id", "countries").attr("fill", "#3e3e4b").attr("opacity", 1).attr("font-family", "Amatic SC").attr("data-font", "Amatic+SC:700").attr("font-size", size).attr("data-size", size),
- addedLabels = labels.append("g").attr("id", "addedLabels").attr("fill", "#3e3e4b").attr("opacity", 1).attr("font-family", "Amatic SC").attr("data-font", "Amatic+SC:700").attr("font-size", 18).attr("data-size", 18);
-
// Get screen size
- if (localStorage.getItem("screenSize")) {
- var stored = localStorage.getItem("screenSize").split(",");
- mapWidthInput.value = +stored[0];
- mapHeightInput.value = +stored[1];
- $(".fullscreen").removeClass("fullscreen");
- $("#mapScreenSize").addClass("icon-resize-full-alt").removeClass("icon-resize-small");
- } else {
- mapWidthInput.value = $(window).width();
- mapHeightInput.value = $(window).height();
- }
- applyMapSize();
-
- // toggle off loading screen and on menus
- $("#loading").remove();
- $("#statusbar").css("top", mapHeight - 20).show();
- $("#optionsContainer").show();
-
+ mapWidthInput.value = window.innerWidth;
+ mapHeightInput.value = window.innerHeight;
+ svgWidth = graphWidth = +mapWidthInput.value;
+ svgHeight = graphHeight = +mapHeightInput.value;
+ svg.attr("width", svgWidth).attr("height", svgHeight);
+
+ // D3 Line generator variables
+ var lineGen = d3.line().x(function(d) {return d.scX;}).y(function(d) {return d.scY;});
+
// append ocean pattern
- oceanPattern.append("rect").attr("x", 0).attr("y", 0)
- .attr("width", mapWidth).attr("height", mapHeight).attr("class", "pattern")
- .attr("stroke", "none").attr("fill", "url(#oceanPattern)");
- oceanLayers.append("rect").attr("x", 0).attr("y", 0)
- .attr("width", mapWidth).attr("height", mapHeight).attr("id", "oceanBase").attr("fill", "#5167a9");
+ oceanPattern.append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%").attr("fill", "url(#oceanic)").attr("stroke", "none");
+ oceanLayers.append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%").attr("id", "oceanBase");
- // D3 Line generator
- var scX = d3.scaleLinear().domain([0, mapWidth]).range([0, mapWidth]),
- scY = d3.scaleLinear().domain([0, mapHeight]).range([0, mapHeight]),
- lineGen = d3.line().x(function(d) {return scX(d.scX);}).y(function(d) {return scY(d.scY);});
+ applyDefaultStyle();
- // main data variables
- var voronoi = d3.voronoi().extent([[0, 0], [mapWidth, mapHeight]]);
- var diagram, polygons, points = [], sample;
+ // toggle off loading screen and on menus
+ $("#loading, #initial").remove();
+ svg.style("background-color", "#000000");
+ $("#optionsContainer").show();
+ fitStatusBar();
- // D3 drag and zoom behavior
- var scale = 1, viewX = 0, viewY = 0;
- var zoom = d3.zoom().scaleExtent([1, 40]) // 40x is default max zoom
- .translateExtent([[0, 0], [mapWidth, mapHeight]]) // 0,0 as default extent
- .on("zoom", zoomed);
- svg.call(zoom);
-
$("#optionsContainer").draggable({handle: ".drag-trigger", snap: "svg", snapMode: "both"});
$("#mapLayers").sortable({items: "li:not(.solid)", cancel: ".solid", update: moveLayer});
$("#templateBody").sortable({items: "div:not(div[data-type='Mountain'])"});
$("#mapLayers, #templateBody").disableSelection();
-
+
var drag = d3.drag()
.container(function() {return this;})
.subject(function() {var p=[d3.event.x, d3.event.y]; return [p, p];})
.on("start", dragstarted);
-
+
function zoomed() {
var scaleDiff = Math.abs(scale - d3.event.transform.k);
scale = d3.event.transform.k;
@@ -162,13 +130,9 @@ function fantasyMap() {
var el = d3.select(this);
var desired = +el.attr("data-size");
var relative = rn((desired + (desired / scale)) / 2, 2);
+ if (relative < 2) {relative = 2;}
el.attr("font-size", relative);
- var size = +el.attr("font-size");
- if ($("#activeZooming").hasClass("icon-eye-off") && size * scale < 6) {
- el.classed("hidden", true);
- } else {
- el.classed("hidden", false)
- }
+ el.classed("hidden", hideLabels.checked && relative * scale < 6);
});
if (ruler.size()) {
if (ruler.style("display") !== "none") {
@@ -178,7 +142,7 @@ function fantasyMap() {
ruler.selectAll("circle.center").attr("r", 1.2 * factor).attr("stroke-width", 0.3 * factor);
ruler.selectAll("text").attr("font-size", 10 * factor);
ruler.selectAll("line, path").attr("stroke-width", factor);
- }
+ }
}
}
@@ -191,43 +155,43 @@ function fantasyMap() {
// Zoom to specific point (x,y - coods, z - scale, d - duration)
function zoomTo(x, y, z, d) {
- var transform = d3.zoomIdentity.translate(x * -z + mapWidth / 2, y * -z + mapHeight / 2).scale(z);
- svg.transition().duration(d).call(zoom.transform, transform);
+ var transform = d3.zoomIdentity.translate(x * -z + graphWidth / 2, y * -z + graphHeight / 2).scale(z);
+ svg.transition().duration(d).call(zoom.transform, transform);
}
-
- // Reset zoom to initial with some duration
+
+ // Reset zoom to initial
function resetZoom(duration) {
- svg.transition().duration(duration).call(zoom.transform, d3.zoomIdentity);
+ zoom.scaleTo(svg, initView[0]);
}
+ addDragToUpload();
+
// Changelog dialog window
var storedVersion = localStorage.getItem("version"); // show message on load
if (storedVersion != version) {
- var message = "2018-03-30: The Fantasy Map Generator Demo is updated up to version " + version + ". Main features:
";
- message += "Countries Editor: add, remove, change borders, export data etc.";
- message += "Burgs Editor: add, rename, remove, change population or capital";
- message += "Scale Editor: set distance, area and population scales";
- message += "Measurers: linear distance, curve length and area measurers";
- message += "Scale bar: toggable auto-rourded and auto-sized bar";
- message += "Overlays: hex grid, square grid, wind rose";
- message += "
See ";
- message += "changelog";
- message += " for more details. Please report bugs ";
- message += "here";
- alertMessage.innerHTML = message;
+ alertMessage.innerHTML = `2018-05-06:
+ The Fantasy Map Generator Demo is updated up to version ${version}.
+ Main changes:
+ Performance improvement
+ Route editor
+ Countries and River editors fixes
+ Map saving and loading fixes
+ New loading screen
+
See changelog for older versions.
+ Please report bugs here`;
$("#alert").dialog(
- {resizable: false, title: "Fantasy Map Generator v. " + version, width: 400,
+ {resizable: false, title: "Fantasy Map Generator v. " + version, width: 280,
buttons: {
"Don't show again": function() {
localStorage.setItem("version", version);
- $(this).dialog("close");
+ $(this).dialog("close");
},
Close: function() {$(this).dialog("close");}
},
position: {my: "center", at: "center", of: "svg"}
});
}
-
+
generate(); // genarate map on load
invokeActiveZooming(); // to hide what need to be hidden
@@ -260,7 +224,7 @@ function fantasyMap() {
regionsInput.value = 7 + Math.floor(Math.random() * 10);
manorsInput.value = regionsInput.value * 27 + Math.floor(Math.random() * 300);
manorsCount = manorsOutput.innerHTML = manorsInput.value;
- capitalsCount = regionsOutput.innerHTML = regionsInput.value;
+ capitalsCount = regionsOutput.innerHTML = regionsInput.value;
precInput.value = 10 + Math.floor(Math.random() * 15);
precipitation = precOutput.value = +precInput.value;
}
@@ -270,7 +234,7 @@ function fantasyMap() {
console.time("placePoints");
points = [];
var radius = 5.9 / graphSize; // 5.9 is a radius to get 8k cells
- var sampler = poissonDiscSampler(mapWidth, mapHeight, radius);
+ var sampler = poissonDiscSampler(graphWidth, graphHeight, radius);
while (sample = sampler()) {
var x = rn(sample[0], 2);
var y = rn(sample[1], 2);
@@ -291,7 +255,7 @@ function fantasyMap() {
// Get cell info on mouse move (useful for debugging)
function moved() {
var point = d3.mouse(this);
- var i = diagram.find(point[0], point[1]).index;
+ var i = diagram.find(point[0], point[1]).index;
if (i) {
var p = cells[i]; // get cell
$("#lx").text(rn(point[0]));
@@ -306,18 +270,29 @@ function fantasyMap() {
if (customization === 1 && icons.selectAll(".tag").size() === 1) {
var x = +icons.select(".tag").attr("cx");
var y = +icons.select(".tag").attr("cy");
- icons.insert("line", ":first-child").attr("class", "line").attr("x1", x).attr("y1", y).attr("x2", point[0]).attr("y2", point[1]);
+ icons.insert("line", ":first-child").attr("class", "line")
+ .attr("x1", x).attr("y1", y).attr("x2", point[0]).attr("y2", point[1]);
}
// draw circle to show brush radius for Customization
var circle = icons.selectAll(".circle");
- var brush = $("#brushesButtons .pressed");
if (customization === 1 || customization === 2) {
+ var brush = $("#brushesButtons > .pressed");
if (customization === 1 && (brush.length === 0 || brush.hasClass("feature"))) {circle.remove(); return;}
if (customization === 2 && $("div.selected").length === 0) {circle.remove(); return;}
- var radius = customization === 1 ? brushRadius.value : countriesManuallyBrush.value;
+ var radius = customization === 1 ? brushRadius.value : countriesManuallyBrush.value;
var r = rn(6 / graphSize * radius, 1);
- if (circle.size() > 0) {circle.attr("r", r).attr("cx", point[0]).attr("cy", point[1]);}
- else {icons.insert("circle", ":first-child").attr("class", "circle").attr("r", r).attr("cx", point[0]).attr("cy", point[1]);}
+ let clr = "#666666;"
+ if (customization === 2) {
+ const state = +$("div.selected").attr("id").slice(5);
+ clr = states[state].color === "neutral" ? "white" :states[state].color;
+ }
+ if (circle.size() > 0) {
+ circle.attr("r", r).attr("cx", point[0]).attr("cy", point[1]).attr("stroke", clr);
+ } else {
+ icons.insert("circle", ":first-child").attr("class", "circle")
+ .attr("r", r).attr("stroke", color)
+ .attr("cx", point[0]).attr("cy", point[1]);
+ }
} else {circle.remove();}
}
@@ -326,8 +301,8 @@ function fantasyMap() {
if (e == undefined) {return "no";}
if (f) {return e.toFixed(f);}
return e;
- }
-
+ }
+
// Drag actions
function dragstarted() {
var x0 = d3.event.x, y0 = d3.event.y,
@@ -342,92 +317,57 @@ function fantasyMap() {
var rulerNew = ruler.append("g").attr("class", type).call(d3.drag().on("start", elementDrag));
var points = [{scX: rn(x0, 2), scY: rn(y0, 2)}];
if (opisometer) {
- var title =
+ var title =
`Opisometer is an instrument for measuring the lengths of arbitrary curved lines.
One dash shows 30 km (18.6 mi), approximate distance of a daily loaded march.
- Click on the label to remove the ruler from the map`;
+ Click on the label to remove the ruler from the map`;
rulerNew.append("title").text(title);
var curve = rulerNew.append("path").attr("class", "opisometer white").attr("stroke-width", factor);
var dash = rn(30 / distanceScale.value, 2);
var curveGray = rulerNew.append("path").attr("class", "opisometer gray").attr("stroke-dasharray", dash).attr("stroke-width", factor);
} else {
- var title =
+ var title =
`Planimeter is an instrument to determine the area of a two-dimensional shape.
- Click on the label to remove the ruler from the map`;
+ Click on the label to remove the ruler from the map`;
rulerNew.append("title").text(title);
- var curve = rulerNew.append("path").attr("class", "planimeter").attr("stroke-width", factor);
+ var curve = rulerNew.append("path").attr("class", "planimeter").attr("stroke-width", factor);
}
var text = rulerNew.append("text").attr("dy", -1).attr("font-size", 10 * factor);
}
-
+
d3.event.on("drag", function() {
x1 = d3.event.x, y1 = d3.event.y;
var c2 = diagram.find(x1, y1).index;
+ const circle = icons.selectAll(".circle");
// Heightmap customization
if (customization === 1) {
- if (c2 !== c1) {
- c1 = c2;
- var brush = $("#brushesButtons .pressed").attr("id");
- var power = +brushPower.value;
- if (brush === "brushHill") {add(c2, "hill", power);}
- if (brush === "brushPit") {addPit(1, power, c2);}
- if (!$("#brushesButtons .pressed").hasClass("feature")) {
- // move a circle to show actual change radius
- var radius = +brushRadius.value;
- var r = rn(6 / graphSize * radius, 1);
- var circle = icons.selectAll(".circle");
- if (circle.size() > 0) {circle.attr("r", r).attr("cx", x1).attr("cy", y1);}
- else {icons.insert("circle", ":first-child").attr("class", "circle").attr("r", r).attr("cx", x1).attr("cy", y1);}
- updateCellsInRadius(c2, c0);
- }
+ if (c2 === c1 && x1 !== x0 && y1 !== y0) {return;}
+ c1 = c2;
+ const brush = $("#brushesButtons > .pressed");
+ const id = brush.attr("id");
+ const power = +brushPower.value;
+ if (id === "brushHill") {add(c2, "hill", power); updateHeightmap();}
+ if (id === "brushPit") {addPit(1, power, c2); updateHeightmap();}
+ if (!brush.hasClass("feature")) {
+ // move a circle to show approximate change radius
+ const radius = +brushRadius.value;
+ const r = rn(6 / graphSize * radius, 1);
+ if (circle.size() > 0) {circle.attr("r", r).attr("cx", x1).attr("cy", y1);}
+ else {icons.insert("circle", ":first-child").attr("class", "circle").attr("r", r).attr("cx", x1).attr("cy", y1);}
+ updateCellsInRadius(c2, c0);
}
- mockHeightmap();
}
// Countries customization
if (customization === 2 && $("div.selected").length) {
// move a circle to show actual change radius
- var radius = +countriesManuallyBrush.value;
- var r = rn(6 / graphSize * radius, 1);
- var circle = icons.selectAll(".circle");
+ const radius = +countriesManuallyBrush.value;
+ const r = rn(6 / graphSize * radius, 1);
if (circle.size() > 0) {circle.attr("r", r).attr("cx", x1).attr("cy", y1);}
else {icons.insert("circle", ":first-child").attr("class", "circle").attr("r", r).attr("cx", x1).attr("cy", y1);}
- // define selection based on radius
- var selection = [c2];
- while (radius > 1) {
- var frontier = selection.slice();
- frontier.map(function(s) {
- cells[s].neighbors.forEach(function(e) {
- if (selection.indexOf(e) === -1) {selection.push(e);}
- });
- });
- radius--;
- }
- // change region within selection
- selection.map(function(c2) {
- if (cells[c2].height >= 0.2 && c2 !== c0) {
- var exists = regions.select("#temp").select("path[data-cell='"+c2+"']");
- if (exists.size()) {exists.remove();}
- var stateNew = +$("div.selected").attr("id").slice(5); // state
- if (states[stateNew].color === "neutral") {stateNew = "neutral";}
- var stateOld = cells[c2].region;
- if (stateNew !== stateOld) {
- var color = stateNew !== "neutral" ? states[stateNew].color : "white";
- if (stateOld !== "neutral") {
- if (cells[c2].manor !== states[stateOld].capital) {
- regions.select("#temp").append("path")
- .attr("data-cell", c2).attr("data-state", stateNew)
- .attr("d", "M" + polygons[c2].join("L") + "Z")
- .attr("fill", color).attr("stroke", color);
- }
- } else {
- regions.select("#temp").append("path")
- .attr("data-cell", c2).attr("data-state", stateNew)
- .attr("d", "M" + polygons[c2].join("L") + "Z")
- .attr("fill", color).attr("stroke", color);
- }
- }
- }
- });
+ if (c2 === c1 && x1 !== x0 && y1 !== y0) {return;}
+ c1 = c2;
+ selection = defineStateBrushSelection(c2);
+ changeStateForSelection(selection);
}
if (opisometer || planimeter) {
var l = points[points.length - 1];
@@ -444,15 +384,16 @@ function fantasyMap() {
} else {
lineGen.curve(d3.curveBasisClosed);
var d = round(lineGen(points));
- curve.attr("d", d);
+ curve.attr("d", d);
}
}
});
-
+
d3.event.on("end", function() {
+ if (customization === 1) {updateHistory();}
if (opisometer || planimeter) {
$("#addOpisometer, #addPlanimeter").removeClass("pressed");
- viewbox.style("cursor", "default").on(".drag", null);
+ restoreDefaultEvents();
if (opisometer) {
var dist = rn(curve.node().getTotalLength());
var c = curve.node().getPointAtLength(dist / 2);
@@ -478,46 +419,129 @@ function fantasyMap() {
}
});
}
-
+
+ // restore default drag (map panning) and cursor
+ function restoreDefaultEvents() {
+ viewbox.style("cursor", "default").on(".drag", null).on("click", null);
+ }
+
// remove parent element (usually if child is clicked)
function removeParent() {
$(this.parentNode).remove();
}
- // update cells in radius if non-feature brush selected on both single click and drag
- function updateCellsInRadius(cell, source) {
- var power = +brushPower.value;
- var radius = +brushRadius.value;
- var brush = $("#brushesButtons .pressed").attr("id");
- if ($("#brushesButtons .pressed").hasClass("feature")) {return;}
- // define selection besed on radius
- var selection = [cell];
- while (radius > 1) {
- var frontier = selection.slice();
- frontier.map(function(s) {
+ // define selection based on radius
+ function defineStateBrushSelection(center) {
+ let radius = +countriesManuallyBrush.value;
+ let selection = [center];
+ if (radius > 1) {selection = selection.concat(cells[center].neighbors);}
+ if (radius === 2) {return selection;}
+ let frontier = cells[center].neighbors;
+ while (radius > 2) {
+ let cycle = frontier.slice();
+ frontier = [];
+ cycle.map(function(s) {
cells[s].neighbors.forEach(function(e) {
- if (selection.indexOf(e) === -1) {selection.push(e);}
+ if (selection.indexOf(e) !== -1) {return;}
+ selection.push(e);
+ frontier.push(e);
});
});
radius--;
}
+ return $.grep(selection, function(e) {return (cells[e].height >= 0.2);});
+ }
+
+ // change region within selection
+ function changeStateForSelection(selection) {
+ let stateNew, exists, stateOld, color;
+ const temp = regions.select("#temp");
+ selection.map(function(index) {
+ // keep stateOld and stateNew as integers!
+ stateNew = +$("div.selected").attr("id").slice(5);
+ exists = temp.select("path[data-cell='"+index+"']");
+ let region = cells[index].region === "neutral" ? states.length - 1 : cells[index].region
+ stateOld = exists.size() ? +exists.attr("data-state") : region;
+ if (stateNew !== stateOld) {
+ // not allowed to re-draw calitals
+ if (states[stateOld].capital === cells[index].manor) {return;}
+ // define color
+ color = states[stateNew].color === "neutral" ? "white" : states[stateNew].color;
+ // change of append new element
+ if (exists.size()) {
+ exists.attr("data-cell", index).attr("data-state", stateNew)
+ .attr("d", "M" + polygons[index].join("L") + "Z")
+ .attr("fill", color).attr("stroke", color);
+ } else {
+ temp.append("path").attr("data-cell", index).attr("data-state", stateNew)
+ .attr("d", "M" + polygons[index].join("L") + "Z")
+ .attr("fill", color).attr("stroke", color);
+ }
+ }
+ });
+ }
+
+ // update cells in radius if non-feature brush selected
+ function updateCellsInRadius(cell, source) {
+ const power = +brushPower.value;
+ let radius = +brushRadius.value;
+ const brush = $("#brushesButtons > .pressed").attr("id");
+ if ($("#brushesButtons > .pressed").hasClass("feature")) {return;}
+ // define selection besed on radius
+ let selection = [cell];
+ if (radius > 1) {selection = selection.concat(cells[cell].neighbors);}
+ if (radius > 2) {
+ let frontier = cells[cell].neighbors;
+ while (radius > 2) {
+ let cycle = frontier.slice();
+ frontier = [];
+ cycle.map(function(s) {
+ cells[s].neighbors.forEach(function(e) {
+ if (selection.indexOf(e) !== -1) {return;}
+ selection.push(e);
+ frontier.push(e);
+ });
+ });
+ radius--;
+ }
+ }
// change each cell in the selection
- var sourceHeight = cells[source].height;
+ const sourceHeight = cells[source].height;
selection.map(function(s) {
+ // calculate changes
if (brush === "brushElevate") {
- if (cells[s].height < 0.2) {cells[s].height = 0.2}
+ if (cells[s].height < 0.2) {cells[s].height = 0.2}
else {cells[s].height += power;}
}
if (brush === "brushDepress") {cells[s].height -= power;}
if (brush === "brushAlign") {cells[s].height = sourceHeight;}
if (brush === "brushSmooth") {
- var heights = [cells[s].height];
+ let heights = [cells[s].height];
cells[s].neighbors.forEach(function(e) {heights.push(cells[e].height);});
cells[s].height = (cells[s].height + d3.mean(heights)) / 2;
}
});
+ updateHeightmapSelection(selection);
}
-
+
+ // Mouseclick events
+ function placeLinearFeature() {
+ const point = d3.mouse(this);
+ const index = getIndex(point);
+ let tag = icons.selectAll(".tag");
+ if (tag.size() === 0) {
+ tag = icons.append("circle").attr("data-cell", index).attr("class", "tag")
+ .attr("r", 3).attr("cx", point[0]).attr("cy", point[1]);
+ } else {
+ const from = +tag.attr("data-cell");
+ icons.selectAll(".tag, .line").remove();
+ const power = +brushPower.value;
+ const mod = $("#brushesButtons > .pressed").attr("id") === "brushRange" ? 1 : -1;
+ const selection = addRange(mod, power, from, index);
+ updateHeightmapSelection(selection);
+ }
+ }
+
// turn D3 polygons array into cell array, define neighbors for each cell
function detectNeighbors(withGrid) {
console.time("detectNeighbors");
@@ -551,14 +575,14 @@ function fantasyMap() {
if (mapTemplate === "Random") {
var rnd = Math.random();
if (rnd > 0.9) {mapTemplate = "Volcano";}
- if (rnd > 0.8 && rnd <= 0.9) {mapTemplate = "High Island";}
- if (rnd > 0.6 && rnd <= 0.8) {mapTemplate = "Low Island";}
- if (rnd > 0.35 && rnd <= 0.6) {mapTemplate = "Continents";}
+ if (rnd > 0.7 && rnd <= 0.9) {mapTemplate = "High Island";}
+ if (rnd > 0.5 && rnd <= 0.7) {mapTemplate = "Low Island";}
+ if (rnd > 0.35 && rnd <= 0.5) {mapTemplate = "Continents";}
if (rnd > 0.01 && rnd <= 0.35) {mapTemplate = "Archipelago";}
if (rnd <= 0.01) {mapTemplate = "Atoll";}
}
addMountain();
- var mod = rn((mapWidth + mapHeight) / 1500, 2); // add mod for big screens
+ var mod = rn((graphWidth + graphHeight) / 1500, 2); // add mod for big screens
if (mapTemplate === "Volcano") {templateVolcano(mod);}
if (mapTemplate === "High Island") {templateHighIsland(mod);}
if (mapTemplate === "Low Island") {templateLowIsland(mod);}
@@ -577,7 +601,7 @@ function fantasyMap() {
addRange(rn(4 * mod));
addRange(rn(-10 * mod));
}
-
+
// Heighmap Template: High Island
function templateHighIsland(mod) {
modifyHeights("all", 0.05, 0.9);
@@ -623,7 +647,7 @@ function fantasyMap() {
addRange(rn(-18 * mod));
addPit(rn(10 * mod));
modifyHeights("land", -0.05, 0.7);
- smoothHeights(4);
+ smoothHeights(4);
}
// Heighmap Template: Atoll
@@ -634,10 +658,10 @@ function fantasyMap() {
smoothHeights(1);
modifyHeights("0.27-10", 0, 0.1);
}
-
+
function addMountain() {
- var x = Math.floor(Math.random() * mapWidth / 3 + mapWidth / 3);
- var y = Math.floor(Math.random() * mapHeight * 0.2 + mapHeight * 0.4);
+ var x = Math.floor(Math.random() * graphWidth / 3 + graphWidth / 3);
+ var y = Math.floor(Math.random() * graphHeight * 0.2 + graphHeight * 0.4);
var rnd = diagram.find(x, y).index;
var height = Math.random() * 0.1 + 0.9;
add(rnd, "mountain", height);
@@ -649,8 +673,8 @@ function fantasyMap() {
var limit = 0;
do {
var height = Math.random() * 0.4 + 0.1;
- var x = Math.floor(Math.random() * mapWidth * (1-shift*2) + mapWidth * shift);
- var y = Math.floor(Math.random() * mapHeight * (1-shift*2) + mapHeight * shift);
+ var x = Math.floor(Math.random() * graphWidth * (1-shift*2) + graphWidth * shift);
+ var y = Math.floor(Math.random() * graphHeight * (1-shift*2) + graphHeight * shift);
var rnd = diagram.find(x, y).index;
limit ++;
} while (cells[rnd].height + height > 0.9 && limit < 100)
@@ -668,7 +692,7 @@ function fantasyMap() {
case 3: hRadius = 0.999; mRadius = 0.975; break;
case 4: hRadius = 0.9994; mRadius = 0.98; break;
}
- radius = type === "mountain" ? mRadius : hRadius;
+ radius = type === "mountain" ? mRadius : hRadius;
var queue = [start];
if (type === "mountain") {cells[start].height = height;}
for (i = 0; i < queue.length && height >= 0.01; i++) {
@@ -692,20 +716,21 @@ function fantasyMap() {
function addRange(mod, height, from, to) {
var session = Math.ceil(Math.random() * 100000);
var count = Math.abs(mod);
+ let range = [];
for (c = 0; c < count; c++) {
+ range = [];
var diff = 0, start = from, end = to;
- if (!start || !end) {
+ if (!start || !end) {
do {
- var xf = Math.floor(Math.random() * (mapWidth*0.7)) + mapWidth*0.15;
- var yf = Math.floor(Math.random() * (mapHeight*0.6)) + mapHeight*0.2;
+ var xf = Math.floor(Math.random() * (graphWidth*0.7)) + graphWidth*0.15;
+ var yf = Math.floor(Math.random() * (graphHeight*0.6)) + graphHeight*0.2;
start = diagram.find(xf, yf).index;
- var xt = Math.floor(Math.random() * (mapWidth*0.7)) + mapWidth*0.15;
- var yt = Math.floor(Math.random() * (mapHeight*0.6)) + mapHeight*0.2;
+ var xt = Math.floor(Math.random() * (graphWidth*0.7)) + graphWidth*0.15;
+ var yt = Math.floor(Math.random() * (graphHeight*0.6)) + graphHeight*0.2;
end = diagram.find(xt, yt).index;
diff = Math.hypot(xt - xf, yt - yf);
} while (diff < 150 / graphSize || diff > 300 / graphSize)
}
- var range = [];
if (start && end) {
for (var l = 0; start != end && l < 10000; l++) {
var min = 10000;
@@ -718,7 +743,7 @@ function fantasyMap() {
}
}
var change = height ? height : Math.random() * 0.1 + 0.1;
- range.map(function(r) {
+ range.map(function(r) {
var rnd = Math.random() * 0.4 + 0.8;
if (mod > 0) {cells[r].height += change * rnd;}
else if (cells[r].height >= 0.1) {cells[r].height -= change * rnd;}
@@ -734,14 +759,15 @@ function fantasyMap() {
});
});
}
+ return range;
}
function addStrait(width) {
var session = Math.ceil(Math.random() * 100000);
- var top = Math.floor(Math.random() * mapWidth * 0.35 + mapWidth * 0.3);
- var bottom = Math.floor((mapWidth - top) - (mapWidth * 0.1) + (Math.random() * mapWidth * 0.2));
- var start = diagram.find(top, mapHeight * 0.2).index;
- var end = diagram.find(bottom, mapHeight * 0.8).index;
+ var top = Math.floor(Math.random() * graphWidth * 0.35 + graphWidth * 0.3);
+ var bottom = Math.floor((svgWidth - top) - (graphWidth * 0.1) + (Math.random() * graphWidth * 0.2));
+ var start = diagram.find(top, graphHeight * 0.2).index;
+ var end = diagram.find(bottom, graphHeight * 0.8).index;
var range = [];
for (var l = 0; start !== end && l < 1000; l++) {
var min = 10000; // dummy value
@@ -814,7 +840,7 @@ function fantasyMap() {
if (mult == "^2") {factor = dif}
if (mult == "^3") {factor = dif * dif;}
i.height = 0.2 + dif * factor;
- }
+ }
} else if (type === "all") {
if (i.height > 0) {
i.height += add;
@@ -853,10 +879,11 @@ function fantasyMap() {
i.height = rn(i.height + rnd, 2);
});
}
-
+
// Mark features (ocean, lakes, islands)
function markFeatures() {
console.time("markFeatures");
+ island = 0;
var queue = [], lake = 0, number = 0, type, greater = 0, less = 0;
// ensure all border cells are ocean
cells.map(function(l) {
@@ -921,13 +948,13 @@ function fantasyMap() {
var frontier = $.grep(cells, function(e) {return (e.ctype === -1 && e.f === "Ocean");});
if (Math.random() < odd) {limits.push(-1); odd = 0.3;}
for (var c = -2; frontier.length > 0 && c > -10; c--) {
- if (Math.random() < odd) {limits.unshift(c); odd = 0.3;} else {odd += 0.2;}
+ if (Math.random() < odd) {limits.unshift(c); odd = 0.3;} else {odd += 0.2;}
frontier.map(function(i) {
i.neighbors.forEach(function(e) {
if (!cells[e].ctype) {cells[e].ctype = c;}
});
});
- frontier = $.grep(cells, function(e) {return (e.ctype === c);});
+ frontier = $.grep(cells, function(e) {return (e.ctype === c);});
}
if (outlineLayers.value !== "random") {limits = outlineLayers.value.split(",");}
// Define area edges
@@ -970,7 +997,7 @@ function fantasyMap() {
var tempCells = [], newPoints = []; // to store new data
land = [], polygons= []; // clear old data
// get average precipitation based on graph size
- var avPrec = rn(precipitation / Math.sqrt(cells.length), 2);
+ var avPrec = rn(precipitation / Math.sqrt(cells.length), 2);
cells.map(function(i) {
var height = Math.trunc(i.height * 100) / 100;
var ctype = i.ctype;
@@ -980,10 +1007,12 @@ function fantasyMap() {
var f = i.f;
var fn = i.fn;
var harbor = i.harbor;
+ var region = i.region; // handle value for edit hrightmap mode only
+ var culture = i.culture; // handle value for edit hrightmap mode only
var copy = $.grep(newPoints, function(e) {return (e[0] == x && e[1] == y);});
if (!copy.length) {
newPoints.push([x, y]);
- tempCells.push({index:tempCells.length, data:[x, y], height, ctype, f, fn, harbor});
+ tempCells.push({index:tempCells.length, data:[x, y], height, ctype, f, fn, harbor, region, culture});
}
// add additional points for cells along coast
if (ctype === 2 || ctype === -1) {
@@ -995,7 +1024,7 @@ function fantasyMap() {
copy = $.grep(newPoints, function(e) {return (e[0] === x1 && e[1] === y1);});
if (!copy.length) {
newPoints.push([x1, y1]);
- tempCells.push({index:tempCells.length, data:[x1, y1], height, ctype, f, fn, harbor});
+ tempCells.push({index:tempCells.length, data:[x1, y1], height, ctype, f, fn, harbor, region, culture});
}
};
});
@@ -1033,6 +1062,8 @@ function fantasyMap() {
})
i.neighbors = neighbors;
if (i.haven === undefined) {delete i.harbor;}
+ if (i.region === undefined) {delete i.region;}
+ if (i.culture === undefined) {delete i.culture;}
i.flux = avPrec;
});
grid.append("path").attr("d", gridPath);
@@ -1041,63 +1072,109 @@ function fantasyMap() {
console.timeEnd("reGraph");
}
- // Draw temp Heightmap for Customization
- function mockHeightmap(log) {
+ // redraw all cells for Customization 1 mode
+ function mockHeightmap() {
+ let heights = [];
+ let landCells = 0;
$("#landmass").empty();
- var heights = [];
- var landCells = 0;
cells.map(function(i) {
- if (i.height > 1) {i.height = 1;}
- if (i.height < 0) {i.height = 0;}
- if (i.height >= 0.2) {
- landCells++;
- landmass.append("path")
- .attr("d", "M" + polygons[i.index].join("L") + "Z")
- .attr("fill", color(1 - i.height))
- .attr("stroke", color(1 - i.height));
+ if (i.height < 0.2) {return;}
+ const clr = color(1 - i.height);
+ landmass.append("path").attr("id", "cell"+i.index)
+ .attr("d", "M" + polygons[i.index].join("L") + "Z")
+ .attr("fill", clr).attr("stroke", clr);
+ });
+ }
+
+ // draw or update all cells
+ function updateHeightmap() {
+ cells.map(function(c) {
+ let height = c.height;
+ if (height > 1) {height = 1;}
+ if (height < 0) {height = 0;}
+ c.height = height;
+ let cell = landmass.select("#cell"+c.index);
+ const clr = color(1 - height);
+ if (cell.size()) {
+ if (height < 0.2) {cell.remove();}
+ else {cell.attr("fill", clr).attr("stroke", clr);}
+ } else if (height >= 0.2) {
+ cell = landmass.append("path").attr("id", "cell"+c.index)
+ .attr("d", "M" + polygons[c.index].join("L") + "Z")
+ .attr("fill", clr).attr("stroke", clr);
+ }
+ });
+ }
+
+ // draw or update cells from the selection
+ function updateHeightmapSelection(selection) {
+ if (selection === undefined) {selection = cells;}
+ selection.map(function(s) {
+ let height = cells[s].height;
+ if (height > 1) {height = 1;}
+ if (height < 0) {height = 0;}
+ cells[s].height = height;
+ let cell = landmass.select("#cell"+s);
+ const clr = color(1 - height);
+ if (cell.size()) {
+ if (height < 0.2) {cell.remove();}
+ else {cell.attr("fill", clr).attr("stroke", clr);}
+ } else if (height >= 0.2) {
+ cell = landmass.append("path").attr("id", "cell"+s)
+ .attr("d", "M" + polygons[s].join("L") + "Z")
+ .attr("fill", clr).attr("stroke", clr);
}
- heights.push(i.height);
});
- // update history
- if (log !== "nolog") {
- history = history.slice(0, historyStage);
- history[historyStage] = heights;
- historyStage += 1;
- }
- redo.disabled = true;
- undo.disabled = true;
- if (historyStage < history.length - 1) {redo.disabled = false;}
- if (historyStage > 0) {undo.disabled = false;}
+ }
+
+ function updateHistory() {
+ let heights = [];
+ let landCells = 0;
+ cells.map(function(c) {
+ heights.push(c.height);
+ if (c.height >= 0.2) {landCells++;}
+ });
+ history = history.slice(0, historyStage);
+ history[historyStage] = heights;
+ historyStage++;
+ undo.disabled = templateUndo.disabled = historyStage > 1 ? false : true;
+ redo.disabled = templateRedo.disabled = true;
var elevationAverage = rn(d3.mean(heights), 2);
var landRatio = rn(landCells / cells.length * 100);
landmassCounter.innerHTML = landCells + " (" + landRatio + "%); Average Elevation: " + elevationAverage;
- if (landCells > 100) {
- $("#getMap").attr("disabled", false).removeClass("buttonoff");
- } else {
- $("#getMap").attr("disabled", true).addClass("buttonoff");
- }
+ if (landCells > 100) {$("#getMap").attr("disabled", false).removeClass("buttonoff");}
+ else {$("#getMap").attr("disabled", true).addClass("buttonoff");}
// if perspective is displayed, update it
if ($("#perspectivePanel").is(":visible")) {drawPerspective();}
}
-
+
// restoreHistory
function restoreHistory(step) {
historyStage = step;
- var heights = history[historyStage];
+ redo.disabled = templateRedo.disabled = historyStage < history.length ? false : true;
+ undo.disabled = templateUndo.disabled = historyStage > 1 ? false : true;
+ let heights = history[historyStage - 1];
if (heights === undefined) {return;}
- cells.map(function(i, d) {
- i.height = heights[d];
- });
- mockHeightmap("nolog");
+ cells.map(function(i, d) {i.height = heights[d];});
+ updateHeightmap();
}
-
+
+ // restart history from 1st step
+ function restartHistory() {
+ history = [];
+ historyStage = 0;
+ redo.disabled = templateRedo.disabled = true;
+ undo.disabled = templateUndo.disabled = true;
+ updateHistory();
+ }
+
// Detect and draw the coasline
function drawCoastline() {
console.time('drawCoastline');
getCurveType();
var oceanCoastline = "", lakeCoastline = "";
$("#landmass").empty();
- var minX = mapWidth, maxX = 0; // extreme points
+ var minX = graphWidth, maxX = 0; // extreme points
var minXedge, maxXedge; // extreme edges
for (var isle = 0; isle < island; isle++) {
var coastal = $.grep(land, function(e) {return (e.ctype === 1 && e.fn === isle);});
@@ -1120,7 +1197,7 @@ function fantasyMap() {
if (edge[0][0] < minX) {minX = edge[0][0]; minXedge = edge[0]}
if (edge[1][0] < minX) {minX = edge[1][0]; minXedge = edge[1]}
if (edge[0][0] > maxX) {maxX = edge[0][0]; maxXedge = edge[0]}
- if (edge[1][0] > maxX) {maxX = edge[1][0]; maxXedge = edge[1]}
+ if (edge[1][0] > maxX) {maxX = edge[1][0]; maxXedge = edge[1]}
oceanEdges.push({start, end});
}
}
@@ -1132,7 +1209,7 @@ function fantasyMap() {
}
d3.select("#shape").append("path").attr("d", oceanCoastline).attr("fill", "white"); // draw the clippath
landmass.append("path").attr("d", oceanCoastline); // draw the landmass
- coastline.append("path").attr("d", oceanCoastline); // draw the coastline
+ coastline.append("path").attr("d", oceanCoastline); // draw the coastline
lakes.append("path").attr("d", lakeCoastline); // draw the lakes
drawDefaultRuler(minXedge, maxXedge);
console.timeEnd('drawCoastline');
@@ -1142,7 +1219,7 @@ function fantasyMap() {
function drawScaleBar() {
if ($("#scaleBar").hasClass("hidden")) {return;} // no need to re-draw hidden element
svg.select("#scaleBar").remove(); // fully redraw every time
- var title =
+ var title =
`Map scale defines ratio between distance on a map and the corresponding distance on the ground.
Click to edit the map scale, drag to move the bar`;
// get size
@@ -1171,8 +1248,8 @@ function fantasyMap() {
var label = rn(value * dScale / scale);
if (label < s) {continue;}
if (s > 1 && (l * dScale / 25) >= 100) {continue;}
- if (s > 2 && label >= 100) {continue;}
- if (s === 4 && label >= l / 10) {continue;}
+ if (s > 2 && label >= 100) {continue;}
+ if (s === 4 && label >= l / 10) {continue;}
scaleBar.append("text").attr("x", x + value).attr("y", y - 2 * size).attr("font-size", rn(2.6 * size, 1)).text(label);
}
// big scale
@@ -1185,24 +1262,27 @@ function fantasyMap() {
scaleBar.append("text").attr("x", x + value).attr("y", y - 2 * size).attr("font-size", rn(5 * size, 1)).text(label);
}
}
- label = `One pixel equals ${dScale} ${unit}`;
- scaleBar.append("text").attr("x", x + (l+1) / 2).attr("y", y + 2 * size).attr("dominant-baseline", "text-before-edge").attr("font-size", rn(7 * size, 1)).text(label);
+ if (barLabel.value !== "") {
+ scaleBar.append("text").attr("x", x + (l+1) / 2).attr("y", y + 2 * size)
+ .attr("dominant-baseline", "text-before-edge")
+ .attr("font-size", rn(7 * size, 1)).text(barLabel.value);
+ }
// move scaleBar to desired bottom-right point
var tr, bbox = scaleBar.node().getBBox();
- if (localStorage.getItem("scaleBar")) {
- var scalePos = localStorage.getItem("scaleBar").split(",");
+ if (sessionStorage.getItem("scaleBar")) {
+ var scalePos = sessionStorage.getItem("scaleBar").split(",");
tr = [+scalePos[0] - bbox.width, +scalePos[1] - bbox.height];
} else {
- tr = [mapWidth - 10 - bbox.width, mapHeight - 10 - bbox.height];
+ tr = [svgWidth - 10 - bbox.width, svgHeight - 5 - bbox.height];
}
scaleBar.attr("transform", "translate(" + rn(tr[0]) + "," + rn(tr[1]) + ")");
}
-
+
// draw default ruler measiring land x-axis edges
function drawDefaultRuler(minXedge, maxXedge) {
- var title =
- `Ruler is an instrument for measuring thelinear lengths.
- One dash shows 30 km (18.6 mi), approximate distance of a daily loaded march.
+ var title =
+ `Ruler is an instrument for measuring the linear lengths.
+ One dash shows 10 pixels (10 mi on default scale, approximate daily march distance).
Drag edge circles to move the ruler, center circle to split the ruler into 2 parts.
Click on the ruler label to remove the ruler from the map`;
var rulerNew = ruler.append("g").attr("class", "linear").call(d3.drag().on("start", elementDrag));
@@ -1218,9 +1298,9 @@ function fantasyMap() {
var tr = "rotate(" + angle + " " + x0 + " " + y0 +")";
var dist = rn(Math.hypot(x1 - x2, y1 - y2));
var label = rn(dist * distanceScale.value) + " " + distanceUnit.value;
- rulerNew.append("text").attr("x", x0).attr("y", y0).attr("dy", -1).attr("transform", tr).attr("data-dist", dist).text(label).on("click", removeParent).attr("font-size", 10);
+ rulerNew.append("text").attr("x", x0).attr("y", y0).attr("dy", -1).attr("transform", tr).attr("data-dist", dist).text(label).on("click", removeParent).attr("font-size", 10);
}
-
+
// drag any element changing transform
function elementDrag() {
var el = d3.select(this);
@@ -1236,7 +1316,7 @@ function fantasyMap() {
// remember scaleBar bottom-right position
if (el.attr("id") === "scaleBar") {
var bbox = el.node().getBoundingClientRect();
- localStorage.setItem("scaleBar", [bbox.right, bbox.bottom])
+ sessionStorage.setItem("scaleBar", [bbox.right, bbox.bottom])
}
});
}
@@ -1250,7 +1330,7 @@ function fantasyMap() {
var line = group.selectAll("line");
if (edge === "left") {
line.attr("x1", x).attr("y1", y);
- x0 = +line.attr("x2"), y0 = +line.attr("y2");
+ x0 = +line.attr("x2"), y0 = +line.attr("y2");
} else {
line.attr("x2", x).attr("y2", y);
x0 = +line.attr("x1"), y0 = +line.attr("y1");
@@ -1264,7 +1344,7 @@ function fantasyMap() {
var tr = "rotate(" + angle + " " + xc + " " + yc +")";
group.select("text").attr("x", xc).attr("y", yc).attr("transform", tr).attr("data-dist", dist).text(label);
}
-
+
// draw ruler center point to split ruler into 2 parts
function rulerCenterDrag() {
var xc1, yc1, xc2, yc2;
@@ -1274,7 +1354,7 @@ function fantasyMap() {
var x1 = +line.attr("x1"), y1 = +line.attr("y1"), x2 = +line.attr("x2"), y2 = +line.attr("y2"); // initial line edge points
var rulerNew = ruler.insert("g", ":first-child");
rulerNew.call(d3.drag().on("start", elementDrag));
- var title =
+ var title =
`Ruler is an instrument for measuring thelinear lengths.
One dash shows 30 km (18.6 mi), approximate distance of a daily loaded march.
Drag edge circles to move the ruler, center circle to split the ruler into 2 parts.
@@ -1310,8 +1390,8 @@ function fantasyMap() {
d3.event.on("end", function() {
// circles for 1st part
group.selectAll("circle").remove();
- group.append("circle").attr("cx", x1).attr("cy", y1).attr("r", 2 * factor).attr("stroke-width", 0.5 * factor).attr("data-edge", "left").call(d3.drag().on("drag", rulerEdgeDrag));
- group.append("circle").attr("cx", x).attr("cy", y).attr("r", 2 * factor).attr("stroke-width", 0.5 * factor).attr("data-edge", "rigth").call(d3.drag().on("drag", rulerEdgeDrag));
+ group.append("circle").attr("cx", x1).attr("cy", y1).attr("r", 2 * factor).attr("stroke-width", 0.5 * factor).attr("data-edge", "left").call(d3.drag().on("drag", rulerEdgeDrag));
+ group.append("circle").attr("cx", x).attr("cy", y).attr("r", 2 * factor).attr("stroke-width", 0.5 * factor).attr("data-edge", "rigth").call(d3.drag().on("drag", rulerEdgeDrag));
group.append("circle").attr("cx", xc1).attr("cy", yc1).attr("r", 1.2 * factor).attr("stroke-width", 0.3 * factor).attr("class", "center").call(d3.drag().on("start", rulerCenterDrag));
// circles for 2nd part
rulerNew.append("circle").attr("cx", x).attr("cy", y).attr("r", 2 * factor).attr("stroke-width", 0.5 * factor).attr("data-edge", "left").call(d3.drag().on("drag", rulerEdgeDrag));
@@ -1322,7 +1402,7 @@ function fantasyMap() {
function opisometerEdgeDrag() {
var el = d3.select(this);
- var x0 = +el.attr("cx"), y0 = +el.attr("cy");
+ var x0 = +el.attr("cx"), y0 = +el.attr("cy");
var group = d3.select(this.parentNode);
var curve = group.select(".white");
var curveGray = group.select(".gray");
@@ -1353,12 +1433,12 @@ function fantasyMap() {
var atan = p.x > c.x ? Math.atan2(p.y - c.y, p.x - c.x) : Math.atan2(c.y - p.y, c.x - p.x);
var angle = rn(atan * 180 / Math.PI, 3);
var tr = "rotate(" + angle + " " + c.x + " " + c.y +")";
- text.attr("data-points", JSON.stringify(points)).attr("data-dist", dist).attr("x", c.x).attr("y", c.y).attr("transform", tr).text(label);
- });
+ text.attr("data-points", JSON.stringify(points)).attr("data-dist", dist).attr("x", c.x).attr("y", c.y).attr("transform", tr).text(label);
+ });
}
function getContinuousLine(edges, indention, relax) {
- var edgesOr = edges.slice();
+ var edgesOr = edges.slice();
var line = "";
while (edges.length > 2) {
var edgesOrdered = []; // to store points in a correct order
@@ -1389,11 +1469,11 @@ function fantasyMap() {
if (indention || relax) {
var dist = Math.hypot(+spl[0] - x0, +spl[1] - y0);
if (dist >= indention && Math.random() > relax) {
- edgesOrdered.push({scX: +spl[0], scY: +spl[1]});
+ edgesOrdered.push({scX: +spl[0], scY: +spl[1]});
x0 = +spl[0], y0 = +spl[1];
}
} else {
- edgesOrdered.push({scX: +spl[0], scY: +spl[1]});
+ edgesOrdered.push({scX: +spl[0], scY: +spl[1]});
}
edges.splice(index, 1);
if (i === 100000-1) {
@@ -1424,8 +1504,8 @@ function fantasyMap() {
if (l === limit - 1) {console.error("Error: resolveDepressions iteration limit");}
}
console.timeEnd('resolveDepressions');
- }
-
+ }
+
function flux() {
console.time('flux');
riversData = [];
@@ -1494,7 +1574,6 @@ function fantasyMap() {
function drawRiverLines(riverNext) {
console.time('drawRiverLines');
- lineGen.curve(d3.curveCatmullRom.alpha(0.1));
for (var i = 0; i < riverNext; i++) {
var dataRiver = $.grep(riversData, function(e) {return e.river === i;});
if (dataRiver.length > 1) {
@@ -1502,9 +1581,7 @@ function fantasyMap() {
var width = rn(0.8 + Math.random() * 0.4, 1);
var increment = rn(0.8 + Math.random() * 0.4, 1);
var d = drawRiver(riverAmended, width, increment);
- rivers.append("path").attr("d", d).attr("id", "river"+i)
- .attr("data-points", round(JSON.stringify(riverAmended), 1))
- .attr("data-width", width).attr("data-increment", increment);
+ rivers.append("path").attr("d", d).attr("id", "river"+i).attr("data-width", width).attr("data-increment", increment);
}
}
rivers.selectAll("path").on("click", editRiver);
@@ -1525,8 +1602,8 @@ function fantasyMap() {
var eY = dataRiver[r+1].y;
var angle = Math.atan2(eY - dY, eX - dX);
var serpentine = 1 / (r+1);
- var meandr = serpentine + 0.3 + Math.random() * 0.3 * rndFactor;
- if (Math.random() > 0.5) {side *= -1};
+ var meandr = serpentine + 0.3 + Math.random() * 0.3 * rndFactor;
+ if (Math.random() > 0.5) {side *= -1};
var dist = Math.hypot(eX - dX, eY - dY);
// if dist is big or river is small add 2 extra points
if (dist > 8 || (dist > 4 && dataRiver.length < 6)) {
@@ -1539,7 +1616,7 @@ function fantasyMap() {
if (Math.random() > 0.8) {side *= -1};
enX += Math.sin(angle) * meandr * side;
enY += -Math.cos(angle) * meandr * side;
- riverAmended.push([stX, stY], [enX, enY]);
+ riverAmended.push([stX, stY], [enX, enY]);
// if dist is medium or river is small add 1 extra point
} else if (dist > 4 || dataRiver.length < 6) {
var scX = (dX + eX) / 2;
@@ -1553,16 +1630,18 @@ function fantasyMap() {
return riverAmended;
}
+ // draw river polygon using arrpoximation
function drawRiver(points, width, increment) {
+ lineGen.curve(d3.curveCatmullRom.alpha(0.1));
var extraOffset = 0.02; // start offset to make river source visible
- var width = width || 1; // river width modifier
- var increment = increment || 1; // river bed widening modifier
+ width = width || 1; // river width modifier
+ increment = increment || 1; // river bed widening modifier
var riverLength = 0;
points.map(function(p, i) {
if (i === 0) {return 0;}
riverLength += Math.hypot(p[0] - points[i-1][0], p[1] - points[i-1][1]);
});
- var widening = rn((1000 + (riverLength * 30)) * increment); // FIX me!
+ var widening = rn((1000 + (riverLength * 30)) * increment);
var riverPointsLeft = [], riverPointsRight = [];
var last = points.length - 1;
var factor = riverLength / points.length;
@@ -1602,231 +1681,576 @@ function fantasyMap() {
var right = lineGen(riverPointsRight);
var left = lineGen(riverPointsLeft);
left = left.substring(left.indexOf("C"));
- var d = round(right + left + "Z", 2);
- return d;
+ return round(right + left, 2);
+ }
+
+ // draw river polygon with best quality
+ function drawRiverSlow(points, width, increment) {
+ lineGen.curve(d3.curveCatmullRom.alpha(0.1));
+ width = width || 1;
+ var extraOffset = 0.02 * width;
+ increment = increment || 1;
+ var riverPoints = points.map(function(p) {return {scX: p[0], scY: p[1]};});
+ var river = defs.append("path").attr("d", lineGen(riverPoints));
+ var riverLength = river.node().getTotalLength();
+ var widening = rn((1000 + (riverLength * 30)) * increment);
+ var riverPointsLeft = [], riverPointsRight = [];
+
+ for (let l = 0; l < riverLength; l++) {
+ var point = river.node().getPointAtLength(l);
+ var from = river.node().getPointAtLength(l - 0.1);
+ var to = river.node().getPointAtLength(l + 0.1);
+ var angle = Math.atan2(from.y - to.y, from.x - to.x);
+ var offset = (Math.atan(Math.pow(l, 2) / widening) / 2 * width) + extraOffset;
+ var xLeft = point.x + -Math.sin(angle) * offset;
+ var yLeft = point.y + Math.cos(angle) * offset;
+ riverPointsLeft.push({scX:xLeft, scY:yLeft});
+ var xRight = point.x + Math.sin(angle) * offset;
+ var yRight = point.y + -Math.cos(angle) * offset;
+ riverPointsRight.unshift({scX:xRight, scY:yRight});
+ }
+
+ var point = river.node().getPointAtLength(riverLength);
+ var from = river.node().getPointAtLength(riverLength - 0.1);
+ var angle = Math.atan2(from.y - point.y, from.x - point.x);
+ var offset = (Math.atan(Math.pow(riverLength, 2) / widening) / 2 * width) + extraOffset;
+ var xLeft = point.x + -Math.sin(angle) * offset;
+ var yLeft = point.y + Math.cos(angle) * offset;
+ riverPointsLeft.push({scX:xLeft, scY:yLeft});
+ var xRight = point.x + Math.sin(angle) * offset;
+ var yRight = point.y + -Math.cos(angle) * offset;
+ riverPointsRight.unshift({scX:xRight, scY:yRight});
+
+ river.remove();
+ // generate path and return
+ var right = lineGen(riverPointsRight);
+ var left = lineGen(riverPointsLeft);
+ left = left.substring(left.indexOf("C"));
+ return round(right + left, 2);
}
function editRiver() {
+ if (customization) {return;}
if (elSelected) {
- if ($("#riverNew").hasClass('pressed')) {
- var point = d3.mouse(this);
- addRiverPoint({scX:point[0], scY:point[1]});
- redrawRiver();
- $("#riverNew").click();
+ const self = d3.select(this).attr("id") === elSelected.attr("id") ? true : false;
+ const point = d3.mouse(this);
+ if (elSelected.attr("data-river") === "new") {
+ addRiverPoint([point[0], point[1]]);
+ completeNewRiver();
+ return;
+ } else if (self) {
+ riverAddControlPoint(point);
return;
}
- elSelected.call(d3.drag().on("drag", null)).classed("draggable", false);
- rivers.select(".riverPoints").remove();
}
+
+ unselect();
+ closeDialogs("#riverEditor, .stable");
elSelected = d3.select(this);
- elSelected.call(d3.drag().on("start", riverDrag)).classed("draggable", true);
- var points = JSON.parse(elSelected.attr("data-points"));
- rivers.append("g").attr("class", "riverPoints").attr("transform", elSelected.attr("transform"));
- points.map(function(p) {addRiverPoint(p)});
- var tr = parseTransform(elSelected.attr("transform"));
+ elSelected.call(d3.drag().on("start", riverDrag));
+
+ const tr = parseTransform(elSelected.attr("transform"));
riverAngle.value = tr[2];
riverAngleValue.innerHTML = Math.abs(+tr[2]) + "°";
riverScale.value = tr[5];
riverWidthInput.value = +elSelected.attr("data-width");
riverIncrement.value = +elSelected.attr("data-increment");
+
$("#riverEditor").dialog({
title: "Edit River",
- minHeight: 30, width: "auto", maxWidth: 275, resizable: false,
- position: {my: "center top", at: "top", of: this}
- }).on("dialogclose", function(event) {
- if (elSelected) {
- elSelected.call(d3.drag().on("drag", null)).classed("draggable", false);
- rivers.select(".riverPoints").remove();
- $(".pressed").removeClass('pressed');
- viewbox.style("cursor", "default");
+ minHeight: 30, width: "auto", resizable: false,
+ position: {my: "center top+20", at: "top", of: d3.event},
+ close: function() {
+ if ($("#riverNew").hasClass('pressed')) {completeNewRiver();}
+ unselect();
}
});
- }
- function addRiverPoint(point) {
- rivers.select(".riverPoints").append("circle")
- .attr("cx", point[0]).attr("cy", point[1]).attr("r", 0.35)
- .call(d3.drag().on("start", riverPointDrag))
- .on("click", function(d) {
- if ($("#riverRemovePoint").hasClass('pressed')) {
- $(this).remove(); redrawRiver();
- }
- if ($("#riverNew").hasClass('pressed')) {
- $("#riverNew").click();
- }
+ const controlPoints = icons.append("g").attr("class", "controlPoints")
+ .attr("transform", elSelected.attr("transform"));
+ riverDrawPoints();
+
+ if (modules.editRiver) {return;}
+ modules.editRiver = true;
+
+ function riverAddControlPoint(point) {
+ let dists = [];
+ icons.select(".controlPoints").selectAll("circle").each(function() {
+ const x = +d3.select(this).attr("cx");
+ const y = +d3.select(this).attr("cy");
+ dists.push(Math.hypot(point[0] - x, point[1] - y));
});
- }
+ let index = dists.length;
+ if (dists.length > 1) {
+ const sorted = dists.slice(0).sort(function(a, b) {return a-b;});
+ const closest = dists.indexOf(sorted[0]);
+ const next = dists.indexOf(sorted[1]);
+ if (closest <= next) {index = closest+1;} else {index = next+1;}
+ }
+ const before = ":nth-child(" + (index + 1) + ")";
+ icons.select(".controlPoints").insert("circle", before)
+ .attr("cx", point[0]).attr("cy", point[1]).attr("r", 0.35)
+ .call(d3.drag().on("drag", riverPointDrag))
+ .on("click", function(d) {
+ $(this).remove();
+ redrawRiver();
+ });
+ redrawRiver();
+ }
- function riverPointDrag() {
- var x = d3.event.x, y = d3.event.y;
- var el = d3.select(this);
- d3.event
- .on("drag", function() {el.attr("cx", d3.event.x).attr("cy", d3.event.y);})
- .on("end", function() {redrawRiver();});
- }
+ function riverDrawPoints() {
+ const node = elSelected.node();
+ // river is a polygon, so divide length by 2 to get course length
+ const l = node.getTotalLength() / 2;
+ const parts = (l / 5) >> 0; // number of points
+ let inc = l / parts; // increment
+ if (inc === Infinity) {inc = l;} // 2 control points for short rivers
+ // draw control points
+ for (var i = l, c = l; i > 0; i -= inc, c += inc) {
+ const p1 = node.getPointAtLength(i);
+ const p2 = node.getPointAtLength(c);
+ const p = [(p1.x + p2.x) / 2, (p1.y + p2.y) / 2];
+ addRiverPoint(p);
+ }
+ // last point should be accurate
+ const lp1 = node.getPointAtLength(0);
+ const lp2 = node.getPointAtLength(l * 2);
+ const p = [(lp1.x + lp2.x) / 2, (lp1.y + lp2.y) / 2];
+ addRiverPoint(p);
+ }
+
+ function addRiverPoint(point) {
+ icons.select(".controlPoints").append("circle")
+ .attr("cx", point[0]).attr("cy", point[1]).attr("r", 0.35)
+ .call(d3.drag().on("drag", riverPointDrag))
+ .on("click", function(d) {
+ $(this).remove();
+ redrawRiver();
+ });
+ }
+
+ function riverPointDrag() {
+ d3.select(this).attr("cx", d3.event.x).attr("cy", d3.event.y);
+ redrawRiver();
+ }
+
+ function riverDrag() {
+ const x = d3.event.x, y = d3.event.y;
+ const tr = parseTransform(elSelected.attr("transform"));
+ d3.event.on("drag", function() {
+ let xc = d3.event.x, yc = d3.event.y;
+ let transform = `translate(${(+tr[0]+xc-x)},${(+tr[1]+yc-y)}) rotate(${tr[2]} ${tr[3]} ${tr[4]}) scale(${tr[5]})`;
+ elSelected.attr("transform", transform);
+ icons.select(".controlPoints").attr("transform", transform);
+ });
+ }
+
+ function redrawRiver() {
+ let points = [];
+ icons.select(".controlPoints").selectAll("circle").each(function() {
+ const el = d3.select(this);
+ points.push([+el.attr("cx"), +el.attr("cy")]);
+ });
+ const width = +riverWidthInput.value;
+ const increment = +riverIncrement.value;
+ const d = drawRiverSlow(points, width, increment);
+ elSelected.attr("d", d);
+ }
+
+ $("#riverWidthInput, #riverIncrement").change(function() {
+ const width = +riverWidthInput.value;
+ const increment = +riverIncrement.value;
+ elSelected.attr("data-width", width).attr("data-increment", increment);
+ redrawRiver();
+ });
+
+ $("#riverRegenerate").click(function() {
+ let points = [], amended = [], x, y, p1, p2;
+ const node = elSelected.node();
+ const l = node.getTotalLength() / 2;
+ const parts = (l / 8) >> 0; // number of points
+ let inc = l / parts; // increment
+ if (inc === Infinity) {inc = l;} // 2 control points for short rivers
+ for (var i = l, e = l; i > 0; i -= inc, e += inc) {
+ p1 = node.getPointAtLength(i);
+ p2 = node.getPointAtLength(e);
+ x = (p1.x + p2.x) / 2, y = (p1.y + p2.y) / 2;
+ points.push([x, y]);
+ }
+ // last point should be accurate
+ p1 = node.getPointAtLength(0);
+ p2 = node.getPointAtLength(l * 2);
+ x = (p1.x + p2.x) / 2, y = (p1.y + p2.y) / 2;
+ points.push([x, y]);
+ // amend points
+ const rndFactor = 0.3 + Math.random() * 1.4; // random factor in range 0.2-1.8
+ for (var i = 0; i < points.length; i++) {
+ x = points[i][0], y = points[i][1];
+ amended.push([x, y]);
+ // add additional semi-random point
+ if (i + 1 < points.length) {
+ const x2 = points[i+1][0], y2 = points[i+1][1];
+ let side = Math.random() > 0.5 ? 1 : -1;
+ const angle = Math.atan2(y2 - y, x2 - x);
+ const serpentine = 2 / (i+1);
+ const meandr = serpentine + 0.3 + Math.random() * rndFactor;
+ x = (x + x2) / 2, y = (y + y2) / 2;
+ x += -Math.sin(angle) * meandr * side;
+ y += Math.cos(angle) * meandr * side;
+ amended.push([x, y]);
+ }
+ }
+ const width = +riverWidthInput.value * 0.6 + Math.random() * 1;
+ const increment = +riverIncrement.value * 0.9 + Math.random() * 0.2;
+ riverWidthInput.value = width;
+ riverIncrement.value = increment;
+ elSelected.attr("data-width", width).attr("data-increment", increment);
+ const d = drawRiverSlow(amended, width, increment);
+ elSelected.attr("d", d).attr("data-width", width).attr("data-increment", increment);
+ icons.select(".controlPoints").selectAll("*").remove();
+ amended.map(function(p) {addRiverPoint(p);});
+ });
+
+ $("#riverAngle").change(function() {
+ const tr = parseTransform(elSelected.attr("transform"));
+ riverAngleValue.innerHTML = Math.abs(+this.value) + "°";
+ var c = elSelected.node().getBBox();
+ const angle = +this.value, scale = +tr[5];
+ const transform = `translate(${tr[0]},${tr[1]}) rotate(${angle} ${(c.x+c.width/2)*scale} ${(c.y+c.height/2)*scale}) scale(${scale})`;
+ elSelected.attr("transform", transform);
+ icons.select(".controlPoints").attr("transform", transform);
+ });
- $("#riverEditor .editButton, #riverEditor .editButtonS").click(function() {
- if (this.id == "riverRemove") {
+ $("#riverReset").click(function() {
+ elSelected.attr("transform", "");
+ icons.select(".controlPoints").attr("transform", "");
+ riverAngle.value = 0;
+ riverAngleValue.innerHTML = "0°";
+ riverScale.value = 1;
+ });
+
+ $("#riverScale").change(function() {
+ const tr = parseTransform(elSelected.attr("transform"));
+ const scaleOld = +tr[5], scale = +this.value;
+ var c = elSelected.node().getBBox();
+ const cx = c.x + c.width / 2, cy = c.y + c.height / 2;
+ const trX = +tr[0] + cx * (scaleOld - scale);
+ const trY = +tr[1] + cy * (scaleOld - scale);
+ const scX = +tr[3] * scale/scaleOld;
+ const scY = +tr[4] * scale/scaleOld;
+ const transform = `translate(${trX},${trY}) rotate(${tr[2]} ${scX} ${scY}) scale(${scale})`;
+ elSelected.attr("transform", transform);
+ icons.select(".controlPoints").attr("transform", transform);
+ });
+
+ $("#riverNew").click(function() {
+ if ($(this).hasClass('pressed')) {
+ completeNewRiver();
+ } else {
+ // enter creation mode
+ $(".pressed").removeClass('pressed');
+ $(this).addClass('pressed');
+ elSelected.call(d3.drag().on("drag", null));
+ icons.select(".controlPoints").selectAll("*").remove();
+ viewbox.style("cursor", "crosshair").on("click", newRiverAddPoint);
+ }
+ });
+
+ function newRiverAddPoint() {
+ const point = d3.mouse(this);
+ addRiverPoint([point[0], point[1]]);
+ if (elSelected.attr("data-river") !== "new") {
+ const id = +$("#rivers > path").last().attr("id").slice(5) + 1;
+ elSelected = rivers.append("path").attr("data-river", "new").attr("id", "river"+id)
+ .attr("data-width", 2).attr("data-increment", 1).on("click", completeNewRiver);
+ } else {
+ redrawRiver();
+ }
+ }
+
+ function completeNewRiver() {
+ $("#riverNew").removeClass('pressed');
+ restoreDefaultEvents();
+ if (elSelected.attr("data-river") === "new") {
+ redrawRiver();
+ elSelected.attr("data-river", "");
+ elSelected.call(d3.drag().on("start", riverDrag)).on("click", editRiver);
+ const river = +elSelected.attr("id").slice(5);
+ icons.select(".controlPoints").selectAll("circle").each(function() {
+ const x = +d3.select(this).attr("cx");
+ const y = +d3.select(this).attr("cy");
+ const cell = diagram.find(x, y, 3);
+ if (!cell) {return;}
+ if (cells[cell.index].river === undefined) {cells[cell.index].river = r;}
+ });
+ }
+ }
+
+ $("#riverCopy").click(function() {
+ const tr = parseTransform(elSelected.attr("transform"));
+ const d = elSelected.attr("d");
+ let x = 2, y = 2;
+ let transform = `translate(${tr[0]-x},${tr[1]-y}) rotate(${tr[2]} ${tr[3]} ${tr[4]}) scale(${tr[5]})`;
+ while (rivers.selectAll("[transform='" + transform + "'][d='" + d + "']").size() > 0) {
+ x += 2; y += 2;
+ transform = `translate(${tr[0]-x},${tr[1]-y}) rotate(${tr[2]} ${tr[3]} ${tr[4]}) scale(${tr[5]})`;
+ }
+ const river = +$("#rivers > path").last().attr("id").slice(5) + 1;
+ rivers.append("path").attr("d", d)
+ .attr("transform", transform)
+ .attr("id", "river"+river).on("click", editRiver)
+ .attr("data-width", elSelected.attr("data-width"))
+ .attr("data-increment", elSelected.attr("data-increment"));
+ unselect();
+ });
+
+ $("#riverRemove").click(function() {
alertMessage.innerHTML = `Are you sure you want to remove the river?`;
- $(function() {$("#alert").dialog({resizable: false, title: "Remove river",
+ $("#alert").dialog({resizable: false, title: "Remove river",
buttons: {
- "Remove": function() {
+ Remove: function() {
$(this).dialog("close");
+ const river = +elSelected.attr("id").slice(5);
+ const avPrec = rn(precipitation / Math.sqrt(cells.length), 2);
+ land.map(function(l) {
+ if (l.river === river) {
+ l.river = undefined;
+ i.flux = avPrec;
+ }
+ });
elSelected.remove();
- rivers.select(".riverPoints").remove();
+ unselect();
$("#riverEditor").dialog("close");
},
Cancel: function() {$(this).dialog("close");}
- }})
- });
- return;
+ }
+ })
+ });
+
+ }
+
+ function unselect() {
+ if (elSelected) {
+ elSelected.call(d3.drag().on("drag", null)).classed("draggable", false);
+ icons.select(".controlPoints").remove();
+ viewbox.style("cursor", "default");
+ elSelected = null;
}
- if (this.id == "riverCopy") {
- var tr = parseTransform(elSelected.attr("transform"));
- var d = elSelected.attr("d");
- var points = elSelected.attr("data-points");
- var width = elSelected.attr("data-width");
- var increment = elSelected.attr("data-increment");
- var x = 2, y = 2;
- transform = `translate(${tr[0]-x},${tr[1]-y}) rotate(${tr[2]} ${tr[3]} ${tr[4]}) scale(${tr[5]})`;
- while (rivers.selectAll("[transform='" + transform + "'][d='" + d + "']").size() > 0) {
- x += 2; y += 2;
- transform = `translate(${tr[0]-x},${tr[1]-y}) rotate(${tr[2]} ${tr[3]} ${tr[4]}) scale(${tr[5]})`;
+ }
+
+ function parseTransform(string) {
+ // [translateX,translateY,rotateDeg,rotateX,rotateY,scale]
+ if (!string) {return [0,0,0,0,0,1];}
+ var a = string.replace(/[a-z()]/g,"").replace(/[ ]/g,",").split(",");
+ return [a[0] || 0, a[1] || 0, a[2] || 0, a[3] || 0, a[4] || 0, a[5] || 1];
+ }
+
+ function editRoute() {
+ if (customization) {return;}
+ if (elSelected) {
+ const self = d3.select(this).attr("id") === elSelected.attr("id") ? true : false;
+ const point = d3.mouse(this);
+ if (elSelected.attr("data-route") === "new") {
+ addRoutePoint({x:point[0], y:point[1]});
+ completeNewRoute();
+ return;
+ } else if (self) {
+ routeAddControlPoint(point);
+ return;
}
- var river = +$("#rivers > path").last().attr("id").slice(5) + 1;
- rivers.append("path").attr("d", d).attr("data-points", points).attr("transform", transform)
- .attr("id", "river"+river).on("click", editRiver)
- .attr("data-width", width).attr("data-increment", increment);
- return;
}
- if (this.id == "riverRegenerate") {
- // restore main points
- var points = JSON.parse(elSelected.attr("data-points"));
- var riverCells = [], dataRiver = [];
- for (var p = 0; p < points.length; p++) {
- var cell = diagram.find(points[p][0], points[p][1], 1);
- if (cell !== null && cell !== riverCells[riverCells.length-1]) {riverCells.push(cell);}
+
+ unselect();
+ closeDialogs("#routeEditor, .stable");
+ elSelected = d3.select(this);
+ const controlPoints = icons.append("g").attr("class", "controlPoints");
+ routeDrawPoints();
+
+ // get route type
+ const group = d3.select(this.parentNode);
+ routeUpdateGroups();
+ const routeType = group.attr("id");
+ routeType.value = routeType;
+
+ $("#routeEditor").dialog({
+ title: "Edit Route",
+ minHeight: 30, width: "auto", resizable: false,
+ position: {my: "center top+20", at: "top", of: d3.event},
+ close: function() {
+ if ($("#routeNew").hasClass('pressed')) {completeNewRoute();}
+ if ($("#routeSplit").hasClass('pressed')) {$("#routeSplit").removeClass('pressed');}
+ unselect();
}
- for (var c = 0; c < riverCells.length; c++) {
- var rc = riverCells[c];
- dataRiver.push({x:rc[0], y:rc[1], cell:rc.index});
+ });
+
+ if (modules.editRoute) {return;}
+ modules.editRoute = true;
+
+ function routeAddControlPoint(point) {
+ let dists = [];
+ icons.select(".controlPoints").selectAll("circle").each(function() {
+ const x = +d3.select(this).attr("cx");
+ const y = +d3.select(this).attr("cy");
+ dists.push(Math.hypot(point[0] - x, point[1] - y));
+ });
+ let index = dists.length;
+ if (dists.length > 1) {
+ const sorted = dists.slice(0).sort(function(a, b) {return a-b;});
+ const closest = dists.indexOf(sorted[0]);
+ const next = dists.indexOf(sorted[1]);
+ if (closest <= next) {index = closest+1;} else {index = next+1;}
}
- // if last point not in cell center push it with one extra point
- var last = points.pop();
- if (dataRiver[dataRiver.length-1].x !== last[0]) {
- dataRiver.push({x:last[0], y:last[1], cell:dataRiver[dataRiver.length-1].cell});
+ const before = ":nth-child(" + (index + 1) + ")";
+ icons.select(".controlPoints").insert("circle", before)
+ .attr("cx", point[0]).attr("cy", point[1]).attr("r", 0.35)
+ .call(d3.drag().on("drag", routePointDrag))
+ .on("click", function(d) {
+ $(this).remove();
+ routeRedraw();
+ });
+ routeRedraw();
+ }
+
+ function routeDrawPoints() {
+ const node = elSelected.node();
+ const l = node.getTotalLength();
+ const parts = (l / 5) >> 0; // number of points
+ let inc = l / parts; // increment
+ if (inc === Infinity) {inc = l;} // 2 control points for short routes
+ // draw control points
+ for (var i = 0; i <= l; i += inc) {
+ const p = node.getPointAtLength(i);
+ addRoutePoint(p);
}
- var rndFactor = 0.2 + Math.random() * 1.6; // random factor in range 0.2-1.8
- var riverAmended = amendRiver(dataRiver, rndFactor);
+ }
+
+ function addRoutePoint(point) {
+ icons.select(".controlPoints").append("circle")
+ .attr("cx", point.x).attr("cy", point.y).attr("r", 0.35)
+ .call(d3.drag().on("drag", routePointDrag))
+ .on("click", function(d) {
+ if ($("#routeSplit").hasClass('pressed')) {
+ routeSplitInPoint(this);
+ } else {
+ $(this).remove();
+ routeRedraw();
+ }
+ });
+ }
+
+ function routePointDrag() {
+ d3.select(this).attr("cx", d3.event.x).attr("cy", d3.event.y);
+ routeRedraw();
+ }
+
+ function routeRedraw() {
+ let points = [];
+ icons.select(".controlPoints").selectAll("circle").each(function() {
+ var el = d3.select(this);
+ points.push({scX: +el.attr("cx"), scY: +el.attr("cy")});
+ });
lineGen.curve(d3.curveCatmullRom.alpha(0.1));
- var width = +elSelected.attr("data-width");
- var increment = +elSelected.attr("data-increment");
- var d = drawRiver(riverAmended, width, increment);
- elSelected.attr("d", d).attr("data-points", round(JSON.stringify(riverAmended), 1));
- rivers.select(".riverPoints").selectAll("*").remove();
- riverAmended.map(function(p) {addRiverPoint(p);});
- return;
+ elSelected.attr("d", lineGen(points));
}
- if (this.id == "riverResize") {$("#riverAngle, #riverAngleValue, #riverScaleIcon, #riverScale, #riverReset").toggle();}
- if (this.id == "riverWidth") {$("#riverWidthInput, #riverIncrementIcon, #riverIncrement").toggle();}
- if (this.id == "riverAddPoint" || this.id == "riverRemovePoint" || this.id == "riverNew") {
- if ($(this).hasClass('pressed')) {
- $(".pressed").removeClass('pressed');
- if (elSelected.attr("data-river") == "new") {
- rivers.select(".riverPoints").selectAll("*").remove();
- elSelected.attr("data-river", "");
- elSelected.call(d3.drag().on("start", riverDrag)).classed("draggable", true);
- }
- viewbox.style("cursor", "default");
+
+ function newRouteAddPoint() {
+ const point = d3.mouse(this);
+ addRoutePoint({x:point[0], y:point[1]});
+ if (elSelected.attr("data-route") !== "new") {
+ const id = routeType + "" + group.selectAll("*").size();
+ elSelected = group.append("path").attr("data-route", "new").attr("id", id).on("click", completeNewRoute);
} else {
- $(".pressed").removeClass('pressed');
- $(this).addClass('pressed');
- if (this.id == "riverAddPoint" || this.id == "riverNew") {viewbox.style("cursor", "crosshair");}
- if (this.id == "riverNew") {rivers.select(".riverPoints").selectAll("*").remove();}
+ routeRedraw();
+ }
+ }
+
+ function completeNewRoute() {
+ $("#routeNew").removeClass('pressed');
+ restoreDefaultEvents();
+ if (elSelected.attr("data-route") === "new") {
+ routeRedraw();
+ elSelected.attr("data-route", "").on("click", editRoute);
+ const node = elSelected.node();
+ const l = node.getTotalLength();
+ let pathCells = [];
+ for (var i = 0; i <= l; i ++) {
+ const p = node.getPointAtLength(i);
+ const cell = diagram.find(p.x, p.y);
+ if (!cell) {return;}
+ pathCells.push(cell.index);
+ }
+ const uniqueCells = [...new Set(pathCells)];
+ uniqueCells.map(function(c) {
+ if (cells[c].path !== undefined) {cells[c].path += 1;}
+ else {cells[c].path = 1;}
+ });
}
- return;
}
- if (this.id == "riverReset") {
- elSelected.attr("transform", "");
- rivers.select(".riverPoints").attr("transform", "");
- riverAngle.value = 0;
- riverAngleValue.innerHTML = "0°";
- riverScale.value = 1;
- return;
- }
- $("#riverEditor .editButton").toggle();
- $(this).show().next().toggle();
- });
- // on riverAngle change
- $("#riverAngle").change(function() {
- var tr = parseTransform(elSelected.attr("transform"));
- riverAngleValue.innerHTML = Math.abs(+this.value) + "°";
- $(this).attr("title", $(this).val());
- var c = elSelected.node().getBBox();
- var angle = this.value;
- var scale = +tr[5];
- transform = `translate(${tr[0]},${tr[1]}) rotate(${angle} ${(c.x+c.width/2)*scale} ${(c.y+c.height/2)*scale}) scale(${scale})`;
- elSelected.attr("transform", transform);
- rivers.select(".riverPoints").attr("transform", transform);
- });
+ function routeUpdateGroups() {
+ const type = group.attr("data-type");
+ routeGroup.innerHTML = "";
+ routes.selectAll("g").each(function(d) {
+ const el = d3.select(this);
+ if (el.attr("data-type") !== type) {return;}
+ const opt = document.createElement("option");
+ opt.value = opt.innerHTML = el.attr("id");
+ routeGroup.add(opt);
+ });
+ }
- // on riverScale change
- $("#riverScale").change(function() {
- var tr = parseTransform(elSelected.attr("transform"));
- $(this).attr("title", $(this).val());
- var scaleOld = +tr[5];
- var scale = +this.value;
- var c = elSelected.node().getBBox();
- var cx = c.x+c.width/2;
- var cy = c.y+c.height/2;
- var trX = +tr[0] + cx * (scaleOld - scale);
- var trY = +tr[1] + cy * (scaleOld - scale);
- var scX = +tr[3] * scale/scaleOld;
- var scY = +tr[4] * scale/scaleOld;
- transform = `translate(${trX},${trY}) rotate(${tr[2]} ${scX} ${scY}) scale(${scale})`;
- elSelected.attr("transform", transform);
- rivers.select(".riverPoints").attr("transform", transform);
- });
+ function routeSplitInPoint(clicked) {
+ $("#routeSplit").removeClass('pressed');
+ let points1 = [], points2 = [];
+ let points = points1;
+ icons.select(".controlPoints").selectAll("circle").each(function() {
+ var el = d3.select(this);
+ points.push({scX: +el.attr("cx"), scY: +el.attr("cy")});
+ if (this === clicked) {
+ points = points2;
+ points.push({scX: +el.attr("cx"), scY: +el.attr("cy")});
+ }
+ el.remove();
+ });
+ lineGen.curve(d3.curveCatmullRom.alpha(0.1));
+ elSelected.attr("d", lineGen(points1));
+ const id = routeType + "" + group.selectAll("*").size();
+ group.append("path").attr("id", id).attr("d", lineGen(points2)).on("click", editRoute);
+ routeDrawPoints();
+ }
- // change river width
- $("#riverWidthInput, #riverIncrement").change(function() {
- var points = JSON.parse(elSelected.attr("data-points"));
- lineGen.curve(d3.curveCatmullRom.alpha(0.1));
- var width = +$("#riverWidthInput").val();
- var increment = +$("#riverIncrement").val();
- var d = drawRiver(points, width, increment);
- elSelected.attr("d", d).attr("data-width", width).attr("data-increment", increment);
- });
-
- function riverDrag() {
- var x = d3.event.x, y = d3.event.y;
- var el = d3.select(this);
- var tr = parseTransform(el.attr("transform"));
- d3.event.on("drag", function() {
- var xc = d3.event.x, yc = d3.event.y;
- var transform = `translate(${(+tr[0]+xc-x)},${(+tr[1]+yc-y)}) rotate(${tr[2]} ${tr[3]} ${tr[4]}) scale(${tr[5]})`;
- el.attr("transform", transform);
- rivers.select(".riverPoints").attr("transform", transform);
+ $("#routeGroup").change(function() {
+ const newGroup = this.value;
+ if (routeType === newGroup) {return;}
+ $(elSelected.node()).detach().appendTo($("#"+newGroup));
+ routeType = newGroup;
});
- }
- function parseTransform(string) {
- // [translateX,translateY,rotateDeg,rotateX,rotateY,scale]
- if (!string) {return [0,0,0,0,0,1];}
- var a = string.replace(/[a-z()]/g,"").replace(/[ ]/g,",").split(",");
- return [a[0] || 0, a[1] || 0, a[2] || 0, a[3] || 0, a[4] || 0, a[5] || 1];
- }
+ $("#routeNew").click(function() {
+ if ($(this).hasClass('pressed')) {
+ completeNewRoute();
+ } else {
+ // enter creation mode
+ $(".pressed").removeClass('pressed');
+ $(this).addClass('pressed');
+ icons.select(".controlPoints").selectAll("*").remove();
+ viewbox.style("cursor", "crosshair").on("click", newRouteAddPoint);
+ }
+ });
- function redrawRiver() {
- var points = [];
- rivers.select(".riverPoints").selectAll("circle").each(function() {
- var el = d3.select(this);
- points.push([+el.attr("cx"), +el.attr("cy")]);
+ $("#routeRemove").click(function() {
+ alertMessage.innerHTML = `Are you sure you want to remove the route?`;
+ $("#alert").dialog({resizable: false, title: "Remove route",
+ buttons: {
+ Remove: function() {
+ $(this).dialog("close");
+ elSelected.remove();
+ $("#routeEditor").dialog("close");
+ },
+ Cancel: function() {$(this).dialog("close");}
+ }
+ })
});
- lineGen.curve(d3.curveCatmullRom.alpha(0.1));
- var d = drawRiver(points);
- elSelected.attr("d", d).attr("data-points", round(JSON.stringify(points), 1));
}
function manorsAndRegions() {
@@ -1859,10 +2283,10 @@ function fantasyMap() {
c.height = rn(c.height, 2);
c.flux = rn(c.flux, 2);
// base score from height (will be biom)
- if (c.height <= 0.8) {score = 1.4;}
+ if (c.height <= 0.8) {score = 1.4;}
if (c.height <= 0.6) {score = 1.6;}
if (c.height <= 0.5) {score = 1.8;}
- if (c.height <= 0.4) {score = 2;}
+ if (c.height <= 0.4) {score = 2;}
score += (1 - c.height) / 2;
if (c.ctype && Math.random() < 0.8 && !c.river) {
c.score = 0; // ignore 80% of extended cells
@@ -1871,7 +2295,7 @@ function fantasyMap() {
if (c.harbor === 1) {score += 2;} else {score -= 0.2;} // good sea harbor is valued
if (c.river && c.ctype === 1) {score += 2;} // sea estuaries are valued
}
- if (c.river && c.ctype === 1) {score += 2;} // all estuaries are valued
+ if (c.river && c.ctype === 1) {score += 2;} // all estuaries are valued
if (c.flux > 1) {score += Math.pow(c.flux, 0.3);} // riverbank is valued
if (c.confluence) {score += Math.pow(c.confluence, 0.3);} // confluence is valued;
}
@@ -1890,17 +2314,17 @@ function fantasyMap() {
if (path) {
path = Math.pow(path, 0.2);
var crossroad = c.crossroad || 0; // crossroads are valued
- score = score + path + crossroad;
- }
+ score = score + path + crossroad;
+ }
c.score = rn(Math.random() * score + score, 2); // 0.5 random factor
});
land.sort(function(a, b) {return b.score - a.score;});
console.timeEnd('rankPlacesEconomy');
}
-
+
// get population for manors and states
function calculatePopulation() {
- // rank all burgs to get final scores (population); what attracts trade/people
+ // rank all burgs to get final scores (population); what attracts trade/people
manors.map(function(m) {
var cell = cells[m.cell];
var score = cell.score;
@@ -1916,7 +2340,7 @@ function fantasyMap() {
states.map(function(s, i) {
// define region burgs count
var burgs = $.grep(manors, function(e) {return (e.region === i);});
- s.burgs = burgs.length;
+ s.burgs = burgs.length;
// define region total and burgs population
var burgsPop = 0; // get summ of all burgs population
burgs.map(function(b) {burgsPop += b.population;});
@@ -1950,17 +2374,17 @@ function fantasyMap() {
states.push({i: states.length, color: "neutral", name: "Neutrals", capital: "neutral", cells: regionCells.length, burgs: burgs.length, urbanPopulation, ruralPopulation, area});
}
}
-
+
// Locate cultures
function locateCultures() {
- var cultureCenters = d3.range(7).map(function(d) {return [Math.random() * mapWidth, Math.random() * mapHeight];});
- cultureTree = d3.quadtree().extent([[0, 0], [mapHeight, mapWidth]]).addAll(cultureCenters);;
+ var cultureCenters = d3.range(7).map(function(d) {return [Math.random() * graphWidth, Math.random() * graphHeight];});
+ cultureTree = d3.quadtree().extent([[0, 0], [graphWidth, graphHeight]]).addAll(cultureCenters);;
}
function locateCapitals() {
console.time('locateCapitals');
- var spacing = mapWidth / capitalsCount;
- manorTree = d3.quadtree().extent([[0, 0], [mapHeight, mapWidth]]);
+ var spacing = graphWidth / capitalsCount;
+ manorTree = d3.quadtree().extent([[0, 0], [graphWidth, graphHeight]]);
console.log(" countries: " + capitalsCount);
for (var l = 0; l < land.length && manors.length < capitalsCount; l++) {
var m = manors.length;
@@ -1971,7 +2395,7 @@ function fantasyMap() {
}
if (dist >= spacing) {
var cell = land[l].index;
- shiftSettlement(land[l], "capital");
+ shiftSettlement(land[l], "capital");
queue.push(cell);
queue.push(...land[l].neighbors);
var closest = cultureTree.find(land[l].data[0], land[l].data[1]);
@@ -1983,7 +2407,7 @@ function fantasyMap() {
if (l === land.length - 1) {
console.error("Cannot place capitals with current spacing. Trying again with reduced spacing");
l = -1, manors = [], queue = [];
- manorTree = d3.quadtree().extent([[0, 0], [mapHeight, mapWidth]]);
+ manorTree = d3.quadtree().extent([[0, 0], [graphWidth, graphHeight]]);
spacing /= 1.2;
}
}
@@ -1997,7 +2421,7 @@ function fantasyMap() {
states[i].name = generateStateName(i);
var p = cells[e.cell];
p.manor = i;
- p.region = i;
+ p.region = i;
p.culture = e.culture;
});
console.timeEnd('locateCapitals');
@@ -2012,7 +2436,7 @@ function fantasyMap() {
shiftSettlement(land[l], "town");
var x = land[l].data[0];
var y = land[l].data[1];
- var cell = land[l].index;
+ var cell = land[l].index;
var region = "neutral", culture = -1, closest = neutral;
for (c = 0; c < capitalsCount; c++) {
var dist = Math.hypot(manors[c].x - x, manors[c].y - y) / states[c].power;
@@ -2038,7 +2462,7 @@ function fantasyMap() {
}
console.timeEnd('locateTowns');
}
-
+
function shiftSettlement(cell, type) {
if ((type === "capital" && cell.harbor) || (type === "town" && cell.harbor === 1)) {
cell.port = true;
@@ -2055,9 +2479,9 @@ function fantasyMap() {
cell.data[1] += shift;
cell.data[0] = rn(cell.data[0], 2);
cell.data[1] = rn(cell.data[1], 2);
- }
+ }
}
-
+
// Validate each island with manors has at least one port (so Island is accessible)
function checkAccessibility() {
console.time("checkAccessibility");
@@ -2068,7 +2492,7 @@ function fantasyMap() {
if (ports.length === 0) {
var portCandidates = $.grep(manorsOnIsland, function(c) {return (c.harbor && c.ctype === 1);});
if (portCandidates.length > 0) {
- console.log("No ports on island " + manorsOnIsland[0].fn + ". Upgrading first burg to port");
+ // No ports on island. Upgrading first burg to port
portCandidates[0].harbor = 1;
portCandidates[0].port = true;
portCandidates[0].data[0] = portCandidates[0].coastX;
@@ -2079,7 +2503,7 @@ function fantasyMap() {
// add 1 score point for every other burg on island (as it's the only port)
portCandidates[0].score += Math.floor((portCandidates.length - 1) / 2);
} else {
- console.log("No ports on island " + manorsOnIsland[0].fn + ". Reducing score for " + manorsOnIsland.length + " burgs");
+ // No ports on island. Reducing score for burgs
manorsOnIsland.map(function(e) {e.score -= 2;});
}
}
@@ -2112,7 +2536,7 @@ function fantasyMap() {
var minDist = 1000, end = -1;
ports.map(function(p) {
var dist = Math.hypot(e.data[0] - p.data[0], e.data[1] - p.data[1]);
- if (dist < minDist) {minDist = dist; end = p.index;}
+ if (dist < minDist) {minDist = dist; end = p.index;}
});
if (end !== -1) {
var start = e.index;
@@ -2137,7 +2561,7 @@ function fantasyMap() {
var dist = Math.hypot(cells[start].data[0] - cells[end].data[0], cells[start].data[1] - cells[end].data[1]);
if (dist > 10) {
var path = findLandPath(start, end, "direct");
- restorePath(end, start, "small", path);
+ restorePath(end, start, "small", path);
}
}
manorsOnIsland.map(function(e, d) {
@@ -2171,6 +2595,7 @@ function fantasyMap() {
if (portsOnIsland.length) {ports.push(portsOnIsland);}
}
ports.sort(function(a, b) {return b.length - a.length;});
+ const anchors = burgs.append("g").attr("id", "anchors");
for (var i = 0; i < ports.length; i++) {
var start = ports[i][0].index;
var paths = findOceanPaths(start, -1);
@@ -2178,7 +2603,8 @@ function fantasyMap() {
for (var p = 0; p < ports[i].length; p++) {
var x = ports[i][p].data[0];
var y = ports[i][p].data[1];
- icons.append("use").attr("xlink:href", "#icon-anchor").attr("x", x - 0.5).attr("y", y - 0.44).attr("width", 1).attr("height", 1)
+ anchors.append("use").attr("xlink:href", "#icon-anchor")
+ .attr("x", x - 0.5).attr("y", y - 0.44).attr("width", 1).attr("height", 1)
.call(d3.drag().on("start", elementDrag));
}
var length = ports[i].length; // ports on island
@@ -2237,7 +2663,7 @@ function fantasyMap() {
cost += Math.hypot(cells[e].data[0] - pol.data[0], cells[e].data[1] - pol.data[1]) / 30;
}
var costNew = costTotal[next] + cost;
- if (!cameFrom[e] || costNew < costTotal[e]) { //
+ if (!cameFrom[e] || costNew < costTotal[e]) { //
costTotal[e] = costNew;
cameFrom[e] = next;
var dist = Math.hypot(cells[e].data[0] - cells[end].data[0], cells[e].data[1] - cells[end].data[1]) / 15;
@@ -2248,7 +2674,7 @@ function fantasyMap() {
});
}
return cameFrom;
- }
+ }
function findLandPaths(start, type) {
// Dijkstra algorithm (not used now)
@@ -2325,7 +2751,7 @@ function fantasyMap() {
pol.neighbors.forEach(function(e) {
if (cells[e].path && (cells[e].ctype === -1 || cells[e].haven === next)) {
var dist = Math.hypot(cells[e].data[0] - pol.data[0], cells[e].data[1] - pol.data[1]);
- costNew = costTotal[next] + dist;
+ costNew = costTotal[next] + dist;
if (!cameFrom[e]) {
costTotal[e] = costNew;
cameFrom[e] = next;
@@ -2368,7 +2794,7 @@ function fantasyMap() {
var f = cells[path[0].i];
if (f.path > 1) {
if (!f.crossroad) {f.crossroad = 0;}
- f.crossroad += plus;
+ f.crossroad += plus;
}
var t = cells[(path[path.length - 1].i)];
if (t.path > 1) {
@@ -2379,12 +2805,16 @@ function fantasyMap() {
// draw path segments
var line = lineGen(path);
line = round(line, 1);
+ let id = 0; // to create unique route id
if (type === "main") {
- roads.append("path").attr("d", line).attr("data-start", start).attr("data-end", end);
+ id = roads.selectAll("path").size();
+ roads.append("path").attr("d", line).attr("id", "road"+id).on("click", editRoute);
} else if (type === "small") {
- trails.append("path").attr("d", line);
+ id = trails.selectAll("path").size();
+ trails.append("path").attr("d", line).attr("id", "trail"+id).on("click", editRoute);
} else if (type === "ocean") {
- searoutes.append("path").attr("d", line);
+ id = searoutes.selectAll("path").size();
+ searoutes.append("path").attr("d", line).attr("id", "searoute"+id).on("click", editRoute);
}
}
path = [];
@@ -2401,10 +2831,10 @@ function fantasyMap() {
var cell = manors[i].cell;
var name = manors[i].name;
if (i < capitalsCount) {
- burgs.append("circle").attr("id", "manorIcon"+i).attr("r", 1).attr("stroke-width", .24).attr("class", "manor").attr("cx", x).attr("cy", y);
- capitals.append("text").attr("id", "manorLabel"+i).attr("x", x).attr("y", y).attr("dy", -1.3).text(name);
+ burgs.append("circle").attr("id", "manorIcon"+i).attr("r", 1).attr("stroke-width", .24).attr("cx", x).attr("cy", y);
+ capitals.append("text").attr("id", "manorLabel"+i).attr("x", x).attr("y", y).attr("dy", -1.3).text(name);
} else {
- burgs.append("circle").attr("id", "manorIcon"+i).attr("r", .5).attr("stroke-width", .12).attr("class", "manor").attr("cx", x).attr("cy", y);
+ burgs.append("circle").attr("id", "manorIcon"+i).attr("r", .5).attr("stroke-width", .12).attr("cx", x).attr("cy", y);
towns.append("text").attr("id", "manorLabel"+i).attr("x", x).attr("y", y).attr("dy", -.7).text(name);
}
}
@@ -2416,7 +2846,6 @@ function fantasyMap() {
// calculate Markov's chain from real data
function calculateChains() {
var vowels = "aeiouy";
- //var digraphs = ["ai","ay","ea","ee","ei","ey","ie","oa","oo","ow","ue","ch","ng","ph","sh","th","wh"];
for (var l = 0; l < cultures.length; l++) {
var probs = []; // Coleshill -> co les hil l-com
var inline = manorNames[l].join(" ").toLowerCase();
@@ -2449,7 +2878,7 @@ function fantasyMap() {
var l = cur.charAt(cur.length - 1);
if (cur !== " ") {
res += cur;
- next = data[l];
+ next = data[l];
cur = next[Math.floor(Math.random() * next.length)];
} else if (res.length > 2 + Math.floor(Math.random() * 5)) {
break;
@@ -2461,21 +2890,23 @@ function fantasyMap() {
var name = res.charAt(0).toUpperCase() + res.slice(1);
return name;
}
-
+
// Define areas based on the closest manor to a polygon
function defineRegions() {
console.time('defineRegions');
- manorTree = d3.quadtree().extent([[0, 0], [mapHeight, mapWidth]]);
- manors.map(function(m) {manorTree.add([m.x, m.y]);});
+ manorTree = d3.quadtree().extent([[0, 0], [graphWidth, graphHeight]]);
+ manors.map(function(m) {
+ if (m.region === "removed") {return;}
+ manorTree.add([m.x, m.y]);
+ });
land.map(function(i) {
- if (i.region !== undefined) {return;}
var x = i.data[0], y = i.data[1];
var closest = manorTree.find(x, y);
var dist = Math.hypot(closest[0] - x, closest[1] - y);
if (dist > neutral / 2) {
i.region = "neutral";
var closestCulture = cultureTree.find(i.data[0], i.data[1]);
- i.culture = cultureTree.data().indexOf(closestCulture);
+ i.culture = cultureTree.data().indexOf(closestCulture);
} else {
var manor = $.grep(manors, function(e) {return (e.x === closest[0] && e.y === closest[1]);});
var cell = manor[0].cell;
@@ -2498,28 +2929,36 @@ function fantasyMap() {
// Define areas cells
function drawRegions() {
console.time('drawRegions');
- var edges = [], coastalEdges = [], borderEdges = [], neutralEdges = []; // arrays to store edges
- land.map(function(l) {
- var s = l.region;
- if (!edges[s]) {edges[s] = [], coastalEdges[s] = [];}
- var cell = diagram.cells[l.index];
- cell.halfedges.forEach(function(e) {
- var edge = diagram.edges[e];
- if (edge.left && edge.right) {
- var ea = edge.left.index;
- if (ea === l.index) {ea = edge.right.index;}
- var opp = cells[ea];
- if (opp.region !== s) {
- var start = edge[0].join(" ");
- var end = edge[1].join(" ");
- edges[s].push({start, end});
- if (opp.height >= 0.2 && opp.region > s) {borderEdges.push({start, end});}
- if (opp.height >= 0.2 && opp.region === "neutral") {neutralEdges.push({start, end});}
- if (opp.height < 0.2) {coastalEdges[s].push({start, end});}
- }
- }
- })
- });
+ // arrays to store edge data
+ var edges = [], coastalEdges = [], borderEdges = [], neutralEdges = [];
+ for (let a=0; a < states.length; a++) {
+ edges[a] = [];
+ coastalEdges[a] = [];
+ }
+ const e = diagram.edges;
+ for (let i=0; i < e.length; i++) {
+ if (e[i] === undefined) {continue;}
+ if (e[i].left === undefined || e[i].right === undefined) {continue;}
+ const l = e[i].left.index;
+ const r = e[i].right.index;
+ const lr = cells[l].region;
+ const rr = cells[r].region;
+ if (lr === rr) {continue;}
+ const start = e[i][0].join(" ");
+ const end = e[i][1].join(" ");
+ const p = {start, end};
+ if (Number.isInteger(lr)) {
+ edges[lr].push(p);
+ if (rr === undefined) {coastalEdges[lr].push(p);}
+ else if (rr === "neutral") {neutralEdges.push(p);}
+ }
+ if (Number.isInteger(rr)) {
+ edges[rr].push(p);
+ if (lr === undefined) {coastalEdges[rr].push(p);}
+ else if (lr === "neutral") {neutralEdges.push(p);}
+ else if (Number.isInteger(lr)) {borderEdges.push(p);}
+ }
+ }
edges.map(function(e, i) {
if (e.length) {
drawRegion(e, i);
@@ -2567,7 +3006,7 @@ function fantasyMap() {
array.sort(function(a, b){return b.length - a.length;});
var name = states[region].name;
var c = polylabel(array, 1.0); // pole of inaccessibility
- countries.append("text").attr("id", "regionLabel"+region).attr("x", rn(c[0])).attr("y", rn(c[1])).text(name).on("click", editLabel);
+ countries.append("text").attr("id", "regionLabel"+region).attr("x", rn(c[0])).attr("y", rn(c[1])).text(name).on("click", editLabel);
states[region].area = rn(Math.abs(d3.polygonArea(array[0]))); // define region area
}
@@ -2598,7 +3037,7 @@ function fantasyMap() {
path += lineGen(edgesOrdered);
}
var color = states[region].color;
- regions.append("path").attr("d", round(path, 1)).attr("fill", "none").attr("stroke", color).attr("stroke-width", 1.5).attr("class", "region"+region);
+ regions.append("path").attr("d", round(path, 1)).attr("fill", "none").attr("stroke", color).attr("stroke-width", 1.5).attr("class", "region"+region);
}
function drawBorders(edges, type) {
@@ -2644,7 +3083,7 @@ function fantasyMap() {
if (Math.random() < 0.5 && culture == 0) {suffix = "land";} // 50% "land" for German
if (Math.random() < 0.33 && (culture == 1 || culture == 6)) {suffix = "land";} // 33% "land" for English and Scandinavian
if (culture == 5 && name.slice(-2) === "sk") {name.slice(0,-2);} // exclude -sk suffix for Slavic
- if (name.indexOf(suffix) !== -1) {suffix = "";} // null suffix if name already contains it
+ if (name.indexOf(suffix) !== -1) {suffix = "";} // null suffix if name already contains it
var ending = name.slice(-1);
if (vowels.includes(ending) && name.length > 3) {
if (Math.random() > 0.2) {
@@ -2657,9 +3096,9 @@ function fantasyMap() {
}
} else if (Math.random() > 0.5) {
name += suffix // 50% for cc
- }
+ }
if (name.slice(-4) === "berg") {name += suffix;} // special case for -berg
- return name;
+ return name;
}
// draw the Heightmap
@@ -2701,21 +3140,21 @@ function fantasyMap() {
var type = styleOverlayType.value;
var size = +styleOverlaySize.value;
if (type === "hex") {
- var hexbin = d3.hexbin().radius(size).size([mapWidth, mapHeight]);
- overlay.append("path").attr("d", round(hexbin.mesh(), 0));
+ var hexbin = d3.hexbin().radius(size).size([svgWidth, svgHeight]);
+ overlay.append("path").attr("d", round(hexbin.mesh(), 0));
} else if (type === "square") {
- var x = d3.range(size, mapWidth, size);
- var y = d3.range(size, mapHeight, size);
+ var x = d3.range(size, svgWidth, size);
+ var y = d3.range(size, svgHeight, size);
overlay.append("g").selectAll("line").data(x).enter().append("line")
.attr("x1", function(d) {return d;})
.attr("x2", function(d) {return d;})
- .attr("y1", 0).attr("y2", mapHeight);
+ .attr("y1", 0).attr("y2", svgHeight);
overlay.append("g").selectAll("line").data(y).enter().append("line")
.attr("y1", function(d) {return d;})
.attr("y2", function(d) {return d;})
- .attr("x1", 0).attr("x2", mapWidth);
+ .attr("x1", 0).attr("x2", svgWidth);
} else {
- var tr = `translate(80 80) scale(${size / 25})`;
+ var tr = `translate(80 80) scale(${size / 20})`;
d3.select("#rose").attr("transform", tr);
overlay.append("use").attr("xlink:href","#rose");
}
@@ -2733,12 +3172,26 @@ function fantasyMap() {
delete c.used;
delete c.coastX;
delete c.coastY;
+ if (c.ctype === undefined) {delete c.ctype;}
+ c.height = rn(c.height, 2);
+ c.flux = rn(c.flux, 2);
});
// restore heightmap layer if it was turned on
if (!$("#toggleHeight").hasClass("buttonoff") && !terrs.selectAll("path").size()) {toggleHeight();}
+ closeDialogs();
+ // svg.selectAll("path, circle, line, text").attr("vector-effect", "non-scaling-stroke"); // non-scaling-stroke
+ invokeActiveZooming();
console.timeEnd("cleanData");
}
-
+
+ // close all dialogs except stated
+ function closeDialogs(except) {
+ except = except || "#except";
+ $(".dialog:visible").not(except).each(function(e) {
+ $(this).dialog("close");
+ });
+ }
+
// Draw the water flux system (for dubugging)
function toggleFlux() {
var colorFlux = d3.scaleSequential(d3.interpolateBlues);
@@ -2894,7 +3347,7 @@ function fantasyMap() {
if (matrix) {
var angle = matrix.split('(')[1].split(')')[0].split(' ')[0];
var bbox = el.node().getBBox();
- var rotate = "rotate("+ angle + " " + (bbox.x + bbox.width/2) + " " + (bbox.y + bbox.height/2) + ")";
+ var rotate = "rotate("+ angle + " " + (bbox.x + bbox.width/2) + " " + (bbox.y + bbox.height/2) + ")";
el.attr("transform", rotate);
}
} else {
@@ -2907,7 +3360,7 @@ function fantasyMap() {
}
// Complete the map for the "customize" mode
- function getMap() {
+ function getMap(keepData) {
exitCustomization();
console.time("TOTAL");
applyMapSize();
@@ -2919,177 +3372,152 @@ function fantasyMap() {
flux();
drawRelief();
drawCoastline();
- manorsAndRegions();
+ if (!keepData) {manorsAndRegions();} else {restoreRegions();}
cleanData();
console.timeEnd("TOTAL");
}
- // Mouseclick events
- function clicked() {
- var brush = $(".pressed").attr("id");
- if (customization !== 1 && brush === "brushHill") {
- $("#"+brush).removeClass("pressed");
- brush = $(".pressed").attr("id");
- }
- if (customization === 2) {
- var cell = diagram.find(x, y).index;
- var assigned = regions.select("#temp").select("path[data-cell='"+cell+"']");
- if (assigned.size()) {var s = assigned.attr("data-state");} else {var s = cells[cell].region;}
- if (s === "neutral") {s = states.length - 1;}
- $(".selected").removeClass("selected");
- $("#state"+s).addClass("selected");
- }
- if (!brush) {return;}
- var point = d3.mouse(this);
- if ($("#riverAddPoint").hasClass('pressed')) {
- var dists = [], points = [];
- var tr = parseTransform(elSelected.attr("transform"));
- if (tr[5] == "1") {
- point[0] -= +tr[0];
- point[1] -= +tr[1];
- }
- rivers.select(".riverPoints").selectAll("circle").each(function() {
- var x = +d3.select(this).attr("cx");
- var y = +d3.select(this).attr("cy");
- dists.push(Math.hypot(point[0] - x, point[1] - y));
- points.push([x, y]);
- }).remove();
- var index = dists.length;
- if (points.length > 1) {
- var sorted = dists.slice(0).sort(function(a, b) {return a-b;});
- var closest = dists.indexOf(sorted[0]);
- var next = dists.indexOf(sorted[1]);
- if (closest <= next) {index = closest+1;} else {index = next+1;}
+ // Add support "click to add" button events
+ $("#customizeTab").click(function() {clickToAdd()});
+ function clickToAdd() {
+ if (modules.clickToAdd) {return;}
+ modules.clickToAdd = true;
+
+ // add label on click
+ $("#addLabel").click(function() {
+ if ($(this).hasClass('pressed')) {
+ $(".pressed").removeClass('pressed');
+ restoreDefaultEvents();
+ } else {
+ $(".pressed").removeClass('pressed');
+ $(this).addClass('pressed');
+ closeDialogs(".stable");
+ viewbox.style("cursor", "crosshair").on("click", addLabelOnClick);
}
- points.splice(index, 0, [point[0], point[1]]);
- lineGen.curve(d3.curveCatmullRom.alpha(0.1));
- var d = drawRiver(points, 2, 1);
- elSelected.attr("d", d).attr("data-points", round(JSON.stringify(points), 1));
- points.map(function(p) {addRiverPoint(p)});
- return;
- }
- if ($("#riverNew").hasClass('pressed')) {
- if (elSelected.attr("data-river") !== "new") {
- elSelected.call(d3.drag().on("drag", null)).classed("draggable", false);
- var river = +$("#rivers > path").last().attr("id").slice(5) + 1;
- elSelected = rivers.append("path").attr("data-river", "new").attr("id", "river"+river)
- .attr("data-width", 2).attr("data-increment", 1).on("click", editRiver);
+ });
+
+ function addLabelOnClick() {
+ const point = d3.mouse(this);
+ const index = getIndex(point);
+ const x = rn(point[0], 2), y = rn(point[1], 2);
+
+ // get culture in clicked point to generate a name
+ const closest = cultureTree.find(x, y);
+ const culture = cultureTree.data().indexOf(closest) || 0;
+ const name = generateName(culture);
+
+ let group = labels.select("#addedLabels");
+ if (!group.size()) {
+ group = labels.append("g").attr("id", "addedLabels")
+ .attr("fill", "#3e3e4b").attr("opacity", 1)
+ .attr("font-family", "Almendra SC").attr("data-font", "Almendra+SC")
+ .attr("font-size", 18).attr("data-size", 18);
+ }
+ group.append("text").attr("x", x).attr("y", y).text(name).on("click", editLabel);
+
+ if (d3.event.shiftKey === false) {
+ $("#addLabel").removeClass("pressed");
+ restoreDefaultEvents();
}
- addRiverPoint({scX:point[0], scY:point[1]});
- redrawRiver();
- return;
}
- if (brush === "addLabel" || brush === "addBurg" || brush.includes("selectCapital")) {
- var cell = diagram.find(x, y).index;
- if (!cell) {return;}
- var x = rn(point[0], 2), y = rn(point[1], 2);
+
+ // add burg on click
+ $("#addBurg").click(function() {
+ if ($(this).hasClass('pressed')) {
+ $(".pressed").removeClass('pressed');
+ restoreDefaultEvents();
+ } else {
+ $(".pressed").removeClass('pressed');
+ $(this).attr("data-state", -1).addClass('pressed');
+ $("#burgAdd").addClass('pressed');
+ closeDialogs(".stable");
+ viewbox.style("cursor", "crosshair").on("click", addBurgOnClick);
+ }
+ });
+
+ function addBurgOnClick() {
+ const point = d3.mouse(this);
+ const index = getIndex(point);
+ const x = rn(point[0], 2), y = rn(point[1], 2);
+
// get culture in clicked point to generate a name
- var closest = cultureTree.find(x, y);
- var culture = cultureTree.data().indexOf(closest) || 0;
- var name = generateName(culture);
- // please label
- if (brush === "addLabel") {
- addedLabels.append("text").attr("x", x).attr("y", y).text(name).on("click", editLabel);
- if (!shift) {$("#"+brush).removeClass("pressed");}
- }
- if (brush === "addBurg") {
- if (cells[cell].height < 0.2) {
- console.error("Cannot place burg in the water! Select a land cell");
- return;
- }
- if (cells[cell].manor !== undefined) {
- console.error("There is already a burg in this cell. Select a free cell");
- return;
- }
- burgs.append("circle").attr("r", .5).attr("stroke-width", .12).attr("cx", x).attr("cy", y).call(d3.drag().on("start", elementDrag));
- labels.select("#towns").append("text").attr("x", x).attr("y", y).attr("dy", -0.7).text(name).on("click", editLabel);
- var region, state;
- if ($("#burgAdd").hasClass("pressed")) {
- state = +$("#burgsEditor").attr("data-state");
- region = states[state].color === "neutral" ? "neutral" : state;
- var oldRegion = cells[cell].region;
- if (region !== oldRegion) {
- cells[cell].region = region;
- redrawRegions();
- }
- } else {
- region = cells[cell].region;
- state = region === "neutral" ? states.length - 1 : region;
- }
- var i = manors.length;
- cells[cell].manor = i;
- var score = cells[cell].score;
- if (score <= 0) {score = rn(Math.random(), 2);}
- if (cells[cell].crossroad) {score += cell.crossroad;} // crossroads
- if (cells[cell].confluence) {score += Math.pow(cell.confluence, 0.3);} // confluences
- if (cells[cell].port) {score *= 3;} // port-capital
- var population = rn(score, 1);
- manors.push({i, cell, x, y, region, culture, name, population});
- recalculateStateData(state);
- updateCountryEditors();
- if (!shift) {
- $("#"+brush).removeClass("pressed");
- $("#burgAdd").removeClass("pressed");
- }
+ const closest = cultureTree.find(x, y);
+ const culture = cultureTree.data().indexOf(closest) || 0;
+ const name = generateName(culture);
+
+ if (cells[index].height < 0.2) {
+ console.error("Cannot place burg in the water! Select a land cell");
+ return;
}
- if (brush.includes("selectCapital")) {
- if (cells[cell].height < 0.2) {
- console.error("Cannot place capital in the water! Select a land cell");
- return;
- }
- var state = +brush.replace("selectCapital", "");
- var oldState = cells[cell].region;
- if (oldState === "neutral") {oldState = states.length - 1;}
- if (cells[cell].manor !== undefined) {
- var burg = cells[cell].manor;
- if (states[oldState].capital === burg) {
- console.error("Existing capital cannot be selected as a new state capital! Select other cell");
- return;
- } else {
- // make capital from existing burg
- var urbanFactor = 0.9; // for old neutrals
- manors[burg].region = state;
- if (oldState === "neutral") {manors[burg].population *= (1 / urbanFactor);}
- manors[burg].population *= 2; // give capital x2 population bonus
- states[state].capital = burg;
- $("#manorLabel"+burg).detach().appendTo($("#capitals")).attr("dy", -1.3);
- $("#manorIcon"+burg).attr("r", 1).attr("stroke-width", .24);
- }
- } else {
- // create new burg for capital
- var i = manors.length;
- cells[cell].manor = i;
- states[state].capital = i;
- var score = cells[cell].score;
- if (score <= 0) {score = rn(Math.random(), 2);}
- if (cells[cell].crossroad) {score += cell.crossroad;} // crossroads
- if (cells[cell].confluence) {score += Math.pow(cell.confluence, 0.3);} // confluences
- if (cells[cell].port) {score *= 3;} // port-capital
- var population = rn(score, 1);
- manors.push({i, cell, x, y, region: state, culture, name, population});
- burgs.append("circle").attr("r", 1).attr("stroke-width", .24).attr("cx", x).attr("cy", y).call(d3.drag().on("start", elementDrag));
- capitals.append("text").attr("id", "manorLabel"+i).attr("x", x).attr("y", y).attr("dy", -1.3).text(name).on("click", editLabel);
- }
- cells[cell].region = state;
- cells[cell].neighbors.map(function(n) {
- if (cells[n].height < 0.2) {return;}
- if (cells[n].manor !== undefined) {return;}
- cells[n].region = state;
- });
- redrawRegions();
- recalculateStateData(oldState); // re-calc old state data
- recalculateStateData(state); // calc new state data
- editCountries();
- $("#"+brush).removeClass("pressed");
+ if (cells[index].manor !== undefined) {
+ console.error("There is already a burg in this cell. You have to select a free cell");
+ return;
}
- return;
+ var i = manors.length;
+ burgs.append("circle").attr("id", "manorIcon"+i).attr("r", .5).attr("stroke-width", .12)
+ .attr("cx", x).attr("cy", y).call(d3.drag().on("start", elementDrag));
+ var group = labels.select("#addedBurgs");
+ if (!group.size()) {
+ group = labels.append("g").attr("id", "addedBurgs")
+ .attr("fill", "#3e3e4b").attr("opacity", 1)
+ .attr("font-family", "Almendra SC").attr("data-font", "Almendra+SC")
+ .attr("font-size", 4).attr("data-size", 4);
+ }
+ group.append("text").attr("id", "manorLabel"+i).attr("x", x).attr("y", y).attr("dy", -0.7).text(name).on("click", editLabel);
+ invokeActiveZooming();
+
+ if (d3.event.shiftKey === false) {
+ $("#addBurg, #burgAdd").removeClass("pressed");
+ restoreDefaultEvents();
+ }
+
+ var region, state = +$("#addBurg").attr("data-state");
+ if (state !== -1) {
+ region = states[state].capital === "neutral" ? "neutral" : state;
+ var oldRegion = cells[index].region;
+ if (region !== oldRegion) {
+ cells[index].region = region;
+ redrawRegions();
+ }
+ } else {
+ region = cells[index].region;
+ state = region === "neutral" ? states.length - 1 : region;
+ }
+ cells[index].manor = i;
+ let score = cells[index].score;
+ if (score <= 0) {score = rn(Math.random(), 2);}
+ if (cells[index].crossroad) {score += cells[index].crossroad;} // crossroads
+ if (cells[index].confluence) {score += Math.pow(cells[index].confluence, 0.3);} // confluences
+ if (cells[index].port) {score *= 3;} // port-capital
+ var population = rn(score, 1);
+ manors.push({i, cell:index, x, y, region, culture, name, population});
+ recalculateStateData(state);
+ updateCountryEditors();
}
- if (brush === "addRiver") {
+
+ // add river on click
+ $("#addRiver").click(function() {
+ if ($(this).hasClass('pressed')) {
+ $(".pressed").removeClass('pressed');
+ unselect();
+ restoreDefaultEvents();
+ } else {
+ $(".pressed").removeClass('pressed');
+ unselect();
+ $(this).addClass('pressed');
+ closeDialogs(".stable");
+ viewbox.style("cursor", "crosshair").on("click", addRiverOnClick);
+ }
+ });
+
+ function addRiverOnClick() {
+ var point = d3.mouse(this);
var index = diagram.find(point[0], point[1]).index;
var cell = cells[index];
if (cell.river || cell.height < 0.2) {return;}
var dataRiver = []; // to store river points
- var river = +$("#rivers > path").last().attr("id").slice(5) + 1;
+ const last = $("#rivers > path").last();
+ const river = last.length ? +last.attr("id").slice(5) + 1 : 0;
cell.flux = 0.85;
while (cell) {
cell.river = river;
@@ -3106,24 +3534,41 @@ function fantasyMap() {
dataRiver.push({x: px, y: py, cell:index});
cell = undefined;
} else {
- if (!cells[min].river) {cells[min].flux += cell.flux; cell = cells[min];}
- if (cells[min].river) {
- var r = cells[min].river;
- var riverEl = $("#river"+r);
- var points = JSON.parse(riverEl.attr("data-points"));
- var riverCells = [];
- for (var p = 0; p < points.length; p++) {
- var c = diagram.find(points[p].scX, points[p].scY, 5);
- if (c === null) {continue;}
- if (c.index !== riverCells[riverCells.length-1]) {riverCells.push(c.index);}
- }
- if (dataRiver.length > riverCells.indexOf(min)) {
- cells[min].flux = cell.flux + cells[min].flux / 2;
+ if (cells[min].river === undefined) {cells[min].flux += cell.flux; cell = cells[min];}
+ else {
+ const r = cells[min].river;
+ const riverEl = $("#river"+r);
+ const riverCells = $.grep(land, function(e) {return e.river === r;});
+ riverCells.sort(function(a, b) {return b.height - a.height});
+ const riverCellsUpper = $.grep(riverCells, function(e) {return e.height > cells[min].height;});
+ if (dataRiver.length > riverCellsUpper.length) {
+ // new river is more perspective
+ const avPrec = rn(precipitation / Math.sqrt(cells.length), 2);
+ let dataRiverMin = [];
+ riverCells.map(function(c) {
+ if (c.height < cells[min].height) {
+ cells[c.index].river = undefined;
+ cells[c.index].flux = avPrec;
+ } else {
+ dataRiverMin.push({x:c.data[0], y:c.data[1], cell:c.index});
+ }
+ });
+ cells[min].flux += cell.flux;
+ if (cells[min].confluence) {cells[min].confluence += riverCellsUpper.length;}
+ else {cells[min].confluence = riverCellsUpper.length;}
cell = cells[min];
- riverEl.remove();
- cells.map(function(c) {if (c.river === r) {c.river = undefined;}})
+ // redraw old river's upper part or remove if small
+ if (dataRiverMin.length > 1) {
+ var riverAmended = amendRiver(dataRiverMin, 1);
+ var d = drawRiver(riverAmended, 1.3, 1);
+ riverEl.attr("d", d).attr("data-width", 1.3).attr("data-increment", 1);
+ } else {
+ riverEl.remove();
+ dataRiverMin.map(function(c) {cells[c.cell].river = undefined;});
+ }
} else {
- cells[min].confluence += dataRiver.length;
+ if (cells[min].confluence) {cells[min].confluence += dataRiver.length;}
+ else {cells[min].confluence = dataRiver.length;}
cells[min].flux += cell.flux;
dataRiver.push({x: tx, y: ty, cell:min});
cell = undefined;
@@ -3133,41 +3578,29 @@ function fantasyMap() {
}
var rndFactor = 0.2 + Math.random() * 1.6; // random factor in range 0.2-1.8
var riverAmended = amendRiver(dataRiver, rndFactor);
- lineGen.curve(d3.curveCatmullRom.alpha(0.1));
- var d = drawRiver(riverAmended, 2, 1);
+ var d = drawRiver(riverAmended, 1.3, 1);
rivers.append("path").attr("d", d).attr("id", "river"+river)
- .attr("data-points", round(JSON.stringify(riverAmended), 1))
- .attr("data-width", 2).attr("data-increment", 1).on("click", editRiver);
- return;
+ .attr("data-width", 1.3).attr("data-increment", 1).on("click", editRiver);
}
- if (customization === 1) {
- var cell = diagram.find(point[0], point[1]).index;
- var power = +brushPower.value;
- if (brush === "brushHill") {add(cell, "hill", power);}
- if (brush === "brushPit") {addPit(1, power, cell);}
- if (brush === "brushRange" || brush === "brushTrough") {
- if (icons.selectAll(".tag").size() === 0) {
- icons.append("circle").attr("r", 3).attr("class", "tag").attr("cx", point[0]).attr("cy", point[1]);
- } else {
- var x = +icons.select(".tag").attr("cx");
- var y = +icons.select(".tag").attr("cy");
- var from = diagram.find(x, y).index;
- icons.selectAll(".tag, .line").remove();
- addRange(brush === "brushRange" ? 1 : -1, power, from, cell);
- }
- }
- updateCellsInRadius(cell, cell);
- mockHeightmap();
+ }
+
+ // return cell / polly Index or error
+ function getIndex(point) {
+ const c = diagram.find(point[0], point[1]);
+ if (!c) {
+ console.error("Cannot find closest cell for points" + point[0] + ", " + point[1]);
+ return;
}
+ return index = c.index;
}
// re-calculate data for a particular state
function recalculateStateData(state) {
var s = states[state];
- if (s.color === "neutral") {state = "neutral";}
- var ruralFactor = state === "neutral" ? 0.5 : 1;
+ if (s.capital === "neutral") {state = "neutral";}
+ var ruralFactor = state === "neutral" ? 0.5 : 1;
var burgs = $.grep(manors, function(e) {return (e.region === state);});
- s.burgs = burgs.length;
+ s.burgs = burgs.length;
var burgsPop = 0; // get summ of all burgs population
burgs.map(function(b) {burgsPop += b.population;});
s.urbanPopulation = rn(burgsPop, 2);
@@ -3183,13 +3616,13 @@ function fantasyMap() {
var graphSizeAdj = 90 / Math.sqrt(cells.length, 2);
s.ruralPopulation = rn(cellsScore * graphSizeAdj * ruralFactor, 2);
}
-
+
function editLabel() {
- if (elSelected) {
- elSelected.call(d3.drag().on("drag", null)).classed("draggable", false);
- }
+ if (customization) {return;}
+ closeDialogs("#labelEditor, .stable");
elSelected = d3.select(this);
elSelected.call(d3.drag().on("drag", dragged).on("end", dragended)).classed("draggable", true);
+
var group = d3.select(this.parentNode);
updateGroupOptions();
editGroupSelect.value = group.attr("id");
@@ -3199,44 +3632,64 @@ function fantasyMap() {
editOpacity.value = group.attr("opacity");
editText.value = elSelected.text();
var matrix = elSelected.attr("transform");
- if (matrix) {
- var rotation = matrix.split('(')[1].split(')')[0].split(' ')[0];
- } else {
- var rotation = 0;
- }
+ var rotation = matrix ? matrix.split('(')[1].split(')')[0].split(' ')[0] : 0;
editAngle.value = rotation;
- editAngleValue.innerHTML = rotation + "°";
+ editAngleValue.innerHTML = rotation + "°";
+
$("#labelEditor").dialog({
title: "Edit Label: " + editText.value,
minHeight: 30, width: "auto", maxWidth: 275, resizable: false,
- position: {my: "center top", at: "bottom", of: this}
+ position: {my: "center top+10", at: "bottom", of: this},
+ close: unselect
});
- fetchAdditionalFonts();
+
+ if (modules.editLabel) {return;}
+ modules.editLabel = true;
+
+ $("#editFontButton").click(fetchAdditionalFonts);
}
- // fetch default fonts if not done before
+ function changeSelectedStateOnClick() {
+ var point = d3.mouse(this);
+ var index = diagram.find(point[0], point[1]).index;
+ var assigned = regions.select("#temp").select("path[data-cell='"+index+"']");
+ if (assigned.size()) {var s = assigned.attr("data-state");} else {var s = cells[index].region;}
+ if (s === "neutral") {s = states.length - 1;}
+ let color = states[s].color;
+ if (color === "neutral") {color = "white"}
+ $(".selected").removeClass("selected");
+ $("#state"+s).addClass("selected");
+ icons.selectAll(".circle").attr("stroke", states[s].color);
+ }
+
+ // fetch default fonts if not done before
function fetchAdditionalFonts() {
- if (fonts.indexOf("Bitter") === -1) {
+ if (fonts.length < 10) {
$("head").append('');
- fonts = fonts.concat(["IM+Fell+English", "Great+Vibes", "Bitter", "Yellowtail", "Montez", "Lobster", "Josefin+Sans", "Shadows+Into+Light", "Orbitron", "Dancing+Script:700", "Bangers", "Chewy", "Architects+Daughter", "Kaushan+Script", "Gloria+Hallelujah", "Satisfy", "Comfortaa:700", "Cinzel"]);
+ const artistic = ["Almendra+SC", "Amatic+SC:700", "IM+Fell+English", "Great+Vibes", "MedievalSharp", "Metamorphous",
+ "Nova+Script", "Uncial+Antiqua", "Underdog", "Caesar+Dressing", "Bitter", "Yellowtail", "Montez",
+ "Shadows+Into+Light", "Fredericka+the+Great", "Orbitron", "Dancing+Script:700",
+ "Architects+Daughter", "Kaushan+Script", "Gloria+Hallelujah", "Satisfy", "Comfortaa:700", "Cinzel"];
+ const webSafe = ["Georgia", "Times+New+Roman", "Comic+Sans+MS", "Lucida+Sans+Unicode", "Courier+New"];
+ fonts = artistic.concat(webSafe);
updateFontOptions();
}
}
$("#labelEditor .editButton, #labelEditor .editButtonS").click(function() {
var group = d3.select(elSelected.node().parentNode);
- if (this.id == "editRemoveSingle") {
+ if (this.id == "editRemoveSingle") {
alertMessage.innerHTML = "Are you sure you want to remove the label?";
- $(function() {$("#alert").dialog({resizable: false, title: "Remove label",
+ $("#alert").dialog({resizable: false, title: "Remove label",
buttons: {
- "Remove": function() {
+ Remove: function() {
$(this).dialog("close");
elSelected.remove();
$("#labelEditor").dialog("close");
},
Cancel: function() {$(this).dialog("close");}
- }})
- });
+ }
+ })
return;
}
if (this.id == "editGroupRemove") {
@@ -3248,16 +3701,16 @@ function fantasyMap() {
}
var message = "Are you sure you want to remove all labels (" + count + ") of that group?";
alertMessage.innerHTML = message;
- $(function() {$("#alert").dialog({resizable: false, title: "Remove labels",
+ $("#alert").dialog({resizable: false, title: "Remove labels",
buttons: {
- "Remove": function() {
+ Remove: function() {
$(this).dialog("close");
group.remove();
$("#labelEditor").dialog("close");
},
Cancel: function() {$(this).dialog("close");}
- }})
- });
+ }
+ })
return;
}
if (this.id == "editCopy") {
@@ -3353,15 +3806,18 @@ function fantasyMap() {
// on editFontInput change. Use a direct link to any @font-face declaration or just font name to fetch from Google Fonts
$("#editFontInput").change(function() {
if (editFontInput.value !== "") {
- var url = (editFontInput.value).replace(/ /g, "+");
- if (url.indexOf("http") === -1) {url = "https://fonts.googleapis.com/css?family=" + url;}
- addFonts(url);
+ var url = editFontInput.value;
+ if (url.indexOf("http") === -1) {
+ url = url.replace(url.charAt(0), url.charAt(0).toUpperCase()).split(" ").join("+");
+ url = "https://fonts.googleapis.com/css?family=" + url;
+ }
+ addFonts(url, "autoselect");
editFontInput.value = "";
editExternalFont.click();
}
});
- function addFonts(url) {
+ function addFonts(url, autoselect) {
$('head').append('');
return fetch(url)
.then(resp => resp.text())
@@ -3381,26 +3837,36 @@ function fantasyMap() {
for (var r of styleSheet.cssRules) {FontRule(r);}
document.head.removeChild(s);
updateFontOptions();
+ // apply the last of added fonts
+ if (autoselect) {
+ const num = $("#editFontSelect option").length - 1;
+ $("#editFontSelect").prop("selectedIndex", num);
+ const group = d3.select(elSelected.node().parentNode);
+ const font = fonts[editFontSelect.value].split(':')[0].replace(/\+/g, " ");
+ group.attr("font-family", font).attr("data-font", fonts[editFontSelect.value]);
+ }
})
}
// on any Editor input change
$("#labelEditor .editTrigger").change(function() {
- $(this).attr("title", $(this).val());
- elSelected.text(editText.value); // change Label text
+ if (!elSelected) {return;}
+ $(this).attr("title", $(this).val());
+ elSelected.text(editText.value); // change Label text
// check if Group was changed
var group = d3.select(elSelected.node().parentNode);
var groupOld = group.attr("id");
var groupNew = editGroupSelect.value;
- // check if label is country name
- if (elSelected.attr("id").includes("regionLabel")) {
+ var id = elSelected.attr("id") || "";
+ // check if label is a country name
+ if (id.includes("regionLabel")) {
var state = +elSelected.attr("id").slice(11);
- states[state].name = name;
+ states[state].name = editText.value;
}
- // check if label is manor name
- if (elSelected.attr("id").includes("manorLabel")) {
+ // check if label is a manor name
+ if (id.includes("manorLabel")) {
var manor = +elSelected.attr("id").slice(10);
- manors[manor].name = name;
+ manors[manor].name = editText.value;
}
if (editGroupInput.value !== "") {
groupNew = editGroupInput.value.toLowerCase().replace(/ /g, "_").replace(/[^\w\s]/gi, "");
@@ -3412,8 +3878,8 @@ function fantasyMap() {
group = labels.select("#"+groupNew);
editFontSelect.value = fonts.indexOf(group.attr("data-font"));
editSize.value = group.attr("data-size");
- editColor.value = toHEX(group.attr("fill"));
- editOpacity.value = group.attr("opacity");
+ editColor.value = toHEX(group.attr("fill"));
+ editOpacity.value = group.attr("opacity");
} else {
if (group.selectAll("text").size() === 0) {group.remove();}
group = labels.append("g").attr("id", groupNew);
@@ -3481,7 +3947,7 @@ function fantasyMap() {
}
// corvent number to short string with SI postfix
- function si(n, d) {
+ function si(n) {
if (n >= 1e9) {return rn(n / 1e9, 1) + "B";}
if (n >= 1e8) {return rn(n / 1e6) + "M";}
if (n >= 1e6) {return rn(n / 1e6, 1) + "M";}
@@ -3498,11 +3964,11 @@ function fantasyMap() {
if (metric === "B") {return parseInt(value.slice(0, -1) * 1e9);}
return parseInt(value);
}
-
+
// downalod map as SVG or PNG file
function saveAsImage(type) {
console.time("saveAsImage");
- // get all used fonts
+ // get all used fonts
var fontsInUse = []; // to store fonts currently in use
labels.selectAll("g").each(function(d) {
var font = d3.select(this).attr("data-font");
@@ -3520,15 +3986,25 @@ function fantasyMap() {
// for each g element get inline style
var emptyG = clone.append("g").node();
var defaultStyles = window.getComputedStyle(emptyG);
+ clone.select("#labels").selectAll(".hidden").each(function(e) {
+ // show hidden labels but in reduced size
+ var size = d3.select(this).attr("font-size");
+ d3.select(this).classed("hidden", false).attr("font-size", rn(size * 0.4, 2));
+ });
clone.selectAll("g, #ruler > g > *, #scaleBar > text").each(function(d) {
var compStyle = window.getComputedStyle(this);
var style = "";
for (var i=0; i < compStyle.length; i++) {
var key = compStyle[i];
var value = compStyle.getPropertyValue(key);
- if (key !== "cursor" && value != defaultStyles.getPropertyValue(key)) {
- style += key + ':' + value + ';';
+ // Firefox mask hack
+ if (key === "mask-image" && value !== defaultStyles.getPropertyValue(key)) {
+ style += "mask-image: url('#shape');";
+ continue;
}
+ if (key === "cursor") {continue;} // cursor should be default
+ if (value === defaultStyles.getPropertyValue(key)) {continue;}
+ style += key + ':' + value + ';';
}
if (style != "") {this.setAttribute('style', style);}
});
@@ -3538,30 +4014,36 @@ function fantasyMap() {
GFontToDataURI(fontsToLoad).then(cssRules => {
clone.select("defs").append("style").text(cssRules.join('\n'));
var svg_xml = (new XMLSerializer()).serializeToString(clone.node());
- clone.remove();
+ clone.remove();
var blob = new Blob([svg_xml], {type:'image/svg+xml;charset=utf-8'});
var url = window.URL.createObjectURL(blob);
var link = document.createElement("a");
+ link.target = "_blank";
if (type === "png") {
- canvas.width = mapWidth * 2;
- canvas.height = mapHeight * 2;
+ var ratio = svgHeight / svgWidth;
+ canvas.width = 3840; // ultraHD
+ canvas.height = rn(3840 * ratio);
var img = new Image();
img.src = url;
img.onload = function(){
+ window.URL.revokeObjectURL(url);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
link.download = "fantasy_map_" + Date.now() + ".png";
- link.href = canvas.toDataURL('image/png');
- canvas.width = mapWidth;
- canvas.height = mapHeight;
- canvas.style.opacity = 0;
- document.body.appendChild(link);
- link.click();
+ canvas.toBlob(function(blob) {
+ link.href = window.URL.createObjectURL(blob);
+ document.body.appendChild(link);
+ link.click();
+ window.setTimeout(function() {window.URL.revokeObjectURL(link.href);}, 5000);
+ });
+ canvas.style.opacity = 0;
+ canvas.width = svgWidth;
+ canvas.height = svgHeight;
}
} else {
link.download = "fantasy_map_" + Date.now() + ".svg";
link.href = url;
document.body.appendChild(link);
- link.click();
+ link.click();
}
console.timeEnd("saveAsImage");
window.setTimeout(function() {window.URL.revokeObjectURL(url);}, 5000);
@@ -3616,158 +4098,231 @@ function fantasyMap() {
});
}
- // print displayed map segment
- function printMap() {
- var popUpAndPrint = function() {window.print(); window.close();};
- setTimeout(popUpAndPrint, 500);
- }
-
// Save in .map format, based on FileSystem API
function saveMap() {
console.time("saveMap");
- // data convention: 0 - version; 1 - all points; 2 - cells; 3 - manors; 4 - states; 5 - svg;
+ // data convention: 0 - version; 1 - all points; 2 - cells; 3 - manors; 4 - states; 5 - svg; 6 - options;
// size stats: points = 6%, cells = 36%, manors and states = 2%, svg = 56%;
+ svg.attr("width", graphWidth).attr("height", graphHeight);
+ const transform = viewbox.attr("transform");
+ viewbox.attr("transform", "");
+ const oceanBack = ocean.select("rect");
+ const oceanShift = [oceanBack.attr("x"), oceanBack.attr("y"), oceanBack.attr("width"), oceanBack.attr("height")];
+ oceanBack.attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%");
+
var svg_xml = (new XMLSerializer()).serializeToString(svg.node());
var line = "\r\n";
- var data = version + line + JSON.stringify(points) + line + JSON.stringify(cells) + line + JSON.stringify(manors) + line + JSON.stringify(states) + line + svg_xml;
+ var data = version + line + JSON.stringify(points) + line + JSON.stringify(cells) + line;
+ data += JSON.stringify(manors) + line + JSON.stringify(states) + line + svg_xml + line + customization;
var dataBlob = new Blob([data], {type:"text/plain"});
var dataURL = window.URL.createObjectURL(dataBlob);
var link = document.createElement("a");
link.download = "fantasy_map_" + Date.now() + ".map";
link.href = dataURL;
document.body.appendChild(link);
+ allowResize = false;
link.click();
+
+ // restore initial values
+ svg.attr("width", svgWidth).attr("height", svgHeight);
+ viewbox.attr("transform", transform);
+ oceanBack.attr("x", oceanShift[0]).attr("y", oceanShift[1]).attr("width", oceanShift[2]).attr("height", oceanShift[3]);
+
console.timeEnd("saveMap");
- window.setTimeout(function() {window.URL.revokeObjectURL(dataURL);}, 5000);
+ window.setTimeout(function() {window.URL.revokeObjectURL(dataURL);}, 4000);
}
// Map Loader based on FileSystem API
- $("#fileToLoad").change(function() {
+ $("#mapToLoad").change(function() {
console.time("loadMap");
+ closeDialogs();
var fileToLoad = this.files[0];
this.value = "";
+ uploadFile(fileToLoad);
+ });
+
+ function uploadFile(file, callback) {
+ console.time("loadMap");
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var dataLoaded = fileLoadedEvent.target.result;
var data = dataLoaded.split("\r\n");
-
- // data convention: 0 - version; 1 - all points; 2 - cells; 3 - manors; 4 - states; 5 - svg;
+ // data convention: 0 - version; 1 - all points; 2 - cells; 3 - manors; 4 - states; 5 - svg; 6 - options;
var mapVersion = data[0];
if (mapVersion !== version) {
var message = `The Map version `;
// mapVersion reference was not added to downloaded map before v. 0.52b, so I cannot support really old files
if (mapVersion.length <= 10) {
- message += ` (${mapVersion}) `;
- message += `does not match the Generator version (${version}). The map will be auto-updated. In case of critical issues you may send the .map file `;
- message += `to me`;
- message += ` or just keep using `
- message += `an appropriate version`;
- message += ` of the Generator`;
+ message += `(${mapVersion})
+ does not match the Generator version (${version}). The map will be auto-updated.
+ In case of critical issues you may send the .map file
+ to me
+ or just keep using
+ an appropriate version
+ of the Generator`;
} else {
- message += ` you are trying to load is too old and cannot be updated. `;
- message += `Please re-create the map or just keep using `;
- message += `an archived version`;
- message += ` of the Generator. Please note the Gennerator is still on demo and a lot of crusial changes are made every month`;
+ message += `you are trying to load is too old and cannot be updated.
+ Please re-create the map or just keep using
+ an archived version
+ of the Generator. Please note the Gennerator is still on demo and a lot of crusial changes are made every month`;
}
alertMessage.innerHTML = message;
- $("#alert").dialog({title: "Load map", buttons: {OK: function() {$(this).dialog("close");}}});
- }
+ $("#alert").dialog({title: "Map version conflict", buttons: {OK: function() {
+ $(this).dialog("close");
+ loadDataFromMap(data);
+ }}});
+ } else {loadDataFromMap(data);}
if (mapVersion.length > 10) {console.error("Cannot load map"); return;}
- newPoints = [], points = [], cells = [], land = [], riversData = [], island = 0, manors = [], states = [], queue = [];
- svg.remove();
- points = JSON.parse(data[1]);
- cells = JSON.parse(data[2]);
- land = $.grep(cells, function(e) {return (e.height >= 0.2);});
- cells.map(function(e) {newPoints.push(e.data);});
- calculateVoronoi(newPoints);
- manors = JSON.parse(data[3]);
- if (mapVersion === "0.52b" || mapVersion === "0.53b") {
- states = [];
- document.body.insertAdjacentHTML("afterbegin", data[4]);
- } else {
- states = JSON.parse(data[4]);
- document.body.insertAdjacentHTML("afterbegin", data[5]);
- }
-
- // redefine variables
- customization = 0, elSelected = "";
- svg = d3.select("svg").call(zoom);
- mapWidth = +svg.attr("width");
- mapHeight = +svg.attr("height");
- defs = svg.select("#deftemp");
- viewbox = svg.select("#viewbox").on("touchmove mousemove", moved).on("click", clicked);
- ocean = viewbox.select("#ocean");
- oceanLayers = ocean.select("#oceanLayers");
- oceanPattern = ocean.select("#oceanPattern");
- landmass = viewbox.select("#landmass");
- grid = viewbox.select("#grid");
- overlay = viewbox.select("id", "overlay");
- terrs = viewbox.select("#terrs");
- cults = viewbox.select("#cults");
- routes = viewbox.select("#routes");
- roads = routes.select("#roads");
- trails = routes.select("#trails");
- rivers = viewbox.select("#rivers");
- terrain = viewbox.select("#terrain");
- regions = viewbox.select("#regions");
- borders = viewbox.select("#borders");
- stateBorders = borders.select("#stateBorders");
- neutralBorders = borders.select("#neutralBorders");
- coastline = viewbox.select("#coastline");
- lakes = viewbox.select("#lakes");
- searoutes = routes.select("#searoutes");
- labels = viewbox.select("#labels");
- icons = viewbox.select("#icons");
- burgs = icons.select("#burgs");
- debug = viewbox.select("#debug");
- capitals = labels.select("#capitals");
- towns = labels.select("#towns");
- countries = labels.select("#countries");
- ruler = viewbox.select("#ruler");
-
- // restore events
- overlay.selectAll("*").call(d3.drag().on("start", elementDrag));
- labels.selectAll("text").on("click", editLabel);
- burgs.selectAll("circle").call(d3.drag().on("start", elementDrag));
- rivers.selectAll("path").on("click", editRiver);
- svg.select("#scaleBar").call(d3.drag().on("start", elementDrag)).on("click", editScale);
- ruler.selectAll("g").call(d3.drag().on("start", elementDrag));
- ruler.selectAll("g").selectAll("text").on("click", removeParent);
- ruler.selectAll(".opisometer").selectAll("circle").call(d3.drag().on("start", opisometerEdgeDrag));
- ruler.selectAll(".linear").selectAll("circle:not(.center)").call(d3.drag().on("drag", rulerEdgeDrag));
- ruler.selectAll(".linear").selectAll("circle.center").call(d3.drag().on("drag", rulerCenterDrag));
-
- // get countries count
+ }
+ fileReader.readAsText(file, "UTF-8");
+ if (callback) {callback();}
+ }
+
+ function loadDataFromMap(data) {
+ // replace old svg
+ svg.remove();
+ if (data[0] === "0.52b" || data[0] === "0.53b") {
+ states = []; // no states data
+ document.body.insertAdjacentHTML("afterbegin", data[4]);
+ customization = 0;
+ } else {
+ states = JSON.parse(data[4]);
+ document.body.insertAdjacentHTML("afterbegin", data[5]);
+ customization = +data[6] || 0;
+ }
+
+ svg = d3.select("svg");
+ // check map size
+ const nWidth = +svg.attr("width"), nHeight = +svg.attr("height");
+ // temporary fit svg element to current canvas size
+ svg.attr("width", svgWidth).attr("height", svgHeight);
+ if (nWidth !== svgWidth || nHeight !== svgHeight) {
+ alertMessage.innerHTML = `The loaded map has size ${nWidth} x ${nHeight} pixels,
+ while the current canvas size is ${svgWidth} x ${svgHeight} pixels.
+ You may either fit the loaded map to the current window
+ or resize the canvas to ${nWidth} x ${nHeight} pixels`;
+ $("#alert").dialog({title: "Map size conflict",
+ buttons: {
+ "Fit": function() {
+ voronoi = d3.voronoi().extent([[0, 0], [nWidth, nHeight]]);
+ graphWidth = nWidth;
+ graphHeight = nHeight;
+ applyLoadedData(data);
+ // rescale loaded map
+ const xRatio = svgWidth / nWidth;
+ const yRatio = svgHeight / nHeight;
+ const scaleTo = rn(Math.min(xRatio, yRatio), 2);
+ // calculate frames to scretch ocean background
+ const extent = (100 / scaleTo) + "%";
+ const xShift = (nWidth * scaleTo - svgWidth) / 2 / scaleTo;
+ const yShift = (nHeight * scaleTo - svgHeight) / 2 / scaleTo;
+ ocean.selectAll("rect").attr("x", xShift).attr("y", yShift).attr("width", extent).attr("height", extent);
+ initView = [scaleTo, 0, 0];
+ zoom.translateExtent([[0, 0], [nWidth, nHeight]]).scaleExtent([scaleTo, 20]).scaleTo(svg, scaleTo);
+ $(this).dialog("close");
+ },
+ "Resize": function() {
+ mapWidthInput.value = graphWidth = nWidth;
+ mapHeightInput.value = graphHeight = nHeight;
+ changeMapSize();
+ applyLoadedData(data);
+ $(this).dialog("close");
+ }
+ }
+ });
+ } else {
+ applyLoadedData(data);
+ }
+ }
+
+ function applyLoadedData(data) {
+ // redefine variables
+ defs = svg.select("#deftemp");
+ viewbox = svg.select("#viewbox");
+ ocean = viewbox.select("#ocean");
+ oceanLayers = ocean.select("#oceanLayers");
+ oceanPattern = ocean.select("#oceanPattern");
+ landmass = viewbox.select("#landmass");
+ grid = viewbox.select("#grid");
+ overlay = viewbox.select("#overlay");
+ terrs = viewbox.select("#terrs");
+ cults = viewbox.select("#cults");
+ routes = viewbox.select("#routes");
+ roads = routes.select("#roads");
+ trails = routes.select("#trails");
+ rivers = viewbox.select("#rivers");
+ terrain = viewbox.select("#terrain");
+ regions = viewbox.select("#regions");
+ borders = viewbox.select("#borders");
+ stateBorders = borders.select("#stateBorders");
+ neutralBorders = borders.select("#neutralBorders");
+ coastline = viewbox.select("#coastline");
+ lakes = viewbox.select("#lakes");
+ searoutes = routes.select("#searoutes");
+ labels = viewbox.select("#labels");
+ icons = viewbox.select("#icons");
+ burgs = icons.select("#burgs");
+ debug = viewbox.select("#debug");
+ capitals = labels.select("#capitals");
+ towns = labels.select("#towns");
+ countries = labels.select("#countries");
+ ruler = viewbox.select("#ruler");
+
+ // restore events
+ svg.call(zoom);
+ restoreDefaultEvents();
+ viewbox.on("touchmove mousemove", moved);
+ overlay.selectAll("*").call(d3.drag().on("start", elementDrag));
+ labels.selectAll("text").on("click", editLabel);
+ burgs.selectAll("circle").call(d3.drag().on("start", elementDrag));
+ rivers.selectAll("path").on("click", editRiver);
+ routes.selectAll("path").on("click", editRoute);
+ svg.select("#scaleBar").call(d3.drag().on("start", elementDrag)).on("click", editScale);
+ ruler.selectAll("g").call(d3.drag().on("start", elementDrag));
+ ruler.selectAll("g").selectAll("text").on("click", removeParent);
+ ruler.selectAll(".opisometer").selectAll("circle").call(d3.drag().on("start", opisometerEdgeDrag));
+ ruler.selectAll(".linear").selectAll("circle:not(.center)").call(d3.drag().on("drag", rulerEdgeDrag));
+ ruler.selectAll(".linear").selectAll("circle.center").call(d3.drag().on("drag", rulerCenterDrag));
+
+ // update data
+ newPoints = [], riversData = [], queue = [], elSelected = "";
+ points = JSON.parse(data[1]);
+ cells = JSON.parse(data[2]);
+ land = $.grep(cells, function(e) {return (e.height >= 0.2);});
+ manors = JSON.parse(data[3]);
+ cells.map(function(e) {newPoints.push(e.data);});
+ calculateVoronoi(newPoints);
+ if (!customization) {
capitalsCount = +$("#regions > path:last").attr("class").slice(6) + 1;
regionsOutput.innerHTML = regionsInput.value = capitalsCount;
+ }
- // restore layers state
- if (cults.selectAll("path").size() == 0) {$("#toggleCultures").addClass("buttonoff");} else {$("#toggleCultures").removeClass("buttonoff");}
- if (terrs.selectAll("path").size() == 0) {$("#toggleHeight").addClass("buttonoff");} else {$("#toggleHeight").removeClass("buttonoff");}
- if (regions.attr("display") === "none") {$("#toggleCountries").addClass("buttonoff");} else {$("#toggleCountries").removeClass("buttonoff");}
- if (rivers.attr("display") === "none") {$("#toggleRivers").addClass("buttonoff");} else {$("#toggleRivers").removeClass("buttonoff");}
- if (oceanPattern.attr("display") === "none") {$("#toggleOcean").addClass("buttonoff");} else {$("#toggleOcean").removeClass("buttonoff");}
- if (landmass.attr("display") === "none") {$("#landmass").addClass("buttonoff");} else {$("#landmass").removeClass("buttonoff");}
- if (terrain.attr("display") === "none") {$("#toggleRelief").addClass("buttonoff");} else {$("#toggleRelief").removeClass("buttonoff");}
- if (borders.attr("display") === "none") {$("#toggleBorders").addClass("buttonoff");} else {$("#toggleBorders").removeClass("buttonoff");}
- if (burgs.attr("display") === "none") {$("#toggleIcons").addClass("buttonoff");} else {$("#toggleIcons").removeClass("buttonoff");}
- if (labels.attr("display") === "none") {$("#toggleLabels").addClass("buttonoff");} else {$("#toggleLabels").removeClass("buttonoff");}
- if (routes.attr("display") === "none") {$("#toggleRoutes").addClass("buttonoff");} else {$("#toggleRoutes").removeClass("buttonoff");}
- if (grid.attr("display") === "none") {$("#toggleGrid").addClass("buttonoff");} else {$("#toggleGrid").removeClass("buttonoff");}
-
- // update map to support some old versions and fetch fonts
- labels.selectAll("g").each(function(d) {
- var el = d3.select(this);
- var font = el.attr("data-font");
- if (fonts.indexOf(font) === -1) {addFonts("https://fonts.googleapis.com/css?family=" + font);}
- el.attr("data-size", +el.attr("font-size"));
- if (el.style("display") === "none") {el.node().style.display = null;}
- });
- invokeActiveZooming();
- console.timeEnd("loadMap");
- };
- fileReader.readAsText(fileToLoad, "UTF-8");
- });
+ // restore layers state
+ if (cults.selectAll("path").size() == 0) {$("#toggleCultures").addClass("buttonoff");} else {$("#toggleCultures").removeClass("buttonoff");}
+ if (terrs.selectAll("path").size() == 0) {$("#toggleHeight").addClass("buttonoff");} else {$("#toggleHeight").removeClass("buttonoff");}
+ if (regions.attr("display") === "none") {$("#toggleCountries").addClass("buttonoff");} else {$("#toggleCountries").removeClass("buttonoff");}
+ if (rivers.attr("display") === "none") {$("#toggleRivers").addClass("buttonoff");} else {$("#toggleRivers").removeClass("buttonoff");}
+ if (oceanPattern.attr("display") === "none") {$("#toggleOcean").addClass("buttonoff");} else {$("#toggleOcean").removeClass("buttonoff");}
+ if (landmass.attr("display") === "none") {$("#landmass").addClass("buttonoff");} else {$("#landmass").removeClass("buttonoff");}
+ if (terrain.attr("display") === "none") {$("#toggleRelief").addClass("buttonoff");} else {$("#toggleRelief").removeClass("buttonoff");}
+ if (borders.attr("display") === "none") {$("#toggleBorders").addClass("buttonoff");} else {$("#toggleBorders").removeClass("buttonoff");}
+ if (burgs.attr("display") === "none") {$("#toggleIcons").addClass("buttonoff");} else {$("#toggleIcons").removeClass("buttonoff");}
+ if (labels.attr("display") === "none") {$("#toggleLabels").addClass("buttonoff");} else {$("#toggleLabels").removeClass("buttonoff");}
+ if (routes.attr("display") === "none") {$("#toggleRoutes").addClass("buttonoff");} else {$("#toggleRoutes").removeClass("buttonoff");}
+ if (grid.attr("display") === "none") {$("#toggleGrid").addClass("buttonoff");} else {$("#toggleGrid").removeClass("buttonoff");}
+
+ // update map to support some old versions and fetch fonts
+ labels.selectAll("g").each(function(d) {
+ var el = d3.select(this);
+ var font = el.attr("data-font");
+ if (fonts.indexOf(font) === -1) {addFonts("https://fonts.googleapis.com/css?family=" + font);}
+ if (!el.attr("data-size")) {el.attr("data-size", +el.attr("font-size"));}
+ if (el.style("display") === "none") {el.node().style.display = null;}
+ });
+
+ invokeActiveZooming();
+ console.timeEnd("loadMap");
+ }
// Poisson-disc sampling for a points
// Source: bl.ocks.org/mbostock/99049112373e12709381; Based on https://www.jasondavies.com/poisson-disc
@@ -3833,17 +4388,14 @@ function fantasyMap() {
// Hotkeys
d3.select("body").on("keydown", function() {
- if ($(".ui-dialog").is(":visible")) {return;}
+ $("input").on("keydown", function(e) {e.stopPropagation();}); // cancel on input
switch(d3.event.keyCode) {
- case 16: // Shift - hold to continue adding elements on click
- shift = true;
- break;
- case 78: // "N" for new map
+ case 113: // "F2" for new map
$("#randomMap").click();
break;
case 32: // Space to log focused cell data
var point = d3.mouse(this);
- var index = diagram.find(point[0], point[1]).index;
+ const index = diagram.find(point[0], point[1]).index;
console.table(cells[index]);
break;
case 67: // "C" to log cells data
@@ -3854,67 +4406,31 @@ function fantasyMap() {
break;
case 83: // "S" to log states data
console.table(states);
- break;
- case 27: // Escape (do nothing)
break;
case 37: // Left to scroll map left
- if (viewX + 10 <= 0) {
- viewX += 10;
- zoomUpdate();
- }
+ zoom.translateBy(svg, 10, 0);
break;
case 39: // Right to scroll map right
- if (viewX - 10 >= (mapWidth * (scale-1) * -1)) {
- viewX -= 10;
- zoomUpdate();
- }
+ zoom.translateBy(svg, -10, 0);
break;
case 38: // Up to scroll map up
- if (viewY + 10 <= 0) {
- viewY += 10;
- zoomUpdate();
- }
+ zoom.translateBy(svg, 0, 10);
break;
case 40: // Down to scroll map down
- if (viewY - 10 >= (mapHeight * (scale-1) * -1)) {
- viewY -= 10;
- zoomUpdate();
- }
+ zoom.translateBy(svg, 0, -10);
break;
case 107: // Plus to zoom map up
- if (scale < 40) {
- var dx = mapWidth / 2 * (scale-1) + viewX;
- var dy = mapHeight / 2 * (scale-1) + viewY;
- viewX = dx - mapWidth / 2 * scale;
- viewY = dy - mapHeight / 2 * scale;
- scale += 1;
- if (scale > 40) {scale = 40;}
- zoomUpdate();
- invokeActiveZooming();
- }
+ zoom.scaleBy(svg, 1.2);
+ invokeActiveZooming();
break;
case 109: // Minus to zoom map out
- if (scale > 1) {
- var dx = mapWidth / 2 * (scale-1) + viewX;
- var dy = mapHeight / 2 * (scale-1) + viewY;
- viewX += mapWidth / 2 - dx;
- viewY += mapHeight / 2 - dy;
- scale -= 1;
- if (scale < 1) {
- scale = 1;
- viewX = 0;
- viewY = 0;
- }
- zoomUpdate();
- invokeActiveZooming();
- }
+ zoom.scaleBy(svg, 0.8);
+ invokeActiveZooming();
break;
case 9: // Tab to toggle full-screen mode
- $("#mapScreenSize").click();
+ $("#updateFullscreen").click();
break;
}
- }).on("keyup", function() {
- if (d3.event.keyCode == 16) {shift = false;}
});
// Toggle Options pane
@@ -3936,22 +4452,22 @@ function fantasyMap() {
});
// move layers on mapLayers dragging (jquery sortable)
- function moveLayer(event, ui) {
+ function moveLayer(event, ui) {
var el = getLayer(ui.item.attr("id"));
if (el) {
var prev = getLayer(ui.item.prev().attr("id"));
var next = getLayer(ui.item.next().attr("id"));
if (prev) {el.insertAfter(prev);} else if (next) {el.insertBefore(next);}
}
- }
+ }
// define connection between option layer buttons and actual svg groups
function getLayer(id) {
- if (id === "toggleGrid") {return $("#grid");}
+ if (id === "toggleGrid") {return $("#grid");}
if (id === "toggleOverlay") {return $("#overlay");}
if (id === "toggleHeight") {return $("#terrs");}
if (id === "toggleCultures") {return $("#cults");}
- if (id === "toggleRoutes") {return $("#routes");}
+ if (id === "toggleRoutes") {return $("#routes");}
if (id === "toggleRivers") {return $("#rivers");}
if (id === "toggleCountries") {return $("#regions");}
if (id === "toggleBorders") {return $("#borders");}
@@ -3959,7 +4475,7 @@ function fantasyMap() {
if (id === "toggleLabels") {return $("#labels");}
if (id === "toggleIcons") {return $("#icons");}
}
-
+
// UI Button handlers
$("button, a, li").on("click", function() {
var id = this.id;
@@ -3978,7 +4494,7 @@ function fantasyMap() {
}
if (id === "toggleCultures") {
var countries = !$("#toggleCountries").hasClass("buttonoff");
- var cultures = !$("#toggleCultures").hasClass("buttonoff");
+ var cultures = !$("#toggleCultures").hasClass("buttonoff");
if (!cultures && countries) {
$("#toggleCountries").toggleClass("buttonoff");
$('#regions').fadeToggle();
@@ -3997,14 +4513,24 @@ function fantasyMap() {
return;
}
if (id === "editCountries") {editCountries();}
- if (id === "editScale") {editScale();}
+ if (id === "editScale" || id === "editScaleCountries" || id === "editScaleBurgs") {editScale();}
if (id === "countriesManually") {
customization = 2;
mockRegions();
- regions.append("g").attr("id", "temp");
+ let temp = regions.append("g").attr("id", "temp");
$("#countriesBottom").children().hide();
$("#countriesManuallyButtons").show();
- viewbox.style("cursor", "crosshair").call(drag);
+ // highlight capital cells as it's not allowed to change capital's state that way
+ states.map(function(s) {
+ if (s.color === "neutral") {return;}
+ const capital = s.capital;
+ const index = manors[capital].cell;
+ temp.append("path")
+ .attr("data-cell", index).attr("data-state", s.i)
+ .attr("d", "M" + polygons[index].join("L") + "Z")
+ .attr("fill", s.color).attr("stroke", "red").attr("stroke-width", .7);
+ });
+ viewbox.style("cursor", "crosshair").call(drag).on("click", changeSelectedStateOnClick);
}
if (id === "countriesRegenerate") {
customization = 3;
@@ -4016,54 +4542,60 @@ function fantasyMap() {
$("div[data-sortby='expansion'], div[data-sortby='cells']").toggleClass("hidden");
}
if (id === "countriesManuallyComplete") {
+ icons.selectAll(".circle").remove();
var changedCells = regions.select("#temp").selectAll("path");
var changedStates = [];
changedCells.each(function() {
var el = d3.select(this);
var cell = +el.attr("data-cell");
var stateOld = cells[cell].region;
- var stateNew = el.attr("data-state");
- if (stateNew !== "neutral") {stateNew = +stateNew;}
- cells[cell].region = stateNew;
- if (cells[cell].manor !== undefined) {manors[cells[cell].manor].region = stateNew;}
+ if (stateOld === "neutral") {stateOld = states.length - 1;}
+ var stateNew = +el.attr("data-state");
+ const region = states[stateNew].color === "neutral" ? "neutral" : stateNew;
+ cells[cell].region = region;
+ if (cells[cell].manor !== undefined) {manors[cells[cell].manor].region = region;}
changedStates.push(stateNew, stateOld);
});
changedStates = [...new Set(changedStates)];
- changedStates.map(function(s) {
- if (s === "neutral") {s = states.length - 1;}
- recalculateStateData(s);
- });
+ changedStates.map(function(s) {recalculateStateData(s);});
+ var last = states.length - 1;
+ if (states[last].capital === "neutral" && states[last].cells === 0) {
+ $("#state" + last).remove();
+ states.splice(-1);
+ }
$("#countriesManuallyCancel").click();
if (changedStates.length) {editCountries();}
}
if (id === "countriesManuallyCancel") {
redrawRegions();
+ icons.selectAll(".circle").remove();
if (grid.style("display") === "inline") {toggleGrid.click();}
if (labels.style("display") === "none") {toggleLabels.click();}
$("#countriesBottom").children().show();
$("#countriesManuallyButtons, #countriesRegenerateButtons").hide();
$(".selected").removeClass("selected");
$("div[data-sortby='expansion'], .statePower, .icon-resize-full").addClass("hidden");
- $("div[data-sortby='cells'], .stateCells, .icon-check-empty").removeClass("hidden");
+ $("div[data-sortby='cells'], .stateCells, .icon-check-empty").removeClass("hidden");
customization = 0;
- viewbox.style("cursor", "default").on(".drag", null);
+ restoreDefaultEvents();
}
+ if (id === "countriesApply") {$("#countriesManuallyCancel").click();}
if (id === "countriesRandomize") {
var mod = +powerInput.value * 2;
$(".statePower").each(function(e, i) {
var state = +(this.parentNode.id).slice(5);
- if (states[state].color === "neutral") {return;}
+ if (states[state].capital === "neutral") {return;}
var power = rn(Math.random() * mod / 2 + 1, 1);
$(this).val(power);
$(this).parent().attr("data-expansion", power);
states[state].power = power;
});
- regenerateCountries();
+ regenerateCountries();
}
- if (id === "countriesAdd") {
+ if (id === "countriesAddM" || id === "countriesAddR" || id === "countriesAddG") {
var i = states.length;
// move neutrals to the last line
- if (states[i-1].color === "neutral") {states[i-1].i = i; i -= 1;}
+ if (states[i-1].capital === "neutral") {states[i-1].i = i; i -= 1;}
var name = generateStateName(0);
var color = colors20(i);
states.push({i, color, name, capital: "select", cells: 0, burgs: 0, urbanPopulation: 0, ruralPopulation: 0, area: 0, power: 1});
@@ -4126,11 +4658,13 @@ function fantasyMap() {
link.href = url;
link.click();
}
+ if (id === "burgNamesImport") {burgsListToLoad.click();}
if (id === "removeCountries") {
alertMessage.innerHTML = `Are you sure you want to remove all countries?`;
- $(function() {$("#alert").dialog({resizable: false, title: "Remove countries",
+ $("#alert").dialog({resizable: false, title: "Remove countries",
buttons: {
- "Remove": function() {
+ Cancel: function() {$(this).dialog("close");},
+ Remove: function() {
$(this).dialog("close");
$("#countriesBody").empty();
manors.map(function(m) {m.region = "neutral";});
@@ -4139,8 +4673,8 @@ function fantasyMap() {
var c = +s.capital;
if (isNaN(c)) {return;}
$("#manorLabel"+c).detach().appendTo($("#towns")).attr("dy", -0.7);
- $("#manorIcon"+c).attr("r", .5).attr("stroke-width", .12);
- });
+ $("#manorIcon"+c).attr("r", .5).attr("stroke-width", .12);
+ });
labels.select("#countries").selectAll("text").remove();
regions.selectAll("path").remove();
states = [];
@@ -4148,26 +4682,26 @@ function fantasyMap() {
recalculateStateData(0);
if ($("#burgsEditor").is(":visible")) {$("#burgsEditor").dialog("close");}
editCountries();
- },
- Cancel: function() {$(this).dialog("close");}
- }})
- });
- }
+ }
+ }
+ })
+ }
if (id === "removeBurgs") {
alertMessage.innerHTML = `Are you sure you want to remove all burgs associated with the country?`;
- $(function() {$("#alert").dialog({resizable: false, title: "Remove associated burgs",
+ $("#alert").dialog({resizable: false, title: "Remove associated burgs",
buttons: {
- "Remove": function() {
+ Cancel: function() {$(this).dialog("close");},
+ Remove: function() {
$(this).dialog("close");
var state = +$("#burgsEditor").attr("data-state");
- var region = states[state].color === "neutral" ? "neutral" : state;
+ var region = states[state].capital === "neutral" ? "neutral" : state;
$("#burgsBody").empty();
manors.map(function(m) {
if (m.region !== region) {return;}
m.region = "removed";
cells[m.cell].manor = undefined;
labels.select("#manorLabel"+m.i).remove();
- icons.select("#manorIcon"+m.i).remove();
+ icons.select("#manorIcon"+m.i).remove();
});
states[state].urbanPopulation = 0;
states[state].burgs = 0;
@@ -4178,12 +4712,18 @@ function fantasyMap() {
}
burgsFooterBurgs.innerHTML = 0;
burgsFooterPopulation.value = 0;
- },
- Cancel: function() {$(this).dialog("close");}
- }})
- });
+ }
+ }
+ });
+ }
+ if (id === "changeCapital") {
+ if ($(this).hasClass("pressed")) {
+ $(this).removeClass("pressed")
+ } else {
+ $(".pressed").removeClass("pressed");
+ $(this).addClass("pressed");
+ }
}
- if (id === "changeCapital") {$(this).toggleClass("pressed");}
if (id === "regenerateBurgNames") {
var s = +$("#burgsEditor").attr("data-state");
$(".burgName").each(function(e, i) {
@@ -4195,17 +4735,21 @@ function fantasyMap() {
labels.select("#manorLabel"+b).text(name);
});
if ($("#countriesEditor").is(":visible")) {
- if (states[s].color === "neutral") {return;}
+ if (states[s].capital === "neutral") {return;}
var c = states[s].capital;
$("#state"+s).attr("data-capital", manors[c].name);
$("#state"+s+" > .stateCapital").val(manors[c].name);
}
}
- if (id === "burgAdd") {$("#addBurg").click(); $(this).toggleClass("pressed");}
+ if (id === "burgAdd") {
+ var state = +$("#burgsEditor").attr("data-state");
+ clickToAdd(); // to load on click event function
+ $("#addBurg").click().attr("data-state", state);
+ }
if (id === "toggleScaleBar") {$("#scaleBar").toggleClass("hidden");}
if (id === "addRuler") {
$("#ruler").show();
- var title =
+ var title =
`Ruler is an instrument for measuring thelinear lengths.
One dash shows 30 km (18.6 mi), approximate distance of a daily loaded march.
Drag edge circles to move the ruler, center circle to split the ruler into 2 parts.
@@ -4213,22 +4757,22 @@ function fantasyMap() {
var rulerNew = ruler.append("g").attr("class", "linear").call(d3.drag().on("start", elementDrag));
var factor = rn(1 / Math.pow(scale, 0.3), 1);
rulerNew.append("title").text(title);
- var y = Math.floor(Math.random() * mapHeight * 0.5 + mapHeight * 0.25);
- var x1 = mapWidth * 0.2, x2 = mapWidth * 0.8;
+ var y = Math.floor(Math.random() * svgHeight * 0.5 + svgHeight * 0.25);
+ var x1 = svgWidth * 0.2, x2 = svgWidth * 0.8;
var dash = rn(30 / distanceScale.value, 2);
rulerNew.append("line").attr("x1", x1).attr("y1", y).attr("x2", x2).attr("y2", y).attr("class", "white").attr("stroke-width", factor);
rulerNew.append("line").attr("x1", x1).attr("y1", y).attr("x2", x2).attr("y2", y).attr("class", "gray").attr("stroke-width", factor).attr("stroke-dasharray", dash);
rulerNew.append("circle").attr("r", 2 * factor).attr("stroke-width", 0.5 * factor).attr("cx", x1).attr("cy", y).attr("data-edge", "left").call(d3.drag().on("drag", rulerEdgeDrag));
rulerNew.append("circle").attr("r", 2 * factor).attr("stroke-width", 0.5 * factor).attr("cx", x2).attr("cy", y).attr("data-edge", "rigth").call(d3.drag().on("drag", rulerEdgeDrag));
- rulerNew.append("circle").attr("r", 1.2 * factor).attr("stroke-width", 0.3 * factor).attr("cx", mapWidth / 2).attr("cy", y).attr("class", "center").call(d3.drag().on("start", rulerCenterDrag));
+ rulerNew.append("circle").attr("r", 1.2 * factor).attr("stroke-width", 0.3 * factor).attr("cx", svgWidth / 2).attr("cy", y).attr("class", "center").call(d3.drag().on("start", rulerCenterDrag));
var dist = rn(x2 - x1);
- var label = rn(dist * distanceScale.value) + " " + distanceUnit.value;
- rulerNew.append("text").attr("x", mapWidth / 2).attr("y", y).attr("dy", -1).attr("data-dist", dist).text(label).text(label).on("click", removeParent).attr("font-size", 10 * factor);
+ var label = rn(dist * distanceScale.value) + " " + distanceUnit.value;
+ rulerNew.append("text").attr("x", svgWidth / 2).attr("y", y).attr("dy", -1).attr("data-dist", dist).text(label).text(label).on("click", removeParent).attr("font-size", 10 * factor);
return;
}
if (id === "addOpisometer" || id === "addPlanimeter") {
if ($(this).hasClass("pressed")) {
- viewbox.style("cursor", "default").on(".drag", null);
+ restoreDefaultEvents();
$(this).removeClass("pressed");
} else {
$(this).addClass("pressed");
@@ -4239,53 +4783,60 @@ function fantasyMap() {
if (id === "removeAllRulers") {
if ($("#ruler > g").length < 1) {return;}
alertMessage.innerHTML = `Are you sure you want to remove all placed rulers?`;
- $(function() {$("#alert").dialog({resizable: false, title: "Remove all rulers",
+ $("#alert").dialog({resizable: false, title: "Remove all rulers",
buttons: {
- "Remove": function() {
+ Remove: function() {
$(this).dialog("close");
$("#ruler > g").remove();
},
Cancel: function() {$(this).dialog("close");}
- }})
+ }
});
return;
- }
+ }
if (id === "editHeightmap") {$("#customizeHeightmap").slideToggle();}
if (id === "fromScratch") {
- undraw();
- placePoints();
- calculateVoronoi(points);
- detectNeighbors("grid");
- drawScaleBar();
- customizeHeightmap();
- return;
+ alertMessage.innerHTML = "Are you sure you want to clear the map? All progress will be lost";
+ $("#alert").dialog({resizable: false, title: "Clear map",
+ buttons: {
+ Cancel: function() {$(this).dialog("close");},
+ Clear: function() {
+ closeDialogs();
+ undraw();
+ placePoints();
+ calculateVoronoi(points);
+ detectNeighbors("grid");
+ drawScaleBar();
+ customizeHeightmap();
+ openBrushesPanel();
+ $(this).dialog("close");
+ }
+ }
+ });
}
if (id === "fromHeightmap") {
- var heights = [];
- for (var i = 0; i < points.length; i++) {
- var cell = diagram.find(points[i][0], points[i][1]).index;
- heights.push(cells[cell].height);
- }
- undraw();
- calculateVoronoi(points);
- detectNeighbors("grid");
- drawScaleBar();
- for (var i = 0; i < points.length; i++) {
- cells[i].height = heights[i];
- }
- mockHeightmap();
- customizeHeightmap();
+ let message = "It's highly recommended to finalize a heightmap as a first step. ";
+ message += "If you want to edit a map, it's better to clean up all the data except on heights. ";
+ message += "You may also keep the data, but it can cause unexpected errors";
+ alertMessage.innerHTML = message;
+ $("#alert").dialog({resizable: false, title: "Edit Heightmap",
+ buttons: {
+ "Clean up": function() {
+ editHeightmap("clean");
+ $(this).dialog("close");
+ },
+ Keep: function() {
+ editHeightmap("keep");
+ $(this).dialog("close");
+ },
+ Cancel: function() {$(this).dialog("close");}
+ }
+ });
return;
}
// heightmap customization buttons
if (customization === 1) {
- if (id === "paintBrushes") {
- if ($("#brushesPanel").is(":visible")) {return;}
- $("#brushesPanel").dialog({
- title: "Paint Brushes",
- minHeight: 40, width: "auto", maxWidth: 200, resizable: false,
- position: {my: "right top", at: "right-10 top+10", of: "svg"}});
- }
+ if (id === "paintBrushes") {openBrushesPanel();}
if (id === "rescaleExecute") {
var subject = rescaleLower.value + "-" + rescaleHigher.value;
var sign = conditionSign.value;
@@ -4295,17 +4846,28 @@ function fantasyMap() {
if (sign === "+") {modifyHeights(subject, +modifier, 1);}
if (sign === "-") {modifyHeights(subject, (-1 * modifier), 1);}
if (sign === "^") {modifyHeights(subject, 0, "^" + modifier);}
- mockHeightmap();
+ updateHeightmap();
+ updateHistory();
}
if (id === "rescaleButton") {
$("#modifyButtons").children().not("#rescaleButton, .condition").toggle();
}
if (id === "rescaleCondButton") {$("#modifyButtons").children().not("#rescaleCondButton, #rescaler").toggle();}
- if (id === "undo") {restoreHistory(historyStage - 1);}
- if (id === "redo") {restoreHistory(historyStage + 1);}
- if (id === "smoothHeights") {smoothHeights(4); mockHeightmap();}
- if (id === "disruptHeights") {disruptHeights(); mockHeightmap();}
- if (id === "getMap") {getMap();}
+ if (id === "undo" || id === "templateUndo") {restoreHistory(historyStage - 1);}
+ if (id === "redo" || id === "templateRedo") {restoreHistory(historyStage + 1);}
+ if (id === "smoothHeights") {
+ smoothHeights(4);
+ updateHeightmap();
+ updateHistory();
+ }
+ if (id === "disruptHeights") {
+ disruptHeights();
+ updateHeightmap();
+ updateHistory();
+ }
+ if (id === "getMap") {
+ if (states.length && manors.length) {getMap("keep");} else {getMap();}
+ }
if (id === "applyTemplate") {
if ($("#templateEditor").is(":visible")) {return;}
$("#templateEditor").dialog({
@@ -4367,69 +4929,47 @@ function fantasyMap() {
return;
}
}
- if ($(this).hasClass('radio') && (parent === "addFeature" || parent === "brushesButtons")) {
- if ($(this).hasClass('pressed')) {
- $(".pressed").removeClass('pressed');
- viewbox.style("cursor", "default").on(".drag", null);;
- $("#brushRadiusLabel, #brushRadius").attr("disabled", true).addClass("disabled");
- } else {
- $(".pressed").removeClass('pressed');
- $(this).addClass('pressed');
- viewbox.style("cursor", "crosshair");
- if (id.slice(0,5) === "brush" && id !== "brushRange" && id !== "brushTrough") {
- viewbox.call(drag);
- }
- if (parent === "addFeature" || $(this).hasClass("feature")) {
- $("#brushRadiusLabel, #brushRadius").attr("disabled", true).addClass("disabled");
- } else {
- $("#brushRadiusLabel, #brushRadius").attr("disabled", false).removeClass("disabled");
+ if (id === "restoreStyle") {
+ alertMessage.innerHTML = "Are you sure you want to restore default style?";
+ $("#alert").dialog({resizable: false, title: "Restore style",
+ buttons: {
+ Restore: function() {
+ applyDefaultStyle();
+ $(this).dialog("close");
+ },
+ Cancel: function() {
+ $(this).dialog("close");
+ }
}
- }
- return;
+ });
}
- if ($(this).hasClass('radio') && parent === "mapFilters") {
- $("svg").removeClass();
+ if (parent === "mapFilters") {
+ $("svg").attr("filter", "");
if ($(this).hasClass('pressed')) {
$("#mapFilters .pressed").removeClass('pressed');
} else {
$("#mapFilters .pressed").removeClass('pressed');
$(this).addClass('pressed');
- if (id === "grayscale") {$("svg").addClass("grayscale");}
- if (id === "sepia") {$("svg").addClass("sepia");}
- if (id === "tint") {$("svg").addClass("tint");}
- if (id === "dingy") {$("svg").addClass("dingy");}
+ $("svg").attr("filter", "url(#filter-" + id + ")");
}
return;
- }
- if (id === "mapScreenSize") {
- if ($("body").hasClass("fullscreen")) {
- mapWidthInput.value = 960; // default width
- mapHeightInput.value = 540; // default height
- $(".fullscreen").removeClass("fullscreen");
- $(this).addClass("icon-resize-full-alt").removeClass("icon-resize-small");
- } else {
- mapWidthInput.value = $(window).width();
- mapHeightInput.value = $(window).height();
- $("body").addClass("fullscreen");
- $("svg").addClass("fullscreen");
- $(this).removeClass("icon-resize-full-alt").addClass("icon-resize-small");
- }
+ }
+ if (id === "updateFullscreen") {
+ mapWidthInput.value = window.innerWidth;
+ mapHeightInput.value = window.innerHeight;
changeMapSize();
- }
+ }
if (id === "saveButton") {$("#saveDropdown").slideToggle();}
- if (id === "loadMap") {fileToLoad.click();}
- if (id === "printMap") {printMap();}
+ if (id === "loadMap") {mapToLoad.click();}
if (id === "zoomReset") {resetZoom(1000);}
if (id === "zoomPlus") {
- scale += 1;
+ scale += 1;
if (scale > 40) {scale = 40;}
- zoomUpdate();
invokeActiveZooming();
}
if (id === "zoomMinus") {
- scale -= 1;
+ scale -= 1;
if (scale <= 1) {scale = 1; viewX = 0; viewY = 0;}
- zoomUpdate();
invokeActiveZooming();
}
if (id === "styleFontPlus" || id === "styleFontMinus") {
@@ -4437,10 +4977,11 @@ function fantasyMap() {
var mod = id === "styleFontPlus" ? 1.1 : 0.9;
el.selectAll("g").each(function() {
var el = d3.select(this);
- var size = rn(el.attr("font-size") * mod, 2);
- if (size < 0.2) {size = 0.2;}
+ var size = rn(el.attr("data-size") * mod, 2);
+ if (size < 2) {size = 2;}
el.attr("data-size", size).attr("font-size", rn((size + (size / scale)) / 2, 2));
});
+ invokeActiveZooming();
return;
}
if (id === "styleFillPlus" || id === "styleFillMinus") {
@@ -4464,14 +5005,14 @@ function fantasyMap() {
if (el.node().nodeName === "circle") {el.attr("stroke-width", size);}
});
return;
- }
- if (id === "templateClear" || id === "brushClear") {
+ }
+ if (id === "brushClear") {
if (customization === 1) {
var message = "Are you sure you want to clear the map?";
alertMessage.innerHTML = message;
- $(function() {$("#alert").dialog({resizable: false, title: "Clear map",
+ $("#alert").dialog({resizable: false, title: "Clear map",
buttons: {
- "Clear": function() {
+ Clear: function() {
$(this).dialog("close");
viewbox.style("cursor", "crosshair").call(drag);
landmassCounter.innerHTML = "0";
@@ -4479,13 +5020,14 @@ function fantasyMap() {
cells.map(function(i) {i.height = 0;});
// clear history
history = [];
- historyStage = -1;
- redo.disabled = true;
- undo.disabled = true;
+ historyStage = 0;
+ updateHistory();
+ redo.disabled = templateRedo.disabled = true;
+ undo.disabled = templateUndo.disabled = true;
},
Cancel: function() {$(this).dialog("close");}
- }})
- });
+ }
+ });
} else {
start.click();
}
@@ -4506,7 +5048,7 @@ function fantasyMap() {
heightsFromImage(current);
}
if (id === "convertOverlayButton") {
- $("#convertImageButtons").children().not(this).not("#imageToLoad, #convertColors").toggle();
+ $("#convertImageButtons").children().not(this).not("#convertColors").toggle();
}
if (id === "convertAutoLum") {autoAssing("lum");}
if (id === "convertAutoHue") {autoAssing("hue");}
@@ -4516,24 +5058,101 @@ function fantasyMap() {
// support save options
$("#saveDropdown > div").click(function() {
var id = this.id;
+ var dns_allow_popup_message = localStorage.getItem("dns_allow_popup_message");
+ if (!dns_allow_popup_message) {
+ var message = "Generator uses pop-up window to download files. ";
+ message += "Please ensure your browser does not block popups. ";
+ message += "Please check browser settings and turn off adBlocker if it is enabled";
+ alertMessage.innerHTML = message;
+ $("#alert").dialog({title: "File saver. Please enable popups!",
+ buttons: {
+ "Don't show again": function() {
+ localStorage.setItem("dns_allow_popup_message", true);
+ $(this).dialog("close");
+ },
+ Close: function() {$(this).dialog("close");}
+ },
+ position: {my: "center", at: "center", of: "svg"}
+ });
+ }
if (id === "saveMap") {saveMap();}
if (id === "saveSVG") {saveAsImage("svg");}
if (id === "savePNG") {saveAsImage("png");}
- if (id === "activeZooming") {
- $(this).toggleClass("icon-eye icon-eye-off");
- zoomUpdate();
- invokeActiveZooming();
- return;
- }
- $("#saveDropdown").slideUp("fast");
+ $("#saveDropdown").slideUp("fast");
});
+ function editHeightmap(type) {
+ closeDialogs();
+ var heights = [], regionData = [], cultureData = [];
+ for (var i = 0; i < points.length; i++) {
+ var cell = diagram.find(points[i][0], points[i][1]).index;
+ heights.push(cells[cell].height);
+ var region = cells[cell].region;
+ if (region === undefined) {region = -1;}
+ regionData.push(region);
+ var culture = cells[cell].culture;
+ if (culture === undefined) {culture = -1;}
+ cultureData.push(culture);
+ }
+ if (type === "clean") {undraw();}
+ calculateVoronoi(points);
+ detectNeighbors("grid");
+ drawScaleBar();
+ for (var i = 0; i < points.length; i++) {
+ cells[i].height = heights[i];
+ }
+ if (type === "keep") {
+ svg.selectAll("#shape, #lakes, #coastline, #terrain, #rivers, #grid, #terrs, #landmass, #ocean, #regions")
+ .selectAll("path, circle, line").remove();
+ for (var i = 0; i < points.length; i++) {
+ if (regionData[i] !== -1) {cells[i].region = regionData[i];}
+ if (cultureData[i] !== -1) {cells[i].culture = cultureData[i];}
+ }
+ }
+ mockHeightmap();
+ customizeHeightmap();
+ openBrushesPanel();
+ }
+
+ function openBrushesPanel() {
+ if ($("#brushesPanel").is(":visible")) {return;}
+ $("#brushesPanel").dialog({
+ title: "Paint Brushes",
+ minHeight: 40, width: "auto", maxWidth: 200, resizable: false,
+ position: {my: "right top", at: "right-10 top+10", of: "svg"}
+ }).on('dialogclose', function() {
+ restoreDefaultEvents();
+ $("#brushesButtons > .pressed").removeClass('pressed');
+ });
+
+ if (modules.openBrushesPanel) {return;}
+ modules.openBrushesPanel = true;
+
+ $("#brushesButtons > button").on("click", function() {
+ const rSlider = $("#brushRadiusLabel, #brushRadius");
+ if ($(this).hasClass('pressed')) {
+ $(this).removeClass('pressed');
+ restoreDefaultEvents();
+ icons.selectAll(".circle").remove();
+ rSlider.attr("disabled", true).addClass("disabled");
+ } else {
+ $("#brushesButtons > .pressed").removeClass('pressed');
+ $(this).addClass('pressed');
+ viewbox.style("cursor", "crosshair");
+ if (this.id !== "brushRange" && this.id !== "brushTrough") {viewbox.call(drag);} // on drag brushes
+ else {viewbox.on("click", placeLinearFeature);} // on click brushes
+ if ($(this).hasClass("feature")) {rSlider.attr("disabled", true).addClass("disabled");}
+ else {rSlider.attr("disabled", false).removeClass("disabled");}
+ }
+ });
+ }
+
function drawPerspective() {
console.time("drawPerspective");
const width = 320, height = 180;
- const wRatio = mapWidth / width, hRatio = mapHeight / height;
+ const wRatio = graphWidth / width, hRatio = graphHeight / height;
const lineCount = +$("#lineHandle0").attr("data-value");
- const lineGranularity = +$("#lineHandle1").attr("data-value");
+ const lineGranularity = +$("#lineHandle1").attr("data-value");
const perspective = document.getElementById("perspective");
const pContext = perspective.getContext("2d");
const lines = [];
@@ -4615,18 +5234,18 @@ function fantasyMap() {
}
if (id === "Smooth") {
var count = '';
- }
+ }
if (id === "Strait") {
var count = '';
}
el.append('');
- $(".icon-trash-empty").on("click", function() {$(this).parent().remove();});
+ $("#templateBody .icon-trash-empty").on("click", function() {$(this).parent().remove();});
if (dist) {el.append(dist);}
if (count) {el.append(count);}
el.find("select.templateElDist").on("input", fireTemplateElDist);
$("#templateBody").attr("data-changed", 1);
});
-
+
// fireTemplateElDist selector handlers
function fireTemplateElDist() {
if (this.value === "interval") {
@@ -4634,10 +5253,10 @@ function fantasyMap() {
if (interval) {
var option = '';
$(this).append(option).val(interval);
- }
+ }
}
}
-
+
// templateSelect on change listener
$("#templateSelect").on("input", function() {
var steps = $("#templateBody > div").length;
@@ -4645,18 +5264,18 @@ function fantasyMap() {
var template = this.value;
if (steps && changed === 1) {
alertMessage.innerHTML = "Are you sure you want to change the base template? All the changes will be lost.";
- $(function() {$("#alert").dialog({resizable: false, title: "Change Template",
+ $("#alert").dialog({resizable: false, title: "Change Template",
buttons: {
- "Change": function() {
+ Change: function() {
changeTemplate(template);
- $(this).dialog("close");
+ $(this).dialog("close");
},
Cancel: function() {
var prev = $("#templateSelect").attr("data-prev");
$("#templateSelect").val(prev);
$(this).dialog("close");
}
- }})
+ }
});
}
if (steps === 0 || changed === 0) {changeTemplate(template);}
@@ -4707,12 +5326,12 @@ function fantasyMap() {
addStep("Add", -0.2, "land");
addStep("Hill", 14, 0.17);
addStep("Range", 5);
- addStep("Strait", "2-4");
+ addStep("Strait", "2-4");
addStep("Trough", 12);
addStep("Pit", 8);
addStep("Add", -0.05, "land");
addStep("Multiply", 0.7, "land");
- addStep("Smooth", 4);
+ addStep("Smooth", 4);
}
if (template === "templateAtoll") {
addStep("Hill", 2, 0.35);
@@ -4720,10 +5339,10 @@ function fantasyMap() {
addStep("Add", 0.07, "all");
addStep("Smooth", 1);
addStep("Multiply", 0.1, "0.27-10");
- }
+ }
$("#templateBody").attr("data-changed", 0);
}
-
+
// interprete template function
function addStep(feature, count, dist) {
if (!feature) {return;}
@@ -4745,8 +5364,8 @@ function fantasyMap() {
$("#templateBody div:last-child .templateElDist").val(dist);
}
}
-
- // Execute custom template
+
+ // Execute custom template
$("#templateRun").on("click", function() {
if (customization !== 1) {return;}
var steps = $("#templateBody > div").length;
@@ -4760,7 +5379,7 @@ function fantasyMap() {
if (count) {
if (count[0] !== "-" && count.includes("-")) {
var lim = count.split("-");
- count = Math.floor(Math.random() * (+lim[1] - +lim[0] + 1) + +lim[0]);
+ count = Math.floor(Math.random() * (+lim[1] - +lim[0] + 1) + +lim[0]);
} else {
count = +count; // parse string
}
@@ -4774,9 +5393,9 @@ function fantasyMap() {
if (type === "Multiply") {modifyHeights(dist, 0, count);}
if (type === "Smooth") {smoothHeights(count);}
}
- if (steps) {mockHeightmap();}
+ if (steps) {mockHeightmap(); updateHistory();}
});
-
+
// Save custom template as text file
$("#templateSave").on("click", function() {
var steps = $("#templateBody > div").length;
@@ -4789,7 +5408,7 @@ function fantasyMap() {
if (!count) {count = "0";}
if (!dist) {dist = "0";}
stepsData += type + " " + count + " " + dist + "\r\n";
- }
+ }
var dataBlob = new Blob([stepsData], {type:"text/plain"});
var url = window.URL.createObjectURL(dataBlob);
var link = document.createElement("a");
@@ -4798,7 +5417,7 @@ function fantasyMap() {
link.click();
$("#templateBody").attr("data-changed", 0);
});
-
+
// Load custom template as text file
$("#templateLoad").on("click", function() {templateToLoad.click();});
$("#templateToLoad").change(function() {
@@ -4820,11 +5439,14 @@ function fantasyMap() {
};
fileReader.readAsText(fileToLoad, "UTF-8");
});
-
+
// Image to Heightmap Converter dialog
function convertImage() {
+ canvas.width = svgWidth;
+ canvas.height = svgHeight;
+ // turn off paint brushes drag and cursor
$(".pressed").removeClass('pressed');
- viewbox.style("cursor", "default");
+ restoreDefaultEvents();
var div = d3.select("#colorScheme");
if (div.selectAll("*").size() === 0) {
for (var i = 0; i <= 100; i++) {
@@ -4843,13 +5465,13 @@ function fantasyMap() {
position: {my: "right top", at: "right-10 top+10", of: "svg"}})
.on('dialogclose', function() {completeConvertion();});
}
-
+
// Load image to convert
$("#convertImageLoad").on("click", function() {imageToLoad.click();});
$("#imageToLoad").change(function() {
console.time("loadImage");
- // reset style
- viewbox.attr("transform", null);
+ // set style
+ resetZoom();
grid.attr("stroke-width", .3);
// load image
var file = this.files[0];
@@ -4858,16 +5480,16 @@ function fantasyMap() {
var img = new Image;
// draw image
img.onload = function() {
- ctx.drawImage(img, 0, 0, mapWidth, mapHeight);
+ ctx.drawImage(img, 0, 0, svgWidth, svgHeight);
heightsFromImage(+convertColors.value);
console.timeEnd("loadImage");
}
reader.onloadend = function() {img.src = reader.result;}
reader.readAsDataURL(file);
});
-
+
function heightsFromImage(count) {
- var imageData = ctx.getImageData(0, 0, mapWidth, mapHeight);
+ var imageData = ctx.getImageData(0, 0, svgWidth, svgHeight);
var data = imageData.data;
$("#landmass > path, .color-div").remove();
$("#landmass, #colorsUnassigned").fadeIn();
@@ -4875,9 +5497,9 @@ function fantasyMap() {
var colors = [], palette = [];
points.map(function(i) {
var x = rn(i[0]), y = rn(i[1]);
- if (y == mapHeight) {y--;}
- if (x == mapWidth) {x--;}
- var p = (x + y * mapWidth) * 4;
+ if (y == svgHeight) {y--;}
+ if (x == svgWidth) {x--;}
+ var p = (x + y * svgWidth) * 4;
var r = data[p], g = data[p + 1], b = data[p + 2];
colors.push([r, g, b]);
});
@@ -4888,7 +5510,9 @@ function fantasyMap() {
var rgb = "rgb(" + nearest[0] + ", " + nearest[1] + ", " + nearest[2] + ")";
var hex = toHEX(rgb);
if (palette.indexOf(hex) === -1) {palette.push(hex);}
- landmass.append("path").attr("d", "M" + i.join("L") + "Z").attr("data-i", d).attr("fill", hex).attr("stroke", hex);
+ landmass.append("path")
+ .attr("d", "M" + i.join("L") + "Z").attr("data-i", d)
+ .attr("fill", hex).attr("stroke", hex);
});
landmass.selectAll("path").on("click", landmassClicked);
palette.sort(function(a, b) {return d3.lab(a).b - d3.lab(b).b;}).map(function(i) {
@@ -4953,7 +5577,7 @@ function fantasyMap() {
}
if ($("#colorsAssigned .color-div").length > 1) {sortAssignedColors();}
}
-
+
// sort colors based on assigned height
function sortAssignedColors() {
var data = [];
@@ -4970,17 +5594,17 @@ function fantasyMap() {
// auto assign color based on luminosity or hue
function autoAssing(type) {
- var imageData = ctx.getImageData(0, 0, mapWidth, mapHeight);
+ var imageData = ctx.getImageData(0, 0, svgWidth, svgHeight);
var data = imageData.data;
$("#landmass > path, .color-div").remove();
$("#colorsAssigned").fadeIn();
$("#colorsUnassigned").fadeOut();
var heights = [];
polygons.map(function(i, d) {
- var x = rn(i.data[0]), y = rn(i.data[1]);
- if (y == mapHeight) {y--;}
- if (x == mapWidth) {x--;}
- var p = (x + y * mapWidth) * 4;
+ var x = rn(i.data[0]), y = rn(i.data[1]);
+ if (y == svgHeight) {y--;}
+ if (x == svgWidth) {x--;}
+ var p = (x + y * svgWidth) * 4;
var r = data[p], g = data[p + 1], b = data[p + 2];
var lab = d3.lab("rgb(" + r + ", " + g + ", " + b + ")");
if (type === "hue") {
@@ -4992,7 +5616,7 @@ function fantasyMap() {
var rgb = color(1 - normalized);
var hex = toHEX(rgb);
cells[d].height = normalized;
- landmass.append("path").attr("d", "M" + i.join("L") + "Z").attr("data-i", d).attr("fill", hex).attr("stroke", hex);
+ landmass.append("path").attr("d", "M" + i.join("L") + "Z").attr("data-i", d).attr("fill", hex).attr("stroke", hex);
});
heights.sort(function(a, b) {return a - b;});
var unique = [...new Set(heights)];
@@ -5007,36 +5631,39 @@ function fantasyMap() {
function normalize(val, min, max) {
var normalized = (val - min) / (max - min);
if (normalized < 0) {normalized = 0;}
- if (normalized > 1) {normalized = 1;}
+ if (normalized > 1) {normalized = 1;}
return normalized;
}
function completeConvertion() {
mockHeightmap();
+ restartHistory();
+ $(".color-div").remove();
+ $("#colorsAssigned, #colorsUnassigned").fadeOut();
+ grid.attr("stroke-width", .1);
canvas.style.opacity = convertOverlay.value = convertOverlayValue.innerHTML = 0;
+ // turn on paint brushes drag and cursor
+ viewbox.style("cursor", "crosshair").call(drag);
$("#imageConverter").dialog('close');
}
// Clear the map
function undraw() {
svg.selectAll("path, circle, line, text, #ruler > g").remove();
- cells = [], land = [], riversData = [], island = 0, manors = [], states = [], queue = [];
- history = [], historyStage = -1; redo.disabled = true; undo.disabled = true; // clear history
+ cells = [], land = [], riversData = [], manors = [], states = [], queue = [];
}
// Enter Heightmap Customization mode
function customizeHeightmap() {
customization = 1;
- svg.transition().duration(1000).call(zoom.transform, d3.zoomIdentity);
+ resetZoom();
$("#customizationMenu").slideDown();
- viewbox.style("cursor", "crosshair").call(drag);
landmassCounter.innerHTML = "0";
$('#grid').fadeIn();
$('#toggleGrid').removeClass("buttonoff");
- if ($("#labelEditor").is(":visible")) {$("#labelEditor").dialog('close');}
- if ($("#riverEditor").is(":visible")) {$("#riverEditor").dialog('close');}
+ restartHistory();
}
-
+
// Remove all customization related styles, reset values
function exitCustomization() {
customization = 0;
@@ -5045,16 +5672,14 @@ function fantasyMap() {
$("#getMap").attr("disabled", true).addClass("buttonoff");
$("#landmass").empty();
$('#grid').empty().fadeOut();
- $('#toggleGrid').addClass("buttonoff");
- viewbox.style("cursor", "default").on(".drag", null);
+ $('#toggleGrid').addClass("buttonoff");
+ restoreDefaultEvents();
if (!$("#toggleHeight").hasClass("buttonoff")) {toggleHeight();}
- if ($("#imageConverter").is(":visible")) {$("#imageConverter").dialog('close');}
- if ($("#brushesPanel").is(":visible")) {$("#brushesPanel").dialog('close');}
- if ($("#templateEditor").is(":visible")) {$("#templateEditor").dialog('close');}
+ closeDialogs();
history = [];
- historyStage = -1;
+ historyStage = 0;
}
-
+
// open editCountries dialog
function editCountries() {
$("#countriesBody").empty();
@@ -5065,8 +5690,8 @@ function fantasyMap() {
for (var s = 0; s < states.length; s++) {
$("#countriesBody").append('');
var el = $("#countriesBody div:last-child");
- var burgs = states[s].burgs;
- totalBurgs += burgs;
+ var burgsCount = states[s].burgs;
+ totalBurgs += burgsCount;
// calculate user-friendly area and population
var area = rn(states[s].area * Math.pow(distanceScale.value, 2));
totalArea += area;
@@ -5076,9 +5701,10 @@ function fantasyMap() {
var population = (urban + rural) * 1000;
totalPopulation += population;
var populationConv = si(population);
- var title = `Total population: ${population}K\nRural population: ${rural}K\nUrban population: ${urban}K`;
+ var title = `Total population: ${population}K\nRural population: ${rural}K\nUrban population: ${urban}K`;
+ var neutral = states[s].color === "neutral" || states[s].capital === "neutral";
// append elements to countriesBody
- if (states[s].color !== "neutral") {
+ if (!neutral) {
el.append('');
el.append('');
var capital = states[s].capital !== "select" ? manors[states[s].capital].name : "select";
@@ -5086,12 +5712,12 @@ function fantasyMap() {
el.append('');
} else {
el.append('');
- el.append('');
+ el.append('');
}
el.append('');
el.append('');
} else {
- el.append('');
+ el.append('');
el.append('');
el.append('');
el.append('');
@@ -5101,12 +5727,12 @@ function fantasyMap() {
el.append('');
el.append('' + states[s].cells + '
');
el.append('');
- el.append('' + burgs + '
');
+ el.append('' + burgsCount + '
');
el.append('');
el.append('' + areaConv + '
');
el.append('');
el.append('');
- if (states[s].color !== "neutral") {
+ if (!neutral) {
el.append('');
el.attr("data-country", states[s].name).attr("data-capital", capital).attr("data-expansion", states[s].power).attr("data-cells", states[s].cells)
.attr("data-burgs", states[s].burgs).attr("data-area", area).attr("data-population", population);
@@ -5119,17 +5745,11 @@ function fantasyMap() {
if (!$("#countriesEditor").is(":visible")) {
$("#countriesEditor").dialog({
title: "Countries Editor",
- minHeight: "auto", width: "auto",
+ minHeight: "auto", minWidth: Math.min(svgWidth, 390),
position: {my: "right top", at: "right-10 top+10", of: "svg"}
- }).on("dialogclose", function(e) {
- customization = 0;
- if (grid.style("display") === "inline") {toggleGrid.click();}
- if (labels.style("display") === "none") {toggleLabels.click();}
- $("#countriesBottom").children().show();
- $("#countriesManuallyButtons, #countriesRegenerateButtons").hide();
- $(".selected").removeClass("selected");
- customization = 0;
- });
+ }).on("dialogclose", function() {
+ if (customization === 2 || customization === 3) {$("#countriesManuallyCancel").click()};
+ });
}
// restore customization Editor version
if (customization === 3) {
@@ -5141,7 +5761,7 @@ function fantasyMap() {
}
// populate total line on footer
countriesFooterCountries.innerHTML = states.length;
- if (states[states.length-1].color === "neutral") {countriesFooterCountries.innerHTML = states.length - 1;}
+ if (states[states.length-1].capital === "neutral") {countriesFooterCountries.innerHTML = states.length - 1;}
countriesFooterBurgs.innerHTML = totalBurgs;
countriesFooterArea.innerHTML = si(totalArea) + unit;
countriesFooterPopulation.innerHTML = si(totalPopulation);
@@ -5186,14 +5806,101 @@ function fantasyMap() {
}
}).hover(focusCapital, unfocus);
$(".stateBurgs, .stateBIcon").on("click", editBurgs).hover(focusBurgs, unfocus);
+
$("#countriesBody > .states").on("click", function() {
- if ($(event.target).hasClass("selectCapital")) {
- $(event.target).toggleClass("pressed");
- } else if (customization === 2) {
+ if (customization === 2) {
$(".selected").removeClass("selected");
$(this).addClass("selected");
+ const state = +$(this).attr("id").slice(5);
+ let color = states[state].color;
+ if (color === "neutral") {color = "white";}
+ if (icons.selectAll(".circle").size()) {icons.selectAll(".circle").attr("stroke", color);}
}
});
+
+ $(".selectCapital").on("click", function() {
+ if ($(this).hasClass("pressed")) {
+ $(this).removeClass("pressed");
+ restoreDefaultEvents();
+ } else {
+ $(this).addClass("pressed");
+ viewbox.style("cursor", "crosshair").on("click", selectCapital);
+ }
+ });
+
+ function selectCapital() {
+ var point = d3.mouse(this);
+ var index = getIndex(point);
+ var x = rn(point[0], 2), y = rn(point[1], 2);
+
+ if (cells[index].height < 0.2) {
+ console.error("Cannot place capital on the water! Select a land cell");
+ return;
+ }
+ // check for capitals group for labels
+ let group = labels.select("#capitals");
+ if (!group.size()) {
+ group = labels.append("g").attr("id", "capitals")
+ .attr("fill", "#3e3e4b").attr("opacity", 1)
+ .attr("font-family", "Almendra SC").attr("data-font", "Almendra+SC")
+ .attr("font-size", 7).attr("data-size", 7);
+ invokeActiveZooming();
+ }
+
+ var state = $(".selectCapital.pressed").attr("id").replace("selectCapital", "");
+ var oldState = cells[index].region;
+ if (oldState === "neutral") {oldState = states.length - 1;}
+ if (cells[index].manor !== undefined) {
+ // cell has burg
+ var burg = cells[index].manor;
+ if (states[oldState].capital === burg) {
+ console.error("Existing capital cannot be selected as a new state capital! Select other cell");
+ return;
+ } else {
+ // make this burg a new capital
+ var urbanFactor = 0.9; // for old neutrals
+ manors[burg].region = state;
+ if (oldState === "neutral") {manors[burg].population *= (1 / urbanFactor);}
+ manors[burg].population *= 2; // give capital x2 population bonus
+ states[state].capital = burg;
+ $("#manorLabel"+burg).detach().appendTo($("#capitals")).attr("dy", -1.3);
+ $("#manorIcon"+burg).attr("r", 1).attr("stroke-width", .24);
+ }
+ } else {
+ // free cell -> create new burg for a capital
+ var closest = cultureTree.find(x, y);
+ var culture = cultureTree.data().indexOf(closest) || 0;
+ var name = generateName(culture);
+ var i = manors.length;
+ cells[index].manor = i;
+ states[state].capital = i;
+ var score = cells[index].score;
+ if (score <= 0) {score = rn(Math.random(), 2);}
+ if (cells[index].crossroad) {score += cells[index].crossroad;} // crossroads
+ if (cells[index].confluence) {score += Math.pow(cells[index].confluence, 0.3);} // confluences
+ if (cells[index].port) {score *= 3;} // port-capital
+ var population = rn(score, 1);
+ manors.push({i, cell:index, x, y, region: state, culture, name, population});
+ burgs.append("circle").attr("id", "manorIcon"+i)
+ .attr("r", 1).attr("stroke-width", .24).attr("cx", x)
+ .attr("cy", y).call(d3.drag().on("start", elementDrag));
+ group.append("text").attr("id", "manorLabel"+i)
+ .attr("x", x).attr("y", y).attr("dy", -1.3)
+ .text(name).on("click", editLabel);
+ }
+ cells[index].region = state;
+ cells[index].neighbors.map(function(n) {
+ if (cells[n].height < 0.2) {return;}
+ if (cells[n].manor !== undefined) {return;}
+ cells[n].region = state;
+ });
+ redrawRegions();
+ recalculateStateData(oldState); // re-calc old state data
+ recalculateStateData(state); // calc new state data
+ editCountries();
+ restoreDefaultEvents();
+ }
+
$(".statePower").on("input", function() {
var s = +(this.parentNode.id).slice(5);
states[s].power = +this.value;
@@ -5220,54 +5927,59 @@ function fantasyMap() {
total += +$(this).attr("data-population");
});
countriesFooterPopulation.innerHTML = si(total * 1000);
- if (states[s].color === "neutral") {s = "neutral";}
+ if (states[s].capital === "neutral") {s = "neutral";}
manors.map(function(m) {
if (m.region !== s) {return;}
m.population = rn(m.population * change, 2);
});
});
// fully remove country
- $(".icon-trash-empty").on("click", function() {
- alertMessage.innerHTML = `Are you sure you want to remove the country?`;
+ $("#countriesBody .icon-trash-empty").on("click", function() {
var s = +(this.parentNode.id).slice(5);
- var capital = states[s].capital;
- if (capital === "select") {
- states.splice(s, 1);
- states.map(function(s, i) {s.i = i;});
- $("#state"+s).remove();
+ if (states[s].capital === "select") {
+ removeCountry(s);
return;
}
- $(function() {$("#alert").dialog({resizable: false, title: "Remove country",
- buttons: {
- "Remove": function() {
- $(this).dialog("close");
- states.splice(s, 1);
- states.map(function(s, i) {s.i = i;});
- $("#manorLabel"+capital).detach().appendTo($("#towns")).attr("dy", -0.7); // change capital label to burg
- $("#manorIcon"+capital).attr("r", .5).attr("stroke-width", .12);
- var burgs = $.grep(manors, function(e) {return (e.region === s);});
- var urbanFactor = 0.9;
- burgs.map(function(b) {
- if (b.i === capital) {b.population *= 0.5;}
- b.population *= urbanFactor;
- b.region = "neutral";
- });
- cells.map(function(c) {
- if (c.region === s) {c.region = "neutral";}
- else if (c.region > s) {c.region -= 1;}
- });
- // re-calculate neutral data
- if (states[states.length-1].color !== "neutral") {
- states.push({i: states.length, color: "neutral", name: "Neutrals", capital: "neutral"});
- }
- redrawRegions();
- recalculateStateData(states.length - 1); // re-calc data for neutrals
- editCountries();
- },
- Cancel: function() {$(this).dialog("close");}
- }})
- });
+ alertMessage.innerHTML = `Are you sure you want to remove the country?`;
+ $("#alert").dialog({resizable: false, title: "Remove country", buttons: {
+ Remove: function() {
+ removeCountry(s);
+ $(this).dialog("close");
+ },
+ Cancel: function() {$(this).dialog("close");}
+ }});
});
+
+ function removeCountry(s) {
+ const cellsCount = states[s].cells;
+ const capital = states[s].capital;
+ states.splice(s, 1);
+ states.map(function(s, i) {s.i = i;});
+ cells.map(function(c) {
+ if (c.region === s) {c.region = "neutral";}
+ else if (c.region > s) {c.region -= 1;}
+ });
+ // do only if removed state had cells
+ if (cellsCount) {
+ $("#manorLabel"+capital).detach().appendTo($("#towns")).attr("dy", -0.7); // change capital label to burg
+ $("#manorIcon"+capital).attr("r", .5).attr("stroke-width", .12);
+ var burgsSelection = $.grep(manors, function(e) {return (e.region === s);});
+ var urbanFactor = 0.9;
+ burgsSelection.map(function(b) {
+ if (b.i === capital) {b.population *= 0.5;}
+ b.population *= urbanFactor;
+ b.region = "neutral";
+ });
+ // re-calculate neutral data
+ if (states[states.length-1].capital !== "neutral") {
+ states.push({i: states.length, color: "neutral", name: "Neutrals", capital: "neutral"});
+ }
+ recalculateStateData(states.length - 1); // re-calc data for neutrals
+ redrawRegions();
+ }
+ editCountries();
+ }
+
$("#countriesNeutral").on("change", function() {regenerateCountries();});
}
@@ -5277,7 +5989,7 @@ function fantasyMap() {
$("#burgsEditor").attr("data-state", s);
$("#burgsBody").empty();
$("#burgsHeader").children().removeClass("icon-sort-name-up icon-sort-name-down icon-sort-number-up icon-sort-number-down");
- var region = states[s].color === "neutral" ? "neutral" : s;
+ var region = states[s].capital === "neutral" ? "neutral" : s;
var burgs = $.grep(manors, function(e) {return (e.region === region);});
var populationArray = [];
burgs.map(function(b) {
@@ -5305,18 +6017,18 @@ function fantasyMap() {
if (b.i !== capital) {el.append('');}
el.attr("data-burg", b.name).attr("data-culture", cultures[b.culture]).attr("data-population", b.population).attr("data-type", type);
});
- var color = '';
if (!$("#burgsEditor").is(":visible")) {
$("#burgsEditor").dialog({
title: "Burgs of " + states[s].name,
minHeight: "auto", width: "auto",
position: {my: "right bottom", at: "right-10 bottom-10", of: "svg"}
});
+ var color = '';
+ if (region !== "neutral") {$("div[aria-describedby='burgsEditor'] .ui-dialog-title").prepend(color);}
}
- if (region !== "neutral") {$("div[aria-describedby='burgsEditor'] .ui-dialog-title").prepend(color);}
// populate total line on footer
burgsFooterBurgs.innerHTML = burgs.length;
- burgsFooterCulture.innerHTML = $("#burgsBody div:first-child .burgCulture").text();
+ burgsFooterCulture.innerHTML = $("#burgsBody div:first-child .burgCulture").text();
var avPop = rn(d3.mean(populationArray), -1);
burgsFooterPopulation.value = avPop;
$(".enlange").click(function() {
@@ -5331,16 +6043,16 @@ function fantasyMap() {
var type = $(this).attr("data-type");
if (type.includes("capital")) {return;}
var s = +$("#burgsEditor").attr("data-state");
- var b = +$(this).attr("id").slice(5);
+ var b = +$(this).attr("id").slice(5);
var oldCap = states[s].capital;
manors[oldCap].population *= 0.5;
manors[b].population *= 2;
states[s].capital = b;
recalculateStateData(s);
$("#manorLabel"+oldCap).detach().appendTo($("#towns")).attr("dy", -0.7);
- $("#manorIcon"+oldCap).attr("r", .5).attr("stroke-width", .12);
+ $("#manorIcon"+oldCap).attr("r", .5).attr("stroke-width", .12);
$("#manorLabel"+b).detach().appendTo($("#capitals")).attr("dy", -1.3);
- $("#manorIcon"+b).attr("r", 1).attr("stroke-width", .24);
+ $("#manorIcon"+b).attr("r", 1).attr("stroke-width", .24);
updateCountryEditors();
$("#changeCapital").removeClass("pressed");
});
@@ -5383,7 +6095,7 @@ function fantasyMap() {
var state = +$("#burgsEditor").attr("data-state");
var newPop = +this.value;
var avPop = states[state].urbanPopulation / states[state].burgs * urbanization.value * populationRate.value * 1000;
- if (!Number.isInteger(newPop) || newPop < 10) {this.value = rn(avPop, -1); return;}
+ if (!Number.isInteger(newPop) || newPop < 10) {this.value = rn(avPop, -1); return;}
var change = +this.value / avPop;
$("#burgsBody > div").each(function(e, i) {
var b = +(this.id).slice(5);
@@ -5391,18 +6103,18 @@ function fantasyMap() {
manors[b].population = pop;
$(this).attr("data-population", pop);
var popUI = pop * urbanization.value * populationRate.value * 1000;
- popUI = popUI > 1e4 ? si(popUI) : rn(popUI, -1);
+ popUI = popUI > 1e4 ? si(popUI) : rn(popUI, -1);
$(this).children().filter(".burgPopulation").val(popUI);
});
states[state].urbanPopulation = rn(states[state].urbanPopulation * change, 2);
updateCountryPopulationUI(state);
});
- $(".icon-trash-empty").on("click", function() {
+ $("#burgsBody .icon-trash-empty").on("click", function() {
alertMessage.innerHTML = `Are you sure you want to remove the burg?`;
var b = +(this.parentNode.id).slice(5);
- $(function() {$("#alert").dialog({resizable: false, title: "Remove burg",
+ $("#alert").dialog({resizable: false, title: "Remove burg",
buttons: {
- "Remove": function() {
+ Remove: function() {
$(this).dialog("close");
var state = +$("#burgsEditor").attr("data-state");
$("#burgs"+b).remove();
@@ -5411,7 +6123,7 @@ function fantasyMap() {
cells[cell].manor = undefined;
states[state].burgs = states[state].burgs - 1;
burgsFooterBurgs.innerHTML = states[state].burgs;
- countriesFooterBurgs.innerHTML = +countriesFooterBurgs.innerHTML - 1;
+ countriesFooterBurgs.innerHTML = +countriesFooterBurgs.innerHTML - 1;
states[state].urbanPopulation = states[state].urbanPopulation - manors[b].population;
var avPop = states[state].urbanPopulation / states[state].burgs * urbanization.value * populationRate.value * 1000;
burgsFooterPopulation.value = rn(avPop, -1);
@@ -5419,14 +6131,14 @@ function fantasyMap() {
$("#state"+state+" > .stateBurgs").text(states[state].burgs);
}
labels.select("#manorLabel"+b).remove();
- icons.select("#manorIcon"+b).remove();
+ icons.select("#manorIcon"+b).remove();
},
Cancel: function() {$(this).dialog("close");}
- }})
+ }
});
});
}
-
+
// onhover style functions
function focusStates() {
var s = +(this.parentNode.id).slice(5);
@@ -5437,8 +6149,8 @@ function fantasyMap() {
function focusCapital() {
var s = +(this.parentNode.id).slice(5);
var capital = states[s].capital;
- var l = labels.select("#manorLabel"+capital);
- l.classed("drag", true);
+ var l = labels.select("#manorLabel"+capital);
+ l.classed("drag", true);
}
function focusBurgs() {
@@ -5448,8 +6160,8 @@ function fantasyMap() {
labels.select("#manorLabel"+m.i).classed("drag", true);
burgs.select("#manorIcon"+m.i).classed("drag", true);
});
- }
-
+ }
+
function focusBurg() {
var b = +(this.id).slice(5);
var l = labels.select("#manorLabel"+b);
@@ -5458,16 +6170,17 @@ function fantasyMap() {
function unfocus() {$(".drag").removeClass("drag");}
- // save dialog position if dialog window is dragged
- $(".dialog").on("dialogdragstop", function(event, ui) {
- localStorage.setItem(this.id, [ui.offset.left, ui.offset.top]);
+ // save dialog position if "stable" dialog window is dragged
+ $(".stable").on("dialogdragstop", function(event, ui) {
+ sessionStorage.setItem(this.id, [ui.offset.left, ui.offset.top]);
});
-
- // restore saved dialog position on dialog window open
- $(".dialog").on("dialogopen", function(event, ui) {
- var pos = localStorage.getItem(this.id);
+
+ // restore saved dialog position on "stable" dialog window open
+ $(".stable").on("dialogopen", function(event, ui) {
+ var pos = sessionStorage.getItem(this.id);
if (!pos) {return;}
pos = pos.split(",");
+ if (pos[0] > $(window).width() - 100 || pos[1] > $(window).width() - 40) {return;} // prevent showing out of screen
var at = `left+${pos[0]} top+${pos[1]}`;
$(this).dialog("option", "position", {my: "left top", at: at, of: "svg"});
});
@@ -5492,7 +6205,7 @@ function fantasyMap() {
$("#state"+s).children().filter(".statePopulation").val(si(population));
}
}
-
+
// update dialogs if measurements are changed
function updateCountryEditors() {
if ($("#countriesEditor").is(":visible")) {editCountries();}
@@ -5505,21 +6218,59 @@ function fantasyMap() {
// remove drawn regions and draw all regions again
function redrawRegions() {
regions.selectAll("*").remove();
- stateBorders.selectAll("*").remove();
- neutralBorders.selectAll("*").remove();
+ borders.selectAll("path").remove();
+ countries.selectAll("text").remove();
+ drawRegions();
+ }
+
+ // restore keeped region data on edit heightmap completion
+ function restoreRegions() {
+ borders.selectAll("path").remove();
countries.selectAll("text").remove();
- drawRegions();
+ manors.map(function(m) {
+ const cell = diagram.find(m.x, m.y).index;
+ if (cells[cell].height < 0.2) {
+ // remove manor if it ocean
+ m.region = "removed";
+ m.cell = cell;
+ labels.select("#manorLabel"+m.i).remove();
+ icons.select("#manorIcon"+m.i).remove();
+ } else {
+ m.cell = cell;
+ cells[cell].manor = m.i;
+ }
+ });
+ cells.map(function(c) {
+ if (c.height < 0.2) {
+ // no longer a land cell
+ delete c.region;
+ delete c.culture;
+ return;
+ }
+ if (c.region === undefined) {
+ c.region = "neutral";
+ if (states[states.length - 1].capital !== "neutral") {
+ states.push({i: states.length, color: "neutral", capital: "neutral", name: "Neutrals"});
+ }
+ }
+ if (c.culture === undefined) {
+ const closest = cultureTree.find(c.data[0], c.data[1]);
+ c.culture = cultureTree.data().indexOf(closest);
+ }
+ });
+ states.map(function(s) {recalculateStateData(s.i);})
+ drawRegions();
}
-
+
function regenerateCountries() {
regions.selectAll("*").remove();
- land.map(function(l) {l.region = undefined;});
neutral = +countriesNeutral.value;
manors.map(function(m) {
- var state = "neutral", closest = neutral;
+ if (m.region === "removed") {return;}
+ var state = "neutral", closest = neutral;
var x = m.x, y = m.y;
states.map(function(s) {
- if (s.color === "neutral") {return;}
+ if (s.capital === "neutral" || s.capital === "select") {return;}
var c = manors[s.capital];
var dist = Math.hypot(c.x - x, c.y - y) / s.power;
if (cells[m.cell].fn !== cells[c.cell].fn) {dist *= 3;}
@@ -5567,7 +6318,7 @@ function fantasyMap() {
states.push({i: states.length, color: "neutral", capital: "neutral", name: "Neutrals"});
recalculateStateData(states.length - 1);
editCountries();
- }
+ }
}
// enter state edit mode
@@ -5598,7 +6349,7 @@ function fantasyMap() {
if (an === "bottom") {return 1;}
var bn = b.getAttribute("data-" + sortby);
if (bn === "bottom") {return -1;}
- if (type === "number") {an = +an; bn = +bn;}
+ if (type === "number") {an = +an; bn = +bn;}
if (an > bn) {return 1;}
if (an < bn) {return -1;}
return 0;
@@ -5620,50 +6371,138 @@ function fantasyMap() {
}
lines.detach().appendTo(list);
});
-
- // just apply map size that was already set
+
+ // load text file with new burg names
+ $("#burgsListToLoad").change(function() {
+ var fileToLoad = this.files[0];
+ this.value = "";
+ var fileReader = new FileReader();
+ fileReader.onload = function(fileLoadedEvent) {
+ var dataLoaded = fileLoadedEvent.target.result;
+ var data = dataLoaded.split("\r\n");
+ if (data.length === 0) {return;}
+ let change = [];
+ let message = `Burgs will be renamed as below. Please confirm`;
+ message += `| Id | Current name | New Name |
|---|
`;
+ for (var i=0; i < data.length && i < manors.length; i++) {
+ const v = data[i];
+ if (v === "" || v === undefined) {continue;}
+ if (v === manors[i].name) {continue;}
+ change.push({i, name: v});
+ message += `| ${i} | ${manors[i].name} | ${v} |
`;
+ }
+ message += `