웹 프론트엔드 JS 튜토리얼 지시문을 사용하는 Angular의 입력 필드와 같은 Figma

지시문을 사용하는 Angular의 입력 필드와 같은 Figma

Jan 02, 2025 pm 09:00 PM

Figma에 익숙한 사람들은 입력 필드에서 드래그를 통해 값을 높이거나 낮추는 기능을 지원한다는 점을 알아차렸을 것입니다. 입력창을 먼저 클릭한 뒤 숫자를 입력하는 방식이 아닌 드래그 기능을 이용하면 원하는 값을 드래그만으로 쉽게 얻을 수 있어 정말 편리합니다.

Angular 지시어를 사용하여 이와 같은 것을 만들 수 있습니다. 이 실험에서는 Angular의 모든 최신 기능을 사용할 것입니다.

Figma like input field in Angular using Directives

이것을 어떻게 구축할 수 있는지 살펴보겠습니다.

실제로 여러 가지 방법으로 이를 수행할 수 있습니다. 우리는 지시문을 사용하여 이것을 구축할 것입니다. 우리가 이를 수행할 방법은 매우 일반적인 접근 방식을 취하는 것입니다. 이렇게 하면 요소나 사이드바 크기 조정 등과 같은 작업에 논리를 재사용할 수 있습니다.

스크러버 지시문 - 핵심 기능

입력의 기본 논리를 추출하여 지시어로 캡슐화할 수 있습니다. 주요 목표는 마우스 이벤트를 수신한 다음 마우스 움직임을 사용 가능한 값으로 변환하는 것입니다. 좀 더 자세히 설명하자면:

  1. 사용자가 마우스를 클릭했을 때(mousedown 이벤트).

  2. 마우스 움직임(mousemove 이벤트)을 듣기 시작하고 해당 정보를 사용하여 사용 가능한 값으로 변환합니다.

  3. 사용자가 클릭을 놓으면 리스너가 중지됩니다(mouseup 이벤트).

rxjs를 사용하여 로직을 조금 단순화하겠습니다.

의사코드는 다음과 같습니다.

const mousedown$ = fromEvent<MouseEvent>(target, 'mousedown');
const mousemove$ = fromEvent<MouseEvent>(document, 'mousemove');
const mouseup$ = fromEvent<MouseEvent>(document, 'mouseup');

let startX = 0;
let step = 1;

mousedown$
  .pipe(
     tap((event) => {
       startX = event.clientX; // Initial x co-ordinate where the mouse down happened
    }),
    switchMap(() => mousemove$.pipe(takeUntil(mouseup$))))
  .subscribe((moveEvent) => {
    const delta = startX - moveEvent.clientX;
    const newValue = Math.round(startValueAtTheTimeOfDrag + delta);
  });
로그인 후 복사
로그인 후 복사

위 코드를 보면 무슨 일이 일어나고 있는지 매우 명확해집니다. 기본적으로 X축의 클릭 위치인 초기 clientX 값을 저장합니다. 해당 정보가 있으면 사용자가 마우스를 움직일 때 초기 시작 위치와 현재 X 위치로부터의 델타를 계산할 수 있습니다.

다음과 같은 맞춤 설정을 더 추가할 수 있습니다.

  1. 감도 - 최종 값까지의 드래그 거리는 감도에 따라 결정됩니다. 민감도 값이 높을수록 움직임이 크지 않아도 최종 값이 커집니다.

  2. Step - 마우스를 움직일 때 걸음 간격을 설정합니다. step 값이 1이면 최종 값은 1씩 증가/감소합니다.

  3. Min - 방출될 최소값

  4. Max - 방출될 최대값.

최종 지시문은 다음과 같습니다.

@Directive({
  selector: "[scrubber]",
})
export class ScrubberDirective {
  public readonly scrubberTarget = input.required<HTMLDivElement>({
    alias: "scrubber",
  });

  public readonly step = model<number>(1);
  public readonly min = model<number>(0);
  public readonly max = model<number>(100);
  public readonly startValue = model(0);
  public readonly sensitivity = model(0.1);

  public readonly scrubbing = output<number>();

  private isDragging = signal(false);
  private startX = signal(0);
  private readonly startValueAtTheTimeOfDrag = signal(0);
  private readonly destroyRef = inject(DestroyRef);
  private subs?: Subscription;

  constructor() {
    effect(() => {
      this.subs?.unsubscribe();
      this.subs = this.setupMouseEventListener(this.scrubberTarget());
    });

    this.destroyRef.onDestroy(() => {
      document.body.classList.remove('resizing');
      this.subs?.unsubscribe();
    });
  }

  private setupMouseEventListener(target: HTMLDivElement): Subscription {
    const mousedown$ = fromEvent<MouseEvent>(target, "mousedown");
    const mousemove$ = fromEvent<MouseEvent>(document, "mousemove");
    const mouseup$ = fromEvent<MouseEvent>(document, "mouseup");

    return mousedown$
      .pipe(
        tap((event) => {
          this.isDragging.set(true);
          this.startX.set(event.clientX);
          this.startValueAtTheTimeOfDrag.set(this.startValue());
          document.body.classList.add("resizing");
        }),
        switchMap(() =>
          mousemove$.pipe(
            takeUntil(
              mouseup$.pipe(
                tap(() => {
                  this.isDragging.set(false);
                  document.body.classList.remove("resizing");
                })
              )
            )
          )
        )
      )
      .subscribe((moveEvent) => {
        const delta = moveEvent.clientX - this.startX();
        const deltaWithSensitivityCompensation = delta * this.sensitivity();

        const newValue =
          Math.round(
            (this.startValueAtTheTimeOfDrag() +
              deltaWithSensitivityCompensation) /
              this.step()
          ) * this.step();

        this.emitChange(newValue);
        this.startValue.set(newValue);
      });
  }

  private emitChange(newValue: number): void {
    const clampedValue = Math.min(Math.max(newValue, this.min()), this.max());
    this.scrubbing.emit(clampedValue);
  }
}
로그인 후 복사
로그인 후 복사

스크러버 지시문을 사용하는 방법

이제 지시문이 준비되었으므로 실제로 사용하는 방법을 살펴보겠습니다.

const mousedown$ = fromEvent<MouseEvent>(target, 'mousedown');
const mousemove$ = fromEvent<MouseEvent>(document, 'mousemove');
const mouseup$ = fromEvent<MouseEvent>(document, 'mouseup');

let startX = 0;
let step = 1;

mousedown$
  .pipe(
     tap((event) => {
       startX = event.clientX; // Initial x co-ordinate where the mouse down happened
    }),
    switchMap(() => mousemove$.pipe(takeUntil(mouseup$))))
  .subscribe((moveEvent) => {
    const delta = startX - moveEvent.clientX;
    const newValue = Math.round(startValueAtTheTimeOfDrag + delta);
  });
로그인 후 복사
로그인 후 복사

현재는 scrapberTarget 입력을 input.required로 표시했지만 실제로는 이를 선택 사항으로 만들고 지시문 호스트의 elementRef.nativeElement를 자동으로 사용할 수 있으며 동일하게 작동합니다. 다른 요소를 대상으로 설정하려는 경우 scrapberTarget이 입력으로 노출됩니다.

또한 크기 조정 커서를 올바르게 설정할 수 있도록 본문에 크기 조정 클래스를 추가합니다.

@Directive({
  selector: "[scrubber]",
})
export class ScrubberDirective {
  public readonly scrubberTarget = input.required<HTMLDivElement>({
    alias: "scrubber",
  });

  public readonly step = model<number>(1);
  public readonly min = model<number>(0);
  public readonly max = model<number>(100);
  public readonly startValue = model(0);
  public readonly sensitivity = model(0.1);

  public readonly scrubbing = output<number>();

  private isDragging = signal(false);
  private startX = signal(0);
  private readonly startValueAtTheTimeOfDrag = signal(0);
  private readonly destroyRef = inject(DestroyRef);
  private subs?: Subscription;

  constructor() {
    effect(() => {
      this.subs?.unsubscribe();
      this.subs = this.setupMouseEventListener(this.scrubberTarget());
    });

    this.destroyRef.onDestroy(() => {
      document.body.classList.remove('resizing');
      this.subs?.unsubscribe();
    });
  }

  private setupMouseEventListener(target: HTMLDivElement): Subscription {
    const mousedown$ = fromEvent<MouseEvent>(target, "mousedown");
    const mousemove$ = fromEvent<MouseEvent>(document, "mousemove");
    const mouseup$ = fromEvent<MouseEvent>(document, "mouseup");

    return mousedown$
      .pipe(
        tap((event) => {
          this.isDragging.set(true);
          this.startX.set(event.clientX);
          this.startValueAtTheTimeOfDrag.set(this.startValue());
          document.body.classList.add("resizing");
        }),
        switchMap(() =>
          mousemove$.pipe(
            takeUntil(
              mouseup$.pipe(
                tap(() => {
                  this.isDragging.set(false);
                  document.body.classList.remove("resizing");
                })
              )
            )
          )
        )
      )
      .subscribe((moveEvent) => {
        const delta = moveEvent.clientX - this.startX();
        const deltaWithSensitivityCompensation = delta * this.sensitivity();

        const newValue =
          Math.round(
            (this.startValueAtTheTimeOfDrag() +
              deltaWithSensitivityCompensation) /
              this.step()
          ) * this.step();

        this.emitChange(newValue);
        this.startValue.set(newValue);
      });
  }

  private emitChange(newValue: number): void {
    const clampedValue = Math.min(Math.max(newValue, this.min()), this.max());
    this.scrubbing.emit(clampedValue);
  }
}
로그인 후 복사
로그인 후 복사

효과를 사용하여 리스너를 시작했습니다. 이렇게 하면 대상 요소가 변경될 때 새 요소에 리스너를 설정할 수 있습니다.

실제로 확인해보세요

Figma like input field in Angular using Directives

우리는 Figma와 유사한 입력 필드를 구축하는 데 도움이 될 수 있는 매우 간단한 Scrubber 지시문을 Angular에서 만들었습니다. 사용자가 숫자 입력과 상호작용하기가 매우 쉽습니다.

코드 및 데모

https://stackblitz.com/edit/figma-like-number-input-angular?file=src/scrubber.directive.ts

나와 연결

  • 트위터

  • 깃허브

  • 링크드인

댓글 섹션에 의견을 추가하세요. 안전하게 지내세요 ❤️

Figma like input field in Angular using Directives

위 내용은 지시문을 사용하는 Angular의 입력 필드와 같은 Figma의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

JavaScript로 문자열 문자를 교체하십시오 JavaScript로 문자열 문자를 교체하십시오 Mar 11, 2025 am 12:07 AM

JavaScript로 문자열 문자를 교체하십시오

jQuery 날짜가 유효한지 확인하십시오 jQuery 날짜가 유효한지 확인하십시오 Mar 01, 2025 am 08:51 AM

jQuery 날짜가 유효한지 확인하십시오

jQuery는 요소 패딩/마진을 얻습니다 jQuery는 요소 패딩/마진을 얻습니다 Mar 01, 2025 am 08:53 AM

jQuery는 요소 패딩/마진을 얻습니다

10 JQuery 플러그인을 확인할 가치가 있습니다 10 JQuery 플러그인을 확인할 가치가 있습니다 Mar 01, 2025 am 01:29 AM

10 JQuery 플러그인을 확인할 가치가 있습니다

10 JQuery Accordions 탭 10 JQuery Accordions 탭 Mar 01, 2025 am 01:34 AM

10 JQuery Accordions 탭

노드 및 HTTP 콘솔로 HTTP 디버깅 노드 및 HTTP 콘솔로 HTTP 디버깅 Mar 01, 2025 am 01:37 AM

노드 및 HTTP 콘솔로 HTTP 디버깅

사용자 정의 Google 검색 API 설정 자습서 사용자 정의 Google 검색 API 설정 자습서 Mar 04, 2025 am 01:06 AM

사용자 정의 Google 검색 API 설정 자습서

jQuery div에 스크롤 바를 추가합니다 jQuery div에 스크롤 바를 추가합니다 Mar 01, 2025 am 01:30 AM

jQuery div에 스크롤 바를 추가합니다

See all articles