From 2082fa6912eec2ffabd2081b7706e8e1b88a9711 Mon Sep 17 00:00:00 2001
From: Armen Kesablyan
Date: Thu, 2 Feb 2012 19:03:59 -0800
Subject: Initial Text Tool Implementation

Has rich-text-editor in place need to place with finalized version when complete
---
 js/panels/CSSPanel/CSSPanel.js |  6 +--
 js/stage/stage.reel/stage.html | 12 +++++-
 js/stage/stage.reel/stage.js   |  7 +++
 js/tools/TextTool.js           | 96 +++++++++++++++++++++++++++++++++++++++---
 4 files changed, 111 insertions(+), 10 deletions(-)

(limited to 'js')

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.
+            this.application.ninja.stage.textTool.element.style.display = "block";
+            this.application.ninja.stage.textTool.element.style.position = "absolute";
+
+            // 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";
+
+            // 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() {};
+                console.log("im drew here");
+            }
+            console.log("i end here");
+        }
+    },
+
+
+    deselectText: {
+        value: function() {
+            this.application.ninja.stage.textTool.element.style.display = "none";
+            this.selectedElement.innerHTML = this.application.ninja.stage.textTool.value;
+            this.application.ninja.stage.textTool.value = "";
+        }
+    },
+
     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 +157,12 @@ exports.TextTool = Montage.create(DrawingTool, {
 
     Configure: {
         value: function(wasSelected) {
+            
             if(wasSelected) {
                 NJevent("enableStageMove");
                 this.application.ninja.stage.stageDeps.snapManager.setupDragPlaneFromPlane( workingPlane );
             } else {
+                this.deselectText();
                 NJevent("disableStageMove");
             }
         }
-- 
cgit v1.2.3


From d7ead10b566e7de121b2cd2c99fecca8469d63b8 Mon Sep 17 00:00:00 2001
From: Armen Kesablyan
Date: Tue, 7 Feb 2012 16:30:47 -0800
Subject: Initial Text tool completion.

---
 .../text-properties.reel/text-properties.css       |   4 +-
 .../text-properties.reel/text-properties.html      | 202 +++++++++++++++------
 .../text-properties.reel/text-properties.js        | 149 ++++++++++++++-
 js/tools/TextTool.js                               |  47 +++--
 4 files changed, 316 insertions(+), 86 deletions(-)

(limited to 'js')

diff --git a/js/components/tools-properties/text-properties.reel/text-properties.css b/js/components/tools-properties/text-properties.reel/text-properties.css
index d581c6c3..2eb608d3 100644
--- a/js/components/tools-properties/text-properties.reel/text-properties.css
+++ b/js/components/tools-properties/text-properties.reel/text-properties.css
@@ -30,4 +30,6 @@
     font-size:11px;
 }
 
-
+.optionsTextTool .fontSelection {
+    width:100px;
+}
\ No newline at end of file
diff --git a/js/components/tools-properties/text-properties.reel/text-properties.html b/js/components/tools-properties/text-properties.reel/text-properties.html
index fb57c06d..14123b12 100644
--- a/js/components/tools-properties/text-properties.reel/text-properties.html
+++ b/js/components/tools-properties/text-properties.reel/text-properties.html
@@ -33,8 +33,8 @@
                     "alignCenter": {"@": "alignCenter"},
                     "alignRight": {"@": "alignRight"},
                     "alignJustify": {"@": "alignJustify"},
-                    "indentRight": {"@": "indentRight"},
-                    "indentLeft": {"@": "indentLeft"},
+                    "indent": {"@": "indent"},
+                    "outdent": {"@": "outdent"},
                     "numberedList": {"@": "numberedList"},
                     "bulletedList": {"@": "bulletedList"}
                 }
@@ -57,8 +57,16 @@
                 "module": "js/components/combobox.reel",
                 "name": "Combobox",
                 "properties": {
-                    "element": {"#": "fontSelection"}
-                }
+                    "element": {"#": "fontSelection"},
+                    "identifier": "fontSelection"
+                },
+                "listeners": [
+                    {
+                        "type": "change",
+                        "listener": {"@": "owner"}
+                    }
+                ]
+
             },
             "fontSettings": {
                 "module": "js/components/button.reel",
@@ -72,48 +80,90 @@
                 "module": "js/components/hottextunit.reel",
                 "name": "HotTextUnit",
                 "properties": {
-                    "element": {"#": "fontSize"}
-                }
-            },
+                    "element": {"#": "fontSize"},
+                    "value": 12,
+                    "identifier": "fontSize"
+                },
+                "listeners": [
+                    {
+                        "type": "change",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "changing",
+                        "listener": {"@": "owner"}
+                    }
+                ]
 
-            "fontColor": {
-                "module": "js/components/button.reel",
-                "name": "Button",
-                "properties": {
-                    "element": {"#": "fontColor"}
-                }
             },
+
+          "fontColor": {
+               "module" : "js/components/ui/color-chip.reel",
+               "name" : "ColorChip",
+               "properties" : {
+                   "element" : {"#": "fontColor"},
+                   "mode": "chip"
+               }
+           },
             "btnBold": {
                 "module": "js/components/button.reel",
                 "name": "Button",
                 "properties": {
                     "element": {"#": "btnBold"},
-                    "_isToggleButton": true
-                }
+                    "_isToggleButton": true,
+                    "identifier": "btnBold"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
             "btnItalic": {
                 "module": "js/components/button.reel",
                 "name": "Button",
                 "properties": {
                     "element": {"#": "btnItalic"},
-                    "_isToggleButton": true
-                }
+                    "_isToggleButton": true,
+                    "identifier": "btnItalic"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
             "btnUnderline": {
                 "module": "js/components/button.reel",
                 "name": "Button",
                 "properties": {
                     "element": {"#": "btnUnderline"},
-                    "_isToggleButton": true
-                }
+                    "_isToggleButton": true,
+                    "identifier": "btnUnderline"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
             "btnStrikethrough": {
                 "module": "js/components/button.reel",
                 "name": "Button",
                 "properties": {
                     "element": {"#": "btnStrikethrough"},
-                    "_isToggleButton": true
-                }
+                    "_isToggleButton": true,
+                    "identifier": "btnStrikethrough"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
             "txtLink": {
                 "module": "js/components/textfield.reel",
@@ -134,66 +184,106 @@
                 "module": "js/components/button.reel",
                 "name": "Button",
                 "properties": {
-                    "element": {"#": "alignLeft"}
-                }
+                    "element": {"#": "alignLeft"},
+                    "_isToggleButton": true,
+                    "identifier": "alignLeft"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
             "alignCenter": {
                 "module": "js/components/button.reel",
                 "name": "Button",
                 "properties": {
-                    "element": {"#": "alignCenter"}
-                }
+                    "element": {"#": "alignCenter"},
+                    "_isToggleButton": true,
+                    "identifier": "alignCenter"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
             "alignRight": {
                 "module": "js/components/button.reel",
                 "name": "Button",
                 "properties": {
-                    "element": {"#": "alignRight"}
-                }
+                    "element": {"#": "alignRight"},
+                    "_isToggleButton": true,
+                    "identifier": "alignRight"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
             "alignJustify": {
                 "module": "js/components/button.reel",
                 "name": "Button",
                 "properties": {
-                    "element": {"#": "alignJustify"}
-                }
+                    "element": {"#": "alignJustify"},
+                    "_isToggleButton": true,
+                    "identifier": "alignJustify"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
-            "indentRight": {
+            "indent": {
                 "module": "js/components/button.reel",
                 "name": "Button",
                 "properties": {
-                    "element": {"#": "indentRight"}
+                    "element": {"#": "indent"}
                 }
             },
-            "indentLeft": {
+            "outdent": {
                 "module": "js/components/button.reel",
                 "name": "Button",
                 "properties": {
-                    "element": {"#": "indentLeft"}
+                    "element": {"#": "outdent"}
                 }
             },
             "bulletedList": {
                 "module": "js/components/button.reel",
                 "name": "Button",
                 "properties": {
-                    "element": {"#": "bulletedList"}
-                }
+                    "element": {"#": "bulletedList"},
+                    "_isToggleButton": true,
+                    "identifier": "bulletedList"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
             "numberedList": {
                 "module": "js/components/button.reel",
                 "name": "Button",
                 "properties": {
-                    "element": {"#": "numberedList"}
-                }
-            },
-            "fontColor": {
-               "module" : "js/components/ui/color-chip.reel",
-               "name" : "ColorChip",
-               "properties" : {
-                   "element" : {"#": "fontColor"},
-                   "mode": "chip"
-               }
-           }
+                    "element": {"#": "numberedList"},
+                    "_isToggleButton": true,
+                    "identifier": "numberedList"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
+            }
 
     	}
 	    </script>
@@ -202,16 +292,16 @@
 
     <body>
         <div id="textProperties" class="subToolHolderPanel optionsTextTool">
-            <label class="label">Class:</label>
-            <input id="className" />
-            <label class="label">Tag:</label>
-            <select id="tagType"></select>
+            <label class="label" style="display: none">Class:</label>
+            <input id="className" style="display: none" />
+            <label class="label" style="display: none">Tag:</label>
+            <select id="tagType" style="display: none"></select>
             <label class="label">Font:</label>
-            <select id="fontSelection"></select>
-            <button id="fontSettings"></button>
+            <select id="fontSelection" class="fontSelection"></select>
+            <button id="fontSettings" style="display: none"></button>
             <label class="label">Size:</label>
             <input id="fontSize"/>
-            <div id="fontColor" style="display:none"></div>
+            <button id="fontColor"></button>
             <button id="btnBold" class="btnBold"></button>
             <button id="btnItalic" class="btnItalic"></button>
             <button id="btnUnderline" class="btnItalic"></button>
@@ -223,10 +313,10 @@
                 <button id="alignLeft"></button>
                 <button id="alignCenter"></button>
                 <button id="alignRight"></button>
+                <button id="alignJustify" style="display: none;"></button>
             </div>
-            <button id="alignJustify"></button>
-            <button id="indentRight"></button>
-            <button id="indentLeft"></button>
+            <button id="indent"></button>
+            <button id="outdent"></button>
             <button id="bulletedList"></button>
             <button id="numberedList"></button>
         </div>
diff --git a/js/components/tools-properties/text-properties.reel/text-properties.js b/js/components/tools-properties/text-properties.reel/text-properties.js
index 313693b1..de0b5fa3 100644
--- a/js/components/tools-properties/text-properties.reel/text-properties.js
+++ b/js/components/tools-properties/text-properties.reel/text-properties.js
@@ -25,8 +25,8 @@ exports.TextProperties = Montage.create(ToolProperties, {
     alignCenter: {value: null},
     alignRight: {value: null},
     alignJustify: {value: null},
-    indentRight: {value: null},
-    indentLeft: {value: null},
+    indent: {value: null},
+    outdent: {value: null},
     numberedList: {value: null},
     bulletedList: {value: null},
 
@@ -42,9 +42,34 @@ exports.TextProperties = Montage.create(ToolProperties, {
             this.alignCenter.label = "Center";
             this.alignRight.label = "Right";
             this.alignJustify.label = "Justify";
+            this.indent.label = "-->"
+            this.outdent.label = "<--";
+            this.numberedList.label = "1 2 3";
+            this.bulletedList.label = "• • •";
+            this.fontSelection.items = ["Arial", "Arial Black", "Courier New", "Garamond", "Georgia",  "Open Sans", "Tahoma", "Times New Roman", "Trebuchet MS", "Verdana"];
+            this.tagType.items = ["div", "span", "p", "section", "article", "h1", "h2", "h3", "h4", "h5", "h6"];
+
+
+            this.application.ninja.stage.textTool.addEventListener("editorSelect", this, false);
+            Object.defineBinding(this.application.ninja.stage.textTool.states, "bold", {
+              boundObject: this.btnBold,
+              boundObjectPropertyPath: "value"
+            });
+
         }
     },
-    
+
+    handleEditorSelect: {
+        value: function(e) {
+            console.log("hello");
+            this.application.ninja.stage.textTool.updateStates();
+        }
+    },
+
+    defaultFontSize: {
+        value: "12px"
+    },
+
     _subPrepare: {
         value: function() {
             //this.divElement.addEventListener("click", this, false);
@@ -54,6 +79,122 @@ exports.TextProperties = Montage.create(ToolProperties, {
     handleClick: {
         value: function(event) {
            // this.selectedElement = event._event.target.id;
+
+        }
+    },
+
+    handleFontSizeChange: {
+        
+    },
+
+    handleBtnBoldAction: {
+        value: function(e) {
+            this.application.ninja.stage.textTool.doAction("bold", true);
+        }
+    },
+
+    handleBtnItalicAction: {
+        value: function(e) {
+            this.application.ninja.stage.textTool.doAction("italic", true);
+        }
+    },
+
+    handleBtnUnderlineAction: {
+        value: function(e) {
+            this.application.ninja.stage.textTool.doAction("underline", true);
+        }
+    },
+
+    handleBtnStrikethroughAction: {
+        value: function(e) {
+            this.application.ninja.stage.textTool.doAction("strikethrough", true);
+        }
+    },
+    
+    handleAlignLeftAction: {
+        value: function(e) {
+            //this.alignLeft.value = false;
+            this.alignCenter.value = false;
+            this.alignRight.value = false;
+            this.alignJustify.value = false;
+            this.application.ninja.stage.textTool.doAction("justifyLeft", true);
+        }
+    },
+
+    handleAlignCenterAction: {
+        value: function(e) {
+            this.alignLeft.value = false;
+            //this.alignCenter.value = false;
+            this.alignRight.value = false;
+            this.alignJustify.value = false;
+            this.application.ninja.stage.textTool.doAction("justifyCenter", true);
         }
-    }
+    },
+
+    handleAlignRightAction: {
+        value: function(e) {
+            this.alignLeft.value = false;
+            this.alignCenter.value = false;
+            //this.alignRight.value = false;
+            this.alignJustify.value = false;
+            this.application.ninja.stage.textTool.doAction("justifyRight", true);
+        }
+    },
+
+    handleAlignJustifyAction: {
+        value: function(e) {
+            this.alignLeft.value = false;
+            this.alignCenter.value = false;
+            this.alignRight.value = false;
+            //this.alignJustify.value = false;
+            this.application.ninja.stage.textTool.doAction("strikethrough", null);
+        }
+    },
+
+    handleIndentAction: {
+        value: function(e) {
+            this.application.ninja.stage.textTool.doAction("indent", null);
+        }
+    },
+
+    handleOutdentAction: {
+        value: function(e) {
+            this.application.ninja.stage.textTool.doAction("outdent", null);
+        }
+    },
+
+    handleFontSizeChange: {
+        value: function(e) {
+           
+        }
+    },
+
+    handleFontSizeChanging: {
+        value: function(e) {
+
+        }
+    },
+
+    handleFontSelectionChange: {
+        value: function() {
+            this.application.ninja.stage.textTool.doAction("fontname", this.fontSelection.value);
+        }
+    },
+
+    handleNumberedListAction: {
+        value: function(e) {
+            //this.numberedList.value = false;
+            this.bulletedList.value = false;
+            this.application.ninja.stage.textTool.doAction("insertnumberedlist", true);
+        }
+    },
+
+    handleOrderedListAction: {
+        value: function(e) {
+            this.numberedList.value = false;
+            //this.bulletedList.value = false;
+            this.application.ninja.stage.textTool.doAction("insertnumberedlist", true);
+        }
+    },
+
 });
\ No newline at end of file
diff --git a/js/tools/TextTool.js b/js/tools/TextTool.js
index 8b48ff4f..28e7ddf3 100644
--- a/js/tools/TextTool.js
+++ b/js/tools/TextTool.js
@@ -17,10 +17,20 @@ exports.TextTool = Montage.create(DrawingTool, {
             return this._selectedElement;
         },
         set: function(val) {
-            if(this._selectedElement !== null) {
-                
+            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);
+            }
         }
     },
     
@@ -29,11 +39,19 @@ exports.TextTool = Montage.create(DrawingTool, {
 
     HandleLeftButtonDown: {
         value: function(event) {
-            this.deselectText();
             this.startDraw(event);
         }
     },
 
+    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) {
@@ -73,12 +91,9 @@ exports.TextTool = Montage.create(DrawingTool, {
                 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;
             }
         }
@@ -88,7 +103,6 @@ exports.TextTool = Montage.create(DrawingTool, {
         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);
         }
@@ -96,7 +110,6 @@ exports.TextTool = Montage.create(DrawingTool, {
 
     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 = "";
@@ -105,11 +118,6 @@ exports.TextTool = Montage.create(DrawingTool, {
             this.application.ninja.stage.textTool.element.style.display = "block";
             this.application.ninja.stage.textTool.element.style.position = "absolute";
 
-            // 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";
-
             // 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";
@@ -127,18 +135,7 @@ exports.TextTool = Montage.create(DrawingTool, {
                 range.selectNodeContents(this.application.ninja.stage.textTool.element.firstChild);
                 sel.addRange(range);
                 this.didDraw = function() {};
-                console.log("im drew here");
             }
-            console.log("i end here");
-        }
-    },
-
-
-    deselectText: {
-        value: function() {
-            this.application.ninja.stage.textTool.element.style.display = "none";
-            this.selectedElement.innerHTML = this.application.ninja.stage.textTool.value;
-            this.application.ninja.stage.textTool.value = "";
         }
     },
 
@@ -162,7 +159,7 @@ exports.TextTool = Montage.create(DrawingTool, {
                 NJevent("enableStageMove");
                 this.application.ninja.stage.stageDeps.snapManager.setupDragPlaneFromPlane( workingPlane );
             } else {
-                this.deselectText();
+                this.selectedElement = null;
                 NJevent("disableStageMove");
             }
         }
-- 
cgit v1.2.3


From 7f8730c3add146f1ba107e6fc22d1f5a8348ed8b Mon Sep 17 00:00:00 2001
From: Armen Kesablyan
Date: Tue, 7 Feb 2012 16:43:22 -0800
Subject: Refactored rich text editor location

---
 js/components/tools-properties/text-properties.reel/text-properties.js | 1 -
 js/stage/stage.reel/stage.html                                         | 2 +-
 js/tools/TextTool.js                                                   | 2 +-
 3 files changed, 2 insertions(+), 3 deletions(-)

(limited to 'js')

diff --git a/js/components/tools-properties/text-properties.reel/text-properties.js b/js/components/tools-properties/text-properties.reel/text-properties.js
index de0b5fa3..dac30da0 100644
--- a/js/components/tools-properties/text-properties.reel/text-properties.js
+++ b/js/components/tools-properties/text-properties.reel/text-properties.js
@@ -61,7 +61,6 @@ exports.TextProperties = Montage.create(ToolProperties, {
 
     handleEditorSelect: {
         value: function(e) {
-            console.log("hello");
             this.application.ninja.stage.textTool.updateStates();
         }
     },
diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html
index 07b823a7..623c54b8 100644
--- a/js/stage/stage.reel/stage.html
+++ b/js/stage/stage.reel/stage.html
@@ -36,7 +36,7 @@
             },
 
             "textTool": {
-                "module": "montage/ui/rich-text-editor.reel",
+                "module": "node_modules/labs/rich-text-editor.reel",
                 "name": "RichTextEditor",
                 "properties": {
                     "element" : {"#": "textToolObject"}
diff --git a/js/tools/TextTool.js b/js/tools/TextTool.js
index 28e7ddf3..910a9eef 100644
--- a/js/tools/TextTool.js
+++ b/js/tools/TextTool.js
@@ -6,7 +6,7 @@ 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;
+    RichTextEditor = require("node_modules/labs/rich-text-editor.reel").RichTextEditor;
 
 exports.TextTool = Montage.create(DrawingTool, {
 
-- 
cgit v1.2.3


From ce963d45cdf2703d2d4eedfa94394b178f86e0f1 Mon Sep 17 00:00:00 2001
From: Armen Kesablyan
Date: Thu, 9 Feb 2012 17:11:38 -0800
Subject: More Text Tool Updates

---
 js/components/button.reel/button.js                |   2 +-
 .../text-properties.reel/text-properties.css       |  28 +--
 .../text-properties.reel/text-properties.html      | 204 +++++++++++----------
 .../text-properties.reel/text-properties.js        | 162 +++++++++++-----
 js/tools/TextTool.js                               |   2 +
 5 files changed, 244 insertions(+), 154 deletions(-)

(limited to 'js')

diff --git a/js/components/button.reel/button.js b/js/components/button.reel/button.js
index ce5ac1af..2d26c8b4 100644
--- a/js/components/button.reel/button.js
+++ b/js/components/button.reel/button.js
@@ -179,7 +179,7 @@ var Button = exports.Button = Montage.create(Component, {
         value: function() {
             if(this.isToggleButton)
             {
-                if(this._value)
+                if(this._value === true)
                 {
                     this.element.classList.remove(this.offState);
                     this.element.classList.add(this.onState);
diff --git a/js/components/tools-properties/text-properties.reel/text-properties.css b/js/components/tools-properties/text-properties.reel/text-properties.css
index 2eb608d3..6aa61812 100644
--- a/js/components/tools-properties/text-properties.reel/text-properties.css
+++ b/js/components/tools-properties/text-properties.reel/text-properties.css
@@ -5,31 +5,33 @@
  </copyright> */
 
 .optionsTextTool {
-    display: -webkit-box;
-    -webkit-box-orient:horizontal;
-    -webkit-box-align: stretch;
-    padding: 5px;
+    padding: 6px;
 }
 
-
-.optionsTextTool > * {
-    -webkit-box-flex:0;
+.optionsTextTool .btnGroup {
+    padding: 0px 8px;
 }
 
-.optionsTextTool .button {
-    width: auto;
-
+.optionsTextTool > *, .optionsTextTool .btnGroup > * {
+    float:left;
 }
 
-.optionsTextTool .hottextunit {
-    padding-top:5px;
+.optionsTextTool button {
+    width: auto;
+    padding: 4px 8px !important;
+    margin-left:4px;
 }
 
 .optionsTextTool .label, .optionsTextTool .hottextunit {
-    float:none;
     font-size:11px;
 }
 
 .optionsTextTool .fontSelection {
     width:100px;
+}
+
+.optionsTextTool .fontColor {
+    width: 20px;
+    height: 18px;
+    margin: 2px 6px;
 }
\ No newline at end of file
diff --git a/js/components/tools-properties/text-properties.reel/text-properties.html b/js/components/tools-properties/text-properties.reel/text-properties.html
index 14123b12..7ded1236 100644
--- a/js/components/tools-properties/text-properties.reel/text-properties.html
+++ b/js/components/tools-properties/text-properties.reel/text-properties.html
@@ -77,41 +77,30 @@
             },
 
             "fontSize": {
-                "module": "js/components/hottextunit.reel",
-                "name": "HotTextUnit",
+                "module": "js/components/combobox.reel",
+                "name": "Combobox",
                 "properties": {
                     "element": {"#": "fontSize"},
-                    "value": 12,
                     "identifier": "fontSize"
                 },
                 "listeners": [
                     {
                         "type": "change",
                         "listener": {"@": "owner"}
-                    },
-                    {
-                        "type": "changing",
-                        "listener": {"@": "owner"}
                     }
                 ]
 
             },
-
-          "fontColor": {
-               "module" : "js/components/ui/color-chip.reel",
-               "name" : "ColorChip",
-               "properties" : {
-                   "element" : {"#": "fontColor"},
-                   "mode": "chip"
-               }
-           },
+        
             "btnBold": {
-                "module": "js/components/button.reel",
-                "name": "Button",
+                "module": "montage/ui/toggle-button.reel",
+                "name": "ToggleButton",
                 "properties": {
                     "element": {"#": "btnBold"},
-                    "_isToggleButton": true,
-                    "identifier": "btnBold"
+                    "pressedClass": "active",
+                    "preventFocus": true,
+                    "identifier": "btnBold",
+                    "label": "B"
                 },
                 "listeners": [
                     {
@@ -121,12 +110,14 @@
                 ]
             },
             "btnItalic": {
-                "module": "js/components/button.reel",
-                "name": "Button",
+                "module": "montage/ui/toggle-button.reel",
+                "name": "ToggleButton",
                 "properties": {
                     "element": {"#": "btnItalic"},
-                    "_isToggleButton": true,
-                    "identifier": "btnItalic"
+                    "pressedClass": "active",
+                    "preventFocus": true,
+                    "identifier": "btnItalic",
+                    "label": "I"
                 },
                 "listeners": [
                     {
@@ -136,12 +127,14 @@
                 ]
             },
             "btnUnderline": {
-                "module": "js/components/button.reel",
-                "name": "Button",
+                "module": "montage/ui/toggle-button.reel",
+                "name": "ToggleButton",
                 "properties": {
                     "element": {"#": "btnUnderline"},
-                    "_isToggleButton": true,
-                    "identifier": "btnUnderline"
+                    "pressedClass": "active",
+                    "preventFocus": true,
+                    "identifier": "btnUnderline",
+                    "label": "U"
                 },
                 "listeners": [
                     {
@@ -151,12 +144,14 @@
                 ]
             },
             "btnStrikethrough": {
-                "module": "js/components/button.reel",
-                "name": "Button",
+                "module": "montage/ui/toggle-button.reel",
+                "name": "ToggleButton",
                 "properties": {
                     "element": {"#": "btnStrikethrough"},
-                    "_isToggleButton": true,
-                    "identifier": "btnStrikethrough"
+                    "pressedClass": "active",
+                    "preventFocus": true,
+                    "identifier": "btnStrikethrough",
+                    "label": "S"
                 },
                 "listeners": [
                     {
@@ -165,28 +160,16 @@
                     }
                 ]
             },
-            "txtLink": {
-                "module": "js/components/textfield.reel",
-                "name": "TextField",
-                "properties": {
-                    "element": {"#": "txtLink"}
-                }
-            },
-            "linkTarget": {
-                "module": "js/components/combobox.reel",
-                "name": "Combobox",
-                "properties": {
-                    "element": {"#": "linkTarget"}
-                }
-            },
-
+            
             "alignLeft": {
-                "module": "js/components/button.reel",
-                "name": "Button",
+                "module": "montage/ui/toggle-button.reel",
+                "name": "ToggleButton",
                 "properties": {
                     "element": {"#": "alignLeft"},
-                    "_isToggleButton": true,
-                    "identifier": "alignLeft"
+                    "pressedClass": "active",
+                    "preventFocus": true,
+                    "identifier": "alignLeft",
+                    "label": "Left"
                 },
                 "listeners": [
                     {
@@ -196,12 +179,14 @@
                 ]
             },
             "alignCenter": {
-                "module": "js/components/button.reel",
-                "name": "Button",
+                "module": "montage/ui/toggle-button.reel",
+                "name": "ToggleButton",
                 "properties": {
                     "element": {"#": "alignCenter"},
-                    "_isToggleButton": true,
-                    "identifier": "alignCenter"
+                    "pressedClass": "active",
+                    "preventFocus": true,
+                    "identifier": "alignCenter",
+                    "label": "Center"
                 },
                 "listeners": [
                     {
@@ -211,12 +196,14 @@
                 ]
             },
             "alignRight": {
-                "module": "js/components/button.reel",
-                "name": "Button",
+                "module": "montage/ui/toggle-button.reel",
+                "name": "ToggleButton",
                 "properties": {
                     "element": {"#": "alignRight"},
-                    "_isToggleButton": true,
-                    "identifier": "alignRight"
+                    "pressedClass": "active",
+                    "preventFocus": true,
+                    "identifier": "alignRight",
+                    "label": "Right"
                 },
                 "listeners": [
                     {
@@ -226,12 +213,14 @@
                 ]
             },
             "alignJustify": {
-                "module": "js/components/button.reel",
-                "name": "Button",
+                "module": "montage/ui/toggle-button.reel",
+                "name": "ToggleButton",
                 "properties": {
                     "element": {"#": "alignJustify"},
-                    "_isToggleButton": true,
-                    "identifier": "alignJustify"
+                    "pressedClass": "active",
+                    "preventFocus": true,
+                    "identifier": "alignJustify",
+                    "label": "Justify"
                 },
                 "listeners": [
                     {
@@ -241,26 +230,48 @@
                 ]
             },
             "indent": {
-                "module": "js/components/button.reel",
+                "module": "montage/ui/button.reel",
                 "name": "Button",
                 "properties": {
-                    "element": {"#": "indent"}
-                }
+                    "element": {"#": "indent"},
+                    "pressedClass": "active",
+                    "preventFocus": true,
+                    "identifier": "outdent",
+                    "label": ">>"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
             "outdent": {
-                "module": "js/components/button.reel",
+                "module": "montage/ui/button.reel",
                 "name": "Button",
                 "properties": {
-                    "element": {"#": "outdent"}
-                }
+                    "element": {"#": "outdent"},
+                    "pressedClass": "active",
+                    "preventFocus": true,
+                    "identifier": "<<",
+                    "label": "<<"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
             "bulletedList": {
-                "module": "js/components/button.reel",
-                "name": "Button",
+                "module": "montage/ui/toggle-button.reel",
+                "name": "ToggleButton",
                 "properties": {
                     "element": {"#": "bulletedList"},
-                    "_isToggleButton": true,
-                    "identifier": "bulletedList"
+                    "pressedClass": "active",
+                    "preventFocus": true,
+                    "identifier": "bulletedList",
+                    "label": "• • •"
                 },
                 "listeners": [
                     {
@@ -270,12 +281,14 @@
                 ]
             },
             "numberedList": {
-                "module": "js/components/button.reel",
-                "name": "Button",
+                "module": "montage/ui/toggle-button.reel",
+                "name": "ToggleButton",
                 "properties": {
                     "element": {"#": "numberedList"},
-                    "_isToggleButton": true,
-                    "identifier": "numberedList"
+                    "pressedClass": "active",
+                    "preventFocus": true,
+                    "identifier": "numberedList",
+                    "label": "1 2 3"
                 },
                 "listeners": [
                     {
@@ -301,24 +314,27 @@
             <button id="fontSettings" style="display: none"></button>
             <label class="label">Size:</label>
             <input id="fontSize"/>
-            <button id="fontColor"></button>
-            <button id="btnBold" class="btnBold"></button>
-            <button id="btnItalic" class="btnItalic"></button>
-            <button id="btnUnderline" class="btnItalic"></button>
-            <button id="btnStrikethrough" class="btnStriketrough"></button>
-            <label class="label">Link:</label>
-            <input id="txtLink" />
-            <select id="linkTarget"></select>
-            <div id="btnsAlign">
-                <button id="alignLeft"></button>
-                <button id="alignCenter"></button>
-                <button id="alignRight"></button>
-                <button id="alignJustify" style="display: none;"></button>
+            <div class="fontColor"></div>
+            <div class="btnGroup">
+                <button id="btnBold" class="btnBold nj-skinned" style="font-weight:bold"></button>
+                <button id="btnItalic" class="btnItalic nj-skinned" style="font-style: italic;"></button>
+                <button id="btnUnderline" class="btnUnderline nj-skinned" style="text-decoration: underline;"></button>
+                <button id="btnStrikethrough" class="btnStriketrough nj-skinned" style="text-decoration: line-through;"></button>
+            </div>
+            <div class="btnGroup">
+                <button id="alignLeft" class="nj-skinned"></button>
+                <button id="alignCenter" class="nj-skinned"></button>
+                <button id="alignRight" class="nj-skinned"></button>
+                <button id="alignJustify" class="nj-skinned"></button>
+            </div>
+            <div class="btnGroup">
+                <button id="indent" class="nj-skinned"></button>
+                <button id="outdent" class="nj-skinned"></button>
+            </div>
+            <div class="btnGroup">
+                <button id="bulletedList" class="nj-skinned"></button>
+                <button id="numberedList" class="nj-skinned"></button>
             </div>
-            <button id="indent"></button>
-            <button id="outdent"></button>
-            <button id="bulletedList"></button>
-            <button id="numberedList"></button>
         </div>
     </body>
 
diff --git a/js/components/tools-properties/text-properties.reel/text-properties.js b/js/components/tools-properties/text-properties.reel/text-properties.js
index dac30da0..55274322 100644
--- a/js/components/tools-properties/text-properties.reel/text-properties.js
+++ b/js/components/tools-properties/text-properties.reel/text-properties.js
@@ -32,30 +32,9 @@ exports.TextProperties = Montage.create(ToolProperties, {
 
     prepareForDraw: {
         value: function() {
-            this.linkTarget.items = ["Target","_blank","_self","_parent", "_top"];
-            this.fontSettings.label = "Settings";
-            this.btnBold.label = "Bold";
-            this.btnItalic.label = "Italic";
-            this.btnUnderline.label = "Underline";
-            this.btnStrikethrough.label = "Strikethrough";
-            this.alignLeft.label = "Left";
-            this.alignCenter.label = "Center";
-            this.alignRight.label = "Right";
-            this.alignJustify.label = "Justify";
-            this.indent.label = "-->"
-            this.outdent.label = "<--";
-            this.numberedList.label = "1 2 3";
-            this.bulletedList.label = "• • •";
             this.fontSelection.items = ["Arial", "Arial Black", "Courier New", "Garamond", "Georgia",  "Open Sans", "Tahoma", "Times New Roman", "Trebuchet MS", "Verdana"];
             this.tagType.items = ["div", "span", "p", "section", "article", "h1", "h2", "h3", "h4", "h5", "h6"];
-
-
-            this.application.ninja.stage.textTool.addEventListener("editorSelect", this, false);
-            Object.defineBinding(this.application.ninja.stage.textTool.states, "bold", {
-              boundObject: this.btnBold,
-              boundObjectPropertyPath: "value"
-            });
-
+            this.fontSize.items = ["8pt","10pt","12pt","14pt","18pt","24pt","36pt"];
         }
     },
 
@@ -65,10 +44,6 @@ exports.TextProperties = Montage.create(ToolProperties, {
         }
     },
 
-    defaultFontSize: {
-        value: "12px"
-    },
-
     _subPrepare: {
         value: function() {
             //this.divElement.addEventListener("click", this, false);
@@ -82,31 +57,27 @@ exports.TextProperties = Montage.create(ToolProperties, {
         }
     },
 
-    handleFontSizeChange: {
-        
-    },
-
     handleBtnBoldAction: {
         value: function(e) {
-            this.application.ninja.stage.textTool.doAction("bold", true);
+            this.application.ninja.stage.textTool.doAction("bold");
         }
     },
 
     handleBtnItalicAction: {
         value: function(e) {
-            this.application.ninja.stage.textTool.doAction("italic", true);
+            this.application.ninja.stage.textTool.doAction("italic");
         }
     },
 
     handleBtnUnderlineAction: {
         value: function(e) {
-            this.application.ninja.stage.textTool.doAction("underline", true);
+            this.application.ninja.stage.textTool.doAction("underline");
         }
     },
 
     handleBtnStrikethroughAction: {
         value: function(e) {
-            this.application.ninja.stage.textTool.doAction("strikethrough", true);
+            this.application.ninja.stage.textTool.doAction("strikethrough");
         }
     },
     
@@ -116,7 +87,7 @@ exports.TextProperties = Montage.create(ToolProperties, {
             this.alignCenter.value = false;
             this.alignRight.value = false;
             this.alignJustify.value = false;
-            this.application.ninja.stage.textTool.doAction("justifyLeft", true);
+            this.application.ninja.stage.textTool.doAction("justifyleft");
         }
     },
 
@@ -126,7 +97,7 @@ exports.TextProperties = Montage.create(ToolProperties, {
             //this.alignCenter.value = false;
             this.alignRight.value = false;
             this.alignJustify.value = false;
-            this.application.ninja.stage.textTool.doAction("justifyCenter", true);
+            this.application.ninja.stage.textTool.doAction("justifycenter");
         }
     },
 
@@ -136,7 +107,7 @@ exports.TextProperties = Montage.create(ToolProperties, {
             this.alignCenter.value = false;
             //this.alignRight.value = false;
             this.alignJustify.value = false;
-            this.application.ninja.stage.textTool.doAction("justifyRight", true);
+            this.application.ninja.stage.textTool.doAction("justifyright");
         }
     },
 
@@ -146,37 +117,123 @@ exports.TextProperties = Montage.create(ToolProperties, {
             this.alignCenter.value = false;
             this.alignRight.value = false;
             //this.alignJustify.value = false;
-            this.application.ninja.stage.textTool.doAction("strikethrough", null);
+            this.application.ninja.stage.textTool.doAction("justifyfull");
         }
     },
 
     handleIndentAction: {
         value: function(e) {
-            this.application.ninja.stage.textTool.doAction("indent", null);
+            this.application.ninja.stage.textTool.doAction("indent");
         }
     },
 
     handleOutdentAction: {
         value: function(e) {
-            this.application.ninja.stage.textTool.doAction("outdent", null);
+            this.application.ninja.stage.textTool.doAction("outdent");
         }
     },
 
     handleFontSizeChange: {
         value: function(e) {
-           
+            //We need the index of whats selected. This is a temporary solution til we can have a variable amount for font-size.
+            for( var i = 0; i < this.fontSize.items.length; i++) {
+                if (this.fontSize.value === this.fontSize.items[i]) {
+                    this.application.ninja.stage.textTool.doAction("fontsize", (i +1));
+                    break;
+                }
+            }
         }
     },
 
-    handleFontSizeChanging: {
-        value: function(e) {
+    defineInitialProperties: {
+        value: function() {
+            if (!this.initialized) {
+
+                //Setup Font Selection tool
+                this.fontColor = this.element.getElementsByClassName("fontColor")[0];
+                this.fontColor.props = {side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80};
+                this.application.ninja.colorController.addButton("chip", this.fontColor);
+                this.fontColor.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 0, g: 0, b: 0}, css: 'rgb(0,0,0)'});
+                this.fontColor.addEventListener("change",this.handleFontColorChange.bind(this),false);
+
+                this.application.ninja.stage.textTool.addEventListener("editorSelect", this, false);
+
+                Object.defineBinding(this.btnBold, "pressed", {
+                  boundObject: this.application.ninja.stage.textTool,
+                  boundObjectPropertyPath: "states.bold",
+                  boundValueMutator: this.validatePressed,
+                  oneway: true
+                });
+
+                Object.defineBinding(this.btnItalic, "pressed", {
+                  boundObject: this.application.ninja.stage.textTool,
+                  boundObjectPropertyPath: "states.italic",
+                  boundValueMutator: this.validatePressed,
+                  oneway: true
+                });
+
+                Object.defineBinding(this.btnUnderline, "pressed", {
+                  boundObject: this.application.ninja.stage.textTool,
+                  boundObjectPropertyPath: "states.underline",
+                  boundValueMutator: this.validatePressed,
+                  oneway: true
+                });
+
+                Object.defineBinding(this.btnStrikethrough, "pressed", {
+                  boundObject: this.application.ninja.stage.textTool,
+                  boundObjectPropertyPath: "states.strikethrough",
+                  boundValueMutator: this.validatePressed,
+                  oneway: true
+                });
 
+                Object.defineBinding(this.alignLeft, "pressed", {
+                  boundObject: this.application.ninja.stage.textTool,
+                  boundObjectPropertyPath: "states.justifyleft",
+                  boundValueMutator: this.validatePressed,
+                  oneway: true
+                });
+
+                Object.defineBinding(this.alignCenter, "pressed", {
+                  boundObject: this.application.ninja.stage.textTool,
+                  boundObjectPropertyPath: "states.justifycenter",
+                  boundValueMutator: this.validatePressed,
+                  oneway: true
+                });
+
+                Object.defineBinding(this.alignRight, "pressed", {
+                  boundObject: this.application.ninja.stage.textTool,
+                  boundObjectPropertyPath: "states.justifyright",
+                  boundValueMutator: this.validatePressed,
+                  oneway: true
+                });
+
+                Object.defineBinding(this.alignJustify, "pressed", {
+                  boundObject: this.application.ninja.stage.textTool,
+                  boundObjectPropertyPath: "states.justifyfull",
+                  boundValueMutator: this.validatePressed,
+                  oneway: true
+                });
+
+                this.initialized = true;
+            }
+
+        }
+    },
+
+    validatePressed: {
+        value: function(val) {
+            if (val == "true") return true; else return false
         }
     },
 
+    initialized: {
+        value: false
+    },
+
     handleFontSelectionChange: {
         value: function() {
             this.application.ninja.stage.textTool.doAction("fontname", this.fontSelection.value);
+            this.application.ninja.stage.textTool.element.focus();
         }
     },
 
@@ -184,16 +241,29 @@ exports.TextProperties = Montage.create(ToolProperties, {
         value: function(e) {
             //this.numberedList.value = false;
             this.bulletedList.value = false;
-            this.application.ninja.stage.textTool.doAction("insertnumberedlist", true);
+            this.application.ninja.stage.textTool.doAction("insertorderedlist");
+            this.application.ninja.stage.textTool.element.focus();
         }
     },
 
-    handleOrderedListAction: {
+    handleBulletedListAction: {
         value: function(e) {
             this.numberedList.value = false;
             //this.bulletedList.value = false;
-            this.application.ninja.stage.textTool.doAction("insertnumberedlist", true);
+            this.application.ninja.stage.textTool.doAction("insertunorderedlist");
+            this.application.ninja.stage.textTool.element.focus();
         }
     },
 
+    handleFontColorChange: {
+        value: function(e) {
+            this.application.ninja.stage.textTool.element.style.color = e._event.color.css;
+            this.application.ninja.stage.textTool.element.focus();
+
+            //this.application.ninja.stage.textTool.doAction("forecolor",e._event.color.css);
+
+        }
+    }
+
+
 });
\ No newline at end of file
diff --git a/js/tools/TextTool.js b/js/tools/TextTool.js
index 910a9eef..760af55b 100644
--- a/js/tools/TextTool.js
+++ b/js/tools/TextTool.js
@@ -39,6 +39,7 @@ exports.TextTool = Montage.create(DrawingTool, {
 
     HandleLeftButtonDown: {
         value: function(event) {
+            this.selectedElement = null;
             this.startDraw(event);
         }
     },
@@ -157,6 +158,7 @@ exports.TextTool = Montage.create(DrawingTool, {
             
             if(wasSelected) {
                 NJevent("enableStageMove");
+                this.options.defineInitialProperties();
                 this.application.ninja.stage.stageDeps.snapManager.setupDragPlaneFromPlane( workingPlane );
             } else {
                 this.selectedElement = null;
-- 
cgit v1.2.3