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 @@
+
asdasd asd asd asd asd asd
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