diff options
Diffstat (limited to 'js')
-rw-r--r-- | js/controllers/clipboard-controller.js | 148 |
1 files changed, 124 insertions, 24 deletions
diff --git a/js/controllers/clipboard-controller.js b/js/controllers/clipboard-controller.js index 57ee5c64..9fcadaac 100644 --- a/js/controllers/clipboard-controller.js +++ b/js/controllers/clipboard-controller.js | |||
@@ -100,6 +100,13 @@ var ClipboardController = exports.ClipboardController = Montage.create(Component | |||
100 | 100 | ||
101 | handlePaste:{ | 101 | handlePaste:{ |
102 | value:function(clipboardEvent){ | 102 | value:function(clipboardEvent){ |
103 | var clipboardData = clipboardEvent.clipboardData, | ||
104 | ninjaData = clipboardData.getData("ninja"), | ||
105 | htmlData = clipboardData.getData("text/html"), | ||
106 | textData = clipboardData.getData("text/plain"), | ||
107 | i=0, | ||
108 | imageMime, imageData, imageElement; | ||
109 | |||
103 | if(!this.application.ninja.currentDocument | 110 | if(!this.application.ninja.currentDocument |
104 | || (this.application.ninja.currentDocument && this.application.ninja.currentDocument.currentView === "code")){ | 111 | || (this.application.ninja.currentDocument && this.application.ninja.currentDocument.currentView === "code")){ |
105 | 112 | ||
@@ -108,21 +115,32 @@ var ClipboardController = exports.ClipboardController = Montage.create(Component | |||
108 | 115 | ||
109 | //TODO: return if stage is not focussed | 116 | //TODO: return if stage is not focussed |
110 | 117 | ||
111 | //identify all types of clipboard data | ||
112 | |||
113 | var clipboardData = clipboardEvent.clipboardData, | ||
114 | ninjaData = clipboardData.getData("ninja"), | ||
115 | htmlData = clipboardData.getData("text/html"), | ||
116 | textData = clipboardData.getData("text/plain"), | ||
117 | imageData = clipboardData.getData("image/png"),//TODO: other img types, tiff, jpeg..... | ||
118 | svgData = clipboardData.getData("image/svg"); | ||
119 | |||
120 | this.pasteCounter++; | 118 | this.pasteCounter++; |
121 | 119 | ||
122 | if(ninjaData){ | 120 | if(ninjaData){ |
123 | if(this.copiedObjects.copy){this.pasteFromCopy();} | 121 | if(this.copiedObjects.copy){this.pasteFromCopy();} |
124 | else if(this.copiedObjects.cut){this.pasteFromCut();} | 122 | else if(this.copiedObjects.cut){this.pasteFromCut();} |
125 | }else{ | 123 | } |
124 | else{ | ||
125 | |||
126 | //handle image blobs | ||
127 | if(clipboardData.items && (clipboardData.items.length > 0)){ | ||
128 | for(i=0; i < clipboardData.items.length; i++ ){ | ||
129 | if((clipboardData.items[i].kind === "file") && (clipboardData.items[i].type.indexOf("image") === 0)){//example type -> "image/png" | ||
130 | imageMime = clipboardData.items[i].type; | ||
131 | imageData = clipboardData.items[i].getAsFile(); | ||
132 | try{ | ||
133 | imageElement = this.generateImageElement(imageData); | ||
134 | }catch(e){ | ||
135 | console.log(""+e.stack); | ||
136 | } | ||
137 | this.application.ninja.selectionController.selectElements(imageElement); | ||
138 | this.application.ninja.currentDocument.model.needsSave = true; | ||
139 | |||
140 | } | ||
141 | } | ||
142 | } | ||
143 | |||
126 | try{ | 144 | try{ |
127 | this.pasteFromExternalSource(htmlData, textData); | 145 | this.pasteFromExternalSource(htmlData, textData); |
128 | }catch(e){ | 146 | }catch(e){ |
@@ -432,7 +450,8 @@ var ClipboardController = exports.ClipboardController = Montage.create(Component | |||
432 | styles.top = "" + (this.application.ninja.elementMediator.getProperty(sourceCanvas, "top", parseInt) + (25 * this.pasteCounter))+"px"; | 450 | styles.top = "" + (this.application.ninja.elementMediator.getProperty(sourceCanvas, "top", parseInt) + (25 * this.pasteCounter))+"px"; |
433 | styles.left = "" + (this.application.ninja.elementMediator.getProperty(sourceCanvas, "left", parseInt) + (25 * this.pasteCounter)) + "px"; | 451 | styles.left = "" + (this.application.ninja.elementMediator.getProperty(sourceCanvas, "left", parseInt) + (25 * this.pasteCounter)) + "px"; |
434 | 452 | ||
435 | this.application.ninja.elementMediator.addElements(canvas, styles, false); | 453 | //this.application.ninja.elementMediator.addElements(canvas, styles, false);//todo: clean up |
454 | this.application.ninja.elementMediator.addElements(canvas, null, false);//no displacement | ||
436 | 455 | ||
437 | var world, worldData = sourceCanvas.elementModel.shapeModel.GLWorld.exportJSON(); | 456 | var world, worldData = sourceCanvas.elementModel.shapeModel.GLWorld.exportJSON(); |
438 | if(worldData) | 457 | if(worldData) |
@@ -469,7 +488,8 @@ var ClipboardController = exports.ClipboardController = Montage.create(Component | |||
469 | newCanvasStyles.top = styles.top; | 488 | newCanvasStyles.top = styles.top; |
470 | newCanvasStyles.left = styles.left; | 489 | newCanvasStyles.left = styles.left; |
471 | 490 | ||
472 | this.application.ninja.elementMediator.addElements(canvas, styles, false); | 491 | //this.application.ninja.elementMediator.addElements(canvas, styles, false);//todo: clean up |
492 | this.application.ninja.elementMediator.addElements(canvas, null, false);//no displacement | ||
473 | 493 | ||
474 | var world, worldData = worldJson; | 494 | var world, worldData = worldJson; |
475 | 495 | ||
@@ -542,28 +562,24 @@ var ClipboardController = exports.ClipboardController = Montage.create(Component | |||
542 | newY = styles ? ("" + (styles.top + (25 * this.pasteCounter)) + "px") : "100px"; | 562 | newY = styles ? ("" + (styles.top + (25 * this.pasteCounter)) + "px") : "100px"; |
543 | 563 | ||
544 | 564 | ||
565 | this.application.ninja.elementMediator.addElements(element, null); | ||
545 | 566 | ||
567 | |||
568 | //todo: cleanup | ||
546 | // //add pasted object with new position | 569 | // //add pasted object with new position |
547 | // translation = {"left": newX, "top": newY}; | 570 | // translation = {"left": newX, "top": newY}; |
548 | // this.application.ninja.elementMediator.addElements(element, translation); | 571 | // this.application.ninja.elementMediator.addElements(element, translation); |
549 | // | 572 | // |
550 | 573 | ||
551 | 574 | // //OR - first paste on top and then move the pasted object to make it visible to user | |
552 | //first paste on top and then move the pasted object to make it visible to user | 575 | // this.application.ninja.elementMediator.addElements(element, null, false); |
553 | this.application.ninja.elementMediator.addElements(element, null, false); | 576 | // modObject.push({element:element, properties:{left: newX, top:newY}, previousProperties: {left: x, top:y}}); |
554 | modObject.push({element:element, properties:{left: newX, top:newY}, previousProperties: {left: x, top:y}}); | 577 | // this.application.ninja.elementMediator.setProperties(modObject, "Change", "clipboard-controller" ); |
555 | this.application.ninja.elementMediator.setProperties(modObject, "Change", "clipboard-controller" ); | 578 | // NJevent("elementAdded", element); |
556 | NJevent("elementAdded", element); | ||
557 | 579 | ||
558 | } | 580 | } |
559 | }, | 581 | }, |
560 | 582 | ||
561 | pasteInPlace:{ | ||
562 | value: function(element){ | ||
563 | this.application.ninja.elementMediator.addElements(element, null);//does not work now | ||
564 | } | ||
565 | }, | ||
566 | |||
567 | getDominantStyles:{ | 583 | getDominantStyles:{ |
568 | value: function(el, isCanvas){ | 584 | value: function(el, isCanvas){ |
569 | var styles = {}; | 585 | var styles = {}; |
@@ -575,6 +591,90 @@ var ClipboardController = exports.ClipboardController = Montage.create(Component | |||
575 | } | 591 | } |
576 | return styles; | 592 | return styles; |
577 | } | 593 | } |
594 | }, | ||
595 | |||
596 | //todo: this will be moved to a seperate api | ||
597 | generateImageElement:{ | ||
598 | value: function(imageBlob){ | ||
599 | var reader = new FileReader(), file = reader.readAsArrayBuffer(imageBlob), url, uri, dir, save, counter, tempName, element, rules, fileName, fileNameOverride, | ||
600 | rootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1])), | ||
601 | rootUri = this.application.ninja.documentController.documentHackReference.root; | ||
602 | |||
603 | reader.fileName = imageBlob.name, reader.fileType = imageBlob.type, reader.rootUrl = rootUrl, reader.rootUri = rootUri; | ||
604 | reader.onload = function (e) { | ||
605 | |||
606 | if (this.application.ninja.coreIoApi.directoryExists({uri: e.currentTarget.rootUri+'images'}).status === 204) { | ||
607 | uri = e.currentTarget.rootUri+'images'; | ||
608 | url = e.currentTarget.rootUrl+'images'; | ||
609 | } else if (this.application.ninja.coreIoApi.directoryExists({uri: e.currentTarget.rootUri+'img'}).status === 204) { | ||
610 | uri = e.currentTarget.rootUri+'img'; | ||
611 | url = e.currentTarget.rootUrl+'img'; | ||
612 | } else { | ||
613 | dir = this.application.ninja.coreIoApi.createDirectory({uri: e.currentTarget.rootUri+'images'}); | ||
614 | if (dir.success && dir.status === 201) { | ||
615 | uri = e.currentTarget.rootUri+'images'; | ||
616 | url = e.currentTarget.rootUrl+'images'; | ||
617 | } else { | ||
618 | //TODO: HANDLE ERROR ON CREATING FOLDER | ||
619 | } | ||
620 | } | ||
621 | // | ||
622 | |||
623 | //// | ||
624 | |||
625 | //fileName is undefined while pasting image from clipboard | ||
626 | |||
627 | fileNameOverride = e.currentTarget.fileName ? e.currentTarget.fileName : ("image." + e.currentTarget.fileType.substring((e.currentTarget.fileType.indexOf("/")+1), e.currentTarget.fileType.length));//like image.png | ||
628 | |||
629 | //// | ||
630 | |||
631 | if (this.application.ninja.coreIoApi.fileExists({uri: uri+'/'+fileNameOverride}).status === 404) { | ||
632 | save = this.application.ninja.coreIoApi.createFile({uri: uri+'/'+fileNameOverride, contents: e.currentTarget.result, contentType: e.currentTarget.fileType}); | ||
633 | fileName = fileNameOverride; | ||
634 | } else { | ||
635 | counter = 1; | ||
636 | tempName = fileNameOverride.split('.'+(fileNameOverride.split('.')[fileNameOverride.split('.').length-1]))[0]; | ||
637 | tempName += '_'+counter+'.'+(fileNameOverride.split('.')[fileNameOverride.split('.').length-1]); | ||
638 | while (this.application.ninja.coreIoApi.fileExists({uri: uri+'/'+tempName}).status !== 404) { | ||
639 | counter++; | ||
640 | tempName = fileNameOverride.split('.'+(fileNameOverride.split('.')[fileNameOverride.split('.').length-1]))[0]; | ||
641 | tempName += '_'+counter+'.'+(fileNameOverride.split('.')[fileNameOverride.split('.').length-1]); | ||
642 | } | ||
643 | save = this.application.ninja.coreIoApi.createFile({uri: uri+'/'+tempName, contents: e.currentTarget.result, contentType: e.currentTarget.fileType}); | ||
644 | fileName = tempName; | ||
645 | } | ||
646 | if (save && save.success && save.status === 201) { | ||
647 | var self = this; | ||
648 | // | ||
649 | if (e.currentTarget.fileType.indexOf('svg') !== -1) { | ||
650 | element = NJUtils.make('embed', null, this.application.ninja.currentDocument);//TODO: Verify this is proper | ||
651 | element.type = 'image/svg+xml'; | ||
652 | element.src = url+'/'+fileName; | ||
653 | } else { | ||
654 | element = NJUtils.make('image', null, this.application.ninja.currentDocument); | ||
655 | element.src = url+'/'+fileName; | ||
656 | } | ||
657 | //Adding element once it is loaded | ||
658 | element.onload = function () { | ||
659 | element.onload = null; | ||
660 | self.application.ninja.elementMediator.addElements(element, rules, true); | ||
661 | }; | ||
662 | //Setting rules of element | ||
663 | rules = { | ||
664 | 'position': 'absolute', | ||
665 | 'top' : '100px', | ||
666 | 'left' : '100px' | ||
667 | }; | ||
668 | // | ||
669 | self.application.ninja.elementMediator.addElements(element, rules, false); | ||
670 | } else { | ||
671 | //TODO: HANDLE ERROR ON SAVING FILE TO BE ADDED AS ELEMENT | ||
672 | } | ||