MyClub/DOCS/MYUIBRIX_DRAGGABLE_UPDATE.md

# MyUIbrix Draggable & Resizable Update - Říjen 2025

## 🎯 Přehled změn

Všechny panely v MyUIbrix editoru jsou nyní **přetažitelné** a **měnitelné velikosti**.

---

## ✨ Nové Funkce

### 1. **Přetažitelné Panely**
Všechny panely můžete přetáhnout kliknutím na záhlaví:
- 🎨 **Vizuální Styly Panel** (levá strana)
- ⚙️ **Style Picker** (kontextový panel u elementu)
- 📋 **Layers Panel** (seznam vrstev)
- ➕ **Element Picker** (přidávání elementů)

### 2. **Měnitelná Velikost**
Každý panel má v pravém dolním rohu **resize handle** (šedý trojúhelník):
- Přetáhněte pro změnu šířky a výšky
- Minimální velikost: 280px × 300px
- Vizuální feedback při hover

### 3. **Chytré Omezení**
- Panely nelze přetáhnout mimo obrazovku
- Automatické omezení pozice
- Pamatuje si poslední pozici během editace

---

## 🐛 Opravené Chyby

### 1. **Duplicitní Text "Unsaved Changes"**
**Problém**: Zobrazovalo se "12 neuložených změn1 Unsaved Changes"

**Oprava**: 
```typescript
// PŘED
{Object.keys(localChanges).length} neuložených změn

// PO
Neuložené změny: {Object.keys(localChanges).filter(...).length}
```

### 2. **AboutPage Překlad**
**Opraveno**:
- ✅ "About MyClub" → "O klubu"
- ✅ "This page is not set up yet..." → "Tato stránka ještě není nastavena..."
- ✅ Meta descriptions přeloženy do češtiny
- ✅ Odstraněn duplicitní `<h1>About MyClub</h1>`

---

## 🎨 Jak Používat

### **Přetahování Panelu**
1. Najeďte myší na **záhlaví panelu** (barevná lišta nahoře)
2. Kurzor se změní na "move" ✋
3. Klikněte a držte levé tlačítko myši
4. Přetáhněte panel na novou pozici
5. Pusťte tlačítko myši

### **Změna Velikosti**
1. Najeďte na **pravý dolní roh** panelu
2. Zobrazí se šedý trojúhelník
3. Kurzor se změní na resize ↘️
4. Klikněte a držte levé tlačítko myši
5. Přetáhněte pro změnu velikosti

---

## 📦 Technické Detaily

### State Management
```typescript
const [panelPositions, setPanelPositions] = useState({
  stylePicker: { x: 0, y: 0, width: 360, height: 550 },
  layersPanel: { x: 0, y: 0, width: 320, height: 600 },
  visualStylePanel: { x: 0, y: 60, width: 320, height: 700 },
  elementPicker: { x: 0, y: 0, width: 600, height: 600 }
});
```

### Drag Handlers
```typescript
// Mouse down na záhlaví
const handlePanelMouseDown = (panelName, e) => {
  if (!target.closest('.panel-header')) return;
  setDraggingPanel(panelName);
  // Zachytí offset od okraje panelu
};

// Mouse move
const handlePanelMouseMove = (e) => {
  // Aktualizuje pozici s boundary checking
  const newX = Math.max(0, Math.min(x, maxX));
  const newY = Math.max(0, Math.min(y, maxY));
};
```

### Resize Handlers
```typescript
// Resize handle - trojúhelník v rohu
<Box
  position="absolute"
  bottom={0}
  right={0}
  width="20px"
  height="20px"
  cursor="nwse-resize"
  bg="gray.400"
  opacity={0.6}
  _hover={{ opacity: 1 }}
  onMouseDown={(e) => handleResizeStart(panelName, e)}
  sx={{
    clipPath: 'polygon(100% 0, 100% 100%, 0 100%)'
  }}
/>
```

### Panel Header
```typescript
// Všechna záhlaví mají class="panel-header"
<Flex
  className="panel-header"
  bg={primaryColor}
  color="white"
  p={3}
  cursor="move"  // Indikuje přetažitelnost
>
  <HStack>
    <Icon as={FaPaintBrush} />
    <Text>Panel Název</Text>
  </HStack>
  <IconButton
    icon={<FiX />}
    onClick={() => closePanel()}
  />
</Flex>
```

---

## 🎯 Upravené Komponenty

### 1. **Vizuální Styly Panel** (levá strana)
- ✅ Přetažitelné záhlaví
- ✅ Resize handle
- ✅ Scroll pro obsah
- ✅ Zachovaná funkčnost VisualStylePanel

### 2. **Style Picker** (kontextový)
- ✅ Přetažitelný
- ✅ Resizable
- ✅ Výchozí pozice u elementu
- ✅ Po přetažení zůstane na místě

### 3. **Layers Panel** (vrstvy)
- ✅ Přetažitelný ze záhlaví
- ✅ Resizable
- ✅ Výchozí pozice vpravo
- ✅ Drag & drop elementů funguje uvnitř

### 4. **Element Picker** (modal)
- ✅ Přetažitelný
- ✅ Resizable
- ✅ Výchozí pozice centrovaná
- ✅ Backdrop zůstává

---

## 🎨 Vizuální Změny

### Resize Handle Styling
```css
/* Šedý trojúhelník v pravém dolním rohu */
clipPath: polygon(100% 0, 100% 100%, 0 100%)
opacity: 0.6
_hover: { opacity: 1 }
cursor: nwse-resize
```

### Cursor Feedback
- **Záhlaví**: `cursor: move` (ruka)
- **Při tažení**: `cursor: grabbing` (zavřená ruka)
- **Resize handle**: `cursor: nwse-resize` (diagonální šipky)

### Panel Borders
- Aktivní panel: zvýrazněný border
- Každý panel má svou barvu (primary, secondary, teal)

---

## 📝 Klávesové Zkratky

Všechny původní zkratky zůstávají:

| Zkratka | Akce |
|---------|------|
| `ESC` | Zavřít aktivní panel |
| `L` | Toggle Layers Panel |
| `A` | Otevřít Element Picker |
| `Ctrl+S` | Uložit změny |

---

## 🚀 Testování

### Checklist
- [✅] Přetažení Style Picker panelu
- [✅] Přetažení Layers Panel
- [✅] Přetažení Visual Style Panel
- [✅] Přetažení Element Picker
- [✅] Resize všech panelů
- [✅] Boundary checking (nelze mimo obrazovku)
- [✅] Minimální velikost panelů
- [✅] Kurzor feedback
- [✅] Oprava "Unsaved Changes" textu
- [✅] AboutPage český překlad

---

## 📦 Soubory

**Upravené:**
```
frontend/src/components/editor/MyUIbrixEditor.tsx
frontend/src/pages/AboutPage.tsx
```

**Nové:**
```
MYUIBRIX_DRAGGABLE_UPDATE.md (tento soubor)
```

---

## 🎓 Pro Vývojáře

### Přidání Nového Přetažitelného Panelu

1. **Přidat do state:**
```typescript
const [panelPositions, setPanelPositions] = useState({
  ...existujici,
  novyPanel: { x: 0, y: 0, width: 400, height: 500 }
});
```

2. **Použít v JSX:**
```typescript
<Box
  position="fixed"
  left={`${panelPositions.novyPanel.x}px`}
  top={`${panelPositions.novyPanel.y}px`}
  width={`${panelPositions.novyPanel.width}px`}
  height={`${panelPositions.novyPanel.height}px`}
  onMouseDown={(e) => handlePanelMouseDown('novyPanel', e)}
  cursor={draggingPanel === 'novyPanel' ? 'grabbing' : 'default'}
>
  <Flex className="panel-header" cursor="move">
    {/* Záhlaví */}
  </Flex>
  
  {/* Obsah */}
  
  {/* Resize handle */}
  <Box
    position="absolute"
    bottom={0}
    right={0}
    width="20px"
    height="20px"
    cursor="nwse-resize"
    onMouseDown={(e) => handleResizeStart('novyPanel', e)}
  />
</Box>
```

---

## 📚 Reference

- React useState hooks pro panel positions
- Mouse events: mousedown, mousemove, mouseup
- Boundary checking: Math.max, Math.min
- CSS clip-path pro resize handle
- Chakra UI positioning

---

**Datum:** 18. října 2025  
**Verze:** 2.1  
**Status:** ✅ Kompletní a otestováno

**Všechny panely jsou nyní plně přetažitelné a měnitelné velikosti! 🎉**