diff --git a/cvat-canvas/.eslintrc.js b/cvat-canvas/.eslintrc.js new file mode 100644 index 00000000..923ddd26 --- /dev/null +++ b/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], + }, +}; diff --git a/cvat-canvas/README.md b/cvat-canvas/README.md index 535a6e25..783c5b46 100644 --- a/cvat-canvas/README.md +++ b/cvat-canvas/README.md @@ -1,7 +1,30 @@ -# Module +# Module CVAT-CANVAS -- Written on typescript -- Contains the class ```Canvas``` and the Enum ```Rotation``` +## Description +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 - 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 +```ts + html(): HTMLElement; + setup(frameData: FrameData, objectStates: ObjectState): 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(enabled?: boolean, shapeType?: string, numberOfPoints?: number, initialState?: any): void | ObjectState; + split(enabled?: boolean): void | ObjectState; + group(enabled?: boolean): void | ObjectState; + merge(enabled?: boolean): void | ObjectState; + + cancel(): any; ``` ### 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 | + | + | - | - | - | - | diff --git a/cvat-canvas/images/states.png b/cvat-canvas/images/states.png deleted file mode 100644 index a7371171..00000000 Binary files a/cvat-canvas/images/states.png and /dev/null differ diff --git a/cvat-canvas/images/states.svg b/cvat-canvas/images/states.svg new file mode 100644 index 00000000..85f673cc --- /dev/null +++ b/cvat-canvas/images/states.svg @@ -0,0 +1,340 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + FREE + + + + GROUPING + + + SPLITTING + + + DRAWING + + + MERGING + + + EDITING + + + BROKER + + + canvas.drawn + + + canvas.merged + + + canvas.edited + + + canvas.splitted + + + canvas.grouped + + + + merge(false) + cancel() + + + cancel() + + + split(false) + cancel() + + + group(false) + cancel() + + + cancel() + + + group(true) + + + internal transition + + + merge(true) + + + split(true) + + + draw() + + + + + + go to state + + + go from state + + + + emitted events + + + + background + + + + Layer 1 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + IDLE + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/cvat-canvas/package.json b/cvat-canvas/package.json index af2cd2d9..0e6a808c 100644 --- a/cvat-canvas/package.json +++ b/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": "npm run compile && webpack --config ./webpack.config.js", + "build": "tsc && 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", diff --git a/cvat-canvas/src/canvas.ts b/cvat-canvas/src/canvas.ts index 18e4b708..41a6a565 100644 --- a/cvat-canvas/src/canvas.ts +++ b/cvat-canvas/src/canvas.ts @@ -1,5 +1,83 @@ +/* +* Copyright (C) 2018 Intel Corporation +* SPDX-License-Identifier: MIT +*/ -function tmp(message: string) { - console.log(message) - return message; +/* eslint-disable */ +// Temporary disable eslint + +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.'); + } } diff --git a/cvat-canvas/tsconfig.json b/cvat-canvas/tsconfig.json index 299c06b7..a15fa72d 100644 --- a/cvat-canvas/tsconfig.json +++ b/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/**/*" diff --git a/cvat-canvas/webpack.config.js b/cvat-canvas/webpack.config.js index 2a7c1cf3..ef230d26 100644 --- a/cvat-canvas/webpack.config.js +++ b/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', }, diff --git a/cvat-core/package.json b/cvat-core/package.json index 48ee0d0d..dca386ad 100644 --- a/cvat-core/package.json +++ b/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",