aboutsummaryrefslogtreecommitdiff
path: root/js/tools
diff options
context:
space:
mode:
authorValerio Virgillito2012-02-09 17:22:01 -0800
committerValerio Virgillito2012-02-09 17:22:01 -0800
commit48977780443d97b9e97b047066639c9056788041 (patch)
tree06b27b22e09f91b320dc63cecf7b5dbef674a2fc /js/tools
parentb2155233351966ff579db41a7b85be554c643a97 (diff)
parentce963d45cdf2703d2d4eedfa94394b178f86e0f1 (diff)
downloadninja-48977780443d97b9e97b047066639c9056788041.tar.gz
Merge branch 'text-tool' of https://github.com/dhg637/ninja-internal into feature-branch
Diffstat (limited to 'js/tools')
-rw-r--r--js/tools/TextTool.js97
1 files changed, 90 insertions, 7 deletions
diff --git a/js/tools/TextTool.js b/js/tools/TextTool.js
index 538583ee..760af55b 100644
--- a/js/tools/TextTool.js
+++ b/js/tools/TextTool.js
@@ -6,16 +6,53 @@ 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: {
14 value: function(event) { 41 value: function(event) {
42 this.selectedElement = null;
15 this.startDraw(event); 43 this.startDraw(event);
16 } 44 }
17 }, 45 },
18 46
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
19 HandleMouseMove: { 56 HandleMouseMove: {
20 value: function(event) { 57 value: function(event) {
21 if(this._escape) { 58 if(this._escape) {
@@ -50,24 +87,67 @@ exports.TextTool = Montage.create(DrawingTool, {
50 if(drawData) { 87 if(drawData) {
51 //this.insertElement(drawData); 88 //this.insertElement(drawData);
52 } 89 }
53 90
54 this._hasDraw = false; 91 this._hasDraw = false;
55 this.endDraw(event); 92 this.endDraw(event);
56 } else { 93 } else {
57
58 this.doSelection(event); 94 this.doSelection(event);
59 95 if (this.application.ninja.selectedElements.length !== 0 ) {
96 this.selectedElement = this.application.ninja.selectedElements[0]._element;
97 }
60 this._isDrawing = false; 98 this._isDrawing = false;
61 } 99 }
62 } 100 }
63 }, 101 },
64 102
103 applyElementStyles : {
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
112 drawTextTool: {
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 }
140 }
141 },
142
65 HandleDoubleClick: { 143 HandleDoubleClick: {
66 value: function(e) { 144 value: function(e) {
67 console.log(this.application.ninja.selectedElements[0]._element); 145 //this.application.ninja.selectedElements[0]._element.setAttribute("contenteditable", true);
68 this.application.ninja.selectedElements[0]._element.setAttribute("contenteditable", true); 146
69 this.application.ninja.stage._iframeContainer.style.zIndex = 200; 147 //if (!this.application.ninja.textTool) {
70 this.application.ninja.selectedElements[0]._element.focus(); 148
149 //}
150
71 151
72 152
73 } 153 }
@@ -75,10 +155,13 @@ exports.TextTool = Montage.create(DrawingTool, {
75 155
76 Configure: { 156 Configure: {
77 value: function(wasSelected) { 157 value: function(wasSelected) {
158
78 if(wasSelected) { 159 if(wasSelected) {
79 NJevent("enableStageMove"); 160 NJevent("enableStageMove");
161 this.options.defineInitialProperties();
80 this.application.ninja.stage.stageDeps.snapManager.setupDragPlaneFromPlane( workingPlane ); 162 this.application.ninja.stage.stageDeps.snapManager.setupDragPlaneFromPlane( workingPlane );
81 } else { 163 } else {
164 this.selectedElement = null;
82 NJevent("disableStageMove"); 165 NJevent("disableStageMove");
83 } 166 }
84 } 167 }