@apertura/pptx-view
DOM renderer for PowerPoint presentations
4 exported symbols · 4 declared here · 0 re-exported
Classes
PptxView
class PptxView extends BaseDocumentView<PptxDocument>
Renders a presentation: one slide on screen plus navigation. A slide is built by positioning shapes absolutely from their EMU coordinates, scaled to the actual canvas size. That preserves the original composition, which flow layout cannot reproduce. Inheritance from the layout and master is not implemented yet: a shape with no explicit parameters is drawn with defaults. It shows mostly in the size and colour of title fonts.
currentSlideIndex
number
goTo
(index: number) => void
next
() => void
previous
() => void
renderContent
() => Promise<void>
Renders the content into {@link root}. Called on every update.
initialize
() => Promise<void>
The theme is read before the first slide is drawn, once per document.
destroy
() => void
Tear the view down and release resources. The container is left empty.
Interfaces
PptxViewOptions
interface PptxViewOptions extends ViewOptions
What the host may ask of the presentation view beyond the common options. The built-in toolbar exists so that the view is usable on its own — dropped into a page with nothing around it, it must still be possible to reach slide seven. An application that has its own navigator (the playground's toolbar counts slides for every format alike) turns it off and drives `goTo` itself, and then wants to be told when the slide changes so its counter agrees.
toolbar?
boolean | undefined
Draw the previous/next strip under the slide. Default: yes.
notes?
boolean | undefined
Show the speaker notes under the slide. Default: yes.
onSlideChange?
((index: number) => void) | undefined
Called whenever the shown slide changes, with its zero-based index.
Values
PPTX_VIEW_CSS
PPTX_VIEW_CSS: "\n.apertura-pptx {\n --apertura-canvas-background: #2b2b2f;\n --apertura-slide-background: #ffffff;\n --apertura-slide-text: #1a1a1a;\n --apertura-chrome-text: #d0d0d4;\n\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n background: var(--apertura-canvas-background);\n font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;\n /*\n * Off, because PowerPoint's own default is off.\n *\n * The a:rPr/@kern attribute is a threshold — the run is kerned from that\n * size up — and a file that states none is not kerned at any size. The\n * browser kerns everything, which made every unkerned line narrower than\n * PowerPoint draws it: seven per cent on a 44-point title, and a word\n * wrapped earlier than it should be. Runs that state a threshold turn it\n * back on.\n */\n font-kerning: none;\n}\n\n.apertura-pptx__stage {\n flex: 1 1 auto;\n min-height: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 24px;\n overflow: auto;\n}\n\n.apertura-pptx__slide {\n position: relative;\n background: var(--apertura-slide-background);\n color: var(--apertura-slide-text);\n box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);\n overflow: hidden;\n flex: 0 0 auto;\n}\n\n/* The shape's own outline, drawn under its text and never intercepting it. */\n\n.apertura-pptx__outline {\n position: absolute;\n inset: 0;\n overflow: visible;\n pointer-events: none;\n}\n\n/* Shapes are positioned absolutely: PresentationML gives explicit coordinates. */\n/*\n * Text sits at the top of its shape unless the shape says otherwise.\n *\n * PresentationML's default anchor is `t`, and centring by default put every\n * unanchored caption half a box lower than the deck was designed with. The\n * shape's own declarations override this when `a:bodyPr/@anchor` states one.\n */\n.apertura-pptx__shape {\n position: absolute;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n overflow: hidden;\n}\n\n.apertura-pptx__paragraph {\n margin: 0;\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\n.apertura-pptx__image {\n position: absolute;\n object-fit: contain;\n}\n\n.apertura-pptx__toolbar {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n padding: 10px;\n color: var(--apertura-chrome-text);\n border-top: 1px solid rgba(255, 255, 255, 0.08);\n font-size: 13px;\n}\n\n.apertura-pptx__button {\n appearance: none;\n border: 1px solid rgba(255, 255, 255, 0.18);\n border-radius: 6px;\n background: transparent;\n color: inherit;\n padding: 5px 12px;\n cursor: pointer;\n font: inherit;\n}\n\n.apertura-pptx__button:hover:not(:disabled) {\n background: rgba(255, 255, 255, 0.1);\n}\n\n.apertura-pptx__button:disabled {\n opacity: 0.4;\n cursor: default;\n}\n\n.apertura-pptx__counter {\n font-variant-numeric: tabular-nums;\n min-width: 84px;\n text-align: center;\n}\n\n.apertura-pptx__notes {\n flex: 0 0 auto;\n max-height: 25%;\n overflow: auto;\n padding: 10px 16px;\n color: var(--apertura-chrome-text);\n border-top: 1px solid rgba(255, 255, 255, 0.08);\n font-size: 13px;\n line-height: 1.5;\n white-space: pre-wrap;\n}\n\n/* The bullet hangs in the indent its paragraph reserved for it. */\n\n.apertura-pptx__bullet {\n white-space: pre;\n}\n\n.apertura-pptx__link {\n color: inherit;\n text-decoration: underline;\n cursor: pointer;\n}\n\n.apertura-pptx__table {\n position: absolute;\n table-layout: fixed;\n border-collapse: collapse;\n}\n\n.apertura-pptx__cell {\n border: 1px solid rgba(0, 0, 0, 0.25);\n padding: 0.4% 0.6%;\n vertical-align: top;\n overflow: hidden;\n}\n"
pptxView
pptxView: ViewPlugin<PptxDocument>