diff options
Diffstat (limited to 'js/tools/TagTool.js')
-rwxr-xr-x | js/tools/TagTool.js | 218 |
1 files changed, 23 insertions, 195 deletions
diff --git a/js/tools/TagTool.js b/js/tools/TagTool.js index d946db72..5e9c792b 100755 --- a/js/tools/TagTool.js +++ b/js/tools/TagTool.js | |||
@@ -13,18 +13,14 @@ var DrawingToolBase = require("js/tools/drawing-tool-base").DrawingToolBase; | |||
13 | exports.TagTool = Montage.create(DrawingTool, { | 13 | exports.TagTool = Montage.create(DrawingTool, { |
14 | drawingFeedback: { value: { mode: "Draw3D", type: "rectangle" } }, | 14 | drawingFeedback: { value: { mode: "Draw3D", type: "rectangle" } }, |
15 | 15 | ||
16 | _editSymbol: { value: null }, | 16 | Configure: { |
17 | 17 | value: function(wasSelected) { | |
18 | editSymbol:{ | 18 | if(wasSelected) { |
19 | get: function() { return this._editSymbol; }, | 19 | NJevent("enableStageMove"); |
20 | set: function(item) { | 20 | this.application.ninja.stage.stageDeps.snapManager.setupDragPlaneFromPlane( workingPlane ); |
21 | if(item) { | ||
22 | // stageManagerModule.stageManager.drawElementBoundingBox(item, true); | ||
23 | } else { | 21 | } else { |
24 | // stageManagerModule.stageManager.drawSelectionRec(true); | 22 | NJevent("disableStageMove"); |
25 | } | 23 | } |
26 | |||
27 | this._editSymbol = item; | ||
28 | } | 24 | } |
29 | }, | 25 | }, |
30 | 26 | ||
@@ -59,11 +55,9 @@ exports.TagTool = Montage.create(DrawingTool, { | |||
59 | this._escape = false; | 55 | this._escape = false; |
60 | return; | 56 | return; |
61 | } | 57 | } |
62 | |||
63 | var drawData, selectedItem; | ||
64 | 58 | ||
65 | if(this._hasDraw) { | 59 | if(this._hasDraw) { |
66 | drawData = this.getDrawingData(); | 60 | var drawData = this.getDrawingData(); |
67 | 61 | ||
68 | if(drawData) { | 62 | if(drawData) { |
69 | this.insertElement(drawData); | 63 | this.insertElement(drawData); |
@@ -72,200 +66,34 @@ exports.TagTool = Montage.create(DrawingTool, { | |||
72 | this._hasDraw = false; | 66 | this._hasDraw = false; |
73 | this.endDraw(event); | 67 | this.endDraw(event); |
74 | } else { | 68 | } else { |
75 | if(this.editSymbol) { | 69 | this.doSelection(event); |
76 | this.insertElement(); | ||
77 | } else { | ||
78 | //selectedItem = this.doSelection(event); | ||
79 | this.doSelection(event); | ||
80 | } | ||
81 | |||
82 | this._isDrawing = false; | ||
83 | } | 70 | } |
84 | } | ||
85 | }, | ||
86 | 71 | ||
87 | HandleDoubleClick: { | 72 | this._isDrawing = false; |
88 | value: function(event) { | ||
89 | /* | ||
90 | if(selectionManagerModule.selectionManager.isDocument) { | ||
91 | this.editSymbol = documentManagerModule.DocumentManager.activeDocument.documentRoot; | ||
92 | } else { | ||
93 | this.editSymbol = selectionManagerModule.selectionManager._selectedItems[0]; | ||
94 | } | ||
95 | */ | ||
96 | } | 73 | } |
97 | }, | 74 | }, |
98 | 75 | ||
99 | /* This will overwrite the existing function in drawing tool. Do not uncomment | 76 | // TODO: Fix Classname |
100 | HandleKeyPress: { | 77 | // TODO: Add position support |
101 | value: function(event) { | ||
102 | if(event.metaKey) { | ||
103 | // TODO fix this | ||
104 | if(selectionManagerModule.selectionManager.isDocument) { | ||
105 | this.editSymbol = documentManagerModule.DocumentManager.activeDocument.documentRoot; | ||
106 | } else { | ||
107 | this.editSymbol = selectionManagerModule.selectionManager._selectedItems[0]; | ||
108 | } | ||
109 | |||
110 | } | ||
111 | } | ||
112 | }, | ||
113 | |||
114 | |||
115 | HandleKeyUp: { | ||
116 | value: function(event) { | ||
117 | if(event.keyCode === 93 || event.keyCode === 91) { // Command Keycode | ||
118 | this.editSymbol = null; | ||
119 | } | ||
120 | } | ||
121 | }, | ||
122 | */ | ||
123 | |||
124 | Configure: { | ||
125 | value: function(wasSelected) { | ||
126 | if(wasSelected) { | ||
127 | NJevent("enableStageMove"); | ||
128 | this.application.ninja.stage.stageDeps.snapManager.setupDragPlaneFromPlane( workingPlane ); | ||
129 | } else { | ||
130 | NJevent("disableStageMove"); | ||
131 | } | ||
132 | } | ||
133 | }, | ||
134 | |||
135 | insertElement: { | 78 | insertElement: { |
136 | value: function(data) { | 79 | value: function(drawData) { |
137 | var element; | 80 | var element, styles; |
138 | 81 | ||
139 | // TODO Refactor into 1 function | 82 | // Create the element |
140 | if(data) { | 83 | if(this.options.selectedElement === "custom") { |
141 | // Get Tag & CSS -- ~~ shortcut for ABS | 84 | element = document.application.njUtils.make(this.options.customName.value, null, this.application.ninja.currentDocument); |
142 | element = this.makeElement(~~data.width, ~~data.height, data.planeMat, data.midPt, this.makeTag()); | ||
143 | |||
144 | // Insert Element | ||
145 | this.application.ninja.elementMediator.addElements(element.el, element.data); | ||
146 | } else { | 85 | } else { |
147 | element = this.makeStaticElement(this.makeTag()); | 86 | element = document.application.njUtils.make(this.options.selectedElement, null, this.application.ninja.currentDocument); |
148 | this._insertStatic(this.editSymbol, element.el, element.style); | ||
149 | } | ||
150 | |||
151 | } | ||
152 | }, | ||
153 | |||
154 | makeTag: { | ||
155 | value: function() { | ||
156 | var selectedTag, newTag; | ||
157 | |||
158 | selectedTag = this.options.selectedElement; | ||
159 | |||
160 | if(selectedTag === "divTool") { | ||
161 | newTag = NJUtils.makeNJElement("div", "div", "block"); | ||
162 | } else if(selectedTag === "imageTool") { | ||
163 | newTag = NJUtils.makeNJElement("image", "image", "image"); | ||
164 | } else if(selectedTag === "videoTool") { | ||
165 | newTag = NJUtils.makeNJElement("video", "video", "video", { | ||
166 | innerHTML: "Your browser does not support the VIDEO element." | ||
167 | }); | ||
168 | } else if(selectedTag === "canvasTool") { | ||
169 | newTag = NJUtils.makeNJElement("canvas", "canvas", "canvas"); | ||
170 | } else if(selectedTag === "customTool") { | ||
171 | newTag = NJUtils.makeNJElement(this.options.customName.value, this.options.customName.value, "block"); | ||
172 | } | 87 | } |
173 | /* SWF Tag tool - Not used for now. Will revisit this at a later time. | ||
174 | else if(selectedTag === "flashTool") { | ||
175 | // Generate the swfobject script tag if not found in the user document | ||
176 | // documentControllerModule.DocumentController.SetSWFObjectScript(); | ||
177 | |||
178 | newTag = NJUtils.makeNJElement("object", "Object", "block", { | ||
179 | classId: "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" | ||
180 | }); | ||
181 | |||
182 | var param = NJUtils.makeNJElement("param", "Object", "block", { | ||
183 | name: "movie", | ||
184 | value: "" | ||
185 | }); | ||
186 | 88 | ||
187 | var param2 = NJUtils.makeNJElement("param", "Object","block", { | 89 | // Create the model |
188 | name: "wmode", | 90 | document.application.njUtils.createModel(element); |
189 | value: "transparent" | ||
190 | }); | ||
191 | |||
192 | var param3 = NJUtils.makeNJElement("param", "Object","block", { | ||
193 | name: "play", | ||
194 | value: "false" | ||
195 | }); | ||
196 | |||
197 | |||
198 | newTag.appendChild(param); | ||
199 | newTag.appendChild(param2); | ||
200 | newTag.appendChild(param3); | ||
201 | // TODO Alternative Content | ||
202 | |||
203 | } | ||
204 | */ | ||
205 | else { | ||
206 | console.log("Invalid Tool is selected."); | ||
207 | } | ||
208 | |||
209 | try { | ||
210 | // newTag.className = this.options.classField.value; | ||
211 | // TODO: Fix this one | ||
212 | |||
213 | } | ||
214 | 91 | ||
215 | catch(err) { | 92 | // Create the styles |
216 | console.log("Could not set Tag ID/Class " + err.description); | 93 | styles = document.application.njUtils.stylesFromDraw(element, ~~drawData.width, ~~drawData.height, drawData); |
217 | } | ||
218 | |||
219 | return newTag; | ||
220 | } | ||
221 | }, | ||
222 | |||
223 | makeElement: { | ||
224 | value: function(w, h, planeMat, midPt, tag, isShape) { | ||
225 | var left = Math.round(midPt[0] - 0.5 * w); | ||
226 | var top = Math.round(midPt[1] - 0.5 * h); | ||
227 | |||
228 | var styles = { | ||
229 | 'position': 'absolute', | ||
230 | 'top' : top + 'px', | ||
231 | 'left' : left + 'px' | ||
232 | }; | ||
233 | |||
234 | if(!MathUtils.isIdentityMatrix(planeMat)) { | ||
235 | styles['-webkit-transform-style'] = 'preserve-3d'; | ||
236 | styles['-webkit-transform'] = DrawingToolBase.getElementMatrix(planeMat, midPt); | ||
237 | } else if(isShape) { | ||
238 | styles['-webkit-transform-style'] = 'preserve-3d'; | ||
239 | } | ||
240 | |||
241 | // TODO - for canvas, set both as style and attribute. | ||
242 | // Otherwise, we need to create a separate controller for canvas elements | ||
243 | if(tag.tagName === "CANVAS") { | ||
244 | tag.width = w; | ||
245 | tag.height = h; | ||
246 | } else { | ||
247 | styles['width'] = w + 'px'; | ||
248 | styles['height'] = h + 'px'; | ||
249 | } | ||
250 | |||
251 | return {el: tag, data:styles}; | ||
252 | } | ||
253 | }, | ||
254 | |||
255 | makeStaticElement: { | ||
256 | value: function(tag) { | ||
257 | var styles = { | ||
258 | "-webkit-transform-style": "preserve-3d", | ||
259 | "-webkit-transform": "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)" | ||
260 | }; | ||
261 | tag.innerHTML = "content"; |