# Kart Tasarım Editörü — Spec

**Tarih:** 2026-03-19
**Kapsam:** Tüm paylaşım sistemi (parametre seti olan her içerik)

## Özet

Kullanıcıların kart içeriklerini görsel olarak tasarlayabildiği inline editör. Parametreler canlı binding ile şablon elementlerine bağlanır. WhatsApp resim editörü benzeri sürükle-bırak deneyimi.

## Mimari Kararlar

| Karar | Seçim | Neden |
|-------|-------|-------|
| Editör modu | Hibrit (blok + serbest, geçişli) | Hem yapısal hem esnek |
| Arayüz | Inline (paylaş kutusu sekmesi) | Modal açmadan, akış içinde |
| Render | DOM-based (CSS) | Responsive, tema uyumlu, hafif |
| Şablon kaynağı | Parametre seti içinde | TS + DB hybrid, set ile birlikte gelir |
| Elementler | Metin, sabit metin, şekil, resim, parametre-render | Tüm parametre türlerine uyumlu |
| Arka plan | Düz renk + gradient + resim + hazır şablonlar | Tam esneklik |

## Veri Yapısı

### ISablon Interface

```typescript
interface ISablon {
  genislik: number;      // px (varsayılan 520)
  yukseklik: number;     // px (varsayılan 300)
  mod: 'blok' | 'serbest' | 'hibrit';
  arkaPlan: IArkaPlan;
  bolgeler?: IBolge[];   // blok/hibrit modunda
  elementler: ISablonElement[];
}

interface IArkaPlan {
  tur: 'renk' | 'gradient' | 'resim' | 'hazir';
  deger: string;         // renk kodu, gradient CSS, resim URL, hazır şablon ID
}

interface IBolge {
  id: string;            // 'ust' | 'orta' | 'alt' veya custom
  yukseklik: number | 'auto';
}

interface ISablonElement {
  _id: string;
  tur: 'parametre-metin' | 'sabit-metin' | 'sekil' | 'resim' | 'parametre-render';
  // Pozisyon (% cinsinden, 0-100)
  x: number;
  y: number;
  genislik?: number;     // % (sadece şekil/resim)
  yukseklik?: number;    // % (sadece şekil/resim)
  bolge?: string;        // hibrit/blok modunda hangi bölgede
  // İçerik
  parametreIsmi?: string;  // parametre-metin ve parametre-render için
  deger?: string;          // sabit-metin için
  sekilTuru?: 'dikdortgen' | 'daire' | 'cizgi' | 'ucgen';
  resimUrl?: string;       // resim için
  // Stil
  stil: ISablonStil;
}

interface ISablonStil {
  fontSize?: number;
  fontWeight?: number;
  fontFamily?: string;
  color?: string;
  textAlign?: 'left' | 'center' | 'right';
  fill?: string;           // şekil dolgu rengi
  stroke?: string;         // şekil kenar rengi
  strokeWidth?: number;
  borderRadius?: number;
  opacity?: number;
  rotate?: number;         // derece
  shadow?: string;         // CSS box-shadow
}
```

### Parametre Seti Entegrasyonu

```typescript
// Mevcut IParametreSeti'ne eklenir:
interface IParametreSeti {
  // ... mevcut alanlar
  sablon?: ISablon;        // Görsel kart şablonu
}

// İçerik eki üzerinde override:
interface IIcerikEk {
  // ... mevcut alanlar
  sablonOverride?: ISablon; // Kullanıcının özelleştirmesi
}
```

## Bileşen Mimarisi

### 1. SablonEditoru (Inline Editör)
**Dosya:** `src/service/fikoyt-ui/src/lib/paylasim-sistemi/sablon-editoru/`

- `sablon-editoru.component.ts` — Ana editör bileşeni
- `sablon-canvas.component.ts` — Canvas önizleme + drag-drop
- `sablon-arac-cubugu.component.ts` — Element ekleme araçları
- `sablon-stil-paneli.component.ts` — Seçili element stil düzenleme
- `sablon-arkaplan-secici.component.ts` — Arka plan ayarları

**Input/Output:**
```typescript
@Input() sablon: ISablon;           // Mevcut şablon (parametre setinden)
@Input() parametreler: IParametre[]; // Canlı parametre değerleri
@Input() mod: 'blok' | 'serbest' | 'hibrit';
@Output() sablonDegisti: EventEmitter<ISablon>;
```

### 2. SablonRenderer (Kart Gösterimi)
**Dosya:** `src/service/fikoyt-ui/src/lib/paylasim-sistemi/sablon-renderer/`

- `sablon-renderer.component.ts` — Şablon + parametreler → görsel kart

**Input:**
```typescript
@Input() sablon: ISablon;
@Input() parametreDegerleri: { [ismi: string]: any };
```

Feed'deki `fikoyt-kart-kok` → `icerikler.component` içinde, içeriğin `ek.sablon` veya `ek.sablonOverride` varsa `SablonRenderer` ile gösterilir.

### 3. Paylaş Kutusu Entegrasyonu

`paylas-icerik-editor.component` içinde mevcut "Parametreler | Şablondan" sekmelerine **"Tasarım"** sekmesi eklenir:

```html
<!-- Parametreler | Tasarım | Şablondan -->
@if (aktifSekme === 'tasarim') {
  <sablon-editoru
    [sablon]="aktifSablon"
    [parametreler]="icerik.ek.parametreler"
    (sablonDegisti)="sablonGuncelle($event)">
  </sablon-editoru>
}
```

## Editör Akışı

1. Kullanıcı parametre setini seçer (ör: "Proje Ekle")
2. Parametreleri doldurur (Proje Adı, Açıklama, Tarih...)
3. "Tasarım" sekmesine geçer
4. Varsa setin hazır şablonu yüklenir, yoksa boş canvas
5. Araç çubuğundan element ekler (metin, şekil, resim)
6. Element seçip parametreye bağlar (dropdown: projeAdi, aciklama...)
7. Stil düzenler (font, renk, boyut, pozisyon)
8. Mod değiştirebilir (blok ↔ serbest ↔ hibrit)
9. "Haydi Fikola" → kart şablon + parametre değerleriyle paylaşılır
10. Feed'de SablonRenderer ile görsel kart gösterilir

## Hazır Arka Plan Şablonları

```typescript
const HAZIR_ARKAPLANLAR = [
  { id: 'karanlik-mavi', baslik: 'Kurumsal', deger: 'linear-gradient(135deg, #1e3a5f, #0a1628)' },
  { id: 'neon-yesil', baslik: 'Teknoloji', deger: 'linear-gradient(135deg, #0d2818, #1a4a2e)' },
  { id: 'sicak-turuncu', baslik: 'Enerji', deger: 'linear-gradient(135deg, #7c2d12, #dc6c35)' },
  { id: 'mor-pembe', baslit: 'Yaratıcı', deger: 'linear-gradient(135deg, #4a1942, #c850c0)' },
  { id: 'sade-beyaz', baslik: 'Minimal', deger: '#ffffff' },
  { id: 'koyu-gri', baslik: 'Karanlık', deger: '#1a1a1a' },
  // ... 10-15 adet
];
```

## Parametre Render Tipleri

`parametre-render` element türü, parametre tipine göre otomatik gösterim:

| Parametre Türü | Render |
|----------------|--------|
| Sayı | Büyük font, monospace |
| İlerleme Çubuğu | Mini progress bar |
| Tarih | Badge formatında (📅 15 Mar 2026) |
| Onay/Anahtar | Yeşil/kırmızı dot |
| Açılır Kutu | Chip/pill |
| Renk | Yuvarlak renk önizleme |
| Para | Tutar + birim formatında |

## Performans

- DOM-based render (canvas/SVG değil) — OnPush + signal uyumlu
- Drag-drop: `cdkDrag` (Angular CDK)
- Canlı önizleme: `computed()` ile parametre değişikliğinde otomatik güncelleme
- Şablon JSON boyutu: ~1-3 KB (küçük, kart içinde taşınabilir)

## Dosya Yapısı

```
src/service/fikoyt-ui/src/lib/paylasim-sistemi/
├── sablon-editoru/
│   ├── sablon-editoru.component.ts
│   ├── sablon-editoru.component.html
│   ├── sablon-editoru.component.less
│   ├── sablon-canvas.component.ts
│   ├── sablon-arac-cubugu.component.ts
│   ├── sablon-stil-paneli.component.ts
│   ├── sablon-arkaplan-secici.component.ts
│   └── sablon.interface.ts
├── sablon-renderer/
│   ├── sablon-renderer.component.ts
│   ├── sablon-renderer.component.html
│   └── sablon-renderer.component.less
```