NEW: ComponentList (ongoing)

NEW: compile scripts on project load

app/core/app.js

@@ -92,7 +92,8 @@ var app = angular.module('scarlett', dependencies)
 		TAB_CHANGED: "onTabChanged",
 		WINDOW_ADDED: "onWindowAdded",
 		WINDOW_REMOVED: "onWindowRemoved",
-		SCRIPT_OPEN: "onScriptOpen"
+		SCRIPT_OPEN: "onScriptOpen",
+		SCRIPTS_COMPILED: "onScriptsCompiled"
 	},
 	RENDER_EXTENSIONS: {
 		GRID: "gridExt"

app/index.html

@@ -116,6 +116,7 @@
     <script type="text/javascript" src="templates/sceneHierarchy/sceneHierarchyCtrl.js"></script>
     <script type="text/javascript" src="templates/propertyEditor/editors/filepathCtrl.js"></script>
     <script type="text/javascript" src="templates/propertyEditor/editors/colorCtrl.js"></script>
+    <script type="text/javascript" src="templates/propertyEditor/extensions/componentListCtrl.js"></script>
     <script type="text/javascript" src="templates/contentBrowser/contentBrowserCtrl.js"></script>
     <script type="text/javascript" src="templates/atlasEditor/atlasEditorCtrl.js"></script>
     <script type="text/javascript" src="pages/main/partials/navbarCtrl.js"></script>

app/services/sceneSvc.js

@@ -118,7 +118,7 @@ app.factory("sceneSvc", function ($rootScope, constants, gameSvc, scarlettSvc, $
      * @param path
      */
     svc.loadSceneFromFile = function (path) {
-        var defer = $q.defer();
+        let defer = $q.defer();
 
         NativeInterface.readFile(path, function (result) {
             if (result === false) {
@@ -163,7 +163,7 @@ app.factory("sceneSvc", function ($rootScope, constants, gameSvc, scarlettSvc, $
             return;
         }
 
-        var parent = null;
+        let parent = null;
 
         // is there any object selected? if so, we will add it as a child (if it's only one)
         if (svc._selectedObjects.length === 1) {
@@ -184,8 +184,8 @@ app.factory("sceneSvc", function ($rootScope, constants, gameSvc, scarlettSvc, $
      */
     svc.removeGameObjectsFromScene = function (gameObjects) {
         function recursive(array, toDelete) {
-            for (var i = array.length - 1; i >= 0; i--) {
-                var idx = toDelete.indexOfObject(array[i]);
+            for (let i = array.length - 1; i >= 0; i--) {
+                let idx = toDelete.indexOfObject(array[i]);
 
                 if (idx >= 0) {
                     // announce the removal:
@@ -230,7 +230,7 @@ app.factory("sceneSvc", function ($rootScope, constants, gameSvc, scarlettSvc, $
             return [];
         }
 
-        var arr = [];
+        let arr = [];
         svc._selectedObjects.forEach(function (obj) {
             arr.push(obj.getUID());
         });

app/services/scriptsSvc.js

@@ -81,12 +81,18 @@ app.factory("scriptsSvc", function ($rootScope, $q, constants, gameSvc, scarlett
 				}
 			});
 
+			EventManager.emit(constants.EVENTS.SCRIPTS_COMPILED);
+
 			defer.resolve(true);
 		});
 
 		return defer.promise;
     };
 
+	svc.getUserScripts = function() {
+		return svc._userScripts;
+	};
+
 	/*
 	 *
 	 * @param scriptText
@@ -138,5 +144,12 @@ app.factory("scriptsSvc", function ($rootScope, $q, constants, gameSvc, scarlett
         EventManager.emit(constants.EVENTS.SCRIPT_OPEN, path);
     };
 
+	(() => {
+		$rootScope.$on(constants.EVENTS.PROJECT_LOADED, () => {
+			// every time a new project is loaded flush and compile project scripts:
+			svc.compileScripts();
+		});
+	})();
+
     return svc;
 });

app/styles/theme-base/_propertyEditor.scss

@@ -213,5 +213,55 @@
       }
     }
   }
+
+  .componentList {
+    font-size: 0.8em;
+    padding: 0 10px;
+
+    .sourceContainer {
+      background: map_get($default-colors, fade-white);
+      border-bottom-right-radius: 4px;
+      border-bottom-left-radius: 4px;
+      color: map_get($default-colors, grey-hound);
+
+      .items {
+        max-height: 250px;
+        overflow: auto;
+
+        .item {
+          padding: 4px;
+        }
+
+        .item:last-child {
+          border-bottom-right-radius: 4px;
+          border-bottom-left-radius: 4px;
+        }
+
+        .item.active:hover {
+          cursor: pointer;
+          background: darken(map_get($default-colors, fade-white), 5);
+        }
+      }
+    }
+
+    input[type=text] {
+      outline: none;
+      width: 100%;
+      background: transparent;
+      border: none;
+      padding: 4px;
+      border-bottom: 1px solid map_get($default-colors, dim-white);
+    }
+
+    button {
+      font-size: 1.15em;
+    }
+
+    button.active {
+      background: darken(map_get($default-colors, fade-white), 4);
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
 }
 

app/templates/propertyEditor/editors/colorCtrl.js

@@ -12,7 +12,7 @@ app.controller('ColorCtrl', ['$scope', 'logSvc', 'config', 'scarlettSvc', 'const
         };
 
         let updateColor = function (property, colorValue) {
-            if ($scope.color[property] == undefined || colorValue == undefined) {
+            if ($scope.color[property] === undefined || colorValue === undefined) {
                 return;
             }
 

app/templates/propertyEditor/extensions/componentList.html

@@ -0,0 +1,25 @@
+<div class="componentList" ng-controller="ComponentListCtrl">
+    <!-- add component button -->
+    <button ng-click="toggleCollapsed()" ng-class="{'active': !model.isCollapsed}" type="submit" class="btn btn-ghost btn-block">
+        <i class="fa fa-plus-circle"></i> {{ 'LABEL_ADD_COMPONENT' | translate }}
+    </button>
+
+    <div class="sourceContainer" ng-show="!model.isCollapsed">
+
+        <!-- search input -->
+        <input ng-model="model.searchValue" placeholder="{{'COMMON_SEARCH' | translate}}.." type="text">
+
+        <div class="items">
+            <!-- when no components are available -->
+            <div ng-show="model.source.length === 0" class="item" style="text-align: center;">No Components Available</div>
+
+            <!-- when components are available -->
+            <div ng-show="model.source.length > 0" class="item active" ng-click="onItemClicked(componentName)"
+                 ng-repeat="componentName in model.source | filter: model.searchValue | orderBy: 'toString()'">
+                <i class="fa fa-cube" aria-hidden="true"></i> {{componentName}}
+            </div>
+        </div>
+
+    </div>
+
+</div>

app/templates/propertyEditor/extensions/componentListCtrl.js

@@ -0,0 +1,40 @@
+app.controller('ComponentListCtrl', ['$scope', 'logSvc', 'config', 'scarlettSvc', 'scriptsSvc',
+	function ($scope, logSvc, config, scarlettSvc, scriptsSvc) {
+
+		$scope.model = {
+			isCollapsed: true,
+			searchValue: "",
+			source: []
+		};
+
+		$scope.toggleCollapsed = () => {
+			$scope.model.isCollapsed = !$scope.model.isCollapsed;
+		};
+
+		$scope.updateSource = () => {
+			$scope.model.source = Object.keys(scriptsSvc.getUserScripts());
+		};
+
+		$scope.onItemClicked = (componentName) => {
+			alert(componentName);
+		};
+
+		$scope.onScriptsCompiled = () => {
+			// update source:
+			$scope.updateSource();
+		};
+
+		$scope.$on("$destroy", () => {
+			EventManager.removeSubscription(AngularHelper.constants.EVENTS.SCRIPTS_COMPILED, $scope.onScriptsCompiled);
+		});
+
+		(() => {
+			// init ...
+			$scope.updateSource();
+
+			// subscribe to scripts compiled event so whenever there is a script compilation the source is updated
+			EventManager.subscribe(AngularHelper.constants.EVENTS.SCRIPTS_COMPILED, $scope.onScriptsCompiled, this);
+
+		})();
+	}
+]);

app/templates/propertyEditor/propertyEditor.html

@@ -30,10 +30,7 @@
 
             <!-- game object selection specific actions -->
             <div ng-if="isGameObjectSelection()">
-                <!-- add component button -->
-                <button type="submit" class="btn btn-ghost btn-block">
-                    <i class="fa fa-plus-circle"></i> &nbsp;{{ 'LABEL_ADD_COMPONENT' | translate }}
-                </button>
+                <div ng-include="'templates/propertyEditor/extensions/componentList.html'"></div>
             </div>
 
         </div>

app/templates/propertyEditor/propertyEditorCtrl.js

@@ -285,6 +285,10 @@ app.controller('PropertyEditorCtrl', ['$scope', 'logSvc', 'constants',
             return unifiedContainers
         }
 
+        $scope.getTargets = function() {
+            return $scope.model.targets;
+        };
+
         $scope.onGameObjectSelectionChanged = function(selected) {
             $scope.setTargets(selected, true);
         };