Add typescript support

.gitignore

@@ -5,4 +5,9 @@
 /node_modules
 /umd
 npm-debug.log*
-.vscode/
+.vscode/
+.envrc
+.idea/
+*.iml
+.yarn
+.yarnrc

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "arrowParens": "avoid",
+  "singleQuote": true,
+  "trailingComma": "all"
+}

nwb.config.js

@@ -1,29 +1,35 @@
-const path = require('path')
+const path = require('path');
 
-module.exports = {
-  type: 'react-component',
-  npm: {
-    esModules: true,
-    umd: {
-      global: 'ReactImageAnnotation',
-      externals: {
-        react: 'React'
-      }
-    }
-  },
-  webpack: {
-    html: {
-      template: 'demo/src/index.html'
+module.exports = () => {
+  return {
+    type: 'react-app',
+    npm: {
+      esModules: true,
+      umd: {
+        global: 'nwb-template',
+        externals: {
+          react: 'React',
+        },
+      },
     },
-    extra: {
-      module: {
-        rules: [
-          {test: /\.txt/, loader: 'raw-loader'}
-        ]
-      }
-    }
-  },
-  karma: {
-    testContext: 'tests/index.test.js'
-  }
-}
+    webpack: {
+      html: {
+        template: 'demo/src/index.html',
+      },
+      config: config => {
+        config.entry = './demo/src/index';
+        config.resolve.extensions = ['.ts', '.tsx', '.js', '.jsx'];
+        config.module.rules.push({
+          test: /\.tsx?$/,
+          loader: 'ts-loader',
+        });
+        config.module.rules.push({ test: /\.txt/, loader: 'raw-loader' });
+
+        return config;
+      },
+    },
+    karma: {
+      testContext: 'tests/index.test.js',
+    },
+  };
+};

package.json

@@ -29,18 +29,24 @@
     "react-dom": ">=0.14"
   },
   "devDependencies": {
+    "@types/react": "^17.0.30",
     "chai": "^4.1.2",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "gh-pages": "^1.1.0",
-    "nwb": "0.21.x",
+    "nwb": "0.25.2",
+    "prettier": "^2.4.1",
     "raw-loader": "^0.5.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
     "react-syntax-highlighter": "^7.0.0",
-    "standard": "^10.0.3"
+    "standard": "^10.0.3",
+    "ts-loader": "^8.1.0",
+    "typescript": "^4.4.4",
+    "webpack": "^4.42.0",
+    "whatwg-fetch": "^3.6.2"
   },
   "standard": {
     "env": [

src/hocs/OvalSelector.ts

@@ -0,0 +1,119 @@
+import { getCoordPercentage } from './../utils/offsetCoordinates';
+import { IAnnotation, IGeometry, IPoint } from 'types/types';
+import { MouseEvent, TouchEvent } from 'react';
+
+const square = (n: number) => Math.pow(n, 2);
+
+export const TYPE = 'OVAL';
+
+export function intersects({ x, y }: IPoint, geometry: IGeometry) {
+  const rx = geometry.width / 2;
+  const ry = geometry.height / 2;
+  const h = geometry.x + rx;
+  const k = geometry.y + ry;
+
+  const value = square(x - h) / square(rx) + square(y - k) / square(ry);
+
+  return value <= 1;
+}
+
+export function area(geometry: IGeometry) {
+  const rx = geometry.width / 2;
+  const ry = geometry.height / 2;
+
+  return Math.PI * rx * ry;
+}
+
+export const methods = {
+  onTouchStart(annotation: IAnnotation, e: TouchEvent) {
+    return pointerDown(annotation, e);
+  },
+  onTouchEnd(annotation: IAnnotation, e: TouchEvent) {
+    return pointerUp(annotation, e);
+  },
+  onTouchMove(annotation: IAnnotation, e: TouchEvent) {
+    return pointerMove(annotation, e);
+  },
+  onMouseDown(annotation: IAnnotation, e: MouseEvent) {
+    return pointerDown(annotation, e);
+  },
+  onMouseUp(annotation: IAnnotation, e: MouseEvent) {
+    return pointerUp(annotation, e);
+  },
+  onMouseMove(annotation: IAnnotation, e: MouseEvent) {
+    return pointerMove(annotation, e);
+  },
+};
+
+function pointerDown(annotation: IAnnotation, e: TouchEvent | MouseEvent) {
+  if (!annotation.selection) {
+    const { x: anchorX, y: anchorY } = getCoordPercentage(e);
+
+    return {
+      ...annotation,
+      selection: {
+        ...(annotation.selection ?? {}),
+        mode: 'SELECTING',
+        anchorX,
+        anchorY,
+      },
+    };
+  } else {
+    return {};
+  }
+  return annotation;
+}
+
+function pointerUp(annotation: IAnnotation, e: TouchEvent | MouseEvent) {
+  if (annotation.selection) {
+    const { geometry } = annotation;
+
+    if (!geometry) {
+      return {};
+    }
+
+    switch (annotation.selection.mode) {
+      case 'SELECTING':
+        return {
+          ...annotation,
+          selection: {
+            ...annotation.selection,
+            showEditor: true,
+            mode: 'EDITING',
+          },
+        };
+      default:
+        break;
+    }
+  }
+  return annotation;
+}
+
+function pointerMove(annotation: IAnnotation, e: TouchEvent | MouseEvent) {
+  if (annotation.selection && annotation.selection.mode === 'SELECTING') {
+    const { anchorX, anchorY } = annotation.selection;
+    const { x: newX, y: newY } = getCoordPercentage(e);
+    const width = newX! - anchorX!;
+    const height = newY! - anchorY!;
+
+    return {
+      ...annotation,
+      geometry: {
+        ...annotation.geometry,
+        type: TYPE,
+        x: width > 0 ? anchorX : newX,
+        y: height > 0 ? anchorY : newY,
+        width: Math.abs(width),
+        height: Math.abs(height),
+      },
+    };
+  }
+  return annotation;
+}
+
+export default {
+  TYPE,
+  intersects,
+  area,
+  methods,
+};

src/types/types.ts

@@ -0,0 +1,44 @@
+export interface IPoint {
+  x: number;
+  y: number;
+}
+
+export interface IGeometry {
+  type: string;
+  x: number;
+  y: number;
+  height: number;
+  width: number;
+}
+export interface ISelector {
+  TYPE: string;
+  intersects: (
+    { x, y }: { x: number; y: number },
+    geometry: IGeometry,
+    container: { width: number; height: number },
+  ) => boolean;
+  area: (
+    geometry: IGeometry,
+    container: { width: number; height: number },
+  ) => number;
+  methods: {
+    onMouseUp?: (annotation: IAnnotation, e: any) => IAnnotation | {};
+    onMouseDown?: (annotation: IAnnotation, e: any) => IAnnotation | {};
+    onMouseMove?: (annotation: IAnnotation, e: any) => IAnnotation | {};
+    onClick?: (annotation: IAnnotation, e: any) => IAnnotation | {};
+  };
+}
+
+export interface IAnnotation {
+  selection?: {
+    mode: string;
+    showEditor: boolean;
+    anchorX?: number;
+    anchorY?: number;
+  };
+  geometry: IGeometry;
+  data: {
+    text: string;
+    id?: number;
+  };
+}