Initial Text Tool Implementation

Has rich-text-editor in place need to place with finalized version when complete

12 files changed, 2425 insertions, 10 deletions

diff --git a/_scss/compass_app_log.txt b/_scss/compass_app_log.txt
index 6fe64a6f..d28e1e77 100644
--- a/_scss/compass_app_log.txt
+++ b/_scss/compass_app_log.txt
@@ -93,3 +93,10 @@
 2012-01-20 15:16:38 overwrite ../css/ninja.css
 2012-01-20 15:17:03 overwrite ../css/ninja.css
 2012-01-20 15:17:39 overwrite ../css/ninja.css
+2012-01-30 16:28:54 overwrite ../css/ninja.css
+2012-01-30 16:29:04 overwrite ../css/ninja.css
+2012-01-30 16:33:31 overwrite ../css/ninja.css
+2012-01-30 17:18:02 overwrite ../css/ninja.css
+2012-01-30 18:28:44 overwrite ../css/ninja.css
+2012-02-02 17:20:26 overwrite ../css/ninja.css
+2012-02-02 17:20:31 identical ../css/ninja.css
diff --git a/_scss/imports/scss/_Stage.scss b/_scss/imports/scss/_Stage.scss
index a992b793..09dae3d6 100644
--- a/_scss/imports/scss/_Stage.scss
+++ b/_scss/imports/scss/_Stage.scss
@@ -192,3 +192,17 @@
     overflow-x: auto;
     overflow-y: auto;
 }
+.montage-editor-frame {
+    position:absolute;
+    z-index:7;
+    top: 0;
+    left:0;
+    display:none;
+    -webkit-user-select: initial;
+}
+.montage-editor {
+    padding:0px;
+    word-wrap: normal;
+    
+
+    }
\ No newline at end of file
diff --git a/css/ninja.css b/css/ninja.css
index 2fcb1380..7bc4c80e 100644
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -271,6 +271,10 @@ background: transparent;
 
 #mainContent .CodeMirror-scroll { height: 100%; overflow: scroll; overflow-x: auto; overflow-y: auto; }
 
+.montage-editor-frame { position: absolute; z-index: 7; top: 0; left: 0; display: none; -webkit-user-select: initial; }
+
+.montage-editor { padding: 0px; word-wrap: normal; }
+
 /* PanelUI.scss Styles governing the panels in the UI. Note that colors and font definitions go in  _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss */
 /* layout for the container of all panels within a dock area */
 .panelContainer { margin: 0px; padding: 0px 0px; position: relative; /*
diff --git a/js/panels/CSSPanel/CSSPanel.js b/js/panels/CSSPanel/CSSPanel.js
index 94860b30..cf8880a3 100644
--- a/js/panels/CSSPanel/CSSPanel.js
+++ b/js/panels/CSSPanel/CSSPanel.js
@@ -20,9 +20,9 @@ exports.CSSPanel = Montage.create(PanelBase, {
     init : {
         enumerable:true,
         value : function (){
-            this.minHeight = 300;
-            this.contentHeight = 300;
-            this.defaultHeight= 300;
+            this.minHeight = 195;
+            this.contentHeight = 195;
+            this.defaultHeight= 195;
 
             /* OLD WAY -- Removing the temporary div
             // TODO: Remove this comment once this is tested.
diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html
index 49d10baf..07b823a7 100644
--- a/js/stage/stage.reel/stage.html
+++ b/js/stage/stage.reel/stage.html
@@ -34,6 +34,14 @@
                     }
                 }
             },
+
+            "textTool": {
+                "module": "montage/ui/rich-text-editor.reel",
+                "name": "RichTextEditor",
+                "properties": {
+                    "element" : {"#": "textToolObject"}
+                }
+            },
             
             "owner": {
                 "module": "js/stage/stage.reel",
@@ -46,7 +54,8 @@
                     "_canvas":  {"#": "stageCanvas"},
                     "_drawingCanvas":  {"#": "drawingCanvas"},
                     "stageDeps": {"@": "StageDeps1"},
-                    "layout":   {"@": "layout1"}
+                    "layout":   {"@": "layout1"},
+                    "textTool": {"@": "textTool"}
                 },
                 "bindings": {
                     "currentDocumentStageView": {
@@ -64,6 +73,7 @@
 
     <section id="stageAndScenesContainer" class="stageAndScenesContainer">
         <section id="iframeContainer"></section>
+        <section id="textToolObject">asdasd asd asd asd asd asd </section>
         <section id="codeViewContainer"></section>
         <canvas id="layoutCanvas"></canvas>
         <canvas id="stageCanvas"></canvas>
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index 3e0b852e..96bfccdd 100644
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -12,6 +12,7 @@ var vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils;
 
 exports.Stage = Montage.create(Component, {
 
+    textTool: { value: null },
     // TODO - Need to figure out how to remove this dependency
     // Needed by some tools that depend on selectionDrawn event to set up some logic
     drawNow: { value : false },
@@ -780,6 +781,12 @@ exports.Stage = Montage.create(Component, {
         }
     },
 
+    toViewportCoordinates: {
+        value: function(x,y) {
+            return [x + this._userContentLeft, y + this._userContentTop];
+        }
+    },
+
     setZoom: {
         value: function(value) {
             if(!this._firstDraw)
diff --git a/js/tools/TextTool.js b/js/tools/TextTool.js
index 538583ee..8b48ff4f 100644
--- a/js/tools/TextTool.js
+++ b/js/tools/TextTool.js
@@ -6,12 +6,30 @@ 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("montage/ui/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 = val;
+        }
+    },
+    
+
     drawingFeedback: { value: { mode: "Draw3D", type: "rectangle" } },
 
     HandleLeftButtonDown: {
         value: function(event) {
+            this.deselectText();
             this.startDraw(event);
         }
     },
@@ -50,24 +68,88 @@ exports.TextTool = Montage.create(DrawingTool, {
                 if(drawData) {
                     //this.insertElement(drawData);
                 }
-
+                
                 this._hasDraw = false;
                 this.endDraw(event);
             } else {
-
                 this.doSelection(event);
+                console.log("im here");
+                if (this.application.ninja.selectedElements.length !== 0 ) {
+                    this.selectedElement = this.application.ninja.selectedElements[0]._element;
+                    this.drawTextTool();
+                }
 
                 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('-','');});
+                console.log(styleCamelCase, style, window.getComputedStyle(fromElement)[style]);
+                toElement.style[styleCamelCase] = window.getComputedStyle(fromElement)[style];
+            }, this);
+        }
+    },
+
+    drawTextTool: {
+        value: function() {
+            console.log(" now im here");
+            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.