Some fixes and polishes around modal toggling and area disabling.

* Close menu before toggling modal (before because the menu changes `Main.actionMode`).
* Hide the helper and update the grid display when toggling modal.
* Signal `stop-drawing` -> `leave-drawing-mode` for consistence.
* `area.disable` -> area `destroy` event handler.
* `area.isInDrawingMode` -> `area.reactive`.

draw.js

@@ -120,11 +120,14 @@ var DrawingArea = new Lang.Class({
     Name: 'DrawOnYourScreenDrawingArea',
     Extends: St.DrawingArea,
     Signals: { 'show-osd': { param_types: [GObject.TYPE_STRING, GObject.TYPE_STRING, GObject.TYPE_STRING, GObject.TYPE_DOUBLE] },
-               'stop-drawing': {} },
+               'leave-drawing-mode': {} },
 
     _init: function(params, monitor, helper, loadPersistent) {
         this.parent({ style_class: 'draw-on-your-screen', name: params.name});
         
+        this.connect('destroy', this._onDestroy.bind(this));
+        this.reactiveHandler = this.connect('notify::reactive', this._onReactiveChanged.bind(this));
+        
         this.settings = Convenience.getSettings();
         this.monitor = monitor;
         this.helper = helper;
@@ -151,6 +154,11 @@ var DrawingArea = new Lang.Class({
         return this._menu;
     },
     
+    closeMenu: function() {
+        if (this._menu)
+            this._menu.close();
+    },
+    
     get currentTool() {
         return this._currentTool;
     },
@@ -251,7 +259,7 @@ var DrawingArea = new Lang.Class({
             cr.restore();
         }
         
-        if (this.isInDrawingMode && this.hasGrid && this.gridGap && this.gridGap >= 1) {
+        if (this.reactive && this.hasGrid && this.gridGap && this.gridGap >= 1) {
             cr.save();
             Clutter.cairo_set_source_color(cr, this.gridColor);
             
@@ -392,7 +400,7 @@ var DrawingArea = new Lang.Class({
             if (this.helper.visible)
                 this.helper.hideHelp();
             else
-                this.emit('stop-drawing');
+                this.emit('leave-drawing-mode');
             return Clutter.EVENT_STOP;
             
         } else {
@@ -867,23 +875,33 @@ var DrawingArea = new Lang.Class({
             this.helper.showHelp();
     },
     
+    // The area is reactive when it is modal.
+    _onReactiveChanged: function() {
+        if (this.hasGrid)
+            this._redisplay();
+        if (this.helper.visible)
+            this.helper.hideHelp();
+    },
+    
+    _onDestroy: function() {
+        this.disconnect(this.reactiveHandler);
+        this.erase();
+        if (this._menu)
+            this._menu.disable();
+    },
+    
     enterDrawingMode: function() {
-        this.isInDrawingMode = true;
         this.stageKeyPressedHandler = global.stage.connect('key-press-event', this._onStageKeyPressed.bind(this));
         this.stageKeyReleasedHandler = global.stage.connect('key-release-event', this._onStageKeyReleased.bind(this));
         this.keyPressedHandler = this.connect('key-press-event', this._onKeyPressed.bind(this));
         this.buttonPressedHandler = this.connect('button-press-event', this._onButtonPressed.bind(this));
         this._onKeyboardPopupMenuHandler = this.connect('popup-menu', this._onKeyboardPopupMenu.bind(this));
         this.scrollHandler = this.connect('scroll-event', this._onScroll.bind(this));
-        this.get_parent().set_background_color(this.hasBackground ? this.activeBackgroundColor : null);
+        this.get_parent().set_background_color(this.reactive && this.hasBackground ? this.activeBackgroundColor : null);
-        if (this.hasGrid)
-            // redisplay to show the grid before updating the style because _updateStyle is long.
-            this._redisplay();
         this._updateStyle();
     },
     
     leaveDrawingMode: function(save) {
-        this.isInDrawingMode = false;
         if (this.stageKeyPressedHandler) {
             global.stage.disconnect(this.stageKeyPressedHandler);
             this.stageKeyPressedHandler = null;
@@ -921,17 +939,13 @@ var DrawingArea = new Lang.Class({
             this.scrollHandler = null;
         }
         
-        if (this.helper.visible)
-            this.helper.hideHelp();
-        
         this.currentElement = null;
         this._stopTextCursorTimeout();
         this.currentTool = Shapes.NONE;
         this.dashedLine = false;
         this.fill = false;
         this._redisplay();
-        if (this._menu)
+        this.closeMenu();
-            this._menu.close();
         this.get_parent().set_background_color(null);
         if (save)
             this.savePersistent();
@@ -1101,11 +1115,6 @@ var DrawingArea = new Lang.Class({
     get drawingContentsHasChanged() {
         let contents = `[\n  ` + new Array(...this.elements.map(element => JSON.stringify(element))).join(`,\n\n  `) + `\n]`;
         return contents != this.lastJsonContents;
-    },
-    
-    disable: function() {
-        this.erase();
-        this.menu.disable();
     }
 });
 

extension.js

@@ -166,7 +166,7 @@ var AreaManager = new Lang.Class({
             container.set_position(monitor.x, monitor.y);
             container.set_size(monitor.width, monitor.height);
             area.set_size(monitor.width, monitor.height);
-            area.stopDrawingHandler = area.connect('stop-drawing', this.toggleDrawing.bind(this));
+            area.leaveDrawingHandler = area.connect('leave-drawing-mode', this.toggleDrawing.bind(this));
             area.showOsdHandler = area.connect('show-osd', this.showOsd.bind(this));
             this.areas.push(area);
         }
@@ -334,6 +334,9 @@ var AreaManager = new Lang.Class({
         if (!this.activeArea)
             return;
         
+        // The menu changes Main.actionMode.
+        this.activeArea.closeMenu();
+        
         if (Main.actionMode & DRAWING_ACTION_MODE) {
             Main.popModal(this.activeArea);
             setCursor('DEFAULT');
@@ -473,11 +476,10 @@ var AreaManager = new Lang.Class({
     removeAreas: function() {
         for (let i = 0; i < this.areas.length; i++) {
             let area = this.areas[i];
+            area.disconnect(area.leaveDrawingHandler);
+            area.disconnect(area.showOsdHandler);
             let container = area.get_parent();
             container.get_parent().remove_actor(container);
-            area.disconnect(area.stopDrawingHandler);
-            area.disconnect(area.showOsdHandler);
-            area.disable();
             container.destroy();
         }
         this.areas = [];