diff options
Diffstat (limited to 'js/tools/TextTool.js')
-rwxr-xr-x[-rw-r--r--] | js/tools/TextTool.js | 98 |
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 | ||
7 | var Montage = require("montage/core/core").Montage, | 7 | var 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 | ||
10 | exports.TextTool = Montage.create(DrawingTool, { | 11 | exports.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 | } |