emigre · Thomas365 · Apr 13, 2018 · Apr 13, 2018 · Apr 16, 2018 · Apr 17, 2018
diff --git a/package.json b/package.json
@@ -71,6 +71,7 @@
     "babel-plugin-transform-flow-strip-types": "^6.22.0",
     "babel-preset-es2015": "^6.22.0",
     "babel-preset-stage-0": "^6.22.0",
+    "cz-conventional-changelog": "^2.1.0",
     "eslint": "^3.17.0",
     "eslint-config-airbnb": "^14.1.0",
     "eslint-plugin-import": "^2.2.0",
@@ -88,5 +89,10 @@
   },
   "peerDependencies": {
     "openseadragon": "^2.2.1"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
   }
 }
diff --git a/src/main.js b/src/main.js
@@ -1,7 +1,7 @@
 import { Rect } from 'OpenSeadragon';
 import { h, render } from 'preact';
 import Overlay from './views/Overlay';
-import { DrawControl, MoveControl } from './views/Controls';
+// import { DrawControl, MoveControl } from './views/Controls';
 import createDispatcher from './model/createDispatcher';
 import generalActions from './model/generalActions';
 import createModel from './model/createModel';
@@ -14,18 +14,18 @@ const annotationsPrototype = {
     const zoom = this.viewer.viewport.getZoom();
     const { width, height } = this.overlay.getBoundingClientRect();
     this.dispatch({ type: 'INITIALIZE', zoom, width, height });
-    this.controls = [
-      new MoveControl({ dispatch: this.dispatch, model: this.model, viewer: this.viewer }),
-      new DrawControl({ dispatch: this.dispatch, model: this.model, viewer: this.viewer }),
-    ];
+    // this.controls = [
+    //   new MoveControl({ dispatch: this.dispatch, model: this.model, viewer: this.viewer }),
+    //   new DrawControl({ dispatch: this.dispatch, model: this.model, viewer: this.viewer }),
+    // ];
   },
 
   onClose() {
     // TODO
   },
 
   getAnnotations() {
-    return this.model.getAll();
+    return this.model.annotations;
   },
 
   setAnnotations(annotations) {
@@ -47,6 +47,14 @@ const annotationsPrototype = {
   getStatus() {
     return { active: !!this.overlay };
   },
+
+  onStartDraw() {
+    this.dispatch({ type: 'MODE_UPDATE', mode: 'DRAW' });
+  },
+
+  onStopDraw() {
+    this.dispatch({ type: 'MODE_UPDATE', mode: 'MOVE' });
+  },
 };
 
 export default ({ viewer }) => {

diff --git a/src/model/createModel.js b/src/model/createModel.js
@@ -9,4 +9,10 @@ export default () =>
     height: 0,
     activityInProgress: false,
     annotations: [],
+    addAnnotationCallback: null,
+    style: {
+      type: 'polyline', // type: polyline, polygon, line, ellipse, rect, path (default)
+      color: 'red',
+      width: 3,
+    },
   });
diff --git a/src/model/generalActions.js b/src/model/generalActions.js
@@ -15,33 +15,143 @@ const reactToGeneralAction = (model) =>
       case 'PRESS':
         if (model.mode === 'DRAW') {
           model.activityInProgress = true;
-          model.annotations.push([
-            'path',
-            {
-              fill: 'none',
-              d: `M${action.x} ${action.y}`,
-              stroke: 'red',
-              'stroke-width': 3,
-              'stroke-linejoin': 'round',
-              'stroke-linecap': 'round',
-              'vector-effect': 'non-scaling-stroke',
-            },
-          ]);
+          switch (model.style.type) {
+            case 'polyline':
+              model.annotations.push([
+                'polyline',
+                {
+                  fill: 'none',
+                  points: `${action.x},${action.y}`,
+                  stroke: model.style.color || 'red',
+                  'stroke-width': model.style.width || 3,
+                  'stroke-linejoin': 'round',
+                  'stroke-linecap': 'round',
+                  'vector-effect': 'non-scaling-stroke',
+                },
+              ]);
+              break;
+            case 'polygon':
+              model.annotations.push([
+                'polygon',
+                {
+                  fill: 'none',
+                  points: `${action.x},${action.y}`,
+                  stroke: model.style.color || 'red',
+                  'stroke-width': model.style.width || 3,
+                  'stroke-linejoin': 'round',
+                  'stroke-linecap': 'round',
+                  'vector-effect': 'non-scaling-stroke',
+                },
+              ]);
+              break;
+            case 'line':
+              model.annotations.push([
+                'line',
+                {
+                  fill: 'none',
+                  x1: action.x,
+                  y1: action.y,
+                  x2: action.x,
+                  y2: action.y,
+                  stroke: model.style.color || 'red',
+                  'stroke-width': model.style.width || 3,
+                  'stroke-linejoin': 'round',
+                  'stroke-linecap': 'round',
+                  'vector-effect': 'non-scaling-stroke',
+                },
+              ]);
+              break;
+            case 'ellipse':
+              model.annotations.push([
+                'ellipse',
+                {
+                  fill: 'none',
+                  cx: action.x,
+                  cy: action.y,
+                  rx: 0,
+                  ry: 0,
+                  stroke: model.style.color || 'red',
+                  'stroke-width': model.style.width || 3,
+                  'stroke-linejoin': 'round',
+                  'stroke-linecap': 'round',
+                  'vector-effect': 'non-scaling-stroke',
+                },
+              ]);
+              break;
+            case 'rect':
+              model.annotations.push([
+                'rect',
+                {
+                  fill: 'none',
+                  sx: action.x,
+                  sy: action.y,
+                  x: action.x,
+                  y: action.x,
+                  width: 0,
+                  height: 0,
+                  stroke: model.style.color || 'red',
+                  'stroke-width': model.style.width || 3,
+                  'stroke-linejoin': 'round',
+                  'stroke-linecap': 'round',
+                  'vector-effect': 'non-scaling-stroke',
+                },
+              ]);
+              break;
+            default:
+              model.annotations.push([
+                'path',
+                {
+                  fill: 'none',
+                  d: `M${action.x} ${action.y}`,
+                  stroke: model.style.color || 'red',
+                  'stroke-width': model.style.width || 3,
+                  'stroke-linejoin': 'round',
+                  'stroke-linecap': 'round',
+                  'vector-effect': 'non-scaling-stroke',
+                },
+              ]);
+          }
         }
         break;
 
       case 'RELEASE':
         if (model.mode === 'DRAW') {
           model.activityInProgress = false;
+          if (model.addAnnotationCallback instanceof Function) {
+            model.addAnnotationCallback();
+          }
         }
         break;
 
       case 'MOVE':
         if (model.mode === 'DRAW' && model.activityInProgress === true) {
           const annotations = model.annotations;
           const lastAnnotation = annotations[annotations.length - 1];
-          if (lastAnnotation && lastAnnotation[0] === 'path') {
-            lastAnnotation[1].d += ` L${action.x} ${action.y}`;
+          if (lastAnnotation) {
+            switch (lastAnnotation[0]) {
+              case 'polyline':
+                lastAnnotation[1].points += ` ${action.x},${action.y}`;
+                break;
+              case 'polygon':
+                lastAnnotation[1].points += ` ${action.x},${action.y}`;
+                break;
+              case 'line':
+                lastAnnotation[1].x2 = action.x;
+                lastAnnotation[1].y2 = action.y;
+                break;
+              case 'ellipse':
+                lastAnnotation[1].rx = Math.abs(action.x - lastAnnotation[1].cx);
+                lastAnnotation[1].ry = Math.abs(action.y - lastAnnotation[1].cy);
+                break;
+              case 'rect':
+                lastAnnotation[1].x = lastAnnotation[1].sx < action.x ? lastAnnotation[1].sx : action.x;
+                lastAnnotation[1].y = lastAnnotation[1].sy < action.y ? lastAnnotation[1].sy : action.y;
+                lastAnnotation[1].width = Math.abs(lastAnnotation[1].sx - action.x);
+                lastAnnotation[1].height = Math.abs(lastAnnotation[1].sy - action.y);
+                break;
+              default:
+                lastAnnotation[1].d += ` L${action.x} ${action.y}`;
+            }
           }
         }
         break;

diff --git a/src/views/Overlay.js b/src/views/Overlay.js
@@ -31,16 +31,20 @@ class Overlay extends Component {
   }
 
   onMouseDown = (e) => {
+    if (e.button !== 0) {
+      return false;
+    }
     if (this.state.mode !== 'MOVE') {
       e.stopPropagation();
       this.props.dispatch({ type: 'PRESS', ...this.calculateCoords(e) });
+      this.base.style.cursor = 'pointer'
     }
   };
 
   onMouseMove = (e) => {
     if (this.state.mode !== 'MOVE') {
       e.stopPropagation();
-      this.props.dispatch({ type: 'MOVE', ...this.calculateCoords(e) })
+      this.props.dispatch({ type: 'MOVE', ...this.calculateCoords(e) });
     }
   };
 
@@ -49,13 +53,15 @@ class Overlay extends Component {
       e.stopPropagation();
       this.props.dispatch({ type: 'RELEASE' });
     }
+    this.base.style.cursor = 'default';
   };
 
   onMouseLeave = (e) => {
     if (this.state.mode !== 'MOVE') {
       e.stopPropagation();
       this.props.dispatch({ type: 'LEAVE_CANVAS' });
     }
+    this.base.style.cursor = 'default';
   };
 
   calculateCoords(e) {
@@ -79,13 +85,12 @@ class Overlay extends Component {
         width: '100%',
         height: '100%',
         style: {
-          cursor: 'default',
           'background-color': 'rgba(0,0,0,0)', // IE 9-10 fix
         },
-        onMouseDown,
+        // onMouseDown,
         onMouseLeave,
         onMouseMove,
-        onMouseUp,
+        // onMouseUp,
         onPointerDown: onMouseDown,
         onPointerUp: onMouseUp,
       },