relationships can use text selectors with pdf

otherwise the relationship is linked to the whole page

peachjam/js/components/DocumentContent/enrichments-manager.ts

@@ -9,7 +9,7 @@ import SelectionShare from './selection-share';
  * Class for handling the setup of all enrichments and interactions between enrichments
  */
 class EnrichmentsManager {
-  private relationshipsManager: RelationshipEnrichments;
+  private relationshipsManager: RelationshipEnrichments | null = null;
   private selectionSearch: SelectionSearch;
   private selectionShare: SelectionShare;
   private root: HTMLElement;
@@ -18,20 +18,24 @@ class EnrichmentsManager {
   private readonly gutter: HTMLLaGutterElement | null;
   private readonly akn: HTMLElement | null;
   private citationLinks: PDFCitationLinks | null = null;
-  gutterManager: GutterEnrichmentManager;
+  private gutterManager: GutterEnrichmentManager;
+  private displayType: string; // html, pdf or akn
 
   constructor (contentAndEnrichmentsElement: HTMLElement) {
     this.root = contentAndEnrichmentsElement;
     this.gutter = this.root.querySelector('la-gutter');
     // this is either div.content (for HTML and PDF) or la-akoma-ntoso.content (for AKN)
     this.akn = this.root.querySelector('.content');
+    this.displayType = this.root.getAttribute('data-display-type') || 'html';
 
     this.docDiffsManager = this.setupDocDiffs();
     this.gutterManager = new GutterEnrichmentManager(this.root);
     // @ts-ignore
     // GutterEnrichmentManager by default looks for la-akoma-ntoso, and we might not be working with that
     this.gutterManager.akn = this.root.querySelector('.content');
-    this.relationshipsManager = new RelationshipEnrichments(contentAndEnrichmentsElement, this.gutterManager);
+    if (this.displayType !== 'pdf') {
+      this.relationshipsManager = new RelationshipEnrichments(this.root, this.gutterManager, this.displayType);
+    }
     this.selectionSearch = new SelectionSearch(this.gutterManager);
     this.selectionShare = new SelectionShare(this.gutterManager);
 
@@ -51,7 +55,9 @@ class EnrichmentsManager {
     );
   }
 
-  setupPdfCitationLinks () {
+  addPdfEnrichments () {
+    // setup PDF enrichments after the PDF has been rendered
+    this.relationshipsManager = new RelationshipEnrichments(this.root, this.gutterManager, this.displayType);
     this.citationLinks = new PDFCitationLinks(this.root, this.gutterManager);
   }
 }

peachjam/js/components/DocumentContent/index.ts

@@ -103,7 +103,7 @@ class DocumentContent {
       };
       this.pdfRenderer.onPdfLoaded = () => {
         if (this.enrichmentsManager) {
-          this.enrichmentsManager.setupPdfCitationLinks();
+          this.enrichmentsManager.addPdfEnrichments();
         }
         this.setupPopups();
 

peachjam/js/components/RelationshipEnrichment/RelationshipEnrichment.vue

@@ -76,6 +76,7 @@ export default {
     viewRoot: HTMLElement,
     gutter: HTMLElement,
     editable: Boolean,
+    useSelectors: Boolean,
     thisWorkFrbrUri: {
       type: String,
       default: ''
@@ -147,7 +148,10 @@ export default {
     markAndAnchor () {
       this.unmark();
       const target = {
-        anchor_id: this.isForwards ? this.enrichment.subject_target_id : this.enrichment.object_target_id
+        anchor_id: this.isForwards ? this.enrichment.subject_target_id : this.enrichment.object_target_id,
+        selectors: this.useSelectors ? (
+          this.isForwards ? this.enrichment.subject_selectors : this.enrichment.target_selectors
+        ) : null
       };
       const range = targetToRange(target, this.viewRoot);
       if (!range) return;

peachjam/js/components/RelationshipEnrichment/RelationshipEnrichmentList.vue

@@ -8,6 +8,7 @@
       :view-root="viewRoot"
       :gutter="gutter"
       :editable="editable"
+      :use-selectors="useSelectors"
       :this-work-frbr-uri="thisWorkFrbrUri"
       @delete="deleteEnrichment(enrichment)"
     />
@@ -40,6 +41,7 @@ export default {
     viewRoot: HTMLElement,
     gutter: HTMLElement,
     editable: Boolean,
+    useSelectors: Boolean,
     thisWorkFrbrUri: {
       type: String,
       default: ''

peachjam/js/components/RelationshipEnrichment/index.ts

@@ -16,10 +16,12 @@ export class RelationshipEnrichments implements IGutterEnrichmentProvider {
   workFrbrUri: string;
   workId: string;
   editable: boolean;
+  displayType: string; // html, pdf or akn
 
-  constructor (root: HTMLElement, manager: GutterEnrichmentManager) {
+  constructor (root: HTMLElement, manager: GutterEnrichmentManager, displayType: string) {
     this.root = root;
     this.manager = manager;
+    this.displayType = displayType;
     this.gutter = root.querySelector('la-gutter');
     this.akn = root.querySelector('la-akoma-ntoso');
     this.workFrbrUri = root.dataset.workFrbrUri || '';
@@ -41,6 +43,7 @@ export class RelationshipEnrichments implements IGutterEnrichmentProvider {
         viewRoot: this.root,
         enrichments: this.enrichments,
         editable: this.editable,
+        useSelectors: this.displayType === 'pdf',
         thisWorkFrbrUri: this.workFrbrUri
       },
       use: [vueI18n],
@@ -80,6 +83,7 @@ export class RelationshipEnrichments implements IGutterEnrichmentProvider {
         frbr_uri: this.workFrbrUri
       },
       subject_target_id: target.anchor_id,
+      subject_selectors: target.selectors,
       subject_documents: [],
 
       object_work: {},

peachjam/models/relationships.py

@@ -32,6 +32,9 @@ class Relationship(models.Model):
     subject_target_id = models.CharField(
         _("subject target ID"), max_length=1024, null=True, blank=True
     )
+    subject_selectors = models.JSONField(
+        verbose_name=_("subject selectors"), null=True, blank=False
+    )
 
     object_work = models.ForeignKey(
         "peachjam.Work",

peachjam/templates/peachjam/_document_content.html

@@ -114,6 +114,7 @@
          data-work-frbr-uri="{{ document.work_frbr_uri }}"
          data-document-id="{{ document.id }}"
          data-diffs-url="{{ document_diffs_url }}"
+         data-display-type="{{ display_type }}"
          {% if perms.peachjam.add_citationlink %}data-editable-citation-links{% endif %}
          {% if perms.peachjam.add_relationship %}data-editable-relationships{% endif %}>
       <div class="content-and-enrichments__inner la-akoma-ntoso-with-gutter">

peachjam_api/serializers.py

@@ -57,6 +57,7 @@ class Meta:
             "subject_work",
             "subject_work_id",
             "subject_target_id",
+            "subject_selectors",
             "object_work",
             "object_work_id",
             "object_target_id",