<commit_before><template>
  <div
    :class='$style.element'
    :style=borderBox >
    <div
      :class='$style.paddingBox'
      :style=paddingBox
    ></div>
  </div>
</template>

<script>
  export default {
    name: 'SG_ElementHighlighter',
    props: {
      elementProps: Object,
      scrollPosition: Object
    },
    computed: {
      borderBox: function () {
        return {
          top: this.elementProps.top - this.scrollPosition.scrollTop + 'px',
          left: this.elementProps.left - this.scrollPosition.scrollLeft + 'px',
          width: this.elementProps.width + 'px',
          height: this.elementProps.height + 'px'
        };
      },
      paddingBox: function () {
        return this.elementProps.style && {
            top: this.elementProps.style.paddingTop || 0,
            left: this.elementProps.style.paddingLeft || 0,
            right: this.elementProps.style.paddingRight || 0,
            bottom: this.elementProps.style.paddingBottom || 0
          };
      }
    }

  };
</script>

<style lang="stylus" module>
  .element {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background: rgba(255, 0, 0, 0.1);
  }

  .paddingBox {
    position: absolute;
    background: green;
    opacity: 0.3;
  }
</style><commit_msg>Рефакторит компонент подсветки активного элемента<commit_after><template>
  <div
    :class='$style.element'
    :style=borderBox
  >
    <div
      :class='$style.paddingBox'
      :style=paddingBox
    ></div>
  </div>
</template>

<script>
  export default {
    name: 'SG_ElementHighlighter',
    props: {
      elementProps: Object,
      scrollPosition: Object
    },
    computed: {
      borderBox: function () {
        return {
          top: this.elementProps.top - this.scrollPosition.scrollTop + 'px',
          left: this.elementProps.left - this.scrollPosition.scrollLeft + 'px',
          width: this.elementProps.width + 'px',
          height: this.elementProps.height + 'px'
        };
      },
      paddingBox: function () {
        return this.elementProps.style && {
            top: this.elementProps.style.paddingTop || 0,
            left: this.elementProps.style.paddingLeft || 0,
            right: this.elementProps.style.paddingRight || 0,
            bottom: this.elementProps.style.paddingBottom || 0
          };
      }
    }

  };
</script>

<style lang="stylus" module>
  .element {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background: rgba(255, 0, 0, 0.1);
  }

  .paddingBox {
    position: absolute;
    background: green;
    opacity: 0.3;
  }
</style>
{'fraction_non_alphanumeric': 0.1339421613394216, 'fraction_numerical': 0.01293759512937595, 'mean_word_length': 2.148502994011976, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 23, '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': '1773568', 'n_tokens_mistral': 864, 'n_tokens_neox': 831, 'n_words': 167}