sproutcore 1.10.3.1 → 1.11.0.rc1

data/lib/frameworks/sproutcore/frameworks/core_foundation/views/view/animation.js

@@ -3,7 +3,6 @@
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 sc_require("views/view");
-sc_require("views/view/layout_style");
 
 /** @private
   Properties that can be animated
@@ -83,6 +82,9 @@ SC.LayoutState = {
 SC.View.reopen(
   /** @scope SC.View.prototype */ {
 
+  /** @private Shared object used to avoid continually initializing/destroying objects. */
+  _SC_DECOMPOSED_TRANSFORM_MAP: null,
+
   /* @private Internal variable to store the active (i.e. applied) animations. */
   _activeAnimations: null,
 
@@ -291,20 +293,20 @@ SC.View.reopen(
 
     // In the case of zero duration, just adjust and call the callback.
     if (options.duration === 0) {
+      this.invokeNext(function () {
         this.adjust(hash);
-        this.runAnimationCallback(options, null, NO);
+        this.runAnimationCallback(options, null, false);
+      });
       return this;
     }
 
-    // In the case that the view is not in the standard visible state, don't animate.
+    // In the case that the view is not in the standard visible state, adjust instead of animate.
     if (!this.get('isVisibleInWindow')) {
-      //@if(debug)
-      SC.warn("Developer Warning: SC.View:animate() was called on %@ which is not visible in the window. The animation will be cancelled.".fmt(this));
-      //@endif
-
       this.invokeNext(function () {
         this.adjust(hash);
-        this.runAnimationCallback(options, null, true); // Cancelled
+        this.runAnimationCallback(options, null);
+        // Note: we may need to find a way to alert the callback that the animation was successful
+        // but instantaneous.
       });
       return this;
     }
@@ -336,10 +338,10 @@ SC.View.reopen(
     // Handle old style rotation.
     if (!SC.none(hash.rotate)) {
       //@if(debug)
-      SC.Logger.warn('Developer Warning: Please animate rotateX instead of rotate.');
+      SC.Logger.warn('Developer Warning: Please animate rotateZ instead of rotate.');
       //@endif
-      if (SC.none(hash.rotateX)) {
-        hash.rotateX = hash.rotate;
+      if (SC.none(hash.rotateZ)) {
+        hash.rotateZ = hash.rotate;
       }
       delete hash.rotate;
     }
@@ -443,26 +445,26 @@ SC.View.reopen(
     @returns {SC.View} receiver
   */
   // TODO: Do this using CSS animations instead.
-  _animateFrames: function (frames, callback, initialDelay, count) {
-    // Normalize the private argument `count`.
-    if (SC.none(count)) { count = 0; }
+  _animateFrames: function (frames, callback, initialDelay, _sc_frameCount) {
+    // Normalize the private argument `_sc_frameCount`.
+    if (SC.none(_sc_frameCount)) { _sc_frameCount = 0; }
 
-    var frame = frames[count];
+    var frame = frames[_sc_frameCount];
 
     this.animate(frame.value, {
       delay: initialDelay,
       duration: frame.duration,
       timing: frame.timing
     }, function (data) {
-      count += 1;
+      _sc_frameCount += 1;
 
       // Keep iterating while frames exist and the animations weren't cancelled.
-      if (!data.isCancelled && count < frames.length) {
+      if (!data.isCancelled && _sc_frameCount < frames.length) {
         // Only delay on the first animation.  Increase count to the next frame.
-        this._animateFrames(frames, callback, 0, count);
+        this._animateFrames(frames, callback, 0, _sc_frameCount);
       } else {
         // Done.
-        callback(data);
+        if (callback) callback(data);
       }
     });
 
@@ -574,6 +576,77 @@ SC.View.reopen(
     }
   },
 
+  /** @private Decompose a transformation matrix. */
+  // TODO: Add skew support
+  _sc_decompose3DTransformMatrix: function (matrix, expectsScale) {
+    var ret = SC.View._SC_DECOMPOSED_TRANSFORM_MAP,  // Shared object used to avoid continually initializing/destroying
+      toDegrees = 180 / Math.PI;
+      // determinant;
+
+    // Create the decomposition map once. Note: This is a shared object, all properties must be overwritten each time.
+    if (!ret) { ret = SC.View._SC_DECOMPOSED_TRANSFORM_MAP = {}; }
+
+    // Calculate the scale.
+    if (expectsScale) {
+      ret.scaleX = Math.sqrt((matrix.m11 * matrix.m11) + (matrix.m12 * matrix.m12) + (matrix.m13 * matrix.m13));
+      // if (matrix.m11 < 0) ret.scaleX = ret.scaleX * -1;
+      ret.scaleY = Math.sqrt((matrix.m21 * matrix.m21) + (matrix.m22 * matrix.m22) + (matrix.m23 * matrix.m23));
+      ret.scaleZ = Math.sqrt((matrix.m31 * matrix.m31) + (matrix.m32 * matrix.m32) + (matrix.m33 * matrix.m33));
+
+      // Decompose scale from the matrix.
+      matrix = matrix.scale(1 / ret.scaleX, 1 / ret.scaleY, 1 / ret.scaleZ);
+    } else {
+      ret.scaleX = 1;
+      ret.scaleY = 1;
+      ret.scaleZ = 1;
+    }
+
+    // console.log("scales: %@, %@, %@".fmt(ret.scaleX, ret.scaleY, ret.scaleZ));
+
+    // Find the 3 Euler angles. Note the order applied using SC.CSS_TRANSFORM_NAMES in layout_style.js.
+    ret.rotateZ = -Math.atan2(matrix.m21, matrix.m11) * toDegrees; // Between -180° and 180°
+    // ret.rotateY = Math.atan2(-matrix.m31, Math.sqrt((matrix.m32 * matrix.m32) + (matrix.m33 * matrix.m33))) * toDegrees;  // Between -90° and 90°
+    // ret.rotateX = Math.atan2(matrix.m32, matrix.m33) * toDegrees; // Between -180° and 180°
+
+    // console.log("rotations: %@, %@, %@".fmt(ret.rotateX, ret.rotateY, ret.rotateZ));
+
+    // if (ret.rotateX < 0) { ret.rotateX = 360 + ret.rotateX; } // Convert to 0° to 360°
+    // if (ret.rotateY < 0) { ret.rotateY = 180 + ret.rotateY; } // Convert to 0° to 180°
+    if (ret.rotateZ < 0) { ret.rotateZ = 360 + ret.rotateZ; } // Convert to 0° to 360°
+
+    // Pull out the translate values directly.
+    ret.translateX = matrix.m41;
+    ret.translateY = matrix.m42;
+    ret.translateZ = matrix.m43;
+
+    // console.log("translations: %@, %@, %@".fmt(ret.translateX, ret.translateY, ret.translateZ));
+
+    return ret;
+  },
+
+  /** @private Replace scientific E notation values with fixed decimal values. */
+  _sc_removeENotationFromMatrixString: function (matrixString) {
+    var components,
+      numbers,
+      ret;
+
+    components = matrixString.split(/\(|\)/);
+    numbers = components[1].split(',');
+    for (var i = 0, len = numbers.length; i < len; i++) {
+      var number = numbers[i],
+        value;
+
+      // Transform E notation into fixed decimal (20 is maximum allowed).
+      if (number.indexOf('e') > 0) {
+        numbers[i] = window.parseFloat(number).toFixed(20);
+      }
+    }
+
+    ret = components[0] + '(' + numbers.join(', ') + ')';
+
+    return ret;
+  },
+
   /** @private
     Returns the live values of the properties being animated on a view while it
     is animating.  Getting the layout of the view after a call to animate will
@@ -595,44 +668,92 @@ SC.View.reopen(
   */
   liveAdjustments: function () {
     var activeAnimations = this._activeAnimations,
-      jqueryEl = this.$(),
+      el = this.get('layer'),
       ret = {},
       transformKey = SC.browser.experimentalCSSNameFor('transform');
 
     if (activeAnimations) {
       for (var key in activeAnimations) {
+        var value = document.defaultView.getComputedStyle(el)[key];
+
+        // If a transform is being transitioned, decompose the matrices.
         if (key === transformKey) {
-          var matrix = jqueryEl.css(key),
-            CSSMatrixClass = SC.browser.experimentalNameFor(window, 'CSSMatrix');
+          var CSSMatrixClass = SC.browser.experimentalNameFor(window, 'CSSMatrix'),
+            matrix;
 
           if (CSSMatrixClass !== SC.UNSUPPORTED) {
-            matrix = new window[CSSMatrixClass](matrix);
 
-            // Calculate rotateX
-            ret.rotateX = Math.atan2(matrix.m32, matrix.m33) * (180 / Math.PI);
+            // Convert scientific E number representations to fixed numbers.
+            // In WebKit at least, these throw exceptions when used to generate the matrix. To test,
+            // paste the following in a browser console:
+            //    new WebKitCSSMatrix('matrix(-1, 1.22464679914735e-16, -1.22464679914735e-16, -1, 0, 0)')
+            value = this._sc_removeENotationFromMatrixString(value);
+            matrix = new window[CSSMatrixClass](value);
+
+            /* jshint eqnull:true */
+            var layout = this.get('layout'),
+              scaleLayout = layout.scale,
+              expectsScale = scaleLayout != null,
+              decomposition = this._sc_decompose3DTransformMatrix(matrix, expectsScale);
+
+            // The rotation decompositions aren't working properly, ignore them.
+            // Set rotateX.
+            // if (layout.rotateX != null) {
+            //   ret.rotateX = decomposition.rotateX;
+            // }
+
+            // // Set rotateY.
+            // if (layout.rotateY != null) {
+            //   ret.rotateY = decomposition.rotateY;
+            // }
+
+            // Set rotateZ.
+            if (layout.rotateZ != null) {
+              ret.rotateZ = decomposition.rotateZ;
+            }
 
-            // Calculate rotateY
-            ret.rotateY = Math.atan2(-matrix.m31, Math.sqrt(Math.pow(matrix.m32, 2) + Math.pow(matrix.m33, 2))) * (180 / Math.PI);
+            // Set scale.
+            if (expectsScale) {
+              // If the scale was set in the layout as an Array, return it as an Array.
+              if (SC.typeOf(scaleLayout) === SC.T_ARRAY) {
+                ret.scale = [decomposition.scaleX, decomposition.scaleY];
 
-            // Calculate rotateZ
-            ret.rotateZ = -Math.atan2(matrix.m21, matrix.m11) * (180 / Math.PI);
+              // If the scale was set in the layout as an Object, return it as an Object.
+              } else if (SC.typeOf(scaleLayout) === SC.T_HASH) {
+                ret.scale = { x: decomposition.scaleX, y: decomposition.scaleY };
 
-            // Calculate scaleX
-            ret.scale = Math.sqrt(Math.pow(matrix.m11, 2) + Math.pow(matrix.m12, 2) + Math.pow(matrix.m13, 2));
-            if (matrix.m11 < 0) ret.scale = ret.scale * -1;
+              // Return it as a single value.
+              } else {
+                ret.scale = decomposition.scaleX;
+              }
+            }
 
-            // Retrieve translateX & translateY
-            ret.left = matrix.e;
-            ret.top = matrix.f;
+            // Set top & left.
+            if (this.get('hasAcceleratedLayer')) {
+              ret.left = decomposition.translateX;
+              ret.top = decomposition.translateY;
+            }
           } else {
-            matrix = matrix.match(/^matrix\((.*)\)$/)[1].split(/,\s*/);
-            if (matrix) {
+            matrix = value.match(/^matrix\((.*)\)$/)[1].split(/,\s*/);
+            // If the view has translated position, retrieve translateX & translateY.
+            if (matrix && this.get('hasAcceleratedLayer')) {
               ret.left = parseInt(matrix[4], 10);
               ret.top = parseInt(matrix[5], 10);
             }
           }
+
+        // Determine the current style.
         } else {
-          ret[key] = parseInt(jqueryEl.css(key), 10);
+          value = window.parseInt(value, 10);
+
+          // Account for centerX & centerY animations (margin-left & margin-top).
+          if (key === 'centerX') {
+            value = value + parseInt(document.defaultView.getComputedStyle(el).width, 10) / 2; // Use the actual width.
+          } else if (key === 'centerY') {
+            value = value + parseInt(document.defaultView.getComputedStyle(el).height, 10) / 2; // Use the actual height.
+          }
+
+          ret[key] = value;
         }
       }
     }

data/lib/frameworks/sproutcore/frameworks/core_foundation/views/view/cursor.js

@@ -30,13 +30,6 @@ SC.View.reopen(
     return null;
   }.property('parentView', 'shouldInheritCursor').cacheable(),
 
-  applyAttributesToContext: function(original, context) {
-    var cursor = this.get('cursor');
-    if (cursor) { context.addClass(cursor.get('className')); }
-
-    original(context);
-  }.enhance(),
-
   /**
     A child view without a cursor of its own inherits its parent's cursor by
     default.  Set this to NO to prevent this behavior.

data/lib/frameworks/sproutcore/frameworks/core_foundation/views/view/design_mode.js

@@ -0,0 +1,206 @@
+// ==========================================================================
+// Project:   SproutCore
+// Copyright: @2012 7x7 Software, Inc.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+sc_require("views/view");
+
+// When in debug mode, developers can log the design mode.
+//@if (debug)
+SC.LOG_DESIGN_MODE = false;
+//@endif
+
+// The class names assigned to view elements depending on the current design
+// mode.
+SC.DESIGN_MODE_CLASS_NAMES = {
+  s: 'sc-small',
+  m: 'sc-medium',
+  l: 'sc-large',
+  xl: 'sc-xlarge'
+};
+
+/** @private This adds design modes support to SC.View. */
+SC.View.reopen(
+  /** @scope SC.View.prototype */ {
+
+  // ------------------------------------------------------------------------
+  // Properties
+  //
+
+  /**
+    The current design mode of the application and this view.
+
+    If the application has designModes specified, this property will be set
+    automatically when the view is created and as the window size changes
+    across the design mode boundaries.
+
+    @property {String}
+    @default null
+  */
+  designMode: null,
+
+  /**
+    The dynamic adjustments to apply to this view depending on the current
+    design mode.
+
+    If you specify designModes on the application, this hash will be checked
+    for a matching adjustment to apply for the current design mode.
+
+    @property {Object}
+    @default null
+  */
+  modeAdjust: null,
+
+  // ------------------------------------------------------------------------
+  // Methods
+  //
+
+  /** @private Recursively set the designMode on each child view. */
+  adjustChildDesignModes: function (lastDesignMode, designMode) {
+    var childViews = this.get('childViews');
+
+    var i, len = childViews.get('length');
+    for (i = 0; i < len; i++) {
+      var childView = childViews.objectAt(i);
+
+      childView.updateDesignMode(lastDesignMode, designMode);
+    }
+  },
+
+  /**
+    Updates the design mode for this view.
+
+    This method is called automatically by the view's pane whenever the pane
+    determines that the design mode, as specified in the pane's designModes
+    property, has changed.  You should likely never need to call it manually.
+
+    This method updates the designMode property of the view, adjusts
+    the layout if a matching design adjustment in the view's designAdjustments
+    property is found and adds a class name to the view for the current
+    design mode.
+
+    Note that updating the design mode also updates all child views of this
+    view.
+
+    @param {String} lastDesignMode the previously applied design mode
+    @param {String} [designMode] the name of the design mode
+   */
+  updateDesignMode: function (lastDesignMode, designMode) {
+    // Fast path.
+    if (lastDesignMode === designMode) { return; }
+
+    var classNames = this.get('classNames'),
+      modeAdjust,
+      elem,
+      key,
+      layer,
+      newProperties,
+      prevProperties,
+      size;
+
+    this.set('designMode', designMode);
+
+    // Get the size name portion of the mode.
+    if (designMode) {
+      size = designMode.split('_')[0];
+    }
+
+    modeAdjust = this.get('modeAdjust');
+    if (modeAdjust) {
+      // Stop observing changes for a moment.
+      this.beginPropertyChanges();
+
+      // Unset any previous properties.
+      prevProperties = this._originalProperties;
+      if (prevProperties) {
+        //@if(debug)
+        if (SC.LOG_DESIGN_MODE) {
+          SC.Logger.log('%@ — Removing previous design property overrides from "%@":'.fmt(this, lastDesignMode));
+        }
+        //@endif
+
+        for (key in prevProperties) {
+          //@if(debug)
+          if (SC.LOG_DESIGN_MODE) {
+            SC.Logger.log('  - Resetting %@ to %@'.fmt(key, prevProperties[key]));
+          }
+          //@endif
+          this.set(key, prevProperties[key]);
+        }
+
+        // Remove the cache.
+        this._originalProperties = null;
+      }
+
+      if (designMode) {
+        // Apply new properties. The orientation specific properties override the size properties.
+        if (modeAdjust[size] || modeAdjust[designMode]) {
+          newProperties = SC.merge(modeAdjust[size], modeAdjust[designMode]);
+
+          //@if(debug)
+          if (SC.LOG_DESIGN_MODE) {
+            SC.Logger.log('%@ — Applying design properties for "%@":'.fmt(this, designMode));
+          }
+          //@endif
+
+          // Cache the original properties for reset.
+          this._originalProperties = {};
+          for (key in newProperties) {
+            // Cache the original value for reset.
+            this._originalProperties[key] = this.get(key);
+
+            //@if(debug)
+            if (SC.LOG_DESIGN_MODE) {
+              SC.Logger.log('  - Setting %@: %@'.fmt(key, newProperties[key]));
+            }
+            //@endif
+
+            // Apply the override.
+            if (key === 'layout') {
+              this.adjust(newProperties[key]);
+            } else {
+              this.set(key, newProperties[key]);
+            }
+          }
+        }
+      }
+
+      // Resume observing.
+      this.endPropertyChanges();
+    }
+
+    // Apply the design mode as a class name.
+    // This is done here rather than through classNameBindings, because we can
+    // do it here without needing to setup a designMode observer for each view.
+    var designClass;
+    layer = this.get('layer');
+    if (layer) {
+      elem = this.$();
+
+      // If we had previously added a class to the element, remove it.
+      if (lastDesignMode) {
+        designClass = SC.DESIGN_MODE_CLASS_NAMES[lastDesignMode.split('_')[0]];
+        elem.removeClass(designClass);
+        classNames.removeObject(designClass);
+      }
+
+      // If necessary, add a new class.
+      if (designMode) {
+        designClass = SC.DESIGN_MODE_CLASS_NAMES[size];
+        elem.addClass(designClass);
+        classNames.push(designClass);
+      }
+    } else {
+      if (designMode) {
+        designClass = SC.DESIGN_MODE_CLASS_NAMES[size];
+        // Ensure that it gets into the classNames array
+        // so it is displayed when we render.
+        classNames.push(designClass);
+      }
+    }
+
+    // Set the designMode on each child view (may be null).
+    this.adjustChildDesignModes(lastDesignMode, designMode);
+  }
+
+});