Reduce calls to .height() in slot.js

addon/components/sortable-group.js

@@ -1,6 +1,6 @@
 import Ember from 'ember';
 import layout from '../templates/components/sortable-group';
-import computed from 'ember-new-computed';
+import { computed } from '@ember/object'; 
 const { A, Component, get, set, run } = Ember;
 const a = A;
 const NO_MODEL = {};

addon/mixins/sortable-item.js

@@ -1,5 +1,5 @@
 import Ember from 'ember';
-import computed from 'ember-new-computed';
+import { computed } from '@ember/object'; 
 const { Mixin, $, run } = Ember;
 const { Promise } = Ember.RSVP;
 
@@ -103,6 +103,7 @@ export default Mixin.create({
   */
   isAnimated: computed(function() {
     let el = this.$();
+    if (el === undefined || el === null) return false;
     let property = el.css('transition-property');
 
     return /all|transform/.test(property);
@@ -115,6 +116,7 @@ export default Mixin.create({
   */
   transitionDuration: computed(function() {
     let el = this.$();
+    if (el === undefined || el === null) return 0;
     let rule = el.css('transition-duration');
     let match = rule.match(/([\d\.]+)([ms]*)/);
 
@@ -140,7 +142,9 @@ export default Mixin.create({
   x: computed({
     get() {
       if (this._x === undefined) {
-        let marginLeft = parseFloat(this.$().css('margin-left'));
+        let el = this.$()
+        if (el === undefined || el === null) return 0;
+        let marginLeft = parseFloat(el.css('margin-left'));
         this._x = this.element.scrollLeft + this.element.offsetLeft - marginLeft;
       }
 
@@ -182,6 +186,7 @@ export default Mixin.create({
   */
   width: computed(function() {
     let el = this.$();
+    if (el === undefined || el === null) return 0;
     let width = el.outerWidth(true);
 
     width += getBorderSpacing(el).horizontal;
@@ -196,6 +201,7 @@ export default Mixin.create({
   */
   height: computed(function() {
     let el = this.$();
+    if (el === undefined || el === null) return 0;
     let height = el.outerHeight();
 
     let marginBottom = parseFloat(el.css('margin-bottom'));
@@ -401,7 +407,9 @@ export default Mixin.create({
 
     if (groupDirection === 'x') {
       let x = this.get('x');
-      let dx = x - this.element.offsetLeft + parseFloat(this.$().css('margin-left'));
+      let el = this.$()
+      if (el === undefined || el === null) return 0;
+      let dx = x - this.element.offsetLeft + parseFloat(el.css('margin-left'));
 
       this.$().css({
         transform: `translateX(${dx}px)`
@@ -410,8 +418,9 @@ export default Mixin.create({
     if (groupDirection === 'y') {
       let y = this.get('y');
       let dy = y - this.element.offsetTop;
-
-      this.$().css({
+      let el = this.$()
+      if (el === undefined || el === null) return 0;
+      el.css({
         transform: `translateY(${dy}px)`
       });
     }
@@ -485,6 +494,7 @@ export default Mixin.create({
     @private
   */
   _complete() {
+    if (this.isDestroyed || this.isDestroying) return;
     this.sendAction('onDragStop', this.get('model'));
     this.set('isDropping', false);
     this.set('wasDropped', true);
@@ -539,9 +549,10 @@ function getX(event) {
 */
 function getBorderSpacing(el) {
   el = $(el);
-
+  if (el === undefined || el === null) return 0;
   let css = el.css('border-spacing'); // '0px 0px'
-  let [horizontal, vertical] = css.split(' ');
+  const [horizontal, initialVertical] = css.split(" ");
+  const vertical = initialVertical === undefined ? horizontal : initialVertical;
 
   return {
     horizontal: parseFloat(horizontal),

addon/utils/arrangement.js

@@ -98,7 +98,7 @@ export default class Arrangement {
   }
 
   walkTree(func) {
-    walk(this.root, func);
+    walk(this.root, func, [0]);
   }
 
   walkPath(path, func) {
@@ -131,7 +131,7 @@ export default class Arrangement {
   }
 }
 
-function walk(slot, func, path = [0]) {
+function walk(slot, func, path) {
   func(slot, path);
 
   slot.children.forEach((child, index) => {

addon/utils/gesture.js

@@ -45,6 +45,7 @@ export default class Gesture {
     this.clientY = 0;
     this.listeners = [];
     this.isDestroyed = false;
+    this.isInAnimationFrame = false;
   }
 
   /**
@@ -194,7 +195,14 @@ export default class Gesture {
     this.dx = this.x - this.ox;
     this.dy = this.y - this.oy;
 
-    this.onUpdate(this);
+    if (this.isInAnimationFrame === false){
+       this.isInAnimationFrame = true;
+       window.requestAnimationFrame(() => {
+         if (this.onUpdate) this.onUpdate(this);
+         this.isInAnimationFrame = false;
+       });
+    };
+
   }
 
   /**
@@ -211,6 +219,7 @@ export default class Gesture {
     }
   }
 
+
   /**
     @method waitingStop
   */

addon/utils/slot.js

@@ -153,7 +153,7 @@ export default class Slot {
 
     if (node.isDestroyed || node.isDestroying) { return; }
 
-    node.$().css({ width: '', height: '', transform: '' }).height();
+    node.$().css({ width: '', height: '', transform: '' });
   }
 
   /**
@@ -164,15 +164,15 @@ export default class Slot {
 
     if (node.isDestroyed || node.isDestroying) { return; }
 
-    node.$().css('transition', 'none').height();
+    node.$().css('transition', 'none');
   }
 
   thaw() {
     let { node } = this;
 
     if (node.isDestroyed || node.isDestroying) { return; }
 
-    node.$().css('transition', '').height();
+    node.$().css('transition', '');
   }
 
   /**

addon/utils/transition-duration.js

@@ -11,6 +11,7 @@ export default function transitionDuration(el) {
   $(el).height(); // force re-flow
 
   let value = $(el).css('transition');
+  if (value === null || value === undefined) return 0;
   let match = value.match(/(all|transform) ([\d\.]+)([ms]*)/);
 
   if (match) {

addon/utils/transitionend.js

@@ -1,6 +1,9 @@
 // Thanks to http://davidwalsh.name/css-animation-callback
 
 function whichTransitionEvent() {
+  if (typeof document === "undefined") {
+    return "";
+  };
   var t;
   var el = document.createElement('fake-element');
   var transitions = {

package.json

@@ -43,9 +43,8 @@
     "sortable"
   ],
   "dependencies": {
-    "ember-cli-babel": "^5.1.5",
-    "ember-cli-htmlbars": "^1.0.1",
-    "ember-new-computed": "^1.0.2"
+    "ember-cli-babel": "^6.6.0",
+    "ember-cli-htmlbars": "^1.0.1"
   },
   "ember-addon": {
     "configPath": "tests/dummy/config",