Fixes #580 where resizable views were only taking into account their offset from the top left of the viewport.

.gitignore

@@ -1 +1,2 @@
 .DS_Store
+build/zip

dist/paper-core.js

@@ -9,7 +9,7 @@
  *
  * All rights reserved.
  *
- * Date: Sat Nov 22 09:01:01 2014 -0800
+ * Date: Tue Dec 2 22:31:20 2014 -0800
  *
  ***
  *
@@ -219,10 +219,8 @@ var Base = new function() {
 						|| ctor.name === 'Object');
 			},
 
-			pick: function() {
-				for (var i = 0, l = arguments.length; i < l; i++)
-					if (arguments[i] !== undefined)
-						return arguments[i];
+			pick: function(a, b) {
+				return a !== undefined ? a : b;
 			}
 		}
 	});
@@ -257,6 +255,10 @@ Base.inject({
 			}, []).join(', ') + ' }';
 	},
 
+	getClassName: function() {
+		return this._class || '';
+	},
+
 	exportJSON: function(options) {
 		return Base.exportJSON(this, options);
 	},
@@ -2833,10 +2835,6 @@ var Item = Base.extend(Emitter, {
 		return this._id;
 	},
 
-	getClassName: function() {
-		return this._class;
-	},
-
 	getName: function() {
 		return this._name;
 	},
@@ -5361,6 +5359,7 @@ var SegmentPoint = Point.extend({
 
 var Curve = Base.extend({
 	_class: 'Curve',
+
 	initialize: function Curve(arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7) {
 		var count = arguments.length;
 		if (count === 3) {
@@ -10321,31 +10320,30 @@ var View = Base.extend(Emitter, {
 			userDrag: none,
 			tapHighlightColor: 'rgba(0,0,0,0)'
 		});
-		if (PaperScope.hasAttribute(element, 'resize')) {
-			var offset = DomElement.getOffset(element, true),
-				that = this;
-			size = DomElement.getViewportBounds(element)
-					.getSize().subtract(offset);
-			this._windowEvents = {
-				resize: function() {
-					if (!DomElement.isInvisible(element))
-						offset = DomElement.getOffset(element, true);
-					that.setViewSize(DomElement.getViewportBounds(element)
-							.getSize().subtract(offset));
+
+			var getCanvasSize = function() {
+				size = DomElement.getSize(element);
+				if (size.isNaN() || size.isZero()) {
+					var getSize = function(name) {
+						return element[name]
+								|| parseInt(element.getAttribute(name), 10);
+					};
+					size = new Size(getSize('width'), getSize('height'));
 				}
+				return size;
 			};
-			DomEvent.add(window, this._windowEvents);
-		} else {
-			size = DomElement.getSize(element);
-			if (size.isNaN() || size.isZero()) {
-				var getSize = function(name) {
-					return element[name]
-							|| parseInt(element.getAttribute(name), 10);
+
+			this._resizable = PaperScope.hasAttribute(element, 'resize');
+			if (this._resizable) {
+				var that = this;
+				this._windowEvents = {
+					resize: function() {
+						that.setViewSize(getCanvasSize());
+					}
 				};
-				size = new Size(getSize('width'), getSize('height'));
+				DomEvent.add(window, this._windowEvents);
 			}
-		}
-		this._setViewSize(size);
+			this._setViewSize(getCanvasSize());
 		if (PaperScope.hasAttribute(element, 'stats')
 				&& typeof Stats !== 'undefined') {
 			this._stats = new Stats();
@@ -10759,11 +10757,13 @@ var CanvasView = View.extend({
 			style = element.style;
 		element.width = width * pixelRatio;
 		element.height = height * pixelRatio;
-		if (pixelRatio !== 1) {
-			style.width = width + 'px';
-			style.height = height + 'px';
-			this._context.scale(pixelRatio, pixelRatio);
-		}
+			if (pixelRatio !== 1) {
+				if (this._resizable === false) {
+					style.width = width + 'px';
+					style.height = height + 'px';
+				}
+				this._context.scale(pixelRatio, pixelRatio);
+			}
 	},
 
 	getPixelSize: function(size) {
@@ -11735,11 +11735,11 @@ new function() {
 					scale = decomposed.scaling;
 				if (trans && !trans.isZero())
 					parts.push('translate(' + formatter.point(trans) + ')');
-				if (angle)
-					parts.push('rotate(' + formatter.number(angle) + ')');
 				if (!Numerical.isZero(scale.x - 1)
 						|| !Numerical.isZero(scale.y - 1))
 					parts.push('scale(' + formatter.point(scale) +')');
+				if (angle)
+					parts.push('rotate(' + formatter.number(angle) + ')');
 				attrs.transform = parts.join(' ');
 			} else {
 				attrs.transform = 'matrix(' + matrix.getValues().join(',') + ')';

dist/paper-full.js

@@ -9,7 +9,7 @@
  *
  * All rights reserved.
  *
- * Date: Sat Nov 22 09:01:01 2014 -0800
+ * Date: Tue Dec 2 22:31:20 2014 -0800
  *
  ***
  *
@@ -219,10 +219,8 @@ var Base = new function() {
 						|| ctor.name === 'Object');
 			},
 
-			pick: function() {
-				for (var i = 0, l = arguments.length; i < l; i++)
-					if (arguments[i] !== undefined)
-						return arguments[i];
+			pick: function(a, b) {
+				return a !== undefined ? a : b;
 			}
 		}
 	});
@@ -257,6 +255,10 @@ Base.inject({
 			}, []).join(', ') + ' }';
 	},
 
+	getClassName: function() {
+		return this._class || '';
+	},
+
 	exportJSON: function(options) {
 		return Base.exportJSON(this, options);
 	},
@@ -2833,10 +2835,6 @@ var Item = Base.extend(Emitter, {
 		return this._id;
 	},
 
-	getClassName: function() {
-		return this._class;
-	},
-
 	getName: function() {
 		return this._name;
 	},
@@ -5361,6 +5359,7 @@ var SegmentPoint = Point.extend({
 
 var Curve = Base.extend({
 	_class: 'Curve',
+
 	initialize: function Curve(arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7) {
 		var count = arguments.length;
 		if (count === 3) {
@@ -10321,31 +10320,30 @@ var View = Base.extend(Emitter, {
 			userDrag: none,
 			tapHighlightColor: 'rgba(0,0,0,0)'
 		});
-		if (PaperScope.hasAttribute(element, 'resize')) {
-			var offset = DomElement.getOffset(element, true),
-				that = this;
-			size = DomElement.getViewportBounds(element)
-					.getSize().subtract(offset);
-			this._windowEvents = {
-				resize: function() {
-					if (!DomElement.isInvisible(element))
-						offset = DomElement.getOffset(element, true);
-					that.setViewSize(DomElement.getViewportBounds(element)
-							.getSize().subtract(offset));
+
+			var getCanvasSize = function() {
+				size = DomElement.getSize(element);
+				if (size.isNaN() || size.isZero()) {
+					var getSize = function(name) {
+						return element[name]
+								|| parseInt(element.getAttribute(name), 10);
+					};
+					size = new Size(getSize('width'), getSize('height'));
 				}
+				return size;
 			};
-			DomEvent.add(window, this._windowEvents);
-		} else {
-			size = DomElement.getSize(element);
-			if (size.isNaN() || size.isZero()) {
-				var getSize = function(name) {
-					return element[name]
-							|| parseInt(element.getAttribute(name), 10);
+
+			this._resizable = PaperScope.hasAttribute(element, 'resize');
+			if (this._resizable) {
+				var that = this;
+				this._windowEvents = {
+					resize: function() {
+						that.setViewSize(getCanvasSize());
+					}
 				};
-				size = new Size(getSize('width'), getSize('height'));
+				DomEvent.add(window, this._windowEvents);
 			}
-		}
-		this._setViewSize(size);
+			this._setViewSize(getCanvasSize());
 		if (PaperScope.hasAttribute(element, 'stats')
 				&& typeof Stats !== 'undefined') {
 			this._stats = new Stats();
@@ -10759,11 +10757,13 @@ var CanvasView = View.extend({
 			style = element.style;
 		element.width = width * pixelRatio;
 		element.height = height * pixelRatio;
-		if (pixelRatio !== 1) {
-			style.width = width + 'px';
-			style.height = height + 'px';
-			this._context.scale(pixelRatio, pixelRatio);
-		}
+			if (pixelRatio !== 1) {
+				if (this._resizable === false) {
+					style.width = width + 'px';
+					style.height = height + 'px';
+				}
+				this._context.scale(pixelRatio, pixelRatio);
+			}
 	},
 
 	getPixelSize: function(size) {
@@ -11735,11 +11735,11 @@ new function() {
 					scale = decomposed.scaling;
 				if (trans && !trans.isZero())
 					parts.push('translate(' + formatter.point(trans) + ')');
-				if (angle)
-					parts.push('rotate(' + formatter.number(angle) + ')');
 				if (!Numerical.isZero(scale.x - 1)
 						|| !Numerical.isZero(scale.y - 1))
 					parts.push('scale(' + formatter.point(scale) +')');
+				if (angle)
+					parts.push('rotate(' + formatter.number(angle) + ')');
 				attrs.transform = parts.join(' ');
 			} else {
 				attrs.transform = 'matrix(' + matrix.getValues().join(',') + ')';

dist/paper-node.js

@@ -9,7 +9,7 @@
  *
  * All rights reserved.
  *
- * Date: Sat Nov 22 09:01:01 2014 -0800
+ * Date: Tue Dec 2 22:31:20 2014 -0800
  *
  ***
  *
@@ -219,10 +219,8 @@ var Base = new function() {
 						|| ctor.name === 'Object');
 			},
 
-			pick: function() {
-				for (var i = 0, l = arguments.length; i < l; i++)
-					if (arguments[i] !== undefined)
-						return arguments[i];
+			pick: function(a, b) {
+				return a !== undefined ? a : b;
 			}
 		}
 	});
@@ -247,6 +245,10 @@ Base.inject({
 			}, []).join(', ') + ' }';
 	},
 
+	getClassName: function() {
+		return this._class || '';
+	},
+
 	exportJSON: function(options) {
 		return Base.exportJSON(this, options);
 	},
@@ -2802,10 +2804,6 @@ var Item = Base.extend(Emitter, {
 		return this._id;
 	},
 
-	getClassName: function() {
-		return this._class;
-	},
-
 	getName: function() {
 		return this._name;
 	},
@@ -5345,6 +5343,7 @@ var SegmentPoint = Point.extend({
 
 var Curve = Base.extend({
 	_class: 'Curve',
+
 	initialize: function Curve(arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7) {
 		var count = arguments.length;
 		if (count === 3) {
@@ -10480,11 +10479,13 @@ var CanvasView = View.extend({
 			style = element.style;
 		element.width = width * pixelRatio;
 		element.height = height * pixelRatio;
-		if (pixelRatio !== 1) {
-			style.width = width + 'px';
-			style.height = height + 'px';
-			this._context.scale(pixelRatio, pixelRatio);
-		}
+			if (pixelRatio !== 1) {
+				if (this._resizable === false) {
+					style.width = width + 'px';
+					style.height = height + 'px';
+				}
+				this._context.scale(pixelRatio, pixelRatio);
+			}
 	},
 
 	getPixelSize: function(size) {
@@ -11075,11 +11076,11 @@ new function() {
 					scale = decomposed.scaling;
 				if (trans && !trans.isZero())
 					parts.push('translate(' + formatter.point(trans) + ')');
-				if (angle)
-					parts.push('rotate(' + formatter.number(angle) + ')');
 				if (!Numerical.isZero(scale.x - 1)
 						|| !Numerical.isZero(scale.y - 1))
 					parts.push('scale(' + formatter.point(scale) +')');
+				if (angle)
+					parts.push('rotate(' + formatter.number(angle) + ')');
 				attrs.transform = parts.join(' ');
 			} else {
 				attrs.transform = 'matrix(' + matrix.getValues().join(',') + ')';

src/view/CanvasView.js

@@ -68,13 +68,17 @@ var CanvasView = View.extend(/** @lends CanvasView# */{
         // Upscale the canvas if the two ratios don't match.
         element.width = width * pixelRatio;
         element.height = height * pixelRatio;
-        if (pixelRatio !== 1) {
-            style.width = width + 'px';
-            style.height = height + 'px';
-            // Now scale the context to counter the fact that we've manually
-            // scaled our canvas element.
-            this._context.scale(pixelRatio, pixelRatio);
-        }
+    		if (pixelRatio !== 1) {
+          // If the canvas is resizable then don't override it otherwise
+          // give it fixed dimensions so it doesn't get resized.
+    			if (this._resizable === false) {
+    				style.width = width + 'px';
+    				style.height = height + 'px';
+    			}
+          // Now scale the context to counter the fact that we've manually
+          // scaled our canvas element.
+    			this._context.scale(pixelRatio, pixelRatio);
+    		}
     },
 
     /**

src/view/View.js

@@ -52,48 +52,43 @@ var View = Base.extend(Emitter, /** @lends View# */{
             userDrag: none,
             tapHighlightColor: 'rgba(0,0,0,0)'
         });
-        // If the element has the resize attribute, resize the it to fill the
-        // window and resize it again whenever the user resizes the window.
-        if (PaperScope.hasAttribute(element, 'resize')) {
-            // Subtract element' viewport offset from the total size, to
-            // stretch it in
-            var offset = DomElement.getOffset(element, true),
-                that = this;
-            size = DomElement.getViewportBounds(element)
-                    .getSize().subtract(offset);
-            this._windowEvents = {
-                resize: function() {
-                    // Only update element offset if it's not invisible, as
-                    // otherwise the offset would be wrong.
-                    if (!DomElement.isInvisible(element))
-                        offset = DomElement.getOffset(element, true);
-                    // Set the size now, which internally calls onResize
-                    // and redraws the view
-                    that.setViewSize(DomElement.getViewportBounds(element)
-                            .getSize().subtract(offset));
-                }
-            };
-            DomEvent.add(window, this._windowEvents);
-        } else {
-            // Try visible size first, since that will help handling previously
-            // scaled canvases (e.g. when dealing with pixel-ratio)
-            size = DomElement.getSize(element);
-            if (size.isNaN() || size.isZero()) {
-                // If the element is invisible, we cannot directly access
-                // element.width / height, because they would appear 0.
-                // Reading the attributes should still work.
-                var getSize = function(name) {
-                    return element[name]
-                            || parseInt(element.getAttribute(name), 10);
-                };
-                size = new Size(getSize('width'), getSize('height'));
-            }
-        }
+
+    		var getCanvasSize = function() {
+          // Try visible size first, since that will help handling previously
+          // scaled canvases (e.g. when dealing with pixel-ratio)
+    			size = DomElement.getSize(element);
+    			if (size.isNaN() || size.isZero()) {
+            // If the element is invisible, we cannot directly access
+            // element.width / height, because they would appear 0.
+            // Reading the attributes should still work.
+    				var getSize = function(name) {
+    					return element[name]
+    							|| parseInt(element.getAttribute(name), 10);
+    				};
+    				size = new Size(getSize('width'), getSize('height'));
+    			}
+    			return size;
+    		};
+
+        // If the element has the resize attribute, listen to resize events and
+        // update its coordinate space accordingly
+    		this._resizable = PaperScope.hasAttribute(element, 'resize');
+    		if (this._resizable) {
+    			var that = this;
+    			this._windowEvents = {
+    				resize: function() {
+              // setViewSize is aware of a resizable canvas and only updates the
+              // coordinate space based on the physical dimensions and pixel ratio
+    					that.setViewSize(getCanvasSize());
+    				}
+    			};
+    			DomEvent.add(window, this._windowEvents);
+    		}
         // Set canvas size even if we just deterined the size from it, since
         // it might have been set to a % size, in which case it would use some
         // default internal size (300x150 on WebKit) and scale up the pixels.
         // We also need this call here for HiDPI support.
-        this._setViewSize(size);
+    		this._setViewSize(getCanvasSize());
         // TODO: Test this on IE:
         if (PaperScope.hasAttribute(element, 'stats')
                 && typeof Stats !== 'undefined') {