added an example of building a custom editor

EditorPluginExample/Resources/EditorData/TSExample.plugin.js

@@ -1,8 +1,43 @@
-/// <reference path="../../typings/Atomic/Atomic.d.ts" />
 "use strict";
 var ExamplePluginUILabel = "TS Example Plugin";
 var ExamplePluginTBPath = "EditorData/Example.tb.txt";
 var InfoboxTBPath = "EditorData/Infobox.tb.txt";
+var CustomEditorBuilder = (function () {
+    function CustomEditorBuilder() {
+    }
+    CustomEditorBuilder.prototype.canHandleResource = function (resourcePath) {
+        return resourcePath.indexOf("custom.editor.txt") > 0;
+    };
+    CustomEditorBuilder.prototype.getNormalizedPath = function (path) {
+        var RESOURCES_MARKER = "resources/";
+        return path.substring(path.toLowerCase().indexOf(RESOURCES_MARKER));
+    };
+    CustomEditorBuilder.prototype.getEditor = function (resourceFrame, resourcePath, tabContainer) {
+        var _this = this;
+        var editorUrl = "atomic://" + ToolCore.toolSystem.project.resourcePath + "EditorData/customEditor.html";
+        console.log(editorUrl);
+        var editor = new Editor.JSResourceEditor(resourcePath, tabContainer, editorUrl);
+        editor.subscribeToEvent("WebViewLoadEnd", function (data) {
+            editor.unsubscribeFromEvent("WebViewLoadEnd");
+            var webClient = editor.webView.webClient;
+            webClient.executeJavaScript("HOST_loadCode(\"atomic://" + _this.getNormalizedPath(editor.fullPath) + "\");");
+        });
+        editor.subscribeToEvent("DeleteResourceNotification", function (data) {
+            var webClient = editor.webView.webClient;
+            webClient.executeJavaScript("HOST_resourceDeleted(\"atomic://" + _this.getNormalizedPath(data.path) + "\");");
+        });
+        editor.subscribeToEvent("UserPreferencesChangedNotification", function (data) {
+            var prefsPath = ToolCore.toolSystem.project.userPrefsFullPath;
+            if (Atomic.fileSystem.fileExists(prefsPath)) {
+                var webClient = editor.webView.webClient;
+                webClient.executeJavaScript("HOST_loadPreferences(\"atomic://" + prefsPath + "\");");
+            }
+        });
+        return editor;
+    };
+    return CustomEditorBuilder;
+}());
+var customEditorBuilder = new CustomEditorBuilder();
 var TSExamplePluginService = (function () {
     function TSExamplePluginService() {
         var _this = this;
@@ -43,6 +78,7 @@ var TSExamplePluginService = (function () {
         this.serviceLocator.uiServices.removeProjectContextMenuItemSource(ExamplePluginUILabel);
         this.serviceLocator.uiServices.removeHierarchyContextMenuItemSource(ExamplePluginUILabel);
         this.serviceLocator.uiServices.removePluginMenuItemSource(ExamplePluginUILabel);
+        this.serviceLocator.uiServices.unregisterCustomEditor(customEditorBuilder);
         Atomic.print("TSExamplePluginService.projectUnloaded");
         if (this.serviceLocator) {
             this.serviceLocator.projectServices.unregister(this);
@@ -55,6 +91,7 @@ var TSExamplePluginService = (function () {
         this.serviceLocator.uiServices.createHierarchyContextMenuItemSource(ExamplePluginUILabel, { "Get name": ["tsexampleplugin hierarchy context"] });
         this.serviceLocator.uiServices.createProjectContextMenuItemSource(ExamplePluginUILabel, { "Get name": ["tsexampleplugin project context"] });
         this.totalUses = this.serviceLocator.projectServices.getUserPreference(this.name, "UsageCount", 0);
+        this.serviceLocator.uiServices.registerCustomEditor(customEditorBuilder);
     };
     TSExamplePluginService.prototype.playerStarted = function () {
         Atomic.print("TSExamplePluginService.playerStarted");

EditorPluginExample/Resources/EditorData/TSExample.plugin.ts

@@ -4,6 +4,66 @@ const ExamplePluginUILabel = "TS Example Plugin";
 const ExamplePluginTBPath = "EditorData/Example.tb.txt";
 const InfoboxTBPath = "EditorData/Infobox.tb.txt";
 
+class CustomEditorBuilder implements Editor.Extensions.ResourceEditorBuilder {
+
+        /**
+         * Returns true if this builder can generate an editor for this resource type
+         */
+        canHandleResource(resourcePath: string) {
+            return resourcePath.indexOf("custom.editor.txt") > 0;
+        }
+
+        /**
+         * Full path is the fully qualified path from the root of the filesystem.  In order to take advantage
+         * of the resource caching system, let's trim it down to just the path inside the resources directory
+         * including the Resources directory so that the casing is correct
+         */
+        private getNormalizedPath(path: string) {
+            const RESOURCES_MARKER = "resources/";
+            return path.substring(path.toLowerCase().indexOf(RESOURCES_MARKER));
+        }
+
+        /**
+         * Generates a resource editor for the provided resource type
+         * @param  resourcePath
+         * @param  tabContainer
+         */
+        getEditor(resourceFrame: Atomic.UIWidget, resourcePath: string, tabContainer: Atomic.UITabContainer) : Editor.ResourceEditor {
+
+            // point to a custom page
+            const editorUrl = "atomic://" + ToolCore.toolSystem.project.resourcePath + "EditorData/customEditor.html";
+            console.log(editorUrl);
+            const editor = new Editor.JSResourceEditor(resourcePath, tabContainer, editorUrl);
+
+            // one time subscriptions waiting for the web view to finish loading.  This event
+            // actually hits the editor instance before we can hook it, so listen to it on the
+            // frame and then unhook it
+            editor.subscribeToEvent("WebViewLoadEnd", (data) => {
+                editor.unsubscribeFromEvent("WebViewLoadEnd");
+
+                const webClient = editor.webView.webClient;
+                webClient.executeJavaScript(`HOST_loadCode("atomic://${this.getNormalizedPath(editor.fullPath)}");`);
+            });
+
+            editor.subscribeToEvent("DeleteResourceNotification", (data) => {
+                const webClient = editor.webView.webClient;
+                webClient.executeJavaScript(`HOST_resourceDeleted("atomic://${this.getNormalizedPath(data.path)}");`);
+            });
+
+            editor.subscribeToEvent("UserPreferencesChangedNotification", (data) => {
+                let prefsPath = ToolCore.toolSystem.project.userPrefsFullPath;
+                if (Atomic.fileSystem.fileExists(prefsPath)) {
+                    // Get a reference to the web client so we can call the load preferences method
+                    const webClient = editor.webView.webClient;
+                    webClient.executeJavaScript(`HOST_loadPreferences("atomic://${prefsPath}");`);
+                }
+            });
+
+            return editor;
+        }
+}
+const customEditorBuilder = new CustomEditorBuilder();
+
 class TSExamplePluginService implements Editor.HostExtensions.HostEditorService, Editor.HostExtensions.ProjectServicesEventListener, Editor.HostExtensions.UIServicesEventListener {
 
     name: string = "TSExampleService";
@@ -31,6 +91,7 @@ class TSExamplePluginService implements Editor.HostExtensions.HostEditorService,
         this.serviceLocator.uiServices.removeProjectContextMenuItemSource(ExamplePluginUILabel);
         this.serviceLocator.uiServices.removeHierarchyContextMenuItemSource(ExamplePluginUILabel);
         this.serviceLocator.uiServices.removePluginMenuItemSource(ExamplePluginUILabel);
+        this.serviceLocator.uiServices.unregisterCustomEditor(customEditorBuilder);
 
         Atomic.print("TSExamplePluginService.projectUnloaded");
         if (this.serviceLocator) {
@@ -44,6 +105,7 @@ class TSExamplePluginService implements Editor.HostExtensions.HostEditorService,
         this.serviceLocator.uiServices.createHierarchyContextMenuItemSource(ExamplePluginUILabel, { "Get name" : ["tsexampleplugin hierarchy context"]});
         this.serviceLocator.uiServices.createProjectContextMenuItemSource(ExamplePluginUILabel, { "Get name" : ["tsexampleplugin project context"]});
         this.totalUses = this.serviceLocator.projectServices.getUserPreference(this.name, "UsageCount", 0);
+        this.serviceLocator.uiServices.registerCustomEditor(customEditorBuilder);
     }
     playerStarted() {
         Atomic.print("TSExamplePluginService.playerStarted");

EditorPluginExample/Resources/EditorData/customEditor.html

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <title>Editor</title>
+</head>
+
+<body>
+
+    <h1>Custom Editor Instance</h1>
+    <p>This is an example of creating a custom editor.  You can edit the text below and if you hit save, it will replace the source file.</p>
+    <textarea id="source" rows="10" cols="80"></textarea>
+
+    <script>
+        var code;
+
+        //get a reference to the element
+        var txt = document.getElementById("source");
+        txt.addEventListener("input", (event) => {
+            atomicQueryPromise("editorChange");
+        });
+
+        /**
+         * Promise version of atomic query
+         * @param  {string} message the query to use to pass to atomicQuery.  If there is no payload, this will be passed directly, otherwise it will be passed in a data object
+         * @param  {any} payload optional data to send
+         * @return {Promise}
+         */
+        function atomicQueryPromise(message) {
+            return new Promise(function(resolve, reject) {
+                var queryMessage = message;
+
+                // if message is coming in as an object then let's stringify it
+                if (typeof (message) != "string") {
+                    queryMessage = JSON.stringify(message);
+                }
+
+                window.atomicQuery({
+                    request: queryMessage,
+                    persistent: false,
+                    onSuccess: resolve,
+                    onFailure: (error_code, error_message) => reject({ error_code: error_code, error_message: error_message })
+                });
+            });
+        }
+
+        /**
+         * Queries the host for a particular resource and returns it in a promise
+         * @param  {string} codeUrl
+         * @return {Promise}
+         */
+        function getResource(codeUrl) {
+            return new Promise(function(resolve, reject) {
+                var xmlHttp = new XMLHttpRequest();
+                xmlHttp.onreadystatechange = () => {
+                    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
+                        resolve(xmlHttp.responseText);
+                    }
+                };
+                xmlHttp.open("GET", codeUrl, true); // true for asynchronous
+                xmlHttp.send(null);
+            });
+        }
+
+        // Functions exposed to the host editor.  These
+        // are hooked in here so that they are available immediately from the host
+        // and when called will bring in the interop as a promise and call it once
+        // it has been loaded
+        function HOST_loadCode(url) {
+            getResource(url).then((code)=>{
+                txt.value = code;
+            });
+        }
+
+        function HOST_saveCode() {
+            atomicQueryPromise({
+                message: "editorSaveCode",
+                payload: txt.value
+            });
+        }
+
+        function HOST_resourceRenamed(path, newPath) {
+            alert("Resource Renamed: " + path + "->" + newPath);
+        }
+
+        function HOST_resourceDeleted(path) {
+            alert("Resource Deleted: " + path);
+        }
+
+        function HOST_loadPreferences(prefUrl) {
+            alert("Prefs Changed: " + prefUrl);
+        }
+    </script>
+
+</body>
+
+</html>

EditorPluginExample/Resources/Scripts/custom.editor.txt

@@ -0,0 +1,4 @@
+# this is a file that will be loaded into a custom editor
+this is a change
+
+

EditorPluginExample/Resources/Scripts/custom.editor.txt.asset

@@ -0,0 +1,5 @@
+{
+	"version": 1,
+	"guid": "fa08111fb2e263d4e7792e7188d76e65",
+	"TextImporter": {}
+}

EditorPluginExample/UserPrefs.json

@@ -0,0 +1,8 @@
+{
+   "lastBuildPath": "",
+   "snapTransX": 1,
+   "snapTransY": 1,
+   "snapTransZ": 1,
+   "snapRotation": 15,
+   "snapScale": 0.1
+}