handle multiple bodies and target selectors.

multiple bodies for text and tags.
multiple selectors for alternate fragment and svg selectors.

__tests__/WebAnnotation.test.js

@@ -7,6 +7,7 @@ function createSubject(args = {}) {
     canvasId: 'canvasId',
     id: 'id',
     svg: 'svg',
+    tags: ['tags'],
     xywh: 'xywh',
     ...args,
   });
@@ -22,7 +23,23 @@ describe('WebAnnotation', () => {
     });
   });
   describe('target', () => {
-    it('with svg', () => {
+    it('with svg and xywh', () => {
+      expect(subject.target()).toEqual({
+        id: 'canvasId',
+        selector: [
+          {
+            type: 'FragmentSelector',
+            value: 'xywh=xywh',
+          },
+          {
+            type: 'SvgSelector',
+            value: 'svg',
+          },
+        ],
+      });
+    });
+    it('with svg only', () => {
+      subject = createSubject({ xywh: null });
       expect(subject.target()).toEqual({
         id: 'canvasId',
         selector: {
@@ -40,6 +57,36 @@ describe('WebAnnotation', () => {
       expect(subject.target()).toBe('canvasId');
     });
   });
+  describe('body', () => {
+    it('with text and tags', () => {
+      expect(subject.createBody()).toEqual([
+        {
+          type: 'TextualBody',
+          value: 'body',
+        },
+        {
+          purpose: 'tagging',
+          type: 'TextualBody',
+          value: 'tags',
+        },
+      ]);
+    });
+    it('with text only', () => {
+      subject = createSubject({ tags: null });
+      expect(subject.createBody()).toEqual({
+        type: 'TextualBody',
+        value: 'body',
+      });
+    });
+    it('with tags only', () => {
+      subject = createSubject({ body: null });
+      expect(subject.createBody()).toEqual({
+        purpose: 'tagging',
+        type: 'TextualBody',
+        value: 'tags',
+      });
+    });
+  });
   describe('toJson', () => {
     it('generates a WebAnnotation', () => {
       expect(subject.toJson().type).toBe('Annotation');

src/AnnotationCreation.js

@@ -9,9 +9,6 @@ import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
 import RectangleIcon from '@material-ui/icons/CheckBoxOutlineBlank';
 import CircleIcon from '@material-ui/icons/RadioButtonUnchecked';
 import PolygonIcon from '@material-ui/icons/Timeline';
-import GestureIcon from '@material-ui/icons/Gesture';
-import ClosedPolygonIcon from '@material-ui/icons/ChangeHistory';
-import OpenPolygonIcon from '@material-ui/icons/ShowChart';
 import FormatColorFillIcon from '@material-ui/icons/FormatColorFill';
 import StrokeColorIcon from '@material-ui/icons/BorderColor';
 import LineWeightIcon from '@material-ui/icons/LineWeight';
@@ -38,13 +35,33 @@ class AnnotationCreation extends Component {
     super(props);
     const annoState = {};
     if (props.annotation) {
+      if (Array.isArray(props.annotation.body)) {
+        annoState.tags = [];
+        props.annotation.body.forEach((body) => {
+          if (body.purpose === 'tagging') {
+            annoState.tags.push(body.value);
+          } else {
+            annoState.annoBody = body.value;
+          }
+        });
+      } else {
         annoState.annoBody = props.annotation.body.value;
+      }
+      if (Array.isArray(props.annotation.target.selector)) {
+        props.annotation.target.selector.forEach((selector) => {
+          if (selector.type === 'SvgSelector') {
+            annoState.svg = selector.value;
+          } else if (selector.type === 'FragmentSelector') {
+            annoState.xywh = selector.value.replace('xywh=', '');
+          }
+        });
+      } else {
         annoState.svg = props.annotation.target.selector.value;
       }
+    }
     this.state = {
       activeTool: 'cursor',
       annoBody: '',
-      closedMode: 'closed',
       colorPopoverOpen: false,
       currentColorType: false,
       fillColor: null,
@@ -62,7 +79,6 @@ class AnnotationCreation extends Component {
     this.updateBody = this.updateBody.bind(this);
     this.updateGeometry = this.updateGeometry.bind(this);
     this.changeTool = this.changeTool.bind(this);
-    this.changeClosedMode = this.changeClosedMode.bind(this);
     this.openChooseColor = this.openChooseColor.bind(this);
     this.openChooseLineWeight = this.openChooseLineWeight.bind(this);
     this.handleLineWeightSelect = this.handleLineWeightSelect.bind(this);
@@ -128,7 +144,9 @@ class AnnotationCreation extends Component {
     const {
       annotation, canvases, closeCompanionWindow, receiveAnnotation, config,
     } = this.props;
-    const { annoBody, xywh, svg } = this.state;
+    const {
+      annoBody, tags, xywh, svg,
+    } = this.state;
     canvases.forEach((canvas) => {
       const storageAdapter = config.annotation.adapter(canvas.id);
       const anno = new WebAnnotation({
@@ -136,6 +154,7 @@ class AnnotationCreation extends Component {
         canvasId: canvas.id,
         id: (annotation && annotation.id) || `${uuid()}`,
         svg,
+        tags,
         xywh,
       }).toJson();
       if (annotation) {
@@ -161,13 +180,6 @@ class AnnotationCreation extends Component {
     });
   }
 
-  /** */
-  changeClosedMode(e) {
-    this.setState({
-      closedMode: e.currentTarget.value,
-    });
-  }
-
   /** */
   updateBody(annoBody) {
     this.setState({ annoBody });
@@ -188,7 +200,7 @@ class AnnotationCreation extends Component {
 
     const {
       activeTool, colorPopoverOpen, currentColorType, fillColor, popoverAnchorEl, strokeColor,
-      popoverLineWeightAnchorEl, lineWeightPopoverOpen, strokeWidth, closedMode, annoBody, svg,
+      popoverLineWeightAnchorEl, lineWeightPopoverOpen, strokeWidth, annoBody, svg,
     } = this.state;
     return (
       <CompanionWindow
@@ -201,7 +213,6 @@ class AnnotationCreation extends Component {
           fillColor={fillColor}
           strokeColor={strokeColor}
           strokeWidth={strokeWidth}
-          closed={closedMode === 'closed'}
           svg={svg}
           updateGeometry={this.updateGeometry}
           windowId={windowId}
@@ -248,9 +259,6 @@ class AnnotationCreation extends Component {
                   <ToggleButton value="polygon" aria-label="add a polygon">
                     <PolygonIcon />
                   </ToggleButton>
-                  <ToggleButton value="freehand" aria-label="free hand polygon">
-                    <GestureIcon />
-                  </ToggleButton>
                 </ToggleButtonGroup>
               </Paper>
             </Grid>
@@ -291,27 +299,6 @@ class AnnotationCreation extends Component {
                   <ArrowDropDownIcon />
                 </ToggleButton>
               </ToggleButtonGroup>
-
-              <Divider flexItem orientation="vertical" className={classes.divider} />
-              { /* close / open polygon mode only for freehand drawing mode. */
-                activeTool === 'freehand'
-                  ? (
-                    <ToggleButtonGroup
-                      size="small"
-                      value={closedMode}
-                      onChange={this.changeClosedMode}
-                    >
-                      <ToggleButton value="closed">
-                        <ClosedPolygonIcon />
-                      </ToggleButton>
-                      <ToggleButton value="open">
-                        <OpenPolygonIcon />
-                      </ToggleButton>
-                    </ToggleButtonGroup>
-                  )
-                  : null
-              }
-
             </Grid>
           </Grid>
           <Grid container>

src/WebAnnotation.js

@@ -2,23 +2,20 @@
 export default class WebAnnotation {
   /** */
   constructor({
-    canvasId, id, xywh, body, svg,
+    canvasId, id, xywh, body, tags, svg,
   }) {
     this.id = id;
     this.canvasId = canvasId;
     this.xywh = xywh;
     this.body = body;
+    this.tags = tags;
     this.svg = svg;
   }
 
   /** */
   toJson() {
     return {
-      body: {
-        language: 'en',
-        type: 'TextualBody',
-        value: this.body,
-      },
+      body: this.createBody(),
       id: this.id,
       motivation: 'commenting',
       target: this.target(),
@@ -26,20 +23,53 @@ export default class WebAnnotation {
     };
   }
 
+  /** */
+  createBody() {
+    let bodies = [];
+    if (this.body) {
+      bodies.push({
+        type: 'TextualBody',
+        value: this.body,
+      });
+    }
+    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;
+  }
+
   /** */
   target() {
     let target = this.canvasId;
     if (this.svg) {
-      target = {};
-      target.id = this.canvasId;
-      target.selector = {
+      target = {
+        id: this.canvasId, // should be source, see #25
+        selector: {
           type: 'SvgSelector',
           value: this.svg,
+        },
       };
-      return target;
     }
     if (this.xywh) {
-      target += `#xywh=${this.xywh}`;
+      if (target.selector) {
+        // add fragment selector
+        target.selector = [
+          {
+            type: 'FragmentSelector',
+            value: `xywh=${this.xywh}`,
+          },
+          target.selector,
+        ];
+      } else {
+        target = `${this.canvasId}#xywh=${this.xywh}`;
+      }
     }
     return target;
   }