1 files changed, 88 insertions, 7 deletions

diff --git a/js/tools/TextTool.js b/js/tools/TextTool.js
index 538583ee..910a9eef 100644
--- a/js/tools/TextTool.js
+++ b/js/tools/TextTool.js
@@ -6,8 +6,35 @@ 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 = require("node_modules/labs/rich-text-editor.reel").RichTextEditor;
 
 exports.TextTool = Montage.create(DrawingTool, {
+
+    _selectedElement: { value : null },
+
+    selectedElement: {
+        get: function() {
+            return this._selectedElement;
+        },
+        set: function(val) {
+            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";
+            }
+            //Set Selected Element
+            this._selectedElement = val;
+            if(val !== null) {
+                this.drawTextTool();
+                this.handleScroll();
+                this.application.ninja.stage._iframeContainer.addEventListener("scroll", this, false);
+            } else {
+                this.application.ninja.stage._iframeContainer.removeEventListener("scroll", this);
+            }
+        }
+    },
+    
+
     drawingFeedback: { value: { mode: "Draw3D", type: "rectangle" } },
 
     HandleLeftButtonDown: {
@@ -16,6 +43,15 @@ exports.TextTool = Montage.create(DrawingTool, {
         }
     },
 
+    handleScroll: {
+        value: function(e) {
+            // Set Top & Left Positions
+            var textToolCoordinates = this.application.ninja.stage.toViewportCoordinates(this.selectedElement.offsetLeft, this.selectedElement.offsetTop);
+            this.application.ninja.stage.textTool.element.style.left = textToolCoordinates[0] + "px";
+            this.application.ninja.stage.textTool.element.style.top = textToolCoordinates[1] + "px";
+        }
+    },
+
     HandleMouseMove: {
         value: function(event) {
             if(this._escape) {
@@ -50,24 +86,67 @@ exports.TextTool = Montage.create(DrawingTool, {
                 if(drawData) {
                     //this.insertElement(drawData);
                 }
-
+                
                 this._hasDraw = false;
                 this.endDraw(event);
             } else {
-
                 this.doSelection(event);
-
+                if (this.application.ninja.selectedElements.length !== 0 ) {
+                    this.selectedElement = this.application.ninja.selectedElements[0]._element;
+                }
                 this._isDrawing = false;
             }
         }
     },
 
+    applyElementStyles : {
+        value: function(fromElement, toElement, styles) {
+            styles.forEach(function(style) {
+                var styleCamelCase = style.replace(/(\-[a-z])/g, function($1){return $1.toUpperCase().replace('-','');});
+                toElement.style[styleCamelCase] = window.getComputedStyle(fromElement)[style];
+            }, this);
+        }
+    },
+
+    drawTextTool: {
+        value: function() {
+            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";
+
+            // Set Width, Height
+            this.application.ninja.stage.textTool.element.style.width = this.selectedElement.offsetWidth + "px";
+            this.application.ninja.stage.textTool.element.style.height = this.selectedElement.offsetHeight + "px";
+
+
+            // Set font styling (Size, Style, Weight)
+
+            me = this;
+            this.application.ninja.stage.textTool.didDraw = function() {
+                me.applyElementStyles(me.selectedElement, me.application.ninja.stage.textTool.element, ["overflow"]);
+                me.applyElementStyles(me.selectedElement, me.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(this.application.ninja.stage.textTool.element.firstChild);
+                sel.addRange(range);
+                this.didDraw = function() {};
+            }
+        }
+    },
+
     HandleDoubleClick: {
         value: function(e) {
-            console.log(this.application.ninja.selectedElements[0]._element);
-            this.application.ninja.selectedElements[0]._element.setAttribute("contenteditable", true);
-            this.application.ninja.stage._iframeContainer.style.zIndex = 200;
-            this.application.ninja.selectedElements[0]._element.focus();
+            //this.application.ninja.selectedElements[0]._element.setAttribute("contenteditable", true);
+
+            //if (!this.application.ninja.textTool) {
+
+            //}
+
 
 
         }
@@ -75,10 +154,12 @@ exports.TextTool = Montage.create(DrawingTool, {
 
     Configure: {
         value: function(wasSelected) {
+            
             if(wasSelected) {
                 NJevent("enableStageMove");
                 this.application.ninja.stage.stageDeps.snapManager.setupDragPlaneFromPlane( workingPlane );
             } else {
+                this.selectedElement = null;
                 NJevent("disableStageMove");
             }
         }