diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..649a2c4e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,22 @@ +{ + "python.pythonPath": ".env/bin/python", + "eslint.enable": true, + "eslint.validate": [ + "javascript", + "typescript" + ], + "eslint.workingDirectories": [ + { + "directory": "./cvat-core", + "changeProcessCWD": true + }, + { + "directory": "./cvat-canvas", + "changeProcessCWD": true + }, + { + "directory": ".", + "changeProcessCWD": true + } + ] +} diff --git a/cvat-canvas/.eslintrc.js b/cvat-canvas/.eslintrc.js new file mode 100644 index 00000000..47f48e73 --- /dev/null +++ b/cvat-canvas/.eslintrc.js @@ -0,0 +1,50 @@ +/* + * Copyright (C) 2019 Intel Corporation + * SPDX-License-Identifier: MIT +*/ + +module.exports = { + 'env': { + 'node': true, + 'browser': true, + 'es6': true, + }, + 'parserOptions': { + 'parser': '@typescript-eslint/parser', + 'ecmaVersion': 6, + }, + 'plugins': [ + '@typescript-eslint', + 'import', + ], + 'extends': [ + 'plugin:@typescript-eslint/recommended', + 'airbnb-typescript/base', + 'plugin:import/errors', + 'plugin:import/warnings', + 'plugin:import/typescript', + ], + 'rules': { + '@typescript-eslint/no-explicit-any': 0, + '@typescript-eslint/indent': ['warn', 4], + 'no-plusplus': 0, + 'no-restricted-syntax': [ + 0, + { + 'selector': 'ForOfStatement' + } + ], + 'no-continue': 0, + 'func-names': 0, + 'no-console': 0, // this rule deprecates console.log, console.warn etc. because 'it is not good in production code' + 'lines-between-class-members': 0, + 'import/prefer-default-export': 0, // works incorrect with interfaces + }, + 'settings': { + 'import/resolver': { + 'node': { + 'extensions': ['.ts', '.js', '.json'], + }, + }, + }, +}; diff --git a/cvat-canvas/package.json b/cvat-canvas/package.json index 2ee27f69..a8ad99f8 100644 --- a/cvat-canvas/package.json +++ b/cvat-canvas/package.json @@ -24,9 +24,11 @@ "@typescript-eslint/eslint-plugin": "^1.13.0", "@typescript-eslint/parser": "^1.13.0", "babel-loader": "^8.0.6", + "eslint": "^6.1.0", + "eslint-config-airbnb-typescript": "^4.0.1", + "eslint-config-typescript-recommended": "^1.4.17", + "eslint-plugin-import": "^2.18.2", "nodemon": "^1.19.1", - "tslint": "^5.18.0", - "tslint-config-airbnb": "^5.11.1", "typescript": "^3.5.3", "webpack": "^4.36.1", "webpack-cli": "^3.3.6", diff --git a/cvat-canvas/src/canvas.ts b/cvat-canvas/src/canvas.ts index 88f1ca96..3b4d9dd5 100644 --- a/cvat-canvas/src/canvas.ts +++ b/cvat-canvas/src/canvas.ts @@ -64,7 +64,7 @@ class CanvasImpl implements Canvas { } public draw(enabled: boolean = false, shapeType: string = '', - numberOfPoints: number = 0, initialState: any = null): any { + numberOfPoints: number = 0, initialState: any = null): any { return this.model.draw(enabled, shapeType, numberOfPoints, initialState); } diff --git a/cvat-canvas/src/canvasModel.ts b/cvat-canvas/src/canvasModel.ts index 62a5f5ab..4be46bf2 100644 --- a/cvat-canvas/src/canvasModel.ts +++ b/cvat-canvas/src/canvasModel.ts @@ -3,6 +3,9 @@ * SPDX-License-Identifier: MIT */ +// Disable till full implementation +/* eslint class-methods-use-this: "off" */ + import { MasterImpl } from './master'; export interface Size { @@ -202,7 +205,7 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel { } public draw(enabled: boolean, shapeType: string, - numberOfPoints: number, initialState: any): any { + numberOfPoints: number, initialState: any): any { return { enabled, initialState, diff --git a/cvat-canvas/src/canvasView.ts b/cvat-canvas/src/canvasView.ts index 19cc34c7..2b5be0fe 100644 --- a/cvat-canvas/src/canvasView.ts +++ b/cvat-canvas/src/canvasView.ts @@ -3,6 +3,9 @@ * SPDX-License-Identifier: MIT */ +// Disable till full implementation +/* eslint class-methods-use-this: "off" */ + import * as SVG from 'svg.js'; // tslint:disable-next-line: ordered-imports @@ -32,7 +35,7 @@ function translateToSVG(svg: SVGSVGElement, points: number[]): number[] { return output; } -function darker(color: string, percentage: number) { +function darker(color: string, percentage: number): string { const R = Math.round(parseInt(color.slice(1, 3), 16) * (1 - percentage / 100)); const G = Math.round(parseInt(color.slice(3, 5), 16) * (1 - percentage / 100)); const B = Math.round(parseInt(color.slice(5, 7), 16) * (1 - percentage / 100)); @@ -283,7 +286,7 @@ export class CanvasViewImpl implements CanvasView, Listener { return this.canvas; } - private addObjects(ctm: SVGMatrix, objects: any[], geometry: Geometry) { + private addObjects(ctm: SVGMatrix, objects: any[], geometry: Geometry): void { for (const object of objects) { if (object.objectType === 'tag') { this.addTag(object, geometry); @@ -309,8 +312,7 @@ export class CanvasViewImpl implements CanvasView, Listener { } return `${acc}${val},`; - }, - '' , + }, '', ); if (object.shapeType === 'polygon') { @@ -329,12 +331,12 @@ export class CanvasViewImpl implements CanvasView, Listener { this.activate(geometry); } - private activate(geometry: Geometry) { + private activate(geometry: Geometry): void { for (const shape of this.svgShapes) { const self = this; - (shape as any).draggable().on('dragstart', () => { + (shape as any).draggable().on('dragstart', (): void => { console.log('hello'); - }).on('dragend', () => { + }).on('dragend', (): void => { console.log('hello'); }); @@ -352,7 +354,7 @@ export class CanvasViewImpl implements CanvasView, Listener { 'stroke-width': self.BASE_STROKE_WIDTH / (3 * geometry.scale), }); - circle.node.addEventListener('mouseenter', () => { + circle.node.addEventListener('mouseenter', (): void => { circle.attr({ 'stroke-width': circle.attr('stroke-width') * 2, }); @@ -360,7 +362,7 @@ export class CanvasViewImpl implements CanvasView, Listener { circle.addClass('cvat_canvas_selected_point'); }); - circle.node.addEventListener('mouseleave', () => { + circle.node.addEventListener('mouseleave', (): void => { circle.attr({ 'stroke-width': circle.attr('stroke-width') / 2, }); @@ -382,54 +384,55 @@ export class CanvasViewImpl implements CanvasView, Listener { const [xtl, ytl, xbr, ybr] = points; return this.adoptedContent.rect().size(xbr - xtl, ybr - ytl).attr({ - client_id: state.clientID, + clientID: state.clientID, 'color-rendering': 'optimizeQuality', fill: state.color, 'shape-rendering': 'geometricprecision', stroke: darker(state.color, 50), 'stroke-width': this.BASE_STROKE_WIDTH / geometry.scale, - z_order: state.zOrder, - }).move(xtl, ytl).addClass('cvat_canvas_shape'); + zOrder: state.zOrder, + }).move(xtl, ytl) + .addClass('cvat_canvas_shape'); } private addPolygon(points: string, state: any, geometry: Geometry): SVG.Polygon { return this.adoptedContent.polygon(points).attr({ - client_id: state.clientID, + clientID: state.clientID, 'color-rendering': 'optimizeQuality', fill: state.color, 'shape-rendering': 'geometricprecision', stroke: darker(state.color, 50), 'stroke-width': this.BASE_STROKE_WIDTH / geometry.scale, - z_order: state.zOrder, + zOrder: state.zOrder, }).addClass('cvat_canvas_shape'); } private addPolyline(points: string, state: any, geometry: Geometry): SVG.PolyLine { return this.adoptedContent.polyline(points).attr({ - client_id: state.clientID, + clientID: state.clientID, 'color-rendering': 'optimizeQuality', fill: state.color, 'shape-rendering': 'geometricprecision', stroke: darker(state.color, 50), 'stroke-width': this.BASE_STROKE_WIDTH / geometry.scale, - z_order: state.zOrder, + zOrder: state.zOrder, }).addClass('cvat_canvas_shape'); } private addPoints(points: string, state: any, geometry: Geometry): SVG.Polygon { return this.adoptedContent.polygon(points).attr({ - client_id: state.clientID, + clientID: state.clientID, 'color-rendering': 'optimizeQuality', fill: state.color, opacity: 0, 'shape-rendering': 'geometricprecision', stroke: darker(state.color, 50), 'stroke-width': this.BASE_STROKE_WIDTH / geometry.scale, - z_order: state.zOrder, + zOrder: state.zOrder, }).addClass('cvat_canvas_shape'); } private addTag(state: any, geometry: Geometry): void { - // TODO: + console.log(state, geometry); } } diff --git a/cvat-canvas/tslint.config.js b/cvat-canvas/tslint.config.js deleted file mode 100644 index 7c33d7b2..00000000 --- a/cvat-canvas/tslint.config.js +++ /dev/null @@ -1,34 +0,0 @@ -/* -* Copyright (C) 2019 Intel Corporation -* SPDX-License-Identifier: MIT -*/ - -/* eslint-disable */ - -module.exports = { - defaultSeverity: 'error', - extends: [ - 'tslint:recommended', - 'tslint-config-airbnb' - ], - jsRules: {}, - rulesDirectory: [], - rules: { - 'ter-indent': ['warn', 4], - // TypeScript guildline prevents interfaces names started with I - // https://github.com/Microsoft/TypeScript/wiki/Coding-guidelines#names - 'interface-name': false, - 'no-console': false, - // Arrow functions doesn't use closure context, but sometimes we need it - // At the same time typescript non-arrow functions are forbidden in TS - // So, we forced to disable this rule - 'no-this-assignment': false, - // Just a strange rule - 'no-shadowed-variable': false, - // Don't prevent ++ and -- operations (the same like in eslint) - 'no-increment-decrement': false, - }, - linterOptions: { - include: ['src/*.ts'] - } -}