copy/paste of multiple div and canvas elements done

Signed-off-by: Ananya Sen <Ananya.Sen@motorola.com>
author: Ananya Sen 2012-05-28 17:00:19 -0700
committer: Ananya Sen 2012-05-28 17:00:19 -0700
commit: 1fcae664691abf8c37ac4ce5d7789153adaffb63 (patch)
tree: 6a91a3d4517f4cd72c0e2e49dbcb79ea812e3a1a /js/controllers
parent: c298c1d5f7e5e53206211717c832091a9a80ddb6 (diff)
download: ninja-1fcae664691abf8c37ac4ce5d7789153adaffb63.tar.gz
1 files changed, 165 insertions, 208 deletions
diff --git a/js/controllers/clipboard-controller.js b/js/controllers/clipboard-controller.js
index 51f4ad14..4be268c7 100644
--- a/js/controllers/clipboard-controller.js
+++ b/js/controllers/clipboard-controller.js
@@ -95,8 +95,10 @@ var ClipboardController = exports.ClipboardController = Montage.create(Component
            if(ninjaData){
                this.pasteFromNinja();
-            }else {
+            }else if(imageData){
-                this.pasteItems(null, htmlData, textData);
+                this.pasteImage(imageData);
+            }else{
+                this.pasteItems(htmlData, textData);
            }
@@ -104,94 +106,177 @@ var ClipboardController = exports.ClipboardController = Montage.create(Component
        }
    },
-    pasteItems:{//todo: change to pasteNinja, pasteHTML, etc
+    /*
-        value: function(ninjaData, htmlData, textData){
+    parameters:
-            var i=0,
+     */
-                pasteDataObject=null,
+    copy:{
-                clipboardHelper=this.createClipboardHelper(),
+        value: function(clipboardEvent){
-                pastedElements = null,
+            var j=0, htmlToClipboard = "", ninjaClipboardObj = {}, textToClipboard = "";
+            this.copiedObjects.length = 0;
+            if(clipboardEvent){
+                for(j=0; j < this.application.ninja.selectedElements.length; j++){//copying from stage
+                    this.copiedObjects.push(this.application.ninja.selectedElements[j]);
+                    if(this.application.ninja.selectedElements[j].tagName === "CANVAS"){
+                        if(!ninjaClipboardObj.canvas){
+                            ninjaClipboardObj.canvas = true;
+                        }
+                    }else{
+                        htmlToClipboard = htmlToClipboard + this.serialize(this.application.ninja.selectedElements[j]);
+                        if(!ninjaClipboardObj.plainHtml){
+                            ninjaClipboardObj.plainHtml = true;
+                        }
+                        textToClipboard = textToClipboard + this.getText(this.application.ninja.selectedElements[j]) + " ";
+                    }
+                }
+                //set clipboard data
+                clipboardEvent.clipboardData.setData('ninja', ''+ JSON.stringify(ninjaClipboardObj));
+                clipboardEvent.clipboardData.setData('text/html', '<HTML><BODY>' + htmlToClipboard + '</BODY></HTML>');
+                clipboardEvent.clipboardData.setData('text/plain', textToClipboard);
+            }
+            else{
+                //TODO: custom copy/paste, ex: css, animation, materials
+            }
+        }
+    },
+    pasteFromNinja:{//todo: change to appropriate name
+        value:function(){
+                var i=0, j=0,
+                pastedElements = [],//array of te pastes clones - for selection
                node = null,
+                styles = null,
+                copiedElement = null;
+            //TODO: cleanse HTML
+            //clear previous selections
+            this.application.ninja.selectedElements.length = 0;
+            NJevent("selectionChange", {"elements": this.application.ninja.selectedElements, "isDocument": true} );
+            for(j=0; j< this.copiedObjects.length; j++){
+                copiedElement = this.copiedObjects[j];
                styles = null;
-            if(htmlData){
+                if (copiedElement.tagName === "CANVAS"){
-                //TODO: cleanse HTML
+                    //clone copied canvas
+                    var canvas = document.application.njUtils.make("canvas", copiedElement.className, this.application.ninja.currentDocument);
+                    canvas.width = copiedElement.width;
+                    canvas.height = copiedElement.height;
+                    //end - clone copied canvas
-                this.application.ninja.selectedElements.length = 0;
+                    if (!canvas.getAttribute( "data-RDGE-id" )) canvas.setAttribute( "data-RDGE-id", NJUtils.generateRandom() );
-                NJevent("selectionChange", {"elements": this.application.ninja.selectedElements, "isDocument": true} );
+                    document.application.njUtils.createModelWithShape(canvas);
-                clipboardHelper.innerHTML = htmlData;//add the copied html to generate the nodes
+                    styles = canvas.elementModel.data || {};
+                    styles.top = "" + (this.application.ninja.elementMediator.getProperty(copiedElement, "top", parseInt) - 50) + "px";
+                    styles.left = "" + (this.application.ninja.elementMediator.getProperty(copiedElement, "left", parseInt) - 50) + "px";
-                while(clipboardHelper.hasChildNodes()){
+                    this.application.ninja.elementMediator.addElements(canvas, styles, false);
-                    if(clipboardHelper.lastChild.tagName === "META") {
-                        clipboardHelper.removeChild(clipboardHelper.lastChild);//remove unnecesary meta tag
+                    var world, worldData = copiedElement.elementModel.shapeModel.GLWorld.exportJSON();
-                    }
+                    if(worldData)
-                    else if (clipboardHelper.lastChild.tagName === "CANVAS"){//temporary - we probably won't need to serialize this to the system clipboard
+                    {
+                        var jObj;
+                        var index = worldData.indexOf( ';' );
+                        if ((worldData[0] === 'v') && (index < 24))
+                        {
+                            // JSON format.  separate the version info from the JSON info
+                            var jStr = worldData.substr( index+1 );
+                            jObj = JSON.parse( jStr );
+                            world = new World(canvas, jObj.webGL);
+                            canvas.elementModel.shapeModel.GLWorld = world;
+                            canvas.elementModel.shapeModel.useWebGl = jObj.webGL;
+                            world.importJSON(jObj);
+                            this.application.ninja.currentDocument.buildShapeModel( canvas.elementModel, world );
+                        }
+                   }
-                        //only handling 1 canvas for POC
+                    NJevent("elementAdded", canvas);
+                    pastedElements.push(canvas);
+                }
+                else {
+                    node = copiedElement.cloneNode(true);
-                        //clone copied canvas
+                    if(node.removeAttribute) {node.removeAttribute("style");}//remove the computed styles attribute which is placed only for pasting to external applications
-                        var canvas = document.application.njUtils.make("canvas", this.copiedObjects.className, this.application.ninja.currentDocument);
-                        canvas.width = this.copiedObjects.width;
-                        canvas.height = this.copiedObjects.height;
-                        //end - clone copied canvas
-                        if (!canvas.getAttribute( "data-RDGE-id" )) canvas.setAttribute( "data-RDGE-id", NJUtils.generateRandom() );
+                    styles = {};
-                        document.application.njUtils.createModelWithShape(canvas);
+                    styles.top = "" + (this.application.ninja.elementMediator.getProperty(copiedElement, "top", parseInt) - 50) + "px";
+                    styles.left = "" + (this.application.ninja.elementMediator.getProperty(copiedElement, "left", parseInt) - 50) + "px";
-                        styles = canvas.elementModel.data || {};
+                    this.pastePositioned(node, styles);
-                        styles.top = "" + (this.application.ninja.elementMediator.getProperty(this.copiedObjects, "top", parseInt) - 50) + "px";
+                    pastedElements.push(node);
-                        styles.left = "" + (this.application.ninja.elementMediator.getProperty(this.copiedObjects, "left", parseInt) - 50) + "px";
+                }
-                        this.application.ninja.elementMediator.addElements(canvas, styles, false);
+            }
-                        var world, worldData = this.copiedObjects.elementModel.shapeModel.GLWorld.exportJSON();
-                        if(worldData)
-                        {
-                            var jObj;
+            //this.application.ninja.selectionController.selectElements(pastedElements);//select pasted elements - not working!
-                            var index = worldData.indexOf( ';' );
-                            if ((worldData[0] === 'v') && (index < 24))
-                            {
-                                // JSON format.  separate the version info from the JSON info
-                                var jStr = worldData.substr( index+1 );
-                                jObj = JSON.parse( jStr );
-                                world = new World(canvas, jObj.webGL);
-                                canvas.elementModel.shapeModel.GLWorld = world;
-                                canvas.elementModel.shapeModel.useWebGl = jObj.webGL;
-                                world.importJSON(jObj);
-                                this.application.ninja.currentDocument.buildShapeModel( canvas.elementModel, world );
-                            }
-                       }
+            this.application.ninja.documentController.activeDocument.needsSave = true;
+        }
+    },
+    //paste from external applicaitons
+    pasteItems:{//todo: change to pasteNinja, pasteHTML, etc
+        value: function(htmlData, textData){
+            var i=0,
+                pasteDataObject=null,
+                clipboardHelper=this.createClipboardHelper(),
+                pastedElements = null,
+                node = null,
+                styles = null,
+                divWrapper = null,
+                spanWrapper = null;
+            if(htmlData){
+                //TODO: cleanse HTML
-                        NJevent("elementAdded", canvas);
+                this.application.ninja.selectedElements.length = 0;
+                NJevent("selectionChange", {"elements": this.application.ninja.selectedElements, "isDocument": true} );
+                clipboardHelper.innerHTML = htmlData;//todo:remove html and body tags
+                while(clipboardHelper.hasChildNodes()){
+                    if(clipboardHelper.lastChild.tagName === "META") {
+                        clipboardHelper.removeChild(clipboardHelper.lastChild);//remove unnecesary meta tag
+                    }
+                    else if (clipboardHelper.lastChild.tagName === "CANVAS"){
+                        //can't paste external canvas for lack of all metadata
                        clipboardHelper.removeChild(clipboardHelper.lastChild);
author	Ananya Sen	2012-05-28 17:00:19 -0700
committer	Ananya Sen	2012-05-28 17:00:19 -0700
commit	1fcae664691abf8c37ac4ce5d7789153adaffb63 (patch)
tree	6a91a3d4517f4cd72c0e2e49dbcb79ea812e3a1a /js/controllers
parent	c298c1d5f7e5e53206211717c832091a9a80ddb6 (diff)
download	ninja-1fcae664691abf8c37ac4ce5d7789153adaffb63.tar.gz

diff --git a/js/controllers/clipboard-controller.js b/js/controllers/clipboard-controller.js index 51f4ad14..4be268c7 100644 --- a/js/controllers/clipboard-controller.js +++ b/js/controllers/clipboard-controller.js
@@ -95,8 +95,10 @@ var ClipboardController = exports.ClipboardController = Montage.create(Component
95		95
96	if(ninjaData){	96	if(ninjaData){
97	this.pasteFromNinja();	97	this.pasteFromNinja();
98	}else {	98	}else if(imageData){
99	this.pasteItems(null, htmlData, textData);	99	this.pasteImage(imageData);
		100	}else{
		101	this.pasteItems(htmlData, textData);
100	}	102	}
101		103
102		104
@@ -104,94 +106,177 @@ var ClipboardController = exports.ClipboardController = Montage.create(Component
104	}	106	}
105	},	107	},
106		108
107	pasteItems:{//todo: change to pasteNinja, pasteHTML, etc	109	/*
108	value: function(ninjaData, htmlData, textData){	110	parameters:
109	var i=0,	111	*/
110	pasteDataObject=null,	112	copy:{
111	clipboardHelper=this.createClipboardHelper(),	113	value: function(clipboardEvent){
112	pastedElements = null,	114	var j=0, htmlToClipboard = "", ninjaClipboardObj = {}, textToClipboard = "";
		115	this.copiedObjects.length = 0;
		116
		117	if(clipboardEvent){
		118	for(j=0; j < this.application.ninja.selectedElements.length; j++){//copying from stage
		119	this.copiedObjects.push(this.application.ninja.selectedElements[j]);
		120
		121	if(this.application.ninja.selectedElements[j].tagName === "CANVAS"){
		122	if(!ninjaClipboardObj.canvas){
		123	ninjaClipboardObj.canvas = true;
		124	}
		125	}else{
		126	htmlToClipboard = htmlToClipboard + this.serialize(this.application.ninja.selectedElements[j]);
		127	if(!ninjaClipboardObj.plainHtml){
		128	ninjaClipboardObj.plainHtml = true;
		129	}
		130	textToClipboard = textToClipboard + this.getText(this.application.ninja.selectedElements[j]) + " ";
		131	}
		132
		133	}
		134	//set clipboard data
		135	clipboardEvent.clipboardData.setData('ninja', ''+ JSON.stringify(ninjaClipboardObj));
		136	clipboardEvent.clipboardData.setData('text/html', '<HTML><BODY>' + htmlToClipboard + '</BODY></HTML>');
		137	clipboardEvent.clipboardData.setData('text/plain', textToClipboard);
		138	}
		139	else{
		140	//TODO: custom copy/paste, ex: css, animation, materials
		141	}
		142	}
		143	},
		144
		145	pasteFromNinja:{//todo: change to appropriate name
		146	value:function(){
		147	var i=0, j=0,
		148	pastedElements = [],//array of te pastes clones - for selection
113	node = null,	149	node = null,
		150	styles = null,
		151	copiedElement = null;
		152
		153	//TODO: cleanse HTML
		154
		155	//clear previous selections
		156	this.application.ninja.selectedElements.length = 0;
		157	NJevent("selectionChange", {"elements": this.application.ninja.selectedElements, "isDocument": true} );
		158
		159
		160	for(j=0; j< this.copiedObjects.length; j++){
		161	copiedElement = this.copiedObjects[j];
114	styles = null;	162	styles = null;
115		163
116	if(htmlData){	164	if (copiedElement.tagName === "CANVAS"){
117	//TODO: cleanse HTML	165	//clone copied canvas
		166	var canvas = document.application.njUtils.make("canvas", copiedElement.className, this.application.ninja.currentDocument);
		167	canvas.width = copiedElement.width;
		168	canvas.height = copiedElement.height;
		169	//end - clone copied canvas
118		170
119	this.application.ninja.selectedElements.length = 0;	171	if (!canvas.getAttribute( "data-RDGE-id" )) canvas.setAttribute( "data-RDGE-id", NJUtils.generateRandom() );
120	NJevent("selectionChange", {"elements": this.application.ninja.selectedElements, "isDocument": true} );	172	document.application.njUtils.createModelWithShape(canvas);
121		173
122	clipboardHelper.innerHTML = htmlData;//add the copied html to generate the nodes	174	styles = canvas.elementModel.data \|\| {};
		175	styles.top = "" + (this.application.ninja.elementMediator.getProperty(copiedElement, "top", parseInt) - 50) + "px";
		176	styles.left = "" + (this.application.ninja.elementMediator.getProperty(copiedElement, "left", parseInt) - 50) + "px";
123		177
124	while(clipboardHelper.hasChildNodes()){	178	this.application.ninja.elementMediator.addElements(canvas, styles, false);
125	if(clipboardHelper.lastChild.tagName === "META") {	179
126	clipboardHelper.removeChild(clipboardHelper.lastChild);//remove unnecesary meta tag	180	var world, worldData = copiedElement.elementModel.shapeModel.GLWorld.exportJSON();
127	}	181	if(worldData)
128	else if (clipboardHelper.lastChild.tagName === "CANVAS"){//temporary - we probably won't need to serialize this to the system clipboard	182	{
		183	var jObj;
		184	var index = worldData.indexOf( ';' );
		185	if ((worldData[0] === 'v') && (index < 24))
		186	{
		187	// JSON format. separate the version info from the JSON info
		188	var jStr = worldData.substr( index+1 );
		189	jObj = JSON.parse( jStr );
		190
		191	world = new World(canvas, jObj.webGL);
		192	canvas.elementModel.shapeModel.GLWorld = world;
		193	canvas.elementModel.shapeModel.useWebGl = jObj.webGL;
		194	world.importJSON(jObj);
		195	this.application.ninja.currentDocument.buildShapeModel( canvas.elementModel, world );
		196	}
		197	}
129		198
130	//only handling 1 canvas for POC	199	NJevent("elementAdded", canvas);
131		200
		201	pastedElements.push(canvas);
		202	}
		203	else {
		204	node = copiedElement.cloneNode(true);
132		205
133	//clone copied canvas	206	if(node.removeAttribute) {node.removeAttribute("style");}//remove the computed styles attribute which is placed only for pasting to external applications
134	var canvas = document.application.njUtils.make("canvas", this.copiedObjects.className, this.application.ninja.currentDocument);
135	canvas.width = this.copiedObjects.width;
136	canvas.height = this.copiedObjects.height;
137	//end - clone copied canvas
138		207
139	if (!canvas.getAttribute( "data-RDGE-id" )) canvas.setAttribute( "data-RDGE-id", NJUtils.generateRandom() );	208	styles = {};
140	document.application.njUtils.createModelWithShape(canvas);	209	styles.top = "" + (this.application.ninja.elementMediator.getProperty(copiedElement, "top", parseInt) - 50) + "px";
		210	styles.left = "" + (this.application.ninja.elementMediator.getProperty(copiedElement, "left", parseInt) - 50) + "px";
141		211
142	styles = canvas.elementModel.data \|\| {};	212	this.pastePositioned(node, styles);
143	styles.top = "" + (this.application.ninja.elementMediator.getProperty(this.copiedObjects, "top", parseInt) - 50) + "px";	213	pastedElements.push(node);
144	styles.left = "" + (this.application.ninja.elementMediator.getProperty(this.copiedObjects, "left", parseInt) - 50) + "px";	214	}
145		215
146	this.application.ninja.elementMediator.addElements(canvas, styles, false);	216	}
147		217
148	var world, worldData = this.copiedObjects.elementModel.shapeModel.GLWorld.exportJSON();
149	if(worldData)
150	{
151		218
152	var jObj;	219	//this.application.ninja.selectionController.selectElements(pastedElements);//select pasted elements - not working!
153	var index = worldData.indexOf( ';' );
154	if ((worldData[0] === 'v') && (index < 24))
155	{
156	// JSON format. separate the version info from the JSON info
157	var jStr = worldData.substr( index+1 );
158	jObj = JSON.parse( jStr );
159		220
160	world = new World(canvas, jObj.webGL);
161	canvas.elementModel.shapeModel.GLWorld = world;
162	canvas.elementModel.shapeModel.useWebGl = jObj.webGL;
163	world.importJSON(jObj);
164	this.application.ninja.currentDocument.buildShapeModel( canvas.elementModel, world );
165	}
166		221
167	}	222	this.application.ninja.documentController.activeDocument.needsSave = true;
		223	}
		224	},
		225
		226	//paste from external applicaitons
		227	pasteItems:{//todo: change to pasteNinja, pasteHTML, etc
		228	value: function(htmlData, textData){
		229	var i=0,
		230	pasteDataObject=null,
		231	clipboardHelper=this.createClipboardHelper(),
		232	pastedElements = null,
		233	node = null,
		234	styles = null,
		235	divWrapper = null,
		236	spanWrapper = null;
		237
		238	if(htmlData){
		239	//TODO: cleanse HTML
168		240
169	NJevent("elementAdded", canvas);	241	this.application.ninja.selectedElements.length = 0;
		242	NJevent("selectionChange", {"elements": this.application.ninja.selectedElements, "isDocument": true} );
170		243
		244	clipboardHelper.innerHTML = htmlData;//todo:remove html and body tags
171		245
		246	while(clipboardHelper.hasChildNodes()){
		247	if(clipboardHelper.lastChild.tagName === "META") {
		248	clipboardHelper.removeChild(clipboardHelper.lastChild);//remove unnecesary meta tag
		249	}
		250	else if (clipboardHelper.lastChild.tagName === "CANVAS"){
		251	//can't paste external canvas for lack of all metadata
172	clipboardHelper.removeChild(clipboardHelper.lastChild);	252	clipboardHelper.removeChild(clipboardHelper.lastChild);