Dumb annotation

demo/src/index.js

@@ -11,6 +11,7 @@ const config = {
     exportLocalStorageAnnotations: false, // display annotation JSON export button
   },
   catalog: [
+    { manifestIf: 'https://files.tetras-libre.fr/dev/Clock/manifest.json'},
     { manifestId: 'https://files.tetras-libre.fr/dev/Hakanai/manifest/manifest.json' },
     { manifestId: 'https://dzkimgs.l.u-tokyo.ac.jp/videos/iiif_in_japan_2017/manifest.json' },
     { manifestId: 'https://iiif.io/api/cookbook/recipe/0219-using-caption-file/manifest.json' },

src/AnnotationCreationUtils.js

@@ -57,24 +57,42 @@ export async function getSvg(windowId) {
   return svg;
 };
 
+
+const dumbAnnotation = {
+      "id": "https://preview.iiif.io/cookbook/master/recipe/0003-mvm-video/canvas/annotation/1",
+      "type": "Annotation",
+      "motivation": "commenting",
+      "body": {
+        "id": "https://files.tetras-libre.fr/dev/Hakanai/media/02_HKN-couv.jpg",
+        "type": "Image",
+        "format": "image/jpg",
+        "value": "Test image annotation"
+      },
+      "target": "https://preview.iiif.io/cookbook/master/recipe/0003-mvm-video/canvas#xywh=0,0,301,400&t=0,1000"
+    }
+  ;
+
 export function saveAnnotation(canvases, config, receiveAnnotation, annotation, body, t, xywh, image, drawingStateSerialized, svg, tags){
   // TODO promises not handled. Use promiseAll ?
   canvases.forEach(async (canvas) => {
     const storageAdapter = config.annotation.adapter(canvas.id);
-    const anno = new WebAnnotation({
-      body,
-      canvasId: canvas.id,
-      fragsel: {
-        t,
-        xywh,
-      },
-      id: (annotation && annotation.id) || `${uuid()}`,
-      image,
-      drawingStateSerialized,
-      manifestId: canvas.options.resource.id,
-      svg,
-      tags,
-    }).toJson();
+    // const anno = new WebAnnotation({
+    //   body,
+    //   canvasId: canvas.id,
+    //   fragsel: {
+    //     t,
+    //     xywh,
+    //   },
+    //   id: (annotation && annotation.id) || `${uuid()}`,
+    //   image,
+    //   drawingStateSerialized,
+    //   manifestId: canvas.options.resource.id,
+    //   svg,
+    //   tags,
+    // }).toJson();
+
+    const anno = dumbAnnotation;
+    anno.drawingState = drawingStateSerialized;
 
     if (annotation) {
       storageAdapter.update(anno)

src/WebAnnotation.js

@@ -2,32 +2,31 @@
 export default class WebAnnotation {
   /** */
   constructor({
-    canvasId, id, fragsel, image, body, tags, svg, manifestId, drawingStateSerialized
+    id, body, drawingStateSerialized, motivation, target,
   }) {
     this.id = id;
-    this.canvasId = canvasId;
-    this.fragsel = fragsel;
+    this.type = 'Annotation';
+    this.motivation = motivation;
     this.body = body;
-    this.tags = tags;
-    this.svg = svg;
-    //this.image = image;
-    this.image = image;
-    this.manifestId = manifestId;
     this.drawingState = drawingStateSerialized;
+    this.target = target;
 
     console.log('WebAnnotation constructor', this);
   }
 
   /** */
   toJson() {
-    const result =  {
-      body: this.createBody(),
-      id: this.id,
-      motivation: 'commenting',
-      target: this.target(),
-      type: 'Annotation',
-      drawingState: this.drawingState,
-    };
+    // const result = {
+    //   body: this.createBody(),
+    //   drawingState: this.drawingState,
+    //   id: this.id,
+    //   motivation: 'commenting',
+    //   target: this.target(),
+    //   type: 'Annotation',
+    // };
+
+    const result = this;
+
     console.log('WebAnnotation toJson', result);
     return result;
   }

src/WebAnnotationOld.js

+/** */
+export default class WebAnnotation {
+  /** */
+  constructor({
+    canvasId, id, fragsel, image, body, tags, svg, manifestId, drawingStateSerialized
+  }) {
+    this.id = id;
+    this.canvasId = canvasId;
+    this.fragsel = fragsel;
+    this.body = body;
+    this.tags = tags;
+    this.svg = svg;
+    //this.image = image;
+    this.image = image;
+    this.manifestId = manifestId;
+    this.drawingState = drawingStateSerialized;
+
+    console.log('WebAnnotation constructor', this);
+  }
+
+  /** */
+  toJson() {
+    const result =  {
+      body: this.createBody(),
+      id: this.id,
+      motivation: 'commenting',
+      target: this.target(),
+      type: 'Annotation',
+      drawingState: this.drawingState,
+    };
+    console.log('WebAnnotation toJson', result);
+    return result;
+  }
+
+  /** */
+  createBody() {
+    let bodies = [];
+    if (this.body && this.body.value !== '') {
+      const textBody = {
+        type: 'TextualBody',
+        value: this.body.value,
+      };
+      bodies.push(textBody);
+    }
+
+    if (this.image) {
+      // TODO dumb image { this.image.id}
+      const imgBody = {
+        id: 'https://tetras-libre.fr/themes/tetras/img/logo.svg',
+        type: 'Image',
+        format: 'image/svg+xml',
+      };
+      //bodies.push(imgBody);
+      const testImageBody = {
+            "id": "https://files.tetras-libre.fr/dev/Hakanai/media/10_HKN-Garges_A2B4243.JPG",
+            "type": "Image",
+            "format": "image/jpg"
+          };
+      bodies.push(testImageBody);
+    }
+
+    // if (this.tags) {
+    //   bodies = bodies.concat(this.tags.map((tag) => ({
+    //     purpose: 'tagging',
+    //     type: 'TextualBody',
+    //     value: tag,
+    //   })));
+    // }
+    if (bodies.length === 1) {
+      return bodies[0];
+    }
+    return bodies;
+  }
+
+  /** Fill target object with selectors (if any), else returns target url */
+  target() {
+    if (!this.svg
+      && (!this.fragsel || !Object.values(this.fragsel).find((e) => e !== null))) {
+      return this.canvasId;
+    }
+    const target = { source: this.source() };
+    const selectors = [];
+    if (this.svg) {
+      selectors.push({
+        type: 'SvgSelector',
+        value: this.svg,
+      });
+    }
+    if (this.fragsel) {
+      selectors.push({
+        type: 'FragmentSelector',
+        value: Object.entries(this.fragsel)
+          .filter((kv) => kv[1])
+          .map((kv) => `${kv[0]}=${kv[1]}`)
+          .join('&'),
+      });
+    }
+    target.selector = selectors.length === 1 ? selectors[0] : selectors;
+    return target;
+  }
+
+  /** */
+  source() {
+    let source = this.canvasId;
+    if (this.manifest) {
+      source = {
+        id: this.canvasId,
+        partOf: {
+          id: this.manifest.id,
+          type: 'Manifest',
+        },
+        type: 'Canvas',
+      };
+    }
+    return source;
+  }
+}