aboutsummaryrefslogtreecommitdiff
path: root/js/tools
diff options
context:
space:
mode:
Diffstat (limited to 'js/tools')
-rw-r--r--js/tools/TextTool.js96
1 files changed, 6 insertions, 90 deletions
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
6 6
7var Montage = require("montage/core/core").Montage, 7var Montage = require("montage/core/core").Montage,
8 DrawingTool = require("js/tools/drawing-tool").DrawingTool; 8 DrawingTool = require("js/tools/drawing-tool").DrawingTool;
9 RichTextEditor = require("montage/ui/rich-text-editor.reel").RichTextEditor;
10 9
11exports.TextTool = Montage.create(DrawingTool, { 10exports.TextTool = Montage.create(DrawingTool, {
12
13 _selectedElement: { value : null },
14
15 selectedElement: {
16 get: function() {
17 return this._selectedElement;
18 },
19 set: function(val) {
20 if(this._selectedElement !== null) {
21
22 }
23 this._selectedElement = val;
24 }
25 },
26
27
28 drawingFeedback: { value: { mode: "Draw3D", type: "rectangle" } }, 11 drawingFeedback: { value: { mode: "Draw3D", type: "rectangle" } },
29 12
30 HandleLeftButtonDown: { 13 HandleLeftButtonDown: {
31 value: function(event) { 14 value: function(event) {
32 this.deselectText();
33 this.startDraw(event); 15 this.startDraw(event);
34 } 16 }
35 }, 17 },
@@ -68,88 +50,24 @@ exports.TextTool = Montage.create(DrawingTool, {
68 if(drawData) { 50 if(drawData) {
69 //this.insertElement(drawData); 51 //this.insertElement(drawData);
70 } 52 }
71 53
72 this._hasDraw = false; 54 this._hasDraw = false;
73 this.endDraw(event); 55 this.endDraw(event);
74 } else { 56 } else {
57
75 this.doSelection(event); 58 this.doSelection(event);
76 console.log("im here");
77 if (this.application.ninja.selectedElements.length !== 0 ) {
78 this.selectedElement = this.application.ninja.selectedElements[0]._element;
79 this.drawTextTool();
80 }
81 59
82 this._isDrawing = false; 60 this._isDrawing = false;
83 } 61 }
84 } 62 }
85 }, 63 },
86 64
87 applyElementStyles : {
88 value: function(fromElement, toElement, styles) {
89 styles.forEach(function(style) {
90 var styleCamelCase = style.replace(/(\-[a-z])/g, function($1){return $1.toUpperCase().replace('-','');});
91 console.log(styleCamelCase, style, window.getComputedStyle(fromElement)[style]);
92 toElement.style[styleCamelCase] = window.getComputedStyle(fromElement)[style];
93 }, this);
94 }
95 },
96
97 drawTextTool: {
98 value: function() {
99 console.log(" now im here");
100 this.application.ninja.stage.textTool.value = this.selectedElement.innerHTML;
101 if(this.application.ninja.stage.textTool.value === "") { this.application.ninja.stage.textTool.value = " "; }
102 this.selectedElement.innerHTML = "";
103
104 //Styling Options for text tool to look identical to the text you are manipulating.
105 this.application.ninja.stage.textTool.element.style.display = "block";
106 this.application.ninja.stage.textTool.element.style.position = "absolute";
107
108 // Set Top & Left Positions
109 var textToolCoordinates = this.application.ninja.stage.toViewportCoordinates(this.selectedElement.offsetLeft, this.selectedElement.offsetTop);
110 this.application.ninja.stage.textTool.element.style.left = textToolCoordinates[0] + "px";
111 this.application.ninja.stage.textTool.element.style.top = textToolCoordinates[1] + "px";
112
113 // Set Width, Height
114 this.application.ninja.stage.textTool.element.style.width = this.selectedElement.offsetWidth + "px";
115 this.application.ninja.stage.textTool.element.style.height = this.selectedElement.offsetHeight + "px";
116
117
118 // Set font styling (Size, Style, Weight)
119
120 me = this;
121 this.application.ninja.stage.textTool.didDraw = function() {
122 me.applyElementStyles(me.selectedElement, me.application.ninja.stage.textTool.element, ["overflow"]);
123 me.applyElementStyles(me.selectedElement, me.application.ninja.stage.textTool.element.firstChild, ["font","padding-left","padding-top","padding-right","padding-bottom", "color"]);
124 var range = document.createRange(),
125 sel = window.getSelection();
126 sel.removeAllRanges();
127 range.selectNodeContents(this.application.ninja.stage.textTool.element.firstChild);
128 sel.addRange(range);
129 this.didDraw = function() {};
130 console.log("im drew here");
131 }
132 console.log("i end here");
133 }
134 },
135
136
137 deselectText: {
138 value: function() {
139 this.application.ninja.stage.textTool.element.style.display = "none";
140 this.selectedElement.innerHTML = this.application.ninja.stage.textTool.value;
141 this.application.ninja.stage.textTool.value = "";
142 }
143 },
144
145 HandleDoubleClick: { 65 HandleDoubleClick: {
146 value: function(e) { 66 value: function(e) {
147 //this.application.ninja.selectedElements[0]._element.setAttribute("contenteditable", true); 67 console.log(this.application.ninja.selectedElements[0]._element);
148 68 this.application.ninja.selectedElements[0]._element.setAttribute("contenteditable", true);
149 //if (!this.application.ninja.textTool) { 69 this.application.ninja.stage._iframeContainer.style.zIndex = 200;
150 70 this.application.ninja.selectedElements[0]._element.focus();
151 //}
152
153 71
154 72
155 } 73 }
@@ -157,12 +75,10 @@ exports.TextTool = Montage.create(DrawingTool, {
157 75
158 Configure: { 76 Configure: {
159 value: function(wasSelected) { 77 value: function(wasSelected) {
160
161 if(wasSelected) { 78 if(wasSelected) {
162 NJevent("enableStageMove"); 79 NJevent("enableStageMove");
163 this.application.ninja.stage.stageDeps.snapManager.setupDragPlaneFromPlane( workingPlane ); 80 this.application.ninja.stage.stageDeps.snapManager.setupDragPlaneFromPlane( workingPlane );
164 } else { 81 } else {
165 this.deselectText();
166 NJevent("disableStageMove"); 82 NJevent("disableStageMove");
167 } 83 }
168 } 84 }