prototypeをクラスに変更

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;

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;

js/frame.js

@@ -1,5 +1,9 @@
-function Frame() {
-  this.imageData = null;
+class Frame {
+  constructor() {
+    this.imageData = null;
+  }
 }
 
+
+
 export default Frame;

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;

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;