diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 35615780..a2ef25bf 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,4 +1,147 @@ -# How to contribute to Computer Vision Annotation Tool (CVAT) +# Contributing to this project -When contributing to this repository, please first discuss the change you wish to make via issue, -email, or any other method with the owners of this repository before making a change. +Please take a moment to review this document in order to make the contribution +process easy and effective for everyone involved. + +Following these guidelines helps to communicate that you respect the time of +the developers managing and developing this open source project. In return, +they should reciprocate that respect in addressing your issue or assessing +patches and features. + +## Branching model + +The project uses [a successful Git branching model](https://nvie.com/posts/a-successful-git-branching-model). +Thus it has a couple of branches. Some of them are described below: + +- `origin/master` to be the main branch where the source code of +HEAD always reflects a production-ready state. +- `origin/develop` to be the main branch where the source code of +HEAD always reflects a state with the latest delivered development +changes for the next release. Some would call this the “integration branch”. + +## Using the issue tracker + +The issue tracker is the preferred channel for [bug reports](#bugs), +[features requests](#features) and [submitting pull +requests](#pull-requests), but please respect the following restrictions: + +* Please **do not** use the issue tracker for personal support requests (use + [Stack Overflow](http://stackoverflow.com)). + +* Please **do not** derail or troll issues. Keep the discussion on topic and + respect the opinions of others. + + +## Bug reports + +A bug is a _demonstrable problem_ that is caused by the code in the repository. +Good bug reports are extremely helpful - thank you! + +Guidelines for bug reports: + +1. **Use the GitHub issue search** — check if the issue has already been + reported. + +2. **Check if the issue has been fixed** — try to reproduce it using the + latest `develop` branch in the repository. + +3. **Isolate the problem** — ideally create a reduced test case. + +A good bug report shouldn't leave others needing to chase you up for more +information. Please try to be as detailed as possible in your report. What is +your environment? What steps will reproduce the issue? What browser(s) and OS +experience the problem? What would you expect to be the outcome? All these +details will help people to fix any potential bugs. + +Example: + +> Short and descriptive example bug report title +> +> A summary of the issue and the browser/OS environment in which it occurs. If +> suitable, include the steps required to reproduce the bug. +> +> 1. This is the first step +> 2. This is the second step +> 3. Further steps, etc. +> +> +> Any other information you want to share that is relevant to the issue being +> reported. This might include the lines of code that you have identified as +> causing the bug, and potential solutions (and your opinions on their +> merits). + + +## Feature requests + +Feature requests are welcome. But take a moment to find out whether your idea +fits with the scope and aims of the project. It's up to *you* to make a strong +case to convince the project's developers of the merits of this feature. Please +provide as much detail and context as possible. + + +## Pull requests + +Good pull requests - patches, improvements, new features - are a fantastic +help. They should remain focused in scope and avoid containing unrelated +commits. + +**Please ask first** before embarking on any significant pull request (e.g. +implementing features, refactoring code, porting to a different language), +otherwise you risk spending a lot of time working on something that the +project's developers might not want to merge into the project. + +Please adhere to the coding conventions used throughout a project (indentation, +accurate comments, etc.) and any other requirements (such as test coverage). + +Follow this process if you'd like your work considered for inclusion in the +project: + +1. [Fork](http://help.github.com/fork-a-repo/) the project, clone your fork, + and configure the remotes: + + ```bash + # Clone your fork of the repo into the current directory + git clone https://github.com// + # Navigate to the newly cloned directory + cd + # Assign the original repo to a remote called "upstream" + git remote add upstream https://github.com// + ``` + +2. If you cloned a while ago, get the latest changes from upstream: + + ```bash + git checkout + git pull upstream + ``` + +3. Create a new topic branch (off the main project development branch) to + contain your feature, change, or fix: + + ```bash + git checkout -b + ``` + +4. Commit your changes in logical chunks. Please adhere to these [git commit + message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html) + or your code is unlikely be merged into the main project. Use Git's + [interactive rebase](https://help.github.com/articles/interactive-rebase) + feature to tidy up your commits before making them public. + +5. Locally merge (or rebase) the upstream development branch into your topic branch: + + ```bash + git pull [--rebase] upstream + ``` + +6. Push your topic branch up to your fork: + + ```bash + git push origin + ``` + +7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/) + with a clear title and description. + +**IMPORTANT**: By submitting a patch, you agree to allow the project owner to +license your work under the same license as that used by the project. diff --git a/README.md b/README.md index 18f0c954..52263f01 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # Computer Vision Annotation Tool (CVAT) +[![Gitter chat](https://badges.gitter.im/opencv-cvat/gitter.png)](https://gitter.im/opencv-cvat) + CVAT is completely re-designed and re-implemented version of [Video Annotation Tool from Irvine, California](http://carlvondrick.com/vatic/) tool. It is free, online, interactive video and image annotation tool for computer vision. It is being used by our team to annotate million of objects with different properties. Many UI and UX decisions are based on feedbacks from professional data annotation team. ![CVAT screenshot](cvat/apps/documentation/static/documentation/images/cvat.jpg) @@ -8,6 +10,7 @@ CVAT is completely re-designed and re-implemented version of [Video Annotation T - [User's guide](cvat/apps/documentation/user_guide.md) - [XML annotation format](cvat/apps/documentation/xml_format.md) +- [AWS Deployment Guide](cvat/apps/documentation/AWS-Deployment-Guide.md) ## Screencasts diff --git a/cvat/apps/documentation/AWS-Deployment-Guide.md b/cvat/apps/documentation/AWS-Deployment-Guide.md new file mode 100644 index 00000000..5b40ee39 --- /dev/null +++ b/cvat/apps/documentation/AWS-Deployment-Guide.md @@ -0,0 +1,9 @@ +### AWS-Deployment Guide + +There are two ways of deploying the CVAT. +1. **On Nvidia GPU Machine:** Tensorflow annotation feature is dependent on GPU hardware. One of the easy ways to launch CVAT with the tf-annotation app is to use AWS P3 instances, which provides the NVIDIA GPU. Read more about [P3 instances here.](https://aws.amazon.com/about-aws/whats-new/2017/10/introducing-amazon-ec2-p3-instances/) +Overall setup instruction is explained in [main readme file](https://github.com/opencv/cvat/), except Installing Nvidia drivers. So we need to download the drivers and install it. For Amazon P3 instances, download the Nvidia Drivers from Nvidia website. For more check [Installing the NVIDIA Driver on Linux Instances](https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/install-nvidia-driver.html) link. + +2. **On Any other AWS Machine:** We can follow the same instruction guide mentioned in the [Readme file](https://github.com/opencv/cvat/). The additional step is to add a [security group and rule to allow incoming connections](https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/using-network-security.html). + +For any of above, don't forget to add exposed AWS public IP address to `docker-compose.override.com`. diff --git a/cvat/apps/engine/static/engine/js/annotationUI.js b/cvat/apps/engine/static/engine/js/annotationUI.js index 3bd09d35..e2bfce72 100644 --- a/cvat/apps/engine/static/engine/js/annotationUI.js +++ b/cvat/apps/engine/static/engine/js/annotationUI.js @@ -85,6 +85,13 @@ function buildAnnotationUI(job, shapeData, loadJobEvent) { let shapeCreatorController = new ShapeCreatorController(shapeCreatorModel); let shapeCreatorView = new ShapeCreatorView(shapeCreatorModel, shapeCreatorController); + let polyshapeEditorModel = new PolyshapeEditorModel(); + let polyshapeEditorController = new PolyshapeEditorController(polyshapeEditorModel); + let polyshapeEditorView = new PolyshapeEditorView(polyshapeEditorModel, polyshapeEditorController); + + // Add static member for class. It will be used by all polyshapes. + PolyShapeView.editor = polyshapeEditorModel; + let shapeMergerModel = new ShapeMergerModel(shapeCollectionModel); let shapeMergerController = new ShapeMergerController(shapeMergerModel); new ShapeMergerView(shapeMergerModel, shapeMergerController); @@ -129,7 +136,8 @@ function buildAnnotationUI(job, shapeData, loadJobEvent) { playerModel.subscribe(shapeCreatorView); playerModel.subscribe(shapeBufferView); playerModel.subscribe(shapeGrouperView); - playerModel.shift(0); + playerModel.subscribe(polyshapeEditorView); + playerModel.shift(getURISearchParameter('frame') || 0, true); let shortkeys = window.cvat.config.shortkeys; @@ -459,13 +467,15 @@ function setupMenu(job, shapeCollectionModel, annotationParser, aamModel, player }); $('#removeAnnotationButton').on('click', () => { - hide(); - confirm('Do you want to remove all annotations? The action cannot be undone!', - () => { - historyModel.empty(); - shapeCollectionModel.empty(); - } - ); + if (!window.cvat.mode) { + hide(); + confirm('Do you want to remove all annotations? The action cannot be undone!', + () => { + historyModel.empty(); + shapeCollectionModel.empty(); + } + ); + } }); $('#saveButton').on('click', () => { diff --git a/cvat/apps/engine/static/engine/js/base.js b/cvat/apps/engine/static/engine/js/base.js index dc9fb1ef..a164e3cd 100644 --- a/cvat/apps/engine/static/engine/js/base.js +++ b/cvat/apps/engine/static/engine/js/base.js @@ -4,7 +4,7 @@ * SPDX-License-Identifier: MIT */ -/* exported confirm showMessage showOverlay dumpAnnotationRequest */ +/* exported confirm showMessage showOverlay dumpAnnotationRequest getURISearchParameter setURISearchParameter */ "use strict"; Math.clamp = function(x, min, max) { @@ -161,6 +161,44 @@ function dumpAnnotationRequest(dumpButton, taskID) { } +function setURISearchParameter(name, value) { + let searchParams = new URLSearchParams(window.location.search); + if (typeof value === 'undefined' || value === null) { + if (searchParams.has(name)) { + searchParams.delete(name); + } + } + else searchParams.set(name, value); + + window.history.replaceState(null, null, `?${searchParams.toString()}`); +} + + +function resetURISearchParameters() { + let searchParams = new URLSearchParams(); + searchParams.set('id', window.cvat.job.id); + window.history.replaceState(null, null, `?${searchParams.toString()}`); +} + + +function getURISearchParameter(name) { + let decodedURI = ''; + try { + decodedURI = decodeURIComponent(window.location.search); + } + catch (error) { + showMessage('Bad URL has been found'); + resetURISearchParameters(); + } + + let urlSearchParams = new URLSearchParams(decodedURI); + if (urlSearchParams.has(name)) { + return urlSearchParams.get(name); + } + else return null; +} + + /* These HTTP methods do not require CSRF protection */ function csrfSafeMethod(method) { return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); @@ -178,7 +216,7 @@ $.ajaxSetup({ $(document).ready(function(){ $('body').css({ - width: window.screen.width * 0.95 + 'px', + width: window.screen.width + 'px', height: window.screen.height * 0.95 + 'px' }); }); diff --git a/cvat/apps/engine/static/engine/js/player.js b/cvat/apps/engine/static/engine/js/player.js index 2cce44cb..2dead4bd 100644 --- a/cvat/apps/engine/static/engine/js/player.js +++ b/cvat/apps/engine/static/engine/js/player.js @@ -778,7 +778,10 @@ class PlayerView { } this._loadingUI.addClass('hidden'); - this._playerBackgroundUI.css('background-image', 'url(' + '"' + image.src + '"' + ')'); + if (this._playerBackgroundUI.css('background-image').slice(5,-2) != image.src) { + this._playerBackgroundUI.css('background-image', 'url(' + '"' + image.src + '"' + ')'); + setURISearchParameter('frame', frames.current); + } if (model.playing) { this._playButtonUI.addClass('hidden'); diff --git a/cvat/apps/engine/static/engine/js/polyshapeEditor.js b/cvat/apps/engine/static/engine/js/polyshapeEditor.js new file mode 100644 index 00000000..4ed27168 --- /dev/null +++ b/cvat/apps/engine/static/engine/js/polyshapeEditor.js @@ -0,0 +1,398 @@ +/* + * Copyright (C) 2018 Intel Corporation + * + * SPDX-License-Identifier: MIT + */ + +/* exported PolyshapeEditorModel PolyshapeEditorController PolyshapeEditorView */ + +"use strict"; + +class PolyshapeEditorModel extends Listener { + constructor() { + super("onPolyshapeEditorUpdate", () => this); + + this._modeName = 'poly_editing'; + this._active = false; + this._data = { + points: null, + color: null, + start: null, + oncomplete: null, + type: null, + event: null, + }; + } + + edit(type, points, color, start, event, oncomplete) { + if (!this._active && !window.cvat.mode) { + window.cvat.mode = this._modeName; + this._active = true; + this._data.points = points; + this._data.color = color; + this._data.start = start; + this._data.oncomplete = oncomplete; + this._data.type = type; + this._data.event = event; + this.notify(); + } + else if (this._active) { + throw Error('Polyshape has been being edited already'); + } + } + + finish(points) { + if (this._active && this._data.oncomplete) { + this._data.oncomplete(points); + } + + this.cancel(); + } + + cancel() { + if (this._active) { + this._active = false; + if (window.cvat.mode != this._modeName) { + throw Error(`Inconsistent behaviour has been detected. Edit mode is activated, but mode variable is '${window.cvat.mode}'`); + } + else { + window.cvat.mode = null; + } + + this._data.points = null; + this._data.color = null; + this._data.start = null; + this._data.oncomplete = null; + this._data.type = null; + this._data.event = null; + this.notify(); + } + } + + get active() { + return this._active; + } + + get data() { + return this._data; + } +} + + +class PolyshapeEditorController { + constructor(model) { + this._model = model; + } + + finish(points) { + this._model.finish(points); + } + + cancel() { + this._model.cancel(); + } +} + + +class PolyshapeEditorView { + constructor(model, controller) { + this._controller = controller; + this._data = null; + + this._frameContent = SVG.adopt($('#frameContent')[0]); + this._originalShapePointsGroup = null; + this._originalShapePoints = []; + this._originalShape = null; + this._correctLine = null; + + this._scale = window.cvat.player.geometry.scale; + this._frame = window.cvat.player.frames.current; + + model.subscribe(this); + } + + _rescaleDrawPoints() { + let scale = this._scale; + $('.svg_draw_point').each(function() { + this.instance.radius(POINT_RADIUS / (2 * scale)).attr('stroke-width', STROKE_WIDTH / (2 * scale)); + }); + } + + // After this method start element will be in begin of the array. + // Array will consist only range elements from start to stop + _resortPoints(points, start, stop) { + let sorted = []; + + if (points.indexOf(start) === -1 || points.indexOf(stop) === -1) { + throw Error('Point array must consist both start and stop elements'); + } + + let idx = points.indexOf(start) + 1; + let condition = true; // constant condition is eslint error + while (condition) { + if (idx >= points.length) idx = 0; + if (points[idx] === stop) condition = false; + else sorted.push(points[idx++]); + } + + return sorted; + } + + // Method represents array like circle list and find shortest way from source to target + // It returns integer number - distance from source to target. + // It can be negative if shortest way is anti clockwise + _findMinCircleDistance(array, source, target) { + let clockwise_distance = 0; + let anti_clockwise_distance = 0; + + let source_idx = array.indexOf(source); + let target_idx = array.indexOf(target); + + if (source_idx === -1 || target_idx == -1) { + throw Error('Array should consist both elements'); + } + + let idx = source_idx; + while (array[idx++] != target) { + clockwise_distance ++; + if (idx >= array.length) idx = 0; + } + + idx = source_idx; + while (array[idx--] != target) { + anti_clockwise_distance ++; + if (idx < 0) idx = array.length - 1; + } + + let offset = Math.min(clockwise_distance, anti_clockwise_distance); + if (anti_clockwise_distance < clockwise_distance) { + offset = -offset; + } + + return offset; + } + + _startEdit() { + this._frame = window.cvat.player.frames.current; + let strokeWidth = this._data.type === 'points' ? 0 : STROKE_WIDTH / this._scale; + + // Draw copy of original shape + if (this._data.type === 'polygon') { + this._originalShape = this._frameContent.polygon(this._data.points); + } + else { + this._originalShape = this._frameContent.polyline(this._data.points); + } + + this._originalShape.attr({ + 'stroke-width': strokeWidth, + 'stroke': 'white', + 'fill': 'none', + }); + + // Create the correct line + this._correctLine = this._frameContent.polyline().draw({snapToGrid: 0.1}).attr({ + 'stroke-width': strokeWidth / 2, + 'fill': 'none', + 'stroke': 'red', + }).on('mouseover', () => false); + + + // Add points to original shape + let pointRadius = POINT_RADIUS / this._scale; + this._originalShapePointsGroup = this._frameContent.group(); + for (let point of PolyShapeModel.convertStringToNumberArray(this._data.points)) { + let uiPoint = this._originalShapePointsGroup.circle(pointRadius * 2) + .move(point.x - pointRadius, point.y - pointRadius) + .attr({ + 'stroke-width': strokeWidth, + 'stroke': 'black', + 'fill': 'white', + 'z_order': Number.MAX_SAFE_INTEGER, + }); + this._originalShapePoints.push(uiPoint); + } + + + let prevPoint = { + x: this._data.event.clientX, + y: this._data.event.clientY + }; + + this._correctLine.draw('point', this._data.event); + this._rescaleDrawPoints(); + this._frameContent.on('mousemove.polyshapeEditor', (e) => { + if (e.shiftKey && this._data.type != 'points') { + let delta = Math.sqrt(Math.pow(e.clientX - prevPoint.x, 2) + Math.pow(e.clientY - prevPoint.y, 2)); + let deltaTreshold = 15; + if (delta > deltaTreshold) { + this._correctLine.draw('point', e); + prevPoint = { + x: e.clientX, + y: e.clientY + }; + } + } + }); + + this._frameContent.on('contextmenu.polyshapeEditor', (e) => { + if (PolyShapeModel.convertStringToNumberArray(this._correctLine.attr('points')).length > 2) { + this._correctLine.draw('undo'); + } + else { + // Finish without points argument is just cancel + this._controller.finish(); + } + e.preventDefault(); + e.stopPropagation(); + }); + + this._correctLine.on('drawpoint', (e) => { + prevPoint = { + x: e.detail.event.clientX, + y: e.detail.event.clientY + }; + this._rescaleDrawPoints(); + }); + + this._correctLine.on('drawstart', () => this._rescaleDrawPoints()); + + + for (let instance of this._originalShapePoints) { + instance.on('mouseover', () => { + instance.attr('stroke-width', STROKE_WIDTH * 2 / this._scale); + }).on('mouseout', () => { + instance.attr('stroke-width', STROKE_WIDTH / this._scale); + }).on('mousedown', (e) => { + if (e.which != 1) return; + let currentPoints = PolyShapeModel.convertStringToNumberArray(this._data.points); + let correctPoints = PolyShapeModel.convertStringToNumberArray(this._correctLine.attr('points')); + let resultPoints = []; + + if (this._data.type === 'polygon') { + let startPtIdx = this._data.start; + let stopPtIdx = $(instance.node).index(); + let offset = this._findMinCircleDistance(currentPoints, currentPoints[startPtIdx], currentPoints[stopPtIdx]); + + if (!offset) { + currentPoints = this._resortPoints(currentPoints, currentPoints[startPtIdx], currentPoints[stopPtIdx]); + resultPoints.push(...correctPoints.slice(0, -2)); + resultPoints.push(...currentPoints); + } + else { + resultPoints.push(...correctPoints); + if (offset < 0) { + resultPoints = resultPoints.reverse(); + currentPoints = this._resortPoints(currentPoints, currentPoints[startPtIdx], currentPoints[stopPtIdx]); + } + else { + currentPoints = this._resortPoints(currentPoints, currentPoints[stopPtIdx], currentPoints[startPtIdx]); + } + + resultPoints.push(...currentPoints); + } + } + else if (this._data.type === 'polyline') { + let startPtIdx = this._data.start; + let stopPtIdx = $(instance.node).index(); + + if (startPtIdx === stopPtIdx) { + resultPoints.push(...correctPoints.slice(1, -1).reverse()); + resultPoints.push(...currentPoints); + } + else { + if (startPtIdx > stopPtIdx) { + if (startPtIdx < currentPoints.length - 1) { + resultPoints.push(...currentPoints.slice(startPtIdx + 1).reverse()); + } + resultPoints.push(...correctPoints.slice(0, -1)); + if (stopPtIdx > 0) { + resultPoints.push(...currentPoints.slice(0, stopPtIdx).reverse()); + } + } + else { + if (startPtIdx > 0) { + resultPoints.push(...currentPoints.slice(0, startPtIdx)); + } + resultPoints.push(...correctPoints.slice(0, -1)); + if (stopPtIdx < currentPoints.length) { + resultPoints.push(...currentPoints.slice(stopPtIdx + 1)); + } + } + } + } + else { + resultPoints.push(...currentPoints); + resultPoints.push(...correctPoints.slice(1, -1).reverse()); + } + + this._correctLine.draw('cancel'); + this._controller.finish(PolyShapeModel.convertNumberArrayToString(resultPoints)); + }); + } + } + + _endEdit() { + for (let uiPoint of this._originalShapePoints) { + uiPoint.off(); + uiPoint.remove(); + } + + this._originalShapePoints = []; + this._originalShapePointsGroup.remove(); + this._originalShapePointsGroup = null; + this._originalShape.remove(); + this._originalShape = null; + this._correctLine.off('drawstart'); + this._correctLine.off('drawpoint'); + this._correctLine.draw('cancel'); + this._correctLine.remove(); + this._correctLine = null; + this._data = null; + + this._frameContent.off('mousemove.polyshapeEditor'); + this._frameContent.off('mousedown.polyshapeEditor'); + this._frameContent.off('contextmenu.polyshapeEditor'); + } + + + onPolyshapeEditorUpdate(model) { + if (model.active && !this._data) { + this._data = model.data; + this._startEdit(); + } + else if (!model.active) { + this._endEdit(); + } + } + + onPlayerUpdate(player) { + let scale = player.geometry.scale; + if (this._scale != scale) { + this._scale = scale; + + let strokeWidth = this._data && this._data.type === 'points' ? 0 : STROKE_WIDTH / this._scale; + let pointRadius = POINT_RADIUS / this._scale; + + if (this._originalShape) { + this._originalShape.attr('stroke-width', strokeWidth); + } + + if (this._correctLine) { + this._correctLine.attr('stroke-width', strokeWidth / 2); + } + + for (let uiPoint of this._originalShapePoints) { + uiPoint.attr('stroke-width', strokeWidth); + uiPoint.radius(pointRadius); + } + + this._rescaleDrawPoints(); + } + + // Abort if frame have been changed + if (player.frames.current != this._frame && this._data) { + this._controller.cancel(); + } + } +} diff --git a/cvat/apps/engine/static/engine/js/shapeCollection.js b/cvat/apps/engine/static/engine/js/shapeCollection.js index bdb08126..d9132b9d 100644 --- a/cvat/apps/engine/static/engine/js/shapeCollection.js +++ b/cvat/apps/engine/static/engine/js/shapeCollection.js @@ -725,13 +725,6 @@ class ShapeCollectionModel extends Listener { } } - clonePointForActiveShape(idx, direction, insertPoint) { - if (this._activeShape && !this._activeShape.lock) { - return this._activeShape.clonePoint(idx, direction, insertPoint); - } - else return null; - } - split() { if (this._activeShape) { if (!this._activeShape.lock && this._activeShape.type.split('_')[0] === 'interpolation') { @@ -968,10 +961,6 @@ class ShapeCollectionController { this._model.removePointFromActiveShape(idx); } - clonePointForActiveShape(idx, direction, insertPoint) { - return this._model.clonePointForActiveShape(idx, direction, insertPoint); - } - splitForActive() { this._model.split(); } @@ -1010,6 +999,7 @@ class ShapeCollectionView { this._labelsContent = $('#labelsContent'); this._showAllInterpolationBox = $('#showAllInterBox'); this._fillOpacityRange = $('#fillOpacityRange'); + this._selectedFillOpacityRange = $('#selectedFillOpacityRange'); this._blackStrokeCheckbox = $('#blackStrokeCheckbox'); this._colorByInstanceRadio = $('#colorByInstanceRadio'); this._colorByGroupRadio = $('#colorByGroupRadio'); @@ -1031,7 +1021,7 @@ class ShapeCollectionView { let value = Math.clamp(+e.target.value, +e.target.min, +e.target.max); e.target.value = value; if (value >= 0) { - this._colorSettings["fill-opacity"] = value / 5; + this._colorSettings["fill-opacity"] = value; delete this._colorSettings['white-opacity']; for (let view of this._currentViews) { @@ -1040,7 +1030,7 @@ class ShapeCollectionView { } else { value *= -1; - this._colorSettings["white-opacity"] = value / 5; + this._colorSettings["white-opacity"] = value; for (let view of this._currentViews) { view.updateColorSettings(this._colorSettings); @@ -1048,6 +1038,16 @@ class ShapeCollectionView { } }); + this._selectedFillOpacityRange.on('input', (e) => { + let value = Math.clamp(+e.target.value, +e.target.min, +e.target.max); + e.target.value = value; + this._colorSettings["selected-fill-opacity"] = value; + + for (let view of this._currentViews) { + view.updateColorSettings(this._colorSettings); + } + }); + this._blackStrokeCheckbox.on('click', (e) => { this._colorSettings["black-stroke"] = e.target.checked; @@ -1164,44 +1164,6 @@ class ShapeCollectionView { case "remove_point": this._controller.removePointFromActiveShape(idx); break; - case "clone_point_before": - this._controller.clonePointForActiveShape(idx, 'before', true); - break; - case "clone_point_after": - this._controller.clonePointForActiveShape(idx, 'after', true); - break; - } - }); - - $('#pointContextMenu').mouseout(() => { - $(this._frameContent.node).find('.tmp_inserted_point').remove(); - }); - - $('#pointContextMenu li').mouseover((e) => { - $(this._frameContent.node).find('.tmp_inserted_point').remove(); - let menu = $('#pointContextMenu'); - let idx = +menu.attr('point_idx'); - let point = null; - - switch($(e.target).attr("action")) { - case "clone_point_before": - point = this._controller.clonePointForActiveShape(idx, 'before', false); - if (point) { - this._frameContent.circle(POINT_RADIUS * 2 / this._scale).center(point.x, point.y) - .addClass('tmp_inserted_point tempMarker').fill('white').stroke('black').attr({ - 'stroke-width': STROKE_WIDTH / this._scale - }); - } - break; - case "clone_point_after": - point = this._controller.clonePointForActiveShape(idx, 'after', false); - if (point) { - this._frameContent.circle(POINT_RADIUS * 2 / this._scale).center(point.x, point.y) - .addClass('tmp_inserted_point tempMarker').fill('white').stroke('black').attr({ - 'stroke-width': STROKE_WIDTH / this._scale - }); - } - break; } }); diff --git a/cvat/apps/engine/static/engine/js/shapeCreator.js b/cvat/apps/engine/static/engine/js/shapeCreator.js index dc797fc2..6a04c406 100644 --- a/cvat/apps/engine/static/engine/js/shapeCreator.js +++ b/cvat/apps/engine/static/engine/js/shapeCreator.js @@ -265,6 +265,10 @@ class ShapeCreatorView { _createPolyEvents() { // If number of points for poly shape specified, use it. // Dicrement number on draw new point events. Drawstart trigger when create first point + let lastPoint = { + x: null, + y: null, + }; if (this._polyShapeSize) { let size = this._polyShapeSize; @@ -287,14 +291,50 @@ class ShapeCreatorView { // Callbacks for point scale this._drawInstance.on('drawstart', this._rescaleDrawPoints.bind(this)); this._drawInstance.on('drawpoint', this._rescaleDrawPoints.bind(this)); + + this._drawInstance.on('drawstart', (e) => { + lastPoint = { + x: e.detail.event.clientX, + y: e.detail.event.clientY, + }; + }); + + this._drawInstance.on('drawpoint', (e) => { + lastPoint = { + x: e.detail.event.clientX, + y: e.detail.event.clientY, + }; + }); + this._frameContent.on('mousedown.shapeCreator', (e) => { if (e.which === 3) { this._drawInstance.draw('undo'); } }); + + this._frameContent.on('mousemove.shapeCreator', (e) => { + if (e.shiftKey && this._type != 'points') { + if (lastPoint.x === null || lastPoint.y === null) { + this._drawInstance.draw('point', e); + } + else { + let delta = Math.sqrt(Math.pow(e.clientX - lastPoint.x, 2) + Math.pow(e.clientY - lastPoint.y, 2)); + let deltaTreshold = 15; + if (delta > deltaTreshold) { + this._drawInstance.draw('point', e); + lastPoint = { + x: e.clientX, + y: e.clientY + }; + } + } + } + }); + this._drawInstance.on('drawstop', () => { this._frameContent.off('mousedown.shapeCreator'); + this._frameContent.off('mousemove.shapeCreator'); }); // Also we need callback on drawdone event for get points this._drawInstance.on('drawdone', function(e) { diff --git a/cvat/apps/engine/static/engine/js/shapeFilter.js b/cvat/apps/engine/static/engine/js/shapeFilter.js index 9781812b..36d86d2c 100644 --- a/cvat/apps/engine/static/engine/js/shapeFilter.js +++ b/cvat/apps/engine/static/engine/js/shapeFilter.js @@ -64,9 +64,11 @@ class FilterModel { } } - updateFilter(value) { + updateFilter(value, silent) { this._filter = value; - this._update(); + if (!silent) { + this._update(); + } } } @@ -75,22 +77,22 @@ class FilterController { this._model = filterModel; } - updateFilter(value) { + updateFilter(value, silent) { if (value.length) { + value = value.split('|').map(x => '/d:data/' + x).join('|').toLowerCase().replace(/-/g, "_"); try { document.evaluate(value, document, () => 'ns'); } catch (error) { return false; } - this._model.updateFilter(value); + this._model.updateFilter(value, silent); return true; } else { - this._model.updateFilter(value); + this._model.updateFilter('', silent); return true; } - } deactivate() { @@ -109,14 +111,13 @@ class FilterView { this._filterString.on('keypress keydown keyup', (e) => e.stopPropagation()); this._filterString.on('change', (e) => { let value = $.trim(e.target.value); - if (value.length) { - value = value.split('|').map(x => '/d:data/' + x).join('|').toLowerCase().replace(/-/g, "_"); - } - if (this._controller.updateFilter(value)) { + if (this._controller.updateFilter(value, false)) { this._filterString.css('color', 'green'); + setURISearchParameter('filter', value || null); } else { this._filterString.css('color', 'red'); + setURISearchParameter('filter', null); } }); @@ -127,9 +128,21 @@ class FilterView { this._resetFilterButton.on('click', () => { this._filterString.prop('value', ''); - this._controller.updateFilter(''); + this._controller.updateFilter('', false); + setURISearchParameter('filter', null); }); - } - + if (getURISearchParameter('filter')) { + let value = getURISearchParameter('filter'); + this._filterString.prop('value', value); + if (this._controller.updateFilter(value, true)) { + this._filterString.css('color', 'green'); + } + else { + setURISearchParameter('filter', null); + this._filterString.prop('value', ''); + this._filterString.css('color', 'red'); + } + } + } } diff --git a/cvat/apps/engine/static/engine/js/shapes.js b/cvat/apps/engine/static/engine/js/shapes.js index a38c1bb6..9c61f930 100644 --- a/cvat/apps/engine/static/engine/js/shapes.js +++ b/cvat/apps/engine/static/engine/js/shapes.js @@ -804,10 +804,6 @@ class BoxModel extends ShapeModel { // nothing do } - clonePoint() { - // nothing do - } - static importPositions(positions) { let imported = {}; if (this._type === 'interpolation_box') { @@ -1011,40 +1007,6 @@ class PolyShapeModel extends ShapeModel { } } - clonePoint(idx, direction, inserPoint) { - let frame = window.cvat.player.frames.current; - let position = this._interpolatePosition(frame); - let points = PolyShapeModel.convertStringToNumberArray(position.points); - - let otherIdx = null; - if (direction === 'before') { - otherIdx = idx - 1 >= 0 ? idx - 1: points.length - 1; - } - else { - otherIdx = idx + 1 in points ? idx + 1: 0; - } - let curP = points[idx]; - let otherP = points[otherIdx]; - let newP = { - x: curP.x + (otherP.x - curP.x) / 2, - y: curP.y + (otherP.y - curP.y) / 2, - }; - - if (direction === 'before') { - points.splice(idx, 0, newP); - } - else { - points.splice(idx + 1, 0, newP); - } - - if (inserPoint) { - position.points = PolyShapeModel.convertNumberArrayToString(points); - this.updatePosition(frame, position); - } - - return newP; - } - static convertStringToNumberArray(serializedPoints) { let pointArray = []; for (let pair of serializedPoints.split(' ')) { @@ -1438,7 +1400,7 @@ class ShapeView extends Listener { this._appearance = { colors: shapeModel.color, fillOpacity: 0, - selectedFillOpacity: 0.1, + selectedFillOpacity: 0.2, }; this._flags = { @@ -2683,6 +2645,10 @@ class ShapeView extends Listener { } } + if ('selected-fill-opacity' in settings) { + this._appearance.selectedFillOpacity = settings['selected-fill-opacity']; + } + if (settings['black-stroke']) { this._appearance['stroke'] = 'black'; } @@ -2869,9 +2835,11 @@ class PolyShapeView extends ShapeView { if (this._flags.editable) { for (let point of $('.svg_select_points')) { point = $(point); + point.on('contextmenu.contextMenu', (e) => { this._shapeContextMenu.hide(100); this._pointContextMenu.attr('point_idx', point.index()); + this._pointContextMenu.attr('dom_point_id', point.attr('id')); this._pointContextMenu.finish().show(100).offset({ top: e.pageY - 20, @@ -2879,6 +2847,38 @@ class PolyShapeView extends ShapeView { }); e.preventDefault(); + }); + + point.on('dblclick.polyshapeEditor', (e) => { + if (e.shiftKey) { + if (!window.cvat.mode) { + // Get index before detach shape from DOM + let index = point.index(); + + // Make non active view and detach shape from DOM + this._makeNotEditable(); + this._deselect(); + if (this._controller.hiddenText) { + this._hideShapeText(); + } + this._uis.shape.addClass('hidden'); + + // Run edit mode + PolyShapeView.editor.edit(this._controller.type.split('_')[1], + this._uis.shape.attr('points'), this._color, index, e, + (points) => { + this._uis.shape.removeClass('hidden'); + if (points) { + this._uis.shape.attr('points', points); + this._controller.updatePosition(window.cvat.player.frames.current, this._buildPosition()); + } + } + ); + } + } + else { + this._controller.model().removePoint(point.index()); + } e.stopPropagation(); }); } @@ -2889,6 +2889,7 @@ class PolyShapeView extends ShapeView { _makeNotEditable() { for (let point of $('.svg_select_points')) { $(point).off('contextmenu.contextMenu'); + $(point).off('dblclick.polyshapeEditor'); } ShapeView.prototype._makeNotEditable.call(this); } diff --git a/cvat/apps/engine/templates/engine/annotation.html b/cvat/apps/engine/templates/engine/annotation.html index 2b12d634..0042b798 100644 --- a/cvat/apps/engine/templates/engine/annotation.html +++ b/cvat/apps/engine/templates/engine/annotation.html @@ -41,6 +41,7 @@ + @@ -87,8 +88,6 @@
  • Remove
    • -
  • Clone Before
    • -
  • Clone After
@@ -143,16 +142,17 @@
-
+
-
+
-
-
+
+
- +
+
diff --git a/tests/eslintrc.conf.js b/tests/eslintrc.conf.js index e54e0548..cd8affdc 100644 --- a/tests/eslintrc.conf.js +++ b/tests/eslintrc.conf.js @@ -49,6 +49,8 @@ module.exports = { 'showOverlay': true, 'confirm': true, 'dumpAnnotationRequest': true, + 'getURISearchParameter': true, + 'setURISearchParameter': true, // from shapeCollection.js 'ShapeCollectionModel': true, 'ShapeCollectionController': true, @@ -73,6 +75,7 @@ module.exports = { 'ShapeMergerView': true, // from shapes.js 'PolyShapeModel': true, + 'PolyShapeView': true, 'buildShapeModel': true, 'buildShapeController': true, 'buildShapeView': true, @@ -116,5 +119,9 @@ module.exports = { 'HistoryModel': true, 'HistoryController': true, 'HistoryView': true, + // from polyshapeEditor.js + 'PolyshapeEditorModel': true, + 'PolyshapeEditorController': true, + 'PolyshapeEditorView': true, }, };