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 <!-- <textarea id="displaycanto" name="PagineCanti" readonly
style="resize: none" class="blog-main flex mb0 pb0 bg-washed-blue bn" style="resize: none" class="blog-main flex mb0 pb0 bg-washed-blue bn"
rows="20" cols="35"></textarea> --> 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>--> <!-- <div id="displaycanto" name="PagineCanti" class="blog-main flex mb0 pb0 bg-washed-blue bn"></div>-->
<!-- </form> --> <!-- </form> -->

View File

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

View File

@ -221,6 +221,7 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) {
else else
document.getElementById(displayId).addEventListener('scroll', trackScrollCanto) document.getElementById(displayId).addEventListener('scroll', trackScrollCanto)
document.getElementById(displayId).addEventListener('resize', getDimensions)
window.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 bodyRatio = (document.body.clientHeight) / bodyWidth;
let winRatio = window.innerHeight / window.innerWidth; let winRatio = window.innerHeight / window.innerWidth;
//test //test
//test=document.getElementById(displayId).getBoundingClientRect()
//console.log(test) //bodyRatio = cantoplace.clientHeight/cantoplace.clientWidth;
bodyRatio = cantoplace.clientHeight/cantoplace.clientWidth;
if (mmplace!=null)
bodyRatio = 200/cantoplace.clientWidth;
//end test //end test
minimap.style.width = '60%';
minimap.style.width = '10%';
realScale = minimap.clientWidth / bodyWidth; realScale = minimap.clientWidth / bodyWidth;
//realScale = 130 / bodyWidth; console.log("minimap.clientWidth "+ (minimap.clientWidth))
console.log('window: '+minimap.clientWidth+' '+bodyWidth+' '+bodyRatio+ ' '+winRatio) wscale=0
console.log('id: '+minimap.clientWidth+' '+cantoplace.clientWidth+' '+(cantoplace.clientHeight/cantoplace.clientWidth) if (mmplace!=null){
+ ' '+(mmih/mmiw)) 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}%` minimapSize.style.paddingTop = `${bodyRatio * 100}%`
viewer.style.paddingTop = `${winRatio * 100}%`; viewer.style.paddingTop = `${(winRatio) * 100}%`;
minimapContent.style.transform = `scale(${realScale})`; minimapContent.style.transform = `scale(${realScale})`;