MyClub/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:

// 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

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

// 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

// 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

// 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

/* Š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:

const [panelPositions, setPanelPositions] = useState({
  ...existujici,
  novyPanel: { x: 0, y: 0, width: 400, height: 500 }
});

2. Použít v JSX:

<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! 🎉