From 66516374e0c60cd3361b2eeb53a8f100ea6965a6 Mon Sep 17 00:00:00 2001
From: Boris Sekachev <boris.sekachev@intel.com>
Date: Wed, 26 Sep 2018 16:38:20 +0300
Subject: [PATCH] Some AAM refactoring #7

---
 .../engine/js/attributeAnnotationMode.js      | 55 ++++++++++++++++
 cvat/apps/engine/static/engine/js/shapes.js   | 66 -------------------
 2 files changed, 55 insertions(+), 66 deletions(-)

diff --git a/cvat/apps/engine/static/engine/js/attributeAnnotationMode.js b/cvat/apps/engine/static/engine/js/attributeAnnotationMode.js
index e1c56b05b08e..84afbbe65869 100644
--- a/cvat/apps/engine/static/engine/js/attributeAnnotationMode.js
+++ b/cvat/apps/engine/static/engine/js/attributeAnnotationMode.js
@@ -264,6 +264,10 @@ class AAMModel extends Listener {
         return this._activeAAM;
     }
 
+    get active() {
+        return this._active;
+    }
+
     set margin(value) {
         this._margin = value;
     }
@@ -341,6 +345,7 @@ class AAMView {
         this._aamCounter = $('#aamCounter');
         this._aamHelpContainer = $('#aamHelpContainer');
         this._zoomMargin = $('#aamZoomMargin');
+        this._frameContent = SVG.adopt($('#frameContent')[0]);
         this._controller = aamController;
 
         this._zoomMargin.on('change', (e) => {
@@ -350,7 +355,57 @@ class AAMView {
         aamModel.subscribe(this);
     }
 
+
+    _setupAAMView(active, type, pos) {
+        let oldRect = $('#outsideRect');
+        let oldMask = $('#outsideMask');
+
+        if (active) {
+            if (oldRect.length) {
+                oldRect.remove();
+                oldMask.remove();
+            }
+
+            let size = {
+                x: 0,
+                y: 0,
+                width: window.cvat.player.geometry.frameWidth,
+                height: window.cvat.player.geometry.frameHeight
+            };
+
+            let excludeField = this._frameContent.rect(size.width, size.height).move(size.x, size.y).fill('#666');
+            let includeField = null;
+
+            if (type === 'box') {
+                includeField = this._frameContent.rect(pos.xbr - pos.xtl, pos.ybr - pos.ytl).move(pos.xtl, pos.ytl);
+            }
+            else {
+                includeField = this._frameContent.polygon(pos.points);
+            }
+
+            this._frameContent.mask().add(excludeField).add(includeField).fill('black').attr('id', 'outsideMask');
+            this._frameContent.rect(size.width, size.height).move(size.x, size.y).attr({
+                mask: 'url(#outsideMask)',
+                id: 'outsideRect'
+            });
+
+            let content = $(this._frameContent.node);
+            let texts = content.find('.shapeText');
+            for (let text of texts) {
+                content.append(text);
+            }
+        }
+        else {
+            oldRect.remove();
+            oldMask.remove();
+        }
+    }
+
     onAAMUpdate(aam) {
+        this._setupAAMView(aam.active ? true : false,
+            aam.active ? aam.active.type.split('_')[1] : '',
+            aam.active ? aam.active.interpolate(window.cvat.player.frames.current).position : 0);
+
         if (aam.activeAAM) {
             if (this._aamMenu.hasClass('hidden')) {
                 this._trackManagement.addClass('hidden');
diff --git a/cvat/apps/engine/static/engine/js/shapes.js b/cvat/apps/engine/static/engine/js/shapes.js
index 43444743888b..0c75a08feb50 100644
--- a/cvat/apps/engine/static/engine/js/shapes.js
+++ b/cvat/apps/engine/static/engine/js/shapes.js
@@ -2499,7 +2499,6 @@ class ShapeView extends Listener {
             break;
         }
         case 'activeAttribute':
-            this._setupAAMView(activeAttribute != null, interpolation.position);
             setupHidden.call(this, hiddenShape, hiddenText,
                 activeAttribute != null, activeAttribute, model.active, interpolation);
 
@@ -2743,38 +2742,6 @@ class BoxView extends ShapeView {
 
         ShapeView.prototype._drawShapeUI.call(this);
     }
-
-
-    _setupAAMView(active, pos) {
-        let oldRect = $('#outsideRect');
-        let oldMask = $('#outsideMask');
-
-        if (active) {
-            if (oldRect.length) {
-                oldRect.remove();
-                oldMask.remove();
-            }
-
-            let size = {
-                x: 0,
-                y: 0,
-                width: window.cvat.player.geometry.frameWidth,
-                height: window.cvat.player.geometry.frameHeight
-            };
-
-            let excludeField = this._scenes.svg.rect(size.width, size.height).move(size.x, size.y).fill('#666');
-            let includeField = this._scenes.svg.rect(pos.xbr - pos.xtl, pos.ybr - pos.ytl).move(pos.xtl, pos.ytl);
-            this._scenes.svg.mask().add(excludeField).add(includeField).fill('black').attr('id', 'outsideMask');
-            this._scenes.svg.rect(size.width, size.height).move(size.x, size.y).attr({
-                mask: 'url(#outsideMask)',
-                id: 'outsideRect'
-            });
-        }
-        else {
-            oldRect.remove();
-            oldMask.remove();
-        }
-    }
 }
 
 
@@ -2793,39 +2760,6 @@ class PolyShapeView extends ShapeView {
         };
     }
 
-
-    _setupAAMView(active, pos) {
-        let oldRect = $('#outsideRect');
-        let oldMask = $('#outsideMask');
-
-        if (active) {
-            if (oldRect.length) {
-                oldRect.remove();
-                oldMask.remove();
-            }
-
-            let size = {
-                x: 0,
-                y: 0,
-                width: window.cvat.player.geometry.frameWidth,
-                height: window.cvat.player.geometry.frameHeight
-            };
-
-            let excludeField = this._scenes.svg.rect(size.width, size.height).move(size.x, size.y).fill('#666');
-            let includeField = this._scenes.svg.polygon(pos.points);
-            this._scenes.svg.mask().add(excludeField).add(includeField).fill('black').attr('id', 'outsideMask');
-            this._scenes.svg.rect(size.width, size.height).move(size.x, size.y).attr({
-                mask: 'url(#outsideMask)',
-                id: 'outsideRect'
-            });
-        }
-        else {
-            oldRect.remove();
-            oldMask.remove();
-        }
-    }
-
-
     _makeEditable() {
         ShapeView.prototype._makeEditable.call(this);
         if (this._flags.editable) {