Objekty na slidu
Builder pracuje s 6 typy objektů. Každý má společné vlastnosti (pozice, velikost, rotace, průhlednost, vrstvení) + specifické.
Text
Vložit: kliknete na T v toolbaru → na canvasu se objeví textový objekt s placeholderem.
Vlastnosti:
- Text (dvojklik na objekt = inline edit; Enter potvrdí)
- Font — Inter, Roboto, Lora, Playfair, JetBrains Mono… (sans / serif / monospace dropdown)
- Velikost — 8–400 px (nebo „font-resize handle" = drag pravého spodního rohu při Shift)
- Styl — Bold / Italic toggle
- Barva — color picker
- Zarovnání — L / S / R
- Řádkování — 1.0 až 2.0
Tip: Pro dynamickou změnu velikosti písma držte Shift a táhněte za malou čtvercovou úchytku v pravém dolním rohu vybraného textového objektu. Velikost se mění v reálném čase.
Obrázek
Vložit: klikněte na 🖼 v toolbaru → vyberte soubor (JPG/PNG/WebP, max ~5 MB) → upload na R2 → objeví se na canvasu.
Vlastnosti:
- URL zdroje (lze nahrát nový)
- Průhlednost 0–100 %
- Rotace
- Standardní z-order, duplicate, delete
Resize: drag rohu (free) nebo Shift+drag (zachovat poměr stran). Alternativně 🔗 toggle v panelu vlastností = persistentní aspect lock (pro touch zařízení).
Video
Vložit: klikněte na 🎬 v toolbaru → vyberte .mp4 (max ~50 MB) → upload na R2.
Vlastnosti:
- URL videa (lze odebrat = smazat video)
- Titulky — celá samostatná sekce, viz Video titulky
- Standardní pozice/velikost/rotace
V editoru se video automaticky přehrává (muted, loop) — pro náhled. V Present mode a MP4 exportu hraje stejně.
Tvary (rect / ellipse / line)
Vložit: □ rect, ○ ellipse, — line v toolbaru.
Vlastnosti:
- Barva výplně (rect/ellipse)
- Ohraničení — barva + tloušťka
- Zaoblení rohů (rect)
- Barva linky + tloušťka (line)
- Standardní pozice / rotace / průhlednost
Společné vlastnosti
| Vlastnost | Co dělá |
|---|---|
| Pozice (x, y) | Levý horní roh objektu v slide coords (0,0 = TL slidu) |
| Velikost (width, height) | V design pixelech (slide 16:9 = 1280×720) |
| Rotace | 0–360°, snap na 0/45/90/… stupňů |
| Průhlednost | 0 (neviditelné) až 1 (plně viditelné) |
| Z-order (vrstvení) | Pořadí vykreslování; vyšší = nahoře |
| Animace | Volitelně — viz Animace |
Multi-select bulk edit
Při výběru 2+ objektů panel vlastností přepne do bulk edit módu:
- Hlavička: „Vybráno: N objektů" + breakdown typů
- Společné vlastnosti — pokud mají shodnou hodnotu, ukáže ji; jinak placeholder „Mixed"
- Změna se aplikuje na všechny vybrané najednou (jedna transakce, jedno undo)
- Bulk Bold/Italic, barva, font, velikost dostupné pro texty
- Akce: Duplikovat (N) / Smazat (N)
Jak vybrat víc objektů:
- Cmd/Ctrl + klik — toggle v výběru
- Drag prázdné plochy — rubber-band obtáhne objekty (Shift = additive)
- Cmd/Ctrl + A — vybrat vše na slidu
- Long-press (mobil) — vstoupit do multi-select módu, pak tapy
Group drag
Když je víc vybraných, drag kteréhokoli z nich = posune celou skupinu o stejnou vzdálenost. Relativní pozice se zachovají. Šipky stejně.
Vrstvení (Z-order)
V panelu vlastností 4 tlačítka:
- ⏫ Úplně vpředu — na top
- ⬆ O vrstvu vpřed — o jedno nahoru
- ⬇ O vrstvu vzad — o jedno dolů
- ⏬ Úplně vzadu — na dno (často pro pozadí)
Z-order se ukládá jako zIndex: number na každém objektu.
Aspect ratio při resize
Drag rohu = free resize. Pro zachovat poměr stran:
- Desktop: držte Shift během dragu
- Mobil/touch: přepněte 🔗 toggle v panelu vlastností (persistentní)
- Multi-select: automaticky zachovává poměr (
keepRatioKonva Transformer)
Tipy
- Kopírovat styl z jiného objektu — zatím nejde (plánováno)
- Zarovnání objektů (align center, distribute) — zatím nejde v multi-select
- Snap k jiným objektům — Builder snapuje při dragu na okraje a středy ostatních objektů (růžové čáry)
- Snap k hranám slidu — také funguje