Skip to content

Commit

Permalink
refactor: replace and redo stemma selectors
Browse files Browse the repository at this point in the history
  • Loading branch information
@jorisvanzundert
jorisvanzundert committed May 23, 2024
1 parent e5502b1 commit 9119a1e
Show file tree
Hide file tree
Showing 7 changed files with 107 additions and 67 deletions.
4 changes: 2 additions & 2 deletions frontend/www/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,8 +144,8 @@
</main>

<div
id="sidebar_properties"
class="col-md-3 d-md-block col-lg-3 bg-light sidebar_properties"
id="sidebar-properties"
class="col-md-3 d-md-block col-lg-3 bg-light sidebar-properties"
>
<property-table-view id="property-table-view"></property-table-view>
<section-properties-view></section-properties-view>
Expand Down
42 changes: 35 additions & 7 deletions frontend/www/src/css/dashboard-stemmaweb.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,25 @@
font-size: 1em;
}

#stemma-buttons-container {
width: 100%;
}

edit-stemma-buttons {
display: flex;
width: 100%;
display: flex;
align-items: flex-start;
}

#stemma-selector-buttons {
width: 50%;
display: flex;
justify-content: left;
}

#edit-stemma-buttons-right {
width: 50%;
display: flex;
justify-content: right;
}

Expand All @@ -42,6 +58,7 @@ edit-stemma-buttons a.greyed-out div {
}

#stemma-editor-graph-container {
height: 80vh;
display: flex;
}

Expand Down Expand Up @@ -142,33 +159,44 @@ edit-stemma-buttons a.greyed-out div {
padding-left: 1.8em;
}

#graph_container {
#graph-container {
z-index: 810;
width: 100%;
transition: width 0.2s ease-in-out;
}

#graph_container.shrunken {
#graph-container.shrunken {
width: 50%;
transition: width 0.4s ease-in-out;
}

#graph-area {
background-color: white;
width: 100%;
height: 40vw;
/* height: 40vw; */
height: 90%;
padding: 1em;
}

#graph_container #graph-area #graph svg {
#graph-container #graph-area #graph svg {
width: 100%;
transition: width 0.2s ease-in-out;
}

#graph_container.shrunken #graph-area #graph svg {
#graph-container.shrunken #graph-area #graph svg {
width: 100%;
transition: width 0.4s ease-in-out;
}

#stemma-selectors {
display: flex;
justify-content: flex-start;
}

.stemma-selector.selected svg {
fill: rgb(210,210,210);
}

@media (min-width: 200px) {
.ms-md-perc {
margin-left: 24.6% !important;
Expand All @@ -180,7 +208,7 @@ edit-stemma-buttons a.greyed-out div {
}
}

.sidebar_properties {
.sidebar-properties {
background: none;
position: fixed;
top: 0;
Expand Down
2 changes: 1 addition & 1 deletion frontend/www/src/js/modules/dashboard/tradition/editProperties.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ class EditProperties extends HTMLElement {
* @todo: Add responsiveness on resize.
*/
#createDialogStyle() {
const width = $('sidebar_properties').getBoundingClientRect().width;
const width = $('sidebar-properties').getBoundingClientRect().width;
return (
`margin-right: 0px; width: ${width}px; margin-top: 50px;`
);
Expand Down
2 changes: 1 addition & 1 deletion frontend/www/src/js/modules/dashboard/tradition/section/editSectionProperties.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ class EditSectionProperties extends HTMLElement {
* @todo: Add responsiveness on resize.
*/
#createDialogStyle() {
const width = $('sidebar_properties').getBoundingClientRect().width;
const width = $('sidebar-properties').getBoundingClientRect().width;
const top = $('property-table-view').getBoundingClientRect().bottom;
return (
`margin-right: 0px; width: ${width}px; margin-top: ${top}px;`
Expand Down
67 changes: 36 additions & 31 deletions frontend/www/src/js/modules/dashboard/tradition/stemma/editStemma.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,9 +107,7 @@ class EditStemma extends HTMLElement {

toggleStemmaEditor() {
const stemmaEditorContainerElement = document.querySelector( '#stemma-editor-container' );
const stemmaSelectorContainerElement = document.querySelector( '#stemma-selector-container')
stemmaEditorContainerElement.classList.toggle( 'expanded' );
stemmaSelectorContainerElement.classList.toggle( 'show' )
if( stemmaEditorContainerElement.classList.contains( 'expanded' ) ){
// Here we append an almost invisible backdrop to the document. Its z-index is large and
// only the z-index of the editor and graph panel is larger. However, both have a lower
Expand All @@ -122,7 +120,7 @@ class EditStemma extends HTMLElement {
// <div id="stemma-editor-graph-container-modal-backdrop"></div>
// const stemmaEditorModalBackdrop = document.querySelector( '#stemma-editor-graph-container-modal-backdrop' );
}
const graphContainerElement = document.querySelector( '#graph_container' );
const graphContainerElement = document.querySelector( '#graph-container' );
graphContainerElement.classList.toggle( 'shrunken' );
this.render();
}
Expand Down Expand Up @@ -211,10 +209,11 @@ class EditStemma extends HTMLElement {

cancelEdits() {
// reset the stemma rendered to the stemma in current state
const { tradition, selectedStemma } = STEMMA_STORE.state;
const { tradition, availableStemmata, selectedStemma } = STEMMA_STORE.state;
// Render the stemma, or an empty one if there's none.
stemmaRenderer.renderStemma( tradition, selectedStemma || { dot: 'digraph {}' } );
this.toggleStemmaEditor();
TraditionView.renderStemmaSelectors( availableStemmata );
}

/** @param {BaseResponse<T>} resp */
Expand Down Expand Up @@ -286,33 +285,39 @@ class EditStemma extends HTMLElement {

render() {
this.innerHTML = `
<a
id="edit-stemma-button-link"
class="link-secondary"
href="#"
aria-label="Edit this stemma">
<div>
${feather.icons['edit'].toSvg()}
</div>
</a>
<a
id="add-stemma-button-link"
class="link-secondary"
href="#"
aria-label="Add a stemma to this tradition">
<div>
${feather.icons['plus-circle'].toSvg()}
</div>
</a>
<a
id="delete-stemma-button-link"
class="link-secondary"
href="#"
aria-label="delete this stemma">
<div class="delete-stemma-danger">
${feather.icons['trash'].toSvg()}
</div>
</a>
<div id="stemma-selector-buttons" class="collapse show">
<div id="stemma-selectors">
</div>
</div>
<div id="edit-stemma-buttons-right">
<a
id="edit-stemma-button-link"
class="link-secondary"
href="#"
aria-label="Edit this stemma">
<div>
${feather.icons['edit'].toSvg()}
</div>
</a>
<a
id="add-stemma-button-link"
class="link-secondary"
href="#"
aria-label="Add a stemma to this tradition">
<div>
${feather.icons['plus-circle'].toSvg()}
</div>
</a>
<a
id="delete-stemma-button-link"
class="link-secondary"
href="#"
aria-label="delete this stemma">
<div class="delete-stemma-danger">
${feather.icons['trash'].toSvg()}
</div>
</a>
</div>
`;
this.greyOut();
this.addEditStemmaButtonListeners();
Expand Down
20 changes: 19 additions & 1 deletion frontend/www/src/js/modules/dashboard/tradition/stemma/stemmaRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,25 @@ class StemmaRenderer {
} );
Download.set_downloads( stemma.dot );
}


resizeSVG() {
const margin = 14;
const bbrect = document.querySelector( '#graph-area' ).getBoundingClientRect();
const width = bbrect['width'];
const height = bbrect['height'];
const graphArea = d3.select('#graph-area');
const svg = graphArea.select("#graph").selectWithoutDataPropagation("svg");
svg
.transition()
.duration(700)
.attr("width", width - 2*margin)
.attr("height", height - 2*margin);
// var d = svg.datum();
// d.attributes['width'] = width - margin;
// d.attributes['height'] = height - margin;
}

}

const stemmaRenderer = new StemmaRenderer();
d3.select( window ).on( 'resize', stemmaRenderer.resizeSVG );
37 changes: 13 additions & 24 deletions frontend/www/src/js/modules/dashboard/tradition/traditionView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ class TraditionView extends HTMLElement {
static renderStemmaSelectors( stemmata ) {
// Here we put in the slide indicators that will allow the user to
// switch to different stemmata.
const stemmaSelector = d3.select('#stemma-selector');
const stemmaSelector = d3.select('#stemma-selectors');
stemmaSelector.selectAll('*').remove();
stemmaSelector
.selectAll( 'span' )
Expand All @@ -83,10 +83,10 @@ class TraditionView extends HTMLElement {
const selectedIndex = STEMMA_STORE.selectedIndex;
const isSelected =
(selectedIndex === -1 && i === 0) || selectedIndex === i;
const svg = isSelected
? svg_slide_indicator_active
: svg_slide_indicator;
return `<div data-index="${i}">${svg}</div>`;
const selectedAttr = isSelected
? " selected"
: "";
return `<div class="stemma-selector link-secondary${selectedAttr}" data-index="${i}">${feather.icons['file'].toSvg()}</div>`;
})
.on( 'click', function (e, d) {
// Update the state with the selected stemma
Expand All @@ -96,16 +96,13 @@ class TraditionView extends HTMLElement {

render() {
this.innerHTML = `
<div
class="d-flex justify-content-between flex-wrap align-items-center pt-2 pb-1 border-bottom"
>
<div class="d-flex justify-content-between flex-wrap align-items-center pt-2 pb-1 border-bottom">
<tradition-title></tradition-title>
<div class="d-flex justify-content-end ms-5 pt-3 mb-2 lex-nowrap" id="stemma_buttons_container">
<div class="d-flex justify-content-end ms-5 pt-3 mb-2 lex-nowrap" id="stemma-buttons-container">
<stemma-buttons></stemma-buttons>
</div>
</div>
<div id="stemma-editor-graph-container">
<div id="stemma-editor-container">
Expand All @@ -115,25 +112,17 @@ class TraditionView extends HTMLElement {
</div>
</div>
<div id="graph_container">
<div id="graph-container">
<edit-stemma-buttons></edit-stemma-buttons>
<div class="my-4 w-100" id="graph-area">
<div class="" id="graph-area">
</div>
<div id="stemma-selector-container" class="collapse show">
<div
class="my-4 w-100 d-flex justify-content-center"
id="stemma-selector"
>
<!-- svg_slide_indicators go here -->
</div>
</div>
</div>
</div>
`;
}
`;
};

}

customElements.define( 'tradition-view', TraditionView );

0 comments on commit 9119a1e

Please sign in to comment.