diff --git a/.eslintrc.js b/.eslintrc.js index c52b5e99373c09eaa7726caf859b68c6bca604d5..8572ce1d3987b8ae3f53a699a4670e7f214c086d 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -27,6 +27,11 @@ "airbnb", ], "rules": { + "no-restricted-properties": [0, { + "object": "Math", + "property": "pow", + }], + "no-underscore-dangle": ["error", { "allowAfterThis": true }], "no-unsafe-innerhtml/no-unsafe-innerhtml": 1, // This rule actual for user input data on the node.js environment mainly. "security/detect-object-injection": 0, diff --git a/cvat/apps/engine/static/engine/js/3rdparty.patch b/cvat/apps/engine/static/engine/js/3rdparty.patch index c12855f4adf1ff7aa43de240fb8548329bdc53f9..0aa47dfbf79c674c3f2e8a26b8b00f9303728f98 100644 --- a/cvat/apps/engine/static/engine/js/3rdparty.patch +++ b/cvat/apps/engine/static/engine/js/3rdparty.patch @@ -1,14 +1,14 @@ -From d44089dfc96b56d427d5631442d6587f876f43b6 Mon Sep 17 00:00:00 2001 -From: Boris Sekachev -Date: Mon, 19 Nov 2018 12:09:48 +0300 -Subject: [PATCH] tmp +From a2f542cc7ac4149fe14f42e194e44ef982d7fc28 Mon Sep 17 00:00:00 2001 +From: Boris Sekachev +Date: Wed, 27 Mar 2019 15:08:18 +0300 +Subject: [PATCH] upd --- - .../engine/static/engine/js/3rdparty/svg.draggable.js | 1 + - cvat/apps/engine/static/engine/js/3rdparty/svg.draw.js | 17 +++++++++++++++-- - .../apps/engine/static/engine/js/3rdparty/svg.resize.js | 6 ++++-- - .../apps/engine/static/engine/js/3rdparty/svg.select.js | 5 ++++- - 4 files changed, 24 insertions(+), 5 deletions(-) + .../static/engine/js/3rdparty/svg.draggable.js | 1 + + .../static/engine/js/3rdparty/svg.draw.js | 17 +++++++++++++++-- + .../static/engine/js/3rdparty/svg.resize.min.js | 2 +- + .../static/engine/js/3rdparty/svg.select.js | 5 ++++- + 4 files changed, 21 insertions(+), 4 deletions(-) diff --git a/cvat/apps/engine/static/engine/js/3rdparty/svg.draggable.js b/cvat/apps/engine/static/engine/js/3rdparty/svg.draggable.js index d88abf5..aba474c 100644 @@ -77,37 +77,14 @@ index 68dbf2a..20a6917 100644 } } -diff --git a/cvat/apps/engine/static/engine/js/3rdparty/svg.resize.js b/cvat/apps/engine/static/engine/js/3rdparty/svg.resize.js -index 0c3b63d..dceede5 100644 ---- a/cvat/apps/engine/static/engine/js/3rdparty/svg.resize.js -+++ b/cvat/apps/engine/static/engine/js/3rdparty/svg.resize.js -@@ -34,8 +34,8 @@ - // Extract a position from a mouse/touch event. - // Returns { x: .., y: .. } - return { -- x: event.clientX || event.touches[0].pageX, -- y: event.clientY || event.touches[0].pageY -+ x: event.clientX != null ? event.clientX : event.touches[0].clientX, -+ y: event.clientY != null ? event.clientY : event.touches[0].clientY - }; - }; - -@@ -98,6 +98,7 @@ - }; - - ResizeHandler.prototype.resize = function (event) { -+ if (event.detail.event.button) return; // only left mouse button - - var _this = this; - -@@ -343,6 +344,7 @@ - } - return; - } -+ this.m = this.el.node.getScreenCTM().inverse(); - - // Calculate the difference between the mouseposition at start and now - var txPt = this._extractPosition(event); +diff --git a/cvat/apps/engine/static/engine/js/3rdparty/svg.resize.min.js b/cvat/apps/engine/static/engine/js/3rdparty/svg.resize.min.js +index 2dca34b..50ef3d3 100644 +--- a/cvat/apps/engine/static/engine/js/3rdparty/svg.resize.min.js ++++ b/cvat/apps/engine/static/engine/js/3rdparty/svg.resize.min.js +@@ -1 +1 @@ +-/*! svg.resize.js v1.4.3 MIT*/;!function(){"use strict";(function(){function t(t){t.remember("_resizeHandler",this),this.el=t,this.parameters={},this.lastUpdateCall=null,this.p=t.doc().node.createSVGPoint()}t.prototype.transformPoint=function(t,e,i){return this.p.x=t-(this.offset.x-window.pageXOffset),this.p.y=e-(this.offset.y-window.pageYOffset),this.p.matrixTransform(i||this.m)},t.prototype._extractPosition=function(t){return{x:null!=t.clientX?t.clientX:t.touches[0].clientX,y:null!=t.clientY?t.clientY:t.touches[0].clientY}},t.prototype.init=function(t){var e=this;if(this.stop(),"stop"!==t){this.options={};for(var i in this.el.resize.defaults)this.options[i]=this.el.resize.defaults[i],void 0!==t[i]&&(this.options[i]=t[i]);this.el.on("lt.resize",function(t){e.resize(t||window.event)}),this.el.on("rt.resize",function(t){e.resize(t||window.event)}),this.el.on("rb.resize",function(t){e.resize(t||window.event)}),this.el.on("lb.resize",function(t){e.resize(t||window.event)}),this.el.on("t.resize",function(t){e.resize(t||window.event)}),this.el.on("r.resize",function(t){e.resize(t||window.event)}),this.el.on("b.resize",function(t){e.resize(t||window.event)}),this.el.on("l.resize",function(t){e.resize(t||window.event)}),this.el.on("rot.resize",function(t){e.resize(t||window.event)}),this.el.on("point.resize",function(t){e.resize(t||window.event)}),this.update()}},t.prototype.stop=function(){return this.el.off("lt.resize"),this.el.off("rt.resize"),this.el.off("rb.resize"),this.el.off("lb.resize"),this.el.off("t.resize"),this.el.off("r.resize"),this.el.off("b.resize"),this.el.off("l.resize"),this.el.off("rot.resize"),this.el.off("point.resize"),this},t.prototype.resize=function(t){var e=this;this.m=this.el.node.getScreenCTM().inverse(),this.offset={x:window.pageXOffset,y:window.pageYOffset};var i=this._extractPosition(t.detail.event);if(this.parameters={type:this.el.type,p:this.transformPoint(i.x,i.y),x:t.detail.x,y:t.detail.y,box:this.el.bbox(),rotation:this.el.transform().rotation},"text"===this.el.type&&(this.parameters.fontSize=this.el.attr()["font-size"]),void 0!==t.detail.i){var s=this.el.array().valueOf();this.parameters.i=t.detail.i,this.parameters.pointCoords=[s[t.detail.i][0],s[t.detail.i][1]]}switch(t.type){case"lt":this.calc=function(t,e){var i=this.snapToGrid(t,e);if(this.parameters.box.width-i[0]>0&&this.parameters.box.height-i[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x+i[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize-i[0]);i=this.checkAspectRatio(i),this.el.move(this.parameters.box.x+i[0],this.parameters.box.y+i[1]).size(this.parameters.box.width-i[0],this.parameters.box.height-i[1])}};break;case"rt":this.calc=function(t,e){var i=this.snapToGrid(t,e,2);if(this.parameters.box.width+i[0]>0&&this.parameters.box.height-i[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x-i[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize+i[0]);i=this.checkAspectRatio(i,!0),this.el.move(this.parameters.box.x,this.parameters.box.y+i[1]).size(this.parameters.box.width+i[0],this.parameters.box.height-i[1])}};break;case"rb":this.calc=function(t,e){var i=this.snapToGrid(t,e,0);if(this.parameters.box.width+i[0]>0&&this.parameters.box.height+i[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x-i[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize+i[0]);i=this.checkAspectRatio(i),this.el.move(this.parameters.box.x,this.parameters.box.y).size(this.parameters.box.width+i[0],this.parameters.box.height+i[1])}};break;case"lb":this.calc=function(t,e){var i=this.snapToGrid(t,e,1);if(this.parameters.box.width-i[0]>0&&this.parameters.box.height+i[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x+i[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize-i[0]);i=this.checkAspectRatio(i,!0),this.el.move(this.parameters.box.x+i[0],this.parameters.box.y).size(this.parameters.box.width-i[0],this.parameters.box.height+i[1])}};break;case"t":this.calc=function(t,e){var i=this.snapToGrid(t,e,2);if(this.parameters.box.height-i[1]>0){if("text"===this.parameters.type)return;this.el.move(this.parameters.box.x,this.parameters.box.y+i[1]).height(this.parameters.box.height-i[1])}};break;case"r":this.calc=function(t,e){var i=this.snapToGrid(t,e,0);if(this.parameters.box.width+i[0]>0){if("text"===this.parameters.type)return;this.el.move(this.parameters.box.x,this.parameters.box.y).width(this.parameters.box.width+i[0])}};break;case"b":this.calc=function(t,e){var i=this.snapToGrid(t,e,0);if(this.parameters.box.height+i[1]>0){if("text"===this.parameters.type)return;this.el.move(this.parameters.box.x,this.parameters.box.y).height(this.parameters.box.height+i[1])}};break;case"l":this.calc=function(t,e){var i=this.snapToGrid(t,e,1);if(this.parameters.box.width-i[0]>0){if("text"===this.parameters.type)return;this.el.move(this.parameters.box.x+i[0],this.parameters.box.y).width(this.parameters.box.width-i[0])}};break;case"rot":this.calc=function(t,e){var i={x:t+this.parameters.p.x,y:e+this.parameters.p.y},s=Math.atan2(this.parameters.p.y-this.parameters.box.y-this.parameters.box.height/2,this.parameters.p.x-this.parameters.box.x-this.parameters.box.width/2),r=Math.atan2(i.y-this.parameters.box.y-this.parameters.box.height/2,i.x-this.parameters.box.x-this.parameters.box.width/2),a=this.parameters.rotation+180*(r-s)/Math.PI+this.options.snapToAngle/2;this.el.center(this.parameters.box.cx,this.parameters.box.cy).rotate(a-a%this.options.snapToAngle,this.parameters.box.cx,this.parameters.box.cy)};break;case"point":this.calc=function(t,e){var i=this.snapToGrid(t,e,this.parameters.pointCoords[0],this.parameters.pointCoords[1]),s=this.el.array().valueOf();s[this.parameters.i][0]=this.parameters.pointCoords[0]+i[0],s[this.parameters.i][1]=this.parameters.pointCoords[1]+i[1],this.el.plot(s)}}this.el.fire("resizestart",{dx:this.parameters.x,dy:this.parameters.y,event:t}),SVG.on(window,"touchmove.resize",function(t){e.update(t||window.event)}),SVG.on(window,"touchend.resize",function(){e.done()}),SVG.on(window,"mousemove.resize",function(t){e.update(t||window.event)}),SVG.on(window,"mouseup.resize",function(){e.done()})},t.prototype.update=function(t){if(!t)return void(this.lastUpdateCall&&this.calc(this.lastUpdateCall[0],this.lastUpdateCall[1]));var e=this._extractPosition(t),i=this.transformPoint(e.x,e.y),s=i.x-this.parameters.p.x,r=i.y-this.parameters.p.y;this.lastUpdateCall=[s,r],this.calc(s,r),this.el.fire("resizing",{dx:s,dy:r,event:t})},t.prototype.done=function(){this.lastUpdateCall=null,SVG.off(window,"mousemove.resize"),SVG.off(window,"mouseup.resize"),SVG.off(window,"touchmove.resize"),SVG.off(window,"touchend.resize"),this.el.fire("resizedone")},t.prototype.snapToGrid=function(t,e,i,s){var r;return void 0!==s?r=[(i+t)%this.options.snapToGrid,(s+e)%this.options.snapToGrid]:(i=null==i?3:i,r=[(this.parameters.box.x+t+(1&i?0:this.parameters.box.width))%this.options.snapToGrid,(this.parameters.box.y+e+(2&i?0:this.parameters.box.height))%this.options.snapToGrid]),t<0&&(r[0]-=this.options.snapToGrid),e<0&&(r[1]-=this.options.snapToGrid),t-=Math.abs(r[0])o.maxX&&(t=o.maxX-r),void 0!==o.minY&&a+eo.maxY&&(e=o.maxY-a),[t,e]},t.prototype.checkAspectRatio=function(t,e){if(!this.options.saveAspectRatio)return t;var i=t.slice(),s=this.parameters.box.width/this.parameters.box.height,r=this.parameters.box.width+t[0],a=this.parameters.box.height-t[1],o=r/a;return os&&(i[0]=this.parameters.box.width-a*s,e&&(i[0]=-i[0])),i},SVG.extend(SVG.Element,{resize:function(e){return(this.remember("_resizeHandler")||new t(this)).init(e||{}),this}}),SVG.Element.prototype.resize.defaults={snapToAngle:.1,snapToGrid:1,constraint:{},saveAspectRatio:!1}}).call(this)}(); ++/*! svg.resize.js v1.4.3 MIT*/;!function(){"use strict";(function(){function t(t){t.remember("_resizeHandler",this),this.el=t,this.parameters={},this.lastUpdateCall=null,this.p=t.doc().node.createSVGPoint()}t.prototype.transformPoint=function(t,e,i){return this.p.x=t-(this.offset.x-window.pageXOffset),this.p.y=e-(this.offset.y-window.pageYOffset),this.p.matrixTransform(i||this.m)},t.prototype._extractPosition=function(t){return{x:null!=t.clientX?t.clientX:t.touches[0].clientX,y:null!=t.clientY?t.clientY:t.touches[0].clientY}},t.prototype.init=function(t){var e=this;if(this.stop(),"stop"!==t){this.options={};for(var i in this.el.resize.defaults)this.options[i]=this.el.resize.defaults[i],void 0!==t[i]&&(this.options[i]=t[i]);this.el.on("lt.resize",function(t){e.resize(t||window.event)}),this.el.on("rt.resize",function(t){e.resize(t||window.event)}),this.el.on("rb.resize",function(t){e.resize(t||window.event)}),this.el.on("lb.resize",function(t){e.resize(t||window.event)}),this.el.on("t.resize",function(t){e.resize(t||window.event)}),this.el.on("r.resize",function(t){e.resize(t||window.event)}),this.el.on("b.resize",function(t){e.resize(t||window.event)}),this.el.on("l.resize",function(t){e.resize(t||window.event)}),this.el.on("rot.resize",function(t){e.resize(t||window.event)}),this.el.on("point.resize",function(t){e.resize(t||window.event)}),this.update()}},t.prototype.stop=function(){return this.el.off("lt.resize"),this.el.off("rt.resize"),this.el.off("rb.resize"),this.el.off("lb.resize"),this.el.off("t.resize"),this.el.off("r.resize"),this.el.off("b.resize"),this.el.off("l.resize"),this.el.off("rot.resize"),this.el.off("point.resize"),this},t.prototype.resize=function(t){if(!t.detail.event.button){var e=this;this.m=this.el.node.getScreenCTM().inverse(),this.offset={x:window.pageXOffset,y:window.pageYOffset};var i=this._extractPosition(t.detail.event);if(this.parameters={type:this.el.type,p:this.transformPoint(i.x,i.y),x:t.detail.x,y:t.detail.y,box:this.el.bbox(),rotation:this.el.transform().rotation},"text"===this.el.type&&(this.parameters.fontSize=this.el.attr()["font-size"]),void 0!==t.detail.i){var s=this.el.array().valueOf();this.parameters.i=t.detail.i,this.parameters.pointCoords=[s[t.detail.i][0],s[t.detail.i][1]]}switch(t.type){case"lt":this.calc=function(t,e){var i=this.snapToGrid(t,e);if(this.parameters.box.width-i[0]>0&&this.parameters.box.height-i[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x+i[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize-i[0]);i=this.checkAspectRatio(i),this.el.move(this.parameters.box.x+i[0],this.parameters.box.y+i[1]).size(this.parameters.box.width-i[0],this.parameters.box.height-i[1])}};break;case"rt":this.calc=function(t,e){var i=this.snapToGrid(t,e,2);if(this.parameters.box.width+i[0]>0&&this.parameters.box.height-i[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x-i[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize+i[0]);i=this.checkAspectRatio(i,!0),this.el.move(this.parameters.box.x,this.parameters.box.y+i[1]).size(this.parameters.box.width+i[0],this.parameters.box.height-i[1])}};break;case"rb":this.calc=function(t,e){var i=this.snapToGrid(t,e,0);if(this.parameters.box.width+i[0]>0&&this.parameters.box.height+i[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x-i[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize+i[0]);i=this.checkAspectRatio(i),this.el.move(this.parameters.box.x,this.parameters.box.y).size(this.parameters.box.width+i[0],this.parameters.box.height+i[1])}};break;case"lb":this.calc=function(t,e){var i=this.snapToGrid(t,e,1);if(this.parameters.box.width-i[0]>0&&this.parameters.box.height+i[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x+i[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize-i[0]);i=this.checkAspectRatio(i,!0),this.el.move(this.parameters.box.x+i[0],this.parameters.box.y).size(this.parameters.box.width-i[0],this.parameters.box.height+i[1])}};break;case"t":this.calc=function(t,e){var i=this.snapToGrid(t,e,2);if(this.parameters.box.height-i[1]>0){if("text"===this.parameters.type)return;this.el.move(this.parameters.box.x,this.parameters.box.y+i[1]).height(this.parameters.box.height-i[1])}};break;case"r":this.calc=function(t,e){var i=this.snapToGrid(t,e,0);if(this.parameters.box.width+i[0]>0){if("text"===this.parameters.type)return;this.el.move(this.parameters.box.x,this.parameters.box.y).width(this.parameters.box.width+i[0])}};break;case"b":this.calc=function(t,e){var i=this.snapToGrid(t,e,0);if(this.parameters.box.height+i[1]>0){if("text"===this.parameters.type)return;this.el.move(this.parameters.box.x,this.parameters.box.y).height(this.parameters.box.height+i[1])}};break;case"l":this.calc=function(t,e){var i=this.snapToGrid(t,e,1);if(this.parameters.box.width-i[0]>0){if("text"===this.parameters.type)return;this.el.move(this.parameters.box.x+i[0],this.parameters.box.y).width(this.parameters.box.width-i[0])}};break;case"rot":this.calc=function(t,e){var i={x:t+this.parameters.p.x,y:e+this.parameters.p.y},s=Math.atan2(this.parameters.p.y-this.parameters.box.y-this.parameters.box.height/2,this.parameters.p.x-this.parameters.box.x-this.parameters.box.width/2),r=Math.atan2(i.y-this.parameters.box.y-this.parameters.box.height/2,i.x-this.parameters.box.x-this.parameters.box.width/2),a=this.parameters.rotation+180*(r-s)/Math.PI+this.options.snapToAngle/2;this.el.center(this.parameters.box.cx,this.parameters.box.cy).rotate(a-a%this.options.snapToAngle,this.parameters.box.cx,this.parameters.box.cy)};break;case"point":this.calc=function(t,e){var i=this.snapToGrid(t,e,this.parameters.pointCoords[0],this.parameters.pointCoords[1]),s=this.el.array().valueOf();s[this.parameters.i][0]=this.parameters.pointCoords[0]+i[0],s[this.parameters.i][1]=this.parameters.pointCoords[1]+i[1],this.el.plot(s)}}this.el.fire("resizestart",{dx:this.parameters.x,dy:this.parameters.y,event:t}),SVG.on(window,"touchmove.resize",function(t){e.update(t||window.event)}),SVG.on(window,"touchend.resize",function(){e.done()}),SVG.on(window,"mousemove.resize",function(t){e.update(t||window.event)}),SVG.on(window,"mouseup.resize",function(){e.done()})}},t.prototype.update=function(t){if(!t)return void(this.lastUpdateCall&&this.calc(this.lastUpdateCall[0],this.lastUpdateCall[1]));this.m=this.el.node.getScreenCTM().inverse();var e=this._extractPosition(t),i=this.transformPoint(e.x,e.y),s=i.x-this.parameters.p.x,r=i.y-this.parameters.p.y;this.lastUpdateCall=[s,r],this.calc(s,r),this.el.fire("resizing",{dx:s,dy:r,event:t})},t.prototype.done=function(){this.lastUpdateCall=null,SVG.off(window,"mousemove.resize"),SVG.off(window,"mouseup.resize"),SVG.off(window,"touchmove.resize"),SVG.off(window,"touchend.resize"),this.el.fire("resizedone")},t.prototype.snapToGrid=function(t,e,i,s){var r;return void 0!==s?r=[(i+t)%this.options.snapToGrid,(s+e)%this.options.snapToGrid]:(i=null==i?3:i,r=[(this.parameters.box.x+t+(1&i?0:this.parameters.box.width))%this.options.snapToGrid,(this.parameters.box.y+e+(2&i?0:this.parameters.box.height))%this.options.snapToGrid]),t<0&&(r[0]-=this.options.snapToGrid),e<0&&(r[1]-=this.options.snapToGrid),t-=Math.abs(r[0])o.maxX&&(t=o.maxX-r),void 0!==o.minY&&a+eo.maxY&&(e=o.maxY-a),[t,e]},t.prototype.checkAspectRatio=function(t,e){if(!this.options.saveAspectRatio)return t;var i=t.slice(),s=this.parameters.box.width/this.parameters.box.height,r=this.parameters.box.width+t[0],a=this.parameters.box.height-t[1],o=r/a;return os&&(i[0]=this.parameters.box.width-a*s,e&&(i[0]=-i[0])),i},SVG.extend(SVG.Element,{resize:function(e){return(this.remember("_resizeHandler")||new t(this)).init(e||{}),this}}),SVG.Element.prototype.resize.defaults={snapToAngle:.1,snapToGrid:1,constraint:{},saveAspectRatio:!1}}).call(this)}(); +\ No newline at end of file diff --git a/cvat/apps/engine/static/engine/js/3rdparty/svg.select.js b/cvat/apps/engine/static/engine/js/3rdparty/svg.select.js index 47e07bd..cee6d34 100644 --- a/cvat/apps/engine/static/engine/js/3rdparty/svg.select.js @@ -147,5 +124,5 @@ index 47e07bd..cee6d34 100644 }; -- -2.7.4 +2.19.1 diff --git a/cvat/apps/engine/static/engine/js/3rdparty/svg.resize.js b/cvat/apps/engine/static/engine/js/3rdparty/svg.resize.js deleted file mode 100644 index 0c3b63d1df2f35f7ee7a010bc7c1eb5ac88af4f8..0000000000000000000000000000000000000000 --- a/cvat/apps/engine/static/engine/js/3rdparty/svg.resize.js +++ /dev/null @@ -1,454 +0,0 @@ -/*! -* svg.resize.js - An extension for svg.js which allows to resize elements which are selected -* @version 1.4.1 -* https://github.com/svgdotjs/svg.resize.js -* -* @copyright [object Object] -* @license MIT -*/; -;(function() { -"use strict"; - -;(function () { - - function ResizeHandler(el) { - - el.remember('_resizeHandler', this); - - this.el = el; - this.parameters = {}; - this.lastUpdateCall = null; - this.p = el.doc().node.createSVGPoint(); - } - - ResizeHandler.prototype.transformPoint = function(x, y, m){ - - this.p.x = x - (this.offset.x - window.pageXOffset); - this.p.y = y - (this.offset.y - window.pageYOffset); - - return this.p.matrixTransform(m || this.m); - - }; - - ResizeHandler.prototype._extractPosition = function(event) { - // Extract a position from a mouse/touch event. - // Returns { x: .., y: .. } - return { - x: event.clientX || event.touches[0].pageX, - y: event.clientY || event.touches[0].pageY - }; - }; - - ResizeHandler.prototype.init = function (options) { - - var _this = this; - - this.stop(); - - if (options === 'stop') { - return; - } - - this.options = {}; - - // Merge options and defaults - for (var i in this.el.resize.defaults) { - this.options[i] = this.el.resize.defaults[i]; - if (typeof options[i] !== 'undefined') { - this.options[i] = options[i]; - } - } - - // We listen to all these events which are specifying different edges - this.el.on('lt.resize', function(e){ _this.resize(e || window.event); }); // Left-Top - this.el.on('rt.resize', function(e){ _this.resize(e || window.event); }); // Right-Top - this.el.on('rb.resize', function(e){ _this.resize(e || window.event); }); // Right-Bottom - this.el.on('lb.resize', function(e){ _this.resize(e || window.event); }); // Left-Bottom - - this.el.on('t.resize', function(e){ _this.resize(e || window.event); }); // Top - this.el.on('r.resize', function(e){ _this.resize(e || window.event); }); // Right - this.el.on('b.resize', function(e){ _this.resize(e || window.event); }); // Bottom - this.el.on('l.resize', function(e){ _this.resize(e || window.event); }); // Left - - this.el.on('rot.resize', function(e){ _this.resize(e || window.event); }); // Rotation - - this.el.on('point.resize', function(e){ _this.resize(e || window.event); }); // Point-Moving - - // This call ensures, that the plugin reacts to a change of snapToGrid immediately - this.update(); - - }; - - ResizeHandler.prototype.stop = function(){ - this.el.off('lt.resize'); - this.el.off('rt.resize'); - this.el.off('rb.resize'); - this.el.off('lb.resize'); - - this.el.off('t.resize'); - this.el.off('r.resize'); - this.el.off('b.resize'); - this.el.off('l.resize'); - - this.el.off('rot.resize'); - - this.el.off('point.resize'); - - return this; - }; - - ResizeHandler.prototype.resize = function (event) { - - var _this = this; - - this.m = this.el.node.getScreenCTM().inverse(); - this.offset = { x: window.pageXOffset, y: window.pageYOffset }; - - var txPt = this._extractPosition(event.detail.event); - this.parameters = { - type: this.el.type, // the type of element - p: this.transformPoint(txPt.x, txPt.y), - x: event.detail.x, // x-position of the mouse when resizing started - y: event.detail.y, // y-position of the mouse when resizing started - box: this.el.bbox(), // The bounding-box of the element - rotation: this.el.transform().rotation // The current rotation of the element - }; - - // Add font-size parameter if the element type is text - if (this.el.type === "text") { - this.parameters.fontSize = this.el.attr()["font-size"]; - } - - // the i-param in the event holds the index of the point which is moved, when using `deepSelect` - if (event.detail.i !== undefined) { - - // get the point array - var array = this.el.array().valueOf(); - - // Save the index and the point which is moved - this.parameters.i = event.detail.i; - this.parameters.pointCoords = [array[event.detail.i][0], array[event.detail.i][1]]; - } - - // Lets check which edge of the bounding-box was clicked and resize the this.el according to this - switch (event.type) { - - // Left-Top-Edge - case 'lt': - // We build a calculating function for every case which gives us the new position of the this.el - this.calc = function (diffX, diffY) { - // The procedure is always the same - // First we snap the edge to the given grid (snapping to 1px grid is normal resizing) - var snap = this.snapToGrid(diffX, diffY); - - // Now we check if the new height and width still valid (> 0) - if (this.parameters.box.width - snap[0] > 0 && this.parameters.box.height - snap[1] > 0) { - // ...if valid, we resize the this.el (which can include moving because the coord-system starts at the left-top and this edge is moving sometimes when resized) - - /* - * but first check if the element is text box, so we can change the font size instead of - * the width and height - */ - - if (this.parameters.type === "text") { - this.el.move(this.parameters.box.x + snap[0], this.parameters.box.y); - this.el.attr("font-size", this.parameters.fontSize - snap[0]); - return; - } - - this.el.move(this.parameters.box.x + snap[0], this.parameters.box.y + snap[1]).size(this.parameters.box.width - snap[0], this.parameters.box.height - snap[1]); - } - }; - break; - - // Right-Top - case 'rt': - // s.a. - this.calc = function (diffX, diffY) { - var snap = this.snapToGrid(diffX, diffY, 1 << 1); - if (this.parameters.box.width + snap[0] > 0 && this.parameters.box.height - snap[1] > 0) { - if (this.parameters.type === "text") { - this.el.move(this.parameters.box.x - snap[0], this.parameters.box.y); - this.el.attr("font-size", this.parameters.fontSize + snap[0]); - return; - } - - this.el.move(this.parameters.box.x, this.parameters.box.y + snap[1]).size(this.parameters.box.width + snap[0], this.parameters.box.height - snap[1]); - } - }; - break; - - // Right-Bottom - case 'rb': - // s.a. - this.calc = function (diffX, diffY) { - var snap = this.snapToGrid(diffX, diffY, 0); - if (this.parameters.box.width + snap[0] > 0 && this.parameters.box.height + snap[1] > 0) { - if (this.parameters.type === "text") { - this.el.move(this.parameters.box.x - snap[0], this.parameters.box.y); - this.el.attr("font-size", this.parameters.fontSize + snap[0]); - return; - } - - this.el.move(this.parameters.box.x, this.parameters.box.y).size(this.parameters.box.width + snap[0], this.parameters.box.height + snap[1]); - } - }; - break; - - // Left-Bottom - case 'lb': - // s.a. - this.calc = function (diffX, diffY) { - var snap = this.snapToGrid(diffX, diffY, 1); - if (this.parameters.box.width - snap[0] > 0 && this.parameters.box.height + snap[1] > 0) { - if (this.parameters.type === "text") { - this.el.move(this.parameters.box.x + snap[0], this.parameters.box.y); - this.el.attr("font-size", this.parameters.fontSize - snap[0]); - return; - } - - this.el.move(this.parameters.box.x + snap[0], this.parameters.box.y).size(this.parameters.box.width - snap[0], this.parameters.box.height + snap[1]); - } - }; - break; - - // Top - case 't': - // s.a. - this.calc = function (diffX, diffY) { - var snap = this.snapToGrid(diffX, diffY, 1 << 1); - if (this.parameters.box.height - snap[1] > 0) { - // Disable the font-resizing if it is not from the corner of bounding-box - if (this.parameters.type === "text") { - return; - } - - this.el.move(this.parameters.box.x, this.parameters.box.y + snap[1]).height(this.parameters.box.height - snap[1]); - } - }; - break; - - // Right - case 'r': - // s.a. - this.calc = function (diffX, diffY) { - var snap = this.snapToGrid(diffX, diffY, 0); - if (this.parameters.box.width + snap[0] > 0) { - if (this.parameters.type === "text") { - return; - } - - this.el.move(this.parameters.box.x, this.parameters.box.y).width(this.parameters.box.width + snap[0]); - } - }; - break; - - // Bottom - case 'b': - // s.a. - this.calc = function (diffX, diffY) { - var snap = this.snapToGrid(diffX, diffY, 0); - if (this.parameters.box.height + snap[1] > 0) { - if (this.parameters.type === "text") { - return; - } - - this.el.move(this.parameters.box.x, this.parameters.box.y).height(this.parameters.box.height + snap[1]); - } - }; - break; - - // Left - case 'l': - // s.a. - this.calc = function (diffX, diffY) { - var snap = this.snapToGrid(diffX, diffY, 1); - if (this.parameters.box.width - snap[0] > 0) { - if (this.parameters.type === "text") { - return; - } - - this.el.move(this.parameters.box.x + snap[0], this.parameters.box.y).width(this.parameters.box.width - snap[0]); - } - }; - break; - - // Rotation - case 'rot': - // s.a. - this.calc = function (diffX, diffY) { - - // yes this is kinda stupid but we need the mouse coords back... - var current = {x: diffX + this.parameters.p.x, y: diffY + this.parameters.p.y}; - - // start minus middle - var sAngle = Math.atan2((this.parameters.p.y - this.parameters.box.y - this.parameters.box.height / 2), (this.parameters.p.x - this.parameters.box.x - this.parameters.box.width / 2)); - - // end minus middle - var pAngle = Math.atan2((current.y - this.parameters.box.y - this.parameters.box.height / 2), (current.x - this.parameters.box.x - this.parameters.box.width / 2)); - - var angle = (pAngle - sAngle) * 180 / Math.PI; - - // We have to move the element to the center of the box first and change the rotation afterwards - // because rotation always works around a rotation-center, which is changed when moving the element - // We also set the new rotation center to the center of the box. - this.el.center(this.parameters.box.cx, this.parameters.box.cy).rotate(this.parameters.rotation + angle - angle % this.options.snapToAngle, this.parameters.box.cx, this.parameters.box.cy); - }; - break; - - // Moving one single Point (needed when an element is deepSelected which means you can move every single point of the object) - case 'point': - this.calc = function (diffX, diffY) { - - // Snapping the point to the grid - var snap = this.snapToGrid(diffX, diffY, this.parameters.pointCoords[0], this.parameters.pointCoords[1]); - - // Get the point array - var array = this.el.array().valueOf(); - - // Changing the moved point in the array - array[this.parameters.i][0] = this.parameters.pointCoords[0] + snap[0]; - array[this.parameters.i][1] = this.parameters.pointCoords[1] + snap[1]; - - // And plot the new this.el - this.el.plot(array); - }; - } - - this.el.fire('resizestart', {dx: this.parameters.x, dy: this.parameters.y, event: event}); - // When resizing started, we have to register events for... - // Touches. - SVG.on(window, 'touchmove.resize', function(e) { - _this.update(e || window.event); - }); - SVG.on(window, 'touchend.resize', function() { - _this.done(); - }); - // Mouse. - SVG.on(window, 'mousemove.resize', function (e) { - _this.update(e || window.event); - }); - SVG.on(window, 'mouseup.resize', function () { - _this.done(); - }); - - }; - - // The update-function redraws the element every time the mouse is moving - ResizeHandler.prototype.update = function (event) { - - if (!event) { - if (this.lastUpdateCall) { - this.calc(this.lastUpdateCall[0], this.lastUpdateCall[1]); - } - return; - } - - // Calculate the difference between the mouseposition at start and now - var txPt = this._extractPosition(event); - var p = this.transformPoint(txPt.x, txPt.y); - - var diffX = p.x - this.parameters.p.x, - diffY = p.y - this.parameters.p.y; - - this.lastUpdateCall = [diffX, diffY]; - - // Calculate the new position and height / width of the element - this.calc(diffX, diffY); - - // Emit an event to say we have changed. - this.el.fire('resizing', {dx: diffX, dy: diffY, event: event}); - }; - - // Is called on mouseup. - // Removes the update-function from the mousemove event - ResizeHandler.prototype.done = function () { - this.lastUpdateCall = null; - SVG.off(window, 'mousemove.resize'); - SVG.off(window, 'mouseup.resize'); - SVG.off(window, 'touchmove.resize'); - SVG.off(window, 'touchend.resize'); - this.el.fire('resizedone'); - }; - - // The flag is used to determine whether the resizing is used with a left-Point (first bit) and top-point (second bit) - // In this cases the temp-values are calculated differently - ResizeHandler.prototype.snapToGrid = function (diffX, diffY, flag, pointCoordsY) { - - var temp; - - // If `pointCoordsY` is given, a single Point has to be snapped (deepSelect). That's why we need a different temp-value - if (typeof pointCoordsY !== 'undefined') { - // Note that flag = pointCoordsX in this case - temp = [(flag + diffX) % this.options.snapToGrid, (pointCoordsY + diffY) % this.options.snapToGrid]; - } else { - // We check if the flag is set and if not we set a default-value (both bits set - which means upper-left-edge) - flag = flag == null ? 1 | 1 << 1 : flag; - temp = [(this.parameters.box.x + diffX + (flag & 1 ? 0 : this.parameters.box.width)) % this.options.snapToGrid, (this.parameters.box.y + diffY + (flag & (1 << 1) ? 0 : this.parameters.box.height)) % this.options.snapToGrid]; - } - - - diffX -= (Math.abs(temp[0]) < this.options.snapToGrid / 2 ? - temp[0] : - temp[0] - (diffX < 0 ? -this.options.snapToGrid : this.options.snapToGrid)); - diffY -= (Math.abs(temp[1]) < this.options.snapToGrid / 2 ? - temp[1] : - temp[1] - (diffY < 0 ? -this.options.snapToGrid : this.options.snapToGrid)); - - return this.constraintToBox(diffX, diffY, flag, pointCoordsY); - - }; - - // keep element within constrained box - ResizeHandler.prototype.constraintToBox = function (diffX, diffY, flag, pointCoordsY) { - //return [diffX, diffY] - var c = this.options.constraint || {}; - var orgX, orgY; - - if (typeof pointCoordsY !== 'undefined') { - orgX = flag; - orgY = pointCoordsY; - } else { - orgX = this.parameters.box.x + (flag & 1 ? 0 : this.parameters.box.width); - orgY = this.parameters.box.y + (flag & (1<<1) ? 0 : this.parameters.box.height); - } - - if (typeof c.minX !== 'undefined' && orgX + diffX < c.minX) { - diffX = c.minX - orgX; - } - - if (typeof c.maxX !== 'undefined' && orgX + diffX > c.maxX) { - diffX = c.maxX - orgX; - } - - if (typeof c.minY !== 'undefined' && orgY + diffY < c.minY) { - diffY = c.minY - orgY; - } - - if (typeof c.maxY !== 'undefined' && orgY + diffY > c.maxY) { - diffY = c.maxY - orgY; - } - - return [diffX, diffY]; - }; - - SVG.extend(SVG.Element, { - // Resize element with mouse - resize: function (options) { - - (this.remember('_resizeHandler') || new ResizeHandler(this)).init(options || {}); - - return this; - - } - - }); - - SVG.Element.prototype.resize.defaults = { - snapToAngle: 0.1, // Specifies the speed the rotation is happening when moving the mouse - snapToGrid: 1, // Snaps to a grid of `snapToGrid` Pixels - constraint: {} // keep element within constrained box - }; - -}).call(this); -}()); diff --git a/cvat/apps/engine/static/engine/js/3rdparty/svg.resize.min.js b/cvat/apps/engine/static/engine/js/3rdparty/svg.resize.min.js new file mode 100644 index 0000000000000000000000000000000000000000..2dca34bac272f466320be80cb15362607f66ad49 --- /dev/null +++ b/cvat/apps/engine/static/engine/js/3rdparty/svg.resize.min.js @@ -0,0 +1 @@ +/*! svg.resize.js v1.4.3 MIT*/;!function(){"use strict";(function(){function t(t){t.remember("_resizeHandler",this),this.el=t,this.parameters={},this.lastUpdateCall=null,this.p=t.doc().node.createSVGPoint()}t.prototype.transformPoint=function(t,e,i){return this.p.x=t-(this.offset.x-window.pageXOffset),this.p.y=e-(this.offset.y-window.pageYOffset),this.p.matrixTransform(i||this.m)},t.prototype._extractPosition=function(t){return{x:null!=t.clientX?t.clientX:t.touches[0].clientX,y:null!=t.clientY?t.clientY:t.touches[0].clientY}},t.prototype.init=function(t){var e=this;if(this.stop(),"stop"!==t){this.options={};for(var i in this.el.resize.defaults)this.options[i]=this.el.resize.defaults[i],void 0!==t[i]&&(this.options[i]=t[i]);this.el.on("lt.resize",function(t){e.resize(t||window.event)}),this.el.on("rt.resize",function(t){e.resize(t||window.event)}),this.el.on("rb.resize",function(t){e.resize(t||window.event)}),this.el.on("lb.resize",function(t){e.resize(t||window.event)}),this.el.on("t.resize",function(t){e.resize(t||window.event)}),this.el.on("r.resize",function(t){e.resize(t||window.event)}),this.el.on("b.resize",function(t){e.resize(t||window.event)}),this.el.on("l.resize",function(t){e.resize(t||window.event)}),this.el.on("rot.resize",function(t){e.resize(t||window.event)}),this.el.on("point.resize",function(t){e.resize(t||window.event)}),this.update()}},t.prototype.stop=function(){return this.el.off("lt.resize"),this.el.off("rt.resize"),this.el.off("rb.resize"),this.el.off("lb.resize"),this.el.off("t.resize"),this.el.off("r.resize"),this.el.off("b.resize"),this.el.off("l.resize"),this.el.off("rot.resize"),this.el.off("point.resize"),this},t.prototype.resize=function(t){var e=this;this.m=this.el.node.getScreenCTM().inverse(),this.offset={x:window.pageXOffset,y:window.pageYOffset};var i=this._extractPosition(t.detail.event);if(this.parameters={type:this.el.type,p:this.transformPoint(i.x,i.y),x:t.detail.x,y:t.detail.y,box:this.el.bbox(),rotation:this.el.transform().rotation},"text"===this.el.type&&(this.parameters.fontSize=this.el.attr()["font-size"]),void 0!==t.detail.i){var s=this.el.array().valueOf();this.parameters.i=t.detail.i,this.parameters.pointCoords=[s[t.detail.i][0],s[t.detail.i][1]]}switch(t.type){case"lt":this.calc=function(t,e){var i=this.snapToGrid(t,e);if(this.parameters.box.width-i[0]>0&&this.parameters.box.height-i[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x+i[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize-i[0]);i=this.checkAspectRatio(i),this.el.move(this.parameters.box.x+i[0],this.parameters.box.y+i[1]).size(this.parameters.box.width-i[0],this.parameters.box.height-i[1])}};break;case"rt":this.calc=function(t,e){var i=this.snapToGrid(t,e,2);if(this.parameters.box.width+i[0]>0&&this.parameters.box.height-i[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x-i[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize+i[0]);i=this.checkAspectRatio(i,!0),this.el.move(this.parameters.box.x,this.parameters.box.y+i[1]).size(this.parameters.box.width+i[0],this.parameters.box.height-i[1])}};break;case"rb":this.calc=function(t,e){var i=this.snapToGrid(t,e,0);if(this.parameters.box.width+i[0]>0&&this.parameters.box.height+i[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x-i[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize+i[0]);i=this.checkAspectRatio(i),this.el.move(this.parameters.box.x,this.parameters.box.y).size(this.parameters.box.width+i[0],this.parameters.box.height+i[1])}};break;case"lb":this.calc=function(t,e){var i=this.snapToGrid(t,e,1);if(this.parameters.box.width-i[0]>0&&this.parameters.box.height+i[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x+i[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize-i[0]);i=this.checkAspectRatio(i,!0),this.el.move(this.parameters.box.x+i[0],this.parameters.box.y).size(this.parameters.box.width-i[0],this.parameters.box.height+i[1])}};break;case"t":this.calc=function(t,e){var i=this.snapToGrid(t,e,2);if(this.parameters.box.height-i[1]>0){if("text"===this.parameters.type)return;this.el.move(this.parameters.box.x,this.parameters.box.y+i[1]).height(this.parameters.box.height-i[1])}};break;case"r":this.calc=function(t,e){var i=this.snapToGrid(t,e,0);if(this.parameters.box.width+i[0]>0){if("text"===this.parameters.type)return;this.el.move(this.parameters.box.x,this.parameters.box.y).width(this.parameters.box.width+i[0])}};break;case"b":this.calc=function(t,e){var i=this.snapToGrid(t,e,0);if(this.parameters.box.height+i[1]>0){if("text"===this.parameters.type)return;this.el.move(this.parameters.box.x,this.parameters.box.y).height(this.parameters.box.height+i[1])}};break;case"l":this.calc=function(t,e){var i=this.snapToGrid(t,e,1);if(this.parameters.box.width-i[0]>0){if("text"===this.parameters.type)return;this.el.move(this.parameters.box.x+i[0],this.parameters.box.y).width(this.parameters.box.width-i[0])}};break;case"rot":this.calc=function(t,e){var i={x:t+this.parameters.p.x,y:e+this.parameters.p.y},s=Math.atan2(this.parameters.p.y-this.parameters.box.y-this.parameters.box.height/2,this.parameters.p.x-this.parameters.box.x-this.parameters.box.width/2),r=Math.atan2(i.y-this.parameters.box.y-this.parameters.box.height/2,i.x-this.parameters.box.x-this.parameters.box.width/2),a=this.parameters.rotation+180*(r-s)/Math.PI+this.options.snapToAngle/2;this.el.center(this.parameters.box.cx,this.parameters.box.cy).rotate(a-a%this.options.snapToAngle,this.parameters.box.cx,this.parameters.box.cy)};break;case"point":this.calc=function(t,e){var i=this.snapToGrid(t,e,this.parameters.pointCoords[0],this.parameters.pointCoords[1]),s=this.el.array().valueOf();s[this.parameters.i][0]=this.parameters.pointCoords[0]+i[0],s[this.parameters.i][1]=this.parameters.pointCoords[1]+i[1],this.el.plot(s)}}this.el.fire("resizestart",{dx:this.parameters.x,dy:this.parameters.y,event:t}),SVG.on(window,"touchmove.resize",function(t){e.update(t||window.event)}),SVG.on(window,"touchend.resize",function(){e.done()}),SVG.on(window,"mousemove.resize",function(t){e.update(t||window.event)}),SVG.on(window,"mouseup.resize",function(){e.done()})},t.prototype.update=function(t){if(!t)return void(this.lastUpdateCall&&this.calc(this.lastUpdateCall[0],this.lastUpdateCall[1]));var e=this._extractPosition(t),i=this.transformPoint(e.x,e.y),s=i.x-this.parameters.p.x,r=i.y-this.parameters.p.y;this.lastUpdateCall=[s,r],this.calc(s,r),this.el.fire("resizing",{dx:s,dy:r,event:t})},t.prototype.done=function(){this.lastUpdateCall=null,SVG.off(window,"mousemove.resize"),SVG.off(window,"mouseup.resize"),SVG.off(window,"touchmove.resize"),SVG.off(window,"touchend.resize"),this.el.fire("resizedone")},t.prototype.snapToGrid=function(t,e,i,s){var r;return void 0!==s?r=[(i+t)%this.options.snapToGrid,(s+e)%this.options.snapToGrid]:(i=null==i?3:i,r=[(this.parameters.box.x+t+(1&i?0:this.parameters.box.width))%this.options.snapToGrid,(this.parameters.box.y+e+(2&i?0:this.parameters.box.height))%this.options.snapToGrid]),t<0&&(r[0]-=this.options.snapToGrid),e<0&&(r[1]-=this.options.snapToGrid),t-=Math.abs(r[0])o.maxX&&(t=o.maxX-r),void 0!==o.minY&&a+eo.maxY&&(e=o.maxY-a),[t,e]},t.prototype.checkAspectRatio=function(t,e){if(!this.options.saveAspectRatio)return t;var i=t.slice(),s=this.parameters.box.width/this.parameters.box.height,r=this.parameters.box.width+t[0],a=this.parameters.box.height-t[1],o=r/a;return os&&(i[0]=this.parameters.box.width-a*s,e&&(i[0]=-i[0])),i},SVG.extend(SVG.Element,{resize:function(e){return(this.remember("_resizeHandler")||new t(this)).init(e||{}),this}}),SVG.Element.prototype.resize.defaults={snapToAngle:.1,snapToGrid:1,constraint:{},saveAspectRatio:!1}}).call(this)}(); diff --git a/cvat/apps/engine/static/engine/js/shapeCollection.js b/cvat/apps/engine/static/engine/js/shapeCollection.js index 14a2027bc955e4a3cad69984ce7ab37b7836511a..7550c352d3cda4662a758228914d98abb75c3ad9 100644 --- a/cvat/apps/engine/static/engine/js/shapeCollection.js +++ b/cvat/apps/engine/static/engine/js/shapeCollection.js @@ -1067,28 +1067,28 @@ class ShapeCollectionController { } switchActiveColor() { - let colorByInstanceInput = $('#colorByInstanceRadio'); - let colorByGroupInput = $('#colorByGroupRadio'); - let colorByLabelInput = $('#colorByLabelRadio'); - - let activeShape = this._model.activeShape; - if (activeShape) { - if (colorByInstanceInput.prop('checked')) { - activeShape.changeColor(this._model.nextColor()); - } - else if (colorByGroupInput.prop('checked')) { - if (activeShape.groupId) { - this._model.updateGroupIdx(activeShape.groupId); - colorByGroupInput.trigger('change'); + if (!window.cvat.mode || window.cvat.mode === 'aam') { + const colorByInstanceInput = $('#colorByInstanceRadio'); + const colorByGroupInput = $('#colorByGroupRadio'); + const colorByLabelInput = $('#colorByLabelRadio'); + + const { activeShape } = this._model; + if (activeShape) { + if (colorByInstanceInput.prop('checked')) { + activeShape.changeColor(this._model.nextColor()); + } else if (colorByGroupInput.prop('checked')) { + if (activeShape.groupId) { + this._model.updateGroupIdx(activeShape.groupId); + colorByGroupInput.trigger('change'); + } + } else { + const labelId = +activeShape.label; + window.cvat.labelsInfo.updateLabelColorIdx(labelId); + $(`.labelContentElement[label_id="${labelId}"`).css('background-color', + this._model.colorsByGroup(window.cvat.labelsInfo.labelColorIdx(labelId))); + colorByLabelInput.trigger('change'); } } - else { - let labelId = +activeShape.label; - window.cvat.labelsInfo.updateLabelColorIdx(labelId); - $(`.labelContentElement[label_id="${labelId}"`).css('background-color', - this._model.colorsByGroup(window.cvat.labelsInfo.labelColorIdx(labelId))); - colorByLabelInput.trigger('change'); - } } } diff --git a/cvat/apps/engine/static/engine/js/shapes.js b/cvat/apps/engine/static/engine/js/shapes.js index 46f76320e34783d64ab7007ca8eb1bc95b5b174b..b7592365caae865d3b93f3597e1fcc1f2a9da5e0 100644 --- a/cvat/apps/engine/static/engine/js/shapes.js +++ b/cvat/apps/engine/static/engine/js/shapes.js @@ -522,7 +522,7 @@ class ShapeModel extends Listener { set active(value) { this._active = value; - if (!this._removed) { + if (!this._removed && !['drag', 'resize'].includes(window.cvat.mode)) { this.notify('activation'); } } @@ -1478,9 +1478,9 @@ class ShapeView extends Listener { _makeEditable() { if (this._uis.shape && this._uis.shape.node.parentElement && !this._flags.editable) { - let events = { + const events = { drag: null, - resize: null + resize: null, }; this._uis.shape.front(); @@ -1493,15 +1493,15 @@ class ShapeView extends Listener { this._hideShapeText(); this.notify('drag'); }).on('dragend', (e) => { - let p1 = e.detail.handler.startPoints.point; - let p2 = e.detail.p; - if (Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2)) > 1) { - let frame = window.cvat.player.frames.current; - this._controller.updatePosition(frame, this._buildPosition()); - } + const p1 = e.detail.handler.startPoints.point; + const p2 = e.detail.p; events.drag.close(); events.drag = null; this._flags.dragging = false; + if (Math.sqrt(Math.pow((p1.x - p2.x), 2) + Math.pow((p1.y - p2.y), 2)) > 1) { + const frame = window.cvat.player.frames.current; + this._controller.updatePosition(frame, this._buildPosition()); + } this._showShapeText(); this.notify('drag'); }); @@ -1522,27 +1522,17 @@ class ShapeView extends Listener { blurAllElements(); this._hideShapeText(); this.notify('resize'); - - Logger.addEvent(Logger.EventType.debugInfo, { - debugMessage: "Resize has started", - resizeEventInitialized: Boolean(events.resize) - }); }).on('resizing', () => { objWasResized = true; }).on('resizedone', () => { - Logger.addEvent(Logger.EventType.debugInfo, { - debugMessage: "Resize has done", - resizeEventInitialized: Boolean(events.resize) - }); - + events.resize.close(); + events.resize = null; + this._flags.resizing = false; if (objWasResized) { - let frame = window.cvat.player.frames.current; + const frame = window.cvat.player.frames.current; this._controller.updatePosition(frame, this._buildPosition()); objWasResized = false; } - events.resize.close(); - events.resize = null; - this._flags.resizing = false; this._showShapeText(); this.notify('resize'); }); @@ -2548,6 +2538,13 @@ class ShapeView extends Listener { let hiddenText = model.hiddenText && activeAttribute === null; let hiddenShape = model.hiddenShape && activeAttribute === null; + if (this._flags.resizing || this._flags.dragging) { + Logger.addEvent(Logger.EventType.debugInfo, { + debugMessage: "Object has been updated during resizing/dragging", + updateReason: model.updateReason, + }); + } + this._makeNotEditable(); this._deselect(); if (hiddenText) { diff --git a/cvat/apps/engine/templates/engine/annotation.html b/cvat/apps/engine/templates/engine/annotation.html index 9f80dab3b32702176b764fbe860a2e8f7c9e072a..9f5b3d5c3f81affccaf3851162b5db0d72e84965 100644 --- a/cvat/apps/engine/templates/engine/annotation.html +++ b/cvat/apps/engine/templates/engine/annotation.html @@ -19,7 +19,7 @@ {{ block.super }} - +