mirror of
https://github.com/Dvorinka/MyClubServer.git
synced 2026-06-04 02:32:57 +00:00
dev day #80
This commit is contained in:
Tomas Dvorak
@@ -0,0 +1,296 @@
|
||||
# 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! 🎉**
|
||||
Reference in New Issue
Block a user