<commit_before>import { Container, Text, Point, Graphics, loader as Loader, Sprite } from 'pixi.js/src';
import { TweenMax, Power4 } from 'gsap';
import ColorDot from './ColorDot';
import { getData, IS_MOBILE, getArrowScale, getArrowScaleMobile } from '../../utils/config';
import { random, TWO_PI, ANGLE_TO_RAD } from '../../utils/Maths';
import Arrow from '../arrow/arrow';
import { shuffle } from 'lodash';
import { styleTitle, styleTitleMobile, styleInfo, styleInfoMobile, styleLink, styleLinkMobile } from './styles';

const data = getData();
const HOVER_PERC = 1.38;

export default class Block extends Container {
  /**
   * @constructor
   * @param title
   * @param links
   * @param images
   * @param body
   * @param link
   * @param url
   */
  constructor(props, maxImageWidth, maxImageHeight, showDebug) {
    super();

    this.showDebug = showDebug;

    const { title, links, images, body, link, url, id, slug } = props;

    this.maxImageWidth = maxImageWidth;
    this.maxImageHeight = maxImageHeight;

    this.linkURL = url;
    this.blockTitle = title;
    this.links = links || [];
    this.linksSlugs = [];
    this.links.forEach((link) => {this.linksSlugs.push(data.types[link].slug)});

    this.id = id;
    this.blockSlug = slug;

    this.hitTest = new Graphics();
    this.addChild(this.hitTest);

    this.imageContainer = new Container();
    this.imageContainer.alpha = .5;
    this.imageContainer.x = 25;
    this.imageContainer.y = 30;
    this.addChild(this.imageContainer);

    this.callbackRef = this.eventHandler.bind(this);

    this.addImages(images);
    this.addInformation(title, body, link, url);
    this.addLinks(links)
    this.createHitTest();
    this.addEvents();
  }

  destroy(val) {
    this.linksSlugs = null;

    TweenMax.killTweensOf(this.imageContainer);
    TweenMax.killTweensOf(this.info);
    TweenMax.killTweensOf(this.arrow);
    TweenMax.killTweensOf(this.link);

    let events = IS_MOBILE() ? ['tap'] : ['mouseover', 'mouseout'];
    for (const event of events) {
      this.off(event, this.callbackRef);
    }

    this.imageContainer.children.forEach((child) => {
      TweenMax.killTweensOf(child);
      child.destroy(true);
    })

    this.imageContainer.destroy(true);
    this.imageContainer = null;
    this.selected = false;

    this.buttonMode = false;
    this.interactive = false;

    this.dots.forEach((dot) => dot.destroy(true));
    this.dots = null;

    this.title.destroy(true);
    this.info.destroy(true);

    this.link.interactive = false;
    events = ['click', 'tap'];
    for (const event of events) {
      this.link.off(event, this.callbackRef);
    }
    this.link.destroy(true);
    this.arrow.destroy(true);

    this.title = null;
    this.info = null;
    this.link = null;
    this.arrow = null;

    this.children.forEach((child) => child.destroy(true));

    super.destroy(val);
  }

  addEvents() {
    this.buttonMode = true;
    this.interactive = true;
    const events = IS_MOBILE() ? ['tap'] : ['click', 'mouseover', 'mouseout'];
    for (const event of events) {
      this.on(event, this.callbackRef);
    }
  }

  eventHandler(event) {
    switch(event.type) {
      case 'tap':
      case 'click':
        if(event.target instanceof ColorDot === false) {
          if(this.selected) {
            this.emit('clickedLink', this.blockSlug);
          } else {
            this.emit('over', {blockSlug: this.blockSlug});
            this.onFirstClick();
          }
          this.selected = !this.selected;
        }

        // if(event.currentTarget instanceof Text) {
        //   event.stopPropagation();
        //   if(event.target.alpha === 0) return;
        //   this.emit('clickedLink', this.blockSlug);
        //   return;
        // }
        break;

      case 'mouseover':
        this.hoverImage();
        break;

      case 'mouseout':
        if(!this.selected) this.hoverImage(false);
        break;

    }
  }

  onFirstClick() {
    TweenMax.killTweensOf(this.imageContainer);
    TweenMax.killTweensOf(this.arrow);
    TweenMax.killTweensOf(this.link);

    TweenMax.to(this.imageContainer, .25, {alpha: 1});
    TweenMax.to(this.arrow, .25, {alpha: 1, x: this.arrow.__startPos + 10, delay: .2});
    TweenMax.to(this.link, .25, {alpha: 1, x: this.link.__startPos + 10, delay: .2});
    // this.animateImages();
  }

  onMouseOut() {
    TweenMax.killTweensOf(this.imageContainer);
    TweenMax.killTweensOf(this.arrow);
    TweenMax.killTweensOf(this.link);

    TweenMax.to(this.imageContainer, .5, {alpha: .5});
    TweenMax.to(this.arrow, .25, {alpha: 0, x: this.arrow.__startPos});
    TweenMax.to(this.link, .25, {alpha: 0, x: this.link.__startPos});
    this.selected = false;
    // this.animateImages();
    this.hoverImage(false);
  }

  animateImages() {
    // let i = 0;
    this.imageContainer.children.forEach((image) => {
      TweenMax.killTweensOf(image);

      // const animProps = {
      //   // scale: image.scale.x,
      //   x: image.x,
      //   y: image.y,
      // }<commit_msg>Make hover effect more subtle and decrease opacity of selected state.<commit_after>import { Container, Text, Point, Graphics, loader as Loader, Sprite } from 'pixi.js/src';
import { TweenMax, Power4 } from 'gsap';
import ColorDot from './ColorDot';
import { getData, IS_MOBILE, getArrowScale, getArrowScaleMobile } from '../../utils/config';
import { random, TWO_PI, ANGLE_TO_RAD } from '../../utils/Maths';
import Arrow from '../arrow/arrow';
import { shuffle } from 'lodash';
import { styleTitle, styleTitleMobile, styleInfo, styleInfoMobile, styleLink, styleLinkMobile } from './styles';

const data = getData();
const HOVER_PERC = 1.1;

export default class Block extends Container {
  /**
   * @constructor
   * @param title
   * @param links
   * @param images
   * @param body
   * @param link
   * @param url
   */
  constructor(props, maxImageWidth, maxImageHeight, showDebug) {
    super();

    this.showDebug = showDebug;

    const { title, links, images, body, link, url, id, slug } = props;

    this.maxImageWidth = maxImageWidth;
    this.maxImageHeight = maxImageHeight;

    this.linkURL = url;
    this.blockTitle = title;
    this.links = links || [];
    this.linksSlugs = [];
    this.links.forEach((link) => {this.linksSlugs.push(data.types[link].slug)});

    this.id = id;
    this.blockSlug = slug;

    this.hitTest = new Graphics();
    this.addChild(this.hitTest);

    this.imageContainer = new Container();
    this.imageContainer.alpha = .5;
    this.imageContainer.x = 25;
    this.imageContainer.y = 30;
    this.addChild(this.imageContainer);

    this.callbackRef = this.eventHandler.bind(this);

    this.addImages(images);
    this.addInformation(title, body, link, url);
    this.addLinks(links)
    this.createHitTest();
    this.addEvents();
  }

  destroy(val) {
    this.linksSlugs = null;

    TweenMax.killTweensOf(this.imageContainer);
    TweenMax.killTweensOf(this.info);
    TweenMax.killTweensOf(this.arrow);
    TweenMax.killTweensOf(this.link);

    let events = IS_MOBILE() ? ['tap'] : ['mouseover', 'mouseout'];
    for (const event of events) {
      this.off(event, this.callbackRef);
    }

    this.imageContainer.children.forEach((child) => {
      TweenMax.killTweensOf(child);
      child.destroy(true);
    })

    this.imageContainer.destroy(true);
    this.imageContainer = null;
    this.selected = false;

    this.buttonMode = false;
    this.interactive = false;

    this.dots.forEach((dot) => dot.destroy(true));
    this.dots = null;

    this.title.destroy(true);
    this.info.destroy(true);

    this.link.interactive = false;
    events = ['click', 'tap'];
    for (const event of events) {
      this.link.off(event, this.callbackRef);
    }
    this.link.destroy(true);
    this.arrow.destroy(true);

    this.title = null;
    this.info = null;
    this.link = null;
    this.arrow = null;

    this.children.forEach((child) => child.destroy(true));

    super.destroy(val);
  }

  addEvents() {
    this.buttonMode = true;
    this.interactive = true;
    const events = IS_MOBILE() ? ['tap'] : ['click', 'mouseover', 'mouseout'];
    for (const event of events) {
      this.on(event, this.callbackRef);
    }
  }

  eventHandler(event) {
    switch(event.type) {
      case 'tap':
      case 'click':
        if(event.target instanceof ColorDot === false) {
          if(this.selected) {
            this.emit('clickedLink', this.blockSlug);
          } else {
            this.emit('over', {blockSlug: this.blockSlug});
            this.onFirstClick();
          }
          this.selected = !this.selected;
        }

        // if(event.currentTarget instanceof Text) {
        //   event.stopPropagation();
        //   if(event.target.alpha === 0) return;
        //   this.emit('clickedLink', this.blockSlug);
        //   return;
        // }
        break;

      case 'mouseover':
        this.hoverImage();
        break;

      case 'mouseout':
        if(!this.selected) this.hoverImage(false);
        break;

    }
  }

  onFirstClick() {
    TweenMax.killTweensOf(this.imageContainer);
    TweenMax.killTweensOf(this.arrow);
    TweenMax.killTweensOf(this.link);

    TweenMax.to(this.arrow, .25, {alpha: 1, x: this.arrow.__startPos + 10, delay: .2});
    TweenMax.to(this.link, .25, {alpha: 1, x: this.link.__startPos + 10, delay: .2});
    // this.animateImages();
  }

  onMouseOut() {
    TweenMax.killTweensOf(this.imageContainer);
    TweenMax.killTweensOf(this.arrow);
    TweenMax.killTweensOf(this.link);

    TweenMax.to(this.imageContainer, .5, {alpha: .5});
    TweenMax.to(this.arrow, .25, {alpha: 0, x: this.arrow.__startPos});
    TweenMax.to(this.link, .25, {alpha: 0, x: this.link.__startPos});
    this.selected = false;
    // this.animateImages();
    this.hoverImage(false);
  }

  animateImages() {
    // let i = 0;
    this.imageContainer.children.forEach((image) => {
      TweenMax.killTweensOf(image);

      // const animProps = {
      //   // scale: image.scale.x,
      //   x: image.x,
      //   y: image.y,
      // }
{'fraction_non_alphanumeric': 0.15117891816920942, 'fraction_numerical': 0.006340400237765009, 'mean_word_length': 2.718232044198895, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 13, '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': '3686587', 'n_tokens_mistral': 3453, 'n_tokens_neox': 3323, 'n_words': 646}