resizing minimap, in progress

This commit is contained in:
cesare 2022-11-15 17:38:18 +01:00
parent 70534a88b2
commit a43e2c6ec0
3 changed files with 25 additions and 17 deletions

View File

@ -640,7 +640,7 @@
<!-- <textarea id="displaycanto" name="PagineCanti" readonly
style="resize: none" class="blog-main flex mb0 pb0 bg-washed-blue bn"
rows="20" cols="35"></textarea> -->
<div class=" blog-main overflow-auto p-3 border text-muted" id="displaycanto" style="max-width: 500px; max-height: 500px;">
<div class=" blog-main overflow-auto p-3 border text-muted" target='area' id="displaycanto" style="max-width: 500px; max-height: 800px;">
<!-- <div id="displaycanto" name="PagineCanti" class="blog-main flex mb0 pb0 bg-washed-blue bn"></div>-->
<!-- </form> -->

View File

@ -225,7 +225,7 @@ p{
/*position: fixed;*/
top: 160px;
left: 600px;
min-width: 220px;
min-width: 60px;
z-index: 100;
}
@ -240,7 +240,7 @@ p{
.minimap_viewer {
width: 25%;
width: 15%;
position:absolute;

View File

@ -221,6 +221,7 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) {
else
document.getElementById(displayId).addEventListener('scroll', trackScrollCanto)
document.getElementById(displayId).addEventListener('resize', getDimensions)
window.addEventListener('resize', getDimensions)
@ -238,26 +239,33 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) {
let bodyRatio = (document.body.clientHeight) / bodyWidth;
let winRatio = window.innerHeight / window.innerWidth;
//test
//test=document.getElementById(displayId).getBoundingClientRect()
//console.log(test)
bodyRatio = cantoplace.clientHeight/cantoplace.clientWidth;
if (mmplace!=null)
bodyRatio = 200/cantoplace.clientWidth;
//bodyRatio = cantoplace.clientHeight/cantoplace.clientWidth;
//end test
minimap.style.width = '10%';
minimap.style.width = '60%';
realScale = minimap.clientWidth / bodyWidth;
//realScale = 130 / bodyWidth;
console.log("minimap.clientWidth "+ (minimap.clientWidth))
console.log('window: '+minimap.clientWidth+' '+bodyWidth+' '+bodyRatio+ ' '+winRatio)
console.log('id: '+minimap.clientWidth+' '+cantoplace.clientWidth+' '+(cantoplace.clientHeight/cantoplace.clientWidth)
+ ' '+(mmih/mmiw))
wscale=0
if (mmplace!=null){
wscale=realScale
//realScale = minimap.clientWidth / cantoplace.clientWidth;
}
/*
window: 71 1148 0.7082152974504249 0.44860627177700346
id: 71 706 0.7082152974504249 0.7079726212827898
*/
console.log('window, realscale:'+realScale+' w.bW: '+bodyWidth+' bodyRatio'+bodyRatio+ ' winRatio:'+winRatio)
console.log('id, realscale: '+realScale+' cp.bW:'+cantoplace.clientWidth+' cp.bodyRatio'+(cantoplace.clientHeight/cantoplace.clientWidth)
+ ' cp.winratio'+(mmih/mmiw))
minimapSize.style.paddingTop = `${bodyRatio * 100}%`
viewer.style.paddingTop = `${winRatio * 100}%`;
minimapSize.style.paddingTop = `${bodyRatio * 100}%`
viewer.style.paddingTop = `${(winRatio) * 100}%`;
minimapContent.style.transform = `scale(${realScale})`;