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/tools/TextTool.js | 96 ++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 90 insertions(+), 6 deletions(-) (limited to 'js/tools/TextTool.js') 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. --- js/tools/TextTool.js | 47 ++++++++++++++++++++++------------------------- 1 file changed, 22 insertions(+), 25 deletions(-) (limited to 'js/tools/TextTool.js') 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/tools/TextTool.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/tools/TextTool.js') 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/tools/TextTool.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'js/tools/TextTool.js') 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