add reference to annotation manifest and fix target source.

adds reference to annotation manifest as target.source.partOf.

fixes use of targed.id to target.source.id.

__tests__/WebAnnotation.test.js

@@ -25,7 +25,6 @@ describe('WebAnnotation', () => {
   describe('target', () => {
     it('with svg and xywh', () => {
       expect(subject.target()).toEqual({
-        id: 'canvasId',
         selector: [
           {
             type: 'FragmentSelector',
@@ -36,21 +35,29 @@ describe('WebAnnotation', () => {
             value: 'svg',
           },
         ],
+        source: 'canvasId',
       });
     });
     it('with svg only', () => {
       subject = createSubject({ xywh: null });
       expect(subject.target()).toEqual({
-        id: 'canvasId',
         selector: {
           type: 'SvgSelector',
           value: 'svg',
         },
+        source: 'canvasId',
       });
     });
     it('with xywh only', () => {
       subject = createSubject({ svg: null });
-      expect(subject.target()).toBe('canvasId#xywh=xywh');
+      /* expect(subject.target()).toBe('canvasId#xywh=xywh'); */
+      expect(subject.target()).toEqual({
+        selector: {
+          type: 'FragmentSelector',
+          value: 'xywh=xywh',
+        },
+        source: 'canvasId',
+      });
     });
     it('with no xywh or svg', () => {
       subject = createSubject({ svg: null, xywh: null });

src/AnnotationCreation.js

@@ -158,6 +158,7 @@ class AnnotationCreation extends Component {
         body: annoBody,
         canvasId: canvas.id,
         id: (annotation && annotation.id) || `${uuid()}`,
+        manifestId: canvas.options.resource.id,
         svg,
         tags,
         xywh,

src/SimpleAnnotationServerV2Adapter.js

@@ -77,7 +77,7 @@ export default class SimpleAnnotationServerV2Adapter {
       motivation: 'oa:commenting',
       on: {
         '@type': 'oa:SpecificResource',
-        full: v3anno.target.id,
+        full: v3anno.target.source.id,
       },
     };
     // copy id if it is SAS-generated
@@ -101,6 +101,12 @@ export default class SimpleAnnotationServerV2Adapter {
       } else {
         v2anno.on.selector = this.createV2AnnoSelector(v3anno.target.selector);
       }
+      if (v3anno.target.source.partOf) {
+        v2anno.on.within = {
+          '@id': v3anno.target.source.partOf.id,
+          '@type': 'sc:Manifest',
+        };
+      }
     }
     return v2anno;
   }
@@ -172,8 +178,10 @@ export default class SimpleAnnotationServerV2Adapter {
       [v2target] = v2target;
     }
     v3anno.target = {
-      id: v2target.full, // should be source, see #25
       selector: this.createV3AnnoSelector(v2target.selector),
+      source: {
+        id: v2target.full,
+      },
     };
     return v3anno;
   }

src/WebAnnotation.js

@@ -2,7 +2,7 @@
 export default class WebAnnotation {
   /** */
   constructor({
-    canvasId, id, xywh, body, tags, svg,
+    canvasId, id, xywh, body, tags, svg, manifestId,
   }) {
     this.id = id;
     this.canvasId = canvasId;
@@ -10,6 +10,7 @@ export default class WebAnnotation {
     this.body = body;
     this.tags = tags;
     this.svg = svg;
+    this.manifestId = manifestId;
   }
 
   /** */
@@ -48,27 +49,43 @@ export default class WebAnnotation {
   /** */
   target() {
     let target = this.canvasId;
-    if (this.svg) {
+    if (this.svg || this.xywh) {
+      if (this.manifestId) {
         target = {
-        id: this.canvasId, // should be source, see #25
-        selector: {
+          source: {
+            id: this.canvasId,
+            partOf: {
+              id: this.manifestId,
+              type: 'Manifest',
+            },
+            type: 'Canvas',
+          },
+        };
+      } else {
+        target = {
+          source: this.canvasId,
+        };
+      }
+    }
+    if (this.svg) {
+      target.selector = {
         type: 'SvgSelector',
         value: this.svg,
-        },
       };
     }
     if (this.xywh) {
+      const fragsel = {
+        type: 'FragmentSelector',
+        value: `xywh=${this.xywh}`,
+      };
       if (target.selector) {
         // add fragment selector
         target.selector = [
-          {
-            type: 'FragmentSelector',
-            value: `xywh=${this.xywh}`,
-          },
+          fragsel,
           target.selector,
         ];
       } else {
-        target = `${this.canvasId}#xywh=${this.xywh}`;
+        target.selector = fragsel;
       }
     }
     return target;