<commit_before>var createWhiteboard = function(containerElement) {
  var containerZ,
    prevContainerWidth, prevContainerHeight;

  var socket;

  var mouse2dPosTracker; // relative to container

  var DRAW_LAYER_RELATIVE_Z = 0; // bottom layer
  var drawCanvas, drawCtx,
    colorHex, penSize, // colorHex is a hex string
    cacheCanvas, cacheCtx, // hidden, used to redraw canvas on resize
    isDrawing;

  var GFX_LAYER_RELATIVE_Z = 1; // middle layer
  var camera, scene, renderer,
    clock, tick,
    particleSystem,
    spawnerOpts,
    unanimatedLines;

  var OVERLAY_RELATIVE_Z = 2; // top layer
  var pickerShape,
    uCountSVGText;

  var DEFAULT_COLORHEX = 'aa88ff'; // alternatively, 0xffffff

  // ---------------- end shared var declarations

  socket = io(); // WAOW! AMAZING!

  recordContainerDimensions();
  initPosTrackers();

  initDrawLayer();
  initGFXLayer();
  initOverlay();

  animate();
  initEventHandlers();

  function recordContainerDimensions() {
    containerZ = getZIndex(containerElement);
    prevContainerWidth = containerElement.offsetWidth;
    prevContainerHeight = containerElement.offsetHeight;
  }

  // ---------------- events

  function initEventHandlers() {
    containerElement.addEventListener('mousedown', handleMousePress, true);
    containerElement.addEventListener('mousemove', handleMouseMove, true);
    containerElement.addEventListener('mouseup', handleMouseRelease, true);

    containerElement.addEventListener('touchstart', handleTouch, true);
    containerElement.addEventListener('touchmove', handleTouch, true);
    containerElement.addEventListener('touchend', handleTouch, true);
    containerElement.addEventListener('touchcancel', handleTouch, true);

    // Detect mouse release outside the window
    document.addEventListener('mouseup', handleMouseRelease, true);
    // Clear position when mouse outside window but continue drawing when come back
    document.onmouseout = handleMouseOut;

    // TODO make it only work when whiteboard container is active
    document.addEventListener('keypress', handleKeypress, true);

    var RESIZE_HANDLING_RATE = 4; // 4fps resizing responsiveness
    window.addEventListener('resize', createThrottledResizeHandler(RESIZE_HANDLING_RATE));
  }

  function handleTouch(e) {
    var touches = e.changedTouches;
    var first = touches[0];
    var type = '';
    switch (e.type) {
      case 'touchstart':
        type = 'mousedown';
        break;
      case 'touchmove':
        type = 'mousemove';
        break;
      case 'touchend':
        type = 'mouseup';
        break;
      default:
        return;
    }
    var simulatedMouseEvent = document.createEvent('MouseEvent');
    simulatedMouseEvent.initMouseEvent(type, true, true, window, 1,
      first.screenX, first.screenY,
      first.clientX, first.clientY, false,
      false, false, false, 0 /* left*/, null);

    first.target.dispatchEvent(simulatedMouseEvent);
    // Don't prevent default for color picker
    // event.preventDefault();
  }

  function handleKeypress(e) {
    var key = e.which || e.keyCode;
    if (key === 99) {
      // "c" pressed
      clearScreen();
    }
  }

  function handleMousePress(e) {
    e.preventDefault();
    var targetPagePos = getPagePosition(e.target);
    var containerPagePos = getPagePosition(containerElement);
    var x = e.offsetX + targetPagePos.x - containerPagePos.x;
    var y = e.offsetY + targetPagePos.y - containerPagePos.y;
    updateTracker(mouse2dPosTracker, x, y);
    isDrawing = true;
  }

  function handleMouseRelease() {
    isDrawing = false;
    resetPosTrackers();
  }

  function handleMouseMove(e) {
    if (!isDrawing) return;

    var targetPagePos = getPagePosition(e.target);
    var containerPagePos = getPagePosition(containerElement);
    var x = e.offsetX + targetPagePos.x - containerPagePos.x;
    var y = e.offsetY + targetPagePos.y - containerPagePos.y;
    updateTracker(mouse2dPosTracker, x, y);
    var newLine = {
      startX: mouse2dPosTracker.prevX,
      startY: mouse2dPosTracker.prevY,
      endX: mouse2dPosTracker.newX,
      endY: mouse2dPosTracker.newY,
      width: penSize,
      colorHex: colorHex<commit_msg>fix mouse position for firefox<commit_after>var createWhiteboard = function(containerElement) {
  var containerZ,
    prevContainerWidth, prevContainerHeight;

  var socket;

  var mouse2dPosTracker; // relative to container

  var DRAW_LAYER_RELATIVE_Z = 0; // bottom layer
  var drawCanvas, drawCtx,
    colorHex, penSize, // colorHex is a hex string
    cacheCanvas, cacheCtx, // hidden, used to redraw canvas on resize
    isDrawing;

  var GFX_LAYER_RELATIVE_Z = 1; // middle layer
  var camera, scene, renderer,
    clock, tick,
    particleSystem,
    spawnerOpts,
    unanimatedLines;

  var OVERLAY_RELATIVE_Z = 2; // top layer
  var pickerShape,
    uCountSVGText;

  var DEFAULT_COLORHEX = 'aa88ff'; // alternatively, 0xffffff

  // ---------------- end shared var declarations

  socket = io(); // WAOW! AMAZING!

  recordContainerDimensions();
  initPosTrackers();

  initDrawLayer();
  initGFXLayer();
  initOverlay();

  animate();
  initEventHandlers();

  function recordContainerDimensions() {
    containerZ = getZIndex(containerElement);
    prevContainerWidth = containerElement.offsetWidth;
    prevContainerHeight = containerElement.offsetHeight;
  }

  // ---------------- events

  function initEventHandlers() {
    containerElement.addEventListener('mousedown', handleMousePress, true);
    containerElement.addEventListener('mousemove', handleMouseMove, true);
    containerElement.addEventListener('mouseup', handleMouseRelease, true);

    containerElement.addEventListener('touchstart', handleTouch, true);
    containerElement.addEventListener('touchmove', handleTouch, true);
    containerElement.addEventListener('touchend', handleTouch, true);
    containerElement.addEventListener('touchcancel', handleTouch, true);

    // Detect mouse release outside the window
    document.addEventListener('mouseup', handleMouseRelease, true);
    // Clear position when mouse outside window but continue drawing when come back
    document.onmouseout = handleMouseOut;

    // TODO make it only work when whiteboard container is active
    document.addEventListener('keypress', handleKeypress, true);

    var RESIZE_HANDLING_RATE = 4; // 4fps resizing responsiveness
    window.addEventListener('resize', createThrottledResizeHandler(RESIZE_HANDLING_RATE));
  }

  function handleTouch(e) {
    var touches = e.changedTouches;
    var first = touches[0];
    var type = '';
    switch (e.type) {
      case 'touchstart':
        type = 'mousedown';
        break;
      case 'touchmove':
        type = 'mousemove';
        break;
      case 'touchend':
        type = 'mouseup';
        break;
      default:
        return;
    }
    var simulatedMouseEvent = document.createEvent('MouseEvent');
    simulatedMouseEvent.initMouseEvent(type, true, true, window, 1,
      first.screenX, first.screenY,
      first.clientX, first.clientY, false,
      false, false, false, 0 /* left*/, null);

    first.target.dispatchEvent(simulatedMouseEvent);
    // Don't prevent default for color picker
    // event.preventDefault();
  }

  function handleKeypress(e) {
    var key = e.which || e.keyCode;
    if (key === 99) {
      // "c" pressed
      clearScreen();
    }
  }

  function handleMousePress(e) {
    e.preventDefault();
    // Compatibility fix for firefox
    var xpos = e.offsetX === undefined
      ? (e.originalEvent === undefined ? e.layerX : e.originalEvent.layerX) : e.offsetX;
    var ypos = e.offsetY === undefined
      ? (e.originalEvent === undefined ? e.layerY : e.originalEvent.layerY) : e.offsetY;
    var targetPagePos = getPagePosition(e.target);
    var containerPagePos = getPagePosition(containerElement);
    var x = xpos + targetPagePos.x - containerPagePos.x;
    var y = ypos + targetPagePos.y - containerPagePos.y;
    updateTracker(mouse2dPosTracker, x, y);
    isDrawing = true;
  }

  function handleMouseRelease() {
    isDrawing = false;
    resetPosTrackers();
  }

  function handleMouseMove(e) {
    if (!isDrawing) return;
    // Compatibility fix for firefox
    var xpos = e.offsetX === undefined
      ? (e.originalEvent === undefined ? e.layerX : e.originalEvent.layerX) : e.offsetX;
    var ypos = e.offsetY === undefined
      ? (e.originalEvent === undefined ? e.layerY : e.originalEvent.layerY) : e.offsetY;
    var targetPagePos = getPagePosition(e.target);
    var containerPagePos = getPagePosition(containerElement);
    var x = xpos + targetPagePos.x - containerPagePos.x;
    var y = ypos + targetPagePos.y - containerPagePos.y;
    updateTracker(mouse2dPosTracker, x, y);
    var newLine = {
      startX: mouse2dPosTracker.prevX,
      startY: mouse2dPosTracker.prevY,
      endX: mouse2dPosTracker.newX,
      endY: mouse2dPosTracker.newY,
      width: penSize,
      colorHex: colorHex
{'fraction_non_alphanumeric': 0.10895289127037285, 'fraction_numerical': 0.004465282429113641, 'mean_word_length': 3.37451171875, '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': '82398', 'n_tokens_mistral': 2673, 'n_tokens_neox': 2590, 'n_words': 631}