mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-17 09:41:24 +01:00
1.11.1
This commit is contained in:
Azgaar
parent
0e308079aa
commit
f7a3eafe1f
14 changed files with 212 additions and 445 deletions
|
|
@ -1,105 +1,61 @@
|
|||
"use strict";
|
||||
|
||||
// Define variables - these make it easy to work with from the console
|
||||
var _3dpreviewScale = 50;
|
||||
var _3dpreviewCamera = null;
|
||||
var _3dpreviewScene = null;
|
||||
var _3dpreviewRenderer = null;
|
||||
var _3danimationFrame = null;
|
||||
var _3dmaterial = null;
|
||||
var _3dtexture = null;
|
||||
var _3dmesh = null;
|
||||
let _3dpreviewScale = 70;
|
||||
let _3dpreviewCamera = null;
|
||||
let _3dpreviewScene = null;
|
||||
let _3dpreviewRenderer = null;
|
||||
let _3danimationFrame = null;
|
||||
let _3dmaterial = null;
|
||||
let _3dmesh = null;
|
||||
|
||||
// Create a mesh from pixel data
|
||||
function addMesh(width, height, segmentsX, segmentsY) {
|
||||
_3dgeometry = new THREE.PlaneGeometry(width, height, segmentsX-1, segmentsY-1);
|
||||
|
||||
_3dmaterial = new THREE.MeshBasicMaterial({
|
||||
wireframe: false,
|
||||
});
|
||||
|
||||
_3dtexture = new THREE.TextureLoader().load( getPreviewTexture(width, height) );
|
||||
// _3dtexture.minFilter = THREE.LinearFilter;
|
||||
_3dmaterial.map = _3dtexture;
|
||||
|
||||
var terrain = getHeightmap();
|
||||
|
||||
var l = _3dgeometry.vertices.length;
|
||||
|
||||
for (var i = 0; i < l; i++) // For each vertex
|
||||
{
|
||||
var terrainValue = terrain[i] / 255;
|
||||
_3dgeometry.vertices[i].z = _3dgeometry.vertices[i].z + terrainValue * _3dpreviewScale;
|
||||
}
|
||||
|
||||
async function addMesh(width, height, segmentsX, segmentsY) {
|
||||
const _3dgeometry = new THREE.PlaneGeometry(width, height, segmentsX-1, segmentsY-1);
|
||||
const _3dmaterial = new THREE.MeshBasicMaterial({wireframe: false});
|
||||
const url = await getMapURL("mesh");
|
||||
_3dmaterial.map = new THREE.TextureLoader().load(url);
|
||||
_3dgeometry.vertices.forEach((v, i) => v.z = getMeshHeight(i));
|
||||
_3dmesh = new THREE.Mesh(_3dgeometry, _3dmaterial);
|
||||
_3dmesh.rotation.x = -Math.PI / 2;
|
||||
_3dpreviewScene.add(_3dmesh);
|
||||
}
|
||||
|
||||
function getMeshHeight(i) {
|
||||
const h = grid.cells.h[i];
|
||||
return h < 20 ? 0 : (h - 18) / 82 * _3dpreviewScale;
|
||||
}
|
||||
|
||||
// Function to render scene and camera
|
||||
function render() {
|
||||
_3danimationFrame = requestAnimationFrame(render);
|
||||
_3dpreviewRenderer.render(_3dpreviewScene, _3dpreviewCamera);
|
||||
}
|
||||
|
||||
function check3dCamera(canvas) {
|
||||
// workaround to fix camera problems
|
||||
var resetCamera = 0;
|
||||
if (!_3dpreviewCamera) {
|
||||
resetCamera = 1;
|
||||
} else if (isNaN(_3dpreviewCamera.position.x)) {
|
||||
_3dpreviewCamera = null;
|
||||
resetCamera = 1;
|
||||
}
|
||||
|
||||
if (resetCamera) {
|
||||
_3dpreviewCamera = new THREE.PerspectiveCamera(70, canvas.width / canvas.height, 0.1, 10000); //Field-of-View, Aspect Ratio, Near Render, Far Render
|
||||
_3dpreviewCamera.position.z = 800;
|
||||
_3dpreviewCamera.position.y = 1000;
|
||||
}
|
||||
}
|
||||
|
||||
function removeMesh() {
|
||||
_3dpreviewScene.remove(_3dmesh);
|
||||
_3dmesh.geometry.dispose();
|
||||
_3dmesh.material.dispose();
|
||||
_3dmesh = undefined;
|
||||
_3dgeometry = undefined;
|
||||
_3dmaterial = undefined;
|
||||
_3dtexture = undefined;
|
||||
}
|
||||
|
||||
function start3dpreview(canvas) {
|
||||
_3dpreviewScene = new THREE.Scene();
|
||||
|
||||
check3dCamera(canvas);
|
||||
|
||||
_3dpreviewRenderer = new THREE.WebGLRenderer({ canvas: canvas });
|
||||
_3dpreviewControls = new THREE.OrbitControls( _3dpreviewCamera, _3dpreviewRenderer.domElement );
|
||||
_3dpreviewCamera = new THREE.PerspectiveCamera(70, canvas.width / canvas.height, 0.1, 100000);
|
||||
_3dpreviewCamera.position.x = 0;
|
||||
_3dpreviewCamera.position.z = 350;
|
||||
_3dpreviewCamera.position.y = 285;
|
||||
_3dpreviewRenderer = new THREE.WebGLRenderer({canvas});
|
||||
new THREE.OrbitControls(_3dpreviewCamera, _3dpreviewRenderer.domElement);
|
||||
_3dpreviewRenderer.setSize(canvas.width, canvas.height);
|
||||
|
||||
addMesh(graphWidth, graphHeight, grid.cellsX, grid.cellsY);
|
||||
|
||||
document.body.appendChild(_3dpreviewRenderer.domElement);
|
||||
|
||||
_3danimationFrame = requestAnimationFrame(render);
|
||||
}
|
||||
|
||||
function stop3dpreview() {
|
||||
if (_3danimationFrame) {
|
||||
cancelAnimationFrame(_3danimationFrame);
|
||||
_3danimationFrame = null;
|
||||
}
|
||||
removeMesh();
|
||||
|
||||
_3dpreviewScene = null;
|
||||
_3dpreviewRenderer = null;
|
||||
_3dpreviewControls = null;
|
||||
}
|
||||
|
||||
function update3dpreview(canvas) {
|
||||
removeMesh();
|
||||
check3dCamera(canvas);
|
||||
|
||||
_3dpreviewScene.remove(_3dmesh);
|
||||
_3dpreviewRenderer.setSize(canvas.width, canvas.height);
|
||||
addMesh(graphWidth, graphHeight, grid.cellsX, grid.cellsY);
|
||||
}
|
||||
|
||||
function stop3dpreview() {
|
||||
cancelAnimationFrame(_3danimationFrame);
|
||||
_3danimationFrame = null;
|
||||
_3dmesh = undefined;
|
||||
_3dmaterial = undefined;
|
||||
_3dpreviewScene = null;
|
||||
_3dpreviewRenderer = null;
|
||||
}
|
||||
|
|
@ -1,150 +0,0 @@
|
|||
var _3dheightMapExponent = null;
|
||||
var _3dmaxHeight = null;
|
||||
var _3dcolorLookup = null;
|
||||
|
||||
function _2dto1d(source) {
|
||||
var r = [];
|
||||
|
||||
var w = source[0].length;
|
||||
var h = source.length;
|
||||
|
||||
var i=0;
|
||||
for (var y=0; y < h; y++) {
|
||||
for (var x=0; x < w; x++) {
|
||||
r[i] = source[y][x];
|
||||
i++;
|
||||
}
|
||||
}
|
||||
|
||||
return r;
|
||||
}
|
||||
|
||||
function _1dto2d(source, w, h) {
|
||||
|
||||
var r = [];
|
||||
|
||||
var i=0;
|
||||
for (var y=0; y < h; y++) {
|
||||
r[y] = [];
|
||||
for (var x=0; x < w; x++) {
|
||||
r[y][x] = source[i];
|
||||
i++;
|
||||
}
|
||||
}
|
||||
|
||||
return r;
|
||||
}
|
||||
|
||||
function getSVGImage(type, width, height) {
|
||||
// clone svg
|
||||
const cloneEl = document.getElementById("map").cloneNode(true);
|
||||
cloneEl.id = "fantasyMap";
|
||||
document.getElementsByTagName("body")[0].appendChild(cloneEl);
|
||||
const clone = d3.select("#fantasyMap");
|
||||
|
||||
if (type === "svg") {
|
||||
clone.select("#viewbox").attr("transform", null); // reset transform to show whole map
|
||||
}
|
||||
|
||||
clone.attr("width", width).attr("height", height);
|
||||
|
||||
// remove unused elements
|
||||
if (!clone.select("#terrain").selectAll("use").size()) clone.select("#defs-relief").remove();
|
||||
if (!clone.select("#prec").selectAll("circle").size()) clone.select("#prec").remove();
|
||||
if (!clone.select("#scaleBar").selectAll("use").size()) clone.select("#scaleBar").remove();
|
||||
|
||||
// default to water - on Firefox, ocean pattern appears as alternating blocks of ocean and water pattern
|
||||
const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
|
||||
if (isFirefox) {
|
||||
if (!clone.select("#oceanPattern").selectAll("use").size()) clone.select("#oceanPattern").remove();
|
||||
}
|
||||
|
||||
const removeEmptyGroups = function() {
|
||||
let empty = 0;
|
||||
clone.selectAll("g").each(function() {
|
||||
if (!this.hasChildNodes() || this.style.display === "none") {empty++; this.remove();}
|
||||
if (this.hasAttribute("display") && this.style.display === "inline") this.removeAttribute("display");
|
||||
});
|
||||
return empty;
|
||||
}
|
||||
while(removeEmptyGroups()) {removeEmptyGroups();}
|
||||
|
||||
// for each g element get inline style
|
||||
const emptyG = clone.append("g").node();
|
||||
const defaultStyles = window.getComputedStyle(emptyG);
|
||||
clone.selectAll("g, #ruler > g > *, #scaleBar > text").each(function(d) {
|
||||
const compStyle = window.getComputedStyle(this);
|
||||
let style = "";
|
||||
for (let i=0; i < compStyle.length; i++) {
|
||||
const key = compStyle[i];
|
||||
const value = compStyle.getPropertyValue(key);
|
||||
// Firefox mask hack
|
||||
if (key === "mask-image" && value !== defaultStyles.getPropertyValue(key)) {
|
||||
style += "mask-image: url('#land');";
|
||||
continue;
|
||||
}
|
||||
if (key === "cursor") continue; // cursor should be default
|
||||
if (this.hasAttribute(key)) continue; // don't add style if there is the same attribute
|
||||
if (value === defaultStyles.getPropertyValue(key)) continue;
|
||||
style += key + ':' + value + ';';
|
||||
}
|
||||
if (style != "") this.setAttribute('style', style);
|
||||
});
|
||||
emptyG.remove();
|
||||
|
||||
// load fonts as dataURI so they will be available in downloaded svg/png
|
||||
const svg_xml = (new XMLSerializer()).serializeToString(clone.node());
|
||||
clone.remove();
|
||||
const blob = new Blob([svg_xml], {type: 'image/svg+xml;charset=utf-8'});
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
return url;
|
||||
}
|
||||
|
||||
function getHeightmap() {
|
||||
var mh = 0;
|
||||
grid.cells.h.forEach((height, i) => {
|
||||
h = grid.cells.h[i];
|
||||
|
||||
if (h > mh) mh = h;
|
||||
});
|
||||
if (mh > 82) { mh = 82; }
|
||||
|
||||
_3dheightMapExponent = heightExponentInput.value;
|
||||
// _3dmaxHeight = Math.pow(mh, _3dheightMapExponent);
|
||||
_3dmaxHeight = Math.pow(82, _3dheightMapExponent);
|
||||
|
||||
var heightMap = [];
|
||||
for (var y=0; y < grid.cellsY; y++) {
|
||||
heightMap[y] = [];
|
||||
}
|
||||
|
||||
var y = 0, x = 0;
|
||||
|
||||
// convert height from map heights to a linear height
|
||||
grid.cells.h.forEach((height, i) => {
|
||||
h = grid.cells.h[i];
|
||||
|
||||
// add heightmap exponent
|
||||
if (h >= 20) height = Math.pow(h - 18, _3dheightMapExponent);
|
||||
// else if (h > 0) height = (h - 20) / h * 50;
|
||||
else height = 0;
|
||||
|
||||
// get heightmap as a percentage
|
||||
let v = (height / _3dmaxHeight);
|
||||
|
||||
// convert to 0-255
|
||||
v = (v * 255);
|
||||
|
||||
heightMap[y][x] = Math.floor(v);
|
||||
x++;
|
||||
if (x >= grid.cellsX) { x = 0; y++ }
|
||||
});
|
||||
|
||||
var hm = _2dto1d(heightMap);
|
||||
|
||||
return hm;
|
||||
}
|
||||
|
||||
function getPreviewTexture(width, height) {
|
||||
return getSVGImage("svg", width, height);
|
||||
}
|
||||
|
|
@ -70,20 +70,6 @@ function removeCircle() {
|
|||
if (document.getElementById("brushCircle")) document.getElementById("brushCircle").remove();
|
||||
}
|
||||
|
||||
function hideCircle() {
|
||||
let circle = document.getElementById("brushCircle");
|
||||
if (circle) {
|
||||
circle.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
function showCircle() {
|
||||
let circle = document.getElementById("brushCircle");
|
||||
if (circle) {
|
||||
circle.style.display = "";
|
||||
}
|
||||
}
|
||||
|
||||
// get browser-defined fit-content
|
||||
function fitContent() {
|
||||
return !window.chrome ? "-moz-max-content" : "fit-content";
|
||||
|
|
@ -542,7 +528,7 @@ function changePickerSpace() {
|
|||
function unfog() {
|
||||
defs.select("#fog").selectAll("path").remove();
|
||||
fogging.selectAll("path").remove();
|
||||
fogging.attr("display", "none");
|
||||
fogging.style("display", "none");
|
||||
}
|
||||
|
||||
function getFileName(dataType) {
|
||||
|
|
|
|||
|
|
@ -285,6 +285,8 @@ document.addEventListener("keyup", event => {
|
|||
event.stopPropagation();
|
||||
|
||||
const key = event.keyCode, ctrl = event.ctrlKey, shift = event.shiftKey, meta = event.metaKey;
|
||||
const tdMode = document.getElementById("_3dpreview");
|
||||
|
||||
if (key === 112) showInfo(); // "F1" to show info
|
||||
else if (key === 113) regeneratePrompt(); // "F2" for new map
|
||||
else if (key === 113) regeneratePrompt(); // "F2" for a new map
|
||||
|
|
@ -294,8 +296,8 @@ document.addEventListener("keyup", event => {
|
|||
else if (key === 27) {closeDialogs(); hideOptions();} // Escape to close all dialogs
|
||||
else if (key === 46) removeElementOnKey(); // "Delete" to remove the selected element
|
||||
|
||||
else if (ctrl && key === 80) saveAsImage("png"); // Ctrl + "P" to save as PNG
|
||||
else if (ctrl && key === 83) saveAsImage("svg"); // Ctrl + "S" to save as SVG
|
||||
else if (ctrl && key === 80) savePNG(); // Ctrl + "P" to save as PNG
|
||||
else if (ctrl && key === 83) saveSVG(); // Ctrl + "S" to save as SVG
|
||||
else if (ctrl && key === 77) saveMap(); // Ctrl + "M" to save MAP file
|
||||
else if (ctrl && key === 71) saveGeoJSON(); // Ctrl + "G" to save as GeoJSON
|
||||
else if (ctrl && key === 85) mapToLoad.click(); // Ctrl + "U" to load MAP from URL
|
||||
|
|
@ -355,10 +357,10 @@ document.addEventListener("keyup", event => {
|
|||
else if (key === 187) toggleRulers(); // Equal (=) to toggle Rulers
|
||||
else if (key === 189) toggleScaleBar(); // Minus (-) to toggle Scale bar
|
||||
|
||||
else if (key === 37) zoom.translateBy(svg, 10, 0); // Left to scroll map left
|
||||
else if (key === 39) zoom.translateBy(svg, -10, 0); // Right to scroll map right
|
||||
else if (key === 38) zoom.translateBy(svg, 0, 10); // Up to scroll map up
|
||||
else if (key === 40) zoom.translateBy(svg, 0, -10); // Up to scroll map up
|
||||
else if (key === 37 && !tdMode) zoom.translateBy(svg, 10, 0); // Left to scroll map left
|
||||
else if (key === 39 && !tdMode) zoom.translateBy(svg, -10, 0); // Right to scroll map right
|
||||
else if (key === 38 && !tdMode) zoom.translateBy(svg, 0, 10); // Up to scroll map up
|
||||
else if (key === 40 && !tdMode) zoom.translateBy(svg, 0, -10); // Up to scroll map up
|
||||
else if (key === 107 || key === 109) pressNumpadSign(key); // Numpad Plus/Minus to zoom map or change brush size
|
||||
else if (key === 48 || key === 96) resetZoom(1000); // 0 to reset zoom
|
||||
else if (key === 49 || key === 97) zoom.scaleTo(svg, 1); // 1 to zoom to 1
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ function editHeightmap() {
|
|||
undraw();
|
||||
changeOnlyLand.checked = false;
|
||||
} else if (type === "keep") {
|
||||
viewbox.selectAll("#landmass, #lakes").attr("display", "none");
|
||||
viewbox.selectAll("#landmass, #lakes").style("display", "none");
|
||||
changeOnlyLand.checked = true;
|
||||
} else if (type === "risk") {
|
||||
defs.selectAll("#land, #water").selectAll("path").remove();
|
||||
|
|
@ -95,19 +95,19 @@ function editHeightmap() {
|
|||
moveCircle(p[0], p[1], brushRadius.valueAsNumber, "#333");
|
||||
}
|
||||
|
||||
// get user-friendly (real-world) height value from map data
|
||||
function getHeight(h) {
|
||||
const unit = heightUnit.value;
|
||||
let unitRatio = 3.281; // default calculations are in feet
|
||||
if (unit === "m") unitRatio = 1; // if meter
|
||||
else if (unit === "f") unitRatio = 0.5468; // if fathom
|
||||
// get user-friendly (real-world) height value from map data
|
||||
function getHeight(h) {
|
||||
const unit = heightUnit.value;
|
||||
let unitRatio = 3.281; // default calculations are in feet
|
||||
if (unit === "m") unitRatio = 1; // if meter
|
||||
else if (unit === "f") unitRatio = 0.5468; // if fathom
|
||||
|
||||
let height = -990;
|
||||
if (h >= 20) height = Math.pow(h - 18, +heightExponentInput.value);
|
||||
else if (h < 20 && h > 0) height = (h - 20) / h * 50;
|
||||
let height = -990;
|
||||
if (h >= 20) height = Math.pow(h - 18, +heightExponentInput.value);
|
||||
else if (h < 20 && h > 0) height = (h - 20) / h * 50;
|
||||
|
||||
return rn(height * unitRatio) + " " + unit;
|
||||
}
|
||||
return rn(height * unitRatio) + " " + unit;
|
||||
}
|
||||
|
||||
// Exit customization mode
|
||||
function finalizeHeightmap() {
|
||||
|
|
@ -127,7 +127,7 @@ function getHeight(h) {
|
|||
|
||||
restartHistory();
|
||||
if (document.getElementById("preview")) document.getElementById("preview").remove();
|
||||
if (document.getElementById("_3dpreview")) { toggleHeightmap3dView(); };
|
||||
if (document.getElementById("_3dpreview")) toggleHeightmap3dView();
|
||||
|
||||
|
||||
const mode = heightmapEditMode.innerHTML;
|
||||
|
|
@ -189,7 +189,7 @@ function getHeight(h) {
|
|||
}
|
||||
|
||||
function restoreKeptData() {
|
||||
viewbox.selectAll("#landmass, #lakes").attr("display", null);
|
||||
viewbox.selectAll("#landmass, #lakes").style("display", null);
|
||||
for (const i of pack.cells.i) {
|
||||
pack.cells.h[i] = grid.cells.h[pack.cells.g[i]];
|
||||
}
|
||||
|
|
@ -375,7 +375,6 @@ function getHeight(h) {
|
|||
|
||||
mockHeightmap();
|
||||
updateHistory();
|
||||
draw3dPreview();
|
||||
}
|
||||
|
||||
// draw or update heightmap
|
||||
|
|
@ -413,10 +412,11 @@ function getHeight(h) {
|
|||
|
||||
undo.disabled = templateUndo.disabled = edits.n <= 1;
|
||||
redo.disabled = templateRedo.disabled = true;
|
||||
if (!noStat) updateStatistics();
|
||||
|
||||
if (document.getElementById("preview")) drawHeightmapPreview(); // update heightmap preview if opened
|
||||
if (document.getElementById("_3dpreview")) draw3dPreview(); // update 3d heightmap preview if opened
|
||||
if (!noStat) {
|
||||
updateStatistics();
|
||||
if (document.getElementById("preview")) drawHeightmapPreview(); // update heightmap preview if opened
|
||||
if (document.getElementById("_3dpreview")) update3dpreview(_3dpreview); // update 3d heightmap preview if opened
|
||||
}
|
||||
}
|
||||
|
||||
// restoreHistory
|
||||
|
|
@ -430,7 +430,7 @@ function getHeight(h) {
|
|||
updateStatistics();
|
||||
|
||||
if (document.getElementById("preview")) drawHeightmapPreview(); // update heightmap preview if opened
|
||||
if (document.getElementById("_3dpreview")) draw3dPreview(); // update 3d heightmap preview if opened
|
||||
if (document.getElementById("_3dpreview")) update3dpreview(_3dpreview); // update 3d heightmap preview if opened
|
||||
}
|
||||
|
||||
// restart edits from 1st step
|
||||
|
|
@ -870,7 +870,8 @@ function getHeight(h) {
|
|||
|
||||
updateStatistics();
|
||||
mockHeightmap();
|
||||
update3dpreview(document.getElementById("_3dpreview"));
|
||||
if (document.getElementById("preview")) drawHeightmapPreview(); // update heightmap preview if opened
|
||||
if (document.getElementById("_3dpreview")) update3dpreview(_3dpreview); // update 3d heightmap preview if opened
|
||||
}
|
||||
|
||||
function downloadTemplate() {
|
||||
|
|
@ -1135,7 +1136,6 @@ function getHeight(h) {
|
|||
heights.selectAll("polygon").remove();
|
||||
updateHeightmap();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function toggleHeightmapPreview() {
|
||||
|
|
@ -1183,27 +1183,6 @@ function getHeight(h) {
|
|||
canvas.height = svgHeight;
|
||||
document.body.insertBefore(canvas, optionsContainer);
|
||||
ctx.drawImage(img, 0, 0, svgWidth, svgHeight);
|
||||
|
||||
// const simplex = new SimplexNoise(); // SimplexNoise by Jonas Wagner
|
||||
// const noise = (nx, ny) => simplex.noise2D(nx, ny) / 2 + .5;
|
||||
|
||||
// const imageData = ctx.getImageData(0, 0, svgWidth, svgHeight);
|
||||
// for (let i=0; i < imageData.data.length; i+=4) {
|
||||
// const v = imageData.data[i];
|
||||
// if (v < 51) {
|
||||
// // water
|
||||
// // imageData.data[i] = imageData.data[i+1] = imageData.data[i+2] = 46;
|
||||
// continue;
|
||||
// }
|
||||
|
||||
// const x = i / 4 % svgWidth, y = Math.floor(i / 4 / svgWidth);
|
||||
// const nx = x / svgWidth - .5, ny = y / svgHeight - .5;
|
||||
// const n = noise(4 * nx, 4 * ny) / 4 + noise(16 * nx, 16 * ny) / 16;
|
||||
// const nv = Math.max(Math.min((v + 255 * n) / 2, 255), 51);
|
||||
// imageData.data[i] = imageData.data[i+1] = imageData.data[i+2] = nv;
|
||||
// }
|
||||
// ctx.putImageData(imageData, 0, 0);
|
||||
|
||||
const imgBig = canvas.toDataURL("image/png");
|
||||
const link = document.createElement("a");
|
||||
link.download = getFileName("Heightmap") + ".png";
|
||||
|
|
@ -1214,60 +1193,36 @@ function getHeight(h) {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
function draw3dPreview() {
|
||||
var _3dpreview = document.getElementById("_3dpreview");
|
||||
hideCircle();
|
||||
update3dpreview(_3dpreview);
|
||||
showCircle();
|
||||
}
|
||||
|
||||
function close3dPreview() {
|
||||
if (document.getElementById("_3dpreview")) {
|
||||
stop3dpreview();
|
||||
|
||||
document.getElementById("_3dpreview").remove();
|
||||
}
|
||||
}
|
||||
|
||||
// 3D previewer
|
||||
function toggleHeightmap3dView() {
|
||||
if (document.getElementById("_3dpreview")) {
|
||||
close3dPreview();
|
||||
$("#_3dpreviewEditor").dialog("close");
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
var _3dpreview = document.createElement("canvas");
|
||||
_3dpreview.id = "_3dpreview";
|
||||
_3dpreview.top = 0;
|
||||
_3dpreview.left = 0;
|
||||
_3dpreview.width = 800;
|
||||
_3dpreview.height = 800 / (graphWidth / graphHeight);
|
||||
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.id = "_3dpreview";
|
||||
canvas.style.display = "block";
|
||||
canvas.width = parseFloat(_3dpreviewEditor.style.width) || graphWidth / 3;
|
||||
canvas.height = canvas.width / (graphWidth / graphHeight);
|
||||
document.getElementById("_3dpreviewEditor").appendChild(canvas);
|
||||
start3dpreview(canvas);
|
||||
|
||||
$("#_3dpreviewEditor").dialog({
|
||||
title: "3D Preview", width: _3dpreview.width, height: _3dpreview.height, resizable: true
|
||||
}).on('dialogclose', close3dPreview);
|
||||
|
||||
var titleBar = document.getElementById("_3dpreviewEditor").previousSibling;
|
||||
$("#_3dpreviewEditor").dialog( "option", "height", _3dpreview.height + titleBar.clientHeight + 3);
|
||||
|
||||
$("#_3dpreviewEditor").on("dialogresizestop", function(event, ui) {
|
||||
var titleBar = document.getElementById("_3dpreviewEditor").previousSibling;
|
||||
|
||||
var _3dpreview = document.getElementById("_3dpreview");
|
||||
_3dpreview.width = ui.size.width;
|
||||
_3dpreview.height = (ui.size.height - (titleBar.clientHeight + 3));
|
||||
hideCircle();
|
||||
update3dpreview(_3dpreview);
|
||||
showCircle();
|
||||
title: "3D Preview", resizable: true,
|
||||
position: {my: "left bottom", at: "left+10 bottom-10", of: "svg"},
|
||||
resizeStop: resize3dpreview, close: close3dPreview
|
||||
});
|
||||
|
||||
hideCircle();
|
||||
start3dpreview(_3dpreview);
|
||||
showCircle();
|
||||
function resize3dpreview() {
|
||||
canvas.width = parseFloat(_3dpreviewEditor.style.width);
|
||||
canvas.height = parseFloat(_3dpreviewEditor.style.height) - 2;
|
||||
update3dpreview(canvas);
|
||||
}
|
||||
|
||||
var _3dpreviewContainer = document.getElementById("_3dpreviewContainer");
|
||||
_3dpreviewContainer.appendChild(_3dpreview);
|
||||
function close3dPreview() {
|
||||
stop3dpreview();
|
||||
canvas.remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ function restoreLayers() {
|
|||
if (layerIsOn("toggleCells")) drawCells();
|
||||
if (layerIsOn("toggleGrid")) drawGrid();
|
||||
if (layerIsOn("toggleCoordinates")) drawCoordinates();
|
||||
if (layerIsOn("toggleCompass")) compass.attr("display", "block");
|
||||
if (layerIsOn("toggleCompass")) compass.style("display", "block");
|
||||
if (layerIsOn("toggleTemp")) drawTemp();
|
||||
if (layerIsOn("togglePrec")) drawPrec();
|
||||
if (layerIsOn("togglePopulation")) drawPopulation();
|
||||
|
|
@ -19,7 +19,7 @@ function restoreLayers() {
|
|||
|
||||
// states are getting rendered each time, if it's not required than layers should be hidden
|
||||
if (!layerIsOn("toggleBorders")) $('#borders').fadeOut();
|
||||
if (!layerIsOn("toggleStates")) regions.attr("display", "none").selectAll("path").remove();
|
||||
if (!layerIsOn("toggleStates")) regions.style("display", "none").selectAll("path").remove();
|
||||
}
|
||||
|
||||
restoreLayers(); // run on-load
|
||||
|
|
@ -383,14 +383,14 @@ function togglePrec(event) {
|
|||
const hide = d3.transition().duration(1000).ease(d3.easeSinIn);
|
||||
prec.selectAll("text").attr("opacity", 1).transition(hide).attr("opacity", 0);
|
||||
prec.selectAll("circle").transition(hide).attr("r", 0).remove();
|
||||
prec.transition().delay(1000).attr("display", "none");
|
||||
prec.transition().delay(1000).style("display", "none");
|
||||
}
|
||||
}
|
||||
|
||||
function drawPrec() {
|
||||
prec.selectAll("circle").remove();
|
||||
const cells = grid.cells, p = grid.points;
|
||||
prec.attr("display", "block");
|
||||
prec.style("display", "block");
|
||||
const show = d3.transition().duration(800).ease(d3.easeSinIn);
|
||||
prec.selectAll("text").attr("opacity", 0).transition(show).attr("opacity", 1);
|
||||
|
||||
|
|
@ -583,12 +583,12 @@ function drawReligions() {
|
|||
function toggleStates(event) {
|
||||
if (!layerIsOn("toggleStates")) {
|
||||
turnButtonOn("toggleStates");
|
||||
regions.attr("display", null);
|
||||
regions.style("display", null);
|
||||
drawStates();
|
||||
if (event && event.ctrlKey) editStyle("regions");
|
||||
} else {
|
||||
if (event && event.ctrlKey) {editStyle("regions"); return;}
|
||||
regions.attr("display", "none").selectAll("path").remove();
|
||||
regions.style("display", "none").selectAll("path").remove();
|
||||
turnButtonOff("toggleStates");
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -346,8 +346,8 @@ document.getElementById("sticked").addEventListener("click", function(event) {
|
|||
else if (id === "zoomReset") resetZoom(1000);
|
||||
else if (id === "quickSave") quickSave();
|
||||
else if (id === "saveMap") saveMap();
|
||||
else if (id === "saveSVG") saveAsImage("svg");
|
||||
else if (id === "savePNG") saveAsImage("png");
|
||||
else if (id === "saveSVG") saveSVG();
|
||||
else if (id === "savePNG") savePNG();
|
||||
else if (id === "saveGeo") saveGeoJSON();
|
||||
else if (id === "saveDropbox") saveDropbox();
|
||||
if (id === "quickSave" || id === "saveMap" || id === "saveSVG" || id === "savePNG" || id === "saveGeo" || id === "saveDropbox") toggleSavePane();
|
||||
|
|
|
|||
|
|
@ -336,7 +336,7 @@ function editProvinces() {
|
|||
|
||||
if (inactive) {
|
||||
if (defs.select("#fog #focusProvince"+p).size()) return;
|
||||
fogging.attr("display", "block");
|
||||
fogging.style("display", "block");
|
||||
const path = provs.select("#province"+p).attr("d");
|
||||
defs.select("#fog").append("path").attr("d", path).attr("fill", "black").attr("id", "focusProvince"+p);
|
||||
fogging.append("path").attr("d", path).attr("id", "focusProvinceHalo"+p)
|
||||
|
|
@ -347,7 +347,7 @@ function editProvinces() {
|
|||
function unfocus(p) {
|
||||
defs.select("#focusProvince"+p).remove();
|
||||
fogging.select("#focusProvinceHalo"+p).remove();
|
||||
if (!defs.selectAll("#fog path").size()) fogging.attr("display", "none"); // all items are de-focused
|
||||
if (!defs.selectAll("#fog path").size()) fogging.style("display", "none"); // all items are de-focused
|
||||
}
|
||||
|
||||
function removeProvince(p) {
|
||||
|
|
|
|||
|
|
@ -393,7 +393,7 @@ function editStates() {
|
|||
|
||||
if (inactive) {
|
||||
if (defs.select("#fog #focusState"+state).size()) return;
|
||||
fogging.attr("display", "block");
|
||||
fogging.style("display", "block");
|
||||
const path = statesBody.select("#state"+state).attr("d");
|
||||
defs.select("#fog").append("path").attr("d", path).attr("fill", "black").attr("id", "focusState"+state);
|
||||
fogging.append("path").attr("d", path).attr("id", "focusStateHalo"+state)
|
||||
|
|
@ -404,7 +404,7 @@ function editStates() {
|
|||
function unfocus(s) {
|
||||
defs.select("#focusState"+s).remove();
|
||||
fogging.select("#focusStateHalo"+s).remove();
|
||||
if (!defs.selectAll("#fog path").size()) fogging.attr("display", "none"); // all items are de-focused
|
||||
if (!defs.selectAll("#fog path").size()) fogging.style("display", "none"); // all items are de-focused
|
||||
}
|
||||
|
||||
function stateRemove(state) {
|
||||
|
|
|
|||
|
|
@ -264,13 +264,13 @@ function editZones() {
|
|||
const data = dataCells.split(",").map(c => +c);
|
||||
const g = defs.select("#fog").append("g").attr("fill", "black").attr("stroke", "black").attr("id", "focus"+zone);
|
||||
g.selectAll("path").data(data).enter().append("path").attr("d", d => "M" + getPackPolygon(d) + "Z");
|
||||
fogging.attr("display", "block");
|
||||
fogging.style("display", "block");
|
||||
} else unfocus(zone);
|
||||
}
|
||||
|
||||
function unfocus(z) {
|
||||
defs.select("#focus"+z).remove();
|
||||
if (!defs.selectAll("#fog path").size()) fogging.attr("display", "none"); // all states are de-focused
|
||||
if (!defs.selectAll("#fog path").size()) fogging.style("display", "none"); // all states are de-focused
|
||||
}
|
||||
|
||||
function toggleLegend() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue