İçeriğe geç

Çizim tahtasında araç ve kaydırma

Web / frontend · Zorluk 5/5 · TypeScript · 58 satırKöken: Gerçek proje (anonim)

Görev

Yapay zekâdan istenen

Çizim tahtası için araç ve görünüm denetimini yaz. Araçlar pen, eraser, hand; başlangıçta pen. Boşluk tuşu basılı tutulduğu sürece araç geçici olarak hand olur, bırakılınca önceki araca dönülür. Boşluk basılıyken araç çubuğundan seçilen araç, bırakınca dönülecek araçtır. Pencere odağı kaybederse (tuşun bırakılması başka pencerede kalabilir) önceki araca dön ve sürüklemeyi bitir. hand ile basıp sürüklemek görünümü kaydırır: imlecin altındaki nokta imleçle birlikte gider; hand ile başlamış sürükleme fare tuşu bırakılana kadar sürer. Görünüm: ekrandaki konum = (tahtadaki konum − offset) × zoom, zoom sıfırdan büyük. Sayfa tuş olaylarını yalnız tahta odaktayken, işaretçi olaylarını yalnız birincil fare tuşu için ekran pikseliyle iletir.

Teslim notu

Yapay zekâ kodu teslim ederken şunu yazdı:

“Boşlukla geçici el aracı, pencere odağı kaybedilince geri dönüş ve el aracıyla kaydırma hazır. Araç durumu her yolda tutarlı.”

Yapay zekânın yazdığı kod

TypeScript58 satır

Hatalı bulduğun satırları işaretle; her işarete önem seç ve nedenini bir cümleyle yaz.

Satıra tıkla ya da dokun. Klavyede satıra gidip Enter'a bas.

0/5 işaret
Önem nasıl seçilir
  • KritikVeri kaybı, güvenlik açığı ya da para kaybı
  • ÖnemliGörevin istediği bir durumda kullanıcı yanlış sonuç alır
  • KüçükGörevin dışında kalan nadir bir uç durum ya da okunurluk

Test konusunda önem, testin yakalamadığı hatalı uygulamanın etkisine göre belirlenir.

Gerekçe puanlanmaz; sonuçta örnek cevapla karşılaştırırsın.

export type Tool = "pen" | "eraser" | "hand";
export type View = { offsetX: number; offsetY: number; zoom: number };
export type Key = { code: string; repeat: boolean };
4
export function createBoardControls(initialView: View) {
  const view = { ...initialView };
  let tool: Tool = "pen";
  let toolBeforeSpace: Tool | null = null;
  let last: { x: number; y: number } | null = null;
10
  function releaseSpace(): void {
    if (toolBeforeSpace !== null) {
      tool = toolBeforeSpace;
      toolBeforeSpace = null;
    }
  }
17
  return {
    tool: () => tool,
    view: () => ({ ...view }),
    selectTool(next: Tool): void {
      if (toolBeforeSpace !== null) {
        toolBeforeSpace = next;
      } else {
        tool = next;
      }
    },
    keyDown(key: Key): void {
      if (key.code === "Space") {
        toolBeforeSpace = tool;
        tool = "hand";
      }
    },
    keyUp(key: Key): void {
      if (key.code === "Space") {
        releaseSpace();
      }
    },
    windowBlur(): void {
      releaseSpace();
      last = null;
    },
    pointerDown(x: number, y: number): void {
      last = tool === "hand" ? { x, y } : null;
    },
    pointerMove(x: number, y: number): void {
      if (last === null) {
        return;
      }
      view.offsetX -= x - last.x;
      view.offsetY -= y - last.y;
      last = { x, y };
    },
    pointerUp(): void {
      last = null;
    },
  };
}

Kanıtlayan test

Doğru seçenek, bu kodda başarısız olan, yani hatayı ortaya çıkaran testtir.

Test seçenekleri
Göndermek için en az bir satır işaretle.

Gönderince sayaca yedi bilgi gider; gerekçe metnin cihazında kalır. Veriler