<commit_before>var ParaparaCanvas = require("./parapara-canvas");
var Frame = require("./frame");
var FramesController = require("./frames-controller");
var drawTools = require("./draw-tools");
var Menu = require("./menu");

var frameServer;
var colorPicker, lineWidthPicker;
var menu;
document.addEventListener("DOMContentLoaded", function() {
  frameServer = new FramesController(document.getElementById("frames"));
  frameServer.append(0, new Frame(new ParaparaCanvas(0, frameServer.element)));
  setListenerForCanvas(0);
  frameServer.setCurrentFrame(0);
  
  colorPicker = new drawTools.ColorPicker(document.getElementById("menu-colors"), "red");
  lineWidthPicker = new drawTools.LineWidthPicker(document.getElementById("menu-line-width"), 10);
  menu = new Menu();
  
  document.getElementById("menu-side-btn").addEventListener("click", function() {
    menu.toggleMenu();
  });
});

function setListenerForCanvas(frameId) {
  var pCanvas = frameServer.getCanvasElementByFrameId(frameId);
  pCanvas.addEventListener("mousedown", mouseDownCanvas);
  pCanvas.addEventListener("mouseup", mouseUpCanvas);
  pCanvas.addEventListener("mousemove", mouseMoveCanvas);
}
// TODO: これらは、ここで、いいのか。
// → parapara-canvas.js に取り込むような気もするが、
//   この情報をWebsocket で送ったり・・となるのであれば、
//   それを parapara-canvas.js でやっていいの？となる。
var isMouseDown = false;
var beforeMousePosition = {};
function mouseDownCanvas(event) {
  menu.hideMenu();
  menu.toggleOpenMenuButton(false);
  isMouseDown = true;
  beforeMousePosition = {x: event.clientX, y: event.clientY};
}
function mouseUpCanvas() {
  menu.toggleOpenMenuButton(true);
  isMouseDown = false;
}
function mouseMoveCanvas(event) {
  if (isMouseDown) {
    if (colorPicker.color === "white") {
      frameServer.frames[frameServer.currentFrameId].paraparaCanvas.eraseByLine(
        beforeMousePosition,
        {x: event.clientX, y: event.clientY},
        lineWidthPicker.lineWidth
      );
    } else {
      frameServer.frames[frameServer.currentFrameId].paraparaCanvas.drawLine(
        beforeMousePosition,
        {x: event.clientX, y: event.clientY},
        colorPicker.color,
        lineWidthPicker.lineWidth
      );
    }
    beforeMousePosition = {x: event.clientX, y: event.clientY};
  }
}<commit_msg>main.js framesController 変数の直し忘れを修正<commit_after>var ParaparaCanvas = require("./parapara-canvas");
var Frame = require("./frame");
var FramesController = require("./frames-controller");
var drawTools = require("./draw-tools");
var Menu = require("./menu");

var framesController;
var colorPicker, lineWidthPicker;
var menu;
document.addEventListener("DOMContentLoaded", function() {
  framesController = new FramesController(document.getElementById("frames"));
  framesController.append(0, new Frame(new ParaparaCanvas(0, framesController.element)));
  setListenerForCanvas(0);
  framesController.setCurrentFrame(0);
  
  colorPicker = new drawTools.ColorPicker(document.getElementById("menu-colors"), "red");
  lineWidthPicker = new drawTools.LineWidthPicker(document.getElementById("menu-line-width"), 10);
  menu = new Menu();
  
  document.getElementById("menu-side-btn").addEventListener("click", function() {
    menu.toggleMenu();
  });
});

function setListenerForCanvas(frameId) {
  var pCanvas = framesController.getCanvasElementByFrameId(frameId);
  pCanvas.addEventListener("mousedown", mouseDownCanvas);
  pCanvas.addEventListener("mouseup", mouseUpCanvas);
  pCanvas.addEventListener("mousemove", mouseMoveCanvas);
}
// TODO: これらは、ここで、いいのか。
// → parapara-canvas.js に取り込むような気もするが、
//   この情報をWebsocket で送ったり・・となるのであれば、
//   それを parapara-canvas.js でやっていいの？となる。
var isMouseDown = false;
var beforeMousePosition = {};
function mouseDownCanvas(event) {
  menu.hideMenu();
  menu.toggleOpenMenuButton(false);
  isMouseDown = true;
  beforeMousePosition = {x: event.clientX, y: event.clientY};
}
function mouseUpCanvas() {
  menu.toggleOpenMenuButton(true);
  isMouseDown = false;
}
function mouseMoveCanvas(event) {
  if (isMouseDown) {
    if (colorPicker.color === "white") {
      framesController.frames[framesController.currentFrameId].paraparaCanvas.eraseByLine(
        beforeMousePosition,
        {x: event.clientX, y: event.clientY},
        lineWidthPicker.lineWidth
      );
    } else {
      framesController.frames[framesController.currentFrameId].paraparaCanvas.drawLine(
        beforeMousePosition,
        {x: event.clientX, y: event.clientY},
        colorPicker.color,
        lineWidthPicker.lineWidth
      );
    }
    beforeMousePosition = {x: event.clientX, y: event.clientY};
  }
}
{'fraction_non_alphanumeric': 0.13267543859649122, 'fraction_numerical': 0.002631578947368421, 'mean_word_length': 4.938802083333333, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5025795', 'n_tokens_mistral': 1438, 'n_tokens_neox': 1422, 'n_words': 238}