Decorations are duplicated/mirrored with changes in v3.3.0 #632
Description
Describe the bug
After updating to v3.3.0 I found that the decorations I applied to appear in the top corner of a page are duplicated (or mirrored) in the opposite corner of the page when displaying 2 pages side by side in landscape orientation. i.e.: each page shows two decorations (in both left and right top corners) instead of one.
By reverting a few lines of the changes in the EPUBNavigatorViewController function,
func spreadViewDidLoad(_ spreadView: EPUBSpreadView)
the issue was resolved.
Here is the spreadViewDidLoad function after my changes:
func spreadViewDidLoad(_ spreadView: EPUBSpreadView) {
Task {
let templates = config.decorationTemplates.reduce(into: [:]) { styles, item in
styles[item.key.rawValue] = item.value.json
}
guard let stylesJSON = serializeJSONString(templates) else {
log(.error, "Can't serialize decoration styles to JSON")
return
}
var script = "readium.registerDecorationTemplates(\(stylesJSON.replacingOccurrences(of: "\\n", with: " ")));\n"
script += decorationCallbacks
.compactMap { group, callbacks in
guard !callbacks.isEmpty else {
return nil
}
return "readium.getDecorations('\(group)').setActivable();"
}
.joined(separator: "\n")
await spreadView.evaluateScript("(function() {\n\(script)\n})();")
await withTaskGroup(of: Void.self) { tasks in
for link in spreadView.spread.links {
let href = link.url()
for (group, decorations) in self.decorations {
let decorations = decorations
.filter { $0.decoration.locator.href.isEquivalentTo(href) }
.map { DecorationChange.add($0.decoration) }
guard let script = decorations.javascript(forGroup: group, styles: self.config.decorationTemplates) else {
continue
}
tasks.addTask {
await spreadView.evaluateScript(script, inHREF: href)
}
}
}
}
}
}
Note: There is another issue where when in landscape orientation the right side page right edge is covered by the left side page.
How to reproduce?
I haven't tried this in the Test app, but essentially for my decorations I have a images of a corner (right or left) with a little '+' and a diagonal dotted line. The decoration is applied to the either the top right or top left corner of the page depending on whether the page is the right side or left side page of the two page display. However, as of v3.3.0 even though only one decoration is applied for a given page, it shows two decorations for the page.
- Open and epub3 FXL
- Rotate the device to landscape orientation
- Note the decorations are duplicated/mirrored on each page displayed
Readium version
3.3.0
OS version
iOS 18.5
Testing device
iPhone 16 Pro
Environment
macOS: 15.5
platform: arm64
Xcode 16.4, Build version 16F6Additional context
Below is a sample list of decorations applied where this issue occurs. I've attached text file with the complete list for one of the books.
[ReadiumNavigator.Decoration(id: "bnr2-bookmark-inactive-1", locator: {"href":"OPS/page-0001.xhtml","locations":{"cssSelector":"body","position":1,"progression":0,"totalProgression":0},"type":"application/xhtml+xml"}, style: ReadiumNavigator.Decoration.Style(id: ReadiumNavigator.Decoration.Style.Id(rawValue: "bookmarkLeft"), config: Optional(AnyHashable((extension in BNR2Reader):ReadiumNavigator.Decoration.Style.ImageConfig(relativeUrl: Optional("/readium/images/com.bn.R2Reader.bookmarkLeftCorner.inactive.png"), imageBase64Data: nil, isActive: false)))), userInfo: [:]), ReadiumNavigator.Decoration(id: "bnr2-bookmark-inactive-2", locator: {"href":"OPS/blank-page.xhtml","locations":{"cssSelector":"body","position":2,"progression":0,"totalProgression":0.038461538461538464},"type":"application/xhtml+xml"}, style: ReadiumNavigator.Decoration.Style(id: ReadiumNavigator.Decoration.Style.Id(rawValue: "bookmarkRight"), config: Optional(AnyHashable((extension in BNR2Reader):ReadiumNavigator.Decoration.Style.ImageConfig(relativeUrl: Optional("/readium/images/com.bn.R2Reader.bookmarkRightCorner.inactive.png"), imageBase64Data: nil, isActive: false)))), userInfo: [:]), ReadiumNavigator.Decoration(id: "bnr2-bookmark-inactive-3", locator: {"href":"OPS/page-0002.xhtml","locations":{"cssSelector":"body","position":3,"progression":0,"totalProgression":0.076923076923076927},"type":"application/xhtml+xml"}, style: ReadiumNavigator.Decoration.Style(id: ReadiumNavigator.Decoration.Style.Id(rawValue: "bookmarkLeft"), config: Optional(AnyHashable((extension in BNR2Reader):ReadiumNavigator.Decoration.Style.ImageConfig(relativeUrl: Optional("/readium/images/com.bn.R2Reader.bookmarkLeftCorner.inactive.png"), imageBase64Data: nil, isActive: false)))), userInfo: [:]),
...