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

VlastnostCo 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)
Rotace0–360°, snap na 0/45/90/… stupňů
Průhlednost0 (neviditelné) až 1 (plně viditelné)
Z-order (vrstvení)Pořadí vykreslování; vyšší = nahoře
AnimaceVolitelně — 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 (keepRatio Konva 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