Skip to content

Replace presentation with layout in Metadata #144

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 6 commits into
base: develop
Choose a base branch
from
Draft

Replace presentation with layout in Metadata #144

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0f36c26
Add Layout in Metadata
JayPanoz Jul 10, 2025
5e879a1
Implement effectiveLayout
JayPanoz Jul 10, 2025
b15614c
Remove presentation
JayPanoz Jul 10, 2025
dd7ddbf
Add page back in Properties
JayPanoz Jul 16, 2025
12a94f1
Add back leadingPage
JayPanoz Jul 18, 2025
5aaa040
Update EpubNavigator
JayPanoz Jul 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 21 additions & 21 deletions navigator/src/epub/EpubNavigator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { EPUBLayout, Link, Locator, Publication, ReadingProgression } from "@readium/shared";
import { Layout, Link, Locator, Profile, Publication, ReadingProgression } from "@readium/shared";
import { Configurable, ConfigurablePreferences, ConfigurableSettings, LineLengths, VisualNavigator } from "../";
import { FramePoolManager } from "./frame/FramePoolManager";
import { FXLFramePoolManager } from "./fxl/FXLFramePoolManager";
Expand Down Expand Up @@ -56,7 +56,7 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
private currentLocation!: Locator;
private lastLocationInView: Locator | undefined;
private currentProgression: ReadingProgression;
public readonly layout: EPUBLayout;
public readonly layout: Layout;

private _preferences: EpubPreferences;
private _defaults: EpubDefaults;
Expand Down Expand Up @@ -96,7 +96,7 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
constraint: this._settings.constraint
});

this.currentProgression = this.layout === EPUBLayout.reflowable
this.currentProgression = this.layout === Layout.reflowable
? (this._settings.scroll
? ReadingProgression.ttb
: pub.metadata.effectiveReadingProgression)
Expand All @@ -109,23 +109,23 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
this.resizeObserver.observe(this.container.parentElement || document.documentElement);
}

public static determineLayout(pub: Publication): EPUBLayout {
const presentation = pub.metadata.getPresentation();
if(presentation?.layout == EPUBLayout.fixed) return EPUBLayout.fixed;
public static determineLayout(pub: Publication): Layout {
const layout = pub.metadata.effectiveLayout;
if(layout === Layout.fixed) return Layout.fixed;
if(pub.metadata.otherMetadata && ("http://openmangaformat.org/schema/1.0#version" in pub.metadata.otherMetadata))
return EPUBLayout.fixed; // It's fixed layout even though it lacks presentation, although this should really be a divina
if(pub.metadata.otherMetadata?.conformsTo === "https://readium.org/webpub-manifest/profiles/divina")
return Layout.fixed; // It's fixed layout even though it lacks presentation, although this should really be a divina
if(pub.metadata?.conformsTo?.includes(Profile.DIVINA))
// TODO: this is temporary until there's a divina reader in place
return EPUBLayout.fixed;
return Layout.fixed;
// TODO other logic to detect fixed layout publications

return EPUBLayout.reflowable;
return Layout.reflowable;
}

public async load() {
if (!this.positions?.length)
this.positions = await this.pub.positionsFromManifest();
if(this.layout === EPUBLayout.fixed) {
if(this.layout === Layout.fixed) {
this.framePool = new FXLFramePoolManager(this.container, this.positions, this.pub);
this.framePool.listener = (key: CommsEventKey | ManagerEventKey, data: unknown) => {
this.eventListener(key, data);
Expand All @@ -144,7 +144,7 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
}

public get settings(): Readonly<EpubSettings> {
if (this.layout === EPUBLayout.fixed) {
if (this.layout === Layout.fixed) {
return Object.freeze({ ...this._settings });
} else {
// Given all the nasty issues moving auto-pagination to EpubSettings creates
Expand Down Expand Up @@ -178,7 +178,7 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
this._preferencesEditor = new EpubPreferencesEditor(this._preferences, this.settings, this.pub.metadata);
}

if (this.layout === EPUBLayout.fixed) {
if (this.layout === Layout.fixed) {
this.handleFXLPrefs(oldSettings, this._settings);
} else {
await this.updateCSS(true);
Expand Down Expand Up @@ -240,7 +240,7 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
// and the container may not be the entire width of the document/window
const parentEl = this.container.parentElement || document.documentElement;

if (this.layout === EPUBLayout.fixed) {
if (this.layout === Layout.fixed) {
this.container.style.width = `${ getContentWidth(parentEl) - this._settings.constraint }px`;
(this.framePool as FXLFramePoolManager).resizeHandler();
} else {
Expand Down Expand Up @@ -346,10 +346,10 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
}
} else console.log("Clicked on", element);
} else {
if(this.layout === EPUBLayout.fixed && (this.framePool as FXLFramePoolManager).doNotDisturb)
if(this.layout === Layout.fixed && (this.framePool as FXLFramePoolManager).doNotDisturb)
edata.doNotDisturb = true;

if(this.layout === EPUBLayout.fixed
if(this.layout === Layout.fixed
// TODO handle ttb/btt
&& (
this.currentProgression === ReadingProgression.rtl ||
Expand Down Expand Up @@ -408,7 +408,7 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
private determineModules() {
let modules = Array.from(ModuleLibrary.keys()) as ModuleName[];

if(this.layout === EPUBLayout.fixed) {
if(this.layout === Layout.fixed) {
return modules.filter((m) => FXLModules.includes(m));
} else modules = modules.filter((m) => ReflowableModules.includes(m));

Expand Down Expand Up @@ -450,7 +450,7 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
private async changeResource(relative: number): Promise<boolean> {
if (relative === 0) return false;

if(this.layout === EPUBLayout.fixed) {
if(this.layout === Layout.fixed) {
const p = this.framePool as FXLFramePoolManager;
const old = p.currentNumbers[0];
if(relative === 1) {
Expand Down Expand Up @@ -564,7 +564,7 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
}

public goBackward(_: boolean, cb: (ok: boolean) => void): void {
if(this.layout === EPUBLayout.fixed) {
if(this.layout === Layout.fixed) {
this.changeResource(-1);
cb(true);
} else {
Expand All @@ -580,7 +580,7 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
}

public goForward(_: boolean, cb: (ok: boolean) => void): void {
if(this.layout === EPUBLayout.fixed) {
if(this.layout === Layout.fixed) {
this.changeResource(1);
cb(true);
} else {
Expand All @@ -606,7 +606,7 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi

// Starting and ending position currently showing in the reader
get currentPositionNumbers(): number[] {
if(this.layout === EPUBLayout.fixed)
if(this.layout === Layout.fixed)
return (this.framePool as FXLFramePoolManager).currentNumbers;

return [this.currentLocator?.locations.position ?? 0, ...(this.lastLocationInView?.locations.position ? [this.lastLocationInView.locations.position] : [])];
Expand Down
10 changes: 5 additions & 5 deletions navigator/src/epub/fxl/FXLFramePoolManager.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { ModuleName } from "@readium/navigator-html-injectables";
import { Locator, Publication, ReadingProgression, Orientation, Page, Link, Spread } from "@readium/shared";
import { Locator, Publication, ReadingProgression, Page, Link } from "@readium/shared";
import { FrameCommsListener } from "../frame";
import FrameBlobBuider from "../frame/FrameBlobBuilder";
import { FXLFrameManager } from "./FXLFrameManager";
import { FXLPeripherals } from "./FXLPeripherals";
import { FXLSpreader } from "./FXLSpreader";
import { FXLSpreader, Orientation, Spread } from "./FXLSpreader";

const UPPER_BOUNDARY = 8;
const LOWER_BOUNDARY = 5;
Expand Down Expand Up @@ -47,7 +47,7 @@ export class FXLFramePoolManager {
this.container = container;
this.positions = positions;
this.pub = pub;
this.spreadPresentation = pub.metadata.getPresentation()?.spread || Spread.auto;
this.spreadPresentation = pub.metadata.otherMetadata?.spread || Spread.auto;

if(this.pub.metadata.effectiveReadingProgression !== ReadingProgression.rtl && this.pub.metadata.effectiveReadingProgression !== ReadingProgression.ltr)
// TODO support TTB and BTT
Expand Down Expand Up @@ -78,7 +78,7 @@ export class FXLFramePoolManager {

// this.pages.push(fm);
this.pool.set(link.href, fm);
fm.width = 100 / this.length * (link.properties?.getOrientation() === Orientation.landscape || link.properties?.otherProperties["addBlank"] ? this.perPage : 1);
fm.width = 100 / this.length * (link.properties?.otherProperties["orientation"] === Orientation.landscape || link.properties?.otherProperties["addBlank"] ? this.perPage : 1);
fm.height = this.height;
});
}
Expand Down Expand Up @@ -123,7 +123,7 @@ export class FXLFramePoolManager {
this.pool.forEach((frm, linkHref) => {
let i = this.pub.readingOrder.items.findIndex(l => l.href === linkHref);
const link = this.pub.readingOrder.items[i];
frm.width = 100 / this.length * (link.properties?.getOrientation() === Orientation.landscape || link.properties?.otherProperties["addBlank"] ? this.perPage : 1);
frm.width = 100 / this.length * (link.properties?.otherProperties["orientation"] === Orientation.landscape || link.properties?.otherProperties["addBlank"] ? this.perPage : 1);
frm.height = this.height;
if(!frm.loaded) return;
const spread = this.spreader.findByLink(link)!;
Expand Down
29 changes: 21 additions & 8 deletions navigator/src/epub/fxl/FXLSpreader.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,17 @@
import { Link, Links, Orientation, Page, Publication, ReadingProgression, Spread } from "@readium/shared";
import { Link, Links, Page, Publication, ReadingProgression } from "@readium/shared";

export enum Orientation {
auto = "auto",
landscape = "landscape",
portrait = "portrait",
}

export enum Spread {
auto = "auto",
both = "both",
none = "none",
landscape = "landscape",
}

export class FXLSpreader {
shift = true; // TODO getter
Expand All @@ -22,8 +35,8 @@ export class FXLSpreader {
});
// if(!orientation) item.Properties.Orientation = item.Width > item.Height ? "landscape" : "portrait";
}
const isLandscape = item.properties?.getOrientation() === Orientation.landscape ? true : false;
if((!item.properties?.getPage() || redo)) item.properties = item.properties?.add({
const isLandscape = item.properties?.otherProperties["orientation"] === Orientation.landscape ? true : false;
if((!item.properties?.otherProperties["page"] || redo)) item.properties = item.properties?.add({
"page": isLandscape ? // If a landscape image
"center" : // Center it
((((this.shift ? 0 : 1) + index - this.nLandscape) % 2) ?
Expand All @@ -44,21 +57,21 @@ export class FXLSpreader {
if(item.length > 1)
return; // Only left with single-page "spreads"
const single = item[0];
const orientation = single.properties?.getOrientation();
const orientation = single.properties?.otherProperties["orientation"];

// First page is landscape/spread means no shift
if(index === 0 && (orientation === Orientation.landscape || (orientation !== Orientation.portrait && ((single.width || 0) > (single.height || 0) || single.properties?.getSpread() === Spread.both))))
if(index === 0 && (orientation === Orientation.landscape || (orientation !== Orientation.portrait && ((single.width || 0) > (single.height || 0) || single.properties?.otherProperties["spread"] === Spread.both))))
this.shift = false;

// If last was a true single, and this spread is a center page (that's not special), something's wrong
if(wasLastSingle && single.properties?.getPage() === Page.center) {
if(wasLastSingle && single.properties?.otherProperties["page"] === Page.center) {
this.spreads[index - 1][0].addProperties({"addBlank": true});
/*if(single.findFlag("final"))
this.nLandscape++;*/
}

// If this single page spread is an orphaned component of a double page spread (and it's not the first page)
if(orientation === Orientation.portrait && single.properties?.getPage() !== "center" && single.properties?.otherProperties["number"] > 1)
if(orientation === Orientation.portrait && single.properties?.otherProperties["page"] !== "center" && single.properties?.otherProperties["number"] > 1)
wasLastSingle = true;
else
wasLastSingle = false;
Expand All @@ -72,7 +85,7 @@ export class FXLSpreader {
spine.items.forEach((item, index) => {
if(!index && this.shift) {
this.spreads.push([item]);
} else if(item.properties?.getPage() === Page.center) { // If a center (single) page spread, push immediately and reset current set
} else if(item.properties?.otherProperties["page"] === Page.center) { // If a center (single) page spread, push immediately and reset current set
if(currentSet.length > 0) this.spreads.push(currentSet);
this.spreads.push([item]);
currentSet = [];
Expand Down
Loading