Merge pull request #323 from dhg637/binding

Binding View - Binding Tool & Binding Panel

2 files changed, 136 insertions, 14 deletions

diff --git a/js/tools/TextTool.js b/js/tools/TextTool.js
index 0aef6c1c..aa79b8bc 100755
--- a/js/tools/TextTool.js
+++ b/js/tools/TextTool.js
@@ -6,7 +6,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 
 var Montage = require("montage/core/core").Montage,
     DrawingTool = require("js/tools/drawing-tool").DrawingTool,
-    //RichTextEditor = ("node_modules/labs/rich-text-editor.reel").RichTextEditor,
     ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
 
 exports.TextTool = Montage.create(DrawingTool, {
@@ -23,24 +22,32 @@ exports.TextTool = Montage.create(DrawingTool, {
             return this._selectedElement;
         },
         set: function(val) {
+            //Set Selected Element
             if (this._selectedElement !== null) {
-                this.selectedElement.innerHTML = this.application.ninja.stage.textTool.value;
-                this.application.ninja.stage.textTool.value = "";
-                this.application.ninja.stage.textTool.element.style.display = "none";
-                ElementsMediator.setProperty(this.application.ninja.selectedElements, "color", [window.getComputedStyle(this.application.ninja.stage.textTool.element.firstChild)["color"]], "Change", "textTool");
+                this.applyStyle();
             }
-            //Set Selected Element
             this._selectedElement = val;
-            if(val !== null) {
+            if(this._selectedElement !== null) {
                 this.drawTextTool();
                 this.handleScroll();
                 this.application.ninja.stage._iframeContainer.addEventListener("scroll", this, false);
             } else {
                 this.application.ninja.stage._iframeContainer.removeEventListener("scroll", this);
             }
+
         }
     },
 
+    applyStyle: {
+        value: function() {
+            this.selectedElement.innerHTML = this.application.ninja.stage.textTool.value;
+            this.application.ninja.stage.textTool.value = "";
+            this.application.ninja.stage.textTool.element.style.display = "none";
+            //ElementsMediator.setProperty([this.selectedElement], "color", [window.getComputedStyle(this.application.ninja.stage.textTool.element)["color"]], "Change", "textTool");
+        }
+
+    },
+
     HandleLeftButtonDown: {
         value: function(event) {
             this.selectedElement = null;
@@ -96,6 +103,22 @@ exports.TextTool = Montage.create(DrawingTool, {
         }
     },
 
+    getSelectedElement: {
+        value: function(editor) {
+            var element = editor._selectedRange.startContainer;
+            if (element.nodeType == 3) {
+                element = element.parentNode;
+            }
+            return element;
+        }
+    },
+
+    getStyleOfSelectedElement: {
+        value: function(editor) {
+            return window.getComputedStyle(this.getSelectedElement(editor));
+        }
+    },
+
     applyElementStyles : {
         value: function(fromElement, toElement, styles) {
             styles.forEach(function(style) {
@@ -108,11 +131,11 @@ exports.TextTool = Montage.create(DrawingTool, {
     drawTextTool: {
         value: function() {
             var self = this;
-
             this.application.ninja.stage.textTool.value = this.selectedElement.innerHTML;
             if(this.application.ninja.stage.textTool.value === "") { this.application.ninja.stage.textTool.value = " "; }
             this.selectedElement.innerHTML = "";
 
+
             //Styling Options for text tool to look identical to the text you are manipulating.
             this.application.ninja.stage.textTool.element.style.display = "block";
             this.application.ninja.stage.textTool.element.style.position = "absolute";
@@ -124,14 +147,11 @@ exports.TextTool = Montage.create(DrawingTool, {
             // Set font styling (Size, Style, Weight)
             this.application.ninja.stage.textTool.didDraw = function() {
                 self.applyElementStyles(self.selectedElement, self.application.ninja.stage.textTool.element, ["overflow"]);
-                self.applyElementStyles(self.selectedElement, self.application.ninja.stage.textTool.element.firstChild, ["font","padding-left","padding-top","padding-right","padding-bottom", "color"]);
-                var range = document.createRange(),
-                sel   = window.getSelection();
-                sel.removeAllRanges();
-                range.selectNodeContents(self.application.ninja.stage.textTool.element.firstChild);
-                sel.addRange(range);
+                self.applyElementStyles(self.selectedElement, self.application.ninja.stage.textTool.element, ["font","padding-left","padding-top","padding-right","padding-bottom", "color"]);
+                this.selectAll();
                 this.didDraw = function() {};
             }
+
         }
     },
 
diff --git a/js/tools/bindingTool.js b/js/tools/bindingTool.js
new file mode 100644
index 00000000..1e1c9e5b
--- /dev/null
+++ b/js/tools/bindingTool.js
@@ -0,0 +1,102 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+var Montage = require("montage/core/core").Montage,
+    DrawingTool = require("js/tools/drawing-tool").DrawingTool,
+ModifierToolBase = require("js/tools/modifier-tool-base").ModifierToolBase;
+SelectionTool = require("js/tools/SelectionTool").SelectionTool;
+
+
+exports.BindingTool = Montage.create(ModifierToolBase, {
+    drawingFeedback: { value: { mode: "Draw2D", type: "" } },
+    _selectedComponent: {
+        value: null
+    },
+
+    selectedComponent: {
+        get:function() {
+            return this._selectedComponent;
+        },
+        set: function(val) {
+            this._selectedComponent = val;
+            this.application.ninja.stage.bindingView.selectedComponent = val;
+        }
+    },
+
+    Configure: {
+        value: function (doActivate)
+        {
+            if (doActivate)
+            {
+                NJevent("enableStageMove");
+                this.application.ninja.workspaceMode = "binding";
+                if (this.application.ninja.selectedElements.length !== 0 ) {
+                    if(typeof(this.application.ninja.selectedElements[0].controller) !== "undefined") {
+                        this.selectedComponent = this.application.ninja.selectedElements[0].controller;
+                    } else {
+                        this.selectedComponent = null;
+                    }
+
+                }
+            }
+            else
+            {
+                NJevent("disableStageMove");
+                this.application.ninja.workspaceMode = "default";
+                this.selectedComponent = null;
+            }
+
+        }
+    },
+
+    HandleLeftButtonDown: {
+        value: function(event) {
+            NJevent("enableStageMove");
+        }
+    },
+
+    HandleMouseMove: {
+        value: function(event) {
+            /*
+                In the mouse over event we need to validate if the mouse over is over a hud.
+                If it on top of a hud bring that single hud to the top to associate with.
+            */
+
+            this.application.ninja.stage.bindingView.handleMousemove(event);
+            //this.doDraw(event);
+        }
+    },
+
+    HandleLeftButtonUp: {
+        value: function(event) {
+            if(!this.application.ninja.stage.bindingView._isDrawingConnection) {
+                if(this._escape) {
+                    this._escape = false;
+                    return;
+                }
+
+                if(this._hasDraw) {
+                    this._hasDraw = false;
+                    //this.endDraw(event);
+                } else {
+                    this.doSelection(event);
+                    if (this.application.ninja.selectedElements.length !== 0 ) {
+                        if(this.application.ninja.selectedElements[0].controller) {
+                            this.selectedComponent = this.application.ninja.selectedElements[0].controller;
+                        } else {
+                            this.selectedComponent = null;
+                        }
+                    } else {
+                        this.selectedComponent = null;
+                    }
+                    this._isDrawing = false;
+                }
+            }
+            //this.endDraw(event);
+            //NJevent("disableStageMove");
+        }
+    }
+});
\ No newline at end of file