Medan input seperti Figma dalam Angular menggunakan Arahan

Orang yang biasa dengan Figma akan menyedari bahawa medan input menyokong penyeretan untuk menambah atau menurunkan nilai. Daripada perlu mengklik pada medan input dahulu dan kemudian menaip nombor, ciri menyeret sangat berguna kerana anda boleh mendapatkan nilai yang dikehendaki dengan mudah dengan menyeret.

Kita boleh membina sesuatu seperti itu menggunakan arahan Sudut. Kami akan menggunakan semua ciri terkini Angular dalam percubaan ini.

Mari kita lihat bagaimana kita boleh membina ini.

Kita sebenarnya boleh melakukan ini dalam pelbagai cara. Kami akan membina ini menggunakan arahan. Cara yang akan kita lakukan adalah dengan mengambil pendekatan yang sangat generik. Dengan cara ini, kita boleh menggunakan semula logik untuk perkara seperti mengubah saiz elemen atau bar sisi, dsb.

Arahan Scrubber - fungsi teras

Logik utama input boleh diekstrak dan dikapsulkan ke dalam arahan. Objektif utama adalah untuk mendengar peristiwa tetikus dan kemudian menterjemahkan pergerakan tetikus kepada nilai yang boleh digunakan. Untuk menerangkan dengan lebih terperinci:

1. Apabila pengguna mengklik tetikus (acara turun tetikus).

2. Kami mula mendengar pergerakan tetikus (peristiwa alih tetikus) dan menggunakan maklumat itu untuk menterjemahkannya kepada nilai yang boleh digunakan.

3. Apabila pengguna melepaskan klik, kami menghentikan pendengar (acara tikus).

Kami akan menggunakan rxjs untuk memudahkan logik sedikit.

Begini rupa pseudokod itu.

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);
  });

Melihat kod di atas, ia sepatutnya agak jelas apa yang berlaku. Kami pada asasnya menyimpan nilai clientX awal, iaitu kedudukan klik pada paksi X. Sebaik sahaja kami mempunyai maklumat itu, apabila pengguna menggerakkan tetikus, kami boleh mengira delta dari kedudukan permulaan awal dan kedudukan X semasa.

Kami boleh menambah lebih banyak penyesuaian seperti:

1. Sensitiviti - jarak seret ke nilai akhir akan ditentukan oleh sensitiviti. Nilai sensitiviti yang lebih tinggi bermakna nilai akhir akan menjadi besar walaupun pergerakannya tidak seberapa.

2. Langkah - menetapkan selang melangkah apabila menggerakkan tetikus. Jika nilai langkah ialah 1, nilai akhir dinaikkan/dikurangkan dalam langkah 1.

3. Min - nilai minimum yang akan dipancarkan.

4. Maks - nilai maksimum yang akan dipancarkan.

Begini rupa arahan akhir:

@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);
  }
}

Cara menggunakan arahan scrubber

Sekarang kita mempunyai arahan sedia, mari lihat bagaimana kita boleh mula menggunakannya.

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);
  });

Pada masa ini, kami telah menandai input scrubberTarget sebagai input.required, tetapi kami sebenarnya boleh menjadikannya pilihan dan secara automatik menggunakan elementRef.nativeElement hos arahan, dan ia akan berfungsi sama. ScrubberTarget didedahkan sebagai input sekiranya anda ingin menetapkan elemen lain sebagai sasaran.

Kami juga menambah saiz semula kelas pada badan supaya kami boleh menetapkan kursor ubah saiz dengan betul.

@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);
  }
}

Kami telah menggunakan kesan untuk memulakan pendengar, ini akan memastikan bahawa sekiranya elemen sasaran berubah, kami menetapkan pendengar pada elemen baharu.

Lihat ia dalam tindakan

Kami telah membuat arahan Scrubber yang sangat mudah dalam Angular yang boleh membantu kami membina medan input yang serupa dengan apa yang ada pada Figma. Makes sangat mudah untuk pengguna berinteraksi dengan input angka.

Kod & Demo

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

Berhubung dengan saya

• Twitter

• Github

• Linkedin

Tambahkan pendapat anda di bahagian komen. Kekal Selamat ❤️

Atas ialah kandungan terperinci Medan input seperti Figma dalam Angular menggunakan Arahan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!