Skip to content
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

Fixed a bug in line annotations when showing more #25

Merged
merged 4 commits into from
Sep 3, 2024
Merged

Fixed a bug in line annotations when showing more #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ecc406d
Fixed a bug in line annotations when showing more
ra-anders Aug 28, 2024
fc14d05
Bugfix to clear current line annotation if
ra-anders Aug 29, 2024
35c3d79
Fixed some more bugs
ra-anders Sep 3, 2024
72226f6
I was over ambitious
ra-anders Sep 3, 2024
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
2 changes: 1 addition & 1 deletion src/content-handlers/iiif/extensions/uv-default-extension/Extension.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export default class Extension extends BaseExtension<Config>
}

if (this.isTextRightPanelEnabled()) {
this.textRightPanel = new TextRightPanel(this.shell.$textRightPanel);
this.textRightPanel = new TextRightPanel(this.shell.$textRightPanel, this.shell);
}

if (this.isFooterPanelEnabled()) {
Expand Down
2 changes: 1 addition & 1 deletion src/content-handlers/iiif/extensions/uv-model-viewer-extension/Extension.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ export default class ModelViewerExtension extends BaseExtension<Config> {
}

if (this.isTextRightPanelEnabled()) {
this.textRightPanel = new TextRightPanel(this.shell.$textRightPanel);
this.textRightPanel = new TextRightPanel(this.shell.$textRightPanel, this.shell);
}

if (this.isFooterPanelEnabled()) {
Expand Down
2 changes: 1 addition & 1 deletion src/content-handlers/iiif/extensions/uv-openseadragon-extension/Extension.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -569,7 +569,7 @@ export default class OpenSeadragonExtension extends BaseExtension<Config> {
}

if (this.isTextRightPanelEnabled()) {
this.textRightPanel = new TextRightPanel(this.shell.$textRightPanel);
this.textRightPanel = new TextRightPanel(this.shell.$textRightPanel, this.shell);
} else {
this.shell.$textRightPanel.hide();
}
Expand Down
2 changes: 1 addition & 1 deletion src/content-handlers/iiif/modules/uv-shared-module/css/right-panel.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@
width: 230px;
padding: 5px 5px 5px 7px;

p {
div {
padding: 5px;
margin: 0;
}
Expand Down
78 changes: 62 additions & 16 deletions src/content-handlers/iiif/modules/uv-textrightpanel-module/TextRightPanel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,25 @@ import { Events } from "../../../../Events";
import OpenSeadragonExtension from "../../extensions/uv-openseadragon-extension/Extension";
import OpenSeadragon from "openseadragon";
import { Clipboard } from "@edsilv/utils";
import { IExternalImageResourceData } from "manifesto.js";
import { OpenSeadragonCenterPanel } from "../../modules/uv-openseadragoncenterpanel-module/OpenSeadragonCenterPanel";
import { Shell } from "../uv-shared-module/Shell";

export class TextRightPanel extends RightPanel<TextRightPanelConfig> {
$transcribedText: JQuery;
$existingAnnotation: JQuery = $();
$copyButton: JQuery;
$copiedText: JQuery;
currentCanvasIndex: number = 0;
offsetX: number = 0;
index: number = 0;
clipboardText: string = '';
shell: Shell;
centerPanel: OpenSeadragonCenterPanel;

constructor($element: JQuery) {
constructor($element: JQuery, shell: Shell) {
super($element);
this.shell = shell;
}

create(): void {
Expand Down Expand Up @@ -62,7 +70,13 @@ export class TextRightPanel extends RightPanel<TextRightPanelConfig> {
}

this.extensionHost.on(Events.LOAD, async (e) => {
if (this.currentCanvasIndex == this.extension.helper.canvasIndex) {
this.centerPanel = (<OpenSeadragonExtension>(this.extension)).centerPanel;
let canvases = this.extension.getCurrentCanvases();
canvases.sort((a, b) => (a.index as number - b.index as number));

let canvasExists = canvases.some(x => x.index === this.currentCanvasIndex)

if (canvasExists) {
this.$existingAnnotation = $('.lineAnnotation.current');
} else {
this.$existingAnnotation = $();
Expand All @@ -72,27 +86,44 @@ export class TextRightPanel extends RightPanel<TextRightPanelConfig> {
this.$main.html('');
this.clipboardText = '';
this.removeLineAnnotationRects();
let canvases = this.extension.getCurrentCanvases();
canvases.sort((a, b) => (a.index as number - b.index as number));
for (let i = 0; i < canvases.length; i++) {
const c = canvases[i];
let seeAlso = c.getProperty('seeAlso');
let header;

if (i === 0 && canvases.length > 1) {
header = this.content.leftPage;
} else if (i === 1 && canvases.length > 1) {
header = this.content.rightPage;
}

// Find offset if showing more pages than one
let res = this.extension.resources;
this.offsetX = -1;
this.index = -1;
if (res !== null) {
let resource: any = res.filter(
(x) => x.index === c.index
)[0];
this.index = res.indexOf(resource);
this.offsetX = 0;

if (this.index > 0) {
this.offsetX = (<IExternalImageResourceData>(
res[this.index - 1]
)).width;
}
}

// We need to see if seeAlso contains an ALTO file and maybe allow for other HTR/OCR formats in the future
// and make sure which version of IIIF Presentation API is used
if (seeAlso.length === undefined) { // This is IIIF Presentation API < 3
if (seeAlso.profile.includes('alto')) {
await this.processAltoFile(seeAlso['@id'], header);
await this.processAltoFile(seeAlso['@id'], c.index, header);
}
} else { // This is IIIF Presentation API >= 3
if (seeAlso[0].profile.includes('alto')) {
await this.processAltoFile(seeAlso[0]['id'], header);
await this.processAltoFile(seeAlso[0]['id'], c.index, header);
}
}
};
Expand Down Expand Up @@ -122,7 +153,7 @@ export class TextRightPanel extends RightPanel<TextRightPanelConfig> {
}

// Let's load the ALTO file and do some parsing
processAltoFile = async (altoUrl, header?): Promise<void> => {
processAltoFile = async (altoUrl, canvasIndex, header?): Promise<void> => {
try {
const response = await fetch(altoUrl);
const data = await response.text();
Expand All @@ -134,23 +165,31 @@ export class TextRightPanel extends RightPanel<TextRightPanelConfig> {
let t = Array.from(strings).map((e, i) => {
return e.getAttribute('CONTENT');
});
const x = Number(e.getAttribute('HPOS'));
let x = Number(e.getAttribute('HPOS'));
const y = Number(e.getAttribute('VPOS'));
const width = Number(e.getAttribute('WIDTH'));
const height = Number(e.getAttribute('HEIGHT'));
x = x + this.offsetX + (this.index > 0 ? this.centerPanel.config.options.pageGap : 0);

let text = t.join(' ');
this.clipboardText += text;

let line = $('<p id="line-annotation-' + i + '" class="lineAnnotation" tabindex="0">' + text + '</p>');
let line = $('<div id="line-annotation-' + canvasIndex + '-' + i + '" class="lineAnnotation" tabindex="0">' + text + '</div>');

if (!this.extension.isMobile()) {
let div = $('<div id="line-annotation-' + i + '" class="lineAnnotationRect" title="' + text + '" data-x="' + x + '" data-y="' + y + '" data-width="' + width + '" data-height="' + height + '" tabindex="0"></div>');
let div = $('<div id="line-annotation-' + canvasIndex + '-' + i + '" class="lineAnnotationRect" title="' + text + '" data-x="' + x + '" data-y="' + y + '" data-width="' + width + '" data-height="' + height + '" tabindex="0"></div>');
$(div).on('keydown', (e: any) => {
if (e.keyCode === 13) {
$(e.target).trigger('click');
}
});
$(div).on('click', (e: any) => {
let canvasIndex = Number(e.target.getAttribute('id').split('-')[2]);
// We change the current canvas index to the clicked page (if we're in two page view)
if (canvasIndex !== this.currentCanvasIndex) {
this.extension.helper.canvasIndex = canvasIndex;
this.currentCanvasIndex = canvasIndex;
}
this.clearLineAnnotationRects();
this.clearLineAnnotations();
this.setCurrentLineAnnotation(e.target, true);
Expand All @@ -167,6 +206,12 @@ export class TextRightPanel extends RightPanel<TextRightPanelConfig> {
});
// Sync line click with line annotation
line.on('click', (e: any) => {
let canvasIndex = Number(e.target.getAttribute('id').split('-')[2]);
// We change the current canvas index to the clicked page (if we're in two page view)
if (canvasIndex !== this.currentCanvasIndex) {
this.extension.helper.canvasIndex = canvasIndex;
this.currentCanvasIndex = canvasIndex;
}
this.clearLineAnnotationRects();
this.clearLineAnnotations();
this.setCurrentLineAnnotation(e.target, false);
Expand All @@ -191,9 +236,10 @@ export class TextRightPanel extends RightPanel<TextRightPanelConfig> {
// If we already have a selected line annotation, make sure it's selected again after load
if (this.$existingAnnotation[0] !== undefined) {
let id = $(this.$existingAnnotation).attr('id');
this.setCurrentLineAnnotation($(this.$existingAnnotation)[0], true);
this.setCurrentLineAnnotationRect($('div#' + id)[0]);
this.$existingAnnotation = $();
if ($('div#' + id).length > 0) { // Make sure the line annotation exists in the DOM
this.setCurrentLineAnnotation($('div#' + id)[0], true);
this.setCurrentLineAnnotationRect($('div#' + id)[0]);
}
}

} catch (error) {
Expand All @@ -217,7 +263,7 @@ export class TextRightPanel extends RightPanel<TextRightPanelConfig> {
$(lineAnnotationRect).removeClass('current');
}
});
$('div#' + e.getAttribute('id')).addClass('current');
$('div#' + e.getAttribute('id') + '.lineAnnotationRect').addClass('current');
}

setCurrentLineAnnotation(e: any, scrollIntoView: Boolean): void {
Expand All @@ -226,9 +272,9 @@ export class TextRightPanel extends RightPanel<TextRightPanelConfig> {
$(lineAnnotation).removeClass('current');
}
});
$('p#' + e.getAttribute('id')).addClass('current');
$('div#' + e.getAttribute('id') + '.lineAnnotation').addClass('current');
if (scrollIntoView) {
$('p#' + e.getAttribute('id'))[0].scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' });
$('div#' + e.getAttribute('id') + '.lineAnnotation')[0].scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' });
}
}

Expand Down