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