From 8c96a9754d477841f7f9974820a62888de45e076 Mon Sep 17 00:00:00 2001 From: Thomas Robert Date: Thu, 16 Jun 2022 17:15:07 +0200 Subject: [PATCH 1/5] UI improvement for hierarchy tree (#834) * style(hierarchy tree): improve responsivness Fix details on the bottom of the dialog Make the tree view take the rest of the available space of the dialog * style(hierarchy tree): distinguish buttons Distinguish between action buttons and remove origins tags-like button * typo(hierarchy tree): change button label and tips * fix(hierarchy tree): disable top node interactions * chore: update version/hash to v1.86.07 * chore: update version/hash to v1.86.08 * fix: bad hash versions * fix: update index.html to correct versions --- index.html | 4 +-- modules/dynamic/editors/cultures-editor.js | 2 +- modules/dynamic/editors/religions-editor.js | 2 +- modules/dynamic/hierarchy-tree.js | 30 ++++++++++++++++++--- versioning.js | 2 +- 5 files changed, 31 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 3c9dcacf..c74b1af9 100644 --- a/index.html +++ b/index.html @@ -7798,10 +7798,10 @@ - + - + diff --git a/modules/dynamic/editors/cultures-editor.js b/modules/dynamic/editors/cultures-editor.js index 07b58cae..0433a0f0 100644 --- a/modules/dynamic/editors/cultures-editor.js +++ b/modules/dynamic/editors/cultures-editor.js @@ -630,7 +630,7 @@ function togglePercentageMode() { async function showHierarchy() { if (customization) return; - const HeirarchyTree = await import("../hierarchy-tree.js"); + const HeirarchyTree = await import("../hierarchy-tree.js?v=15062022"); const getDescription = culture => { const {name, type, rural, urban} = culture; diff --git a/modules/dynamic/editors/religions-editor.js b/modules/dynamic/editors/religions-editor.js index 381212d6..debd4d53 100644 --- a/modules/dynamic/editors/religions-editor.js +++ b/modules/dynamic/editors/religions-editor.js @@ -533,7 +533,7 @@ function togglePercentageMode() { async function showHierarchy() { if (customization) return; - const HeirarchyTree = await import("../hierarchy-tree.js"); + const HeirarchyTree = await import("../hierarchy-tree.js?v=15062022"); const getDescription = religion => { const {name, type, form, rural, urban} = religion; diff --git a/modules/dynamic/hierarchy-tree.js b/modules/dynamic/hierarchy-tree.js index 73b9f173..5380dd6c 100644 --- a/modules/dynamic/hierarchy-tree.js +++ b/modules/dynamic/hierarchy-tree.js @@ -64,17 +64,32 @@ export function open(props) { function appendStyleSheet() { const styles = /* css */ ` + + #hierarchyTree { + display: flex; + flex-direction: column; + justify-content: space-between; + } + + #hierarchyTree > svg { + height: 100%; + } + #hierarchyTree_selectedOrigins > button { margin: 0 2px; } - .hierarchyTree_selectedButton { + .hierarchyTree_selectedOrigins { + margin-right: 15px; + } + + .hierarchyTree_selectedOrigin { border: 1px solid #aaa; background: none; padding: 1px 4px; } - .hierarchyTree_selectedButton:hover { + .hierarchyTree_selectedOrigin:hover { border: 1px solid #333; } @@ -88,6 +103,10 @@ function appendStyleSheet() { color: #333; } + #hierarchyTree_originSelector { + display: none; + } + #hierarchyTree_originSelector > form > div { padding: 0.3em; margin: 1px 0; @@ -149,8 +168,8 @@ function insertHtml() { . Abbreviation: Origins: - - + +
@@ -324,6 +343,7 @@ function updateTree() { function selectElement(d) { const dataElement = d.data; + if (d.id == 0) return; const node = nodes.select(`g[data-id="${d.id}"]`); nodes.selectAll("g").style("outline", "none"); @@ -457,6 +477,8 @@ function handleNodeExit(d) { } function dragToReorigin(from) { + if (from.id == 0) return; + dragLine.attr("d", `M${from.x},${from.y}L${from.x},${from.y}`); d3.event.on("drag", () => { diff --git a/versioning.js b/versioning.js index ba8f7187..55a16f9b 100644 --- a/versioning.js +++ b/versioning.js @@ -1,7 +1,7 @@ "use strict"; // version and caching control -const version = "1.86.07"; // generator version, update each time +const version = "1.86.08"; // generator version, update each time { document.title += " v" + version; From 7c429fb6cbb1de0cb4520f48cb46c644c0cb30ca Mon Sep 17 00:00:00 2001 From: Azgaar Date: Fri, 17 Jun 2022 13:10:37 +0300 Subject: [PATCH 2/5] fix(#838): dissalow hotkeys on input --- index.html | 2 +- modules/ui/hotkeys.js | 46 +++++++++++++++++++++++++++++++------------ 2 files changed, 34 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index 3c9dcacf..142316d9 100644 --- a/index.html +++ b/index.html @@ -7853,7 +7853,7 @@ - + diff --git a/modules/ui/hotkeys.js b/modules/ui/hotkeys.js index 9c9a4a7f..6cba97a0 100644 --- a/modules/ui/hotkeys.js +++ b/modules/ui/hotkeys.js @@ -4,6 +4,8 @@ document.addEventListener("keydown", handleKeydown); document.addEventListener("keyup", handleKeyup); function handleKeydown(event) { + if (!allowHotkeys()) return; // in some cases (e.g. in a textarea) hotkeys are not allowed + const {code, ctrlKey, altKey} = event; if (altKey && !ctrlKey) event.preventDefault(); // disallow alt key combinations if (ctrlKey && ["KeyS", "KeyC"].includes(code)) event.preventDefault(); // disallow CTRL + S and CTRL + C @@ -12,11 +14,8 @@ function handleKeydown(event) { function handleKeyup(event) { if (!modules.editors) return; // if editors are not loaded, do nothing + if (!allowHotkeys()) return; // in some cases (e.g. in a textarea) hotkeys are not allowed - const {tagName, contentEditable} = document.activeElement; - if (["INPUT", "SELECT", "TEXTAREA"].includes(tagName)) return; // don't trigger if user inputs text - if (tagName === "DIV" && contentEditable === "true") return; // don't trigger if user inputs a text - if (document.getSelection().toString()) return; // don't trigger if user selects text event.stopPropagation(); const {code, key, ctrlKey, metaKey, shiftKey, altKey} = event; @@ -109,17 +108,30 @@ function handleKeyup(event) { else if (ctrl) toggleMode(); } +function allowHotkeys() { + const {tagName, contentEditable} = document.activeElement; + if (["INPUT", "SELECT", "TEXTAREA"].includes(tagName)) return false; + if (tagName === "DIV" && contentEditable === "true") return false; + if (document.getSelection().toString()) return false; + return true; +} + function pressNumpadSign(key) { const change = key === "+" ? 1 : -1; let brush = null; if (document.getElementById("brushRadius")?.offsetParent) brush = document.getElementById("brushRadius"); - else if (document.getElementById("biomesManuallyBrush")?.offsetParent) brush = document.getElementById("biomesManuallyBrush"); - else if (document.getElementById("statesManuallyBrush")?.offsetParent) brush = document.getElementById("statesManuallyBrush"); - else if (document.getElementById("provincesManuallyBrush")?.offsetParent) brush = document.getElementById("provincesManuallyBrush"); - else if (document.getElementById("culturesManuallyBrush")?.offsetParent) brush = document.getElementById("culturesManuallyBrush"); + else if (document.getElementById("biomesManuallyBrush")?.offsetParent) + brush = document.getElementById("biomesManuallyBrush"); + else if (document.getElementById("statesManuallyBrush")?.offsetParent) + brush = document.getElementById("statesManuallyBrush"); + else if (document.getElementById("provincesManuallyBrush")?.offsetParent) + brush = document.getElementById("provincesManuallyBrush"); + else if (document.getElementById("culturesManuallyBrush")?.offsetParent) + brush = document.getElementById("culturesManuallyBrush"); else if (document.getElementById("zonesBrush")?.offsetParent) brush = document.getElementById("zonesBrush"); - else if (document.getElementById("religionsManuallyBrush")?.offsetParent) brush = document.getElementById("religionsManuallyBrush"); + else if (document.getElementById("religionsManuallyBrush")?.offsetParent) + brush = document.getElementById("religionsManuallyBrush"); if (brush) { const value = minmax(+brush.value + change, +brush.min, +brush.max); @@ -133,18 +145,26 @@ function pressNumpadSign(key) { function toggleMode() { if (zonesRemove?.offsetParent) { - zonesRemove.classList.contains("pressed") ? zonesRemove.classList.remove("pressed") : zonesRemove.classList.add("pressed"); + zonesRemove.classList.contains("pressed") + ? zonesRemove.classList.remove("pressed") + : zonesRemove.classList.add("pressed"); } } function removeElementOnKey() { - const fastDelete = Array.from(document.querySelectorAll("[role='dialog'] .fastDelete")).find(dialog => dialog.style.display !== "none"); + const fastDelete = Array.from(document.querySelectorAll("[role='dialog'] .fastDelete")).find( + dialog => dialog.style.display !== "none" + ); if (fastDelete) fastDelete.click(); - const visibleDialogs = Array.from(document.querySelectorAll("[role='dialog']")).filter(dialog => dialog.style.display !== "none"); + const visibleDialogs = Array.from(document.querySelectorAll("[role='dialog']")).filter( + dialog => dialog.style.display !== "none" + ); if (!visibleDialogs.length) return; - visibleDialogs.forEach(dialog => dialog.querySelectorAll("button").forEach(button => button.textContent === "Remove" && button.click())); + visibleDialogs.forEach(dialog => + dialog.querySelectorAll("button").forEach(button => button.textContent === "Remove" && button.click()) + ); } function closeAllDialogs() { From 2aa2fab54d082f0ab809121b6fbdfc0e079e59c9 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Sun, 19 Jun 2022 13:45:08 +0300 Subject: [PATCH 3/5] fix: hierarchy tree to update node context, not to add new --- modules/dynamic/hierarchy-tree.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/modules/dynamic/hierarchy-tree.js b/modules/dynamic/hierarchy-tree.js index 5380dd6c..dc161e43 100644 --- a/modules/dynamic/hierarchy-tree.js +++ b/modules/dynamic/hierarchy-tree.js @@ -1,6 +1,5 @@ appendStyleSheet(); insertHtml(); -addListeners(); const MARGINS = {top: 10, right: 10, bottom: -5, left: 10}; @@ -178,8 +177,6 @@ function insertHtml() { byId("dialogs").insertAdjacentHTML("beforeend", html); } -function addListeners() {} - function getRoot() { const root = d3 .stratify() @@ -260,12 +257,18 @@ function renderTree(root, treeLayout) { .call(d3.drag().on("start", dragToReorigin)); node - .append("path") - .attr("d", ({data}) => shapesMap[getShape(data)]) + .selectAll("path") + .data(d => [d]) + .join("path") + .attr("d", d => shapesMap[getShape(d.data)]) .attr("fill", d => d.data.color || "#ffffff") .attr("stroke-dasharray", d => (d.data.cells ? "none" : "1")); - node.append("text").text(d => d.data.code || ""); + node + .selectAll("text") + .data(d => [d]) + .join("text") + .text(d => d.data.code || ""); } function mapCoords(newRoot, prevRoot) { From a7bf05b2158713f9e646c83e90d32a4b5e13fb1d Mon Sep 17 00:00:00 2001 From: Azgaar Date: Sun, 19 Jun 2022 13:50:55 +0300 Subject: [PATCH 4/5] fix: hierarchy tree to update node context, not to add new - update hash --- index.html | 2 +- modules/dynamic/editors/cultures-editor.js | 2 +- modules/dynamic/editors/religions-editor.js | 2 +- modules/ui/editors.js | 4 ++-- versioning.js | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index dc39e1dd..7f1da993 100644 --- a/index.html +++ b/index.html @@ -7820,7 +7820,7 @@ - + diff --git a/modules/dynamic/editors/cultures-editor.js b/modules/dynamic/editors/cultures-editor.js index 0433a0f0..9c651acc 100644 --- a/modules/dynamic/editors/cultures-editor.js +++ b/modules/dynamic/editors/cultures-editor.js @@ -630,7 +630,7 @@ function togglePercentageMode() { async function showHierarchy() { if (customization) return; - const HeirarchyTree = await import("../hierarchy-tree.js?v=15062022"); + const HeirarchyTree = await import("../hierarchy-tree.js?v=19062022"); const getDescription = culture => { const {name, type, rural, urban} = culture; diff --git a/modules/dynamic/editors/religions-editor.js b/modules/dynamic/editors/religions-editor.js index debd4d53..53d625fe 100644 --- a/modules/dynamic/editors/religions-editor.js +++ b/modules/dynamic/editors/religions-editor.js @@ -533,7 +533,7 @@ function togglePercentageMode() { async function showHierarchy() { if (customization) return; - const HeirarchyTree = await import("../hierarchy-tree.js?v=15062022"); + const HeirarchyTree = await import("../hierarchy-tree.js?v=19062022"); const getDescription = religion => { const {name, type, form, rural, urban} = religion; diff --git a/modules/ui/editors.js b/modules/ui/editors.js index 3cf31e5c..af3e3028 100644 --- a/modules/ui/editors.js +++ b/modules/ui/editors.js @@ -1180,12 +1180,12 @@ async function editStates() { async function editCultures() { if (customization) return; - const Editor = await import("../dynamic/editors/cultures-editor.js?v=12062022"); + const Editor = await import("../dynamic/editors/cultures-editor.js?v=19062022"); Editor.open(); } async function editReligions() { if (customization) return; - const Editor = await import("../dynamic/editors/religions-editor.js?v=12062022"); + const Editor = await import("../dynamic/editors/religions-editor.js?v=19062022"); Editor.open(); } diff --git a/versioning.js b/versioning.js index 55a16f9b..c9be3e9e 100644 --- a/versioning.js +++ b/versioning.js @@ -1,7 +1,7 @@ "use strict"; // version and caching control -const version = "1.86.08"; // generator version, update each time +const version = "1.86.09"; // generator version, update each time { document.title += " v" + version; From 0bf1a2bda7cdd2e8b6e2389ae9a260a0bb7d91e8 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Sun, 19 Jun 2022 13:52:37 +0300 Subject: [PATCH 5/5] maintenance: update supporters --- index.html | 2 +- modules/dynamic/supporters.js | 2 +- modules/ui/options.js | 2 +- versioning.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 7f1da993..d8e4a786 100644 --- a/index.html +++ b/index.html @@ -7815,7 +7815,7 @@ - + diff --git a/modules/dynamic/supporters.js b/modules/dynamic/supporters.js index 35a22313..038da4d8 100644 --- a/modules/dynamic/supporters.js +++ b/modules/dynamic/supporters.js @@ -40,5 +40,5 @@ export const supporters = format(` Jordan,William Markus,Sidr Dim,Alexander Whittaker,The Next Level,Patrick Valverde,Markus Peham,Daniel Cooper,the Beagles of Neorbus,Marley Moule, Maximilian Schielke,Johnathan Xavier Hutchinson,Ele,Rita,Randy Ross,John Wick,RedSpaz,cameron cannon,Ian Grau-Fay,Kyle Barrett,Charlotte Wiland, David Kaul,E. Jason Davis,Cyberate,Atenfox,Sea Wolf,Holly Loveless,Roekai,Alden Z,angel carrillo,Sam Spoerle,S A Rudy,Bird Law Expert,Mira Cyr, - Aaron Blair,Neyimadd,RLKZ1022,DerWolf,Kenji Yamada,Zion + Aaron Blair,Neyimadd,RLKZ1022,DerWolf,Kenji Yamada,Zion,Robert Rinne,Actual_Dio,Kyarou `); diff --git a/modules/ui/options.js b/modules/ui/options.js index 28b6aafc..48ddf7bd 100644 --- a/modules/ui/options.js +++ b/modules/ui/options.js @@ -76,7 +76,7 @@ document // show popup with a list of Patreon supportes (updated manually) async function showSupporters() { - const {supporters} = await import("../dynamic/supporters.js?v=01062022"); + const {supporters} = await import("../dynamic/supporters.js?v=19062022"); alertMessage.innerHTML = "
    " + supporters.map(n => `
  • ${n}
    • `).join("") + "
"; $("#alert").dialog({ diff --git a/versioning.js b/versioning.js index c9be3e9e..4e7f3589 100644 --- a/versioning.js +++ b/versioning.js @@ -1,7 +1,7 @@ "use strict"; // version and caching control -const version = "1.86.09"; // generator version, update each time +const version = "1.86.10"; // generator version, update each time { document.title += " v" + version;