diff options
-rw-r--r-- | js/controllers/clipboard-controller.js | 236 |
1 files changed, 126 insertions, 110 deletions
diff --git a/js/controllers/clipboard-controller.js b/js/controllers/clipboard-controller.js index 354933a1..51f4ad14 100644 --- a/js/controllers/clipboard-controller.js +++ b/js/controllers/clipboard-controller.js | |||
@@ -30,6 +30,10 @@ var ClipboardController = exports.ClipboardController = Montage.create(Component | |||
30 | } | 30 | } |
31 | }, | 31 | }, |
32 | 32 | ||
33 | clipboardOperationsAgent:{//appropriate agent instant required for execution of cut/copy/paste | ||
34 | value: null | ||
35 | }, | ||
36 | |||
33 | copiedObjects:{ | 37 | copiedObjects:{ |
34 | value: [] | 38 | value: [] |
35 | }, | 39 | }, |
@@ -76,16 +80,25 @@ var ClipboardController = exports.ClipboardController = Montage.create(Component | |||
76 | 80 | ||
77 | handlePaste:{ | 81 | handlePaste:{ |
78 | value:function(clipboardEvent){ | 82 | value:function(clipboardEvent){ |
79 | if(this.application.ninja.documentController.activeDocument.currentView === "code") return; | 83 | if(this.application.ninja.documentController.activeDocument.currentView === "code") return;//for design view only |
80 | 84 | ||
81 | //TODO: return if stage is not focussed | 85 | //TODO: return if stage is not focussed |
82 | 86 | ||
87 | //identify all types of clipboard data | ||
88 | |||
83 | var clipboardData = clipboardEvent.clipboardData, | 89 | var clipboardData = clipboardEvent.clipboardData, |
84 | ninjaData = clipboardData.getData("ninja"), | 90 | ninjaData = clipboardData.getData("ninja"), |
85 | htmlData = clipboardData.getData("text/html"), | 91 | htmlData = clipboardData.getData("text/html"), |
86 | textData = clipboardData.getData("text/plain"); | 92 | textData = clipboardData.getData("text/plain"), |
93 | imageData = clipboardData.getData("image/png"),//TODO: other img types, tiff, jpeg..... | ||
94 | svgData = clipboardData.getData("image/svg"); | ||
95 | |||
96 | if(ninjaData){ | ||
97 | this.pasteFromNinja(); | ||
98 | }else { | ||
99 | this.pasteItems(null, htmlData, textData); | ||
100 | } | ||
87 | 101 | ||
88 | this.pasteItems(ninjaData, htmlData, textData); | ||
89 | 102 | ||
90 | clipboardEvent.preventDefault(); | 103 | clipboardEvent.preventDefault(); |
91 | } | 104 | } |
@@ -100,106 +113,7 @@ var ClipboardController = exports.ClipboardController = Montage.create(Component | |||
100 | node = null, | 113 | node = null, |
101 | styles = null; | 114 | styles = null; |
102 | 115 | ||
103 | if(ninjaData){//=> copy from ninja | 116 | if(htmlData){ |
104 | //paste using in-memory clipboard helper | ||
105 | |||
106 | |||
107 | |||
108 | |||
109 | //TODO: cleanse HTML | ||
110 | |||
111 | this.application.ninja.selectedElements.length = 0; | ||
112 | NJevent("selectionChange", {"elements": this.application.ninja.selectedElements, "isDocument": true} ); | ||
113 | |||
114 | clipboardHelper.innerHTML = htmlData;//add the copied html to generate the nodes | ||
115 | |||
116 | while(clipboardHelper.hasChildNodes()){ | ||
117 | if(clipboardHelper.lastChild.tagName === "META") { | ||
118 | clipboardHelper.removeChild(clipboardHelper.lastChild);//remove unnecesary meta tag | ||
119 | } | ||
120 | else if (clipboardHelper.lastChild.tagName === "CANVAS"){//temporary - we probably won't need to serialize this to the system clipboard | ||
121 | |||
122 | //only handling 1 canvas for POC | ||
123 | |||
124 | |||
125 | //clone copied canvas | ||
126 | var canvas = document.application.njUtils.make("canvas", this.copiedObjects.className, this.application.ninja.currentDocument); | ||
127 | canvas.width = this.copiedObjects.width; | ||
128 | canvas.height = this.copiedObjects.height; | ||
129 | //end - clone copied canvas | ||
130 | |||
131 | if (!canvas.getAttribute( "data-RDGE-id" )) canvas.setAttribute( "data-RDGE-id", NJUtils.generateRandom() ); | ||
132 | document.application.njUtils.createModelWithShape(canvas); | ||
133 | |||
134 | styles = canvas.elementModel.data || {}; | ||
135 | styles.top = "" + (this.application.ninja.elementMediator.getProperty(this.copiedObjects, "top", parseInt) - 50) + "px"; | ||
136 | styles.left = "" + (this.application.ninja.elementMediator.getProperty(this.copiedObjects, "left", parseInt) - 50) + "px"; | ||
137 | |||
138 | this.application.ninja.elementMediator.addElements(canvas, styles, false); | ||
139 | |||
140 | var world, worldData = this.copiedObjects.elementModel.shapeModel.GLWorld.exportJSON(); | ||
141 | if(worldData) | ||
142 | { | ||
143 | |||
144 | var jObj; | ||
145 | var index = worldData.indexOf( ';' ); | ||
146 | if ((worldData[0] === 'v') && (index < 24)) | ||
147 | { | ||
148 | // JSON format. separate the version info from the JSON info | ||
149 | var jStr = worldData.substr( index+1 ); | ||
150 | jObj = JSON.parse( jStr ); | ||
151 | |||
152 | world = new World(canvas, jObj.webGL); | ||
153 | canvas.elementModel.shapeModel.GLWorld = world; | ||
154 | canvas.elementModel.shapeModel.useWebGl = jObj.webGL; | ||
155 | world.importJSON(jObj); | ||
156 | this.application.ninja.currentDocument.buildShapeModel( canvas.elementModel, world ); | ||
157 | } | ||
158 | |||
159 | } | ||
160 | |||
161 | NJevent("elementAdded", canvas); | ||
162 | |||
163 | |||
164 | clipboardHelper.removeChild(clipboardHelper.lastChild); | ||
165 | } | ||
166 | else if(clipboardHelper.lastChild.nodeType === 3){//TextNode | ||
167 | node = clipboardHelper.removeChild(clipboardHelper.lastChild); | ||
168 | |||
169 | //USE styles controller to create the styles of the div and span | ||
170 | var doc = this.application.ninja.currentDocument ? this.application.ninja.currentDocument._document : document; | ||
171 | var aspan = doc.createElement("span"); | ||
172 | aspan.appendChild(node); | ||
173 | var adiv = doc.createElement("div"); | ||
174 | adiv.appendChild(aspan); | ||
175 | styles = {"top":"100px", "left":"100px"}; | ||
176 | |||
177 | |||
178 | this.pastePositioned(node, styles); | ||
179 | } | ||
180 | else { | ||
181 | node = clipboardHelper.removeChild(clipboardHelper.lastChild); | ||
182 | |||
183 | if(node.removeAttribute) {node.removeAttribute("style");}//remove the computed styles attribute which is placed only for pasting to external applications | ||
184 | |||
185 | //get class string while copying .... generate styles from class | ||
186 | //styles = {"top":"100px", "left":"100px"}; | ||
187 | |||
188 | this.pastePositioned(node, styles); | ||
189 | } | ||
190 | |||
191 | } | ||
192 | |||
193 | this.application.ninja.documentController.activeDocument.needsSave = true; | ||
194 | |||
195 | |||
196 | |||
197 | |||
198 | |||
199 | |||
200 | return; | ||
201 | } | ||
202 | else if(htmlData){ | ||
203 | //TODO: cleanse HTML | 117 | //TODO: cleanse HTML |
204 | 118 | ||
205 | this.application.ninja.selectedElements.length = 0; | 119 | this.application.ninja.selectedElements.length = 0; |
@@ -348,33 +262,38 @@ var ClipboardController = exports.ClipboardController = Montage.create(Component | |||
348 | */ | 262 | */ |
349 | copy:{ | 263 | copy:{ |
350 | value: function(clipboardEvent){ | 264 | value: function(clipboardEvent){ |
351 | var j=0, htmlToClipboard = "", ninjaClipboardObj = {}; | 265 | var j=0, htmlToClipboard = "", ninjaClipboardObj = {}, textToClipboard = ""; |
352 | this.copiedObjects.length = 0; | 266 | this.copiedObjects.length = 0; |
353 | 267 | ||
354 | if(clipboardEvent){ | 268 | if(clipboardEvent){ |
355 | for(j=0; j < this.application.ninja.selectedElements.length; j++){//copying from stage | 269 | for(j=0; j < this.application.ninja.selectedElements.length; j++){//copying from stage |
356 | this.copiedObjects.push(this.application.ninja.selectedElements[j]); | 270 | this.copiedObjects.push(this.application.ninja.selectedElements[j]); |
357 | 271 | ||
358 | if(this.application.ninja.selectedElements[0].tagName === "CANVAS"){ | 272 | if(this.application.ninja.selectedElements[j].tagName === "CANVAS"){ |
359 | if(!ninjaClipboardObj.canvas){ | 273 | if(!ninjaClipboardObj.canvas){ |
360 | ninjaClipboardObj.canvas = true; | 274 | ninjaClipboardObj.canvas = true; |
361 | } | 275 | } |
362 | }else{ | 276 | }else{ |
363 | htmlToClipboard = htmlToClipboard + this.prepareOuterHtml(this.application.ninja.selectedElements[j]); | 277 | htmlToClipboard = htmlToClipboard + this.serialize(this.application.ninja.selectedElements[j]); |
364 | if(!ninjaClipboardObj.plainHtml){ | 278 | if(!ninjaClipboardObj.plainHtml){ |
365 | ninjaClipboardObj.plainHtml = true; | 279 | ninjaClipboardObj.plainHtml = true; |
366 | } | 280 | } |
281 | textToClipboard = textToClipboard + this.getText(this.application.ninja.selectedElements[j]) + " "; | ||
367 | } | 282 | } |
368 | 283 | ||
369 | } | 284 | } |
370 | //set clipboard data | 285 | //set clipboard data |
371 | clipboardEvent.clipboardData.setData('ninja', '' + JSON.stringify(ninjaClipboardObj)); | 286 | clipboardEvent.clipboardData.setData('ninja', ''+ JSON.stringify(ninjaClipboardObj)); |
372 | clipboardEvent.clipboardData.setData('text/html', '<HTML><BODY>' + htmlToClipboard + '</BODY></HTML>');//copying first selected element for POC | 287 | clipboardEvent.clipboardData.setData('text/html', '<HTML><BODY>' + htmlToClipboard + '</BODY></HTML>'); |
288 | clipboardEvent.clipboardData.setData('text/plain', textToClipboard); | ||
289 | } | ||
290 | else{ | ||
291 | //TODO: custom copy/paste, ex: css, animation, materials | ||
373 | } | 292 | } |
374 | } | 293 | } |
375 | }, | 294 | }, |
376 | 295 | ||
377 | prepareOuterHtml:{ | 296 | serialize:{ |
378 | value: function(elem){ | 297 | value: function(elem){ |
379 | var computedStyles = null, originalStyleAttr = null, computedStylesStr = "", i=0, stylePropertyName="", outerHtml = ""; | 298 | var computedStyles = null, originalStyleAttr = null, computedStylesStr = "", i=0, stylePropertyName="", outerHtml = ""; |
380 | 299 | ||
@@ -429,9 +348,94 @@ var ClipboardController = exports.ClipboardController = Montage.create(Component | |||
429 | } | 348 | } |
4 |