From 127eafb656c7690977305d70138825bb1116a5c8 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Thu, 9 Jun 2022 00:21:02 +0300
Subject: [PATCH 1/6] feat(hierarchy tree): UI buttons to remove origin, zoom

---
 modules/dynamic/editors/religions-editor.js | 108 ++++++++++++++------
 1 file changed, 77 insertions(+), 31 deletions(-)

diff --git a/modules/dynamic/editors/religions-editor.js b/modules/dynamic/editors/religions-editor.js
index 745d1457..513b4d4b 100644
--- a/modules/dynamic/editors/religions-editor.js
+++ b/modules/dynamic/editors/religions-editor.js
@@ -261,7 +261,7 @@ function getTypeOptions(type) {
 function religionHighlightOn(event) {
   const religionId = Number(event.id || event.target.dataset.id);
   const $info = byId("religionInfo");
-  if ($info) {
+  if ($info && religionId) {
     d3.select("#hierarchy").select(`g[data-id='${religionId}']`).classed("selected", 1);
     const {name, type, form, rural, urban} = pack.religions[religionId];
 
@@ -563,39 +563,55 @@ function showHierarchy() {
   const validReligions = pack.religions.filter(r => !r.removed);
   if (validReligions.length < 3) return tip("Not enough religions to show hierarchy", false, "error");
 
-  const root = d3
-    .stratify()
-    .id(d => d.i)
-    .parentId(d => d.origins[0])(validReligions);
-  const treeWidth = root.leaves().length;
-  const treeHeight = root.height;
-  const width = Math.max(treeWidth * 40, 300);
-  const height = treeHeight * 60;
+  const getRoot = () =>
+    d3
+      .stratify()
+      .id(d => d.i)
+      .parentId(d => d.origins[0])(validReligions);
+
+  const root = getRoot();
+  const treeWidth = root.leaves().length * 50;
+  const treeHeight = root.height * 50;
 
   const margin = {top: 10, right: 10, bottom: -5, left: 10};
-  const w = width - margin.left - margin.right;
-  const h = height + 30 - margin.top - margin.bottom;
+  const w = treeWidth - margin.left - margin.right;
+  const h = treeHeight + 30 - margin.top - margin.bottom;
   const treeLayout = d3.tree().size([w, h]);
 
-  alertMessage.innerHTML = /* html */ `<div id="religionChartDetails" class='chartInfo'>
-    <div id='religionInfo' style="display: block">&#8205;</div>
-    <div id='religionSelected' style="display: none">
-      <span><span id='religionSelectedName'></span>. </span>
-      <span data-name="Type religion short name (abbreviation)">Abbreviation: <input id='religionSelectedCode' type='text' maxlength='3' size='3' /></span>
-      <button data-tip='Clear origin, religion will be linked to top level' id='religionSelectedClear'>Clear</button>
-      <button data-tip='Close edit mode' id='religionSelectedClose'>Close</button>
+  const width = minmax(treeWidth, 300, innerWidth * 0.75);
+  const height = minmax(treeHeight, 200, innerHeight * 0.75);
+
+  alertMessage.innerHTML = /* html */ `<div id="religionChart" style="overflow: hidden; width: ${width}px">
+    <div id="religionChartDetails" class='chartInfo'>
+      <div id='religionInfo' style="display: block">&#8205;</div>
+      <div id='religionSelected' style="display: none">
+        <span><span id='religionSelectedName'></span>. </span>
+        <span data-name="Type religion short name (abbreviation)">Abbreviation: <input id='religionSelectedCode' type='text' maxlength='3' size='3' /></span>
+        <span id='religionSelectedOrigins'></span>
+        <button data-tip='Close edit mode' id='religionSelectedClose'>Close</button>
+      </div>
     </div>
   </div>`;
 
   // prepare svg
+  const zoom = d3
+    .zoom()
+    .extent([Array(2).fill(0), [width, height]])
+    .scaleExtent([0.2, 1.5])
+    .on("zoom", () => {
+      viewbox.attr("transform", d3.event.transform);
+    });
+
   const svg = d3
-    .select("#alertMessage")
+    .select("#religionChart")
     .insert("svg", "#religionChartDetails")
     .attr("id", "hierarchy")
-    .attr("width", width)
-    .attr("height", height)
-    .style("text-anchor", "middle");
-  const graph = svg.append("g").attr("transform", `translate(10, -45)`);
+    .attr("viewBox", [0, 0, width, height])
+    .style("text-anchor", "middle")
+    .call(zoom);
+
+  const viewbox = svg.append("g");
+  const graph = viewbox.append("g").attr("transform", `translate(10, -45)`);
   const links = graph.append("g").attr("fill", "none").attr("stroke", "#aaaaaa");
   const primaryLinks = links.append("g");
   const secondaryLinks = links.append("g").attr("stroke-dasharray", 1);
@@ -637,8 +653,9 @@ function showHierarchy() {
 
   const getNodePath = d => nodePathMap[d.data.type];
 
-  renderTree();
-  function renderTree() {
+  renderTree(root, treeLayout);
+
+  function renderTree(root, treeLayout) {
     treeLayout(root);
 
     primaryLinks.selectAll("path").data(root.links()).enter().append("path").attr("d", getLinkPath);
@@ -669,10 +686,24 @@ function showHierarchy() {
       .text(d => d.data.code || "");
   }
 
+  function rerenderTree() {
+    nodes.selectAll("*").remove();
+    primaryLinks.selectAll("*").remove();
+    secondaryLinks.selectAll("*").remove();
+
+    const root = getRoot();
+    const treeWidth = root.leaves().length * 50;
+    const treeHeight = root.height * 50;
+
+    const w = treeWidth - margin.left - margin.right;
+    const h = treeHeight + 30 - margin.top - margin.bottom;
+    const treeLayout = d3.tree().size([w, h]);
+
+    renderTree(root, treeLayout);
+  }
+
   $("#alert").dialog({
     title: "Religions tree",
-    width: fitContent(),
-    resizable: false,
     position: {my: "left center", at: "left+10 center", of: "svg"},
     buttons: {},
     close: () => {
@@ -699,9 +730,24 @@ function showHierarchy() {
       religion.code = this.value;
     };
 
-    byId("religionSelectedClear").onclick = () => {
-      religion.origins = [0];
-      showHierarchy();
+    byId("religionSelectedOrigins").innerHTML = religion.origins
+      .filter(origin => origin)
+      .map((origin, index) => {
+        const {name, code} = validReligions.find(r => r.i === origin) || {};
+        const type = index ? "Secondary" : "Primary";
+        const tip = `${type} origin: ${name}. Click to remove link to that origin`;
+        return `<button data-id="${origin}" class='religionSelectedOrigin' data-tip="${tip}">${code}</button>`;
+      })
+      .join("");
+
+    byId("religionSelectedOrigins").onclick = function (event) {
+      const target = event.target;
+      if (target.tagName !== "BUTTON") return;
+      const origin = Number(target.dataset.id);
+      const filtered = religion.origins.filter(religionOrigin => religionOrigin !== origin);
+      religion.origins = filtered.length ? filtered : [0];
+      target.remove();
+      rerenderTree();
     };
 
     byId("religionSelectedClose").onclick = () => {
@@ -733,7 +779,7 @@ function showHierarchy() {
       if (religion.origins[0] === 0) religion.origins = [];
       religion.origins.push(newOrigin);
 
-      showHierarchy();
+      rerenderTree();
     });
   }
 }

From b9a578e0bebb32a9297a5845ee1af07dd735f0f1 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Thu, 9 Jun 2022 23:47:39 +0300
Subject: [PATCH 2/6] style(hierarchy tree): buttons style

---
 modules/dynamic/editors/religions-editor.js | 50 +++++++++++++++++++--
 1 file changed, 46 insertions(+), 4 deletions(-)

diff --git a/modules/dynamic/editors/religions-editor.js b/modules/dynamic/editors/religions-editor.js
index 513b4d4b..82cfdce2 100644
--- a/modules/dynamic/editors/religions-editor.js
+++ b/modules/dynamic/editors/religions-editor.js
@@ -9,6 +9,7 @@ export function open() {
   if (layerIsOn("toggleCultures")) toggleReligions();
   if (layerIsOn("toggleProvinces")) toggleProvinces();
 
+  appendStyleSheet();
   refreshReligionsEditor();
   drawReligionCenters();
 
@@ -21,6 +22,38 @@ export function open() {
   $body.focus();
 }
 
+function appendStyleSheet() {
+  const styles = /* css */ `
+    #religionSelectedOrigins > button {
+      margin: 0 4px;
+    }
+
+    .religionSelectedButton {
+      border: 1px solid #aaa;
+      background: none;
+      padding: 1px 2px;
+    }
+
+    .religionSelectedButton:hover {
+      border: 1px solid #333;
+    }
+
+    .religionSelectedOrigin::after {
+      content: "✕";
+      margin-left: 8px;
+      color: #999;
+    }
+
+    .religionSelectedOrigin:hover:after {
+      color: #333;
+    }
+  `;
+
+  const style = document.createElement("style");
+  style.appendChild(document.createTextNode(styles));
+  document.head.appendChild(style);
+}
+
 function insertEditorHtml() {
   const editorHtml = /* html */ `<div id="religionsEditor" class="dialog stable">
     <div id="religionsHeader" class="header" style="grid-template-columns: 13em 6em 7em 18em 5em 6em">
@@ -587,8 +620,9 @@ function showHierarchy() {
       <div id='religionSelected' style="display: none">
         <span><span id='religionSelectedName'></span>. </span>
         <span data-name="Type religion short name (abbreviation)">Abbreviation: <input id='religionSelectedCode' type='text' maxlength='3' size='3' /></span>
-        <span id='religionSelectedOrigins'></span>
-        <button data-tip='Close edit mode' id='religionSelectedClose'>Close</button>
+        <span>Origins: <span id='religionSelectedOrigins'></span></span>
+        <button data-tip='Add origin' class="religionSelectedButton" id='religionSelectedAdd'>Add</button>
+        <button data-tip='Exit edit mode' class="religionSelectedButton" id='religionSelectedClose'>Exit</button>
       </div>
     </div>
   </div>`;
@@ -713,13 +747,13 @@ function showHierarchy() {
 
   function religionSelect(d) {
     d3.event.stopPropagation();
+    const religion = d.data;
 
     nodes.selectAll("g").style("outline", "none");
     this.style.outline = "1px solid #c13119";
     byId("religionSelected").style.display = "block";
     byId("religionInfo").style.display = "none";
 
-    const religion = d.data;
     byId("religionSelectedName").innerText = religion.name;
     byId("religionSelectedCode").value = religion.code;
 
@@ -736,7 +770,7 @@ function showHierarchy() {
         const {name, code} = validReligions.find(r => r.i === origin) || {};
         const type = index ? "Secondary" : "Primary";
         const tip = `${type} origin: ${name}. Click to remove link to that origin`;
-        return `<button data-id="${origin}" class='religionSelectedOrigin' data-tip="${tip}">${code}</button>`;
+        return `<button data-id="${origin}" class="religionSelectedButton religionSelectedOrigin" data-tip="${tip}">${code}</button>`;
       })
       .join("");
 
@@ -750,6 +784,14 @@ function showHierarchy() {
       rerenderTree();
     };
 
+    byId("religionSelectedAdd").onclick = () => {
+      const ancestors = d.ancestors().map(({id}) => Number(id));
+      const origins = religion.origins;
+
+      const selectableReligions = validReligions.filter(({i}) => i && !origins.includes(i) && !ancestors.includes(i));
+      console.log(selectableReligions);
+    };
+
     byId("religionSelectedClose").onclick = () => {
       this.style.outline = "none";
       byId("religionSelected").style.display = "none";

From 6e5e570c90d1d3c6b9c5a1938d59409aa13409ac Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Sun, 12 Jun 2022 00:22:39 +0300
Subject: [PATCH 3/6] feature(hierarchy tree): dynamically load, control dialog

---
 index.css                                   |   9 +-
 modules/dynamic/editors/cultures-editor.js  | 215 ++---------
 modules/dynamic/editors/religions-editor.js | 311 ++-------------
 modules/dynamic/editors/states-editor.js    |   1 -
 modules/dynamic/heightmap-selection.js      |   4 +-
 modules/dynamic/hierarchy-tree.js           | 401 ++++++++++++++++++++
 modules/ui/editors.js                       |  48 ++-
 modules/ui/regiment-editor.js               | 223 ++++++++---
 8 files changed, 639 insertions(+), 573 deletions(-)
 create mode 100644 modules/dynamic/hierarchy-tree.js

diff --git a/index.css b/index.css
index 9c884fa2..9653262e 100644
--- a/index.css
+++ b/index.css
@@ -254,13 +254,6 @@ i.icon-lock {
   font-size: 12px;
 }
 
-#hierarchy .selected {
-  stroke: #c13119;
-  stroke-width: 1;
-  cursor: move;
-}
-
-#hierarchy text,
 #statesTree text,
 #provincesTree text {
   pointer-events: none;
@@ -281,7 +274,7 @@ i.icon-lock {
   stroke-width: 2;
 }
 
-.dragLine {
+.regimentDragLine {
   marker-end: url(#end-arrow);
   stroke: #333333;
   stroke-dasharray: 5;
diff --git a/modules/dynamic/editors/cultures-editor.js b/modules/dynamic/editors/cultures-editor.js
index 9b30fb0e..13611263 100644
--- a/modules/dynamic/editors/cultures-editor.js
+++ b/modules/dynamic/editors/cultures-editor.js
@@ -295,15 +295,6 @@ function getShapeOptions(selectShape, selected) {
 
 function cultureHighlightOn(event) {
   const cultureId = Number(event.id || event.target.dataset.id);
-  const $info = byId("cultureInfo");
-  if ($info) {
-    d3.select("#hierarchy").select(`g[data-id='${cultureId}']`).classed("selected", 1);
-    const {name, type, rural, urban} = pack.cultures[cultureId];
-    const population = rural * populationRate + urban * populationRate * urbanization;
-    const populationText = population > 0 ? si(rn(population)) + " people" : "Extinct";
-    $info.innerHTML = `${name} culture. ${type}. ${populationText}`;
-    tip("Drag to other node to add parent, click to edit");
-  }
 
   if (!layerIsOn("toggleCultures")) return;
   if (customization) return;
@@ -326,13 +317,6 @@ function cultureHighlightOn(event) {
 function cultureHighlightOff(event) {
   const cultureId = Number(event.id || event.target.dataset.id);
 
-  const $info = byId("cultureInfo");
-  if ($info) {
-    d3.select("#hierarchy").select(`g[data-id='${cultureId}']`).classed("selected", 0);
-    $info.innerHTML = "&#8205;";
-    tip("");
-  }
-
   if (!layerIsOn("toggleCultures")) return;
   cults
     .select("#culture" + cultureId)
@@ -644,189 +628,36 @@ function togglePercentageMode() {
   }
 }
 
-function showHierarchy() {
-  // build hierarchy tree
-  pack.cultures[0].origins = [null];
-  const validCultures = pack.cultures.filter(c => !c.removed);
-  if (validCultures.length < 3) return tip("Not enough cultures to show hierarchy", false, "error");
+async function showHierarchy() {
+  if (customization) return;
+  const HeirarchyTree = await import("../hierarchy-tree.js");
 
-  const root = d3
-    .stratify()
-    .id(d => d.i)
-    .parentId(d => d.origins[0])(validCultures);
-  const treeWidth = root.leaves().length;
-  const treeHeight = root.height;
-  const width = Math.max(treeWidth * 40, 300);
-  const height = treeHeight * 60;
+  const getDescription = culture => {
+    const {name, type, rural, urban} = culture;
 
-  const margin = {top: 10, right: 10, bottom: -5, left: 10};
-  const w = width - margin.left - margin.right;
-  const h = height + 30 - margin.top - margin.bottom;
-  const treeLayout = d3.tree().size([w, h]);
-
-  alertMessage.innerHTML = /* html */ `<div id="cultureChartDetails" class='chartInfo'>
-    <div id='cultureInfo' style="display: block">&#8205;</div>
-    <div id='cultureSelected' style="display: none">
-      <span><span id='cultureSelectedName'></span> culture. </span>
-      <span data-name="Type culture short name (abbreviation)">Abbreviation: <input id='cultureSelectedCode' type='text' maxlength='3' size='3' /></span>
-      <button data-tip='Clear origin, culture will be linked to top level' id='cultureSelectedClear'>Clear</button>
-      <button data-tip='Close edit mode' id='cultureSelectedClose'>Close</button>
-    </div>
-  </div>`;
-
-  // prepare svg
-  const svg = d3
-    .select("#alertMessage")
-    .insert("svg", "#cultureChartDetails")
-    .attr("id", "hierarchy")
-    .attr("width", width)
-    .attr("height", height)
-    .style("text-anchor", "middle")
-    .style("min-width", "300px");
-  const graph = svg.append("g").attr("transform", `translate(10, -45)`);
-  const links = graph.append("g").attr("fill", "none").attr("stroke", "#aaaaaa");
-  const primaryLinks = links.append("g");
-  const secondaryLinks = links.append("g").attr("stroke-dasharray", 1);
-  const nodes = graph.append("g");
-
-  // render helper functions
-  const getLinkPath = d => {
-    const {
-      source: {x: sx, y: sy},
-      target: {x: tx, y: ty}
-    } = d;
-    return `M${sx},${sy} C${sx},${(sy * 3 + ty) / 4} ${tx},${(sy * 2 + ty) / 3} ${tx},${ty}`;
+    const population = rural * populationRate + urban * populationRate * urbanization;
+    const populationText = population > 0 ? si(rn(population)) + " people" : "Extinct";
+    return `${name} culture. ${type}. ${populationText}`;
   };
 
-  const getSecondaryLinks = root => {
-    const nodes = root.descendants();
-    const links = [];
-
-    for (const node of nodes) {
-      const origins = node.data.origins;
-      if (node.depth < 2) continue;
-
-      for (let i = 1; i < origins.length; i++) {
-        const source = nodes.find(n => n.data.i === origins[i]);
-        if (source) links.push({source, target: node});
-      }
-    }
-
-    return links;
+  const getShape = ({type}) => {
+    if (type === "Generic") return "circle";
+    if (type === "River") return "diamond";
+    if (type === "Lake") return "hexagon";
+    if (type === "Naval") return "square";
+    if (type === "Highland") return "concave";
+    if (type === "Nomadic") return "octagon";
+    if (type === "Hunting") return "pentagon";
   };
 
-  const nodePathMap = {
-    undefined: "M5,0A5,5,0,1,1,-5,0A5,5,0,1,1,5,0", // small circle
-    Generic: "M11.3,0A11.3,11.3,0,1,1,-11.3,0A11.3,11.3,0,1,1,11.3,0", // circle
-    River: "M0,-14L14,0L0,14L-14,0Z", // diamond
-    Lake: "M-6.5,-11.26l13,0l6.5,11.26l-6.5,11.26l-13,0l-6.5,-11.26Z", // hexagon
-    Naval: "M-11,-11h22v22h-22Z", // square
-    Highland: "M-11,-11l11,2l11,-2l-2,11l2,11l-11,-2l-11,2l2,-11Z", // concave square
-    Nomadic: "M-4.97,-12.01 l9.95,0 l7.04,7.04 l0,9.95 l-7.04,7.04 l-9.95,0 l-7.04,-7.04 l0,-9.95Z", // octagon
-    Hunting: "M0,-14l14,11l-6,14h-16l-6,-14Z" // pentagon
-  };
-
-  const getNodePath = d => nodePathMap[d.data.type];
-
-  renderTree();
-  function renderTree() {
-    treeLayout(root);
-
-    primaryLinks.selectAll("path").data(root.links()).enter().append("path").attr("d", getLinkPath);
-    secondaryLinks.selectAll("path").data(getSecondaryLinks(root)).enter().append("path").attr("d", getLinkPath);
-
-    const node = nodes
-      .selectAll("g")
-      .data(root.descendants())
-      .enter()
-      .append("g")
-      .attr("data-id", d => d.data.i)
-      .attr("stroke", "#333333")
-      .attr("transform", d => `translate(${d.x}, ${d.y})`)
-      .on("mouseenter", cultureHighlightOn)
-      .on("mouseleave", cultureHighlightOff)
-      .on("click", cultureSelect)
-      .call(d3.drag().on("start", dragToReorigin));
-
-    node
-      .append("path")
-      .attr("d", getNodePath)
-      .attr("fill", d => d.data.color || "#ffffff")
-      .attr("stroke-dasharray", d => (d.data.cells ? "null" : "1"));
-
-    node
-      .append("text")
-      .attr("dy", ".35em")
-      .text(d => d.data.code || "");
-  }
-
-  $("#alert").dialog({
-    title: "Cultures tree",
-    width: fitContent(),
-    resizable: false,
-    position: {my: "left center", at: "left+10 center", of: "svg"},
-    buttons: null,
-    close: () => {
-      alertMessage.innerHTML = "";
-    }
+  HeirarchyTree.open({
+    type: "cultures",
+    data: pack.cultures,
+    onNodeEnter: cultureHighlightOn,
+    onNodeLeave: cultureHighlightOff,
+    getDescription,
+    getShape
   });
-
-  function cultureSelect(d) {
-    d3.event.stopPropagation();
-
-    nodes.selectAll("g").style("outline", "none");
-    this.style.outline = "1px solid #c13119";
-    byId("cultureSelected").style.display = "block";
-    byId("cultureInfo").style.display = "none";
-
-    const culture = d.data;
-    byId("cultureSelectedName").innerText = culture.name;
-    byId("cultureSelectedCode").value = culture.code;
-
-    byId("cultureSelectedCode").onchange = function () {
-      if (this.value.length > 3) return tip("Abbreviation must be 3 characters or less", false, "error", 3000);
-      if (!this.value.length) return tip("Abbreviation cannot be empty", false, "error", 3000);
-      nodes.select(`g[data-id="${d.id}"] > text`).text(this.value);
-      culture.code = this.value;
-    };
-
-    byId("cultureSelectedClear").onclick = () => {
-      culture.origins = [0];
-      showHierarchy();
-    };
-
-    byId("cultureSelectedClose").onclick = () => {
-      this.style.outline = "none";
-      byId("cultureSelected").style.display = "none";
-      byId("cultureInfo").style.display = "block";
-    };
-  }
-
-  function dragToReorigin(d) {
-    const originLine = graph.append("path").attr("class", "dragLine").attr("d", `M${d.x},${d.y}L${d.x},${d.y}`);
-
-    d3.event.on("drag", () => {
-      originLine.attr("d", `M${d.x},${d.y}L${d3.event.x},${d3.event.y}`);
-    });
-
-    d3.event.on("end", () => {
-      originLine.remove();
-      const selected = graph.select("g.selected");
-      if (!selected.size()) return;
-
-      const cultureId = d.data.i;
-      const newOrigin = selected.datum().data.i;
-      if (cultureId === newOrigin) return; // dragged to itself
-      if (d.data.origins.includes(newOrigin)) return; // already a child of the selected node
-      if (d.descendants().some(node => node.data.i === newOrigin)) return; // cannot be a child of its own child
-
-      const culture = pack.cultures[cultureId];
-      if (culture.origins[0] === 0) culture.origins = [];
-      culture.origins.push(newOrigin);
-
-      showHierarchy();
-    });
-  }
 }
 
 function recalculateCultures(must) {
diff --git a/modules/dynamic/editors/religions-editor.js b/modules/dynamic/editors/religions-editor.js
index 82cfdce2..833fe6df 100644
--- a/modules/dynamic/editors/religions-editor.js
+++ b/modules/dynamic/editors/religions-editor.js
@@ -9,7 +9,6 @@ export function open() {
   if (layerIsOn("toggleCultures")) toggleReligions();
   if (layerIsOn("toggleProvinces")) toggleProvinces();
 
-  appendStyleSheet();
   refreshReligionsEditor();
   drawReligionCenters();
 
@@ -22,38 +21,6 @@ export function open() {
   $body.focus();
 }
 
-function appendStyleSheet() {
-  const styles = /* css */ `
-    #religionSelectedOrigins > button {
-      margin: 0 4px;
-    }
-
-    .religionSelectedButton {
-      border: 1px solid #aaa;
-      background: none;
-      padding: 1px 2px;
-    }
-
-    .religionSelectedButton:hover {
-      border: 1px solid #333;
-    }
-
-    .religionSelectedOrigin::after {
-      content: "✕";
-      margin-left: 8px;
-      color: #999;
-    }
-
-    .religionSelectedOrigin:hover:after {
-      color: #333;
-    }
-  `;
-
-  const style = document.createElement("style");
-  style.appendChild(document.createTextNode(styles));
-  document.head.appendChild(style);
-}
-
 function insertEditorHtml() {
   const editorHtml = /* html */ `<div id="religionsEditor" class="dialog stable">
     <div id="religionsHeader" class="header" style="grid-template-columns: 13em 6em 7em 18em 5em 6em">
@@ -293,25 +260,6 @@ function getTypeOptions(type) {
 
 function religionHighlightOn(event) {
   const religionId = Number(event.id || event.target.dataset.id);
-  const $info = byId("religionInfo");
-  if ($info && religionId) {
-    d3.select("#hierarchy").select(`g[data-id='${religionId}']`).classed("selected", 1);
-    const {name, type, form, rural, urban} = pack.religions[religionId];
-
-    const getTypeText = () => {
-      if (name.includes(type)) return "";
-      if (form.includes(type)) return "";
-      if (type === "Folk" || type === "Organized") return `. ${type} religion`;
-      return `. ${type}`;
-    };
-    const formText = form === type ? "" : ". " + form;
-    const population = rural * populationRate + urban * populationRate * urbanization;
-    const populationText = population > 0 ? si(rn(population)) + " people" : "Extinct";
-
-    $info.innerHTML = `${name}${getTypeText()}${formText}. ${populationText}`;
-    tip("Drag to other node to add parent, click to edit");
-  }
-
   const $el = $body.querySelector(`div[data-id='${religionId}']`);
   if ($el) $el.classList.add("active");
 
@@ -336,13 +284,6 @@ function religionHighlightOn(event) {
 
 function religionHighlightOff(event) {
   const religionId = Number(event.id || event.target.dataset.id);
-  const $info = byId("religionInfo");
-  if ($info) {
-    d3.select("#hierarchy").select(`g[data-id='${religionId}']`).classed("selected", 0);
-    $info.innerHTML = "&#8205;";
-    tip("");
-  }
-
   const $el = $body.querySelector(`div[data-id='${religionId}']`);
   if ($el) $el.classList.remove("active");
 
@@ -590,240 +531,42 @@ function togglePercentageMode() {
   }
 }
 
-function showHierarchy() {
-  // build hierarchy tree
-  pack.religions[0].origins = [null];
-  const validReligions = pack.religions.filter(r => !r.removed);
-  if (validReligions.length < 3) return tip("Not enough religions to show hierarchy", false, "error");
+async function showHierarchy() {
+  if (customization) return;
+  const HeirarchyTree = await import("../hierarchy-tree.js");
 
-  const getRoot = () =>
-    d3
-      .stratify()
-      .id(d => d.i)
-      .parentId(d => d.origins[0])(validReligions);
+  const getDescription = religion => {
+    const {name, type, form, rural, urban} = religion;
 
-  const root = getRoot();
-  const treeWidth = root.leaves().length * 50;
-  const treeHeight = root.height * 50;
+    const getTypeText = () => {
+      if (name.includes(type)) return "";
+      if (form.includes(type)) return "";
+      if (type === "Folk" || type === "Organized") return `. ${type} religion`;
+      return `. ${type}`;
+    };
 
-  const margin = {top: 10, right: 10, bottom: -5, left: 10};
-  const w = treeWidth - margin.left - margin.right;
-  const h = treeHeight + 30 - margin.top - margin.bottom;
-  const treeLayout = d3.tree().size([w, h]);
+    const formText = form === type ? "" : ". " + form;
+    const population = rural * populationRate + urban * populationRate * urbanization;
+    const populationText = population > 0 ? si(rn(population)) + " people" : "Extinct";
 
-  const width = minmax(treeWidth, 300, innerWidth * 0.75);
-  const height = minmax(treeHeight, 200, innerHeight * 0.75);
-
-  alertMessage.innerHTML = /* html */ `<div id="religionChart" style="overflow: hidden; width: ${width}px">
-    <div id="religionChartDetails" class='chartInfo'>
-      <div id='religionInfo' style="display: block">&#8205;</div>
-      <div id='religionSelected' style="display: none">
-        <span><span id='religionSelectedName'></span>. </span>
-        <span data-name="Type religion short name (abbreviation)">Abbreviation: <input id='religionSelectedCode' type='text' maxlength='3' size='3' /></span>
-        <span>Origins: <span id='religionSelectedOrigins'></span></span>
-        <button data-tip='Add origin' class="religionSelectedButton" id='religionSelectedAdd'>Add</button>
-        <button data-tip='Exit edit mode' class="religionSelectedButton" id='religionSelectedClose'>Exit</button>
-      </div>
-    </div>
-  </div>`;
-
-  // prepare svg
-  const zoom = d3
-    .zoom()
-    .extent([Array(2).fill(0), [width, height]])
-    .scaleExtent([0.2, 1.5])
-    .on("zoom", () => {
-      viewbox.attr("transform", d3.event.transform);
-    });
-
-  const svg = d3
-    .select("#religionChart")
-    .insert("svg", "#religionChartDetails")
-    .attr("id", "hierarchy")
-    .attr("viewBox", [0, 0, width, height])
-    .style("text-anchor", "middle")
-    .call(zoom);
-
-  const viewbox = svg.append("g");
-  const graph = viewbox.append("g").attr("transform", `translate(10, -45)`);
-  const links = graph.append("g").attr("fill", "none").attr("stroke", "#aaaaaa");
-  const primaryLinks = links.append("g");
-  const secondaryLinks = links.append("g").attr("stroke-dasharray", 1);
-  const nodes = graph.append("g");
-
-  // render helper functions
-  const getLinkPath = d => {
-    const {
-      source: {x: sx, y: sy},
-      target: {x: tx, y: ty}
-    } = d;
-    return `M${sx},${sy} C${sx},${(sy * 3 + ty) / 4} ${tx},${(sy * 2 + ty) / 3} ${tx},${ty}`;
+    return `${name}${getTypeText()}${formText}. ${populationText}`;
   };
 
-  const getSecondaryLinks = root => {
-    const nodes = root.descendants();
-    const links = [];
-
-    for (const node of nodes) {
-      const origins = node.data.origins;
-      if (node.depth < 2) continue;
-
-      for (let i = 1; i < origins.length; i++) {
-        const source = nodes.find(n => n.data.i === origins[i]);
-        if (source) links.push({source, target: node});
-      }
-    }
-
-    return links;
+  const getShape = ({type}) => {
+    if (type === "Folk") return "circle";
+    if (type === "Organized") return "square";
+    if (type === "Cult") return "hexagon";
+    if (type === "Heresy") return "diamond";
   };
 
-  const nodePathMap = {
-    undefined: "M5,0A5,5,0,1,1,-5,0A5,5,0,1,1,5,0", // small circle
-    Folk: "M11.3,0A11.3,11.3,0,1,1,-11.3,0A11.3,11.3,0,1,1,11.3,0", // circle
-    Organized: "M-11,-11h22v22h-22Z", // square
-    Cult: "M-6.5,-11.26l13,0l6.5,11.26l-6.5,11.26l-13,0l-6.5,-11.26Z", // hexagon
-    Heresy: "M0,-14L14,0L0,14L-14,0Z" // diamond
-  };
-
-  const getNodePath = d => nodePathMap[d.data.type];
-
-  renderTree(root, treeLayout);
-
-  function renderTree(root, treeLayout) {
-    treeLayout(root);
-
-    primaryLinks.selectAll("path").data(root.links()).enter().append("path").attr("d", getLinkPath);
-    secondaryLinks.selectAll("path").data(getSecondaryLinks(root)).enter().append("path").attr("d", getLinkPath);
-
-    const node = nodes
-      .selectAll("g")
-      .data(root.descendants())
-      .enter()
-      .append("g")
-      .attr("data-id", d => d.data.i)
-      .attr("stroke", "#333333")
-      .attr("transform", d => `translate(${d.x}, ${d.y})`)
-      .on("mouseenter", religionHighlightOn)
-      .on("mouseleave", religionHighlightOff)
-      .on("click", religionSelect)
-      .call(d3.drag().on("start", dragToReorigin));
-
-    node
-      .append("path")
-      .attr("d", getNodePath)
-      .attr("fill", d => d.data.color || "#ffffff")
-      .attr("stroke-dasharray", d => (d.data.cells ? "null" : "1"));
-
-    node
-      .append("text")
-      .attr("dy", ".35em")
-      .text(d => d.data.code || "");
-  }
-
-  function rerenderTree() {
-    nodes.selectAll("*").remove();
-    primaryLinks.selectAll("*").remove();
-    secondaryLinks.selectAll("*").remove();
-
-    const root = getRoot();
-    const treeWidth = root.leaves().length * 50;
-    const treeHeight = root.height * 50;
-
-    const w = treeWidth - margin.left - margin.right;
-    const h = treeHeight + 30 - margin.top - margin.bottom;
-    const treeLayout = d3.tree().size([w, h]);
-
-    renderTree(root, treeLayout);
-  }
-
-  $("#alert").dialog({
-    title: "Religions tree",
-    position: {my: "left center", at: "left+10 center", of: "svg"},
-    buttons: {},
-    close: () => {
-      alertMessage.innerHTML = "";
-    }
+  HeirarchyTree.open({
+    type: "religions",
+    data: pack.religions,
+    onNodeEnter: religionHighlightOn,
+    onNodeLeave: religionHighlightOff,
+    getDescription,
+    getShape
   });
-
-  function religionSelect(d) {
-    d3.event.stopPropagation();
-    const religion = d.data;
-
-    nodes.selectAll("g").style("outline", "none");
-    this.style.outline = "1px solid #c13119";
-    byId("religionSelected").style.display = "block";
-    byId("religionInfo").style.display = "none";
-
-    byId("religionSelectedName").innerText = religion.name;
-    byId("religionSelectedCode").value = religion.code;
-
-    byId("religionSelectedCode").onchange = function () {
-      if (this.value.length > 3) return tip("Abbreviation must be 3 characters or less", false, "error", 3000);
-      if (!this.value.length) return tip("Abbreviation cannot be empty", false, "error", 3000);
-      nodes.select(`g[data-id="${d.id}"] > text`).text(this.value);
-      religion.code = this.value;
-    };
-
-    byId("religionSelectedOrigins").innerHTML = religion.origins
-      .filter(origin => origin)
-      .map((origin, index) => {
-        const {name, code} = validReligions.find(r => r.i === origin) || {};
-        const type = index ? "Secondary" : "Primary";
-        const tip = `${type} origin: ${name}. Click to remove link to that origin`;
-        return `<button data-id="${origin}" class="religionSelectedButton religionSelectedOrigin" data-tip="${tip}">${code}</button>`;
-      })
-      .join("");
-
-    byId("religionSelectedOrigins").onclick = function (event) {
-      const target = event.target;
-      if (target.tagName !== "BUTTON") return;
-      const origin = Number(target.dataset.id);
-      const filtered = religion.origins.filter(religionOrigin => religionOrigin !== origin);
-      religion.origins = filtered.length ? filtered : [0];
-      target.remove();
-      rerenderTree();
-    };
-
-    byId("religionSelectedAdd").onclick = () => {
-      const ancestors = d.ancestors().map(({id}) => Number(id));
-      const origins = religion.origins;
-
-      const selectableReligions = validReligions.filter(({i}) => i && !origins.includes(i) && !ancestors.includes(i));
-      console.log(selectableReligions);
-    };
-
-    byId("religionSelectedClose").onclick = () => {
-      this.style.outline = "none";
-      byId("religionSelected").style.display = "none";
-      byId("religionInfo").style.display = "block";
-    };
-  }
-
-  function dragToReorigin(d) {
-    const originLine = graph.append("path").attr("class", "dragLine").attr("d", `M${d.x},${d.y}L${d.x},${d.y}`);
-
-    d3.event.on("drag", () => {
-      originLine.attr("d", `M${d.x},${d.y}L${d3.event.x},${d3.event.y}`);
-    });
-
-    d3.event.on("end", () => {
-      originLine.remove();
-      const selected = graph.select("g.selected");
-      if (!selected.size()) return;
-
-      const religionId = d.data.i;
-      const newOrigin = selected.datum().data.i;
-      if (religionId === newOrigin) return; // dragged to itself
-      if (d.data.origins.includes(newOrigin)) return; // already a child of the selected node
-      if (d.descendants().some(node => node.data.i === newOrigin)) return; // cannot be a child of its own child
-
-      const religion = pack.religions[religionId];
-      if (religion.origins[0] === 0) religion.origins = [];
-      religion.origins.push(newOrigin);
-
-      rerenderTree();
-    });
-  }
 }
 
 function toggleExtinct() {
diff --git a/modules/dynamic/editors/states-editor.js b/modules/dynamic/editors/states-editor.js
index e203fe59..b16246fd 100644
--- a/modules/dynamic/editors/states-editor.js
+++ b/modules/dynamic/editors/states-editor.js
@@ -707,7 +707,6 @@ function togglePercentageMode() {
 }
 
 function showStatesChart() {
-  // build hierarchy tree
   const statesData = pack.states.filter(s => !s.removed);
   if (statesData.length < 2) return tip("There are no states to show", false, "error");
 
diff --git a/modules/dynamic/heightmap-selection.js b/modules/dynamic/heightmap-selection.js
index 9318987d..5ca94e61 100644
--- a/modules/dynamic/heightmap-selection.js
+++ b/modules/dynamic/heightmap-selection.js
@@ -2,7 +2,7 @@ const initialSeed = generateSeed();
 let graph = getGraph(grid);
 
 appendStyleSheet();
-insertEditorHtml();
+insertHtml();
 addListeners();
 
 export function open() {
@@ -150,7 +150,7 @@ function appendStyleSheet() {
   document.head.appendChild(style);
 }
 
-function insertEditorHtml() {
+function insertHtml() {
   const heightmapSelectionHtml = /* html */ `<div id="heightmapSelection" class="dialog stable">
     <div class="heightmap-selection">
       <section data-tip="Select heightmap template – template provides unique, but similar-looking maps on generation">
diff --git a/modules/dynamic/hierarchy-tree.js b/modules/dynamic/hierarchy-tree.js
new file mode 100644
index 00000000..28a2f10f
--- /dev/null
+++ b/modules/dynamic/hierarchy-tree.js
@@ -0,0 +1,401 @@
+appendStyleSheet();
+insertHtml();
+addListeners();
+
+const MARGINS = {top: 10, right: 10, bottom: -5, left: 10};
+
+const handleZoom = () => viewbox.attr("transform", d3.event.transform);
+const zoom = d3.zoom().scaleExtent([0.2, 1.5]).on("zoom", handleZoom);
+
+// define svg elements
+const svg = d3.select("#hierarchyTree > svg").call(zoom);
+const viewbox = svg.select("g#hierarchyTree_viewbox");
+const primaryLinks = viewbox.select("g#hierarchyTree_linksPrimary");
+const secondaryLinks = viewbox.select("g#hierarchyTree_linksSecondary");
+const nodes = viewbox.select("g#hierarchyTree_nodes");
+const dragLine = viewbox.select("path#hierarchyTree_dragLine");
+
+// properties
+let dataElements; // {i, name, type, origins}[], e.g. path.religions
+let validElements; // not-removed dataElements
+let onNodeEnter; // d3Data => void
+let onNodeLeave; // d3Data => void
+let getDescription; // dataElement => string
+let getShape; // dataElement => string;
+
+export function open(props) {
+  closeDialogs(".stable");
+
+  dataElements = props.data;
+  dataElements[0].origins = [null];
+  validElements = dataElements.filter(r => !r.removed);
+  if (validElements.length < 3) return tip(`Not enough ${props.type} to show hierarchy`, false, "error");
+
+  onNodeEnter = props.onNodeEnter;
+  onNodeLeave = props.onNodeLeave;
+  getDescription = props.getDescription;
+  getShape = props.getShape;
+
+  const root = getRoot();
+  const treeWidth = root.leaves().length * 50;
+  const treeHeight = root.height * 50;
+
+  const w = treeWidth - MARGINS.left - MARGINS.right;
+  const h = treeHeight + 30 - MARGINS.top - MARGINS.bottom;
+  const treeLayout = d3.tree().size([w, h]);
+
+  const width = minmax(treeWidth, 300, innerWidth * 0.75);
+  const height = minmax(treeHeight, 200, innerHeight * 0.75);
+
+  zoom.extent([Array(2).fill(0), [width, height]]);
+  svg.attr("viewBox", `0, 0, ${width}, ${height}`);
+
+  $("#hierarchyTree").dialog({
+    title: `${capitalize(props.type)} tree`,
+    position: {my: "left center", at: "left+10 center", of: "svg"},
+    width
+  });
+
+  renderTree(root, treeLayout);
+}
+
+function appendStyleSheet() {
+  const styles = /* css */ `
+    #hierarchyTree_selectedOrigins > button {
+      margin: 0 2px;
+    }
+
+    .hierarchyTree_selectedButton {
+      border: 1px solid #aaa;
+      background: none;
+      padding: 1px 4px;
+    }
+
+    .hierarchyTree_selectedButton:hover {
+      border: 1px solid #333;
+    }
+
+    .hierarchyTree_selectedOrigin::after {
+      content: "✕";
+      margin-left: 8px;
+      color: #999;
+    }
+
+    .hierarchyTree_selectedOrigin:hover:after {
+      color: #333;
+    }
+
+    #hierarchyTree_originSelector > form > div {
+      padding: 0.3em;
+      margin: 1px 0;
+      border-radius: 1em;
+    }
+
+    #hierarchyTree_originSelector > form > div:hover {
+      background-color: #ddd;
+    }
+
+    #hierarchyTree_originSelector > form > div[checked] {
+      background-color: #c6d6d6;
+    }
+
+    #hierarchyTree_nodes > g > text {
+      pointer-events: none;
+      stroke: none;
+      font-size: 11px;
+    }
+
+    #hierarchyTree_nodes > g.selected {
+      stroke: #c13119;
+      stroke-width: 1;
+      cursor: move;
+    }
+
+    #hierarchyTree_dragLine {
+      marker-end: url(#end-arrow);
+      stroke: #333333;
+      stroke-dasharray: 5;
+      stroke-dashoffset: 1000;
+      animation: dash 80s linear backwards;
+    }
+  `;
+
+  const style = document.createElement("style");
+  style.appendChild(document.createTextNode(styles));
+  document.head.appendChild(style);
+}
+
+function insertHtml() {
+  const html = /* html */ `<div id="hierarchyTree" style="overflow: hidden;">
+    <svg>
+      <g id="hierarchyTree_viewbox" style="text-anchor: middle; dominant-baseline: central">
+        <g transform="translate(10, -45)">
+          <g id="hierarchyTree_links" fill="none" stroke="#aaa">
+            <g id="hierarchyTree_linksPrimary"></g>
+            <g id="hierarchyTree_linksSecondary" stroke-dasharray="1"></g>
+          </g>
+          <g id="hierarchyTree_nodes"></g>
+          <path id="hierarchyTree_dragLine" path='' />
+        </g>
+      </g>
+    </svg>
+
+    <div id="hierarchyTree_details" class='chartInfo'>
+      <div id='hierarchyTree_infoLine' style="display: block">&#8205;</div>
+      <div id='hierarchyTree_selected' style="display: none">
+        <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>
+      </div>
+    </div>
+    <div id="hierarchyTree_originSelector"></div>
+  </div>`;
+
+  byId("dialogs").insertAdjacentHTML("beforeend", html);
+}
+
+function addListeners() {}
+
+function getRoot() {
+  return d3
+    .stratify()
+    .id(d => d.i)
+    .parentId(d => d.origins[0])(validElements);
+}
+
+function getLinkPath(d) {
+  const {
+    source: {x: sx, y: sy},
+    target: {x: tx, y: ty}
+  } = d;
+  return `M${sx},${sy} C${sx},${(sy * 3 + ty) / 4} ${tx},${(sy * 2 + ty) / 3} ${tx},${ty}`;
+}
+
+function getSecondaryLinks(root) {
+  const nodes = root.descendants();
+  const links = [];
+
+  for (const node of nodes) {
+    const origins = node.data.origins;
+
+    for (let i = 1; i < origins.length; i++) {
+      const source = nodes.find(n => n.data.i === origins[i]);
+      if (source) links.push({source, target: node});
+    }
+  }
+
+  return links;
+}
+
+const shapesMap = {
+  undefined: "M5,0A5,5,0,1,1,-5,0A5,5,0,1,1,5,0", // small circle
+  circle: "M11.3,0A11.3,11.3,0,1,1,-11.3,0A11.3,11.3,0,1,1,11.3,0",
+  square: "M-11,-11h22v22h-22Z",
+  hexagon: "M-6.5,-11.26l13,0l6.5,11.26l-6.5,11.26l-13,0l-6.5,-11.26Z",
+  diamond: "M0,-14L14,0L0,14L-14,0Z",
+  concave: "M-11,-11l11,2l11,-2l-2,11l2,11l-11,-2l-11,2l2,-11Z",
+  octagon: "M-4.97,-12.01 l9.95,0 l7.04,7.04 l0,9.95 l-7.04,7.04 l-9.95,0 l-7.04,-7.04 l0,-9.95Z",
+  pentagon: "M0,-14l14,11l-6,14h-16l-6,-14Z"
+};
+
+function renderTree(root, treeLayout) {
+  treeLayout(root);
+
+  primaryLinks.selectAll("path").data(root.links()).enter().append("path").attr("d", getLinkPath);
+  secondaryLinks.selectAll("path").data(getSecondaryLinks(root)).enter().append("path").attr("d", getLinkPath);
+
+  const node = nodes
+    .selectAll("g")
+    .data(root.descendants())
+    .enter()
+    .append("g")
+    .attr("data-id", d => d.data.i)
+    .attr("stroke", "#333")
+    .attr("transform", d => `translate(${d.x}, ${d.y})`)
+    .on("mouseenter", handleNoteEnter)
+    .on("mouseleave", handleNodeExit)
+    .on("click", selectElement)
+    .call(d3.drag().on("start", dragToReorigin));
+
+  node
+    .append("path")
+    .attr("d", ({data}) => shapesMap[getShape(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 || "");
+}
+
+function rerenderTree() {
+  nodes.selectAll("*").remove();
+  primaryLinks.selectAll("*").remove();
+  secondaryLinks.selectAll("*").remove();
+
+  const root = getRoot();
+  const treeWidth = root.leaves().length * 50;
+  const treeHeight = root.height * 50;
+
+  const w = treeWidth - MARGINS.left - MARGINS.right;
+  const h = treeHeight + 30 - MARGINS.top - MARGINS.bottom;
+  const treeLayout = d3.tree().size([w, h]);
+
+  renderTree(root, treeLayout);
+}
+
+function selectElement(d) {
+  const dataElement = d.data;
+
+  nodes.selectAll("g").style("outline", "none");
+  this.style.outline = "1px solid #c13119";
+  byId("hierarchyTree_selected").style.display = "block";
+  byId("hierarchyTree_infoLine").style.display = "none";
+
+  byId("hierarchyTree_selectedName").innerText = dataElement.name;
+  byId("hierarchyTree_selectedCode").value = dataElement.code;
+
+  byId("hierarchyTree_selectedCode").onchange = function () {
+    if (this.value.length > 3) return tip("Abbreviation must be 3 characters or less", false, "error", 3000);
+    if (!this.value.length) return tip("Abbreviation cannot be empty", false, "error", 3000);
+    nodes.select(`g[data-id="${d.id}"] > text`).text(this.value);
+    dataElement.code = this.value;
+  };
+
+  const createOriginButtons = () => {
+    byId("hierarchyTree_selectedOrigins").innerHTML = dataElement.origins
+      .filter(origin => origin)
+      .map((origin, index) => {
+        const {name, code} = validElements.find(r => r.i === origin) || {};
+        const type = index ? "Secondary" : "Primary";
+        const tip = `${type} origin: ${name}. Click to remove link to that origin`;
+        return `<button data-id="${origin}" class="hierarchyTree_selectedButton hierarchyTree_selectedOrigin" data-tip="${tip}">${code}</button>`;
+      })
+      .join("");
+
+    byId("hierarchyTree_selectedOrigins").onclick = event => {
+      const target = event.target;
+      if (target.tagName !== "BUTTON") return;
+      const origin = Number(target.dataset.id);
+      const filtered = dataElement.origins.filter(elementOrigin => elementOrigin !== origin);
+      dataElement.origins = filtered.length ? filtered : [0];
+      target.remove();
+      rerenderTree();
+    };
+  };
+
+  createOriginButtons();
+
+  byId("hierarchyTree_selectedSelectButton").onclick = () => {
+    const origins = dataElement.origins;
+
+    const descendants = d.descendants().map(d => d.data.i);
+    const selectableElements = validElements.filter(({i}) => !descendants.includes(i));
+
+    const selectableElementsHtml = selectableElements.map(({i, name, code, color}) => {
+      const isPrimary = origins[0] === i ? "checked" : "";
+      const isChecked = origins.includes(i) ? "checked" : "";
+
+      if (i === 0) {
+        return /*html*/ `
+        <div ${isChecked}>
+          <input data-tip="Set as primary origin" type="radio" name="primary" value="${i}" ${isPrimary} />
+          Top level
+        </div>
+      `;
+      }
+
+      return /*html*/ `
+        <div ${isChecked}>
+          <input data-tip="Set as primary origin" type="radio" name="primary" value="${i}" ${isPrimary} />
+          <input data-id="${i}" id="selectElementOrigin${i}" class="checkbox" type="checkbox" ${isChecked} />
+          <label data-tip="Check to set as a secondary origin" for="selectElementOrigin${i}" class="checkbox-label">
+            <fill-box fill="${color}" size=".8em" disabled></fill-box>
+            ${code}: ${name}
+          </label>
+        </div>
+      `;
+    });
+    byId("hierarchyTree_originSelector").innerHTML = /*html*/ `
+      <form style="max-height: 35vh">
+        ${selectableElementsHtml.join("")}
+      </form>
+    `;
+
+    $("#hierarchyTree_originSelector").dialog({
+      title: "Select origins",
+      position: {my: "center", at: "center", of: "svg"},
+      buttons: {
+        Select: () => {
+          $("#hierarchyTree_originSelector").dialog("close");
+          const $selector = byId("hierarchyTree_originSelector");
+          const selectedRadio = $selector.querySelector("input[type='radio']:checked");
+          const selectedCheckboxes = $selector.querySelectorAll("input[type='checkbox']:checked");
+
+          const primary = selectedRadio ? Number(selectedRadio.value) : 0;
+          const secondary = Array.from(selectedCheckboxes)
+            .map(input => Number(input.dataset.id))
+            .filter(origin => origin !== primary);
+
+          dataElement.origins = [primary, ...secondary];
+
+          rerenderTree();
+          createOriginButtons();
+        },
+        Cancel: () => {
+          $("#hierarchyTree_originSelector").dialog("close");
+        }
+      }
+    });
+  };
+
+  byId("hierarchyTree_selectedCloseButton").onclick = () => {
+    this.style.outline = "none";
+    byId("hierarchyTree_selected").style.display = "none";
+    byId("hierarchyTree_infoLine").style.display = "block";
+  };
+}
+
+function handleNoteEnter(d) {
+  this.classList.add("selected");
+  onNodeEnter(d);
+
+  byId("hierarchyTree_infoLine").innerText = getDescription(d.data);
+  tip("Drag to other node to add parent, click to edit");
+}
+
+function handleNodeExit(d) {
+  this.classList.remove("selected");
+  onNodeLeave(d);
+
+  byId("hierarchyTree_infoLine").innerHTML = "&#8205;";
+  tip("");
+}
+
+function dragToReorigin(from) {
+  dragLine.attr("d", `M${from.x},${from.y}L${from.x},${from.y}`);
+
+  d3.event.on("drag", () => {
+    dragLine.attr("d", `M${from.x},${from.y}L${d3.event.x},${d3.event.y}`);
+  });
+
+  d3.event.on("end", function () {
+    dragLine.attr("d", "");
+    const selected = nodes.select("g.selected");
+    if (!selected.size()) return;
+
+    const elementId = from.data.i;
+    const newOrigin = selected.datum().data.i;
+    if (elementId === newOrigin) return; // dragged to itself
+    if (from.data.origins.includes(newOrigin)) return; // already a child of the selected node
+    if (from.descendants().some(node => node.data.i === newOrigin)) return; // cannot be a child of its own child
+
+    const element = dataElements.find(({i}) => i === elementId);
+    if (!element) return;
+
+    if (element.origins[0] === 0) element.origins = [];
+    element.origins.push(newOrigin);
+
+    rerenderTree();
+  });
+}
diff --git a/modules/ui/editors.js b/modules/ui/editors.js
index 079d95ee..248099af 100644
--- a/modules/ui/editors.js
+++ b/modules/ui/editors.js
@@ -32,7 +32,7 @@ function clicked() {
   else if (grand.id === "coastline") editCoastline();
   else if (great.id === "armies") editRegiment();
   else if (pack.cells.t[i] === 1) {
-    const node = document.getElementById("island_" + pack.cells.f[i]);
+    const node = byId("island_" + pack.cells.f[i]);
     editCoastline(node);
   } else if (grand.id === "lakes") editLake();
 }
@@ -58,10 +58,10 @@ function closeDialogs(except = "#except") {
 
 // move brush radius circle
 function moveCircle(x, y, r = 20) {
-  let circle = document.getElementById("brushCircle");
+  let circle = byId("brushCircle");
   if (!circle) {
     const html = /* html */ `<circle id="brushCircle" cx=${x} cy=${y} r=${r}></circle>`;
-    document.getElementById("debug").insertAdjacentHTML("afterBegin", html);
+    byId("debug").insertAdjacentHTML("afterBegin", html);
   } else {
     circle.setAttribute("cx", x);
     circle.setAttribute("cy", y);
@@ -70,7 +70,7 @@ function moveCircle(x, y, r = 20) {
 }
 
 function removeCircle() {
-  if (document.getElementById("brushCircle")) document.getElementById("brushCircle").remove();
+  if (byId("brushCircle")) byId("brushCircle").remove();
 }
 
 // get browser-defined fit-content
@@ -79,8 +79,8 @@ function fitContent() {
 }
 
 // apply sorting behaviour for lines on Editor header click
-document.querySelectorAll(".sortable").forEach(function (e) {
-  e.addEventListener("click", function () {
+document.querySelectorAll(".sortable").forEach(function (event) {
+  event.on("click", function () {
     sortLines(this);
   });
 });
@@ -90,7 +90,7 @@ function applySortingByHeader(headerContainer) {
     .getElementById(headerContainer)
     .querySelectorAll(".sortable")
     .forEach(function (element) {
-      element.addEventListener("click", function () {
+      element.on("click", function () {
         sortLines(this);
       });
     });
@@ -235,7 +235,7 @@ function removeBurg(id) {
 
   if (burg.coa) {
     const coaId = "burgCOA" + id;
-    if (document.getElementById(coaId)) document.getElementById(coaId).remove();
+    if (byId(coaId)) byId(coaId).remove();
     emblems.select(`#burgEmblems > use[data-i='${id}']`).remove();
     delete burg.coa; // remove to save data
   }
@@ -629,7 +629,7 @@ function createPicker() {
 }
 
 function updateSelectedRect(fill) {
-  document.getElementById("picker").querySelector("rect.selected").classList.remove("selected");
+  byId("picker").querySelector("rect.selected").classList.remove("selected");
   document
     .getElementById("picker")
     .querySelector("rect[fill='" + fill.toLowerCase() + "']")
@@ -687,7 +687,7 @@ function openPicker(fill, callback) {
   updateSelectedRect(fill);
 
   openPicker.updateFill = function () {
-    const selected = document.getElementById("picker").querySelector("rect.selected");
+    const selected = byId("picker").querySelector("rect.selected");
     if (!selected) return;
     callback(selected.getAttribute("fill"));
   };
@@ -888,8 +888,8 @@ function selectIcon(initial, callback) {
   if (!callback) return;
   $("#iconSelector").dialog();
 
-  const table = document.getElementById("iconTable");
-  const input = document.getElementById("iconInput");
+  const table = byId("iconTable");
+  const input = byId("iconInput");
   input.value = initial;
 
   if (!table.innerHTML) {
@@ -1119,13 +1119,11 @@ function selectIcon(initial, callback) {
 }
 
 function getAreaUnit(squareMark = "²") {
-  return document.getElementById("areaUnit").value === "square"
-    ? document.getElementById("distanceUnitInput").value + squareMark
-    : document.getElementById("areaUnit").value;
+  return byId("areaUnit").value === "square" ? byId("distanceUnitInput").value + squareMark : byId("areaUnit").value;
 }
 
 function getArea(rawArea) {
-  const distanceScale = document.getElementById("distanceScaleInput")?.value;
+  const distanceScale = byId("distanceScaleInput")?.value;
   return rawArea * distanceScale ** 2;
 }
 
@@ -1150,26 +1148,26 @@ function confirmationDialog(options) {
     }
   };
 
-  document.getElementById("alertMessage").innerHTML = message;
+  byId("alertMessage").innerHTML = message;
   $("#alert").dialog({resizable: false, title, buttons});
 }
 
 // add and register event listeners to clean up on editor closure
 function listen(element, event, handler) {
-  element.addEventListener(event, handler);
+  element.on(event, handler);
   return () => element.removeEventListener(event, handler);
 }
 
 // Calls the refresh functionality on all editors currently open.
 function refreshAllEditors() {
   TIME && console.time("refreshAllEditors");
-  if (document.getElementById("culturesEditorRefresh")?.offsetParent) culturesEditorRefresh.click();
-  if (document.getElementById("biomesEditorRefresh")?.offsetParent) biomesEditorRefresh.click();
-  if (document.getElementById("diplomacyEditorRefresh")?.offsetParent) diplomacyEditorRefresh.click();
-  if (document.getElementById("provincesEditorRefresh")?.offsetParent) provincesEditorRefresh.click();
-  if (document.getElementById("religionsEditorRefresh")?.offsetParent) religionsEditorRefresh.click();
-  if (document.getElementById("statesEditorRefresh")?.offsetParent) statesEditorRefresh.click();
-  if (document.getElementById("zonesEditorRefresh")?.offsetParent) zonesEditorRefresh.click();
+  if (byId("culturesEditorRefresh")?.offsetParent) culturesEditorRefresh.click();
+  if (byId("biomesEditorRefresh")?.offsetParent) biomesEditorRefresh.click();
+  if (byId("diplomacyEditorRefresh")?.offsetParent) diplomacyEditorRefresh.click();
+  if (byId("provincesEditorRefresh")?.offsetParent) provincesEditorRefresh.click();
+  if (byId("religionsEditorRefresh")?.offsetParent) religionsEditorRefresh.click();
+  if (byId("statesEditorRefresh")?.offsetParent) statesEditorRefresh.click();
+  if (byId("zonesEditorRefresh")?.offsetParent) zonesEditorRefresh.click();
   TIME && console.timeEnd("refreshAllEditors");
 }
 
diff --git a/modules/ui/regiment-editor.js b/modules/ui/regiment-editor.js
index 881ce3bf..359cca91 100644
--- a/modules/ui/regiment-editor.js
+++ b/modules/ui/regiment-editor.js
@@ -13,7 +13,9 @@ function editRegiment(selector) {
   drawBase();
 
   $("#regimentEditor").dialog({
-    title: "Edit Regiment", resizable: false, close: closeEditor,
+    title: "Edit Regiment",
+    resizable: false,
+    close: closeEditor,
     position: {my: "left top", at: "left+10 top+10", of: "#map"}
   });
 
@@ -40,17 +42,19 @@ function editRegiment(selector) {
   }
 
   function updateRegimentData(regiment) {
-    document.getElementById("regimentType").className = regiment.n ? "icon-anchor" :"icon-users";
+    document.getElementById("regimentType").className = regiment.n ? "icon-anchor" : "icon-users";
     document.getElementById("regimentName").value = regiment.name;
     document.getElementById("regimentEmblem").value = regiment.icon;
     const composition = document.getElementById("regimentComposition");
 
-    composition.innerHTML = options.military.map(u => {
-      return `<div data-tip="${capitalize(u.name)} number. Input to change">
+    composition.innerHTML = options.military
+      .map(u => {
+        return `<div data-tip="${capitalize(u.name)} number. Input to change">
         <div class="label">${capitalize(u.name)}:</div>
-        <input data-u="${u.name}" type="number" min=0 step=1 value="${(regiment.u[u.name]||0)}">
-        <i>${u.type}</i></div>`
-    }).join("");
+        <input data-u="${u.name}" type="number" min=0 step=1 value="${regiment.u[u.name] || 0}">
+        <i>${u.type}</i></div>`;
+      })
+      .join("");
 
     composition.querySelectorAll("input").forEach(el => el.addEventListener("change", changeUnit));
   }
@@ -58,26 +62,49 @@ function editRegiment(selector) {
   function drawBase() {
     const reg = regiment();
     const clr = pack.states[elSelected.dataset.state].color;
-    const base = viewbox.insert("g", "g#armies").attr("id", "regimentBase").attr("stroke-width", .3).attr("stroke", "#000").attr("cursor", "move");
-    base.on("mouseenter", () => {tip("Regiment base. Drag to re-base the regiment", true);}).on("mouseleave", () => {tip('', true);});
+    const base = viewbox
+      .insert("g", "g#armies")
+      .attr("id", "regimentBase")
+      .attr("stroke-width", 0.3)
+      .attr("stroke", "#000")
+      .attr("cursor", "move");
+    base
+      .on("mouseenter", () => {
+        tip("Regiment base. Drag to re-base the regiment", true);
+      })
+      .on("mouseleave", () => {
+        tip("", true);
+      });
 
-    base.append("line").attr("x1", reg.bx).attr("y1", reg.by).attr("x2", reg.x).attr("y2", reg.y).attr("class", "dragLine");
-    base.append("circle").attr("cx", reg.bx).attr("cy", reg.by).attr("r", 2).attr("fill", clr).call(d3.drag().on("drag", dragBase));
+    base
+      .append("line")
+      .attr("x1", reg.bx)
+      .attr("y1", reg.by)
+      .attr("x2", reg.x)
+      .attr("y2", reg.y)
+      .attr("class", "regimentDragLine");
+    base
+      .append("circle")
+      .attr("cx", reg.bx)
+      .attr("cy", reg.by)
+      .attr("r", 2)
+      .attr("fill", clr)
+      .call(d3.drag().on("drag", dragBase));
   }
 
   function changeType() {
     const reg = regiment();
     reg.n = +!reg.n;
-    document.getElementById("regimentType").className = reg.n ? "icon-anchor" :"icon-users";
+    document.getElementById("regimentType").className = reg.n ? "icon-anchor" : "icon-users";
 
     const size = +armies.attr("box-size");
     const baseRect = elSelected.querySelectorAll("rect")[0];
     const iconRect = elSelected.querySelectorAll("rect")[1];
     const icon = elSelected.querySelector(".regimentIcon");
-    const x = reg.n ? reg.x-size*2 : reg.x-size*3;
+    const x = reg.n ? reg.x - size * 2 : reg.x - size * 3;
     baseRect.setAttribute("x", x);
-    baseRect.setAttribute("width", reg.n ? size*4 : size*6);
-    iconRect.setAttribute("x", x - size*2);
+    baseRect.setAttribute("width", reg.n ? size * 4 : size * 6);
+    iconRect.setAttribute("x", x - size * 2);
     icon.setAttribute("x", x - size);
     elSelected.querySelector("text").innerHTML = Military.getTotal(reg);
   }
@@ -87,13 +114,17 @@ function editRegiment(selector) {
   }
 
   function restoreName() {
-    const reg = regiment(), regs = pack.states[elSelected.dataset.state].military;
+    const reg = regiment(),
+      regs = pack.states[elSelected.dataset.state].military;
     const name = Military.getName(reg, regs);
     elSelected.dataset.name = reg.name = document.getElementById("regimentName").value = name;
   }
 
   function selectEmblem() {
-    selectIcon(regimentEmblem.value, v => {regimentEmblem.value = v; changeEmblem()});
+    selectIcon(regimentEmblem.value, v => {
+      regimentEmblem.value = v;
+      changeEmblem();
+    });
   }
 
   function changeEmblem() {
@@ -104,7 +135,7 @@ function editRegiment(selector) {
   function changeUnit() {
     const u = this.dataset.u;
     const reg = regiment();
-    reg.u[u] = (+this.value)||0;
+    reg.u[u] = +this.value || 0;
     reg.a = d3.sum(Object.values(reg.u));
     elSelected.querySelector("text").innerHTML = Military.getTotal(reg);
     if (militaryOverviewRefresh.offsetParent) militaryOverviewRefresh.click();
@@ -112,24 +143,47 @@ function editRegiment(selector) {
   }
 
   function splitRegiment() {
-    const reg = regiment(), u1 = reg.u;
-    const state = +elSelected.dataset.state, military = pack.states[state].military;
-    const i = last(military).i + 1, u2 = Object.assign({}, u1); // u clone
+    const reg = regiment(),
+      u1 = reg.u;
+    const state = +elSelected.dataset.state,
+      military = pack.states[state].military;
+    const i = last(military).i + 1,
+      u2 = Object.assign({}, u1); // u clone
 
-    Object.keys(u2).forEach(u => u2[u] = Math.floor(u2[u]/2)); // halved new reg
+    Object.keys(u2).forEach(u => (u2[u] = Math.floor(u2[u] / 2))); // halved new reg
     const a = d3.sum(Object.values(u2)); // new reg total
-    if (!a) {tip("Not enough forces to split", false, "error"); return}; // nothing to add
+    if (!a) {
+      tip("Not enough forces to split", false, "error");
+      return;
+    } // nothing to add
 
     // update old regiment
-    Object.keys(u1).forEach(u => u1[u] = Math.ceil(u1[u]/2)); // halved old reg
+    Object.keys(u1).forEach(u => (u1[u] = Math.ceil(u1[u] / 2))); // halved old reg
     reg.a = d3.sum(Object.values(u1)); // old reg total
-    regimentComposition.querySelectorAll("input").forEach(el => el.value = reg.u[el.dataset.u]||0);
+    regimentComposition.querySelectorAll("input").forEach(el => (el.value = reg.u[el.dataset.u] || 0));
     elSelected.querySelector("text").innerHTML = Military.getTotal(reg);
 
     // create new regiment
     const shift = +armies.attr("box-size") * 2;
-    const y = function(x, y) {do {y+=shift} while (military.find(r => r.x === x && r.y === y)); return y;}
-    const newReg = {a, cell:reg.cell, i, n:reg.n, u:u2, x:reg.x, y:y(reg.x, reg.y), bx:reg.bx, by:reg.by, state, icon: reg.icon};
+    const y = function (x, y) {
+      do {
+        y += shift;
+      } while (military.find(r => r.x === x && r.y === y));
+      return y;
+    };
+    const newReg = {
+      a,
+      cell: reg.cell,
+      i,
+      n: reg.n,
+      u: u2,
+      x: reg.x,
+      y: y(reg.x, reg.y),
+      bx: reg.bx,
+      by: reg.by,
+      state,
+      icon: reg.icon
+    };
     newReg.name = Military.getName(newReg, military);
     military.push(newReg);
     Military.generateNote(newReg, pack.states[state]); // add legend
@@ -152,11 +206,13 @@ function editRegiment(selector) {
   function addRegimentOnClick() {
     const point = d3.mouse(this);
     const cell = findCell(point[0], point[1]);
-    const x = pack.cells.p[cell][0], y = pack.cells.p[cell][1];
-    const state = +elSelected.dataset.state, military = pack.states[state].military;
+    const x = pack.cells.p[cell][0],
+      y = pack.cells.p[cell][1];
+    const state = +elSelected.dataset.state,
+      military = pack.states[state].military;
     const i = military.length ? last(military).i + 1 : 0;
     const n = +(pack.cells.h[cell] < 20); // naval or land
-    const reg = {a:0, cell, i, n, u:{}, x, y, bx:x, by:y, state, icon:"🛡️"};
+    const reg = {a: 0, cell, i, n, u: {}, x, y, bx: x, by: y, state, icon: "🛡️"};
     reg.name = Military.getName(reg, military);
     military.push(reg);
     Military.generateNote(reg, pack.states[state]); // add legend
@@ -179,30 +235,59 @@ function editRegiment(selector) {
   }
 
   function attackRegimentOnClick() {
-    const target = d3.event.target, regSelected = target.parentElement, army = regSelected.parentElement;
-    const oldState = +elSelected.dataset.state, newState = +regSelected.dataset.state;
+    const target = d3.event.target,
+      regSelected = target.parentElement,
+      army = regSelected.parentElement;
+    const oldState = +elSelected.dataset.state,
+      newState = +regSelected.dataset.state;
 
-    if (army.parentElement.id !== "armies") {tip("Please click on a regiment to attack", false, "error"); return;}
-    if (regSelected === elSelected) {tip("Regiment cannot attack itself", false, "error"); return;}
-    if (oldState === newState) {tip("Cannot attack fraternal regiment", false, "error"); return;}
+    if (army.parentElement.id !== "armies") {
+      tip("Please click on a regiment to attack", false, "error");
+      return;
+    }
+    if (regSelected === elSelected) {
+      tip("Regiment cannot attack itself", false, "error");
+      return;
+    }
+    if (oldState === newState) {
+      tip("Cannot attack fraternal regiment", false, "error");
+      return;
+    }
 
     const attacker = regiment();
     const defender = pack.states[regSelected.dataset.state].military.find(r => r.i == regSelected.dataset.id);
-    if (!attacker.a || !defender.a) {tip("Regiment has no troops to battle", false, "error"); return;}
+    if (!attacker.a || !defender.a) {
+      tip("Regiment has no troops to battle", false, "error");
+      return;
+    }
 
     // save initial position to temp attribute
-    attacker.px = attacker.x, attacker.py = attacker.y;
-    defender.px = defender.x, defender.py = defender.y;
+    (attacker.px = attacker.x), (attacker.py = attacker.y);
+    (defender.px = defender.x), (defender.py = defender.y);
 
     // move attacker to defender
-    Military.moveRegiment(attacker, defender.x, defender.y-8);
+    Military.moveRegiment(attacker, defender.x, defender.y - 8);
 
     // draw battle icon
-    const attack = d3.transition().delay(300).duration(700).ease(d3.easeSinInOut).on("end", () => new Battle(attacker, defender));
-    svg.append("text").attr("x", window.innerWidth/2).attr("y", window.innerHeight/2)
-      .text("⚔️").attr("font-size", 0).attr("opacity", 1)
-      .style("dominant-baseline", "central").style("text-anchor", "middle")
-      .transition(attack).attr("font-size", 1000).attr("opacity", .2).remove();
+    const attack = d3
+      .transition()
+      .delay(300)
+      .duration(700)
+      .ease(d3.easeSinInOut)
+      .on("end", () => new Battle(attacker, defender));
+    svg
+      .append("text")
+      .attr("x", window.innerWidth / 2)
+      .attr("y", window.innerHeight / 2)
+      .text("⚔️")
+      .attr("font-size", 0)
+      .attr("opacity", 1)
+      .style("dominant-baseline", "central")
+      .style("text-anchor", "middle")
+      .transition(attack)
+      .attr("font-size", 1000)
+      .attr("opacity", 0.2)
+      .remove();
 
     clearMainTip();
     $("#regimentEditor").dialog("close");
@@ -222,18 +307,27 @@ function editRegiment(selector) {
   }
 
   function attachRegimentOnClick() {
-    const target = d3.event.target, regSelected = target.parentElement, army = regSelected.parentElement;
-    const oldState = +elSelected.dataset.state, newState = +regSelected.dataset.state;
+    const target = d3.event.target,
+      regSelected = target.parentElement,
+      army = regSelected.parentElement;
+    const oldState = +elSelected.dataset.state,
+      newState = +regSelected.dataset.state;
 
-    if (army.parentElement.id !== "armies") {tip("Please click on a regiment", false, "error"); return;}
-    if (regSelected === elSelected) {tip("Cannot attach regiment to itself. Please click on another regiment", false, "error"); return;}
+    if (army.parentElement.id !== "armies") {
+      tip("Please click on a regiment", false, "error");
+      return;
+    }
+    if (regSelected === elSelected) {
+      tip("Cannot attach regiment to itself. Please click on another regiment", false, "error");
+      return;
+    }
 
     const reg = regiment(); // reg to be attached
     const sel = pack.states[newState].military.find(r => r.i == regSelected.dataset.id); // reg to attach to
 
     for (const unit of options.military) {
       const u = unit.name;
-      if (reg.u[u]) sel.u[u] ? sel.u[u] += reg.u[u] : sel.u[u] = reg.u[u];
+      if (reg.u[u]) sel.u[u] ? (sel.u[u] += reg.u[u]) : (sel.u[u] = reg.u[u]);
     }
     sel.a = d3.sum(Object.values(sel.u)); // reg total
     regSelected.querySelector("text").innerHTML = Military.getTotal(sel); // update selected reg total text
@@ -247,7 +341,7 @@ function editRegiment(selector) {
 
     if (regimentsOverviewRefresh.offsetParent) regimentsOverviewRefresh.click();
     $("#regimentEditor").dialog("close");
-    editRegiment("#"+regSelected.id);
+    editRegiment("#" + regSelected.id);
   }
 
   function regenerateLegend() {
@@ -264,9 +358,11 @@ function editRegiment(selector) {
 
   function removeRegiment() {
     alertMessage.innerHTML = "Are you sure you want to remove the regiment?";
-    $("#alert").dialog({resizable: false, title: "Remove regiment",
+    $("#alert").dialog({
+      resizable: false,
+      title: "Remove regiment",
       buttons: {
-        Remove: function() {
+        Remove: function () {
           $(this).dialog("close");
           const military = pack.states[elSelected.dataset.state].military;
           const regIndex = military.indexOf(regiment());
@@ -281,7 +377,9 @@ function editRegiment(selector) {
           if (regimentsOverviewRefresh.offsetParent) regimentsOverviewRefresh.click();
           $("#regimentEditor").dialog("close");
         },
-        Cancel: function() {$(this).dialog("close");}
+        Cancel: function () {
+          $(this).dialog("close");
+        }
       }
     });
   }
@@ -305,16 +403,17 @@ function editRegiment(selector) {
     const self = elSelected === this;
     const baseLine = viewbox.select("g#regimentBase > line");
 
-    d3.event.on("drag", function() {
-      const x = reg.x = d3.event.x, y = reg.y = d3.event.y;
+    d3.event.on("drag", function () {
+      const x = (reg.x = d3.event.x),
+        y = (reg.y = d3.event.y);
 
       baseRect.setAttribute("x", x1(x));
       baseRect.setAttribute("y", y1(y));
       text.setAttribute("x", x);
       text.setAttribute("y", y);
-      iconRect.setAttribute("x", x1(x)-h);
+      iconRect.setAttribute("x", x1(x) - h);
       iconRect.setAttribute("y", y1(y));
-      icon.setAttribute("x", x1(x)-size);
+      icon.setAttribute("x", x1(x) - size);
       icon.setAttribute("y", y);
       if (self) baseLine.attr("x2", x).attr("y2", y);
     });
@@ -324,13 +423,16 @@ function editRegiment(selector) {
     const baseLine = viewbox.select("g#regimentBase > line");
     const reg = regiment();
 
-    d3.event.on("drag", function() {
+    d3.event.on("drag", function () {
       this.setAttribute("cx", d3.event.x);
       this.setAttribute("cy", d3.event.y);
       baseLine.attr("x1", d3.event.x).attr("y1", d3.event.y);
     });
 
-    d3.event.on("end", function() {reg.bx = d3.event.x; reg.by = d3.event.y;});
+    d3.event.on("end", function () {
+      reg.bx = d3.event.x;
+      reg.by = d3.event.y;
+    });
   }
 
   function closeEditor() {
@@ -343,5 +445,4 @@ function editRegiment(selector) {
     restoreDefaultEvents();
     elSelected = null;
   }
-
-}
\ No newline at end of file
+}

From e3ea5cd4790c05166168a4bf3bc9ab0e8b96c20b Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Sun, 12 Jun 2022 17:14:51 +0300
Subject: [PATCH 4/6] feat(hierarchy tree): sort by descendants

---
 modules/dynamic/hierarchy-tree.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/modules/dynamic/hierarchy-tree.js b/modules/dynamic/hierarchy-tree.js
index 28a2f10f..1dc94f3f 100644
--- a/modules/dynamic/hierarchy-tree.js
+++ b/modules/dynamic/hierarchy-tree.js
@@ -200,8 +200,16 @@ const shapesMap = {
   pentagon: "M0,-14l14,11l-6,14h-16l-6,-14Z"
 };
 
+const getSortIndex = node => {
+  const descendants = node.descendants();
+  const secondaryOrigins = descendants.map(({data}) => data.origins.slice(1)).flat();
+
+  if (secondaryOrigins.length === 0) return node.data.i;
+  return d3.mean(secondaryOrigins);
+};
+
 function renderTree(root, treeLayout) {
-  treeLayout(root);
+  treeLayout(root.sort((a, b) => getSortIndex(a) - getSortIndex(b)));
 
   primaryLinks.selectAll("path").data(root.links()).enter().append("path").attr("d", getLinkPath);
   secondaryLinks.selectAll("path").data(getSecondaryLinks(root)).enter().append("path").attr("d", getLinkPath);

From 434907fa9e98dcd00a534a3bb3a80d6657acae81 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Sun, 12 Jun 2022 22:21:34 +0300
Subject: [PATCH 5/6] feat(hierarchy tree): animate on update

---
 index.html                                  |   4 +-
 modules/dynamic/editors/cultures-editor.js  |   4 +-
 modules/dynamic/editors/religions-editor.js |   4 +-
 modules/dynamic/hierarchy-tree.js           | 111 +++++++++++++++++---
 modules/religions-generator.js              |   4 +-
 modules/ui/editors.js                       |   6 +-
 versioning.js                               |   2 +-
 7 files changed, 106 insertions(+), 29 deletions(-)

diff --git a/index.html b/index.html
index 52b3e7cd..3779d96d 100644
--- a/index.html
+++ b/index.html
@@ -7801,7 +7801,7 @@
     <script src="modules/cultures-generator.js?v=06062022"></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=07062022"></script>
+    <script src="modules/religions-generator.js?v=12062022"></script>
     <script src="modules/military-generator.js"></script>
     <script src="modules/markers-generator.js"></script>
     <script src="modules/coa-generator.js"></script>
@@ -7820,7 +7820,7 @@
 
     <script defer src="modules/relief-icons.js"></script>
     <script defer src="modules/ui/style.js"></script>
-    <script defer src="modules/ui/editors.js?v=080620222"></script>
+    <script defer src="modules/ui/editors.js?v=12062022"></script>
     <script defer src="modules/ui/tools.js?v=12062022"></script>
     <script defer src="modules/ui/world-configurator.js?v=29052022"></script>
     <script defer src="modules/ui/heightmap-editor.js?v=29052020"></script>
diff --git a/modules/dynamic/editors/cultures-editor.js b/modules/dynamic/editors/cultures-editor.js
index 13611263..07b58cae 100644
--- a/modules/dynamic/editors/cultures-editor.js
+++ b/modules/dynamic/editors/cultures-editor.js
@@ -293,7 +293,7 @@ function getShapeOptions(selectShape, selected) {
   return `<select data-tip="Emblem shape associated with culture. Click to change" class="cultureEmblems hide">${options}</select>`;
 }
 
-function cultureHighlightOn(event) {
+const cultureHighlightOn = debounce(event => {
   const cultureId = Number(event.id || event.target.dataset.id);
 
   if (!layerIsOn("toggleCultures")) return;
@@ -312,7 +312,7 @@ function cultureHighlightOn(event) {
     .transition(animate)
     .attr("r", 8)
     .attr("stroke", "#d0240f");
-}
+}, 200);
 
 function cultureHighlightOff(event) {
   const cultureId = Number(event.id || event.target.dataset.id);
diff --git a/modules/dynamic/editors/religions-editor.js b/modules/dynamic/editors/religions-editor.js
index 833fe6df..381212d6 100644
--- a/modules/dynamic/editors/religions-editor.js
+++ b/modules/dynamic/editors/religions-editor.js
@@ -258,7 +258,7 @@ function getTypeOptions(type) {
   return options;
 }
 
-function religionHighlightOn(event) {
+const religionHighlightOn = debounce(event => {
   const religionId = Number(event.id || event.target.dataset.id);
   const $el = $body.querySelector(`div[data-id='${religionId}']`);
   if ($el) $el.classList.add("active");
@@ -280,7 +280,7 @@ function religionHighlightOn(event) {
     .attr("r", 8)
     .attr("stroke-width", 2)
     .attr("stroke", "#c13119");
-}
+}, 200);
 
 function religionHighlightOff(event) {
   const religionId = Number(event.id || event.target.dataset.id);
diff --git a/modules/dynamic/hierarchy-tree.js b/modules/dynamic/hierarchy-tree.js
index 1dc94f3f..5a420eb5 100644
--- a/modules/dynamic/hierarchy-tree.js
+++ b/modules/dynamic/hierarchy-tree.js
@@ -7,6 +7,9 @@ const MARGINS = {top: 10, right: 10, bottom: -5, left: 10};
 const handleZoom = () => viewbox.attr("transform", d3.event.transform);
 const zoom = d3.zoom().scaleExtent([0.2, 1.5]).on("zoom", handleZoom);
 
+// store old root for transitions
+let oldRoot;
+
 // define svg elements
 const svg = d3.select("#hierarchyTree > svg").call(zoom);
 const viewbox = svg.select("g#hierarchyTree_viewbox");
@@ -159,10 +162,21 @@ function insertHtml() {
 function addListeners() {}
 
 function getRoot() {
-  return d3
+  const root = d3
     .stratify()
     .id(d => d.i)
     .parentId(d => d.origins[0])(validElements);
+
+  oldRoot = root;
+  return root;
+}
+
+function getLinkKey(d) {
+  return `${d.source.id}-${d.target.id}`;
+}
+
+function getNodeKey(d) {
+  return d.id;
 }
 
 function getLinkPath(d) {
@@ -211,14 +225,13 @@ const getSortIndex = node => {
 function renderTree(root, treeLayout) {
   treeLayout(root.sort((a, b) => getSortIndex(a) - getSortIndex(b)));
 
-  primaryLinks.selectAll("path").data(root.links()).enter().append("path").attr("d", getLinkPath);
-  secondaryLinks.selectAll("path").data(getSecondaryLinks(root)).enter().append("path").attr("d", getLinkPath);
+  primaryLinks.selectAll("path").data(root.links(), getLinkKey).join("path").attr("d", getLinkPath);
+  secondaryLinks.selectAll("path").data(getSecondaryLinks(root), getLinkKey).join("path").attr("d", getLinkPath);
 
   const node = nodes
     .selectAll("g")
-    .data(root.descendants())
-    .enter()
-    .append("g")
+    .data(root.descendants(), getNodeKey)
+    .join("g")
     .attr("data-id", d => d.data.i)
     .attr("stroke", "#333")
     .attr("transform", d => `translate(${d.x}, ${d.y})`)
@@ -236,27 +249,86 @@ function renderTree(root, treeLayout) {
   node.append("text").text(d => d.data.code || "");
 }
 
-function rerenderTree() {
-  nodes.selectAll("*").remove();
-  primaryLinks.selectAll("*").remove();
-  secondaryLinks.selectAll("*").remove();
+function mapCoords(newRoot, prevRoot) {
+  newRoot.x = prevRoot.x;
+  newRoot.y = prevRoot.y;
 
+  for (const node of newRoot.descendants()) {
+    const prevNode = prevRoot.descendants().find(n => n.data.i === node.data.i);
+    if (prevNode) {
+      node.x = prevNode.x;
+      node.y = prevNode.y;
+    }
+  }
+}
+
+function updateTree() {
+  const prevRoot = oldRoot;
   const root = getRoot();
+  mapCoords(root, prevRoot);
+
+  const linksUpdateDuration = 50;
+  const moveDuration = 1000;
+
+  // old layout: update links at old nodes positions
+  const linkEnter = enter =>
+    enter
+      .append("path")
+      .attr("d", getLinkPath)
+      .attr("opacity", 0)
+      .call(enter => enter.transition().duration(linksUpdateDuration).attr("opacity", 1));
+
+  const linkUpdate = update =>
+    update.call(update => update.transition().duration(linksUpdateDuration).attr("d", getLinkPath));
+
+  const linkExit = exit =>
+    exit.call(exit => exit.transition().duration(linksUpdateDuration).attr("opacity", 0).remove());
+
+  primaryLinks.selectAll("path").data(root.links(), getLinkKey).join(linkEnter, linkUpdate, linkExit);
+  secondaryLinks.selectAll("path").data(getSecondaryLinks(root), getLinkKey).join(linkEnter, linkUpdate, linkExit);
+
+  // new layout: move nodes with links to new positions
   const treeWidth = root.leaves().length * 50;
   const treeHeight = root.height * 50;
 
   const w = treeWidth - MARGINS.left - MARGINS.right;
   const h = treeHeight + 30 - MARGINS.top - MARGINS.bottom;
-  const treeLayout = d3.tree().size([w, h]);
 
-  renderTree(root, treeLayout);
+  const treeLayout = d3.tree().size([w, h]);
+  treeLayout(root.sort((a, b) => getSortIndex(a) - getSortIndex(b)));
+
+  primaryLinks
+    .selectAll("path")
+    .data(root.links(), getLinkKey)
+    .transition()
+    .duration(moveDuration)
+    .delay(linksUpdateDuration)
+    .attr("d", getLinkPath);
+
+  secondaryLinks
+    .selectAll("path")
+    .data(getSecondaryLinks(root), getLinkKey)
+    .transition()
+    .duration(moveDuration)
+    .delay(linksUpdateDuration)
+    .attr("d", getLinkPath);
+
+  nodes
+    .selectAll("g")
+    .data(root.descendants(), getNodeKey)
+    .transition()
+    .delay(linksUpdateDuration)
+    .duration(moveDuration)
+    .attr("transform", d => `translate(${d.x},${d.y})`);
 }
 
 function selectElement(d) {
   const dataElement = d.data;
 
+  const node = nodes.select(`g[data-id="${d.id}"]`);
   nodes.selectAll("g").style("outline", "none");
-  this.style.outline = "1px solid #c13119";
+  node.style("outline", "1px solid #c13119");
+
   byId("hierarchyTree_selected").style.display = "block";
   byId("hierarchyTree_infoLine").style.display = "none";
 
@@ -266,7 +338,8 @@ function selectElement(d) {
   byId("hierarchyTree_selectedCode").onchange = function () {
     if (this.value.length > 3) return tip("Abbreviation must be 3 characters or less", false, "error", 3000);
     if (!this.value.length) return tip("Abbreviation cannot be empty", false, "error", 3000);
-    nodes.select(`g[data-id="${d.id}"] > text`).text(this.value);
+
+    node.select("text").text(this.value);
     dataElement.code = this.value;
   };
 
@@ -288,7 +361,7 @@ function selectElement(d) {
       const filtered = dataElement.origins.filter(elementOrigin => elementOrigin !== origin);
       dataElement.origins = filtered.length ? filtered : [0];
       target.remove();
-      rerenderTree();
+      updateTree();
     };
   };
 
@@ -324,6 +397,7 @@ function selectElement(d) {
         </div>
       `;
     });
+
     byId("hierarchyTree_originSelector").innerHTML = /*html*/ `
       <form style="max-height: 35vh">
         ${selectableElementsHtml.join("")}
@@ -347,7 +421,7 @@ function selectElement(d) {
 
           dataElement.origins = [primary, ...secondary];
 
-          rerenderTree();
+          updateTree();
           createOriginButtons();
         },
         Cancel: () => {
@@ -365,6 +439,8 @@ function selectElement(d) {
 }
 
 function handleNoteEnter(d) {
+  if (d.depth === 0) return;
+
   this.classList.add("selected");
   onNodeEnter(d);
 
@@ -404,6 +480,7 @@ function dragToReorigin(from) {
     if (element.origins[0] === 0) element.origins = [];
     element.origins.push(newOrigin);
 
-    rerenderTree();
+    selectElement(from);
+    updateTree();
   });
 }
diff --git a/modules/religions-generator.js b/modules/religions-generator.js
index a213f728..b7b3464c 100644
--- a/modules/religions-generator.js
+++ b/modules/religions-generator.js
@@ -418,7 +418,7 @@ window.Religions = (function () {
       const folk = isFolkBased && religions.find(r => r.culture === culture && r.type === "Folk");
       if (folk && expansion === "culture" && folk.name.slice(0, 3) !== "Old") folk.name = "Old " + folk.name;
 
-      const origins = folk ? [folk.i] : getReligionsInRadius({x, y, r: 30, max: 2});
+      const origins = folk ? [folk.i] : getReligionsInRadius({x, y, r: 150 / count, max: 2});
       const expansionism = rand(3, 8);
       const baseColor = religions[culture]?.color || states[state]?.color || getRandomColor();
       const color = getMixedColor(baseColor, 0.3, 0);
@@ -451,7 +451,7 @@ window.Religions = (function () {
       if (religionsTree.find(x, y, s) !== undefined) continue; // to close to existing religion
 
       const culture = cells.culture[center];
-      const origins = getReligionsInRadius({x, y, r: 75, max: rand(0, 4)});
+      const origins = getReligionsInRadius({x, y, r: 300 / count, max: rand(0, 4)});
 
       const deity = getDeityName(culture);
       const name = getCultName(form, center);
diff --git a/modules/ui/editors.js b/modules/ui/editors.js
index 248099af..3cf31e5c 100644
--- a/modules/ui/editors.js
+++ b/modules/ui/editors.js
@@ -1174,18 +1174,18 @@ function refreshAllEditors() {
 // dynamically loaded editors
 async function editStates() {
   if (customization) return;
-  const Editor = await import("../dynamic/editors/states-editor.js?v=08062022");
+  const Editor = await import("../dynamic/editors/states-editor.js?v=12062022");
   Editor.open();
 }
 
 async function editCultures() {
   if (customization) return;
-  const Editor = await import("../dynamic/editors/cultures-editor.js?v=08062022");
+  const Editor = await import("../dynamic/editors/cultures-editor.js?v=12062022");
   Editor.open();
 }
 
 async function editReligions() {
   if (customization) return;
-  const Editor = await import("../dynamic/editors/religions-editor.js?v=080620222");
+  const Editor = await import("../dynamic/editors/religions-editor.js?v=12062022");
   Editor.open();
 }
diff --git a/versioning.js b/versioning.js
index 7bb4172f..21d29bf7 100644
--- a/versioning.js
+++ b/versioning.js
@@ -1,7 +1,7 @@
 "use strict";
 // version and caching control
 
-const version = "1.86.05"; // generator version, update each time
+const version = "1.86.06"; // generator version, update each time
 
 {
   document.title += " v" + version;

From ebe9acfa0df66a6b37491f94c9c4ac1baed13e5e Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Sun, 12 Jun 2022 22:34:04 +0300
Subject: [PATCH 6/6] chore: update hash for v1.86.06

---
 index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 3779d96d..3c9dcacf 100644
--- a/index.html
+++ b/index.html
@@ -108,7 +108,7 @@
       }
     </style>
 
-    <link rel="preload" href="index.css?v=06062022" as="style" onload="this.onload=null; this.rel='stylesheet'" />
+    <link rel="preload" href="index.css?v=12062022" as="style" onload="this.onload=null; this.rel='stylesheet'" />
     <link rel="preload" href="icons.css?v=04062022" as="style" onload="this.onload=null; this.rel='stylesheet'" />
     <link
       rel="preload"
@@ -7847,7 +7847,7 @@
     <script defer src="modules/ui/military-overview.js?v=29052022"></script>
     <script defer src="modules/ui/regiments-overview.js?v=29052022"></script>
     <script defer src="modules/ui/markers-overview.js?v=29052022"></script>
-    <script defer src="modules/ui/regiment-editor.js"></script>
+    <script defer src="modules/ui/regiment-editor.js?v=12062022"></script>
     <script defer src="modules/ui/battle-screen.js"></script>
     <script defer src="modules/ui/emblems-editor.js"></script>
     <script defer src="modules/ui/markers-editor.js"></script>