From 8c96a9754d477841f7f9974820a62888de45e076 Mon Sep 17 00:00:00 2001
From: Thomas Robert <info@satche.ch>
Date: Thu, 16 Jun 2022 17:15:07 +0200
Subject: [PATCH] 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 @@
     <script src="modules/river-generator.js"></script>
     <script src="modules/lakes.js"></script>
     <script src="modules/names-generator.js"></script>
-    <script src="modules/cultures-generator.js?v=06062022"></script>
+    <script src="modules/cultures-generator.js?v=16062022"></script>
     <script src="modules/burgs-and-states.js?v=29052022"></script>
     <script src="modules/routes-generator.js"></script>
-    <script src="modules/religions-generator.js?v=12062022"></script>
+    <script src="modules/religions-generator.js?v=16062022"></script>
     <script src="modules/military-generator.js"></script>
     <script src="modules/markers-generator.js"></script>
     <script src="modules/coa-generator.js"></script>
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() {
         <span><span id='hierarchyTree_selectedName'></span>. </span>
         <span data-name="Type short name (abbreviation)">Abbreviation: <input id='hierarchyTree_selectedCode' type='text' maxlength='3' size='3' /></span>
         <span>Origins: <span id='hierarchyTree_selectedOrigins'></span></span>
-        <button data-tip='Add origin' class="hierarchyTree_selectedButton" id='hierarchyTree_selectedSelectButton'>Select</button>
-        <button data-tip='Exit edit mode' class="hierarchyTree_selectedButton" id='hierarchyTree_selectedCloseButton'>Exit</button>
+        <button data-tip='Edit this node's origins' class="hierarchyTree_selectedButton" id='hierarchyTree_selectedSelectButton'>Edit</button>
+        <button data-tip='Unselect this node' class="hierarchyTree_selectedButton" id='hierarchyTree_selectedCloseButton'>Unselect</button>
       </div>
     </div>
     <div id="hierarchyTree_originSelector"></div>
@@ -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;