Widget Yerleştirme

Atlas dashboard'unda widget'lar V2 layout engine kullanılarak yerleştirilir. V2 motoru proportional positioning (nx/ny/nw/nh ∈ [0,1]) ile çalışır; widget'lar piksel bazında değil, canvas'a oranla konumlanır. Bu sayede dashboard farklı ekran boyutlarında otomatik ölçeklenir.

Ön Koşul

Bir Atlas dashboard'u oluşturulmuş ve canvas açılmış olmalıdır.

→ Dashboard Oluşturma

1. Edit Mode'a Geçin

Üst bardaki Edit Mode toggle'ına tıklayın. Edit mode'da:

Grid çizgileri %15 opaklıkta görünür
Widget'larda sürükle ve resize handle'ları aktifleşir
Widget seçildiğinde kenarlık vurgusu belirir
Delete ikonu görünür

2. V2 Grid Mantığı

Özellik	V2 Davranışı
Base sütun sayısı	60
Konumlandırma	Oransal: `nx = pixelX / baseWidth`, `nw = widthCells / 60`
Min widget boyutu	2×2 hücre
Çakışma	Snap-to-grid + auto-placement (sol-sağ, üstten alta)
Z-order	Liste sırası — sonra eklenen üstte
Multi-layer panel	Yok (tek katman canvas)

V1 vs V2

Horizon V1'de widget piksel bazlı yerleşir; ekran boyutu değişince taşma olabilir. Atlas V2'de oranlar korunur — mobile/tablet'te yerleşim aynen ölçeklenir.

Üst bardaki Add Widget butonuna tıklayın. Açılan diyalog Cartography widget kütüphanesini gösterir:

Diyalog Bölümleri
Search (ada göre)
Chart type filter
Tag filter
Folder tree
Widget preview kart

Bir widget seçip Add ile dashboard'a ekleyin. Widget canvas'ta auto-placement ile boş alana konur (sol-sağ, üst-alta tarama).

Widget'ı yerleştirmek için:

Hareket	Davranış
Drag (üst kenardan tutup taşı)	Widget'ı yeni nx/ny koordinatına oturtur
Resize (köşe handle'ı)	Widget genişliğini/yüksekliğini değiştirir; min 2×2
Right-click → Delete	Widget'ı kaldırır
Selection (tıkla)	Widget'ı seçer; vurgu çerçevesi belirir

Auto-placement Algoritması

Yeni widget eklendiğinde sistem boş alanları sol-sağ ve satır satır tarar; ilk uygun yere yerleştirir. Manuel müdahale yapmazsanız widget'lar otomatik olarak grid'i doldurur.

5. Resize Sınırları

Sınır	Değer
Minimum genişlik	2 hücre (2/60 ≈ %3.3)
Minimum yükseklik	2 hücre
Maksimum genişlik	60 hücre (tüm satır)
Maksimum yükseklik	Canvas yüksekliği

Resize sırasında widget min boyut altına inerse otomatik clamp edilir.

6. Çakışma Engelleme

Atlas V2 widget'ların üst üste yerleşmesine izin vermez. Sürüklenen widget başka bir widget'ın üzerine bırakılırsa snap-back ile en yakın boş alana oturur.

Yer Kalmadıysa

Canvas'ta yer kalmadığında auto-placement scrollbar açar; widget en alta eklenir. scrollThresholdFactor=0.5 ile içerik viewport'un %50'sini aştığında scroll devreye girer.

7. Layout Persist

Layout JSON şu yapıda backend'e yazılır:

{
  "items": [
    {
      "item_id": "uuid-...",
      "chart_name": "Tesis1_Hat3_OEE",
      "nx": 0.0,
      "ny": 0.0,
      "nw": 0.4,
      "nh": 0.3
    },
    {
      "item_id": "uuid-...",
      "chart_name": "Tesis1_SaatlikUretim",
      "nx": 0.4,
      "ny": 0.0,
      "nw": 0.6,
      "nh": 0.3
    }
  ]
}

Save / Update butonuna basıldığında bu JSON update_dashboard API tipiyle gönderilir.

8. Sık Karşılaşılan Hatalar

Belirti	Olası Neden	Çözüm
Drag çalışmıyor	Edit mode kapalı	Edit Mode toggle'ı açın
Widget kaybolmuş	Compass sorgusu hata aldı	Sorguyu Compass'tan test edin
Resize tutarsız	Tarayıcı zoom %100 değil	Tarayıcı zoom'u %100'e alın
Auto-placement boş alan bulamıyor	Canvas dolu	Daha küçük bir widget ekleyin veya scrollbar açın

9. Sonraki Adım

→ Responsive Davranış

Widget Yerleştirme

1. Edit Mode'a Geçin

2. V2 Grid Mantığı

3. Add Widget Diyaloğu

4. Widget Yerleşimi