diff --git a/js/canvas-model.js b/js/canvas-model.js index 4c57796..6aff9ca 100644 --- a/js/canvas-model.js +++ b/js/canvas-model.js @@ -6,6 +6,7 @@ class CanvasModel { this.element = element; this.context = this.element.getContext("2d"); } + // 外からはアクセスしないでください。 getImageData() { return this.context.getImageData(0, 0, this.element.width, this.element.height); diff --git a/js/drawing-configuration.js b/js/drawing-configuration.js index bfdbd73..9fb7c71 100644 --- a/js/drawing-configuration.js +++ b/js/drawing-configuration.js @@ -30,7 +30,7 @@ class DrawingConfiguration { this.lineWidth = lineWidth; }); eventPublisher.publish("lineWidth", 10); - } + } } export default DrawingConfiguration; diff --git a/js/frames-controller.js b/js/frames-controller.js index e033d59..5ff953d 100644 --- a/js/frames-controller.js +++ b/js/frames-controller.js @@ -4,7 +4,7 @@ import CanvasModel from "./canvas-model"; // frame の追加・削除、currentFrameの切り替えをModel上で行う class FramesController{ -constructor() { +constructor(canvas) { let updateImageDataToNextData; this.frames = []; this.currentFrameId = 0; diff --git a/js/paint-manager.js b/js/paint-manager.js index 6fa7682..35de93e 100644 --- a/js/paint-manager.js +++ b/js/paint-manager.js @@ -3,7 +3,7 @@ let isMouseDown = false; let previousMousePosition; // HTMLCanvasElementをラップし, canvasRenderingContext2Dに関する操作を提供する class PaintManager{ - constructor() { + constructor(element) { let changeDrawState; this.element = element; @@ -41,7 +41,7 @@ class PaintManager{ }); } - mouseDownCanvas() { + mouseDownCanvas(event) { if (!this.isLock) { isMouseDown = true; previousMousePosition = { x: event.clientX, y: event.clientY }; @@ -55,7 +55,7 @@ class PaintManager{ eventPublisher.publish("drawState", "idling"); } } - mouseMoveCanvas() { + mouseMoveCanvas(event) { if (!this.isLock) { if (isMouseDown) { if (this.color === "white") { diff --git a/js/player.js b/js/player.js index 19732e8..154b4a1 100644 --- a/js/player.js +++ b/js/player.js @@ -9,7 +9,7 @@ const playInterval = 250; * 再生された時に他に必要な処理(Menuを隠すなど)は、各自クラスでsubscribeして行う。 */ class Player{ - constructor(){ + constructor(framesController){ this.isPlaying = false; this.playInterval = playInterval; this.framesController = framesController; @@ -25,7 +25,7 @@ class Player{ } -changeFrame() { +changeFrame(currentFrameId) { let nextCurrentFrameId; this.framesController.setCurrentFrame(currentFrameId); if (currentFrameId >= this.framesController.frames.length - 1) { diff --git a/js/view-manager.js b/js/view-manager.js index cdf729b..e5f0219 100644 --- a/js/view-manager.js +++ b/js/view-manager.js @@ -6,7 +6,7 @@ import PlayerView from "./view/player-view"; import eventPublisher from "./publisher"; class ViewManager{ - constructor(){ + constructor(framesController){ this.colorPicker = new ColorPickerView(document.getElementById("menu-colors")); eventPublisher.subscribe("defaultPalleteColors", (colors) => { diff --git a/js/view/color-picker-view.js b/js/view/color-picker-view.js index 51b8d95..3fb6be6 100644 --- a/js/view/color-picker-view.js +++ b/js/view/color-picker-view.js @@ -1,7 +1,7 @@ import eventPublisher from "./../publisher"; class colorpickerview{ - constructor(){ + constructor(elem){ this.element = elem; eventPublisher.subscribe("color", (color) => { let selectedPalette = this.element.querySelector(".selected-palette"); @@ -16,7 +16,7 @@ class colorpickerview{ }); } -addPalette(){ +addPalette(color)){ let palette; if (!isColor(color)) { @@ -38,7 +38,7 @@ clearPalette(){ } class isColor{ - constructor(){ + constructor(color){ const testElement = document.createElement("span"); testElement.style.backgroundColor = color; diff --git a/js/view/line-width-picker-view.js b/js/view/line-width-picker-view.js index e6a5e90..2f8c5e3 100644 --- a/js/view/line-width-picker-view.js +++ b/js/view/line-width-picker-view.js @@ -1,7 +1,7 @@ import eventPublisher from "./../publisher"; -class LineWidthPickerPanel{ - constructor(){ +class LineWidthPickerPanel { + constructor(elem){ this.element = elem; eventPublisher.subscribe("lineWidth", (lineWidth) => { this.element.value = lineWidth; @@ -11,12 +11,12 @@ class LineWidthPickerPanel{ }); } -changeMaxLineWidth(){ +changeMaxLineWidth(maxLineWidth){ // TODO }; -changeMinLineWidth(){ +changeMinLineWidth(minLineWidth){ // TODO } } diff --git a/js/view/menu-view.js b/js/view/menu-view.js index 37ce475..6b0d07c 100644 --- a/js/view/menu-view.js +++ b/js/view/menu-view.js @@ -28,7 +28,7 @@ class MenuView{ }); } -setMenuVisible(){ +setMenuVisible(isOpen){ const menu = document.getElementById("menu"); const direction = isOpen ? "alternate" : "alternate-reverse"; this.isOpen = isOpen; @@ -39,7 +39,7 @@ setMenuVisible(){ } // collapsibleButton : メニューの右側にあるボタン -setCollapsibleButtonVisible(){ +setCollapsibleButtonVisible(visible){ const collapsibleButton = document.getElementById("menu-collapsible-btn"); const direction = visible ? "alternate" : "alternate-reverse"; collapsibleButton.animate( @@ -47,7 +47,7 @@ setCollapsibleButtonVisible(){ { direction: direction, duration: 100, fill: "both" }); } -setCollapsibleButtonMode(){ +setCollapsibleButtonMode(isPlaying){ this.isPlaying = isPlaying; const icon = document.querySelector("#menu-collapsible-btn i"); if (isPlaying) { diff --git a/js/view/sequence-view.js b/js/view/sequence-view.js index 3e003c8..151525a 100644 --- a/js/view/sequence-view.js +++ b/js/view/sequence-view.js @@ -1,7 +1,7 @@ import eventPublisher from "./../publisher"; class SequencePanel{ - constructor(){ + constructor(elem, framesController){ this.elem = elem; this.maxFrameId = 0; this.currentFrameId = 0; @@ -63,7 +63,7 @@ class getFrameTemplate{ return frame; } - append(){ + append(frameId){ let newFrame = getFrameTemplate(frameId, (event) => { // 子要素のmousedownによる発生を防ぐ if (event.target.classList.contains("thumbnail")) { @@ -81,7 +81,7 @@ class getFrameTemplate{ clear(){ this.elem.innerHTML = ""; } - remove(){ + remove(frame){ } moveUp(){ // TODO