Separate xywh & time fragment selectors

handle both fragment selectors types:
- target: https://ressource.url#xywh=0,0,10,10&t=19,20
- target: https..., selectors: [ FragmentSelector: ..., ]

__tests__/WebAnnotation.test.js

@@ -8,6 +8,7 @@ function createSubject(args = {}) {
     id: 'id',
     svg: 'svg',
     tags: ['tags'],
+    timing: [1, 3],
     xywh: 'xywh',
     ...args,
   });
@@ -20,26 +21,31 @@ describe('WebAnnotation', () => {
       ['body', 'canvasId', 'id', 'svg', 'xywh'].forEach((prop) => {
         expect(subject[prop]).toBe(prop);
       });
+      expect(subject.timing).toStrictEqual([1, 3]);
     });
   });
   describe('target', () => {
-    it('with svg and xywh', () => {
+    it('with svg, xywh and timing', () => {
       expect(subject.target()).toEqual({
         selector: [
+          {
+            type: 'SvgSelector',
+            value: 'svg',
+          },
           {
             type: 'FragmentSelector',
             value: 'xywh=xywh',
           },
           {
-            type: 'SvgSelector',
-            value: 'svg',
+            type: 'FragmentSelector',
+            value: 't=1,3',
           },
         ],
         source: 'canvasId',
       });
     });
     it('with svg only', () => {
-      subject = createSubject({ xywh: null });
+      subject = createSubject({ timing: null, xywh: null });
       expect(subject.target()).toEqual({
         selector: {
           type: 'SvgSelector',
@@ -49,7 +55,7 @@ describe('WebAnnotation', () => {
       });
     });
     it('with xywh only', () => {
-      subject = createSubject({ svg: null });
+      subject = createSubject({ svg: null, timing: null });
       expect(subject.target()).toEqual({
         selector: {
           type: 'FragmentSelector',
@@ -58,8 +64,18 @@ describe('WebAnnotation', () => {
         source: 'canvasId',
       });
     });
-    it('with no xywh or svg', () => {
+    it('with timing only', () => {
       subject = createSubject({ svg: null, xywh: null });
+      expect(subject.target()).toEqual({
+        selector: {
+          type: 'FragmentSelector',
+          value: 't=1,3',
+        },
+        source: 'canvasId',
+      });
+    });
+    it('with no xywh, svg or timing', () => {
+      subject = createSubject({ svg: null, timing: null, xywh: null });
       expect(subject.target()).toBe('canvasId');
     });
   });

src/AnnotationCreation.js

@@ -33,8 +33,9 @@ import CursorIcon from './icons/Cursor';
 
 /** Extract time information from annotation target */
 function timeFromAnnoTarget(annotarget) {
+  console.info('TODO proper time extraction from: ', annotarget);
   // TODO w3c media fragments: t=,10 t=5,
-  const r = /t=([0-9]+),([0-9]+)/.exec(annotarget);
+  const r = /t=([0-9.]+),([0-9.]+)/.exec(annotarget);
   if (!r || r.length !== 3) {
     return ['', ''];
   }
@@ -43,13 +44,12 @@ function timeFromAnnoTarget(annotarget) {
 
 /** Extract xywh from annotation target */
 function geomFromAnnoTarget(annotarget) {
-  console.warn('TODO proper extraction');
+  console.info('TODO proper xywh extraction from: ', annotarget);
   const r = /xywh=((-?[0-9]+,?)+)/.exec(annotarget);
-  console.info('extracted from ', annotarget, r);
   if (!r || r.length !== 3) {
-    return ['', ''];
+    return '';
   }
-  return [r[1], r[2]];
+  return r[1];
 }
 
 /** */
@@ -88,12 +88,12 @@ class AnnotationCreation extends Component {
           });
         } else {
           annoState.svg = props.annotation.target.selector.value;
-          // eslint-disable-next-line max-len
-          [annoState.tstart, annoState.tend] = timeFromAnnoTarget(props.annotation.target.selector.value);
+          // TODO does this happen ? when ? where are fragments selectors ?
         }
+      } else if (typeof props.annotation.target === 'string') {
+        annoState.xywh = geomFromAnnoTarget(props.annotation.target);
+        [annoState.tstart, annoState.tend] = timeFromAnnoTarget(props.annotation.target);
       }
-      //
-      // start/end time
     }
 
     const toolState = {
@@ -196,10 +196,7 @@ class AnnotationCreation extends Component {
     const {
       annoBody, tags, xywh, svg, tstart, tend, textEditorStateBustingKey,
     } = this.state;
-    let fsel = xywh;
-    if (tstart && tend) {
-      fsel = `${xywh || ''}&t=${tstart},${tend}`;
-    }
+    const timing = (tstart && tend) ? [tstart, tend] : null;
     canvases.forEach((canvas) => {
       const storageAdapter = config.annotation.adapter(canvas.id);
       const anno = new WebAnnotation({
@@ -209,7 +206,8 @@ class AnnotationCreation extends Component {
         manifestId: canvas.options.resource.id,
         svg,
         tags,
-        xywh: fsel,
+        timing,
+        xywh,
       }).toJson();
       if (annotation) {
         storageAdapter.update(anno).then((annoPage) => {

src/WebAnnotation.js

@@ -2,11 +2,12 @@
 export default class WebAnnotation {
   /** */
   constructor({
-    canvasId, id, xywh, body, tags, svg, manifestId,
+    canvasId, id, xywh, timing, body, tags, svg, manifestId,
   }) {
     this.id = id;
     this.canvasId = canvasId;
     this.xywh = xywh;
+    this.timing = timing;
     this.body = body;
     this.tags = tags;
     this.svg = svg;
@@ -48,33 +49,33 @@ export default class WebAnnotation {
 
   /** */
   target() {
-    let target = this.canvasId;
-    if (this.svg || this.xywh) {
-      target = {
+    if (!this.svg && !this.xywh && !this.timing) {
+      return this.canvasId;
+    }
+    const selectors = [];
+    const target = {
       source: this.source(),
     };
-    }
     if (this.svg) {
-      target.selector = {
+      selectors.push({
         type: 'SvgSelector',
         value: this.svg,
-      };
+      });
     }
     if (this.xywh) {
-      const fragsel = {
+      selectors.push({
         type: 'FragmentSelector',
         value: `xywh=${this.xywh}`,
-      };
-      if (target.selector) {
-        // add fragment selector
-        target.selector = [
-          fragsel,
-          target.selector,
-        ];
-      } else {
-        target.selector = fragsel;
+      });
     }
+    if (this.timing) {
+      const [start, end] = this.timing;
+      selectors.push({
+        type: 'FragmentSelector',
+        value: `t=${start},${end}`,
+      });
     }
+    target.selector = selectors.length === 1 ? selectors[0] : selectors;
     return target;
   }