From 81f037004ca05563bf65bb738d9c9b70200e13a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81ngel=20Montero=20Lamas?= Date: Sun, 6 Feb 2022 19:56:16 +0100 Subject: [PATCH] Color picker hatches 14-60 (#726) * Color picker hatches 14-60 Added hatches to number 14 to 60. Updated the code of the color picker to accept multiples rows of hatches. Changed the size of fillRectPointer from 0.9 em to 1.5 em. Added an Update code to upgrade maps to 1.72 to have a grid of 60 svg hatches. Without the update, loaded files appeared with the rectangles for hatches 14-60 empty. * Hatches ordered Reworked the code to put back rows of 14 hatches. Reordered the first 14 hatches to defaault. Made 3 rows, so 42 hatches. * Cleaned code and fixes Cleaned in index.html line 152. Put back: width=".9em" height=".9em" style="margin-bottom:-1px"> for fill. * mouseover hatches Fixed some typos. Changed mousemove for mouseover and moved the calling of the function tip from the each function to the original place at 519. The arrow function changed to one that tells the id. * Copies hatching from defElements into map svg, and hatching removed from saved map files. * Removed haching completely from map svg * Hatching copy for clone is now done before unused pattern removal * Added back code that removes the unused hatching group Co-authored-by: Evolvedexperiment Co-authored-by: Azgaar --- index.html | 196 +++++++++++++++++++++++++++---------- main.js | 2 +- modules/export.js | 5 +- modules/load.js | 11 ++- modules/ui/editors.js | 28 +++--- modules/ui/zones-editor.js | 2 +- 6 files changed, 173 insertions(+), 71 deletions(-) diff --git a/index.html b/index.html index d515b96d..a7d19f8a 100644 --- a/index.html +++ b/index.html @@ -148,55 +148,6 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -4356,6 +4307,153 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/main.js b/main.js index 99afe18a..fdf26386 100644 --- a/main.js +++ b/main.js @@ -2,7 +2,7 @@ // https://github.com/Azgaar/Fantasy-Map-Generator "use strict"; -const version = "1.722"; // generator version +const version = "1.73"; // generator version document.title += " v" + version; // switches to disable/enable logging features diff --git a/modules/export.js b/modules/export.js index 7b88a7e6..73308169 100644 --- a/modules/export.js +++ b/modules/export.js @@ -184,6 +184,9 @@ async function getMapURL(type, options = {}) { filters[i].remove(); } + const hatching = svgDefs.getElementById("defs-hatching"); + if (hatching) cloneDefs.appendChild(hatching.cloneNode(true)); + // remove unused patterns const patterns = cloneEl.querySelectorAll("pattern"); for (let i = 0; i < patterns.length; i++) { @@ -262,7 +265,7 @@ async function getMapURL(type, options = {}) { if (pattern) cloneDefs.appendChild(pattern.cloneNode(true)); } - if (!cloneEl.getElementById("hatching").children.length) cloneEl.getElementById("hatching")?.remove(); // remove unused hatching group + if (!cloneEl.getElementById("defs-hatching").children.length) cloneEl.getElementById("defs-hatching")?.remove(); // remove unused hatching group if (!cloneEl.getElementById("fogging-cont")) cloneEl.getElementById("fog")?.remove(); // remove unused fog if (!cloneEl.getElementById("regions")) cloneEl.getElementById("statePaths")?.remove(); // removed unused statePaths if (!cloneEl.getElementById("labels")) cloneEl.getElementById("textPaths")?.remove(); // removed unused textPaths diff --git a/modules/load.js b/modules/load.js index 07d95925..519678d4 100644 --- a/modules/load.js +++ b/modules/load.js @@ -190,7 +190,6 @@ function parseLoadedData(data) { if (customizationMenu.offsetParent) styleTab.click(); const reliefIcons = document.getElementById("defs-relief").innerHTML; // save relief icons - const hatching = document.getElementById("hatching").cloneNode(true); // save hatching void (function parseParameters() { const params = data[0].split("|"); @@ -473,9 +472,6 @@ function parseLoadedData(data) { if (!layerIsOn("toggleBorders")) $("#borders").fadeOut(); if (!layerIsOn("toggleStates")) regions.attr("display", "none").selectAll("path").remove(); - // 1.0 adds hatching - document.getElementsByTagName("defs")[0].appendChild(hatching); - // 1.0 adds zones layer zones = viewbox.insert("g", "#borders").attr("id", "zones").attr("display", "none"); zones.attr("opacity", 0.6).attr("stroke", null).attr("stroke-width", 0).attr("stroke-dasharray", null).attr("stroke-linecap", "butt"); @@ -939,6 +935,11 @@ function parseLoadedData(data) { localStorage.removeItem(styleName); }); } + + if (version < 1.73) { + // v1.73 moved the hatching patterns out of the user's SVG + document.getElementById("hatching")?.remove(); + } })(); void (function checkDataIntegrity() { @@ -1049,7 +1050,7 @@ function parseLoadedData(data) { // sort markers by index pack.markers.sort((a, b) => a.i - b.i); } - })(); + })(); changeMapSize(); diff --git a/modules/ui/editors.js b/modules/ui/editors.js index 3c14c149..be97102c 100644 --- a/modules/ui/editors.js +++ b/modules/ui/editors.js @@ -425,10 +425,10 @@ function clearLegend() { function createPicker() { const pos = () => tip("Drag to change the picker position"); const cl = () => tip("Click to close the picker"); - const closePicker = () => contaiter.style("display", "none"); + const closePicker = () => container.style("display", "none"); - const contaiter = d3.select("body").append("svg").attr("id", "pickerContainer").attr("width", "100%").attr("height", "100%"); - contaiter + const container = d3.select("body").append("svg").attr("id", "pickerContainer").attr("width", "100%").attr("height", "100%"); + container .append("rect") .attr("x", 0) .attr("y", 0) @@ -437,7 +437,7 @@ function createPicker() { .attr("opacity", 0.2) .on("mousemove", cl) .on("click", closePicker); - const picker = contaiter + const picker = container .append("g") .attr("id", "picker") .call( @@ -494,7 +494,7 @@ function createPicker() { const colors = picker.append("g").attr("id", "pickerColors").attr("stroke", "#333333"); const hatches = picker.append("g").attr("id", "pickerHatches").attr("stroke", "#333333"); - const hatching = d3.selectAll("g#hatching > pattern"); + const hatching = d3.selectAll("g#defs-hatching > pattern"); const number = hatching.size(); const clr = d3.range(number).map(i => d3.hsl((i / number) * 360, 0.7, 0.7).hex()); @@ -504,8 +504,8 @@ function createPicker() { .attr("id", "picker_" + d) .attr("fill", d) .attr("class", i ? "" : "selected") - .attr("x", i * 22 + 4) - .attr("y", 40) + .attr("x", (i % 14) * 22 + 4) + .attr("y", 40 + Math.floor(i / 14)*20) .attr("width", 16) .attr("height", 16); }); @@ -515,20 +515,20 @@ function createPicker() { .append("rect") .attr("id", "picker_" + this.id) .attr("fill", "url(#" + this.id + ")") - .attr("x", i * 22 + 4) - .attr("y", 61) + .attr("x", (i % 14) * 22 + 4) + .attr("y", Math.floor(i / 14)*20 + 20 + (number * 2)) .attr("width", 16) - .attr("height", 16); + .attr("height", 16) }); colors .selectAll("rect") .on("click", pickerFillClicked) - .on("mousemove", () => tip("Click to fill with the color")); + .on("mouseover", () => tip("Click to fill with the color")); hatches .selectAll("rect") .on("click", pickerFillClicked) - .on("mousemove", () => tip("Click to fill with the hatching")); + .on("mouseover", function() { tip("Click to fill with the hatching " + this.id) }); // append box const bbox = picker.node().getBBox(); @@ -544,10 +544,10 @@ function createPicker() { .attr("fill", "#ffffff") .attr("stroke", "#5d4651") .on("mousemove", pos); - picker.insert("text", ":first-child").attr("x", 291).attr("y", -10).attr("id", "pickerCloseText").text("✕"); + picker.insert("text", ":first-child").attr("x", width-20).attr("y", -10).attr("id", "pickerCloseText").text("✕"); picker .insert("rect", ":first-child") - .attr("x", 288) + .attr("x", width-23) .attr("y", -21) .attr("id", "pickerCloseRect") .attr("width", 14) diff --git a/modules/ui/zones-editor.js b/modules/ui/zones-editor.js index f011f47b..13e8b31b 100644 --- a/modules/ui/zones-editor.js +++ b/modules/ui/zones-editor.js @@ -331,7 +331,7 @@ function editZones() { function addZonesLayer() { const id = getNextId("zone"); const description = "Unknown zone"; - const fill = "url(#hatch" + (id.slice(4) % 14) + ")"; + const fill = "url(#hatch" + (id.slice(4) % 42) + ")"; zones.append("g").attr("id", id).attr("data-description", description).attr("data-cells", "").attr("fill", fill); const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;