<commit_before>angular.module('picker', [])

/**
 * @ngdoc directive
 * @name picker
 *
 * @description
 * Need to figure out description a bit first
 */
.directive('picker', ['Color', function(Color) {
  return {
    restrict: 'EA',
    scope: {
      color: '=',
      pick: '&'
    },
    controller: function($scope) {
      // defaults
      $scope.hue = 0;
      $scope.color = Color.create(255, 255, 255);

      $scope.selectColor = function(color) {
        $scope.color = color;

        $scope.pick({
          $color: color
        });
      };

      $scope.selectHue = function(hue) {
        $scope.hue = hue;
      };

    },
    template:
    "<div class='picker'> \
      <div class='picker-wrapper'> \
        <color-space hue='hue' pick='selectColor($color)'></color-space> \
        <hue-space hue='hue'></hue-space> \
      </div> \
      <converters color='color'></converters> \
    </div>"
  };
}])

/**
 * @ngdoc directive
 * @name colorSpace
 *
 * @description
 * Allows the user to select a color from the main colorspace.
 * Requires a hue value in order to generate the colorspace,
 * then listens for mouse events in order to move the cursor
 * around the space.
 */
.directive('colorSpace', ['Widgets', 'Color', 'ConvertColor', 'PickerUtils',
  function(Widgets, Color, ConvertColor, PickerUtils) {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      hue: '=',
      pick: '&'
    },
    template: "<section class='picker-colorspace'></section>",
    link: function(scope, element) {
      var space = Widgets.canvas(),
          canvas = space.canvas,
          context = space.context,
          cursor = Widgets.cursor('&#9675;');

      scope.$watch('hue', function() {
        scope.draw();
        scope.select();
        console.log('change hue');
      });

      // Pick the color at the cursor
      // (relies on cursor state
      // rather than arguments)
      scope.select = function() {
        var x, y, data, rgb, hex;

        // get cursor's position
        x = PickerUtils.stripPx(cursor.element.style.left);
        y = PickerUtils.stripPx(cursor.element.style.top);
        data = context.getImageData(x, y, 1, 1).data;

        // expose $color for select expression
        scope.pick({
          $color: Color.create(data[0], data[1], data[2])
        });
      };

      // move a cursor based on a mouse event
      // expects to be called with `this` set
      // to the parent element.
      scope.moveCursor = function(event) {
        var bounds = this.getBoundingClientRect(),
            x = event.pageX - bounds.left,
            y = event.pageY - bounds.top;

        // update cursor's position
        cursor.element.style.left = x + 'px';
        cursor.element.style.top  = y + 'px';

        // pick the color at this position
        scope.select();

        // click needs to trigger scope digest
        scope.$apply();
      };

      // if mousedown move cursor
      scope.mouseMove = function(event) {
        if(scope.mousedown) {
          scope.moveCursor.call(this, event);
        }
      };

      // toggle mouse state
      scope.mouseToggle = function(mousedown) {
        scope.mousedown = mousedown;
      };

      // resize canavas
      scope.resize = function() {
        canvas.width = element.prop('offsetWidth');
        canvas.height = element.prop('offsetHeight');
      };

      // redraw space
      scope.draw = function() {
        var h, s, l, x, y, gradient;

        h = scope.hue;
        s = 0;
        l = 0;

        for(y = 0; y < canvas.height; y++) {
          l = 100 - ((y / canvas.height) * 100);

          gradient = context.createLinearGradient(0, 0, canvas.width, 0);
          gradient.addColorStop(0, 'hsl(' + h + ', 0%, ' + l + '%)');
          gradient.addColorStop(1, 'hsl(' + h + ', 100%, ' + l + '%)');

          context.fillStyle = gradient;
          context.fillRect(0, y, canvas.width, 1);
        }

      };

      scope.resize();
      scope.mousedown = false;
      scope.draw();

      element.append(canvas);
      element.append(cursor.element);

      canvas.addEventListener('mouseup',   scope.mouseToggle.bind(null, false));
      canvas.addEventListener('mousedown', scope.mouseToggle.bind(null, true));
      canvas.addEventListener('mousemove', scope.mouseMove);
      canvas.addEventListener('click',     scope.moveCursor);
    }
  };
}])


/**
 * @ngdoc directive
 * @name colorSpace
 *
 * @description
 * Provides a canvas from which the user can select a hue
 * in order to generate a colorspace. Is drawn initially
 * from the link function, then listens for mouse events
 * in order to move the cursor around the space.
 */
.directive('hueSpace', ['Widgets', 'PickerUtils', function(Widgets, PickerUtils) {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      hue: '=',
      pick: '&'
    },
    template: "<aside class='picker-huespace'></aside>",
    controller: function($scope) {
      $scope.$watch('hue', function() {
        // redraw colour space
      });
    },
    link: function(scope, element) {
      var space = Widgets.canvas(),
          canvas = space.canvas,
          context = space.context,
          cursor = Widgets.cursor('&#9654;');

      // Pick the color at the cursor
      // (relies on cursor state
      // rather than arguments)
      scope.select = function() {
        // get cursor's position
        var y = PickerUtils.stripPx(cursor.element.style.top);

        // pick the color at this position
        scope.hue = Math.round((y / canvas.height) * 360);

        // click needs to trigger scope digest
        scope.$apply();
      };

      // move a cursor based on a mouse event
      // expects to be called with `this` set
      // to the parent element.
      scope.moveCursor = function(event) {
        var bounds = this.getBoundingClientRect(),
            y = event.pageY - bounds.top;

        // update cursor's position
        cursor.element.style.top = y + 'px';
        scope.select();
        scope.$apply();
      };

      // if mousedown move cursor
      scope.mouseMove = function(event) {
        if(scope.mousedown) {
          scope.moveCursor.call(this, event);
        }
      };

      // toggle mouse state
      scope.mouseToggle = function(mousedown) {
        scope.mousedown = mousedown;
      };

      // resize canavas
      scope.resize = function() {
        canvas.width = element.prop('offsetWidth');
        canvas.height = element.prop('offsetHeight');
      };

      // redraw space
      scope.draw = function() {
        var h = 0;

        for(y = 0; y < canvas.height; y++) {
          // calculate lightness
          h = ((y / canvas.height) * 360);
          context.fillStyle = 'hsl(' + h + ', 100%, 50%)';
          context.fillRect(0, y, canvas.width, 1);
        }
      };

      scope.resize();
      scope.mousedown = false;
      scope.draw();

      element.append(canvas);
      element.append(cursor.element);

      canvas.addEventListener('mouseup',   scope.mouseToggle.bind(null, false));
      canvas.addEventListener('mousedown', scope.mouseToggle.bind(null, true));
      canvas.addEventListener('mousemove', scope.mouseMove);
      canvas.addEventListener('click',     scope.moveCursor);
    }
  };
}])

/**
 * @ngdoc directive
 * @name converters
 *
 * @description
 * Converts a color object into other color
 * representations (e.g. hex, hsl and rgb).
 *
 * TODO Currently only does Hex.
 */
.directive('converters', function() {
  return {
    restrict: 'E',
    scope: {
      color: '='
    },
    link: function(scope) {
      scope.$watch('color', function() {
        console.log('change converter value');
      });
    },
    template:
    "<section class='picker-input'> \
      <div class='picker-row'> \
        <span class='picker-prefix'>#</span> \
        <input type='text' placeholder='FFFFFF' \
               ng-model='color | toUnprefixedHex'/> \
      </div> \
    </section>"
  };
})

.filter('toHex', function() {
  return function(color) {
    return color.toHex();
  };<commit_msg>fixes ngModel binding issues<commit_after>angular.module('picker', [])

/**
 * @ngdoc directive
 * @name picker
 *
 * @description
 * Need to figure out description a bit first
 */
.directive('picker', ['Color', function(Color) {
  return {
    restrict: 'EA',
    scope: {
      color: '=',
      pick: '&'
    },
    controller: function($scope) {
      // defaults
      $scope.hue = 0;
      $scope.color = Color.create(255, 255, 255);

      $scope.selectColor = function(color) {
        $scope.color = color;

        $scope.pick({
          $color: color
        });
      };

      $scope.selectHue = function(hue) {
        $scope.hue = hue;
      };

    },
    template:
    "<div class='picker'> \
      <div class='picker-wrapper'> \
        <color-space hue='hue' pick='selectColor($color)'></color-space> \
        <hue-space hue='hue'></hue-space> \
      </div> \
      <converters color='color'></converters> \
    </div>"
  };
}])

/**
 * @ngdoc directive
 * @name colorSpace
 *
 * @description
 * Allows the user to select a color from the main colorspace.
 * Requires a hue value in order to generate the colorspace,
 * then listens for mouse events in order to move the cursor
 * around the space.
 */
.directive('colorSpace', ['Widgets', 'Color', 'ConvertColor', 'PickerUtils',
  function(Widgets, Color, ConvertColor, PickerUtils) {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      hue: '=',
      pick: '&'
    },
    template: "<section class='picker-colorspace'></section>",
    link: function(scope, element) {
      var space = Widgets.canvas(),
          canvas = space.canvas,
          context = space.context,
          cursor = Widgets.cursor('&#9675;');

      scope.$watch('hue', function() {
        scope.draw();
        scope.select();
        console.log('change hue');
      });

      // Pick the color at the cursor
      // (relies on cursor state
      // rather than arguments)
      scope.select = function() {
        var x, y, data, rgb, hex;

        // get cursor's position
        x = PickerUtils.stripPx(cursor.element.style.left);
        y = PickerUtils.stripPx(cursor.element.style.top);
        data = context.getImageData(x, y, 1, 1).data;

        // expose $color for select expression
        scope.pick({
          $color: Color.create(data[0], data[1], data[2])
        });
      };

      // move a cursor based on a mouse event
      // expects to be called with `this` set
      // to the parent element.
      scope.moveCursor = function(event) {
        var bounds = this.getBoundingClientRect(),
            x = event.pageX - bounds.left,
            y = event.pageY - bounds.top;

        // update cursor's position
        cursor.element.style.left = x + 'px';
        cursor.element.style.top  = y + 'px';

        // pick the color at this position
        scope.select();

        // click needs to trigger scope digest
        scope.$apply();
      };

      // if mousedown move cursor
      scope.mouseMove = function(event) {
        if(scope.mousedown) {
          scope.moveCursor.call(this, event);
        }
      };

      // toggle mouse state
      scope.mouseToggle = function(mousedown) {
        scope.mousedown = mousedown;
      };

      // resize canavas
      scope.resize = function() {
        canvas.width = element.prop('offsetWidth');
        canvas.height = element.prop('offsetHeight');
      };

      // redraw space
      scope.draw = function() {
        var h, s, l, x, y, gradient;

        h = scope.hue;
        s = 0;
        l = 0;

        for(y = 0; y < canvas.height; y++) {
          l = 100 - ((y / canvas.height) * 100);

          gradient = context.createLinearGradient(0, 0, canvas.width, 0);
          gradient.addColorStop(0, 'hsl(' + h + ', 0%, ' + l + '%)');
          gradient.addColorStop(1, 'hsl(' + h + ', 100%, ' + l + '%)');

          context.fillStyle = gradient;
          context.fillRect(0, y, canvas.width, 1);
        }

      };

      scope.resize();
      scope.mousedown = false;
      scope.draw();

      element.append(canvas);
      element.append(cursor.element);

      canvas.addEventListener('mouseup',   scope.mouseToggle.bind(null, false));
      canvas.addEventListener('mousedown', scope.mouseToggle.bind(null, true));
      canvas.addEventListener('mousemove', scope.mouseMove);
      canvas.addEventListener('click',     scope.moveCursor);
    }
  };
}])


/**
 * @ngdoc directive
 * @name colorSpace
 *
 * @description
 * Provides a canvas from which the user can select a hue
 * in order to generate a colorspace. Is drawn initially
 * from the link function, then listens for mouse events
 * in order to move the cursor around the space.
 */
.directive('hueSpace', ['Widgets', 'PickerUtils', function(Widgets, PickerUtils) {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      hue: '=',
      pick: '&'
    },
    template: "<aside class='picker-huespace'></aside>",
    controller: function($scope) {
      $scope.$watch('hue', function() {
        // redraw colour space
      });
    },
    link: function(scope, element) {
      var space = Widgets.canvas(),
          canvas = space.canvas,
          context = space.context,
          cursor = Widgets.cursor('&#9654;');

      // Pick the color at the cursor
      // (relies on cursor state
      // rather than arguments)
      scope.select = function() {
        // get cursor's position
        var y = PickerUtils.stripPx(cursor.element.style.top);

        // pick the color at this position
        scope.hue = Math.round((y / canvas.height) * 360);

        // click needs to trigger scope digest
        scope.$apply();
      };

      // move a cursor based on a mouse event
      // expects to be called with `this` set
      // to the parent element.
      scope.moveCursor = function(event) {
        var bounds = this.getBoundingClientRect(),
            y = event.pageY - bounds.top;

        // update cursor's position
        cursor.element.style.top = y + 'px';
        scope.select();
        scope.$apply();
      };

      // if mousedown move cursor
      scope.mouseMove = function(event) {
        if(scope.mousedown) {
          scope.moveCursor.call(this, event);
        }
      };

      // toggle mouse state
      scope.mouseToggle = function(mousedown) {
        scope.mousedown = mousedown;
      };

      // resize canavas
      scope.resize = function() {
        canvas.width = element.prop('offsetWidth');
        canvas.height = element.prop('offsetHeight');
      };

      // redraw space
      scope.draw = function() {
        var h = 0;

        for(y = 0; y < canvas.height; y++) {
          // calculate lightness
          h = ((y / canvas.height) * 360);
          context.fillStyle = 'hsl(' + h + ', 100%, 50%)';
          context.fillRect(0, y, canvas.width, 1);
        }
      };

      scope.resize();
      scope.mousedown = false;
      scope.draw();

      element.append(canvas);
      element.append(cursor.element);

      canvas.addEventListener('mouseup',   scope.mouseToggle.bind(null, false));
      canvas.addEventListener('mousedown', scope.mouseToggle.bind(null, true));
      canvas.addEventListener('mousemove', scope.mouseMove);
      canvas.addEventListener('click',     scope.moveCursor);
    }
  };
}])

/**
 * @ngdoc directive
 * @name converters
 *
 * @description
 * Converts a color object into other color
 * representations (e.g. hex, hsl and rgb).
 *
 * TODO Currently only does Hex.
 */
.directive('converters', function() {
  return {
    restrict: 'E',
    scope: {
      color: '='
    },
    link: function(scope) {
      scope.$watch('color', function() {
        console.log('change converter value');
      });
    },
    template:
    "<section class='picker-input'> \
      <div class='picker-row'> \
        <span class='picker-prefix'>#</span> \
        <input type='text' placeholder='FFFFFF' \
               ng-value='color | toUnprefixedHex'/> \
      </div> \
    </section>"
  };
})

.filter('toHex', function() {
  return function(color) {
    return color.toHex();
  };
{'fraction_non_alphanumeric': 0.14668721109399074, 'fraction_numerical': 0.007149460708782742, 'mean_word_length': 2.0906666666666665, 'pattern_counts': {'":': 0, '<': 49, '<?xml version=': 0, '>': 45, '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': '1236548', 'n_tokens_mistral': 4996, 'n_tokens_neox': 4771, 'n_words': 1191}