From 5f506542d28e12b707c3bfa41b53383519838477 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Tue, 7 Feb 2012 16:50:27 -0800 Subject: Revert "Initial Text Tool Implementation" This reverts commit 2082fa6912eec2ffabd2081b7706e8e1b88a9711. --- 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, 10 insertions(+), 111 deletions(-) (limited to 'js') diff --git a/js/panels/CSSPanel/CSSPanel.js b/js/panels/CSSPanel/CSSPanel.js index cf8880a3..94860b30 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 = 195; - this.contentHeight = 195; - this.defaultHeight= 195; + this.minHeight = 300; + this.contentHeight = 300; + this.defaultHeight= 300; /* 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 07b823a7..49d10baf 100644 --- a/js/stage/stage.reel/stage.html +++ b/js/stage/stage.reel/stage.html @@ -34,14 +34,6 @@ } } }, - - "textTool": { - "module": "montage/ui/rich-text-editor.reel", - "name": "RichTextEditor", - "properties": { - "element" : {"#": "textToolObject"} - } - }, "owner": { "module": "js/stage/stage.reel", @@ -54,8 +46,7 @@ "_canvas": {"#": "stageCanvas"}, "_drawingCanvas": {"#": "drawingCanvas"}, "stageDeps": {"@": "StageDeps1"}, - "layout": {"@": "layout1"}, - "textTool": {"@": "textTool"} + "layout": {"@": "layout1"} }, "bindings": { "currentDocumentStageView": { @@ -73,7 +64,6 @@
-
asdasd asd asd asd asd asd
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 96bfccdd..3e0b852e 100644 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -12,7 +12,6 @@ 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 }, @@ -781,12 +780,6 @@ 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 8b48ff4f..538583ee 100644 --- a/js/tools/TextTool.js +++ b/js/tools/TextTool.js @@ -6,30 +6,12 @@ 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); } }, @@ -68,88 +50,24 @@ 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) { - //this.application.ninja.selectedElements[0]._element.setAttribute("contenteditable", true); - - //if (!this.application.ninja.textTool) { - - //} - + 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(); } @@ -157,12 +75,10 @@ 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 0bb13001ce07e5256a6e395325a898ab4ac93e1c Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Mon, 13 Feb 2012 02:05:07 -0800 Subject: Fixed Color on text edit. Also Fixed Indent & Outdent button. toggle bullet and numbered now bound to text tool --- .../text-properties.reel/text-properties.css | 4 + .../text-properties.reel/text-properties.html | 8 +- .../text-properties.reel/text-properties.js | 116 +++++++++++++++++---- js/tools/TextTool.js | 1 + 4 files changed, 104 insertions(+), 25 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 6aa61812..f7bb8295 100644 --- a/js/components/tools-properties/text-properties.reel/text-properties.css +++ b/js/components/tools-properties/text-properties.reel/text-properties.css @@ -12,6 +12,10 @@ padding: 0px 8px; } +.optionsTextTool select { + margin: 2px; +} + .optionsTextTool > *, .optionsTextTool .btnGroup > * { float:left; } 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 7ded1236..a7d2af10 100644 --- a/js/components/tools-properties/text-properties.reel/text-properties.html +++ b/js/components/tools-properties/text-properties.reel/text-properties.html @@ -236,7 +236,7 @@ "element": {"#": "indent"}, "pressedClass": "active", "preventFocus": true, - "identifier": "outdent", + "identifier": "indent", "label": ">>" }, "listeners": [ @@ -253,7 +253,7 @@ "element": {"#": "outdent"}, "pressedClass": "active", "preventFocus": true, - "identifier": "<<", + "identifier": "outdent", "label": "<<" }, "listeners": [ @@ -310,10 +310,10 @@ - + - +
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 55274322..7ae0cfda 100644 --- a/js/components/tools-properties/text-properties.reel/text-properties.js +++ b/js/components/tools-properties/text-properties.reel/text-properties.js @@ -6,6 +6,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Montage = require("montage/core/core").Montage; var Component = require("montage/ui/component").Component; +var ArrayController = require("montage/ui/controller/array-controller").ArrayController; var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; exports.TextProperties = Montage.create(ToolProperties, { @@ -29,18 +30,57 @@ exports.TextProperties = Montage.create(ToolProperties, { outdent: {value: null}, numberedList: {value: null}, bulletedList: {value: null}, + fontTypes: {value: null}, + fontSizes: {value: null}, prepareForDraw: { value: function() { + // code commented out because montage ui element select-input is incomplete. Will switch back when they fix or actually complete the component +// this.fontTypes = Montage.create(ArrayController); +// this.fontTypes.content = [ +// { value: "Arial", text: "Arial" }, +// { value: "Arial Black", text: "Arial Black" }, +// { value: "Courier New", text: "Courier New" }, +// { value: "Garamond", text: "Garamond" }, +// { value: "Georgia", text: "Georgia" }, +// { value: "Open Sans", text: "Open Sans" }, +// { value: "Tahoma", text: "Tahoma" }, +// { value: "Times New Roman", text: "Times New Roman" }, +// { value: "Trebuchet MS", text: "Trebuchet MS" }, +// { value: "Verdana", text: "Verdana" } +// ]; + + //this.fontSelection.contentController = this.fontTypes; +// +// this.fontSizes = Montage.create(ArrayController); +// this.fontSizes.content = [ +// { value: 1, text: "8pt" }, +// { value: 2, text: "10pt" }, +// { value: 3, text: "12pt" }, +// { value: 4, text: "14pt" }, +// { value: 5, text: "18pt" }, +// { value: 6, text: "24pt" }, +// { value: 7, text: "36pt" } +// ]; +// this.fontSize.contentController = this.fontSizes; + 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.fontSize.items = ["8pt","10pt","12pt","14pt","18pt","24pt","36pt"]; + this.tagType.items = ["div", "span", "p", "section", "article", "h1", "h2", "h3", "h4", "h5", "h6"]; } }, handleEditorSelect: { value: function(e) { this.application.ninja.stage.textTool.updateStates(); +// this.fontSelection.value = this.application.ninja.stage.textTool.states.fontname; +// +// for( var i = 0; i < this.fontSize.items.length; i++) { +// if (this.application.ninja.stage.textTool.states.fontsize == i + 1) { +// this.fontSize.value = this.fontSize.items[i] +// break; +// } +// } } }, @@ -133,6 +173,18 @@ exports.TextProperties = Montage.create(ToolProperties, { } }, + handleBulletedListAction: { + value: function(e) { + this.application.ninja.stage.textTool.doAction("insertunorderedlist"); + } + }, + + handleNumberedListAction: { + value: function(e) { + this.application.ninja.stage.textTool.doAction("insertorderedlist"); + } + }, + 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. @@ -214,6 +266,34 @@ exports.TextProperties = Montage.create(ToolProperties, { oneway: true }); + Object.defineBinding(this.numberedList, "pressed", { + boundObject: this.application.ninja.stage.textTool, + boundObjectPropertyPath: "states.insertorderedlist", + boundValueMutator: this.validatePressed, + oneway: true + }); + + Object.defineBinding(this.bulletedList, "pressed", { + boundObject: this.application.ninja.stage.textTool, + boundObjectPropertyPath: "states.insertunorderedlist", + boundValueMutator: this.validatePressed, + oneway: true + }); + + Object.defineBinding(this.fontSelection, "value", { + boundObject: this.application.ninja.stage.textTool, + boundObjectPropertyPath: "states.fontname", + boundValueMutator: this.validateFont, + oneway: true + }); + + Object.defineBinding(this.fontSize, "value", { + boundObject: this.application.ninja.stage.textTool, + boundObjectPropertyPath: "states.fontsize", + boundValueMutator: this.validateFontSize.bind(this), + oneway: true + }); + this.initialized = true; } @@ -226,40 +306,34 @@ exports.TextProperties = Montage.create(ToolProperties, { } }, - initialized: { - value: false + validateFont: { + value: function(val) { + return val; + } }, - handleFontSelectionChange: { - value: function() { - this.application.ninja.stage.textTool.doAction("fontname", this.fontSelection.value); - this.application.ninja.stage.textTool.element.focus(); + validateFontSize: { + value: function(val) { + val = parseInt(val); + return this.fontSize.items[val]; } }, - handleNumberedListAction: { - value: function(e) { - //this.numberedList.value = false; - this.bulletedList.value = false; - this.application.ninja.stage.textTool.doAction("insertorderedlist"); - this.application.ninja.stage.textTool.element.focus(); - } + initialized: { + value: false }, - handleBulletedListAction: { + handleFontSelectionChange: { value: function(e) { - this.numberedList.value = false; - //this.bulletedList.value = false; - this.application.ninja.stage.textTool.doAction("insertunorderedlist"); + this.application.ninja.stage.textTool.doAction("fontname", this.fontSelection.value); 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.element.firstChild.style.color = e._event.color.css; + this.application.ninja.stage.textTool.element.firstChild.focus(); //this.application.ninja.stage.textTool.doAction("forecolor",e._event.color.css); } diff --git a/js/tools/TextTool.js b/js/tools/TextTool.js index 760af55b..4c464173 100644 --- a/js/tools/TextTool.js +++ b/js/tools/TextTool.js @@ -21,6 +21,7 @@ exports.TextTool = Montage.create(DrawingTool, { this.selectedElement.innerHTML = this.application.ninja.stage.textTool.value; this.application.ninja.stage.textTool.value = ""; this.application.ninja.stage.textTool.element.style.display = "none"; + this.applyElementStyles(this.application.ninja.stage.textTool.element.firstChild, this.selectedElement, ["color"]); } //Set Selected Element this._selectedElement = val; -- cgit v1.2.3 From 36cefa3526988cb4dfea107fedaa954a2703260d Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Mon, 13 Feb 2012 02:20:23 -0800 Subject: Fixed binding to font size dropdown --- js/components/tools-properties/text-properties.reel/text-properties.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (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 7ae0cfda..88d38ffe 100644 --- a/js/components/tools-properties/text-properties.reel/text-properties.js +++ b/js/components/tools-properties/text-properties.reel/text-properties.js @@ -315,7 +315,7 @@ exports.TextProperties = Montage.create(ToolProperties, { validateFontSize: { value: function(val) { val = parseInt(val); - return this.fontSize.items[val]; + return this.fontSize.items[val - 1]; } }, -- cgit v1.2.3 From f979f47658a03640cc81e729e3cf88d80f8ec366 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Mon, 13 Feb 2012 13:44:37 -0800 Subject: appended function : toViewportCoordinates in stage Signed-off-by: Armen Kesablyan --- js/stage/stage.reel/stage.js | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'js') diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 9e2df5a2..77cd1936 100644 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -780,6 +780,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) -- cgit v1.2.3 From 266f27fc9b2beef0378b2e49e93b5f217b1abde8 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Tue, 14 Feb 2012 10:59:14 -0800 Subject: Changed height of css panel Signed-off-by: Armen Kesablyan --- js/panels/CSSPanel/CSSPanel.js | 6 +++--- 1 file changed, 3 insertions(+), 3 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. -- cgit v1.2.3