mirror of
https://github.com/john-okeefe/foliate-js.git
synced 2026-09-09 11:29:14 -04:00
john-okeefe
aba68d8723
Adds a parallel annotation pipeline for PDF/comic pages (the CFI
overlayer pipeline only exists for the reflowable paginator):
- addRectAnnotation({key, index, rects, color}) /
removeRectAnnotation(key): rects are page-fraction [x,y,w,h]
quads, stored per key and rendered into a full-bleed SVG injected
into the page iframe. The SVG uses viewBox 0 0 100 100 with
preserveAspectRatio none, so fraction rects stay aligned through
iframe CSS-zoom (comics), the host transform-based pan/zoom, and
PDF hi-res re-renders (pdf.js rebuilds canvas/textLayer but not
body children) — no re-anchoring hooks needed anywhere.
- Frames carry their section index; annotations re-render into each
freshly created iframe (#showSpread destroys and recreates frames
on every spread change).
- Clicks are hit-tested against the fraction rects (in iframe
coordinate space, denominator = img or documentElement bounding
rect so PDF's devicePixelRatio transform cancels) and emit
show-rect-annotation with host-space popover coordinates. Skipped
while a text selection is active so drag-selecting text doesn't
pop the editor.
- Comic page img is now display:block so the document box equals
the image box (no inline-baseline gap inflating denominators).
46 lines
1.8 KiB
JavaScript
46 lines
1.8 KiB
JavaScript
export const makeComicBook = ({ entries, loadBlob, getSize }, file) => {
|
|
const cache = new Map()
|
|
const urls = new Map()
|
|
const load = async name => {
|
|
if (cache.has(name)) return cache.get(name)
|
|
const src = URL.createObjectURL(await loadBlob(name))
|
|
const page = URL.createObjectURL(
|
|
new Blob([`<!DOCTYPE html><html><head><meta charset="utf-8"></head><body style="margin: 0; touch-action: none"><img src="${src}" style="display: block; image-rendering: high-quality"></body></html>`], { type: 'text/html' }))
|
|
urls.set(name, [src, page])
|
|
cache.set(name, page)
|
|
return page
|
|
}
|
|
const unload = name => {
|
|
urls.get(name)?.forEach?.(url => URL.revokeObjectURL(url))
|
|
urls.delete(name)
|
|
cache.delete(name)
|
|
}
|
|
|
|
const exts = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg', '.jxl', '.avif']
|
|
const files = entries
|
|
.map(entry => entry.filename)
|
|
.filter(name => exts.some(ext => name.endsWith(ext)))
|
|
.sort(new Intl.Collator([], { numeric: true }).compare)
|
|
if (!files.length) throw new Error('No supported image files in archive')
|
|
|
|
const book = {}
|
|
book.getCover = () => loadBlob(files[0])
|
|
book.metadata = { title: file.name }
|
|
book.sections = files.map(name => ({
|
|
id: name,
|
|
load: () => load(name),
|
|
unload: () => unload(name),
|
|
size: getSize(name),
|
|
}))
|
|
book.toc = files.map(name => ({ label: name, href: name }))
|
|
book.rendition = { layout: 'pre-paginated' }
|
|
book.resolveHref = href => ({ index: book.sections.findIndex(s => s.id === href) })
|
|
book.splitTOCHref = href => [href, null]
|
|
book.getTOCFragment = doc => doc.documentElement
|
|
book.destroy = () => {
|
|
for (const arr of urls.values())
|
|
for (const url of arr) URL.revokeObjectURL(url)
|
|
}
|
|
return book
|
|
}
|