Resurrecting modal window system in TS, dealing with TS lack of circular dependencies (for external modules)

Script/AtomicEditor/editor/Editor.ts

@@ -1,5 +1,5 @@
 
-import MainFrame = require("../ui/MainFrame");
+import EditorUI = require("../ui/EditorUI");
 import UIEvents = require("../ui/UIEvents");
 import AssetImport = require("../assets/AssetImport");
 
@@ -8,8 +8,6 @@ import EditorEvents = require("./EditorEvents");
 class Editor extends Atomic.ScriptObject {
 
     project: ToolCore.Project;
-    view: Atomic.UIView;
-    mainframe: MainFrame;
     assetImport: AssetImport;
 
     static instance: Editor;
@@ -20,21 +18,12 @@ class Editor extends Atomic.ScriptObject {
 
         Editor.instance = this;
 
+        EditorUI.initialize();
+
         Atomic.getResourceCache().autoReloadResources = true;
 
         this.assetImport = new AssetImport();
 
-        var graphics = Atomic.getGraphics();
-
-        this.view = new Atomic.UIView();
-
-        this.mainframe = new MainFrame();
-
-        this.view.addChild(this.mainframe);
-
-        // set initial size
-        this.mainframe.setSize(graphics.width, graphics.height);
-
         this.parseArguments();
 
         this.subscribeToEvent(EditorEvents.Quit, (data) => this.handleEditorEventQuit(data));

Script/AtomicEditor/editor/EditorEvents.ts

@@ -1,10 +1,10 @@
 
 export const Quit = "EditorEventQuit";
 
-export const EditResource = "EditEditResource";
+export const EditResource = "EditorEditResource";
 
 // data
-export interface EditorResourceEvent {
+export interface EditResourceEvent {
 
   // The full path to the resource to edit
   path: string;

Script/AtomicEditor/tsconfig.json

@@ -16,6 +16,7 @@
         "./editor/EditorEvents.ts",
         "./main.ts",
         "./ui/EditorStrings.ts",
+        "./ui/EditorUI.ts",
         "./ui/HierarchyFrame.ts",
         "./ui/MainFrame.ts",
         "./ui/MainFrameMenu.ts",
@@ -37,6 +38,8 @@
         "./ui/inspector/NodeInspector.ts",
         "./ui/inspector/TextureSelector.ts",
         "./ui/modal/MessageModal.ts",
-        "./ui/modal/ModalOps.ts"
+        "./ui/modal/ModalOps.ts",
+        "./ui/modal/ModalWindow.ts",
+        "./ui/modal/NewProject.ts"
     ]
 }

Script/AtomicEditor/ui/EditorUI.ts

@@ -0,0 +1,51 @@
+
+import MainFrame = require("../ui/MainFrame");
+import ModalOps = require("./modal/ModalOps");
+
+// this is designed with public get functions to solve
+// circular dependency issues in TS
+
+var editorUI:EditorUI;
+
+export function getMainFrame():MainFrame {
+  return editorUI.mainframe;
+}
+
+export function getModelOps():ModalOps {
+  return editorUI.modalOps;
+}
+
+export function getView():Atomic.UIView {
+  return editorUI.view;
+}
+
+export function initialize() {
+  editorUI = new EditorUI();
+}
+
+class EditorUI extends Atomic.ScriptObject {
+
+  constructor() {
+
+    super();
+
+    var graphics = Atomic.getGraphics();
+
+    this.view = new Atomic.UIView();
+
+    this.mainframe = new MainFrame();
+
+    this.view.addChild(this.mainframe);
+
+    // set initial size
+    this.mainframe.setSize(graphics.width, graphics.height);
+
+    this.modalOps = new ModalOps();
+
+  }
+
+  view: Atomic.UIView;
+  mainframe: MainFrame;
+  modalOps: ModalOps;
+
+}

Script/AtomicEditor/ui/MainFrame.ts

@@ -1,4 +1,3 @@
-import MainFrameMenu = require("./MainFrameMenu");
 import ProjectFrame = require("./ProjectFrame");
 import ResourceFrame = require("./ResourceFrame");
 import InspectorFrame = require("./inspector/InspectorFrame");
@@ -9,6 +8,7 @@ import MessageModal = require("./modal/MessageModal");
 import UIEvents = require("./UIEvents");
 
 import ScriptWidget = require("./ScriptWidget");
+import MainFrameMenu = require("./MainFrameMenu");
 
 class MainFrame extends ScriptWidget {
 

Script/AtomicEditor/ui/MainFrameMenu.ts

@@ -1,11 +1,7 @@
 
 import strings = require("./EditorStrings");
 import EditorEvents = require("../editor/EditorEvents");
-
-var UIMenuItemSource = Atomic.UIMenuItemSource;
-var UIMenuItem = Atomic.UIMenuItem;
-
-var StringID = strings.StringID;
+import EditorUI = require("./EditorUI");
 
 class MainFrameMenu extends Atomic.ScriptObject {
 
@@ -43,6 +39,15 @@ class MainFrameMenu extends Atomic.ScriptObject {
 
       } else if (target.id == "menu file popup") {
 
+          if (refid == "file new project") {
+
+            var mo = EditorUI.getModelOps();
+            mo.showNewProject();
+
+            return true;
+
+          }
+
           if (refid == "file save file") {
 
              //TODO: this is horrible
@@ -109,6 +114,10 @@ export = MainFrameMenu;
 
 // initialization
 
+var UIMenuItemSource = Atomic.UIMenuItemSource;
+var UIMenuItem = Atomic.UIMenuItem;
+var StringID = strings.StringID;
+
 var editorItems = {
     "About Atomic Editor": "about atomic editor",
     "-1": null,

Script/AtomicEditor/ui/ResourceFrame.ts

@@ -1,4 +1,5 @@
 import ScriptWidget = require("./ScriptWidget");
+import EditorEvents = require("../editor/EditorEvents");
 import UIEvents = require("./UIEvents");
 
 // the root content of editor widgets (rootContentWidget property) are extended with an editor field
@@ -27,7 +28,7 @@ class ResourceFrame extends ScriptWidget {
 
     }
 
-    handleEditResource(ev: UIEvents.EditorResourceEvent) {
+    handleEditResource(ev: EditorEvents.EditResourceEvent) {
 
         var path = ev.path;
 
@@ -177,7 +178,7 @@ class ResourceFrame extends ScriptWidget {
 
         this.resourceViewContainer.addChild(this);
 
-        this.subscribeToEvent(UIEvents.EditResource, (data) => this.handleEditResource(data));
+        this.subscribeToEvent(EditorEvents.EditResource, (data) => this.handleEditResource(data));
         this.subscribeToEvent(UIEvents.CloseResourceEditor, (data) => this.handleCloseResourceEditor(data));
         this.subscribeToEvent(UIEvents.ResourceEditorChanged, (data) => this.handleResourceEditorChanged(data));
 

Script/AtomicEditor/ui/UIEvents.ts

@@ -1,14 +1,6 @@
 
 export const MessageModalEvent = "MessageModalEvent";
 
-export const EditResource = "EditResource";
-
-export interface EditorResourceEvent {
-
-  // The full path to the resource to edit
-  path: string;
-
-}
 
 export const CloseResourceEditor = "CloseResourceEditor";
 export const ResourceEditorChanged = "ResourceEditorChanged";

Script/AtomicEditor/ui/inspector/InspectorFrame.ts

@@ -1,5 +1,5 @@
 
-import UIEvents = require("../UIEvents");
+import EditorEvents = require("../../editor/EditorEvents");
 import ScriptWidget = require("../ScriptWidget");
 import DataBinding = require("./DataBinding");
 
@@ -21,13 +21,13 @@ class InspectorFrame extends ScriptWidget {
 
         var container = this.getWidget("inspectorcontainer");
 
-        this.subscribeToEvent(UIEvents.EditResource, (data) => this.handleEditResource(data));
+        this.subscribeToEvent(EditorEvents.EditResource, (data) => this.handleEditResource(data));
         this.subscribeToEvent("EditorActiveNodeChange", (data) => this.handleActiveNodeChange(data));
 
 
     }
 
-    handleEditResource(ev: UIEvents.EditorResourceEvent) {
+    handleEditResource(ev: EditorEvents.EditResourceEvent) {
 
         var path = ev.path;
 

Script/AtomicEditor/ui/modal/MessageModal.ts

@@ -1,13 +1,13 @@
 
 import UIEvents = require("../UIEvents");
-import Editor = require("../../editor/Editor");
+import EditorUI = require("../EditorUI");
 
 export class MessageModal extends Atomic.ScriptObject
 {
 
   showErrorWindow(title:string, message:string):void {
 
-    var mainframe = Editor.instance.mainframe;
+    var mainframe = EditorUI.getMainFrame();
 
     new Atomic.UIMessageWindow(mainframe, "modal_error").show(title, message, 640, 360);
 

Script/AtomicEditor/ui/modal/ModalOps.ts

@@ -0,0 +1,73 @@
+import EditorUI = require("../EditorUI");
+import ModalWindow = require("./ModalWindow");
+import NewProject = require("./NewProject");
+
+class ModalOps extends Atomic.ScriptObject {
+
+    constructor() {
+
+        super();
+
+        this.dimmer = new Atomic.UIDimmer();
+
+    }
+
+    private show(): boolean {
+
+        if (this.dimmer.parent) {
+
+            console.log("WARNING: attempting to show modal while dimmer is active");
+            return false;
+
+        }
+
+        if (this.opWindow) {
+
+            console.log("WARNING: attempting to show modal while another opWindow is active");
+            return false;
+
+        }
+
+        var view = EditorUI.getView();
+        view.addChild(this.dimmer);
+
+        return true;
+
+    }
+
+    hide() {
+
+        if (this.opWindow) {
+
+            var window = this.opWindow;
+            this.opWindow = null;
+
+            var view = EditorUI.getView();
+            view.setFocusRecursive();
+
+        }
+
+        if (this.dimmer.parent) {
+
+            this.dimmer.parent.removeChild(this.dimmer, false);
+
+        }
+
+
+    }
+
+    showNewProject() {
+
+        if (this.show()) {
+
+            this.opWindow = new NewProject();
+
+        }
+    }
+
+    dimmer: Atomic.UIDimmer;
+    opWindow: ModalWindow;
+
+}
+
+export = ModalOps;

Script/AtomicEditor/ui/modal/ModalWindow.ts

@@ -0,0 +1,26 @@
+
+import EditorUI = require("../EditorUI");
+
+class ModalWindow extends Atomic.UIWindow {
+
+  constructor() {
+
+    super();
+
+    var view = EditorUI.getView();
+    view.addChild(this);
+
+    this.setFocus();
+
+    this.subscribeToEvent(this, "WidgetDeleted", (event:Atomic.UIWidgetDeletedEvent) => {
+
+      var modalOps = EditorUI.getModelOps();
+      modalOps.hide();
+
+    });
+
+  }
+
+}
+
+export = ModalWindow;

Script/AtomicEditor/ui/modal/NewProject.ts

@@ -0,0 +1,22 @@
+
+import ModalWindow = require("./ModalWindow");
+
+class NewProject extends ModalWindow {
+
+    constructor() {
+
+      super();
+
+      this.text = "Project Type";
+
+      this.load("AtomicEditor/editor/ui/newproject.tb.txt");
+
+      this.resizeToFitContent();
+      this.center();
+
+    }
+
+}
+
+
+export = NewProject;

Script/TypeScript/Atomic.d.ts

@@ -6986,6 +6986,13 @@ declare module Atomic {
       constructor(createWidget?: boolean);
 
 
+   }
+
+   export class UIDimmer extends UIWidget {
+
+      constructor(createWidget?: boolean);
+
+
    }
 
    export class UIDragObject extends AObject {
@@ -7384,6 +7391,8 @@ declare module Atomic {
       setValue(value: number): void;
       getValue(): number;
       setFocus(): void;
+      // Set focus to first widget which accepts it
+      setFocusRecursive(): void;
       onFocusChanged(focused: boolean): void;
       setState(state: number, on: boolean): void;
       getState(state: number): boolean;

Script/TypeScript/AtomicWork.d.ts

@@ -54,6 +54,12 @@ declare module Atomic {
         touch: boolean;
     }
 
+    export interface UIWidgetDeletedEvent {
+      
+        widget: UIWidget;
+    }
+
+
     export interface AttributeInfo {
 
       type:VariantType;

Source/Atomic/UI/UI.cpp

@@ -33,6 +33,8 @@ using namespace tb;
 #include "../Graphics/Texture2D.h"
 #include "../Graphics/VertexBuffer.h"
 
+#include "UIEvents.h"
+
 #include "UIRenderer.h"
 #include "UI.h"
 #include "UIButton.h"
@@ -53,6 +55,7 @@ using namespace tb;
 #include "UIInlineSelect.h"
 #include "UIScrollContainer.h"
 #include "UISeparator.h"
+#include "UIDimmer.h"
 
 namespace tb
 {
@@ -85,6 +88,8 @@ UI::~UI()
 {
     if (initialized_)
     {
+        tb::TBWidgetListener::RemoveGlobalListener(this);
+
         TBFile::SetReaderFunction(0);
         TBID::tbidRegisterCallback = 0;
 
@@ -149,6 +154,8 @@ void UI::Initialize(const String& languageFile)
 
     SubscribeToEvent(E_RENDERUPDATE, HANDLER(UI, HandleRenderUpdate));
 
+    tb::TBWidgetListener::AddGlobalListener(this);
+
     initialized_ = true;
 
     //TB_DEBUG_SETTING(LAYOUT_BOUNDS) = 1;
@@ -471,6 +478,14 @@ UIWidget* UI::WrapWidget(tb::TBWidget* widget)
 
     // this is order dependent as we're using IsOfType which also works if a base class
 
+    if (widget->IsOfType<TBDimmer>())
+    {
+        UIDimmer* dimmer = new UIDimmer(context_, false);
+        dimmer->SetWidget(widget);
+        widgetWrap_[widget] = dimmer;
+        return dimmer;
+    }
+
     if (widget->IsOfType<TBScrollContainer>())
     {
         UIScrollContainer* container = new UIScrollContainer(context_, false);
@@ -624,5 +639,16 @@ UIWidget* UI::WrapWidget(tb::TBWidget* widget)
     return 0;
 }
 
+void UI::OnWidgetDelete(tb::TBWidget *widget)
+{
+
+}
+
+bool UI::OnWidgetDying(tb::TBWidget *widget)
+{
+    return false;
+}
+
+
 
 }

Source/Atomic/UI/UI.h

@@ -1,14 +1,11 @@
 
 #pragma once
 
+#include <ThirdParty/TurboBadger/tb_widgets_listener.h>
+
 #include "../Core/Object.h"
 #include "../UI/UIBatch.h"
 
-namespace tb
-{
-class TBWidget;
-}
-
 namespace Atomic
 {
 
@@ -16,7 +13,7 @@ class VertexBuffer;
 class UIRenderer;
 class UIWidget;
 
-class UI : public Object
+class UI : public Object, private tb::TBWidgetListener
 {
     OBJECT(UI)
 
@@ -73,6 +70,10 @@ private:
     void Render(VertexBuffer* buffer, const PODVector<UIBatch>& batches, unsigned batchStart, unsigned batchEnd);
     void SetVertexData(VertexBuffer* dest, const PODVector<float>& vertexData);
 
+    // TBWidgetListener
+    void OnWidgetDelete(tb::TBWidget *widget);
+    bool OnWidgetDying(tb::TBWidget *widget);
+
     tb::TBWidget* rootWidget_;
     UIRenderer* renderer_;
 

Source/Atomic/UI/UIDimmer.cpp

@@ -0,0 +1,36 @@
+
+#include <TurboBadger/tb_widgets.h>
+#include <TurboBadger/tb_widgets_common.h>
+
+#include <Atomic/IO/Log.h>
+
+#include "UIEvents.h"
+#include "UI.h"
+#include "UIDimmer.h"
+
+using namespace tb;
+
+namespace Atomic
+{
+
+UIDimmer::UIDimmer(Context* context, bool createWidget) : UIWidget(context, false)
+{
+    if (createWidget)
+    {
+        widget_ = new TBDimmer();
+        widget_->SetDelegate(this);
+        GetSubsystem<UI>()->WrapWidget(this, widget_);
+    }
+}
+
+UIDimmer::~UIDimmer()
+{
+
+}
+
+bool UIDimmer::OnEvent(const tb::TBWidgetEvent &ev)
+{
+    return UIWidget::OnEvent(ev);
+}
+
+}

Source/Atomic/UI/UIDimmer.h

@@ -0,0 +1,26 @@
+
+#pragma once
+
+#include "UIWidget.h"
+
+namespace Atomic
+{
+
+class UIDimmer : public UIWidget
+{
+    OBJECT(UIDimmer)
+
+public:
+
+    UIDimmer(Context* context, bool createWidget = true);
+    virtual ~UIDimmer();
+
+protected:
+
+    virtual bool OnEvent(const tb::TBWidgetEvent &ev);
+
+private:
+
+};
+
+}

Source/Atomic/UI/UIWidget.cpp

@@ -433,6 +433,14 @@ void UIWidget::SetFocus()
     widget_->SetFocus(WIDGET_FOCUS_REASON_UNKNOWN);
 }
 
+void UIWidget::SetFocusRecursive()
+{
+    if (!widget_)
+        return;
+
+    widget_->SetFocusRecursive(WIDGET_FOCUS_REASON_UNKNOWN);
+}
+
 void UIWidget::SetVisibility(UI_WIDGET_VISIBILITY visibility)
 {
 

Source/Atomic/UI/UIWidget.h

@@ -150,6 +150,8 @@ class UIWidget : public Object, public tb::TBWidgetDelegate
     double GetValue();
 
     void SetFocus();
+    /// Set focus to first widget which accepts it
+    void SetFocusRecursive();
     void OnFocusChanged(bool focused);
 
     void SetState(/*WIDGET_STATE*/ unsigned state, bool on);

Source/AtomicJS/Javascript/JSUI.cpp

@@ -58,6 +58,7 @@ JSUI::JSUI(Context* context) : Object(context),
     uiTypes_["UITextureWidget"] = true;
     uiTypes_["UIScrollContainer"] = true;
     uiTypes_["UISeparator"] = true;
+    uiTypes_["UIDimmer"] = true;
 
 }
 

Source/AtomicJS/Packages/Atomic/UI.json

@@ -9,7 +9,7 @@
 								"UISelectList", "UIListView", "UIMessageWindow", "UILayoutParams", "UIFontDescription",
 								"UISkinImage", "UITabContainer", "UISceneView", "UIPreferredSize", "UIDragObject",
 								"UIContainer", "UISection", "UIInlineSelect", "UITextureWidget",
-								"UIScrollContainer", "UISeparator"],
+								"UIScrollContainer", "UISeparator", "UIDimmer"],
 	"overloads" : {
 	},
 	"typescript_decl" : {

Source/AtomicJS/Packages/Atomic/tsconfig.json

@@ -0,0 +1,18 @@
+{
+    "version": "1.5.0-alpha",
+    "compilerOptions": {
+        "target": "es5",
+        "module": "commonjs",
+        "declaration": false,
+        "noImplicitAny": false,
+        "removeComments": true,
+        "noLib": false,
+        "preserveConstEnums": true,
+        "suppressImplicitAnyIndexErrors": true
+    },
+    "filesGlob": [
+        "./**/*.ts",
+        "!./node_modules/**/*.ts"
+    ],
+    "files": []
+}