From 9ab2705f1a96c6f2945ccf3c520e0a600fff6cf0 Mon Sep 17 00:00:00 2001 From: vagrant Date: Sat, 28 May 2016 12:16:23 +0000 Subject: [PATCH 1/4] =?UTF-8?q?imageData=E3=82=92DataURL=E3=81=AB=E5=A4=89?= =?UTF-8?q?=E6=8F=9B=E3=81=99=E3=82=8B=E9=96=A2=E6=95=B0=E3=82=92=E8=BF=BD?= =?UTF-8?q?=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/view/sequence-view.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/js/view/sequence-view.js b/js/view/sequence-view.js index 62e4986..f7158ee 100644 --- a/js/view/sequence-view.js +++ b/js/view/sequence-view.js @@ -200,4 +200,14 @@ SequencePanel.prototype.setCurrentFrame = function(frameIndex) { } }; +function imageDataToDataURL(imageData) { + let canvas = document.createElement("canvas"); + canvas.width = imageData.width; + canvas.height = imageData.height; + let ctx = canvas.getContext("2d"); + ctx.putImageData(imageData, 0, 0); + + return canvas.toDataURL("image/png"); +} + export default SequencePanel; From 4dde41eaf5597506b100388805003cf5607915fe Mon Sep 17 00:00:00 2001 From: shundroid Date: Sat, 28 May 2016 12:29:08 +0000 Subject: [PATCH 2/4] =?UTF-8?q?Canvas=E3=82=92Img=E3=81=AB=E5=A4=89?= =?UTF-8?q?=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 2 +- js/view/sequence-view.js | 19 +++++++++---------- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/css/style.css b/css/style.css index 93420f1..3cd11bd 100644 --- a/css/style.css +++ b/css/style.css @@ -99,7 +99,7 @@ html, body { border-radius: 20px; position: relative; } -#menu-thumbnails canvas { +#menu-thumbnails img { width: 100%; height: 100%; } diff --git a/js/view/sequence-view.js b/js/view/sequence-view.js index f7158ee..d892eb1 100644 --- a/js/view/sequence-view.js +++ b/js/view/sequence-view.js @@ -48,12 +48,12 @@ SequencePanel.prototype.getFrameTemplate = function(frameId) { let frameDeleteBtn = document.createElement("button"); let frameUpBtn = document.createElement("button"); let frameDownBtn = document.createElement("button"); - let previewCanvas = document.createElement("canvas"); + let previewImage = document.createElement("img"); frame.dataset.frameIndex = frameId; frame.classList.add("thumbnail"); frame.addEventListener("mousedown", (event) => { // 子要素のmousedownによる発生を防ぐ - if (event.target.nodeName === "CANVAS") { + if (event.target.nodeName === "IMG") { eventPublisher.publish("currentFrameId", frame.dataset.frameIndex); this.setCurrentFrame(frame); } @@ -79,7 +79,7 @@ SequencePanel.prototype.getFrameTemplate = function(frameId) { frame.appendChild(frameDeleteBtn); frame.appendChild(frameUpBtn); frame.appendChild(frameDownBtn); - frame.appendChild(previewCanvas); + frame.appendChild(previewImage); return frame; }; @@ -102,19 +102,18 @@ SequencePanel.prototype.appendMoveFrameEffect = function( }; SequencePanel.prototype.updateThumbnail = function(frameId) { - let canvas = this.elem.querySelector( - `.thumbnail[data-frame-index=\"${frameId}\"] canvas`); - let imageData = this.framesController.frames[frameId].imageData; + let previewImage = this.elem.querySelector( + `.thumbnail[data-frame-index=\"${frameId}\"] img`); + let imageData; if (this.framesController.currentFrameId === frameId) { imageData = this.framesController.canvasModel.getImageData(); } else { imageData = this.framesController.frames[frameId].imageData; } if (imageData !== null) { - canvas.width = imageData.width; - canvas.height = imageData.height; - let ctx = canvas.getContext("2d"); - ctx.putImageData(imageData, 0, 0); + previewImage.width = imageData.width; + previewImage.height = imageData.height; + previewImage.src = imageDataToDataURL(imageData); } }; From 8b92a270faafb8a53005a6b1ff09ddd618c2d88c Mon Sep 17 00:00:00 2001 From: shundroid Date: Sat, 28 May 2016 12:33:12 +0000 Subject: [PATCH 3/4] =?UTF-8?q?insertBefore=E3=81=AE=E5=90=91=E3=81=8D?= =?UTF-8?q?=E3=82=92=E9=96=93=E9=81=95=E3=81=88=E3=81=A6=E3=81=84=E3=81=A6?= =?UTF-8?q?=E3=80=81=E5=88=87=E3=82=8A=E6=9B=BF=E3=81=88=E3=81=A6=E3=81=84?= =?UTF-8?q?=E3=81=AA=E3=81=8B=E3=81=A3=E3=81=9F=E3=81=AE=E3=81=A7=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/view/sequence-view.js | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/js/view/sequence-view.js b/js/view/sequence-view.js index d892eb1..d2e594f 100644 --- a/js/view/sequence-view.js +++ b/js/view/sequence-view.js @@ -174,18 +174,15 @@ SequencePanel.prototype.moveDown = function(frameId) { this.elem.querySelector(`[data-frame-index=\"${frameId}\"]`); let moveUpFrame = this.elem.querySelector(`[data-frame-index=\"${(frameId + 1)}\"]`); - this.elem.removeChild(moveDownFrame); - this.elem.insertBefore(moveDownFrame, moveUpFrame); + this.elem.removeChild(moveUpFrame); + this.elem.insertBefore(moveUpFrame, moveDownFrame); this.renumber(); - this.appendMoveFrameEffect(moveDownFrame, true, + this.appendMoveFrameEffect(moveDownFrame, false, getComputedStyle(moveUpFrame).height); - this.appendMoveFrameEffect(moveUpFrame, false, + this.appendMoveFrameEffect(moveUpFrame, true, getComputedStyle(moveDownFrame).height); - - this.updateThumbnail(frameId); - this.updateThumbnail(frameId + 1); }; SequencePanel.prototype.setCurrentFrame = function(frameIndex) { From 86898a13320d737dfd7d838fd2f6399bb9ee4e35 Mon Sep 17 00:00:00 2001 From: shundroid Date: Sat, 28 May 2016 12:39:11 +0000 Subject: [PATCH 4/4] =?UTF-8?q?eslint=E3=81=AB=E5=90=88=E3=82=8F=E3=81=9B?= =?UTF-8?q?=E3=81=A6=E4=BF=AE=E6=AD=A3=E3=81=97=E3=80=81mousedown=E3=81=AE?= =?UTF-8?q?=E3=83=90=E3=82=B0=E3=82=92=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/frames-controller.js | 4 ++-- js/view/sequence-view.js | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/js/frames-controller.js b/js/frames-controller.js index 3452a87..10d5555 100644 --- a/js/frames-controller.js +++ b/js/frames-controller.js @@ -49,8 +49,8 @@ FramesController.prototype.remove = function(frameId) { this.frames.splice(frameId, 1); this.canvasModel.setImageData( this.getFrameById(nextCurrentFrameId).imageData); - eventPublisher.publish("frames", { - frames: this.frames, + eventPublisher.publish("frames", { + frames: this.frames, action: "remove", actionFrame: frameId }); diff --git a/js/view/sequence-view.js b/js/view/sequence-view.js index d2e594f..744168e 100644 --- a/js/view/sequence-view.js +++ b/js/view/sequence-view.js @@ -53,7 +53,9 @@ SequencePanel.prototype.getFrameTemplate = function(frameId) { frame.classList.add("thumbnail"); frame.addEventListener("mousedown", (event) => { // 子要素のmousedownによる発生を防ぐ - if (event.target.nodeName === "IMG") { + // IMGタグ、DIVタグのどちらかのときに作動するようにする + // （画像がないときはDIVタグのmousedownとなるため） + if (/IMG|DIV/.test(event.target.nodeName)) { eventPublisher.publish("currentFrameId", frame.dataset.frameIndex); this.setCurrentFrame(frame); }