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

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

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

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

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

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

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

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

코드 및 데모

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

나와 연결

• 트위터

• 깃허브

• 링크드인

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

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