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 --- .../internal-ops/elements-clipboard-agent.js | 364 +++++++++++++++++++++ 1 file changed, 364 insertions(+) create mode 100644 js/clipboard/internal-ops/elements-clipboard-agent.js (limited to 'js/clipboard/internal-ops/elements-clipboard-agent.js') 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 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +//////////////////////////////////////////////////////////////////////// +// + +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', '' + htmlToClipboard + ''); + 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', '' + htmlToClipboard + ''); + 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 -- cgit v1.2.3