Completely decouple ProjectView from Project.

src/core/PaperScope.js

@@ -19,27 +19,18 @@
  * global paper object, which simply is a pointer to the currently active scope.
  */
 var PaperScope = this.PaperScope = Base.extend({
-	beans: true,
 
 	initialize: function(id) {
 		this.project = null;
 		this.projects = [];
+		this.view = null;
+		this.views = [];
+		this.tool = null;
 		this.tools = [];
 		this.id = id;
 		PaperScope._scopes[id] = this;
 	},
 
-	/**
-	 * A short-cut to the currently active view of the active project.
-	 */
-	getView: function() {
-		return this.project.activeView;
-	},
-
-	getViews: function() {
-		return this.project.views;
-	},
-
 	evaluate: function(code) {
 		return PaperScript.evaluate(code, this);
 	},
@@ -60,9 +51,12 @@ var PaperScope = this.PaperScope = Base.extend({
 	},
 
 	clear: function() {
-		// Remove all projects and tools.
+		// Remove all projects, views and tools.
 		for (var i = this.projects.length - 1; i >= 0; i--)
 			this.projects[i].remove();
+		// This also removes the installed event handlers.
+		for (var i = this.views.length - 1; i >= 0; i--)
+			this.views[i].remove();
 		for (var i = this.tools.length - 1; i >= 0; i--)
 			this.tools[i].remove();
 	},

src/core/PaperScript.js

@@ -137,11 +137,12 @@ var PaperScript = this.PaperScript = new function() {
 			// so the active project is defined.
 			var canvas = code.getAttribute('canvas');
 			if (canvas = canvas && document.getElementById(canvas)) {
-				// Create a Project for this canvas, using the right scope
+				// Create an empty Project for this scope, and a view for the
+				// canvas, both using the right paper scope
 				paper = scope;
-				// XXX: Do not pass canvas to Project.
-				// Create ProjectView here instead.
-				new Project(canvas);
+				new Project();
+				// Activate the newly created view straight away
+				new ProjectView(canvas).activate();
 			}
 			if (code.src) {
 				// If we're loading from a source, request that first and then
@@ -154,7 +155,7 @@ var PaperScript = this.PaperScript = new function() {
 		}
 //#endif // BROWSER
 		var proj = scope.project,
-			view = proj.activeView,
+			view = scope.view,
 			// TODO: Add support for multiple tools
 			tool = scope.tool = /on(?:Key|Mouse)(?:Up|Down|Move|Drag)/.test(code)
 					&& new Tool(null, scope),

src/project/Project.js

@@ -17,8 +17,8 @@
 var Project = this.Project = Base.extend({
 	beans: true,
 
-	// XXX: Add arguments to define pages, but do not pass canvas here
-	initialize: function(canvas) {
+	// TODO: Add arguments to define pages
+	initialize: function() {
 		// Store reference to the currently active global paper scope:
 		this._scope = paper;
 		// Push it onto this._scope.projects and set index:
@@ -27,10 +27,8 @@ var Project = this.Project = Base.extend({
 		// Layer and DoumentView constructors.
 		this.activate();
 		this.layers = [];
-		this.views = [];
 		this.symbols = [];
 		this.activeLayer = new Layer();
-		this.activeView = canvas ? new ProjectView(canvas) : null;
 		this._selectedItems = {};
 		this._selectedItemCount = 0;
 		this._currentStyle = PathStyle.create(null);
@@ -55,9 +53,6 @@ var Project = this.Project = Base.extend({
 	remove: function() {
 		var res = Base.splice(this._scope.projects, null, this._index, 1);
 		this._scope = null;
-		// Remove all views. This also removes the installed event handlers.
-		for (var i = this.views.length - 1; i >= 0; i--)
-			this.views[i].remove();
 		return !!res.length;
 	},
 
@@ -130,8 +125,10 @@ var Project = this.Project = Base.extend({
 		}
 	},
 
+	/**
+	 * @deprecated
+	 */
 	redraw: function() {
-		for (var i = 0, l = this.views.length; i < l; i++)
-			this.views[i].draw();
+		this._scope.view.draw();
 	}
 });

src/project/ProjectView.js

@@ -21,12 +21,10 @@ var ProjectView = this.ProjectView = Base.extend({
 	// Find a good name for these bounds, since #bounds is already the artboard
 	// bounds of the visible area.
 	initialize: function(canvas) {
-		// To go with the convention of never passing project to constructors,
-		// in all items, associate the view with the currently active project.
-		this._project = paper.project;
-		this._scope = this._project._scope;
+		// Associate this view with the active paper scope.
+		this._scope = paper;
 		// Push it onto project.views and set index:
-		this._index = this._project.views.push(this) - 1;
+		this._index = this._scope.views.push(this) - 1;
 		// Handle canvas argument
 		var size;
 		if (canvas && canvas instanceof HTMLCanvasElement) {
@@ -90,10 +88,6 @@ var ProjectView = this.ProjectView = Base.extend({
 			ProjectView.focused = this;
 	},
 
-	getProject: function() {
-		return this._project;
-	},
-
 	getViewBounds: function() {
 		return this._viewBounds;
 	},
@@ -170,20 +164,20 @@ var ProjectView = this.ProjectView = Base.extend({
 		this._context.clearRect(bounds._x, bounds._y,
 				// TODO: +1... what if we have multiple views in one canvas? 
 				bounds._width + 1, bounds._height + 1);
-		this._project.draw(this._context);
+		// Just draw the active project for now
+		this._scope.project.draw(this._context);
 	},
 
 	activate: function() {
-		this._project.activeView = this;
+		this._scope.view = this;
 	},
 
 	remove: function() {
-		var res = Base.splice(this._project.views, null, this._index, 1);
+		var res = Base.splice(this._scope.views, null, this._index, 1);
 		// Uninstall event handlers again for this view.
 		DomEvent.remove(this._canvas, this._events);
-		this._project = this._scope = this._canvas = this._events = null;
 		// Clearing _onFrame makes the frame handler stop automatically.
-		this._onFrame = null;
+		this._scope = this._canvas = this._events = this._onFrame = null;
 		return !!res.length;
 	},