diff options
-rw-r--r-- | js/controllers/clipboard-controller.js | 105 | ||||
-rwxr-xr-x | js/controllers/styles-controller.js | 70 |
2 files changed, 144 insertions, 31 deletions
diff --git a/js/controllers/clipboard-controller.js b/js/controllers/clipboard-controller.js index b023d37c..6ac90d96 100644 --- a/js/controllers/clipboard-controller.js +++ b/js/controllers/clipboard-controller.js | |||
@@ -8,7 +8,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
8 | // | 8 | // |
9 | var Montage = require("montage/core/core").Montage, | 9 | var Montage = require("montage/core/core").Montage, |
10 | Component = require("montage/ui/component").Component, | 10 | Component = require("montage/ui/component").Component, |
11 | NJUtils = require("js/lib/NJUtils").NJUtils; | 11 | NJUtils = require("js/lib/NJUtils").NJUtils, |
12 | World = require("js/lib/drawing/world").World, | ||
13 | ShapesController = require("js/controllers/elements/shapes-controller").ShapesController, | ||
14 | ShapeModel = require("js/models/shape-model").ShapeModel; | ||
12 | 15 | ||
13 | var ClipboardController = exports.ClipboardController = Montage.create(Component, { | 16 | var ClipboardController = exports.ClipboardController = Montage.create(Component, { |
14 | hasTemplate: { | 17 | hasTemplate: { |
@@ -29,6 +32,10 @@ var ClipboardController = exports.ClipboardController = Montage.create(Component | |||
29 | } | 32 | } |
30 | }, | 33 | }, |
31 | 34 | ||
35 | copiedObjects:{ | ||
36 | value: null | ||
37 | }, | ||
38 | |||
32 | _copyFlag:{ | 39 | _copyFlag:{ |
33 | value:false | 40 | value:false |
34 | }, | 41 | }, |
@@ -65,7 +72,11 @@ var ClipboardController = exports.ClipboardController = Montage.create(Component | |||
65 | if(this.application.ninja.documentController.activeDocument.currentView === "code") return; | 72 | if(this.application.ninja.documentController.activeDocument.currentView === "code") return; |
66 | 73 | ||
67 | if(this.application.ninja.selectedElements.length > 0){ | 74 | if(this.application.ninja.selectedElements.length > 0){ |
68 | //handling 1 selected element | 75 | //handling 1 selected element for now |
76 | |||
77 | if(this.application.ninja.selectedElements[0].tagName === "CANVAS"){ | ||
78 | this.copiedObjects = this.application.ninja.selectedElements[0]; | ||
79 | } | ||
69 | 80 | ||
70 | elem = this.application.ninja.selectedElements[0]; | 81 | elem = this.application.ninja.selectedElements[0]; |
71 | originalStyleAttr = elem.getAttribute("style");//preserve the current styles | 82 | originalStyleAttr = elem.getAttribute("style");//preserve the current styles |
@@ -100,6 +111,8 @@ var ClipboardController = exports.ClipboardController = Montage.create(Component | |||
100 | value:function(clipboardEvent){ | 111 | value:function(clipboardEvent){ |
101 | if(this.application.ninja.documentController.activeDocument.currentView === "code") return; | 112 | if(this.application.ninja.documentController.activeDocument.currentView === "code") return; |
102 | 113 | ||
114 | //TODO: return if stage is not focussed | ||
115 | |||
103 | var clipboardData = clipboardEvent.clipboardData, | 116 | var clipboardData = clipboardEvent.clipboardData, |
104 | htmlData = clipboardData.getData("text/html"), | 117 | htmlData = clipboardData.getData("text/html"), |
105 | textData = clipboardData.getData("text/plain"); | 118 | textData = clipboardData.getData("text/plain"); |
@@ -121,41 +134,103 @@ var ClipboardController = exports.ClipboardController = Montage.create(Component | |||
121 | 134 | ||
122 | data = htmlData || textData; | 135 | data = htmlData || textData; |
123 | 136 | ||
124 | if(data){ | 137 | if(htmlData){ |
125 | //TODO: cleanse HTML | 138 | //TODO: cleanse HTML |
126 | 139 | ||
127 | this.application.ninja.selectedElements.length = 0; | 140 | this.application.ninja.selectedElements.length = 0; |
128 | NJevent("selectionChange", {"elements": this.application.ninja.selectedElements, "isDocument": true} ); | 141 | NJevent("selectionChange", {"elements": this.application.ninja.selectedElements, "isDocument": true} ); |
129 | 142 | ||
130 | clipboardHelper.innerHTML = data;//add the copied html to generate the nodes | 143 | clipboardHelper.innerHTML = htmlData;//add the copied html to generate the nodes |
131 | 144 | ||
132 | while(clipboardHelper.hasChildNodes()){ | 145 | while(clipboardHelper.hasChildNodes()){ |
133 | if(clipboardHelper.lastChild.tagName !== "META") { | 146 | if(clipboardHelper.lastChild.tagName === "META") { |
134 | node = clipboardHelper.removeChild(clipboardHelper.lastChild); | 147 | clipboardHelper.removeChild(clipboardHelper.lastChild);//remove unnecesary meta tag |
148 | } | ||
149 | else if (clipboardHelper.lastChild.tagName === "CANVAS"){//temporary - we probably won't need to serialize this to the system clipboard | ||
135 | 150 | ||
136 | node.removeAttribute("style");//remove the computed styles attribute which is placed only for pasting to external applications | 151 | //only handling 1 canvas for POC |
137 | 152 | ||
138 | //get class string while copying .... generate styles from class | ||
139 | styles = {"top":"100px", "left":"100px"};//get real stage center coordinates | ||
140 | this.pastePositioned(node, styles); | ||
141 | 153 | ||
154 | //clone copied canvas | ||
155 | var canvas = document.application.njUtils.make("canvas", this.copiedObjects.className, this.application.ninja.currentDocument); | ||
156 | canvas.width = this.copiedObjects.width; | ||
157 | canvas.height = this.copiedObjects.height; | ||
158 | //end - clone copied canvas | ||
159 | |||
160 | if (!canvas.getAttribute( "data-RDGE-id" )) canvas.setAttribute( "data-RDGE-id", NJUtils.generateRandom() ); | ||
161 | document.application.njUtils.createModelWithShape(canvas); | ||
162 | // canvas.elementModel.controller = ShapesController; | ||
163 | // if(!canvas.elementModel.shapeModel) { | ||
164 | // canvas.elementModel.shapeModel = Montage.create(ShapeModel); | ||
165 | // } | ||
166 | styles = canvas.elementModel.data || {}; | ||
167 | styles.top = "" + (this.application.ninja.elementMediator.getProperty(this.copiedObjects, "top", parseInt) - 50) + "px"; | ||
168 | styles.left = "" + (this.application.ninja.elementMediator.getProperty(this.copiedObjects, "left", parseInt) - 50) + "px"; | ||
169 | |||
170 | this.application.ninja.elementMediator.addElements(canvas, styles, false); | ||
171 | |||
172 | var world, worldData = this.copiedObjects.elementModel.shapeModel.GLWorld.exportJSON(); | ||
173 | if(worldData) | ||
174 | { | ||
175 | |||
176 | var jObj; | ||
177 | var index = worldData.indexOf( ';' ); | ||
178 | if ((worldData[0] === 'v') && (index < 24)) | ||
179 | { | ||
180 | // JSON format. separate the version info from the JSON info | ||
181 | //var vStr = importStr.substr( 0, index+1 ); | ||
182 | var jStr = worldData.substr( index+1 ); | ||
183 | jObj = JSON.parse( jStr ); | ||
142 | 184 | ||
185 | world = new World(canvas, jObj.useWebGl); | ||
186 | canvas.elementModel.shapeModel.GLWorld = world; | ||
187 | canvas.elementModel.shapeModel.useWebGl = jObj.useWebGl; | ||
188 | world.importJSON(jObj); | ||
189 | this.application.ninja.currentDocument.buildShapeModel( canvas.elementModel, world ); | ||
190 | } | ||
143 | 191 | ||
192 | } | ||
144 | 193 | ||
145 | //this.pasteInPlace(temp);//does not work now | 194 | NJevent("elementAdded", canvas); |
146 | 195 | ||
147 | 196 | ||
148 | // this.application.ninja.documentController.activeDocument.documentRoot.insertBefore(temp, this.application.ninja.documentController.activeDocument.documentRoot.firstChild); | 197 | clipboardHelper.removeChild(clipboardHelper.lastChild); |
149 | // NJUtils.makeModelFromElement(temp); | 198 | } |
150 | // NJevent("elementAdded", temp); | 199 | else if(clipboardHelper.lastChild.nodeType === 3){//TextNode |
200 | node = clipboardHelper.removeChild(clipboardHelper.lastChild); | ||
201 | |||
202 | //USE styles controller to create the styles of the div and span | ||
203 | var doc = this.application.ninja.currentDocument ? this.application.ninja.currentDocument._document : document; | ||
204 | var aspan = doc.createElement("span"); | ||
205 | aspan.appendChild(node); | ||
206 | var adiv = doc.createElement("div"); | ||
207 | adiv.appendChild(aspan); | ||
208 | styles = {"top":"100px", "left":"100px"}; | ||
209 | |||
151 | 210 | ||
211 | this.pastePositioned(node, styles); | ||
152 | } | 212 | } |
153 | else { | 213 | else { |
154 | clipboardHelper.removeChild(clipboardHelper.lastChild);//remove unnecesary meta tag | 214 | node = clipboardHelper.removeChild(clipboardHelper.lastChild); |
215 | |||
216 | if(node.removeAttribute) {node.removeAttribute("style");}//remove the computed styles attribute which is placed only for pasting to external applications | ||
217 | |||
218 | //get class string while copying .... generate styles from class | ||
219 | //styles = {"top":"100px", "left":"100px"}; | ||
220 | |||
221 | this.pastePositioned(node, styles); | ||
155 | } | 222 | } |
223 | |||
156 | } | 224 | } |
157 | 225 | ||
158 | this.application.ninja.documentController.activeDocument.needsSave = true; | 226 | this.application.ninja.documentController.activeDocument.needsSave = true; |
227 | }else if(textData){ | ||
228 | |||
229 | //USE styles controller to create the styles of the div and span | ||
230 | clipboardHelper.innerHTML = "<div><span>"+ textData +"</span></div>";//add the copied html to generate the nodes | ||
231 | node = clipboardHelper.removeChild(clipboardHelper.lastChild); | ||
232 | styles = {"top":"100px", "left":"100px"};//get real stage center coordinates | ||
233 | this.pastePositioned(node, styles); | ||
159 | } | 234 | } |
160 | 235 | ||
161 | } | 236 | } |
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index 647c0870..cbc00676 100755 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js | |||
@@ -94,11 +94,18 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
94 | // Returns null if sheet not found (as in non-ninja projects) | 94 | // Returns null if sheet not found (as in non-ninja projects) |
95 | // Setter will handle null case | 95 | // Setter will handle null case |
96 | this.defaultStylesheet = this.getSheetFromElement(this.CONST.DEFAULT_SHEET_ID); | 96 | this.defaultStylesheet = this.getSheetFromElement(this.CONST.DEFAULT_SHEET_ID); |
97 | 97 | ||
98 | //debugger; | 98 | this.userStyleSheets = nj.toArray(document._document.styleSheets).filter(function(sheet) { |
99 | return sheet !== this._stageStylesheet; | ||
100 | }, this); | ||
101 | |||
102 | NJevent('styleSheetsReady', this); | ||
99 | }, | 103 | }, |
100 | enumerable : false | 104 | enumerable : false |
101 | }, | 105 | }, |
106 | userStyleSheets : { | ||
107 | value : null | ||
108 | }, | ||
102 | _stageStylesheet : { | 109 | _stageStylesheet : { |
103 | value : null | 110 | value : null |
104 | }, | 111 | }, |
@@ -183,6 +190,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
183 | ///// attach specificity to rule object | 190 | ///// attach specificity to rule object |
184 | ///// if rule is css keyframes, return rule and don't attach specificity | 191 | ///// if rule is css keyframes, return rule and don't attach specificity |
185 | if (rule instanceof WebKitCSSKeyframesRule) { | 192 | if (rule instanceof WebKitCSSKeyframesRule) { |
193 | |||
186 | return rule; | 194 | return rule; |
187 | } |