Merge branch 'master' of https://github.com/Azgaar/Fantasy-Map-Generator into charts-overview

modules/dynamic/hierarchy-tree.js

@@ -68,13 +68,27 @@ function appendStyleSheet() {
       margin: 0 2px;
     }
 
-    .hierarchyTree_selectedButton {
+    #hierarchyTree {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+
+    #hierarchyTree > svg {
+      height: 100%;
+    }
+
+    .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 +102,10 @@ function appendStyleSheet() {
       color: #333;
     }
 
+    #hierarchyTree_originSelector {
+      display: none;
+    }
+
     #hierarchyTree_originSelector > form > div {
       padding: 0.3em;
       margin: 1px 0;
@@ -147,8 +165,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>
@@ -237,12 +255,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) {
@@ -320,6 +344,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");
@@ -453,6 +478,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", () => {