From dd36df995bde4b34b396922e0be014ee22fe526e Mon Sep 17 00:00:00 2001
From: Ayato Sakurai <ayatosakurai@Ayato-no-MacBook-Pro.local>
Date: Sat, 7 May 2016 17:38:15 +0900
Subject: [PATCH] =?UTF-8?q?prototype=E3=82=92=E3=82=AF=E3=83=A9=E3=82=B9?=
 =?UTF-8?q?=E3=81=AB=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 js/canvas-model.js          |  33 ++++---
 js/drawing-configuration.js |  57 ++++++------
 js/frame.js                 |   8 +-
 js/frames-controller.js     |  42 +++++----
 js/paint-manager.js         | 180 ++++++++++++++++++------------------
 js/player.js                |  14 +--
 js/publisher.js             |  18 ++--
 js/view-manager.js          |   7 +-
 8 files changed, 190 insertions(+), 169 deletions(-)

diff --git a/js/canvas-model.js b/js/canvas-model.js
index 4606bb4..4c57796 100644
--- a/js/canvas-model.js
+++ b/js/canvas-model.js
@@ -1,23 +1,22 @@
 import eventPublisher from "./publisher";
 
 // HTMLCanvasElementをラップし, canvasRenderingContext2Dに関する操作を提供する
-function CanvasModel(element) {
-  this.element = element;
-  this.context = this.element.getContext("2d");
-}
-
-// 外からはアクセスしないでください。
-CanvasModel.prototype.getImageData = function() {
-  return this.context.getImageData(0, 0,
-    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);
+class CanvasModel {
+  constructor(element) {
+    this.element = element;
+    this.context = this.element.getContext("2d");
   }
-};
+  getImageData() {
+    return this.context.getImageData(0, 0,
+      this.element.width, this.element.height);
+  }
+  setImageData(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
index fbf70cf..bfdbd73 100644
--- a/js/drawing-configuration.js
+++ b/js/drawing-configuration.js
@@ -1,33 +1,36 @@
 import eventPublisher from "./publisher";
 
-function DrawingConfiguration() {
-  this.defaultPalleteColors = [];
-  this.color = "";
-  this.lineWidth = 0;
-}
+class DrawingConfiguration {
+  constructor() {
+    this.defaultPalleteColors = [];
+    this.color = "";
+    this.lineWidth = 0;
+  }
+  
+  // これをコンストラクタに入れないのは、
+  // ViewManager（など）で、subscribeした後に、
+  // publishをしたいため。
+  setDefaultValues() {
+    this.defaultPalleteColors = [];
+    eventPublisher.subscribe("defaultPalleteColors:after",
+        (defaultPalleteColors) => {
+          this.defaultPalleteColors = defaultPalleteColors;
+        });
+    eventPublisher.publish("defaultPalleteColors", ["red", "orange", "yellow",
+      "lightgreen", "green", "skyblue", "blue", "purple", "black", "white"]);
 
-// これをコンストラクタに入れないのは、
-// ViewManager（など）で、subscribeした後に、
-// publishをしたいため。
-DrawingConfiguration.prototype.setDefaultValues = function() {
-  this.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:after", (color) => {
+      this.color = color;
+    });
+    eventPublisher.publish("color", "red");
 
-  this.color = "";
-  eventPublisher.subscribe("color:after", (color) => {
-    this.color = color;
-  });
-  eventPublisher.publish("color", "red");
+    this.lineWidth = 0;
+    eventPublisher.subscribe("lineWidth:after", (lineWidth) => {
+      this.lineWidth = lineWidth;
+    });
+    eventPublisher.publish("lineWidth", 10);
+  }  
+}
 
-  this.lineWidth = 0;
-  eventPublisher.subscribe("lineWidth:after", (lineWidth) => {
-    this.lineWidth = lineWidth;
-  });
-  eventPublisher.publish("lineWidth", 10);
-};
 export default DrawingConfiguration;
diff --git a/js/frame.js b/js/frame.js
index 546ad08..f531252 100644
--- a/js/frame.js
+++ b/js/frame.js
@@ -1,5 +1,9 @@
-function Frame() {
-  this.imageData = null;
+class Frame {
+  constructor() {
+    this.imageData = null;
+  }
 }
 
+
+
 export default Frame;
diff --git a/js/frames-controller.js b/js/frames-controller.js
index d8fd51c..fdb05ff 100644
--- a/js/frames-controller.js
+++ b/js/frames-controller.js
@@ -2,8 +2,8 @@ import Frame from "./frame";
 import eventPublisher from "./publisher";
 import CanvasModel from "./canvas-model";
 
-// frame の追加・削除、currentFrameの切り替えをModel上で行う
-function FramesController(canvas) {
+class FramesController{
+constructor() {
   let updateImageDataToNextData;
   this.frames = [];
   this.currentFrameId = 0;
@@ -19,16 +19,13 @@ function FramesController(canvas) {
   };
   eventPublisher.subscribe("currentFrameId", updateImageDataToNextData);
 }
-
-// パラメータ id : どこの後ろに追加するのか（今は実装していない）
-FramesController.prototype.append = function(id) {
-  const frame = new Frame();
+append() {
+   const frame = new Frame();
   // 今はいいが、あとで splice に変える
   this.frames.push(frame);
   eventPublisher.publish("frames", this.frames);
-};
-
-FramesController.prototype.remove = function(id) {
+}
+remove() {
   if (this.frames.length <= 1) {
     throw new Error("残りフレーム数が1なので、削除することができません。");
   }
@@ -43,15 +40,26 @@ FramesController.prototype.remove = function(id) {
   eventPublisher.publish("currentFrameId", nextCurrentFrameId);
 };
 
-FramesController.prototype.setCurrentFrame = function(frameId) {
+setCurrentFrame(){
   eventPublisher.publish("currentFrameId", frameId);
-};
-
-FramesController.prototype.getFrameById = function(frameId) {
-  return this.frames[frameId];
-};
+}
+ 
+ getFrameById(){
+    return this.frames[frameId];
+ }
 
-FramesController.prototype.getCurrentFrame = function() {
+getCurrentFrame(){
   return this.frames[this.currentFrameId];
-};
+}
+}
+
+// frame の追加・削除、currentFrameの切り替えをModel上で行う
+
+    // beforeFrameは削除されている可能性がある
+
+
+// パラメータ id : どこの後ろに追加するのか（今は実装していない）
+
+  // 今はいいが、あとで splice に変える
+
 export default FramesController;
diff --git a/js/paint-manager.js b/js/paint-manager.js
index 4c2b580..6fa7682 100644
--- a/js/paint-manager.js
+++ b/js/paint-manager.js
@@ -1,109 +1,111 @@
 import eventPublisher from "./publisher";
-
+let isMouseDown = false;
+let previousMousePosition;
 // HTMLCanvasElementをラップし, canvasRenderingContext2Dに関する操作を提供する
-function PaintManager(element) {
-  let changeDrawState;
+class PaintManager{
+  constructor() {
+    let changeDrawState;
 
-  this.element = element;
-  this.element.width = window.innerWidth;
-  this.element.height = window.innerHeight;
+    this.element = element;
+    this.element.width = window.innerWidth;
+    this.element.height = window.innerHeight;
 
-  this.element.addEventListener("mousedown",
-    event => { this.mouseDownCanvas(event); });
-  this.element.addEventListener("mouseup", () => { this.mouseUpCanvas(); });
-  this.element.addEventListener("mousemove",
-    event => { this.mouseMoveCanvas(event); });
+    this.element.addEventListener("mousedown",
+      event => { this.mouseDownCanvas(event); });
+    this.element.addEventListener("mouseup", () => { this.mouseUpCanvas(); });
+    this.element.addEventListener("mousemove",
+      event => { this.mouseMoveCanvas(event); });
 
-  this.context = this.element.getContext("2d");
-  this.drawState = "idling";
-  this.isLock = false;
+    this.context = this.element.getContext("2d");
+    this.drawState = "idling";
+    this.isLock = false;
 
-  changeDrawState = (drawState) => {
-    this.drawState = drawState;
-  };
-  eventPublisher.subscribe("drawState", changeDrawState);
+    changeDrawState = (drawState) => {
+      this.drawState = drawState;
+    };
+    eventPublisher.subscribe("drawState", changeDrawState);
 
-  // drawingConfiguration から、コピーしておく。
-  this.color = "";
-  eventPublisher.subscribe("color", (color) => {
-    this.color = color;
-  });
+    // drawingConfiguration から、コピーしておく。
+    this.color = "";
+    eventPublisher.subscribe("color", (color) => {
+      this.color = color;
+    });
 
-  this.lineWidth = 0;
-  eventPublisher.subscribe("lineWidth", (lineWidth) => {
-    this.lineWidth = lineWidth;
-  });
-
-  eventPublisher.subscribe("isPlaying", (isPlaying) => {
-    this.isLock = isPlaying;
-  });
-}
+    this.lineWidth = 0;
+    eventPublisher.subscribe("lineWidth", (lineWidth) => {
+      this.lineWidth = lineWidth;
+    });
 
-let isMouseDown = false;
-let previousMousePosition;
-PaintManager.prototype.mouseDownCanvas = function(event) {
-  if (!this.isLock) {
-    isMouseDown = true;
-    previousMousePosition = { x: event.clientX, y: event.clientY };
-    eventPublisher.publish("drawState", "drawing");
+    eventPublisher.subscribe("isPlaying", (isPlaying) => {
+      this.isLock = isPlaying;
+    });
+  }
+  
+  mouseDownCanvas() {
+    if (!this.isLock) {
+      isMouseDown = true;
+      previousMousePosition = { x: event.clientX, y: event.clientY };
+      eventPublisher.publish("drawState", "drawing");
+    }
   }
-};
-PaintManager.prototype.mouseUpCanvas = function() {
-  if (!this.isLock) {
-    isMouseDown = false;
-    eventPublisher.publish("drawState", "idling");
+
+  mouseUpCanvas(){
+    if (!this.isLock) {
+      isMouseDown = false;
+      eventPublisher.publish("drawState", "idling");
+    }
   }
-};
-PaintManager.prototype.mouseMoveCanvas = function(event) {
-  if (!this.isLock) {
-    if (isMouseDown) {
-      if (this.color === "white") {
-        this.eraseByLine(
-            previousMousePosition,
-            { x: event.clientX, y: event.clientY },
-            this.lineWidth
-            );
-      } else {
-        this.drawLine(
-            previousMousePosition,
-            { x: event.clientX, y: event.clientY },
-            this.color,
-            this.lineWidth
-            );
+  mouseMoveCanvas() {
+    if (!this.isLock) {
+      if (isMouseDown) {
+        if (this.color === "white") {
+          this.eraseByLine(
+              previousMousePosition,
+              { x: event.clientX, y: event.clientY },
+              this.lineWidth
+              );
+        } else {
+          this.drawLine(
+              previousMousePosition,
+              { x: event.clientX, y: event.clientY },
+              this.color,
+              this.lineWidth
+              );
+        }
+        previousMousePosition = { x: event.clientX, y: event.clientY };
       }
-      previousMousePosition = { x: event.clientX, y: event.clientY };
     }
   }
-};
 
-/**
- * 線を描きます。
- */
-PaintManager.prototype.drawLine = function(
+  /**
+   * 線を描きます。
+   */
+  drawLine(
     startPosition,
-    endPosition,
-    strokeColor,
-    lineWidth) {
+      endPosition,
+      strokeColor,
+      lineWidth) {
 
-  this.context.strokeStyle = strokeColor;
-  this.context.lineWidth = lineWidth;
-  this.context.beginPath();
-  this.context.moveTo(startPosition.x, startPosition.y);
-  this.context.lineTo(endPosition.x, endPosition.y);
-  this.context.lineCap = "round";
-  this.context.stroke();
-};
+    this.context.strokeStyle = strokeColor;
+    this.context.lineWidth = lineWidth;
+    this.context.beginPath();
+    this.context.moveTo(startPosition.x, startPosition.y);
+    this.context.lineTo(endPosition.x, endPosition.y);
+    this.context.lineCap = "round";
+    this.context.stroke();
+  }
 
-/**
- * 線で消します。消した部分は透明になります。
- */
-PaintManager.prototype.eraseByLine = function(
-    startPosition,
-    endPosition,
-    lineWidth) {
-  this.context.globalCompositeOperation = "destination-out";
-  this.drawLine(startPosition, endPosition, "#000", lineWidth);
-  this.context.globalCompositeOperation = "source-over";
-};
 
+  /**
+   * 線で消します。消した部分は透明になります。
+   */
+  eraseByLine(
+    startPosition,
+      endPosition,
+      lineWidth) {
+    this.context.globalCompositeOperation = "destination-out";
+    this.drawLine(startPosition, endPosition, "#000", lineWidth);
+    this.context.globalCompositeOperation = "source-over";
+  }
+}
 export default PaintManager;
diff --git a/js/player.js b/js/player.js
index 98a78a2..19732e8 100644
--- a/js/player.js
+++ b/js/player.js
@@ -8,8 +8,9 @@ const playInterval = 250;
  * 再生された時に、Frameを切り替える処理もここで行う。
  * 再生された時に他に必要な処理（Menuを隠すなど）は、各自クラスでsubscribeして行う。
  */
-function Player(framesController) {
-  this.isPlaying = false;
+class Player{
+  constructor(){
+    this.isPlaying = false;
   this.playInterval = playInterval;
   this.framesController = framesController;
   this.changeFrameId = -1;
@@ -21,9 +22,10 @@ function Player(framesController) {
       clearTimeout(this.changeFrameId);
     }
   });
-}
+  }
 
-Player.prototype.changeFrame = function(currentFrameId) {
+ 
+changeFrame() {
   let nextCurrentFrameId;
   this.framesController.setCurrentFrame(currentFrameId);
   if (currentFrameId >= this.framesController.frames.length - 1) {
@@ -34,6 +36,6 @@ Player.prototype.changeFrame = function(currentFrameId) {
   this.changeFrameId = setTimeout(() => {
     this.changeFrame(nextCurrentFrameId);
   }, this.playInterval);
-};
-
+}
+}
 export default Player;
diff --git a/js/publisher.js b/js/publisher.js
index a0aa6d9..c434d5b 100644
--- a/js/publisher.js
+++ b/js/publisher.js
@@ -1,16 +1,17 @@
 // Publisherは、データを保存せず、外部へ変更を知らせる機能に絞る。
-function Publisher() {
-  this.observers = {};
-}
+class Publisher{
+  constructor(){
+    this.observers = {};
+  }
 
-Publisher.prototype.subscribe = function(type, observer) {
-  if (typeof this.observers[type] === "undefined") {
+subscribe(){
+   if (typeof this.observers[type] === "undefined") {
     this.observers[type] = [];
   }
   this.observers[type].push(observer);
-};
+}
 
-Publisher.prototype.publish = function(type, nextData) {
+publish(){
   if (type.indexOf(":") !== -1) {
     throw new Error("publishのtypeに「:」を含むことはできません。");
   }
@@ -25,7 +26,8 @@ Publisher.prototype.publish = function(type, nextData) {
       observer(nextData);
     });
   }
-};
+}
+}
 
 export default new Publisher();
 
diff --git a/js/view-manager.js b/js/view-manager.js
index e12da83..cdf729b 100644
--- a/js/view-manager.js
+++ b/js/view-manager.js
@@ -5,8 +5,9 @@ import SequenceView from "./view/sequence-view";
 import PlayerView from "./view/player-view";
 import eventPublisher from "./publisher";
 
-function ViewManager(framesController) {
-  this.colorPicker =
+class ViewManager{
+  constructor(){
+    this.colorPicker =
     new ColorPickerView(document.getElementById("menu-colors"));
   eventPublisher.subscribe("defaultPalleteColors", (colors) => {
     this.colorPicker.clearPalette();
@@ -23,6 +24,6 @@ function ViewManager(framesController) {
 
   this.player = new PlayerView(document.getElementById("play-btn"));
   this.menu = new MenuView();
+  }
 }
-
 export default ViewManager;