Merge pull request #89 from comozilla/develop

develop
comozilla · May 5, 2016 · 328b324 · 328b324
2 parents 9cccb27 + ea81ffe
commit 328b324
Show file tree

Hide file tree

Showing 14 changed files with 275 additions and 149 deletions.
diff --git a/css/style.css b/css/style.css
@@ -6,17 +6,16 @@ html, body {
 }
 #menu {
   position: fixed;
-  left: -20%;
+  left: 0px;
   top: 0px;
   width: 20%;
   height: 100%;
-  transition: left 0.25s ease-in-out 0s;
+  transform: translate(-20vw);
   background-color: rgba(255, 255, 0, 0.5);
   padding: 5px;
   box-sizing: border-box;
-}
-#menu.menu-open {
-  left: 0px;
+  display: flex;
+  flex-direction: column;
 }
 #menu-colors {
   display: flex;
@@ -52,7 +51,7 @@ html, body {
 		-1px 1px white,
 		1px 1px white;
 }
-#menu-side-btn {
+#menu-collapsible-btn {
   position: absolute;
   left: 100%;
   top: 40%;
@@ -84,36 +83,9 @@ html, body {
   content: "hoge";
   color: black;
 }
-#menu-frame-fields {
-  display: flex;
-}
-#menu-frame-fields button, #menu-frame-fields div {
-  flex: 1;
-  display: block;
-  border: medium none;
-  background-color: orange;
-  height: 50px;
-}
-#menu-frame-fields div {
-  padding: 0 5px;
-  text-align: center;
-  line-height: 50px;
-}
-#menu-frame-fields button:first-child {
-  border-top-left-radius: 10px;
-  border-bottom-left-radius: 10px;
-}
-#menu-frame-fields button:last-child {
-  border-top-right-radius: 10px;
-  border-bottom-right-radius: 10px;
-}
-#menu-frame-fields button:disabled {
-  background-color: #f0f0f0;
-  cursor: not-allowed;
-}
 #menu-thumbnails {
   overflow-y: scroll;
-  height: 50%;
+  flex: 1;
   padding: 0px;
   padding-right: 10px;
   margin: 15px;
@@ -128,7 +100,7 @@ html, body {
   position: relative;
 }
 #menu-thumbnails .thumbnail-selected {
-  border-color: #00F;
+  border-color: cyan;
 }
 #menu-thumbnails .frame-add {
   width: 100%;
@@ -142,28 +114,37 @@ html, body {
   text-align: center;
 }
 #menu-thumbnails .frame-delete {
-  width: 30px;
-  height: 30px;
   position: absolute;
   right: 0px;
   background-color: transparent;
   font-size: 2rem;
   color: #00F;
+  cursor: pointer;
+  border: none;
+  padding: 0 5px 0 0;
 }
 #menu-thumbnails .frame-up {
   position: absolute;
   left: 10px;
   top: 0px;
   font-size: 2rem;
+  border: none;
+  padding: 0;
+  background-color: transparent;
+  cursor: pointer;
 }
 #menu-thumbnails .frame-down {
   position: absolute;
   left: 10px;
   bottom: 0;
   font-size: 2rem;
+  border: none;
+  padding: 0;
+  background-color: transparent;
+  cursor: pointer;
 }
 
-#btn-play {
+#play-btn {
   margin: 10px auto;
   display: block;
   width: 10vh;

diff --git a/index.html b/index.html
@@ -8,15 +8,15 @@
 <body>
   <canvas id="canvas"></canvas>
   <div id="menu">
-    <button id="menu-side-btn"><i class="fa fa-cog"></i></button>
+    <button id="menu-collapsible-btn"><i class="fa fa-cog"></i></button>
     <ul id="menu-colors">
     </ul>
     <input type="range" id="menu-line-width" min="1" max="200" step="10" value="10" /><br />
-    <button id="btn-play"><i class="fa fa-play"></i></button>
+    <button id="play-btn"><i class="fa fa-play"></i></button>
     <div id="menu-thumbnails">
       <div id="thumbnails">
       </div>
-      <button class="frame-add"><i class="fa fa-plus"></i></button>
+      <button class="frame-add" id="sequence-add-btn"><i class="fa fa-plus"></i></button>
     </div>
   </div>
 </body>

diff --git a/js/canvas-model.js b/js/canvas-model.js
@@ -3,27 +3,7 @@ import eventPublisher from "./publisher";
 // HTMLCanvasElementをラップし, canvasRenderingContext2Dに関する操作を提供する
 function CanvasModel(element) {
   this.element = element;
-
   this.context = this.element.getContext("2d");
-  this.drawState = "idling";
-  eventPublisher.subscribe("drawState", (drawState) => {
-    this.drawState = drawState;
-  });
-
-  eventPublisher.subscribe("currentFrameId", (nextCurrentFrame) => {
-    eventPublisher.publish("imageData", this.getImageData());
-  });
-
-  // この imageDataというものだが、
-  // Modelのように見せているが、実際は存在せず、
-  // Viewを変換したものである。
-  // このようにするのは、
-  // imageDataはcurrentFrameの変更時にしかupdateしないためである。
-  eventPublisher.subscribe("imageData", (imageData) => {
-    this.context.clearRect(0, 0,
-      this.element.width, this.element.height); // クリアする必要があるのか
-    this.context.putImageData(imageData, 0, 0);
-  });
 }
 
 // 外からはアクセスしないでください。
@@ -32,4 +12,12 @@ CanvasModel.prototype.getImageData = function() {
     this.element.width, this.element.height);
 };
 
+CanvasModel.prototype.setImageData = function(imageData) {
+  this.context.clearRect(0, 0,
+    this.element.width, this.element.height);
+  if (imageData !== null) {
+    this.context.putImageData(imageData, 0, 0);
+  }
+};
+
 export default CanvasModel;
diff --git a/js/drawing-configuration.js b/js/drawing-configuration.js
@@ -11,20 +11,21 @@ function DrawingConfiguration() {
 // publishをしたいため。
 DrawingConfiguration.prototype.setDefaultValues = function() {
   this.defaultPalleteColors = [];
-  eventPublisher.subscribe("defaultPalleteColors", (defaultPalleteColors) => {
-    this.defaultPalleteColors = defaultPalleteColors;
-  });
+  eventPublisher.subscribe("defaultPalleteColors:after",
+      (defaultPalleteColors) => {
+        this.defaultPalleteColors = defaultPalleteColors;
+      });
   eventPublisher.publish("defaultPalleteColors", ["red", "orange", "yellow",
     "lightgreen", "green", "skyblue", "blue", "purple", "black", "white"]);
 
   this.color = "";
-  eventPublisher.subscribe("color", (color) => {
+  eventPublisher.subscribe("color:after", (color) => {
     this.color = color;
   });
   eventPublisher.publish("color", "red");
 
   this.lineWidth = 0;
-  eventPublisher.subscribe("lineWidth", (lineWidth) => {
+  eventPublisher.subscribe("lineWidth:after", (lineWidth) => {
     this.lineWidth = lineWidth;
   });
   eventPublisher.publish("lineWidth", 10);

diff --git a/js/frames-controller.js b/js/frames-controller.js
@@ -1,41 +1,50 @@
 import Frame from "./frame";
 import eventPublisher from "./publisher";
+import CanvasModel from "./canvas-model";
+
 // frame の追加・削除、currentFrameの切り替えをModel上で行う
-function FramesController() {
+function FramesController(canvas) {
+  let updateImageDataToNextData;
   this.frames = [];
   this.currentFrameId = 0;
-  eventPublisher.subscribe("currentFrameId", (frameId) => {
+  this.canvasModel = new CanvasModel(canvas);
+  updateImageDataToNextData = (frameId) => {
+    let beforeFrame = this.getCurrentFrame();
+    // beforeFrameは削除されている可能性がある
+    if (typeof beforeFrame !== "undefined") {
+      beforeFrame.imageData = this.canvasModel.getImageData();
+    }
     this.currentFrameId = frameId;
-  });
-
-  eventPublisher.subscribe("imageData", (imageData) => {
-    // この時の currentFrame は、変更される前を示す。
-    this.getCurrentFrame().imageData = imageData;
-  });
+    this.canvasModel.setImageData(this.getCurrentFrame().imageData);
+  };
+  eventPublisher.subscribe("currentFrameId", updateImageDataToNextData);
 }
 
 // パラメータ id : どこの後ろに追加するのか（今は実装していない）
 FramesController.prototype.append = function(id) {
   const frame = new Frame();
   // 今はいいが、あとで splice に変える
   this.frames.push(frame);
+  eventPublisher.publish("frames", this.frames);
 };
 
-FramesController.prototype.remove = function() {
-
+FramesController.prototype.remove = function(id) {
+  if (this.frames.length <= 1) {
+    throw new Error("残りフレーム数が1なので、削除することができません。");
+  }
+  let nextCurrentFrameId = this.currentFrameId;
+  if (this.currentFrameId >= this.frames.length - 1) {
+    nextCurrentFrameId--;
+  }
+  this.frames.splice(id, 1);
+  this.canvasModel.setImageData(
+    this.getFrameById(nextCurrentFrameId).imageData);
+  eventPublisher.publish("frames", this.frames);
+  eventPublisher.publish("currentFrameId", nextCurrentFrameId);
 };
 
 FramesController.prototype.setCurrentFrame = function(frameId) {
-  var nextImageData;
-
   eventPublisher.publish("currentFrameId", frameId);
-
-  nextImageData = this.getCurrentFrame().imageData;
-  // 初めて作るFrame（nextImageDataがnull）の時は、
-  // 前のFrameの内容をそのままコピーするため、imageDataをpublishする必要はない。
-  if (nextImageData !== null) {
-    eventPublisher.publish("imageData", nextImageData);
-  }
 };
 
 FramesController.prototype.getFrameById = function(frameId) {

diff --git a/js/main.js b/js/main.js
@@ -1,8 +1,8 @@
 import FramesController from "./frames-controller";
 import DrawingConfiguration from "./drawing-configuration";
-import CanvasModel from "./canvas-model";
 import ViewManager from "./view-manager";
 import PaintManager from "./paint-manager";
+import Player from "./player";
 
 // webpack
 import "./../css/style.css";
@@ -11,26 +11,25 @@ import "web-animations-js";
 
 let framesController;
 let drawingConfiguration;
-let canvasModel;
 let viewManager;
 let paintManager;
+let player;
 
 document.addEventListener("DOMContentLoaded", function() {
   const firstFrameId = 0;
   const canvas = document.getElementById("canvas");
+  framesController = new FramesController(canvas);
 
   drawingConfiguration = new DrawingConfiguration();
+  viewManager = new ViewManager(framesController);
 
-  framesController = new FramesController();
-  framesController.append(firstFrameId);
-
-  canvasModel = new CanvasModel(canvas);
   paintManager = new PaintManager(canvas);
 
-  viewManager = new ViewManager();
+  player = new Player(framesController);
 
   drawingConfiguration.setDefaultValues();
 
+  framesController.append(firstFrameId);
   framesController.setCurrentFrame(firstFrameId);
 });