Sürükle ve Bırak widget'ları ve hazır ayarları

1) Konsept ve senaryolar

Sürükle ve Bırak widget'ları, kullanıcının ızgaraya referansla tuval üzerine serbestçe yerleştirdiği etkileşimli bloklardır (grafik kartları, tablolar, filtreler, eylem düğmeleri). Hazır ayarlar - hızlı bir şekilde uygulanabilen, paylaşılabilen ve sürüm değiştirilebilen kaydedilmiş düzenler ve stiller (düzen + tema + parametreler).

• Hazır bloklardan pano montajı (KPI kartları, grafikler, filtreler).
• "Compact", "Analytics", "Presentation" ön ayarları aracılığıyla mizanpajın hızlı değişimi.
• Birlikte düzenleme: ürün widget'ları yerleştirir, analist kaynakları ayarlar.
• Paydaşlar için salt okunur yayın.

2) Mimari ilkeler

1. Izgara-ilk: mantıksal sütunlar/satırlar (12/24), piksel konumlandırma - türevleri.
2. Yapışma ve Kılavuzlar: manyetik kılavuzlar, örgü ve komşulara yapıştırma, hizalama.
3. Constraint-aware: boyut/en boy sınırlayıcılar, min/max, kilit-en boy.
4. Varsayılan olarak güvenli: sürekli otomatik kaydetme, işlemsel yayınlama, geri alma/yineleme.
5. A11y-first: Klavyeden DnD ve ses değişiklikleri.
6. Gerçek zamanlı hazır: Çok oyunculu oturumlar için CRDT/OT.
7. Temalandırılabilir: tasarım belirteçleri, tema hazır ayarları, açık/koyu/kontrast modları.
8. Taşınabilir: ihracat/ithalat JSON/YAML; Devre sürümleri.

3) Veri modeli (basitleştirilmiş)

json
{
"id": "layout_01",
"name": "Analytics - Compact,"
"version": "2. 1. 0",
"grid": { "cols": 12, "rowHeight": 8, "gutter": 8, "margin": 16 },
"theme": { "preset": "light-pro", "tokens": { "radius": 12, "elevation": "soft" } },
"widgets": [
{
"id": "w_kpi_1",
"type": "kpi",
"title": "GGR",
"pos": { "x": 0, "y": 0, "w": 3, "h": 4, "z": 1 },
"constraints": { "minW": 2, "minH": 3, "lockAspect": false },
"props": { "format": "currency", "source": "ggr_daily" }
},
{
"id": "w_chart_1",
"type": "lineChart",
"title": "Deposits Trend",
"pos": { "x": 3, "y": 0, "w": 6, "h": 8, "z": 1 },
"props": { "source": "deposits", "legend": true }
},
{
"id": "w_table_1",
"type": "table",
"title": "Top Segments",
"pos": { "x": 9, "y": 0, "w": 3, "h": 12, "z": 2 },
"props": { "source": "segments_top", "pageSize": 12 }
}
],
"meta": { "createdBy": "dima", "updatedAt": "2025-11-03T17:55:00Z" }
}

4) Izgara, enstantane ve kılavuzlar

Izgara: Masaüstü için 12 hoparlör, tablet için 6, telefonlar için 4; 'RowHeight' kararlı dikey perde için aynıdır.
Yapışma: kenarlara/merkezlere yapışma; 4/8 px'de "mıknatıslar"; Komşulara yaklaşırken akıllı rehberler.
Otomatik akış: çarpışma durumunda aşağıda otomatik aktarım; "düşen bloklar" algoritması.
Duyarlılık: kesme noktaları - her kesme noktası için alternatif 'pos'.

5) DnD olayları ve durumları

События: 'Başlat', 'sürükle', 'Üzerinde sürükle', 'bırak', 'yeniden boyutlandır', 'Başlat', 'yeniden boyutlandır', 'yeniden boyutlandır', 'Bitir', 'seç','grup ',' grubu çöz ',' yeniden sırala ',' geri al ',' yinele '.

• Hayalet/Önizleme-Sürüklerken yarı saydam bir yol.
• Yer tutucular: izin verilen bölgeler (yeşil), yasak bölgeler (kırmızı).
• Çakışma haritası - işgal edilmiş hücrelerin hızlı hesaplanması (bitset/interval tree).

6) Yükselt, hizala, z-index

Köşelerdeki tutamakları yeniden çizin + oranları korumak için 'Shift' tuşunu basılı tutun.
Grubun hizalanması:'sol/sağ "," merkez "," eşit dağıt ".
Kaplama seviyeleri: Menzil kısıtlaması olan'z ', ön/arka düğmeler.

7) Gruplar, kaplar ve yuvalama

Gruplar: çoklu seçim, birleşik sürükle ve bırak, grup hizalama.
Widget konteyneri: sekmeler, akordeonlar, karuseller - çocuk widget'larını nasıl kabul edeceklerini biliyorlar.
Konteyner durakları: harici ızgara ≠ dahili (diğer sütunlar).

8) Hazır ayarlar (şablonlar) ve sürümler

Hazır ayar türleri: düzen, tema, widget kümesi, düzen + veri.
Sürüm oluşturma: 'semver' şemaları ve geçişleri (alan haritası, varsayılanlar).
Uygulamadan önce & Uygula-Önizleme'yi önizleyin.
Kapsamlı ön ayarlar: kişisel, takım, global; okuma/düzenleme hakları.
Dışa aktarma/içe aktarma: JSON/YAML, sağlama toplamı imzası, sürüm uyumluluk kontrolü.

9) Erişilebilirlik (A11y) ve klavye

• 'Enter/Space' - transferi başlatın; oklar - ızgara aralığına geçin; 'Shift' + oklar - hızlandırılmış aralık; 'Esc' - iptal et.
• 'Ctrl/Cmd + G' - grup; 'Ctrl/Cmd + Shift + G' - grubu kaldır.
• 'Alt' - ızgaraya yapışmayı geçici olarak kapatın.
• Ses oyunculuk SR: "Taşındı (x, y). Yapıştırma: açık. Çatışma: Evet/Hayır"
• Odak halkaları, büyük düz tutamaçlar, açıklama içeren bırakma bölgeleri.

10) Dokunma ve mobil desenler

DnD başlangıcı için uzun pres (300-500 ms).
Artan hedefler (minimum 40-48 px).
Uyarlanabilir araç çubukları (alt yuva).
Düzenleme modu: tuval kaydırma kilidi, kenara taşınırken dikey otomatik kaydırma.

11) Widget'lardan gelen eylemler (Actionable Widget'lar)

Yerleşik CTA (düğme), bağlam menüsü, sürükle-klon (Alt-tutulan çoğaltma).
Widget için "hızlı hazır ayarlar" (yoğunluk, efsane, renk şeması).
Durumlar: yükleme/boş/hata, güvenli taslaklar ("veriler gecikiyor").

12) İşbirliği ve Yayıncılık

Gerçek zamanlı: CRDT (örneğin, Yjs) veya OT (Quill yaklaşımı) - katılımcı imleçleri, grup kilitleri.
Haklar: 'Sahip', 'Editör', 'Görüntüleyici'; Değişmez bir anlık görüntü yayınlayın.
Streams: draft> review> publication; Değişikliklerin karşılaştırılması (diff düzenleri).

13) Geri alma/Yineleme ve otomatik kaydetme

Komut veriyolu: Her işlem 'yap/geri al' komutlu bir komuttur.
İstemcide oturum açın (bellek içi + periyodik kalıcı), uzunluk sınırı.
Otomatik kaydetme: her N saniye/' boşta ', "Kaydedilmiş" göstergesi ile.

14) Temizasyon ve tasarım belirteçleri

json
{
"themeId": "light-pro",
"tokens": {
"fontScale": { "h1": 24, "h2": 18, "body": 14 },
"radius": 12,
"elevation": "soft",
"palette": { "primary": "#3366FF", "critical": "#E53935" }
}
}

Düzeni yeniden hesaplamadan temaları değiştirme (yalnızca görsel belirteçler).
AA/AAA kontrast, Yüksek Kontrast modu, doğru gri ile koyu tema.

15) Performans

Katmanlara göre oluşturma (karmaşık grafikler için canvas/webgl, krom için DOM).
Liste/tablo sanallaştırma, gaz 'sürükle' (16 ms), requestAnimationFrame.
Diff render: Yalnızca değiştirilmiş widget'ları yeniden çizin.
Önbellek sayma çakışmaları ve yönergeleri.

16) İçerik güvenliği ve koruması

HTML widget'ları için sunbox (iframe, CSP, 'sandbox' bayrakları).
Bırakma sınırlaması: beyaz liste türleri (dosyalar, bağlantılar, JSON hazır ayarları); Boyut ve içerik kontrolü.
Hazır ayar hakları (RBAC/ABAC), dışa aktarma/içe aktarma denetimi.

17) Widget API (sözleşme)

ts interface Widget {
id: string;
type: string;
pos: { x:number; y:number; w:number; h:number; z:number };
constraints?: { minW?:number; minH?:number; maxW?:number; maxH?:number; lockAspect?:boolean };
props: Record<string, unknown>;
validate? (props): { ok: boolean; errors?: string[] };
onDrop? (dataTransfer): DropResult ;//support for external drop onAction? (actionId: string, payload?: any): void;
}

Yaşam döngüsü olayları 'mount', 'resize', 'visibility' change'dir.
Yayınlanmadan önce doğrulamayı destekler.

18) İthalat/ihracat ve göçler

Dışa aktarma: 'ızgara', 'widget'lar', 'tema', 'meta'.
İçe aktarma: şema sürümlerini denetleme, otomatik geçişler (alan haritası/varsayılanlar), rapor.
Bütünlüğü sağlamak için karma ile dosya hazır ayarını kilitleyin.

19) Kısayol tuşları (önerilir)

Navigasyon: '←↑→↓' - taşı; 'Shift' + oklar - hızlı adım.
Recise: 'Alt' + oklar.
İşlemler: 'Ctrl/Cmd + D' - çoğaltmak; 'Ctrl/Cmd + G' - grup; 'Ctrl/Cmd + Shift + G' - grubu kaldır.
Seviyeler: '['/']' - z indeksinde geri/ileri.
Geri Al/Yinele: 'Ctrl/Cmd + Z'/' Ctrl/Cmd + Shift + Z' (или 'Y').
Hazır ayarlar: 'Ctrl/Cmd + 1.. 9 '- kaydedilenleri hızla uygulayın.

20) UX desenleri

İlk lansmanda hızlı kılavuzlar (3-5 adım için mikro-onboarding).
Izgara modu: "Izgarayı göster/gizle'yi aç/kapat.
Çakışmalarda satır içi ipuçları ("kullanılamaz: minimum widget width = 3").
Mizanpaj Geçmişi: Önceki sürüme döner.

21) Test planı

Birim: çarpışma hesaplama, yapışma, kısıtlama doğrulayıcı.
Entegrasyon: DnD fare/tap/klavye; Gruplamalar; konteynerler.
E2E: panoyu sıfırdan monte etme, ön ayar uygulama, yayınlama, dışa aktarma/içe aktarma.
Kaos: gecikmeler, bağlantı kaybı (gerçek zamanlı), hak çatışması yaratır.
A11y: klavye komut dosyaları, SR-ses oyunculuk, kontrast.

22) Uygulama kontrol listesi

• Izgara/kesme noktaları ve yapışma yapılandırıldı
• Recise/groups/alignment work and tested
• Klavye DnD ve ScreenTips etkin
• Otomatik kaydetme, geri alma/yineleme, mizanpaj geçmişi
• Hazır ayarlar: sürümler, haklar, dışa aktarma/içe aktarma
• Temalar ve tasarım belirteçleri, Yüksek Kontrast modu
• Gerçek zamanlı işbirliği ve çatışma çözümü
• Bırakma sınırlaması, dosya doğrulama, sandbox HTML
• Metrikler: benimseme, ilk yerleştirme zamanı, çarpışma hataları

23) Mini-SSS

Neden sadece bir ızgara, serbest koordinatlar değil?
Izgara hizalama, koronavirüs, önceden ayarlanmış taşınabilirlik ve performansı basitleştirir.

Kesme noktaları için farklı düzenler nasıl saklanır?
Her widget otomatik geri düşme ile kesme noktası (masaüstü/tablet/mobil) üzerinde bir 'pos' vardır.

İşbirliği için ne seçilmeli - OT veya CRDT?
CRDT çevrimdışı/çatışmalar için daha kolaydır; OT - doğrusal metin işlemleri için tamam. Düzen için, CRDT daha sık alınır.

Toplam

İyi Sürükle ve Bırak widget'ları sadece "sürükle ve bırak" değildir. "Bunlar: sıkı ızgara ve yapışma, uygun gruplar ve hizalama, klavye erişilebilirliği, sürümler ve dışa aktarmalarla kararlı ön ayarlar, güvenli yayınlar ve işbirliği. Bunu güvenilir bir veri modeli, iyi düşünülmüş bir UX ve bir test planı etrafında oluşturun; yapıcı, içeriğin ve komutların büyümesine karşı hızlı, anlaşılır ve dirençli hale gelecektir.