From 9be332fad39dd0df5f6c84bf41748bd082c9d4b7 Mon Sep 17 00:00:00 2001 From: Zoee Silcock Date: Sun, 22 Jan 2017 11:15:28 +0100 Subject: [PATCH] Allow adding multiple frames with drag and drop This is a partial solution issue number #285. When dropping multiple images it creates a new frame for each one. It works great when all images are the same size and within the size of the piskel document. When the images aren't the size of the document they are positioned in the same way as single image import. --- src/js/service/FileDropperService.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/js/service/FileDropperService.js b/src/js/service/FileDropperService.js index 01cf5c40..522b63b5 100644 --- a/src/js/service/FileDropperService.js +++ b/src/js/service/FileDropperService.js @@ -27,6 +27,8 @@ }; var files = event.dataTransfer.files; + this.isMultipleFiles_ = (files.length > 1); + for (var i = 0; i < files.length ; i++) { var file = files[i]; var isImage = file.type.indexOf('image') === 0; @@ -62,12 +64,17 @@ }; ns.FileDropperService.prototype.processImageSource_ = function (imageSource) { - this.importedImage_ = new Image(); - this.importedImage_.onload = this.onImageLoaded_.bind(this); - this.importedImage_.src = imageSource; + var importedImage = new Image(); + importedImage.onload = this.onImageLoaded_.bind(this, importedImage); + importedImage.src = imageSource; }; - ns.FileDropperService.prototype.onImageLoaded_ = function () { + ns.FileDropperService.prototype.onImageLoaded_ = function (importedImage) { + if (this.isMultipleFiles_) { + this.piskelController.addFrameAtCurrentIndex(); + this.piskelController.selectNextFrame(); + } + var currentFrame = this.piskelController.getCurrentFrame(); // Convert client coordinates to sprite coordinates var spriteDropPosition = pskl.app.drawingController.getSpriteCoordinates( @@ -78,7 +85,7 @@ var x = spriteDropPosition.x; var y = spriteDropPosition.y; - pskl.utils.FrameUtils.addImageToFrame(currentFrame, this.importedImage_, x, y); + pskl.utils.FrameUtils.addImageToFrame(currentFrame, importedImage, x, y); $.publish(Events.PISKEL_RESET); $.publish(Events.PISKEL_SAVE_STATE, {