cvat-canvas proposals (#588)

* Initialized cvat-canvas project (typescript, babel, webpack, autorebuild, dev-server)

cvat-canvas/.gitignore

+src/*.js
+dist

cvat-canvas/README.md

+# Module
+
+- Written on typescript
+- Contains the class ```Canvas``` and the Enum ```Rotation```
+
+## Creation
+Canvas is created by using constructor:
+
+```js
+    const { Canvas } = require('./canvas');
+    const canvas = new Canvas();
+```
+
+- Canvas has transparent background
+
+Canvas itself handles:
+- Shape context menu (PKM)
+- Image moving (mousedrag)
+- Image resizing (mousewheel)
+- Image fit (dblclick)
+- Remove point (PKM)
+- Polyshape editing (Shift + LKM)
+
+## API
+### Methods
+
+All methods are sync.
+
+```js
+    html() => canvas HTML element
+    setup(const FrameData: frameData, [ObjectState]) => undefined
+
+    activate(const number: clientID, const number: attributeID = null) => undefined // select if can't activate
+    rotate(const Rotation: Rotation.CLOCKWISE) => undefined
+    focus(const number: clientID, const number: padding) => undefined
+    fit() => undefined
+    grid(stepX, stepY, color, opacity) => undefined
+
+    draw(shapeType, numberOfPoints = null, initializeState = null) => ObjectState
+    split(const boolean: enabled = false) => ObjectState || undefined
+    group(const boolean: enabled = false) => [ObjectState] || undefined
+    merge(const boolean: enabled = false) => [ObjectState] || undefined
+
+    cancel() => undefined
+```
+
+### CSS Classes/IDs
+
+- Each drawn object (tag, shape, track) has id ```canvas_object_{objectState.id}```
+- Drawn shapes and tracks have classes ```canvas_shape```,
+ ```canvas_shape_activated```,
+ ```canvas_shape_grouping```,
+ ```canvas_shape_merging```,
+ ```canvas_shape_drawing```
+- Tags has a class ```canvas_tag```
+- Canvas image has ID ```canvas_image```
+
+### Events
+
+Standard JS events are used.
+```js
+    - canvas.setup
+    - canvas.activated => ObjectState
+    - canvas.deactivated
+    - canvas.moved => [ObjectState], x, y
+    - canvas.drawn => ObjectState
+    - canvas.edited => ObjectState
+    - canvas.splitted => ObjectState
+    - canvas.groupped => [ObjectState]
+    - canvas.merged => [ObjectState]
+```
+
+## States
+
+ ![](images/states.png)
+
+## API Reaction
+
+|            | FREE | GROUPING | SPLITTING | DRAWING | MERGING | EDITING |
+|------------|------|----------|-----------|---------|---------|---------|
+| html()     | +    | +        | +         | +       | +       | +       |
+| setup()    | +    | +        | +         | +       | +       | -       |
+| activate() | +    | -        | -         | -       | -       | -       |
+| rotate()   | +    | +        | +         | +       | +       | +       |
+| focus()    | +    | +        | +         | +       | +       | +       |
+| fit()      | +    | +        | +         | +       | +       | +       |
+| grid()     | +    | +        | +         | +       | +       | +       |
+| adjust()   | +    | +        | +         | +       | +       | +       |
+| draw()     | +    | -        | -         | -       | -       | -       |
+| split()    | +    | -        | +         | -       | -       | -       |
+| group      | +    | +        | -         | -       | -       | -       |
+| merge()    | +    | -        | -         | -       | +       | -       |
+| cancel()   | -    | +        | +         | +       | +       | +       |

cvat-canvas/package.json

+{
+  "name": "cvat-canvas",
+  "version": "0.1.0",
+  "description": "Part of Computer Vision Annotation Tool which presents its canvas library",
+  "main": "babel.config.js",
+  "scripts": {
+    "compile": "tsc",
+    "build": "npm run compile && webpack --config ./webpack.config.js",
+    "server": "nodemon --watch config --exec 'webpack-dev-server --config ./webpack.config.js --open'"
+  },
+  "author": "Intel",
+  "license": "MIT",
+  "dependencies": {
+    "@svgdotjs/svg.js": "^3.0.13"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.5.5",
+    "@babel/core": "^7.5.5",
+    "@babel/preset-env": "^7.5.5",
+    "@babel/preset-typescript": "^7.3.3",
+    "babel-loader": "^8.0.6",
+    "nodemon": "^1.19.1",
+    "typescript": "^3.5.3",
+    "webpack": "^4.36.1",
+    "webpack-cli": "^3.3.6",
+    "webpack-dev-server": "^3.7.2"
+  }
+}

cvat-canvas/src/canvas.ts

+
+function tmp(message: string) {
+    console.log(message)
+    return message;
+}

cvat-canvas/tsconfig.json

+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "noImplicitAny": true,
+        "preserveConstEnums": true,
+        "allowJs": true
+    },
+    "include": [
+        "src/**/*"
+    ],
+}

cvat-canvas/webpack.config.js

+/* global
+    require:true,
+    __dirname:true,
+*/
+
+const path = require('path');
+
+module.exports = {
+    devtool: 'source-map',
+    entry: './src/canvas.js',
+    devServer: {
+        contentBase: path.join(__dirname, 'dist'),
+        compress: true,
+        inline: true,
+        port: 9000,
+    },
+    module: {
+        rules: [{
+            exclude: /node_modules/,
+            use: {
+                loader: 'babel-loader',
+                options: {
+                    presets: [
+                        [
+                            '@babel/preset-env',
+                        ],
+                    ],
+                    sourceType: 'unambiguous',
+                },
+            },
+        }],
+    },
+};