Windy/komga
1
0
Fork 0
mirror of https://github.com/gotson/komga.git synced 2025-01-09 04:08:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(webreader): align double pages according to reading direction

Browse Source 
closes #670
This commit is contained in:
Gauthier Roebroeck 2021-12-14 11:25:10 +08:00
parent 4a519379ee
commit 218fd79e51
1 changed files with 28 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
komga-webui/src/functions/book-spreads.ts
View File

@ -11,8 +11,12 @@ export function buildSpreads(pages: PageDtoWithUrl[], pageLayout: PagedReaderLay
const pagesClone = cloneDeep(pages)
let lastPages = undefined
if (pageLayout === PagedReaderLayout.DOUBLE_PAGES) {
spreads.push([pagesClone.shift()] as PageDtoWithUrl[])
if (pagesClone.length > 0) lastPages = [pagesClone.pop()] as PageDtoWithUrl[]
const firstPage = pagesClone.shift() as PageDtoWithUrl
spreads.push([createEmptyPage(firstPage), firstPage] as PageDtoWithUrl[])
if (pagesClone.length > 0) {
const lastPage = pagesClone.pop() as PageDtoWithUrl
lastPages = [lastPage, createEmptyPage(lastPage)] as PageDtoWithUrl[]
}
}
while (pagesClone.length > 0) {
const p = pagesClone.shift() as PageDtoWithUrl
@ -22,13 +26,13 @@ export function buildSpreads(pages: PageDtoWithUrl[], pageLayout: PagedReaderLay
if (pagesClone.length > 0) {
const p2 = pagesClone.shift() as PageDtoWithUrl
if (isPageLandscape(p2)) {
spreads.push([p])
spreads.push([p, createEmptyPage(p)])
spreads.push([p2])
} else {
spreads.push([p, p2])
}
} else {
spreads.push([p])
spreads.push([p, createEmptyPage(p)])
}
}
}
@ -38,3 +42,23 @@ export function buildSpreads(pages: PageDtoWithUrl[], pageLayout: PagedReaderLay
return pages.map(p => [p])
}
}
function createEmptyPage(page: PageDtoWithUrl): PageDtoWithUrl {
return {
url: createTransparentDataUrl(page?.width || 20, page?.height || 30),
} as PageDtoWithUrl
}
function createTransparentDataUrl(w: number, h: number): string {
const canvas = document.createElement('canvas')
canvas.width = w
canvas.height = h
const ctx = canvas.getContext('2d')
if (ctx) {
ctx.fillStyle = 'rgb(0,0,0,0)'
ctx.fillRect(0, 0, w, h)
}
return canvas.toDataURL()
}