fix(DragAndResize): Prevent UI flicker when dragging and resizing eve…

…nts. Closes #209
mattlewis92 · Nov 23, 2015 · 38c2d29 · 38c2d29
1 parent aa7bcba
commit 38c2d29
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 14 deletions.
diff --git a/src/directives/mwlDraggable.js b/src/directives/mwlDraggable.js
@@ -4,7 +4,7 @@ var angular = require('angular');
 
 angular
   .module('mwl.calendar')
-  .controller('MwlDraggableCtrl', function($element, $scope, $window, $parse, $attrs, interact) {
+  .controller('MwlDraggableCtrl', function($element, $scope, $window, $parse, $attrs, $timeout, interact) {
 
     if (!interact) {
       return;
@@ -108,10 +108,12 @@ angular
             $scope.$apply();
           }
 
-          translateElement(elm, '')
-            .removeAttr('data-x')
-            .removeAttr('data-y')
-            .removeClass('dragging-active');
+          $timeout(function() {
+            translateElement(elm, '')
+              .removeAttr('data-x')
+              .removeAttr('data-y')
+              .removeClass('dragging-active');
+          });
         }
 
       }

diff --git a/src/directives/mwlResizable.js b/src/directives/mwlResizable.js
@@ -4,7 +4,7 @@ var angular = require('angular');
 
 angular
   .module('mwl.calendar')
-  .controller('MwlResizableCtrl', function($element, $scope, $parse, $attrs, interact) {
+  .controller('MwlResizableCtrl', function($element, $scope, $parse, $attrs, $timeout, interact) {
 
     if (!interact) {
       return;
@@ -102,14 +102,16 @@ angular
           var elm = angular.element(event.target);
           var unitsResized = getUnitsResized(resizeEdge, elm, snapGridDimensions);
 
-          elm
-            .data('x', null)
-            .data('y', null)
-            .css({
-              transform: '',
-              width: originalDimensionsStyle.width,
-              height: originalDimensionsStyle.height
-            });
+          $timeout(function() {
+            elm
+              .data('x', null)
+              .data('y', null)
+              .css({
+                transform: '',
+                width: originalDimensionsStyle.width,
+                height: originalDimensionsStyle.height
+              });
+          });
 
           if ($attrs.onResizeEnd) {
             $parse($attrs.onResizeEnd)($scope, unitsResized);