MPIDE-29: decouple editor model from home page

Editor instances now track their own model, and the page can support
multiple editor instances. There is a layout service exposing the
GoldenLayout object, allowing our menu to add/remove windows as needed.

src/web/components/editor/editor.js

@@ -55,9 +55,7 @@ function($window, $q) {
 function($timeout, parser) {
 	return {
 		restrict: "E",
-		scope: {
-			model: "=editorModel",
-		},
+		scope: {},
 		controller: "EditorCtrl",
 		controllerAs: "ctrl",
 		templateUrl: "components/editor/editor.html",

src/web/components/layout/layout.js

@@ -9,9 +9,34 @@ angular.module("modellang-ide.components.layout", [
 	// deps go here
 ])
 
+.service("LayoutService",
+function() {
+	this.goldenLayout;
+
+	this.setLayout = function(config, element) {
+		this.goldenLayout = new GoldenLayout(config, element);
+	};
+
+	this.addComponent = function(type) {
+		var newComponent = {
+			type: "component",
+			title: type,
+			componentName: "angularTemplate",
+			componentState: {
+				template: "<" + type + "/>",
+			},
+		};
+
+		if (this.goldenLayout.selectedItem)
+			this.goldenLayout.selectedItem.addChild(newComponent);
+		else
+			angular.noop();
+	};
+})
+
 .directive("layout", [
-"$window", "$compile",
-function($window, $compile) {
+"$window", "$compile", "LayoutService",
+function($window, $compile, Layout) {
 	return {
 		restrict: "E",
 		scope: true,
@@ -29,23 +54,23 @@ function($window, $compile) {
 				dimensions: scope.model.dimensions,
 				content: scope.model.data,
 			};
-			scope.goldenLayout = new GoldenLayout(scope.goldenLayoutConfig, element);
+			Layout.setLayout(scope.goldenLayoutConfig, element);
 			Object.keys(scope.templates).forEach(function(tmplName) {
 				var tmpl = scope.templates[tmplName];
-				scope.goldenLayout.registerComponent(tmplName, function(container, state) {
+				Layout.goldenLayout.registerComponent(tmplName, function(container, state) {
 					var element = container.getElement();
 					element.html(tmpl);
 					$compile(element.contents())(scope.$parent);
 				});
 			});
-			scope.goldenLayout.registerComponent("angularTemplate", function createAngularTemplate(container, state) {
+			Layout.goldenLayout.registerComponent("angularTemplate", function createAngularTemplate(container, state) {
 				var element = container.getElement();
 				element.html(state.template);
 				if (typeof state.template === "string") {
 					$compile(element.contents())(scope.$parent);
 				}
 			});
-			scope.goldenLayout.init();
+			Layout.goldenLayout.init();
 
 			scope.$watch(
 				function getDimensions() {
@@ -56,7 +81,7 @@ function($window, $compile) {
 				},
 				function onDimensionsChanged(dim, oldDim) {
 					if (!dim) return;
-					scope.goldenLayout.updateSize(dim.w, dim.h);
+					Layout.goldenLayout.updateSize(dim.w, dim.h);
 				},
 				true //deep
 			);

src/web/components/menu/menu.html

@@ -19,8 +19,9 @@
                         File <span class="caret"></span>
                     </a>
                     <ul class="dropdown-menu" role="menu">
-                        <li><a ng-click="pageCtrl.open()">Open ...</a></li>
-                        <li><a ng-click="ctrl.save()">Save</a></li>
+                        <li><a ng-click="new('editor')">New</a></li>
+                        <li><a ng-click="open()">Open</a></li>
+                        <li><a ng-click="save()">Save</a></li>
                     </ul>
                 </li>
             </ul>

src/web/components/menu/menu.js

@@ -1,7 +1,7 @@
 "use strict";
 
-angular.module("modellang-ide.components.menu",
-[//deps
+angular.module("modellang-ide.components.menu", [
+	"modellang-ide.components.layout",
 ])
 
 .directive("menu", function() {
@@ -17,8 +17,10 @@ angular.module("modellang-ide.components.menu",
 })
 
 .controller("MenuCtrl",
-["$scope",
-function($scope) {
-
+["$scope", "$compile", "LayoutService",
+function($scope, $compile, Layout) {
+	$scope.new = function (component) { Layout.addComponent(component); };
+	$scope.open = function() {};
+	$scope.save = function() {};
 },
 ]);

src/web/pages/home/home.html

@@ -4,7 +4,8 @@
 		options: {
 			settings: {
 				showPopoutIcon: false,
-				showCloseIcon: false,
+				showCloseIcon: true,
+				selectionEnabled: true,
 			},
 		},
 	}"
@@ -13,8 +14,8 @@
 	<layout-row>
 
 		<layout-column layout-options="{width:10}">
-			<layout-content layout-options="{title:'Schema Tree'}">
-				<p><b>TODO:</b> Schemas</p>
+			<layout-content layout-options="{title:'File Tree'}">
+				<p><b>TODO:</b> Files</p>
 			</layout-content>
 		</layout-column>
 
@@ -23,7 +24,7 @@
 			<layout-content layout-options="{title:'Edit'}">
 				<editor
 					editor-model="editorModel"
-				/></editor>
+				></editor>
 			</layout-content>
 
 

src/web/pages/home/home.js

@@ -19,94 +19,5 @@ angular.module("modellang-ide.home", [
 .controller("HomeCtrl",
 ["$scope", "$compile",
 function($scope, $compile) {
-
-	$scope.editorModel = {
-		data: //TODO: remove this and move elsewhere very soon
-		"// line comment\n" +
-		"\n" +
-		"/* this is a\n" +
-		" * a block comment\n" +
-		" */\n" +
-		"\n" +
-		"\n" +
-		"// Example 1: car race scenarios\n" +
-		"SCHEMA ex1_car_race\n" +
-		"ROOT car_race:  {+ driving_a_car +};\n" +
-		"driving_a_car:  go_straight (* ( go_straight | turn_left | turn_right ) *) stop;\n" +
-		"go_straight:    ( accelerate | decelerate | cruise );\n" +
-		"\n" +
-		"\n" +
-		"// Example 2: Simple pipe/filter architecture pattern\n" +
-		"SCHEMA ex2_simple_message_flow\n" +
-		"ROOT Task_A: (* send *);\n" +
-		"ROOT Task_B: (* receive *);\n" +
-		"COORDINATE (* $x: send *) FROM Task_A, (* $y: receive *) FROM Task_B\n" +
-		"                                                            ADD $x PRECEDES $y;\n" +
-		"\n" +
-		"\n" +
-		"// Example 3. Data items as behaviors. Data flow.\n" +
-		"SCHEMA Data_flow\n" +
-		"ROOT Process_1: (* work write *);\n" +
-		"ROOT Process_2: (* ( read | work ) *);\n" +
-		"ROOT File: (* write *) (* read *);\n" +
-		"Process_1, File SHARE ALL write;\n" +
-		"Process_2, File SHARE ALL read;\n" +
-		"\n" +
-		"\n" +
-		"// Example 4. Stack behavior\n" +
-		"SCHEMA Stack\n" +
-		"ROOT Stack_operation: (* ( push | pop) *);\n" +
-		"SATISFIES FOREACH $x: pop FROM Stack_operation\n" +
-		"              ( Number_of (pop) before ($x) < Number_of (push) before ($x) );\n" +
-		"\n" +
-		"\n" +
-		"// Example 5 (from the PDF)\n" +
-		"SCHEMA Two_stacks_in_use\n" +
-		"INCLUDE Stack;\n" +
-		"ROOT Main: {* (do_something | use_S1 | use_S2) *};\n" +
-		" use_S1:   (push | pop);\n" +
-		" use_S2:   (push | pop);\n" +
-		"ROOT S1:   (* use_S1 *);\n" +
-		"ROOT S2:   (* use_S2 *);\n" +
-		"\n" +
-		"S1, Main SHARE ALL use_S1;\n" +
-		"S2, Main SHARE ALL use_S2;\n" +
-		"\n" +
-		"\n" +
-		"// Example 6. Components and connectors\n" +
-		"SCHEMA Buffered_transaction\n" +
-		"ROOT Task_A:: (* Send *);\n" +
-		"ROOT Task_B:: (* Receive *);\n" +
-		"ROOT Buffered_channel: {* (Send [ Receive ] ) *} (Overflow | Normal);\n" +
-		"\n" +
-		"Task_A, Buffered_channel SHARE ALL Send;\n" +
-		"Task_B, Buffered_channel SHARE ALL Receive;\n" +
-		"\n" +
-		"SATISFIES FOREACH $x: Receive FROM Buffered_channel\n" +
-		"   ( Number_of (Send) before ($x) - Number_of (Receive) before ($x) ) <= max_buffer_size;\n" +
-		"SATISFIES FOREACH $x: Overflow FROM Buffered_channel\n" +
-		"   ( Number_of (Send) before ($x) - Number_of (Receive) before ($x) ) > max_buffer_size;\n" +
-		"SATISFIES FOREACH $x: Normal FROM Buffered_channel\n" +
-		"   ( Number_of (Send) before ($x) - Number_of (Receive) before ($x) ) <= max_buffer_size;\n" +
-		"\n" +
-		"\n" +
-		"//TODO: Example 7\n" +
-		"//TODO: Example 8\n" +
-		"//TODO: Example 9\n" +
-		"//TODO: Example 10\n" +
-		"//TODO: Example 11\n" +
-		"//TODO: Example 12\n" +
-		"//TODO: Example 13\n" +
-		"//TODO: Example 14\n" +
-		"//TODO: Example 15\n" +
-		"\n"
-	};
-
-	$scope.menus = "File";
-
-	$scope.save = function() {
-		localStorage.setItem("code", $scope.editor.doc.getValue());
-	};
-
 },
 ]);