<commit_before>/* Copyright 2022 The TensorFlow Authors. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================*/

import {
  ChangeDetectionStrategy,
  Component,
  ElementRef,
  EventEmitter,
  Input,
  Output,
  ViewChild,
} from '@angular/core';
import {
  AxisDirection,
  CardFobGetStepFromPositionHelper,
  TimeSelection,
  TimeSelectionAffordance,
  TimeSelectionWithAffordance,
} from './card_fob_types';

export enum Fob {
  NONE,
  START,
  END,
}

@Component({
  selector: 'card-fob-controller',
  templateUrl: 'card_fob_controller_component.ng.html',
  styleUrls: ['card_fob_controller_component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CardFobControllerComponent {
  @ViewChild('startFobWrapper') readonly startFobWrapper!: ElementRef;
  @ViewChild('endFobWrapper') readonly endFobWrapper!: ElementRef;
  @Input() axisDirection!: AxisDirection;
  @Input() timeSelection!: TimeSelection;
  @Input() cardFobHelper!: CardFobGetStepFromPositionHelper;
  @Input() startStepAxisPosition!: number;
  @Input() endStepAxisPosition!: number | null;
  @Input() highestStep!: number;
  @Input() lowestStep!: number;
  @Input() showExtendedLine?: Boolean = false;

  @Output() onTimeSelectionChanged =
    new EventEmitter<TimeSelectionWithAffordance>();
  @Output() onTimeSelectionToggled = new EventEmitter();

  private currentDraggingFob: Fob = Fob.NONE;
  private affordance: TimeSelectionAffordance = TimeSelectionAffordance.NONE;

  // mouseListener and stopListener are used to keep a reference to the
  // EventListeners used to track mouse movement and mouse up in order to
  // remove those listener when dragging is finished.
  private mouseListener: any = this.mouseMove.bind(this);
  private stopListener: any = this.stopDrag.bind(this);

  constructor(private readonly root: ElementRef) {}

  readonly Fob = Fob;
  readonly TimeSelectionAffordance = TimeSelectionAffordance;

  getCssTranslatePxForStartFob() {
    if (this.axisDirection === AxisDirection.VERTICAL) {
      return `translate(0px, ${this.startStepAxisPosition}px)`;
    }
    return `translate(${this.startStepAxisPosition}px, 0px)`;
  }

  getCssTranslatePxForEndFob() {
    if (this.endStepAxisPosition === null) {
      return '';
    }
    if (this.axisDirection === AxisDirection.VERTICAL) {
      return `translate(0px, ${this.endStepAxisPosition}px)`;
    }
    return `translate(${this.endStepAxisPosition}px, 0px)`;
  }

  stopEventPropagation(e: Event) {
    e.stopPropagation();
    e.preventDefault();
  }

  startDrag(fob: Fob, affordance: TimeSelectionAffordance, event: MouseEvent) {
    this.stopEventPropagation(event);<commit_msg>Allow event propogation on Fob clicks (#5907)<commit_after>/* Copyright 2022 The TensorFlow Authors. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================*/

import {
  ChangeDetectionStrategy,
  Component,
  ElementRef,
  EventEmitter,
  Input,
  Output,
  ViewChild,
} from '@angular/core';
import {
  AxisDirection,
  CardFobGetStepFromPositionHelper,
  TimeSelection,
  TimeSelectionAffordance,
  TimeSelectionWithAffordance,
} from './card_fob_types';

export enum Fob {
  NONE,
  START,
  END,
}

@Component({
  selector: 'card-fob-controller',
  templateUrl: 'card_fob_controller_component.ng.html',
  styleUrls: ['card_fob_controller_component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CardFobControllerComponent {
  @ViewChild('startFobWrapper') readonly startFobWrapper!: ElementRef;
  @ViewChild('endFobWrapper') readonly endFobWrapper!: ElementRef;
  @Input() axisDirection!: AxisDirection;
  @Input() timeSelection!: TimeSelection;
  @Input() cardFobHelper!: CardFobGetStepFromPositionHelper;
  @Input() startStepAxisPosition!: number;
  @Input() endStepAxisPosition!: number | null;
  @Input() highestStep!: number;
  @Input() lowestStep!: number;
  @Input() showExtendedLine?: Boolean = false;

  @Output() onTimeSelectionChanged =
    new EventEmitter<TimeSelectionWithAffordance>();
  @Output() onTimeSelectionToggled = new EventEmitter();

  private currentDraggingFob: Fob = Fob.NONE;
  private affordance: TimeSelectionAffordance = TimeSelectionAffordance.NONE;

  // mouseListener and stopListener are used to keep a reference to the
  // EventListeners used to track mouse movement and mouse up in order to
  // remove those listener when dragging is finished.
  private mouseListener: any = this.mouseMove.bind(this);
  private stopListener: any = this.stopDrag.bind(this);

  constructor(private readonly root: ElementRef) {}

  readonly Fob = Fob;
  readonly TimeSelectionAffordance = TimeSelectionAffordance;

  getCssTranslatePxForStartFob() {
    if (this.axisDirection === AxisDirection.VERTICAL) {
      return `translate(0px, ${this.startStepAxisPosition}px)`;
    }
    return `translate(${this.startStepAxisPosition}px, 0px)`;
  }

  getCssTranslatePxForEndFob() {
    if (this.endStepAxisPosition === null) {
      return '';
    }
    if (this.axisDirection === AxisDirection.VERTICAL) {
      return `translate(0px, ${this.endStepAxisPosition}px)`;
    }
    return `translate(${this.endStepAxisPosition}px, 0px)`;
  }

  stopEventPropagation(e: Event) {
    e.stopPropagation();
    e.preventDefault();
  }

  startDrag(fob: Fob, affordance: TimeSelectionAffordance, event: MouseEvent) {
    // When clicking on the fob, we needs to allow MouseEvent propagate to the
    // text span in the fob for editing. The contenteditable attribute also
    // stops the event from propagating which satisfies our need to call
    // stopEventPropagation regardless of affordance.
    if (affordance !== TimeSelectionAffordance.FOB) {
      this.stopEventPropagation(event);
    }
{'fraction_non_alphanumeric': 0.1178018123355744, 'fraction_numerical': 0.0040923706518561824, 'mean_word_length': 4.9764192139737995, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, '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': '5629672', 'n_tokens_mistral': 2021, 'n_tokens_neox': 1972, 'n_words': 559}