Skip to content

Commit

Permalink
New: Some display errors when applying global zoom
Browse files Browse the repository at this point in the history
  • Loading branch information
@ollm
ollm committed Oct 13, 2023
1 parent f831749 commit 92b28c2
Show file tree
Hide file tree
Showing 4 changed files with 67 additions and 40 deletions.
3 changes: 2 additions & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
- Wrong cache folder in windows causing some bugs [`8b97435`](https://github.com/ollm/OpenComic/commit/dd6facaf67343185fa06b2377fdc64e66ad9090d)
- Extract large RAR and ZIP files blocks the app for a while [`adbdced`](https://github.com/ollm/OpenComic/commit/adbdceda278e6184bc477581be9a25b8fc0f166b)
- RAR error on extract with files some special chars (Changed unrar to node-unrar-js) [`694fe27`](https://github.com/ollm/OpenComic/commit/694fe274982c0a9ad2421c6b226abceae1602c3a)
- Cannot open filtered files with the keyboard
- Cannot open filtered files with the keyboard [`f831749`](https://github.com/ollm/OpenComic/commit/f8317499a40e6fa45a75988ee1bea31a9135c9bf)
- Some display errors when applying global zoom

## [v1.0.0-beta.3](https://github.com/ollm/OpenComic/releases/tag/v1.0.0-beta.3) (09-10-2023)

Expand Down
5 changes: 0 additions & 5 deletions scripts/dom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -905,11 +905,6 @@ function loadRecentlyOpened(animation = true)

generateAppMenu();

template.loadContentRight('index.content.right.loading.html', animation);
template.loadHeader('recently.opened.header.html', animation);
template.loadGlobalElement('general.elements.menus.html', 'menus');
floatingActionButton(false);

recentlyOpened.load(animation);

if(readingActive)
Expand Down
86 changes: 55 additions & 31 deletions scripts/reading.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -706,6 +706,8 @@ function changeHeaderButtons(scrollInStart = null, scrollInEnd = null)
//Go to a specific comic image (Left menu)
function goToImageCL(index, animation = true, fromScroll = false)
{
if(!onReading) return;

render.focusIndex(index);
filters.focusIndex(index);

Expand Down Expand Up @@ -1436,7 +1438,7 @@ function showPreviousComic(mode, animation = true, invert = false)
}
}

var currentScale = 1, scalePrevData = {tranX: 0, tranX2: 0, tranY: 0, tranY2: 0, scale: 1, scrollTop: 0}, originalRect = false, originalRectReadingBody = false, haveZoom = false, currentZoomIndex = false, applyScaleST = false, zoomingIn = false, prevAnime = false;
var currentScale = 1, scalePrevData = {tranX: 0, tranX2: 0, tranY: 0, tranY2: 0, scale: 1, scrollTop: 0}, originalRect = false, originalRectReadingBody = false, originalRect2 = false, originalRectReadingBody2 = false, haveZoom = false, currentZoomIndex = false, applyScaleST = false, zoomingIn = false, prevAnime = false;

function applyScaleScrollAndHeight()
{
Expand All @@ -1457,7 +1459,7 @@ function applyScale(animation = true, scale = 1, center = false, zoomOut = false
}
else
{
var currentRect = template.contentRight('.image-position'+(currentIndex - 1)).get(0).getBoundingClientRect();
let currentRect = template.contentRight('.image-position'+(currentIndex - 1)).get(0).getBoundingClientRect();

if(currentRect.top > currentPageXY.y && (currentIndex - 2) >= 0)
{
Expand All @@ -1483,8 +1485,10 @@ function applyScale(animation = true, scale = 1, center = false, zoomOut = false
else
template.barHeader('.button-reset-zoom').attr('hover-text', language.menu.view.resetZoom).html('zoom_out_map');

let content = template.contentRight().children();
content.stop(true);
let contentRight = template._contentRight();

let content = contentRight.firstElementChild;
$(content).stop(true);

clearTimeout(applyScaleST);

Expand All @@ -1495,81 +1499,98 @@ function applyScale(animation = true, scale = 1, center = false, zoomOut = false

if(originalRect === false)
{
originalRect = template.contentRight('.reading-body').get(0).getBoundingClientRect();
originalRectReadingBody = template.contentRight().children().get(0).getBoundingClientRect();
originalRect = originalRect2 = contentRight.querySelector('.reading-body').getBoundingClientRect();
originalRectReadingBody = content.getBoundingClientRect();
}
else if(originalRect2 === false)
{
originalRect2 = contentRight.querySelector('.reading-body').getBoundingClientRect();
}

scrollTop = content.scrollTop;
scrollHeight = content.scrollHeight;

scrollTop = content.scrollTop();
let _scale = scalePrevData._scale ? scale / scalePrevData._scale : scale;

let pageX = currentPageXY.x - originalRect.left;
let pageY = currentPageXY.y + scrollTop - originalRectReadingBody.top;
let scaleOffset = 1 / scale;

let addX = (0.5 - (pageX / originalRect.width)) * originalRect.width;
let addY = (0.5 - (pageY / originalRect.height)) * originalRect.height;
let pageX = currentPageXY.x - originalRect2.left;
let pageY = currentPageXY.y - originalRectReadingBody.top;

let addX = (0.5 - (pageX / originalRect2.width)) * originalRect2.width;
let addY = pageY;

if(center)
{
addX = 0;
addY = (originalRect.height / 2 - originalRectReadingBody.height / 2) - scrollTop;

//if(addY > 0)
// addY = 0;
addY = originalRectReadingBody.height / 2;
}

translateX = (scalePrevData.tranX / scalePrevData.scale * scale) + (addX / scalePrevData.scale * (scale - scalePrevData.scale));
translateY = (scalePrevData.tranY / scalePrevData.scale * scale) + (addY / scalePrevData.scale * (scale - scalePrevData.scale));

if(zoomOut)
translateX = scalePrevData.tranX * (scale - 1) / (scalePrevData.scale - 1);

let scaleOffsetY = (originalRect2.height * _scale - originalRect2.height);

translateY = -(scaleOffsetY * (scrollTop / scrollHeight));
translateY = translateY - (addY * (scaleOffsetY / originalRect2.height));

if(translateY > scrollTop)
translateY = scrollTop;
else if(originalRect2.height * _scale + translateY < scrollTop + originalRectReadingBody.height)
translateY = (scrollTop + originalRectReadingBody.height) - originalRect2.height * _scale;

if(scale <= 1)
{
translateX = 0;
if(scale < 1) translateY = 0;
haveZoom = false;
}
else
{
haveZoom = true;
}

template.contentRight('.reading-body > div').css({
dom.this(contentRight).find('.reading-body > div').css({
transition: 'transform '+animationDurationS+'s, z-index '+animationDurationS+'s',
transform: 'translateX('+app.roundDPR(translateX)+'px) translateY('+app.roundDPR(translateY)+'px) scale('+scale+')',
transformOrigin: 'center center',
transformOrigin: 'top center',
zIndex: 1,
// willChange: scale == 1 ? '' : 'transform',
});

applyScaleST = setTimeout(function() {

let scrollTop = content.scrollTop();
let scrollTop = content.scrollTop;

let translateY = (originalRect.height * scale - originalRect.height) / 2;
let translateY = 0;

template.contentRight('.reading-body').css({
dom.this(contentRight).find('.reading-body').css({
height: (scale == 1 ? '' : (originalRect.height * scale)+'px'),
});

template.contentRight('.reading-body > div').css({
dom.this(contentRight).find('.reading-body > div').css({
transition: 'transform 0s, z-index 0s',
transform: 'translateX('+app.roundDPR(scalePrevData.tranX)+'px) translateY('+app.roundDPR(translateY)+'px) scale('+scale+')',
});

content.scrollTop(scrollTop + (translateY - scalePrevData.tranY));
content.scrollTop = scrollTop + (translateY - scalePrevData.tranY);

scalePrevData.tranY = translateY;

calculateView();
disableOnScroll(false);
zoomingIn = false;

originalRect2 = false;

if(scale == 1)
{
originalRect = false;
currentZoomIndex = false;
}

scalePrevData._scale = scale;

fixBlurOnZoom(scale);

}, animationDurationS * 1000 + 100);
Expand All @@ -1578,8 +1599,8 @@ function applyScale(animation = true, scale = 1, center = false, zoomOut = false
{
if(originalRect === false)
{
originalRect = template.contentRight('.image-position'+currentZoomIndex).get(0).getBoundingClientRect();
originalRectReadingBody = template.contentRight().children().get(0).getBoundingClientRect();
originalRect = contentRight.querySelector('.image-position'+currentZoomIndex).getBoundingClientRect();
originalRectReadingBody = content.getBoundingClientRect();
}

if(!zoomOut)
Expand Down Expand Up @@ -1616,7 +1637,7 @@ function applyScale(animation = true, scale = 1, center = false, zoomOut = false
haveZoom = true;
}

template.contentRight('.image-position'+currentZoomIndex).css({
dom.this(contentRight).find('.image-position'+currentZoomIndex, true).css({
transition: 'transform '+animationDurationS+'s, z-index '+animationDurationS+'s',
transform: 'translateX('+app.roundDPR(translateX)+'px) translateY('+app.roundDPR(translateY)+'px) scale('+scale+')',
transformOrigin: 'center center',
Expand All @@ -1643,6 +1664,7 @@ function applyScale(animation = true, scale = 1, center = false, zoomOut = false
tranY: translateY,
tranY2: translateY,
scale: scale,
_scale: scalePrevData._scale,
scrollTop: scrollTop,
};

Expand Down Expand Up @@ -1805,23 +1827,25 @@ function dragZoom(x, y)
else if(y < minY)
y = minY;

let contentRight = template._contentRight();

if(config.readingGlobalZoom && readingViewIs('scroll'))
{
scalePrevData.tranX = zoomMoveData.tranX = x;
zoomMoveData.tranY = scalePrevData.tranY;

template.contentRight('.reading-body > div').css({
dom.this(contentRight).find('.reading-body > div').css({
transition: 'transform 0s, z-index 0s',
transform: 'translateX('+app.roundDPR(x)+'px) translateY('+app.roundDPR(scalePrevData.tranY)+'px) scale('+scalePrevData.scale+')',
transformOrigin: 'center center',
transformOrigin: 'top center',
});
}
else
{
zoomMoveData.tranX = x;
zoomMoveData.tranY = y;

template.contentRight('.image-position'+currentZoomIndex).css({
dom.this(contentRight).find('.image-position'+currentZoomIndex, true).css({
transition: 'transform 0s, z-index 0s',
transform: 'translateX('+app.roundDPR(x)+'px) translateY('+app.roundDPR(y)+'px) scale('+scalePrevData.scale+')',
transformOrigin: 'center center',
Expand Down
13 changes: 10 additions & 3 deletions scripts/recently-opened.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@ async function load(animation = true, content = false)
{
dom.indexPathControl(false, false, false, false, true);

template.loadContentRight('index.content.right.loading.html', animation);
template.loadHeader('recently.opened.header.html', animation);

let now = Date.now();

let sort = config.sortRecentlyOpened;
let sortInvert = config.sortInvertRecentlyOpened;
let foldersFirst = config.foldersFirstRecentlyOpened;
Expand Down Expand Up @@ -96,7 +101,7 @@ async function load(animation = true, content = false)
comics[key].readingProgress = readingProgress[comics[key].path] || {lastReading: 0};
}

comics.sort(function (a, b) {
comics.sort(function(a, b) {
return (sortInvert) ? -(dom.orderBy(a, b, order, orderKey, orderKey2)) : dom.orderBy(a, b, order, orderKey, orderKey2);
});
}
Expand All @@ -105,14 +110,16 @@ async function load(animation = true, content = false)
handlebarsContext.comicsReadingProgress = false;
dom.setCurrentPageVars('recently-opened');

template.loadContentRight('index.content.right.'+config.viewRecentlyOpened+'.html', animation);
if(Date.now() - now < 300)
template._contentRight().firstElementChild.innerHTML = template.load('index.content.right.'+config.viewRecentlyOpened+'.html');
else
template.loadContentRight('index.content.right.'+config.viewRecentlyOpened+'.html', animation);

cache.resumeQueue();
queue.resume('folderThumbnails');

handlebarsContext.headerTitle = false;
handlebarsContext.headerTitlePath = false;
template.loadHeader('recently.opened.header.html', animation);

if(!content)
{
Expand Down

0 comments on commit 92b28c2

Please sign in to comment.