diff options
Diffstat (limited to 'js/controllers')
-rw-r--r-- | js/controllers/clipboard-controller.js | 268 |
1 files changed, 210 insertions, 58 deletions
diff --git a/js/controllers/clipboard-controller.js b/js/controllers/clipboard-controller.js index 7b4f8f32..354933a1 100644 --- a/js/controllers/clipboard-controller.js +++ b/js/controllers/clipboard-controller.js | |||
@@ -9,9 +9,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
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, | 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; | ||
15 | 13 | ||
16 | var ClipboardController = exports.ClipboardController = Montage.create(Component, { | 14 | var ClipboardController = exports.ClipboardController = Montage.create(Component, { |
17 | hasTemplate: { | 15 | hasTemplate: { |
@@ -33,7 +31,7 @@ var ClipboardController = exports.ClipboardController = Montage.create(Component | |||
33 | }, | 31 | }, |
34 | 32 | ||
35 | copiedObjects:{ | 33 | copiedObjects:{ |
36 | value: null | 34 | value: [] |
37 | }, | 35 | }, |
38 | 36 | ||
39 | _copyFlag:{ | 37 | _copyFlag:{ |
@@ -67,43 +65,12 @@ var ClipboardController = exports.ClipboardController = Montage.create(Component | |||
67 | }, | 65 | }, |
68 | 66 | ||
69 | handleCopy:{ | 67 | handleCopy:{ |
70 | value:function(clipboardEvent){ | 68 | value:function(clipboardEvent, test){ |
71 | var elem = null, computedStyles = null, originalStyleAttr = null, computedStylesStr = "", i=0, stylePropertyName=""; | ||
72 | if(this.application.ninja.documentController.activeDocument.currentView === "code") return; | 69 | if(this.application.ninja.documentController.activeDocument.currentView === "code") return; |
73 | 70 | ||
74 | if(this.application.ninja.selectedElements.length > 0){ | 71 | this.copy(clipboardEvent); |
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 | } | ||
80 | |||
81 | elem = this.application.ninja.selectedElements[0]; | ||
82 | originalStyleAttr = elem.getAttribute("style");//preserve the current styles | ||
83 | elem.removeAttribute("style"); | ||
84 | 72 | ||
85 | //build the computed style attribute | 73 | clipboardEvent.preventDefault(); |
86 | computedStyles = elem.ownerDocument.defaultView.getComputedStyle(elem); | ||
87 | |||
88 | //todo: consider cleaning up the position data [or making posiiton:relative with 0,0] from the computed styles, | ||
89 | // so that the object is pasted onto expernal applicaitons [like gmail] with no offset | ||
90 | |||
91 | for (i = 0; i < computedStyles.length; i++) { | ||
92 | stylePropertyName = computedStyles[i]; | ||
93 | computedStylesStr = computedStylesStr + stylePropertyName + ":" + computedStyles.getPropertyValue(stylePropertyName) + ";"; | ||
94 | } | ||
95 | elem.setAttribute("style", computedStylesStr); | ||
96 | |||
97 | //set clipboard data | ||
98 | clipboardEvent.clipboardData.setData('text/html', ''+this.application.ninja.selectedElements[0].outerHTML);//copying first selected element for POC | ||
99 | //clipboardEvent.clipboardData.setData('ninja', 'test');//works | ||
100 | |||
101 | elem.setAttribute("style", originalStyleAttr);//reset style after copying to clipboard | ||
102 | |||
103 | //end - handling 1 selected element | ||
104 | |||
105 | clipboardEvent.preventDefault(); | ||
106 | } | ||
107 | } | 74 | } |
108 | }, | 75 | }, |
109 | 76 | ||
@@ -114,27 +81,125 @@ var ClipboardController = exports.ClipboardController = Montage.create(Component | |||
114 | //TODO: return if stage is not focussed | 81 | //TODO: return if stage is not focussed |
115 | 82 | ||
116 | var clipboardData = clipboardEvent.clipboardData, | 83 | var clipboardData = clipboardEvent.clipboardData, |
84 | ninjaData = clipboardData.getData("ninja"), | ||
117 | htmlData = clipboardData.getData("text/html"), | 85 | htmlData = clipboardData.getData("text/html"), |
118 | textData = clipboardData.getData("text/plain"); | 86 | textData = clipboardData.getData("text/plain"); |
119 | 87 | ||
120 | this.pasteItems(htmlData, textData); | 88 | this.pasteItems(ninjaData, htmlData, textData); |
121 | 89 | ||
122 | clipboardEvent.preventDefault(); | 90 | clipboardEvent.preventDefault(); |
123 | } | 91 | } |
124 | }, | 92 | }, |
125 | 93 | ||
126 | pasteItems:{ | 94 | pasteItems:{//todo: change to pasteNinja, pasteHTML, etc |
127 | value: function(htmlData, textData){ | 95 | value: function(ninjaData, htmlData, textData){ |
128 | var data = null, i=0, | 96 | var i=0, |
129 | pasteDataObject=null, | 97 | pasteDataObject=null, |
130 | clipboardHelper=this.createClipboardHelper(), | 98 | clipboardHelper=this.createClipboardHelper(), |
131 | pastedElements = null, | 99 | pastedElements = null, |
132 | node = null, | 100 | node = null, |
133 | styles = null; | 101 | styles = null; |
134 | 102 | ||
135 | data = htmlData || textData; | 103 | if(ninjaData){//=> copy from ninja |
104 | //paste using in-memory clipboard helper | ||
105 | |||
106 | |||
107 | |||
136 | 108 | ||
137 | if(htmlData){ | 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){ | ||
138 | //TODO: cleanse HTML | 203 | //TODO: cleanse HTML |
139 | 204 | ||
140 | this.application.ninja.selectedElements.length = 0; | 205 | this.application.ninja.selectedElements.length = 0; |
@@ -259,20 +324,6 @@ var ClipboardController = exports.ClipboardController = Montage.create(Component | |||
259 | } | 324 | } |
260 | }, | 325 |