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