<commit_before><script>
import { hsvToRgb, rgbToHsv, rgbToHex, hexToRgb, hueToRgb } from '../../utils/color-converters';
import MouseMove from '../mouse-move/MouseMove.vue';
import CustomBtn from '../custom-btn/CustomBtn.vue';
import InputNumber from '../input-number/InputNumber.vue';
import InputText from '../input-text/InputText.vue';

export default {
  name: 'ColorPicker',
  components: {
    MouseMove,
    CustomBtn,
    InputNumber,
    InputText,
  },
  props: {
    color: {
      type: Object,
      default: () => ({ r: 255, g: 154, b: 23, a: 1 })
    }
  },
  data() {
    return {
      gradientBox: null,
      alphaScale: null,
      activeColorMode: 'RGB',
      alphaScaleTrianglesLeftPos: 0,
      hueScaleTrianglesTopPos: 0,
      circleLeftPos: 0,
      circleTopPos: 0,
      alphaScaleTrianglesBgColor: '#000',
      circleColor: '#000',
      gradientBoxColor: { r: 69, g: 28, b: 28 },

      hex: '4d5f7c',
      rgb: { r: 69, g: 28, b: 28, a: 1 },
      hsv: { h: 217, s: 23, v: 40, a: 1 }
    };
  },
  methods: {
    setColorAndPositionOfAlphaScaleTriangles() {
      const posX = this.alphaScale.clientWidth * this.rgb.a;
      this.alphaScaleTrianglesLeftPos = posX;
      this.alphaScaleTrianglesBgColor = (posX > this.alphaScale.clientWidth / 2) ? (255 / 3) > ((this.rgb.r + this.rgb.g + this.rgb.b) / 3) ? '#fff' : '#000' : '#000';
    },

    setCircleColorAndPosition() {
      this.circleLeftPos = this.hsv.s;
      this.circleTopPos = 100 - this.hsv.v;
      this.circleColor = (this.hsv.v < this.gradientBox.clientHeight / 4) ? '#fff' : '#000';
    },

    onMoveAlphaScale(x, y, node) {
      const alpha = +(x / node.clientWidth).toFixed(2);

      this.hsv.a = alpha;
      this.rgb.a = alpha;

      this.hex = rgbToHex(this.rgb.r, this.rgb.g, this.rgb.b, alpha);<commit_msg>set initial colors<commit_after><script>
import { hsvToRgb, rgbToHsv, rgbToHex, hexToRgb, hueToRgb } from '../../utils/color-converters';
import MouseMove from '../mouse-move/MouseMove.vue';
import CustomBtn from '../custom-btn/CustomBtn.vue';
import InputNumber from '../input-number/InputNumber.vue';
import InputText from '../input-text/InputText.vue';

export default {
  name: 'ColorPicker',
  components: {
    MouseMove,
    CustomBtn,
    InputNumber,
    InputText,
  },
  props: {
    color: {
      type: Object,
      default: () => ({ r: 70, g: 70, b: 220, a: 1 })
    }
  },
  data() {
    return {
      gradientBox: null,
      alphaScale: null,
      activeColorMode: 'RGB',
      alphaScaleTrianglesLeftPos: 0,
      hueScaleTrianglesTopPos: 0,
      circleLeftPos: 0,
      circleTopPos: 0,
      alphaScaleTrianglesBgColor: '#000',
      circleColor: '#000',
      gradientBoxColor: { r: 0, g: 0, b: 255 },

      hex: '4646dc',
      rgb: { r: 70, g: 70, b: 220, a: 1 },
      hsv: { h: 240, s: 68, v: 86, a: 1 }
    };
  },
  methods: {
    setColorAndPositionOfAlphaScaleTriangles() {
      const posX = this.alphaScale.clientWidth * this.rgb.a;
      this.alphaScaleTrianglesLeftPos = posX;
      this.alphaScaleTrianglesBgColor = (posX > this.alphaScale.clientWidth / 2) ? (255 / 3) > ((this.rgb.r + this.rgb.g + this.rgb.b) / 3) ? '#fff' : '#000' : '#000';
    },

    setCircleColorAndPosition() {
      this.circleLeftPos = this.hsv.s;
      this.circleTopPos = 100 - this.hsv.v;
      this.circleColor = (this.hsv.v < this.gradientBox.clientHeight / 4) ? '#fff' : '#000';
    },

    onMoveAlphaScale(x, y, node) {
      const alpha = +(x / node.clientWidth).toFixed(2);

      this.hsv.a = alpha;
      this.rgb.a = alpha;

      this.hex = rgbToHex(this.rgb.r, this.rgb.g, this.rgb.b, alpha);
{'fraction_non_alphanumeric': 0.16035145524437122, 'fraction_numerical': 0.03459637561779242, 'mean_word_length': 2.6393606393606395, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 11, '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': '5211137', 'n_tokens_mistral': 1429, 'n_tokens_neox': 1297, 'n_words': 287}