Browse Source

Work on the create component and create script template system to add a dropdown to select which template to use based on a JSON config file. Added TypeScript templates for component and script.

Shaddock Heath 9 years ago
parent
commit
a78b16251e

+ 8 - 3
Resources/EditorData/AtomicEditor/editor/ui/resourcecreatecomponent.tb.txt

@@ -1,10 +1,15 @@
 TBLayout: axis: y, distribution: gravity, position: left
-	TBLayout: 
+	TBLayout:
 		TBTextField: text: "Component Name:"
 		TBEditField: id: component_name, autofocus: 1
 			lp: min-width: 180
 	TBSeparator: gravity: left right, skin: AESeparator
-	TBLayout: 
+	TBLayout: distribution: gravity
+		TBTextField: text: "Component Template:"
+		TBLayout: gravity: left right, distribution-position: right bottom
+			TBSelectDropdown: id: template_list
+				lp: min-width: 240
+	TBSeparator: gravity: left right, skin: AESeparator
+	TBLayout:
 		TBButton: text: Create, id: create
 		TBButton: text: Cancel, id: cancel
-		

+ 7 - 3
Resources/EditorData/AtomicEditor/editor/ui/resourcecreatescript.tb.txt

@@ -1,10 +1,14 @@
 TBLayout: axis: y, distribution: gravity, position: left
-	TBLayout: 
+	TBLayout:
 		TBTextField: text: "Script Name:"
 		TBEditField: id: script_name, autofocus: 1
 			lp: min-width: 180
+	TBLayout: distribution: gravity
+		TBTextField: text: "Script Template:"
+		TBLayout: gravity: left right, distribution-position: right bottom
+			TBSelectDropdown: id: template_list
+				lp: min-width: 240
 	TBSeparator: gravity: left right, skin: AESeparator
-	TBLayout: 
+	TBLayout:
 		TBButton: text: Create, id: create
 		TBButton: text: Cancel, id: cancel
-		

+ 28 - 0
Resources/EditorData/AtomicEditor/templates/file_template_definitions.json

@@ -0,0 +1,28 @@
+{
+    "component": [{
+        "name": "Basic (JavaScript)",
+        "desc": "An empty component for JavaScript",
+        "templateType": "component",
+        "ext": ".js",
+        "filename": "AtomicEditor/templates/template_component.js"
+    }, {
+        "name": "Basic (TypeScript)",
+        "desc": "An empty component for TypeScript",
+        "templateType": "component",
+        "ext": ".ts",
+        "filename": "AtomicEditor/templates/template_ts_component.ts"
+    }],
+    "script": [{
+        "name": "Basic (JavaScript)",
+        "desc": "An empty script for JavaScript",
+        "templateType": "script",
+        "ext": ".js",
+        "filename": "AtomicEditor/templates/template_script.js"
+    }, {
+        "name": "Basic (TypeScript)",
+        "desc": "An empty script for TypeScript",
+        "templateType": "script",
+        "ext": ".ts",
+        "filename": "AtomicEditor/templates/template_ts_script.ts"
+    }]
+}

+ 30 - 0
Resources/EditorData/AtomicEditor/templates/template_ts_component.ts

@@ -0,0 +1,30 @@
+"atomic component";
+
+/**
+ * A new component
+ */
+class Component extends Atomic.JSComponent {
+
+    /**
+     * Fields witihin the inspectorFields object will be exposed to the editor
+     */
+    inspectorFields = {
+    };
+
+    /**
+     * Called when the component is first added to the node
+     */
+    start() {
+
+    }
+
+    /**
+     * Update called every cycle with timeStep containing the delta between calls
+     * @param timeStep time since last call to update
+     */
+    update(timeStep: number) {
+
+    }
+}
+
+export = Component;

+ 3 - 0
Resources/EditorData/AtomicEditor/templates/template_ts_script.ts

@@ -0,0 +1,3 @@
+
+// Atomic Script
+

+ 17 - 0
Script/AtomicEditor/resources/ProjectTemplates.ts

@@ -95,3 +95,20 @@ export function getExampleProjectTemplateDefinitions(): [ProjectTemplateDefiniti
     });
     return exampleJson.examples;
 }
+
+/**
+ * Return an array of all of the file type templates for the provided file type
+ * @param  {string} fileTemplateType
+ * @return {[FileTemplateDefinition]}
+ */
+export function GetNewFileTemplateDefinitions(fileTemplateType: Editor.Templates.TemplateType) : Editor.Templates.FileTemplateDefinition[] {
+    const templateDefinitions = "AtomicEditor/templates/file_template_definitions.json";
+    const file = Atomic.cache.getFile(templateDefinitions);
+
+    if (!file) {
+        return [];
+    }
+
+    const templates = JSON.parse(file.readText());
+    return templates[fileTemplateType] || [];
+}

+ 4 - 4
Script/AtomicEditor/resources/ResourceOps.ts

@@ -69,7 +69,7 @@ export function CreateNewFolder(resourcePath: string, reportError: boolean = tru
 
 }
 
-export function CreateNewComponent(resourcePath: string, componentName: string, reportError: boolean = true): boolean {
+export function CreateNewComponent(resourcePath: string, componentName: string, template: Editor.Templates.FileTemplateDefinition, reportError: boolean = true): boolean {
 
     var title = "New Component Error";
 
@@ -82,7 +82,7 @@ export function CreateNewComponent(resourcePath: string, componentName: string,
 
     }
 
-    var templateFilename = "AtomicEditor/templates/template_component.js";
+    var templateFilename = template.filename;
     var file = Atomic.cache.getFile(templateFilename);
 
     if (!file) {
@@ -109,7 +109,7 @@ export function CreateNewComponent(resourcePath: string, componentName: string,
 
 }
 
-export function CreateNewScript(resourcePath: string, scriptName: string, reportError: boolean = true): boolean {
+export function CreateNewScript(resourcePath: string, scriptName: string, template: Editor.Templates.FileTemplateDefinition, reportError: boolean = true): boolean {
 
     var title = "New Script Error";
 
@@ -122,7 +122,7 @@ export function CreateNewScript(resourcePath: string, scriptName: string, report
 
     }
 
-    var templateFilename = "AtomicEditor/templates/template_script.js";
+    var templateFilename = template.filename;
     var file = Atomic.cache.getFile(templateFilename);
 
     if (!file) {

+ 82 - 20
Script/AtomicEditor/ui/modal/UIResourceOps.ts

@@ -24,6 +24,7 @@ import EditorEvents = require("editor/EditorEvents");
 import EditorUI = require("../EditorUI");
 import ModalWindow = require("./ModalWindow");
 import ResourceOps = require("resources/ResourceOps");
+import ProjectTemplates = require("resources/ProjectTemplates");
 
 export class ResourceDelete extends ModalWindow {
 
@@ -139,6 +140,24 @@ export class CreateComponent extends ModalWindow {
         this.resourcePath = resourcePath;
         this.init("New Component", "AtomicEditor/editor/ui/resourcecreatecomponent.tb.txt");
         this.nameField = <Atomic.UIEditField>this.getWidget("component_name");
+        this.templateField = <Atomic.UISelectDropdown>this.getWidget("template_list");
+        this.loadTemplatesList();
+    }
+
+    /**
+     *
+     * Gets the template definitions and loads it up
+     */
+    loadTemplatesList() {
+        this.templates = ProjectTemplates.GetNewFileTemplateDefinitions("component");
+        this.templateFieldSource.clear();
+
+        this.templates.forEach( template => {
+            this.templateFieldSource.addItem(new Atomic.UISelectItem(template.name));
+        });
+
+        this.templateField.source = this.templateFieldSource;
+        this.templateField.value = 0;
     }
 
     handleWidgetEvent(ev: Atomic.UIWidgetEvent) {
@@ -151,21 +170,31 @@ export class CreateComponent extends ModalWindow {
 
                 var componentName = this.nameField.text;
                 var outputFile = Atomic.addTrailingSlash(this.resourcePath) + componentName;
+                let selectedTemplate : Editor.Templates.FileTemplateDefinition = null;
+                this.templates.forEach(t => {
+                    if (t.name == this.templateField.text) {
+                        selectedTemplate = t;
+                    }
+                });
 
-                // Check to see if we have a file extension.  If we don't then assume .js
-                if (outputFile.indexOf(".") == -1) {
-                    outputFile += ".js";
-                }
+                if (selectedTemplate) {
+                    // Check to see if we have a file extension.  If we don't then use the one defined in the template
+                    if (outputFile.indexOf(".") == -1) {
+                        outputFile += selectedTemplate.ext;
+                    }
 
-                if (ResourceOps.CreateNewComponent(outputFile, componentName)) {
+                    if (ResourceOps.CreateNewComponent(outputFile, componentName, selectedTemplate)) {
 
-                    this.hide();
+                        this.hide();
 
-                    this.sendEvent(EditorEvents.EditResource, { path: outputFile });
+                        this.sendEvent(EditorEvents.EditResource, { path: outputFile });
 
-                }
+                    }
 
-                return true;
+                    return true;
+                } else {
+                    return false;
+                }
 
             }
 
@@ -180,8 +209,11 @@ export class CreateComponent extends ModalWindow {
 
     }
 
+    templates: Editor.Templates.FileTemplateDefinition[];
     resourcePath: string;
     nameField: Atomic.UIEditField;
+    templateField: Atomic.UISelectDropdown;
+    templateFieldSource: Atomic.UISelectItemSource = new Atomic.UISelectItemSource();
 
 }
 
@@ -192,8 +224,26 @@ export class CreateScript extends ModalWindow {
         super();
 
         this.resourcePath = resourcePath;
-        this.init("New Script", "AtomicEditor/editor/ui/resourcecreatecomponent.tb.txt");
-        this.nameField = <Atomic.UIEditField>this.getWidget("component_name");
+        this.init("New Script", "AtomicEditor/editor/ui/resourcecreatescript.tb.txt");
+        this.nameField = <Atomic.UIEditField>this.getWidget("script_name");
+        this.templateField = <Atomic.UISelectDropdown>this.getWidget("template_list");
+        this.loadTemplatesList();
+    }
+
+    /**
+     *
+     * Gets the template definitions and loads it up
+     */
+    loadTemplatesList() {
+        this.templates = ProjectTemplates.GetNewFileTemplateDefinitions("script");
+        this.templateFieldSource.clear();
+
+        this.templates.forEach( template => {
+            this.templateFieldSource.addItem(new Atomic.UISelectItem(template.name));
+        });
+
+        this.templateField.source = this.templateFieldSource;
+        this.templateField.value = 0;
     }
 
     handleWidgetEvent(ev: Atomic.UIWidgetEvent) {
@@ -206,23 +256,32 @@ export class CreateScript extends ModalWindow {
 
                 var scriptName = this.nameField.text;
                 var outputFile = Atomic.addTrailingSlash(this.resourcePath) + scriptName;
+                let selectedTemplate : Editor.Templates.FileTemplateDefinition = null;
+                this.templates.forEach(t => {
+                    if (t.name == this.templateField.text) {
+                        selectedTemplate = t;
+                    }
+                });
 
-                // Check to see if we have a file extension.  If we don't then assume .js
-                if (outputFile.indexOf(".") == -1) {
-                    outputFile += ".js";
-                }
+                if (selectedTemplate) {
+                    // Check to see if we have a file extension.  If we don't then use the one defined in the template
+                    if (outputFile.indexOf(".") == -1) {
+                        outputFile += selectedTemplate.ext;
+                    }
 
+                    if (ResourceOps.CreateNewScript(outputFile, scriptName, selectedTemplate)) {
 
-                if (ResourceOps.CreateNewScript(outputFile, scriptName)) {
+                        this.hide();
 
-                    this.hide();
+                        this.sendEvent(EditorEvents.EditResource, { path: outputFile });
 
-                    this.sendEvent(EditorEvents.EditResource, { path: outputFile });
+                    }
 
+                    return true;
+                } else {
+                    return false;
                 }
 
-                return true;
-
             }
 
             if (id == "cancel") {
@@ -236,8 +295,11 @@ export class CreateScript extends ModalWindow {
 
     }
 
+    templates: Editor.Templates.FileTemplateDefinition[];
     resourcePath: string;
     nameField: Atomic.UIEditField;
+    templateField: Atomic.UISelectDropdown;
+    templateFieldSource: Atomic.UISelectItemSource = new Atomic.UISelectItemSource();
 
 }
 

+ 19 - 0
Script/TypeScript/EditorWork.d.ts

@@ -148,6 +148,25 @@ declare module Editor.EditorEvents {
     }
 }
 
+declare module Editor.Templates {
+    export type TemplateType = "component" | "script";
+    /**
+     * New file defintion
+     */
+    export interface FileTemplateDefinition {
+        /** name to display in the dropdown */
+        name: string;
+        /** description */
+        desc: string;
+        /** type of template */
+        templateType: TemplateType;
+        /** file extension */
+        ext: string;
+        /** file name/path of the source templage file to clone from.  Note, needs to be in the atomic cache */
+        filename: string;
+    }
+}
+
 declare module Editor.Extensions {
 
     /**