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