Base code and settings for cvat-canvas (#594)

cvat-canvas/.eslintrc.js

@@ -0,0 +1,44 @@
+/*
+ * Copyright (C) 2018 Intel Corporation
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+ module.exports = {
+    "env": {
+        "node": true,
+        "browser": true,
+        "es6": true,
+    },
+    "parserOptions": {
+        "parser": "@typescript-eslint/parser",
+        "sourceType": "module",
+        "ecmaVersion": 6,
+    },
+    "plugins": [
+        "security",
+        "no-unsanitized",
+        "no-unsafe-innerhtml",
+        "@typescript-eslint",
+    ],
+    "extends": [
+        "eslint:recommended",
+        "plugin:security/recommended",
+        "plugin:no-unsanitized/DOM",
+        "plugin:@typescript-eslint/recommended",
+        "airbnb",
+    ],
+    "rules": {
+        "no-new": [0],
+        "class-methods-use-this": [0],
+        "no-plusplus": [0],
+        "no-restricted-syntax": [0, {"selector": "ForOfStatement"}],
+        "no-continue": [0],
+        "security/detect-object-injection": 0,
+        "indent": ["warn", 4],
+        "no-useless-constructor": 0,
+        "func-names": [0],
+        "no-console": [0], // this rule deprecates console.log, console.warn etc. because "it is not good in production code"
+        "@typescript-eslint/no-explicit-any": [0],
+    },
+};

cvat-canvas/README.md

@@ -1,7 +1,30 @@
-# Module
+# Module CVAT-CANVAS
 
-- Written on typescript
+## Description
-- Contains the class ```Canvas``` and the Enum ```Rotation```
+The CVAT module presents a canvas to viewing, drawing and editing of annotations.
+
+- It has been written on typescript
+- It contains the class ```Canvas``` and the enum ```Rotation```
+
+## Commands
+- Building of the module from sources in the ```dist``` directory:
+
+```bash
+npm run build
+npm run build -- --mode=development     # without a minification
+```
+
+- Running development server
+```bash
+npm run server
+```
+
+- Updating of a module version:
+```bash
+npm version patch   # updated after minor fixes
+npm version minor   # updated after major changes which don't affect API compatibility with previous versions
+npm version major   # updated after major changes which affect API compatibility with previous versions
+```
 
 ## Creation
 Canvas is created by using constructor:
@@ -26,22 +49,21 @@ Canvas itself handles:
 
 All methods are sync.
 
-```js
+```ts
-    html() => canvas HTML element
+    html(): HTMLElement;
-    setup(const FrameData: frameData, [ObjectState]) => undefined
+    setup(frameData: FrameData, objectStates: ObjectState): void;
-
+    activate(clientID: number, attributeID?: number): void;
-    activate(const number: clientID, const number: attributeID = null) => undefined // select if can't activate
+    rotate(direction: Rotation): void;
-    rotate(const Rotation: Rotation.CLOCKWISE) => undefined
+    focus(clientID: number, padding?: number): void;
-    focus(const number: clientID, const number: padding) => undefined
+    fit(): void;
-    fit() => undefined
+    grid(stepX: number, stepY: number): void;
-    grid(stepX, stepY, color, opacity) => undefined
+
-
+    draw(enabled?: boolean, shapeType?: string, numberOfPoints?: number, initialState?: any): void | ObjectState;
-    draw(shapeType, numberOfPoints = null, initializeState = null) => ObjectState
+    split(enabled?: boolean): void | ObjectState;
-    split(const boolean: enabled = false) => ObjectState || undefined
+    group(enabled?: boolean): void | ObjectState;
-    group(const boolean: enabled = false) => [ObjectState] || undefined
+    merge(enabled?: boolean): void | ObjectState;
-    merge(const boolean: enabled = false) => [ObjectState] || undefined
+
-
+    cancel(): any;
-    cancel() => undefined
 ```
 
 ### CSS Classes/IDs
@@ -72,7 +94,7 @@ Standard JS events are used.
 
 ## States
 
- ![](images/states.png)
+ ![](images/states.svg)
 
 ## API Reaction
 
@@ -85,7 +107,6 @@ Standard JS events are used.
 | focus()    | +    | +        | +         | +       | +       | +       |
 | fit()      | +    | +        | +         | +       | +       | +       |
 | grid()     | +    | +        | +         | +       | +       | +       |
-| adjust()   | +    | +        | +         | +       | +       | +       |
 | draw()     | +    | -        | -         | -       | -       | -       |
 | split()    | +    | -        | +         | -       | -       | -       |
 | group      | +    | +        | -         | -       | -       | -       |

cvat-canvas/package.json

@@ -4,8 +4,7 @@
   "description": "Part of Computer Vision Annotation Tool which presents its canvas library",
   "main": "babel.config.js",
   "scripts": {
-    "compile": "tsc",
+    "build": "tsc && webpack --config ./webpack.config.js",
-    "build": "npm run compile && webpack --config ./webpack.config.js",
     "server": "nodemon --watch config --exec 'webpack-dev-server --config ./webpack.config.js --open'"
   },
   "author": "Intel",
@@ -18,6 +17,9 @@
     "@babel/core": "^7.5.5",
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-typescript": "^7.3.3",
+    "eslint": "^6.1.0",
+    "@typescript-eslint/eslint-plugin": "^1.13.0",
+    "@typescript-eslint/parser": "^1.13.0",
     "babel-loader": "^8.0.6",
     "nodemon": "^1.19.1",
     "typescript": "^3.5.3",

cvat-canvas/src/canvas.ts

@@ -1,5 +1,83 @@
+/*
+* Copyright (C) 2018 Intel Corporation
+* SPDX-License-Identifier: MIT
+*/
 
-function tmp(message: string) {
+/* eslint-disable */
-    console.log(message)
+// Temporary disable eslint
-    return message;
+
+interface CanvasInterface {
+    html(): HTMLElement;
+    setup(frameData: any, objectStates: any[]): void;
+    activate(clientID: number, attributeID?: number): void;
+    rotate(direction: Rotation): void;
+    focus(clientID: number, padding?: number): void;
+    fit(): void;
+    grid(stepX: number, stepY: number): void;
+
+    draw(shapeType: string, numberOfPoints: number, initialState: any): any;
+    split(enabled?: boolean): any;
+    group(enabled?: boolean): any;
+    merge(enabled?: boolean): any;
+
+    cancel(): void;
+}
+
+export enum Rotation {
+    CLOCKWISE90,
+    ANTICLOCKWISE90,
+}
+
+export class Canvas implements CanvasInterface {
+    public constructor() {
+        return this;
+    }
+
+    public html(): HTMLElement {
+        throw new Error('Method not implemented.');
+    }
+
+    public setup(frameData: any, objectStates: any[]): void {
+        throw new Error('Method not implemented.');
+    }
+
+    public activate(clientID: number, attributeID: number = null): void {
+        throw new Error('Method not implemented.');
+    }
+
+    public rotate(direction: Rotation): void {
+        throw new Error('Method not implemented.');
+    }
+
+    public focus(clientID: number, padding: number = 0): void {
+        throw new Error('Method not implemented.');
+    }
+
+    public fit(): void {
+        throw new Error('Method not implemented.');
+    }
+
+    public grid(stepX: number, stepY: number): void {
+        throw new Error('Method not implemented.');
+    }
+
+    public draw(shapeType: string, numberOfPoints: number, initialState: any): any {
+        throw new Error('Method not implemented.');
+    }
+
+    public split(enabled: boolean = false): any {
+        throw new Error('Method not implemented.');
+    }
+
+    public group(enabled: boolean = false): any {
+        throw new Error('Method not implemented.');
+    }
+
+    public merge(enabled: boolean = false): any {
+        throw new Error('Method not implemented.');
+    }
+
+    public cancel(): void {
+        throw new Error('Method not implemented.');
+    }
 }

cvat-canvas/tsconfig.json

@@ -1,9 +1,11 @@
 {
     "compilerOptions": {
+        "emitDeclarationOnly": true,
         "module": "commonjs",
         "noImplicitAny": true,
         "preserveConstEnums": true,
-        "allowJs": true
+        "declaration": true,
+        "declarationDir": "dist/declaration"
     },
     "include": [
         "src/**/*"

cvat-canvas/webpack.config.js

@@ -6,8 +6,16 @@
 const path = require('path');
 
 module.exports = {
+    target: 'web',
+    mode: 'production',
     devtool: 'source-map',
-    entry: './src/canvas.js',
+    entry: './src/canvas.ts',
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: 'cvat-canvas.js',
+        library: 'canvas',
+        libraryTarget: 'commonjs',
+    },
     devServer: {
         contentBase: path.join(__dirname, 'dist'),
         compress: true,
@@ -24,6 +32,9 @@ module.exports = {
                         [
                             '@babel/preset-env',
                         ],
+                        [
+                            '@babel/typescript',
+                        ],
                     ],
                     sourceType: 'unambiguous',
                 },

cvat-core/package.json

@@ -19,6 +19,7 @@
     "babel-loader": "^8.0.6",
     "core-js": "^3.0.1",
     "coveralls": "^3.0.5",
+    "eslint": "^6.1.0",
     "jest": "^24.8.0",
     "jest-junit": "^6.4.0",
     "jsdoc": "^3.6.2",