Working with Annotation Pages

The preferred way of dealing with large numbers of annotations is to separate them into multiple AnnotationPage resources. For example, one AnnotationPage for the English transcription, another AnnotationPage for the French translation, and another page for the German translation.

AnnotationPages can be used to partition annotations for any purpose, and should have labels to describe what they are for.

Canvas Panel can then load, display and style whole annotation pages - that is, display all the annotations in one AnnotationPage, and style all the annotations in one AnnotationPage.

Loading and styling Annotation pages

import "@digirati/canvas-panel-web-components";
import "./styles.css";

const cp = document.getElementById("cp");

async function demo() {
  const manifestWithAnnotations = await cp.vault.loadManifest(
    "https://digirati-co-uk.github.io/wunder.json"
  );
  const canvas10 = cp.vault.get(manifestWithAnnotations.items[10]);
  cp.setCanvas(canvas10.id);
  for (const annoPage of canvas10.annotations) {
    // the .annotations property is an array of 0..n AnnotationPage resources.
    // how do we know these are not inline?
    let embedded = annoPage.items && !cp.vault.requestStatus(annoPage);
    if (!embedded) {
      console.log(annoPage.id + " needs to be loaded");
      // As a resource external to the manifest, we load annotations specifically, from their id:
      const loadedAnnoPage = await cp.vault.load(annoPage.id);
      // These are now loaded into the Vault

      cp.annotationPageManager.setPageEnabled(loadedAnnoPage.id);
      cp.applyStyles(loadedAnnoPage, {
        border: "3px solid green"
      });
      // cp.applyStyles(loadedAnnoPage, {
      //   backgroundColor: 'red',
      //   border: '1px solid blue',
      // });
    }
  }
  //document.getElementById("output").innerText = msg;
}

demo();

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

Canvas Panel's AnnotationPageManager has the following helpers:

const allPages = cp.annotationPageManager.availablePageIds; 
const activePages = cp.annotationPageManager.enabledPageIds;
cp.annotationPageManager.setPageEnabled(myPageId); // make visible
cp.annotationPageManager.setPageDisabled(myPageId); // make invisible

Discuss on GitHub