backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-17 09:41:24 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

UI improvement for hierarchy tree (#834)

Browse source 
* 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
This commit is contained in:
Thomas Robert 2022-06-16 17:15:07 +02:00 • committed by GitHub
parent a7cb464b55
commit 8c96a9754d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 31 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

30
modules/dynamic/hierarchy-tree.js
View file

@ -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", () => {