From 8db9e73ca68c006769af3997034959f6b7008add Mon Sep 17 00:00:00 2001
From: Ananya Sen
Date: Thu, 21 Jun 2012 11:02:55 -0700
Subject: - added io api to generate file from binary - refactoring and cleanup

Signed-off-by: Ananya Sen <Ananya.Sen@motorola.com>
---
 .../internal-ops/component-clipboard-agent.js      |  40 +++
 js/clipboard/internal-ops/css-clipboard-agent.js   |  40 +++
 .../internal-ops/elements-clipboard-agent.js       | 364 +++++++++++++++++++++
 .../internal-ops/timeline-clipboard-agent.js       |  40 +++
 4 files changed, 484 insertions(+)
 create mode 100644 js/clipboard/internal-ops/component-clipboard-agent.js
 create mode 100644 js/clipboard/internal-ops/css-clipboard-agent.js
 create mode 100644 js/clipboard/internal-ops/elements-clipboard-agent.js
 create mode 100644 js/clipboard/internal-ops/timeline-clipboard-agent.js

(limited to 'js/clipboard/internal-ops')

diff --git a/js/clipboard/internal-ops/component-clipboard-agent.js b/js/clipboard/internal-ops/component-clipboard-agent.js
new file mode 100644
index 00000000..8b589a27
--- /dev/null
+++ b/js/clipboard/internal-ops/component-clipboard-agent.js
@@ -0,0 +1,40 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+////////////////////////////////////////////////////////////////////////
+//
+
+var Montage = 		        require("montage/core/core").Montage,
+    Component = 	require("montage/ui/component").Component;
+
+var ComponentsClipboardAgent = exports.ComponentsClipboardAgent = Montage.create(Component, {
+
+    copy:{
+        value: function(clipboardEvent){
+
+        }
+    },
+
+    cut:{
+        value:function(clipboardEvent){
+
+        }
+
+    },
+
+    pasteFromCopy:{
+        value:function(){
+
+        }
+    },
+
+    pasteFromCut:{
+          value:function(){
+
+          }
+    }
+
+});
\ No newline at end of file
diff --git a/js/clipboard/internal-ops/css-clipboard-agent.js b/js/clipboard/internal-ops/css-clipboard-agent.js
new file mode 100644
index 00000000..690a3a84
--- /dev/null
+++ b/js/clipboard/internal-ops/css-clipboard-agent.js
@@ -0,0 +1,40 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+////////////////////////////////////////////////////////////////////////
+//
+
+var Montage = 		        require("montage/core/core").Montage,
+    Component = 	require("montage/ui/component").Component;
+
+var CssClipboardAgent = exports.CssClipboardAgent = Montage.create(Component, {
+
+    copy:{
+        value: function(clipboardEvent){
+
+        }
+    },
+
+    cut:{
+        value:function(clipboardEvent){
+
+        }
+
+    },
+
+    pasteFromCopy:{
+        value:function(){
+
+        }
+    },
+
+    pasteFromCut:{
+          value:function(){
+
+          }
+    }
+
+});
\ No newline at end of file
diff --git a/js/clipboard/internal-ops/elements-clipboard-agent.js b/js/clipboard/internal-ops/elements-clipboard-agent.js
new file mode 100644
index 00000000..cd8de46e
--- /dev/null
+++ b/js/clipboard/internal-ops/elements-clipboard-agent.js
@@ -0,0 +1,364 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+////////////////////////////////////////////////////////////////////////
+//
+
+var Montage = 		        require("montage/core/core").Montage,
+    Component = 	require("montage/ui/component").Component,
+    ClipboardUtil = require("js/clipboard/util").ClipboardUtil,
+    World =         require("js/lib/drawing/world").World;
+
+var ElementsClipboardAgent = exports.ElementsClipboardAgent = Montage.create(Component, {
+
+    //count how many times pasted
+    //used to move multiple pastes of same copy
+    pasteCounter:{
+        value: 0
+    },
+
+    copiedObjects:{
+        value: {}
+    },
+
+    copy:{
+        value: function(clipboardEvent){
+            var j=0, htmlToClipboard = "", ninjaClipboardObj = {}, textToClipboard = "";
+            this.copiedObjects = {};
+            this.pasteCounter = 0;
+            this.copiedObjects["copy"] = [];
+
+            if(clipboardEvent){
+                for(j=0; j < this.application.ninja.selectedElements.length; j++){//copying from stage
+                    this.copiedObjects.copy.push(this.application.ninja.selectedElements[j]);
+
+                    if(this.application.ninja.selectedElements[j].tagName === "CANVAS"){
+                        if(!ninjaClipboardObj.canvas){
+                            ninjaClipboardObj.canvas = true;
+                        }
+                    }else{
+                        htmlToClipboard = htmlToClipboard + this.serializeHTMLElement(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);
+            }
+        }
+    },
+
+    cut:{
+        value:function(clipboardEvent){
+            var j=0, htmlToClipboard = "", ninjaClipboardObj = {}, textToClipboard = "", elObj = null;
+            this.copiedObjects = {}; this.pasteCounter = 0;
+            this.copiedObjects["cut"] = [];
+
+            if(clipboardEvent){
+                for(j=0; j < this.application.ninja.selectedElements.length; j++){//copying from stage
+                    elObj = {};
+                    elObj["outerhtml"] = this.application.ninja.selectedElements[j].outerHTML;
+
+                    if(this.application.ninja.selectedElements[j].tagName === "CANVAS"){
+                        elObj["styles"] = this.getDominantStyles(this.application.ninja.selectedElements[j], true);
+                        if(!ninjaClipboardObj.canvas){
+                            ninjaClipboardObj.canvas = true;
+                        }
+                        elObj["worldJson"] = this.application.ninja.selectedElements[j].elementModel.shapeModel ? this.application.ninja.selectedElements[j].elementModel.shapeModel.GLWorld.exportJSON(): null;
+                        elObj["className"] = this.application.ninja.selectedElements[j].className;
+                    }else{
+                        elObj["styles"] = this.getDominantStyles(this.application.ninja.selectedElements[j], false);
+                        htmlToClipboard = htmlToClipboard + this.serializeHTMLElement(this.application.ninja.selectedElements[j]);
+                        if(!ninjaClipboardObj.plainHtml){
+                            ninjaClipboardObj.plainHtml = true;
+                        }
+                        textToClipboard = textToClipboard + this.getText(this.application.ninja.selectedElements[j]) + " ";
+                    }
+                    this.copiedObjects.cut.push(elObj);
+                }
+                //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);
+
+            }
+
+            this.application.ninja.elementMediator.removeElements(this.application.ninja.selectedElements);
+
+            clipboardEvent.preventDefault();
+        }
+    },
+
+    pasteInternal:{
+        value:function(){
+            if(this.copiedObjects.copy){
+                        try{
+                            this.pasteFromCopy();
+                        }catch(e){
+                            console.log(""+e.stack);
+                        }
+            }
+            else if(this.copiedObjects.cut){
+                try{
+                    this.pasteFromCut();
+                }catch(e){
+                    console.log(""+e.stack);
+                }
+            }
+
+        }
+    },
+
+    pasteFromCopy:{//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;
+
+            this.pasteCounter++;
+
+            //TODO: cleanse HTML
+
+            for(j=0; j< this.copiedObjects.copy.length; j++){
+                copiedElement = this.copiedObjects.copy[j];
+                styles = null;
+
+                if (copiedElement.tagName === "CANVAS"){
+                    //clone copied canvas
+                    var canvas = this.cloneCanvas(copiedElement);
+                    pastedElements.push(canvas);
+                }
+                else {
+                    node = copiedElement.cloneNode(true);
+
+                    if(copiedElement.ownerDocument.defaultView.getComputedStyle(copiedElement).getPropertyValue("position") === "absolute"){
+                        styles = {};
+                        styles.top = this.application.ninja.elementMediator.getProperty(copiedElement, "top", parseInt);
+                        styles.left = this.application.ninja.elementMediator.getProperty(copiedElement, "left", parseInt);
+                        styles.position = "absolute";
+                    }else{
+                        styles = null;
+                    }
+                    this.pastePositioned(node, styles);
+                    pastedElements.push(node);
+                }
+
+            }
+
+            NJevent("elementAdded", pastedElements);
+
+            this.application.ninja.currentDocument.model.needsSave = true;
+        }
+    },
+
+    pasteFromCut:{
+          value:function(){
+              var i=0, j=0,
+                  node = null, canvas = null,
+                  styles=null,
+                  pastedElements = [];//array of te pastes clones - for selection
+
+              this.pasteCounter++;
+
+              for(j=0; j< this.copiedObjects.cut.length; j++){
+                  node = ClipboardUtil.deserializeHtmlString(this.copiedObjects.cut[j].outerhtml)[0];
+
+                  if (node.tagName === "CANVAS"){
+                      //paste canvas
+                      canvas = this.generateNewCanvas(this.copiedObjects.cut[j].outerhtml, this.copiedObjects.cut[j].styles, this.copiedObjects.cut[j].className, this.copiedObjects.cut[j].worldJson);
+                      pastedElements.push(canvas);
+                      node = null;
+                  }
+                  else if((node.nodeType === 3) || (node.tagName === "A")){//TextNode
+
+                      node = null;
+                  }
+                  else {
+                      this.pastePositioned(node, this.copiedObjects.cut[j].styles, false/*fromCopy*/);
+                      pastedElements.push(node);
+                  }
+              }
+
+              NJevent("elementAdded", pastedElements);
+              this.application.ninja.currentDocument.model.needsSave = true;
+          }
+    },
+
+
+    serializeHTMLElement:{
+        value: function(elem){
+            var computedStyles = null, originalStyleAttr = null, computedStylesStr = "", i=0, stylePropertyName="", outerHtml = "";
+
+            originalStyleAttr = elem.getAttribute("style");//preserve the current styles
+            elem.removeAttribute("style");
+
+            //build the computed style attribute
+            computedStyles = elem.ownerDocument.defaultView.getComputedStyle(elem);
+
+            //todo: consider cleaning up the position data [or making position:relative with 0,0] from the computed styles,
+            // so that the object is pasted onto expernal applicaitons [like gmail] with no offset
+
+            for (i = 0; i < computedStyles.length; i++) {
+                stylePropertyName = computedStyles[i];
+                computedStylesStr = computedStylesStr + stylePropertyName + ":" + computedStyles.getPropertyValue(stylePropertyName) + ";";
+            }
+            elem.setAttribute("style", computedStylesStr);
+
+            outerHtml = elem.outerHTML;
+
+            elem.setAttribute("style", originalStyleAttr);//reset style after copying to clipboard
+
+
+            return outerHtml;
+        }
+    },
+
+    cloneCanvas:{
+        value: function(sourceCanvas){
+            var canvas, styles, world, worldData;
+
+            canvas = document.application.njUtils.make("canvas", sourceCanvas.className, this.application.ninja.currentDocument);
+            canvas.width = sourceCanvas.width;
+            canvas.height = sourceCanvas.height;
+            //end - clone copied canvas
+
+            if (!canvas.getAttribute( "data-RDGE-id" )) canvas.setAttribute( "data-RDGE-id", document.application.njUtils.generateRandom() );
+
+            if(sourceCanvas.ownerDocument.defaultView.getComputedStyle(sourceCanvas).getPropertyValue("position") === "absolute"){
+                styles = canvas.elementModel.data || {};
+                styles.top = "" + (this.application.ninja.elementMediator.getProperty(sourceCanvas, "top", parseInt) + (25 * this.pasteCounter))+"px";
+                styles.left = "" + (this.application.ninja.elementMediator.getProperty(sourceCanvas, "left", parseInt) + (25 * this.pasteCounter)) + "px";
+            }else{
+                styles = null;
+            }
+
+            this.application.ninja.elementMediator.addElements(canvas, styles, false);
+
+            worldData = sourceCanvas.elementModel.shapeModel ? sourceCanvas.elementModel.shapeModel.GLWorld.exportJSON(): null;
+            if(worldData)
+            {
+                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.model.webGlHelper.buildShapeModel( canvas.elementModel, world );
+                }
+            }
+
+            return canvas;
+        }
+    },
+
+    generateNewCanvas: {
+        value: function(outerhtml, styles, className, worldJson){
+            var canvas, newCanvasStyles, world, worldData;
+
+            canvas = document.application.njUtils.make("canvas", className, this.application.ninja.currentDocument);
+            canvas.width = styles.width;
+            canvas.height = styles.height;
+
+            if (!canvas.getAttribute( "data-RDGE-id" )) canvas.setAttribute( "data-RDGE-id", document.application.njUtils.generateRandom() );
+
+            this.pastePositioned(canvas, styles, false/*from copy*/);
+
+            worldData = worldJson;
+
+            if(worldData)
+            {
+                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.model.webGlHelper.buildShapeModel( canvas.elementModel, world );
+                }
+            }
+
+            return canvas;
+        }
+    },
+
+    serializeCanvas:{
+        value:function(sourceCanvas){
+
+        }
+    },
+
+    getText:{
+        value: function(element){
+            var nodeList = element.getElementsByTagName("*"), allText = "", i=0;
+
+            for(i=0; i < nodeList.length; i++){
+                if(nodeList[i].nodeType === 3){//text node
+                    allText = allText + nodeList[i].innerText + " ";
+                }
+            }
+        }
+    },
+
+    pastePositioned:{
+        value: function(element, styles, fromCopy){// for now can wok for both in-place and centered paste
+            var modObject = [], x,y, newX, newY, counter;
+
+            if((typeof fromCopy === "undefined") || (fromCopy && fromCopy === true)){
+                counter = this.pasteCounter;
+            }else{
+                counter = this.pasteCounter - 1;
+            }
+
+            x = styles ? ("" + styles.left + "px") : "100px";
+            y = styles ? ("" + styles.top + "px") : "100px";
+            newX = styles ? ("" + (styles.left + (25 * counter)) + "px") : "100px";
+            newY = styles ? ("" + (styles.top + (25 * counter)) + "px") : "100px";
+
+            if(!styles || (styles && !styles.position)){
+                this.application.ninja.elementMediator.addElements(element, null, false);
+            }else if(styles && (styles.position === "absolute")){
+                this.application.ninja.elementMediator.addElements(element, {"top" : newY, "left" : newX}, false);//displace
+            }
+        }
+    },
+
+    getDominantStyles:{
+        value: function(el, isCanvas){
+            var styles = {};
+            styles.top = this.application.ninja.elementMediator.getProperty(el, "top", parseInt);
+            styles.left = this.application.ninja.elementMediator.getProperty(el, "left", parseInt);
+            if(el.ownerDocument.defaultView.getComputedStyle(el).getPropertyValue("position") === "absolute"){
+                styles.position = "absolute";
+            }
+            if(isCanvas){
+                styles.width = (el.getAttribute("width") ? el.getAttribute("width") : null);
+                styles.height = (el.getAttribute("height") ? el.getAttribute("height") : null);
+            }
+            return styles;
+        }
+    }
+
+
+});
\ No newline at end of file
diff --git a/js/clipboard/internal-ops/timeline-clipboard-agent.js b/js/clipboard/internal-ops/timeline-clipboard-agent.js
new file mode 100644
index 00000000..c086431e
--- /dev/null
+++ b/js/clipboard/internal-ops/timeline-clipboard-agent.js
@@ -0,0 +1,40 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+////////////////////////////////////////////////////////////////////////
+//
+
+var Montage = 		        require("montage/core/core").Montage,
+    Component = 	require("montage/ui/component").Component;
+
+var TimelineClipboardAgent = exports.TimelineClipboardAgent = Montage.create(Component, {
+
+    copy:{
+        value: function(clipboardEvent){
+
+        }
+    },
+
+    cut:{
+        value:function(clipboardEvent){
+
+        }
+
+    },
+
+    pasteFromCopy:{
+        value:function(){
+
+        }
+    },
+
+    pasteFromCut:{
+          value:function(){
+
+          }
+    }
+
+});
\ No newline at end of file
-- 
cgit v1.2.3