diff options
Diffstat (limited to 'js/tools')
-rwxr-xr-x | js/tools/TagTool.js | 151 |
1 files changed, 53 insertions, 98 deletions
diff --git a/js/tools/TagTool.js b/js/tools/TagTool.js index d946db72..6c999df9 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,82 +66,60 @@ 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) { | 78 | insertElement: { |
102 | if(event.metaKey) { | 79 | value: function(drawData) { |
103 | // TODO fix this | 80 | var element, styles; |
104 | if(selectionManagerModule.selectionManager.isDocument) { | ||
105 | this.editSymbol = documentManagerModule.DocumentManager.activeDocument.documentRoot; | ||
106 | } else { | ||
107 | this.editSymbol = selectionManagerModule.selectionManager._selectedItems[0]; | ||
108 | } | ||
109 | 81 | ||
82 | // Create the element | ||
83 | if(this.options.selectedElement === "custom") { | ||
84 | element = document.application.njUtils.make(this.options.customName.value, null, this.application.ninja.currentDocument); | ||
85 | } else { | ||
86 | element = document.application.njUtils.make(this.options.selectedElement, null, this.application.ninja.currentDocument); | ||
110 | } | 87 | } |
111 | } | ||
112 | }, | ||
113 | 88 | ||
89 | // Create the model | ||
90 | document.application.njUtils.createModel(element); | ||
114 | 91 | ||
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 | 92 | ||
124 | Configure: { | 93 | // Create the styles |
125 | value: function(wasSelected) { | 94 | styles = this.makeStylesFromDraw(drawData); |
126 | if(wasSelected) { | 95 | if(element.nodeName === "CANVAS") { |
127 | NJevent("enableStageMove"); | 96 | element.width = parseInt(styles.width); |
128 | this.application.ninja.stage.stageDeps.snapManager.setupDragPlaneFromPlane( workingPlane ); | 97 | element.height = parseInt(styles.height); |
129 | } else { | 98 | delete styles['width']; |
130 | NJevent("disableStageMove"); | 99 | delete styles['height']; |
131 | } | 100 | } |
101 | |||
102 | // Add the element and styles | ||
103 | this.application.ninja.elementMediator.addElements(element, styles); | ||
132 | } | 104 | } |
133 | }, | 105 | }, |
134 | |||
135 | insertElement: { | ||
136 | value: function(data) { | ||
137 | var element; | ||
138 | 106 | ||
139 | // TODO Refactor into 1 function | 107 | makeStylesFromDraw: { |
140 | if(data) { | 108 | value: function(drawData) { |
141 | // Get Tag & CSS -- ~~ shortcut for ABS | 109 | var styles = {}; |
142 | element = this.makeElement(~~data.width, ~~data.height, data.planeMat, data.midPt, this.makeTag()); | ||
143 | 110 | ||
144 | // Insert Element | 111 | styles['position'] = "absolute"; |
145 | this.application.ninja.elementMediator.addElements(element.el, element.data); | 112 | styles['left'] = (Math.round(drawData.midPt[0] - 0.5 * ~~drawData.width)) - this.application.ninja.currentSelectedContainer.offsetLeft + 'px'; |
146 | } else { | 113 | styles['top'] = (Math.round(drawData.midPt[1] - 0.5 * ~~drawData.height)) - this.application.ninja.currentSelectedContainer.offsetTop + 'px'; |
147 | element = this.makeStaticElement(this.makeTag()); | 114 | styles['width'] = ~~drawData.width + 'px'; |
148 | this._insertStatic(this.editSymbol, element.el, element.style); | 115 | styles['height'] = ~~drawData.height + 'px'; |
116 | |||
117 | if(!MathUtils.isIdentityMatrix(drawData.planeMat)) { | ||
118 | styles['-webkit-transform-style'] = 'preserve-3d'; | ||
119 | styles['-webkit-transform'] = DrawingToolBase.getElementMatrix(drawData.planeMat, drawData.midPt); | ||
149 | } | 120 | } |
150 | 121 | ||
122 | return styles; | ||
151 | } | 123 | } |
152 | }, | 124 | }, |
153 | 125 | ||
@@ -157,17 +129,17 @@ exports.TagTool = Montage.create(DrawingTool, { | |||
157 | 129 | ||
158 | selectedTag = this.options.selectedElement; | 130 | selectedTag = this.options.selectedElement; |
159 | 131 | ||
160 | if(selectedTag === "divTool") { | 132 | if(selectedTag === "div") { |
161 | newTag = NJUtils.makeNJElement("div", "div", "block"); | 133 | newTag = NJUtils.makeNJElement("div", "div", "block"); |
162 | } else if(selectedTag === "imageTool") { | 134 | } else if(selectedTag === "image") { |
163 | newTag = NJUtils.makeNJElement("image", "image", "image"); | 135 | newTag = NJUtils.makeNJElement("image", "image", "image"); |
164 | } else if(selectedTag === "videoTool") { | 136 | } else if(selectedTag === "video") { |
165 | newTag = NJUtils.makeNJElement("video", "video", "video", { | 137 | newTag = NJUtils.makeNJElement("video", "video", "video", { |
166 | innerHTML: "Your browser does not support the VIDEO element." | 138 | innerHTML: "Your browser does not support the VIDEO element." |
167 | }); | 139 | }); |
168 | } else if(selectedTag === "canvasTool") { | 140 | } else if(selectedTag === "canvas") { |
169 | newTag = NJUtils.makeNJElement("canvas", "canvas", "canvas"); | 141 | newTag = NJUtils.makeNJElement("canvas", "canvas", "canvas"); |
170 | } else if(selectedTag === "customTool") { | 142 | } else if(selectedTag === "custom") { |
171 | newTag = NJUtils.makeNJElement(this.options.customName.value, this.options.customName.value, "block"); | 143 | newTag = NJUtils.makeNJElement(this.options.customName.value, this.options.customName.value, "block"); |
172 | } | 144 | } |
173 | /* SWF Tag tool - Not used for now. Will revisit this at a later time. | 145 | /* SWF Tag tool - Not used for now. Will revisit this at a later time. |
@@ -222,13 +194,13 @@ exports.TagTool = Montage.create(DrawingTool, { | |||
222 | 194 | ||
223 | makeElement: { | 195 | makeElement: { |
224 | value: function(w, h, planeMat, midPt, tag, isShape) { | 196 | value: function(w, h, planeMat, midPt, tag, isShape) { |
225 | var left = Math.round(midPt[0] - 0.5 * w); | 197 | var left = (Math.round(midPt[0] - 0.5 * w)) - this.application.ninja.currentSelectedContainer.offsetLeft + 'px'; |
226 | var top = Math.round(midPt[1] - 0.5 * h); | 198 | var top = (Math.round(midPt[1] - 0.5 * h)) - this.application.ninja.currentSelectedContainer.offsetTop + 'px'; |
227 | 199 | ||
228 | var styles = { | 200 | var styles = { |
229 | 'position': 'absolute', | 201 | 'position': 'absolute', |
230 | 'top' : top + 'px', | 202 | 'top' : top, |
231 | 'left' : left + 'px' | 203 | 'left' : left |
232 | }; | 204 | }; |
233 | 205 | ||
234 | if(!MathUtils.isIdentityMatrix(planeMat)) { | 206 | if(!MathUtils.isIdentityMatrix(planeMat)) { |
@@ -250,23 +222,6 @@ exports.TagTool = Montage.create(DrawingTool, { | |||
250 | 222 | ||
251 | return {el: tag, data:styles}; | 223 | return {el: tag, data:styles}; |
252 | } | 224 | } |
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"; | ||
262 | |||
263 | return {el: tag, data:styles}; | ||
264 | } | ||
265 | }, | ||
266 | |||
267 | _insertStatic: { | ||
268 | value: function(parent, tag, style) { | ||
269 | } | ||
270 | } | 225 | } |
271 | }); | 226 | }); |
272 | 227 | ||