<commit_before>(function (window, document, undefined) {
  "use strict";
  var SIDELENGTH = window.innerHeight > window.innerWidth ? window.innerWidth :
                                                            window.innerHeight,

    MAXDRAWLENGTH = SIDELENGTH,
    CANVASCENTRE = MAXDRAWLENGTH / 2,
    DEFAULTMARKSIZE = 5,
    DEFAULTCOLOR = '#86801d',
    DEFAULTNUMSECTORS = 4,
    DEFAULTROTATION = 0,
    DEFAULTSETTINGS = {
      color: DEFAULTCOLOR,
      size: DEFAULTMARKSIZE,
      numSectors: DEFAULTNUMSECTORS,
      rotation: DEFAULTROTATION
    },
    settings = DEFAULTSETTINGS,
    settingSizeDisplayEl = document.querySelector('#outputSize'),
    settingSectorCountDisplayEl = document.querySelector('#outputSectorCount'),
    controlRotationDisplayEl = document.querySelector('#outputRotation'),
    currentRotation = 0,
    canvas,
    context,
    isAnimationStarted = false;
  
  function createGallery() {
    var gallery = document.createElement('OL'),
      unavailableWidth = 0,
      settingsStyles = window.getComputedStyle(document.querySelector('.settings')),
      canvasStyles = window.getComputedStyle(document.querySelector('.kaleidoscope')),
      unavailableWidth = null;
    gallery.id = 'gallery';
    gallery.classList.add('gallery');
    // Calculate width available to gallery.
    unavailableWidth = parseFloat(settingsStyles.width) + 
                       parseFloat(settingsStyles.marginLeft) + 
                       parseFloat(settingsStyles.marginRight) + 
                       parseFloat(canvasStyles.width) + 
                       parseFloat(canvasStyles.marginLeft) +
                       parseFloat(canvasStyles.marginRight);
    gallery.style.width = 'calc(100% - ' + unavailableWidth + 'px)';
    document.querySelector('body').appendChild(gallery);
    restoreGalleryItems(gallery);
  }
  
  // Add canvas element and a wrapping div to the DOM, returning the canvas.
  function createCanvas(document) {
    var canvas,
      wrapper;
    canvas = document.createElement('CANVAS');
    canvas.id = 'kaleidoscope';
    canvas.classList.add('kaleidoscope');
    canvas.style.height = SIDELENGTH + 'px';
    canvas.style.width = SIDELENGTH + 'px';
    canvas.setAttribute('height', SIDELENGTH + 'px');
    canvas.setAttribute('width', SIDELENGTH + 'px');
    
    wrapper = document.createElement('DIV');
    wrapper.classList.add('kaleidoscope-wrapper');
    wrapper.appendChild(canvas);
    
    document.querySelector('body').appendChild(wrapper);
    return canvas;
  }
  
  // Facilitates saving snapshots.
  function createOffscreenCanvas() {
    var osCanvas = document.createElement('CANVAS');
    osCanvas.classList.add('offscreen');
    osCanvas.width = 200;
    osCanvas.height = 200;
    document.querySelector('body').appendChild(osCanvas);
  }
  
  function initialiseSettings(settings) {
    var inputSize = document.querySelector('#settingSize'),
      outputSize = document.querySelector('#outputSize'),
      inputSectorCount = document.querySelector('#settingSectorCount'),
      outputSectorCount = document.querySelector('#outputSectorCount'),
      inputRotation = document.querySelector('#controlRotation'),
      outputRotation = document.querySelector('#outputRotation');

    inputSize.value = settings.size;
    outputSize.value = settings.size;
    inputSectorCount.value = settings.numSectors;
    outputSectorCount.value = settings.numSectors;
    inputRotation.value = settings.rotation;
    outputRotation.value = settings.rotation;    
    document.querySelector('#settingColor').value = settings.color;
  }
  
  // Draw black bkgnd & white circle.
  function initialiseStage(ctx, settings) {
    ctx.save();
    ctx.fillStyle = '#000000';
    ctx.fillRect(0, 0, SIDELENGTH, SIDELENGTH);
    ctx.moveTo(SIDELENGTH, CANVASCENTRE);
    ctx.fillStyle = '#ffffff';
    ctx.arc(CANVASCENTRE, CANVASCENTRE, SIDELENGTH / 2, 0, 2 * Math.PI);
    ctx.fill();
    ctx.restore();
    ctx.clip();
    initialiseSettings(settings);
  }
  
  // Returns canvas {x,y} coords converted from DOM {x,y} coords.
  // FIX: Doesn't work correctly when canvas itself has padding.
  function convertViewport2CanvasCoords(domCoords, canvas) {
    var bBox = canvas.getBoundingClientRect(),
      canvasCoords = {},
      paddingX = parseFloat(window.getComputedStyle(canvas).paddingLeft),
      paddingY = parseFloat(window.getComputedStyle(canvas).paddingTop);
    canvasCoords.x = domCoords.x - bBox.left - paddingX;
    canvasCoords.y = domCoords.y - bBox.top - paddingY;
    return canvasCoords;
  }

  // Convert cartesian coordinates to polar coordinates.
  function cartesianToPolar(x, y) {
    return { r: Math.sqrt(x*x+y*y), theta: Math.atan2(y,x) };
  }

  // Convert cartesian coordinates to polar coordinates.
  function polarToCartesian(r, theta) {
    return { x: r*Math.cos(theta), y: r*Math.sin(theta) };
  }

  // Convert coord from canvas coord system, to having origin at centre of 
  // the stage.
  function canvasToCircOrigin(canvX, canvY) {
    var circX = canvX - CANVASCENTRE,
      circY = (canvY - CANVASCENTRE) * -1;
    return { x: circX, y: circY };
  }

  // Convert coord from being relative to the centre of the stage, to being
  // in the canvas coordinate system.
  function circOriginToCanvas(circX, circY) {
    var canvX = circX + CANVASCENTRE,
      canvY = circY * -1 + CANVASCENTRE;
    return { x: canvX, y: canvY };
  }
  
  function draw(event) {
    var canvasCoords = convertViewport2CanvasCoords({x: event.x, y: event.y}, 
                                                    event.target),
      ctx = event.target.getContext('2d');
    if (!!ctx) {
      mirror(canvasCoords.x, canvasCoords.y, ctx);
    }
  }
  
  function stopDrawing(event) {
    var canvas =  event.target.nodeName === 'CANVAS' ? event.target : null;
    if (canvas) {
      canvas.removeEventListener('mousemove', draw, false);<commit_msg>Close #1: fix bug preventing canvas coords being calculated correctly<commit_after>(function (window, document, undefined) {
  "use strict";
  var SIDELENGTH = window.innerHeight > window.innerWidth ? window.innerWidth :
                                                            window.innerHeight,

    MAXDRAWLENGTH = SIDELENGTH,
    CANVASCENTRE = MAXDRAWLENGTH / 2,
    DEFAULTMARKSIZE = 5,
    DEFAULTCOLOR = '#86801d',
    DEFAULTNUMSECTORS = 4,
    DEFAULTROTATION = 0,
    DEFAULTSETTINGS = {
      color: DEFAULTCOLOR,
      size: DEFAULTMARKSIZE,
      numSectors: DEFAULTNUMSECTORS,
      rotation: DEFAULTROTATION
    },
    settings = DEFAULTSETTINGS,
    settingSizeDisplayEl = document.querySelector('#outputSize'),
    settingSectorCountDisplayEl = document.querySelector('#outputSectorCount'),
    controlRotationDisplayEl = document.querySelector('#outputRotation'),
    currentRotation = 0,
    canvas,
    context,
    isAnimationStarted = false;
  
  function createGallery() {
    var gallery = document.createElement('OL'),
      unavailableWidth = 0,
      settingsStyles = window.getComputedStyle(document.querySelector('.settings')),
      canvasStyles = window.getComputedStyle(document.querySelector('.kaleidoscope')),
      unavailableWidth = null;
    gallery.id = 'gallery';
    gallery.classList.add('gallery');
    // Calculate width available to gallery.
    unavailableWidth = parseFloat(settingsStyles.width) + 
                       parseFloat(settingsStyles.marginLeft) + 
                       parseFloat(settingsStyles.marginRight) + 
                       parseFloat(canvasStyles.width) + 
                       parseFloat(canvasStyles.marginLeft) +
                       parseFloat(canvasStyles.marginRight);
    gallery.style.width = 'calc(100% - ' + unavailableWidth + 'px)';
    document.querySelector('body').appendChild(gallery);
    restoreGalleryItems(gallery);
  }
  
  // Add canvas element and a wrapping div to the DOM, returning the canvas.
  function createCanvas(document) {
    var canvas,
      wrapper;
    canvas = document.createElement('CANVAS');
    canvas.id = 'kaleidoscope';
    canvas.classList.add('kaleidoscope');
    canvas.style.height = SIDELENGTH + 'px';
    canvas.style.width = SIDELENGTH + 'px';
    canvas.setAttribute('height', SIDELENGTH + 'px');
    canvas.setAttribute('width', SIDELENGTH + 'px');
    
    wrapper = document.createElement('DIV');
    wrapper.classList.add('kaleidoscope-wrapper');
    wrapper.appendChild(canvas);
    
    document.querySelector('body').appendChild(wrapper);
    return canvas;
  }
  
  // Facilitates saving snapshots.
  function createOffscreenCanvas() {
    var osCanvas = document.createElement('CANVAS');
    osCanvas.classList.add('offscreen');
    osCanvas.width = 200;
    osCanvas.height = 200;
    document.querySelector('body').appendChild(osCanvas);
  }
  
  function initialiseSettings(settings) {
    var inputSize = document.querySelector('#settingSize'),
      outputSize = document.querySelector('#outputSize'),
      inputSectorCount = document.querySelector('#settingSectorCount'),
      outputSectorCount = document.querySelector('#outputSectorCount'),
      inputRotation = document.querySelector('#controlRotation'),
      outputRotation = document.querySelector('#outputRotation');

    inputSize.value = settings.size;
    outputSize.value = settings.size;
    inputSectorCount.value = settings.numSectors;
    outputSectorCount.value = settings.numSectors;
    inputRotation.value = settings.rotation;
    outputRotation.value = settings.rotation;    
    document.querySelector('#settingColor').value = settings.color;
  }
  
  // Draw black bkgnd & white circle.
  function initialiseStage(ctx, settings) {
    ctx.save();
    ctx.fillStyle = '#000000';
    ctx.fillRect(0, 0, SIDELENGTH, SIDELENGTH);
    ctx.moveTo(SIDELENGTH, CANVASCENTRE);
    ctx.fillStyle = '#ffffff';
    ctx.arc(CANVASCENTRE, CANVASCENTRE, SIDELENGTH / 2, 0, 2 * Math.PI);
    ctx.fill();
    ctx.restore();
    ctx.clip();
    initialiseSettings(settings);
  }
  
  // Returns canvas {x,y} coords converted from DOM {x,y} coords.
  // FIX: Doesn't work correctly when canvas itself has padding.
  function convertViewport2CanvasCoords(domCoords, canvas) {
    var bBox = canvas.getBoundingClientRect(),
      canvasCoords = {},
      paddingX = parseFloat(window.getComputedStyle(canvas).paddingLeft),
      paddingY = parseFloat(window.getComputedStyle(canvas).paddingTop);
    canvasCoords.x = domCoords.x - bBox.left - paddingX;
    canvasCoords.y = domCoords.y - bBox.top - paddingY;
    return canvasCoords;
  }

  // Convert cartesian coordinates to polar coordinates.
  function cartesianToPolar(x, y) {
    return { r: Math.sqrt(x*x+y*y), theta: Math.atan2(y,x) };
  }

  // Convert cartesian coordinates to polar coordinates.
  function polarToCartesian(r, theta) {
    return { x: r*Math.cos(theta), y: r*Math.sin(theta) };
  }

  // Convert coord from canvas coord system, to having origin at centre of 
  // the stage.
  function canvasToCircOrigin(canvX, canvY) {
    var circX = canvX - CANVASCENTRE,
      circY = (canvY - CANVASCENTRE) * -1;
    return { x: circX, y: circY };
  }

  // Convert coord from being relative to the centre of the stage, to being
  // in the canvas coordinate system.
  function circOriginToCanvas(circX, circY) {
    var canvX = circX + CANVASCENTRE,
      canvY = circY * -1 + CANVASCENTRE;
    return { x: canvX, y: canvY };
  }
  
  function draw(event) {
    var canvasCoords = convertViewport2CanvasCoords({x: event.clientX, y: event.clientY}, 
                                                    event.target),
      ctx = event.target.getContext('2d');
    if (!!ctx) {
      mirror(canvasCoords.x, canvasCoords.y, ctx);
    }
  }
  
  function stopDrawing(event) {
    var canvas =  event.target.nodeName === 'CANVAS' ? event.target : null;
    if (canvas) {
      canvas.removeEventListener('mousemove', draw, false);
{'fraction_non_alphanumeric': 0.11437196042260607, 'fraction_numerical': 0.006288780815025994, 'mean_word_length': 3.149965205288796, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 8, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4069125', 'n_tokens_mistral': 3545, 'n_tokens_neox': 3522, 'n_words': 722}