presenter 0.5.1 → 0.5.2

package/dist/src/objects/polygon.d.ts

@@ -0,0 +1,13 @@
+import { ObjectProps, SlideObject } from "../presentation/object";
+import { Position } from "../util/position";
+export interface PolygonProps extends ObjectProps {
+    points: Position[];
+    fill: string;
+    borderWidth: number;
+    borderColor: string;
+}
+export declare class Polygon extends SlideObject<PolygonProps> {
+    constructor(points: Position[], props?: Partial<PolygonProps>);
+    tagName(): string;
+    attributes(): Partial<Record<string, string>>;
+}

package/dist/src/objects/rectangle.d.ts

@@ -0,0 +1,14 @@
+import { ObjectProps, SlideObject } from "../presentation/object";
+export interface RectangleProps extends ObjectProps {
+    fill: string;
+    width: number;
+    height: number;
+    rounding: number;
+    borderWidth: number;
+    borderColor: string;
+}
+export declare class Rectangle extends SlideObject<RectangleProps> {
+    constructor(props?: Partial<RectangleProps>);
+    tagName(): string;
+    attributes(): Partial<Record<string, string>>;
+}

package/dist/src/objects/screenCapture.d.ts

@@ -0,0 +1,17 @@
+import { ObjectProps, SlideObject } from "../presentation/object";
+export interface ScreenCaptureProps extends ObjectProps {
+    width: string | number | null;
+    height: string | number | null;
+    scale: number;
+    align: "left" | "center" | "right";
+}
+export declare class ScreenCapture extends SlideObject<ScreenCaptureProps> {
+    videoElement: HTMLVideoElement | null;
+    constructor(props?: Partial<ScreenCaptureProps>);
+    tagName(): string;
+    attributes(): Partial<Record<string, string>>;
+    styles(): {
+        "text-align": "left" | "center" | "right";
+    };
+    children(): HTMLVideoElement[];
+}

package/dist/src/objects/text.d.ts

@@ -0,0 +1,63 @@
+import { ObjectProps, SlideObject } from "../presentation/object";
+import { BuildFunction } from "../util/animation";
+import { RichTextSpan } from "../util/richText";
+export type TextContent = string | (string | RichTextSpan[])[];
+export interface TextProps extends ObjectProps {
+    content: TextContent;
+    fontStyle: string;
+    fontWeight: string | number;
+    fontSize: number;
+    fontFamily: string;
+    color: string;
+    dominantBaseline: string;
+    textDecoration: string;
+    baselineHeight: number;
+    length: number | null;
+    align: "left" | "center" | "right";
+    lineSpacing: string;
+    ligatures: string | null;
+}
+export declare class Text extends SlideObject<TextProps> {
+    constructor(content: TextContent, props?: Partial<TextProps>);
+    isRichText(): boolean;
+    tagName(): string;
+    attributes(): Partial<Record<string, string>>;
+    /**
+     * Text elements return position as additional attributes since computing text
+     * size and position requires other properties to be set first.
+     */
+    additionalAttributes(): Partial<Record<string, string>>;
+    styles(): Partial<Record<string, string>>;
+    children(): Node[];
+    requiresChildrenUpdate(props: Partial<TextProps>): boolean;
+    /**
+     * Returns the number of characters in the total text content.
+     */
+    contentLength(): number;
+    /**
+     * Returns the children of a text node, up to a particular content length.
+     */
+    childrenWithContentLength(length: number | null): Node[];
+    regenerateChildren(): void;
+    animate(props: Partial<TextProps>, animationParams?: anime.AnimeParams, delay?: number | null, animate?: boolean): BuildFunction;
+    /**
+     * Returns a write-on animation for changing the characters.
+     *
+     * Writing on text requires a different approach than other text animations
+     * since the children of the element need to be replaced.
+     */
+    writeOn(length?: number | null, duration?: number, animate?: boolean): BuildFunction;
+    /**
+     * Sets position attributes of text and re-generates any children.
+     *
+     * This is because re-generating children alone won't change the position
+     * attributes, which menas the text might be mis-aligned.
+     */
+    generateChildrenAndReposition(): void;
+    /**
+     * Animates the content of a text element via an
+     * interpolation function that returns the text content
+     * for a given progress amount.
+     */
+    animateContent(computeContent: (proportion: number) => TextContent, duration?: number): BuildFunction;
+}

package/dist/src/objects/text.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/objects/vectorGraphic.d.ts

@@ -0,0 +1,48 @@
+import { ObjectProps, SlideObject } from "../presentation/object";
+import { AnimationProps, BuildFunction } from "../util/animation";
+export interface VectorGraphicProps extends ObjectProps {
+    svg: string;
+    width: number;
+    height: number;
+}
+interface DrawOnProps {
+    color: string;
+    strokeWidth: number;
+    fill: boolean;
+    fillColor: string | null;
+    drawDuration: number;
+    fillDuration: number;
+    easing: string;
+    pathLength: number | null;
+    /**
+     * Controls whether there should still be a stroke present at end of animation.
+     * If `endWithoutStroke` is true, the stroke width fades out to 0 at the end.
+     */
+    endWithoutStroke: boolean;
+}
+export declare class VectorGraphic extends SlideObject<VectorGraphicProps> {
+    parsedChildren: Node[];
+    /**
+     * Returns an SVG node given string content.
+     */
+    static svgNode(content: string): SVGElement;
+    constructor(svg: string, props?: Partial<VectorGraphicProps>);
+    tagName(): string;
+    createElement(): SVGElement;
+    attributes(): Partial<Record<string, string>>;
+    children(): Node[];
+    /**
+     * Perform animation on a particular path of the graphic.
+     * Requires specifying `attributes` or `styles` for path animation props.
+     */
+    animatePath(selector: string, props: Partial<AnimationProps>, duration?: number, animate?: boolean): BuildFunction;
+    /**
+     * Sets path animation properties without animating.
+     */
+    setPath(selector: string, props: Partial<AnimationProps>): BuildFunction;
+    /**
+     * Animates the drawing on of a particular path.
+     */
+    drawOn(selector: string, props?: Partial<DrawOnProps>): BuildFunction;
+}
+export {};

package/dist/src/presentation/object.d.ts

@@ -0,0 +1,131 @@
+import { BoundingBox, Position } from "../util/position";
+import { Presentation } from "./presentation";
+import { BuildFunction } from "../util/animation";
+export type Anchor = "topleft" | "top" | "topright" | "left" | "center" | "right" | "bottomleft" | "bottom" | "bottomright";
+export interface ObjectProps {
+    position: Position | null;
+    opacity?: number;
+    anchor: Anchor;
+}
+export declare class SlideObject<Props extends ObjectProps> {
+    /**
+     * Starting values for each property.
+     */
+    initialProps: Props;
+    /**
+     * Current values for each property.
+     */
+    props: Props;
+    _presentation: Presentation | null;
+    _element: SVGElement | null;
+    _children: Node[];
+    /**
+     * Initializes a new object to include on a slide.
+     * @param props Object properties.
+     */
+    constructor(props: Partial<Props>);
+    /**
+     * Returns the tag name of the element.
+     * @returns Tag name.
+     */
+    tagName(): string;
+    /**
+     * Returns the DOM attributes that should be set for the element.
+     * @returns Object with attribute names and values.
+     */
+    attributes(): Partial<Record<string, string>>;
+    /**
+     * Returns additional DOM attributes to be set for the element.
+     * Some attributes can't be computed until after an element's other properties are set:
+     * e.g. text position depends on content and font size.
+     * Additional attributes are computed after all other attributes, styles, and children.
+     * @returns Object with attribute names and values.
+     */
+    additionalAttributes(): Partial<Record<string, string>>;
+    /**
+     * Returns the styles that should be set for the element.
+     * @returns Object with style names and values.
+     */
+    styles(): Partial<Record<string, string>>;
+    /**
+     * Returns the children that should be rendered for the object.
+     * @returns Array of SVG elements.
+     */
+    children(): Node[];
+    /**
+     * Given a set of prop updates, checks if the children of the object need to be updated.
+     * @param props Properties to update.
+     * @returns Boolean indicating whether children need to be updated.
+     */
+    requiresChildrenUpdate(props: Partial<Props>): boolean;
+    /**
+     * Given a particular initial bounding box, returns the DOM position attributes that should be set for the element.
+     * @param bbox Bounding box.
+     * @returns Object with attribute names and values.
+     */
+    positionAttributes(bbox: BoundingBox): any;
+    /**
+     * Re-generates the SVG element for the object.
+     * @param presentation Presentation object.
+     * @returns SVG element.
+     */
+    generate(presentation: Presentation): SVGElement;
+    /**
+     * Creates a new HTML element for the object.
+     */
+    createElement(): SVGElement;
+    /**
+     * Returns the element for the object.
+     * @returns SVG element.
+     */
+    element(): SVGElement;
+    /**
+     * Returns an animation to perform.
+     * @param props Properties of object to change.
+     * @param animationParams Animation behavior parameters.
+     * @returns Animation build function.
+     */
+    animate(props: Partial<Props>, animationParams?: anime.AnimeParams, delay?: number | null, animate?: boolean): BuildFunction;
+    /**
+     * Returns an update animation that skips the animation and just performs the change.
+     * @param props Properties of object to change.
+     */
+    set(props: Partial<Props>, delay?: number | null): BuildFunction;
+    /**
+     * Animates a movement of the object.
+     */
+    move(position: Position, animationParams?: anime.AnimeParams): BuildFunction;
+    /**
+     * Animates fading an object into view.
+     */
+    fadeIn(animationParams?: anime.AnimeParams): BuildFunction;
+    /**
+     * Animates fading an object out of view.
+     */
+    fadeOut(animationParams?: anime.AnimeParams): BuildFunction;
+    /**
+     * Sets an objects opacity to 1.
+     */
+    show(): BuildFunction;
+    /**
+     * Sets an objects opacity to 0.
+     */
+    hide(): BuildFunction;
+    /**
+     * Allow for x and y values to be interpreted as percentages of total width/height.
+     */
+    positionInPresentation(position: Position): Position;
+    /**
+     * Adjusts a bounding box to be anchored given the object's vertical and horizontal anchor settings.
+     * @param bbox Bounding box to anchor.
+     * @returns Anchored bounding box.
+     */
+    anchorBoundingBox(bbox: BoundingBox): BoundingBox;
+    /**
+     * Computes a bounding box for a given element given its rendered size and defined position.
+     * @param element Element for which to compute size.
+     * @param children Custom children to use when computing bounding box.
+     * @returns
+     */
+    computeRenderedBoundingBox(element: SVGGraphicsElement, children?: Node[] | null): BoundingBox;
+}

package/dist/src/presentation/presentation.d.ts

@@ -0,0 +1,153 @@
+import { BoundingBox } from "../util/position";
+import { Slide } from "./slide";
+export interface PresentationFont {
+    url: string;
+    fontFamily: string;
+    fontStyle?: string;
+    fontWeight?: string | number;
+}
+export interface PresentationOptions {
+    /**
+     * Width of the presentation.
+     */
+    width: number;
+    /**
+     * Height of the presentation.
+     */
+    height: number;
+    /**
+     * Slide color for the presentation.
+     */
+    backgroundColor: string;
+    /**
+     * Fonts to embed in PDF export.
+     */
+    fonts: PresentationFont[];
+    /**
+     * How long cached presentation state should be valid for, in minutes.
+     * `null` menas don't use cached data at all.
+     * `0` means use cached data indefinitely.
+     *
+     * When presentation state is cached, reloading the presentation returns
+     * the user to the slide and build they were on previously.
+     */
+    stateCacheTTL: number | null;
+}
+interface PresentationState {
+    currentSlide: number;
+}
+export declare class Presentation {
+    /**
+     * Title of the presentation.
+     */
+    title: string;
+    /**
+     * Element where presentation should be mounted.
+     */
+    element: HTMLElement;
+    /**
+     * SVG container element.
+     */
+    container: HTMLElement;
+    /**
+     * Parent SVG element of presentation.
+     */
+    svg: SVGSVGElement | null;
+    /**
+     * Shadow SVG element, not displayed and used for calculating sizes.
+     */
+    shadow: SVGSVGElement | null;
+    /**
+     * Background SVG element, used for rendering background color.
+     */
+    background: SVGSVGElement | null;
+    /**
+     * Additional element container for elements that aren't part of the SVG.
+     */
+    additionalElementContainer: HTMLElement | null;
+    /**
+     * Element that allows navigation between different slides.
+     */
+    navigatorContainer: HTMLElement | null;
+    /**
+     * Presentation settings.
+     */
+    options: PresentationOptions;
+    /**
+     * Bounds of presentation.
+     */
+    boundingBox: BoundingBox;
+    /**
+     * Presentation slides.
+     */
+    slides: Slide[];
+    /**
+     * Presentation state.
+     */
+    presentationState: PresentationState;
+    /**
+     * Keyboard shortcut access to jump to particular slides.
+     * A null slide index indicates not changing the slide
+     * (i.e. keeping the same slide active.)
+     */
+    shortcuts: Record<string, {
+        slideIndex: number | null;
+        animationIndex: number;
+    }>;
+    /**
+     * Current text command that the presenter has entered into presentation.
+     */
+    textCommand: {
+        active: boolean;
+        command: string;
+    };
+    slideCleanupHandlers: (() => void)[];
+    /**
+     *
+     * @param title Title of the presentation.
+     */
+    constructor(title: string, slides: Slide[], element: HTMLElement, options?: Partial<PresentationOptions>);
+    present(): void;
+    /**
+     * Renders a slide.
+     */
+    renderSlide(slideIndex: number, animationIndex?: number | "last"): void;
+    /**
+     * Sets up keyboard commands for the presentation.
+     */
+    setupKeyboardCommands(): void;
+    handleKeyboardEvent(event: KeyboardEvent): void;
+    resetTextCommand(): void;
+    /**
+     * Updates the size of the parent SVG element.
+     *
+     * The size of the parent SVG element needs to be updated.
+     */
+    updateSVGContainerSize(): void;
+    /**
+     * Advances to next animation in slide, or next slide if there is no next animation.
+     * Returns true if we were able to successfully advance.
+     * @param includeIntermediateBuilds Determines whether to progress through builds.
+     */
+    next(includeIntermediateBuilds: boolean): Promise<boolean>;
+    /**
+     * Goes back to the previous slide.
+     * @param includeIntermediateBuilds Determines whether to progress through builds.
+     */
+    previous(includeIntermediateBuilds: boolean): void;
+    /**
+     * Checks if the presentation takes the entire document body.
+     * @returns True if the presentation takes the entire document body.
+     */
+    isFullBodyPresentation(): boolean;
+    /**
+     * Computes the current size of an element in the DOM.
+     * Optionally accepts a custom list of children to see what the size of an
+     * element would be with different children.
+     * @param element Element to compute size of.
+     * @param children Custom children to use for element.
+     * @returns BoundingBox
+     */
+    computeRenderedBoundingBox(element: SVGGraphicsElement, children?: Node[] | null): BoundingBox;
+}
+export {};

package/dist/src/presentation/presentation.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/presentation/slide.d.ts

@@ -0,0 +1,43 @@
+import { BuildFunctionSequence } from "../util/animation";
+import { SlideObject } from "./object";
+import { Presentation } from "./presentation";
+export interface SlideProps {
+    /**
+     * An optional title for the slide, shown in navigation bar.
+     */
+    title: string | null;
+    /**
+     * Additional HTML element to show behind SVG content.
+     */
+    additionalElement: HTMLElement | (() => HTMLElement) | null;
+    /**
+     * A shortcut allows a keyboard shortcut to link directly to a slide.
+     * Represented as either just a string (the shortcut),
+     * or a string and number (shortcut and animation index).
+     */
+    shortcuts: (string | [string, number])[];
+}
+export declare class Slide {
+    objects: SlideObject<any>[];
+    animations: BuildFunctionSequence;
+    /**
+     * Which animation we're set to render next.
+     * Slides start with animationIndex = 0.
+     */
+    animationIndex: number;
+    /**
+     * Property used by the presenter-export package to note which
+     * animations of the slide are meant to be exported.
+     * "first", "last", "all", and "none" are special-cased values,
+     * otherwise it can be an animationIndex in [0, animations.length].
+     */
+    keyBuilds: "first" | "last" | "all" | "none" | number[] | null;
+    props: SlideProps;
+    constructor(objects: SlideObject<any>[], animations?: BuildFunctionSequence, props?: Partial<SlideProps>);
+    render(presentation: Presentation, animationIndex?: number): void;
+    nextAnimation(): Promise<boolean>;
+    /**
+     * Returns the build indices that are meant to be exported.
+     */
+    getKeyBuilds(): number[];
+}

package/dist/src/presentation/storage.d.ts

@@ -0,0 +1,9 @@
+import { Presentation } from "./presentation";
+export declare function storePresentationState(presentation: Presentation): void;
+/**
+ * Restores the presentation state from the cache, if it exists and isn't older
+ * than the cache TTL in minutes.
+ *
+ * Returns `true` if the presentation state was updated.
+ */
+export declare function restorePresentationState(presentation: Presentation, ttl: number | null): boolean;

package/dist/src/util/animation.d.ts

@@ -0,0 +1,60 @@
+import anime from "animejs/lib/anime.es.js";
+export { anime };
+/**
+ * Data needed to process an animation.
+ */
+export interface AnimationProps {
+    /**
+     * Whether to animate the change.
+     */
+    animate?: boolean;
+    element?: HTMLElement | SVGElement;
+    attributes?: Record<string, string>;
+    styles?: Record<string, string>;
+    animationParams?: anime.AnimeParams;
+    children?: Node[];
+    /**
+     * Delay, in milliseconds.
+     */
+    delay?: number;
+    /**
+     * An animation can also specify custom functions that can be called to
+     * perform an animation or update to the end state of the animation.
+     */
+    animateCallback?: () => void;
+    updateCallback?: () => void;
+}
+/**
+ * Function that performs an animation on an element.
+ */
+export type Animator = (props: AnimationProps | AnimationProps[]) => Promise<void>;
+/**
+ * Function that possibly applies a sequence of animations.
+ */
+export type BuildFunction = (animate: Animator) => void;
+/**
+ * A build function sequence is a sequence, where each element is a build
+ * function or a list of build functions to be performed on the same build.
+ *
+ * In a list of build functions, a number in place of a build function represents a delay.
+ */
+export type BuildFunctionSequence = (BuildFunction | (BuildFunction | number)[])[];
+/**
+ * Perform an animation on an element.
+ * @param props Animation properties.
+ */
+export declare const performAnimation: Animator;
+/**
+ * Performs animations by skipping the animation duration and jumping to end of animation.
+ * @param props Animation properties.
+ */
+export declare const skipAnimation: Animator;
+/**
+ * When performing animations on non-DOM elements, e.g. variables in the state
+ * of a Three.js scene, we need a unchanging reference to state that may get
+ * replaced. That state can hold any type.
+ */
+export interface StateContainer<T> {
+    state: T;
+}
+export declare function animateStateChange<T>(state: StateContainer<T>, finalState: Partial<T>, duration?: number): BuildFunction;

package/dist/src/util/easing.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Clamps a value to a given range.
+ */
+export declare function clamp(value: number, min: number, max: number): number;
+/**
+ * Maps a [0, 1] value linearly onto [0, 1].
+ */
+export declare function easeLinear(value: number): number;
+/**
+ * Maps a [0, 1] value onto [0, 1] via a smoothstep cubic easing function.
+ */
+export declare function easeCubic(value: number): number;

package/dist/src/util/easing.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/util/position.d.ts

@@ -0,0 +1,11 @@
+export interface Position {
+    x: number;
+    y: number;
+}
+export declare class BoundingBox {
+    origin: Position;
+    width: number;
+    height: number;
+    constructor(origin: Position, width: number, height: number);
+    static fromElement(element: SVGGraphicsElement): BoundingBox;
+}

package/dist/src/util/richText.d.ts

@@ -0,0 +1,18 @@
+import { TextContent } from "../objects/text";
+export interface RichTextProps {
+    fontStyle?: string;
+    fontWeight?: string | number;
+    fontSize?: string | number;
+    fontFamily?: string;
+    textDecoration?: string;
+    color?: string;
+    dy?: number;
+    superscript?: boolean;
+    subscript?: boolean;
+}
+export type RichTextSpan = string | [string, RichTextProps];
+export declare function preserveLeadingSpaces(content: TextContent): TextContent;
+/**
+ * Given rich text configuration, returns the corresponding tspan nodes.
+ */
+export declare function generateTextNodes(lines: (string | RichTextSpan[])[], lineSpacing?: string, anchor?: "start" | "middle" | "end"): Node[];

package/dist/webpack.config.d.ts

@@ -0,0 +1,70 @@
+export let mode: string;
+export namespace entry {
+    export namespace presenter {
+        let _import: string;
+        export { _import as import };
+        export let filename: string;
+        export namespace library {
+            let name: string;
+            let type: string;
+        }
+    }
+    export namespace _export {
+        let _import_1: string;
+        export { _import_1 as import };
+        let filename_1: string;
+        export { filename_1 as filename };
+        export namespace library_1 {
+            let name_1: string;
+            export { name_1 as name };
+            let type_1: string;
+            export { type_1 as type };
+        }
+        export { library_1 as library };
+    }
+    export { _export as export };
+    export namespace morph {
+        let _import_2: string;
+        export { _import_2 as import };
+        let filename_2: string;
+        export { filename_2 as filename };
+        export namespace library_2 {
+            let name_2: string;
+            export { name_2 as name };
+            let type_2: string;
+            export { type_2 as type };
+        }
+        export { library_2 as library };
+    }
+    export namespace code {
+        let _import_3: string;
+        export { _import_3 as import };
+        let filename_3: string;
+        export { filename_3 as filename };
+        export namespace library_3 {
+            let name_3: string;
+            export { name_3 as name };
+            let type_3: string;
+            export { type_3 as type };
+        }
+        export { library_3 as library };
+    }
+}
+export namespace output {
+    let path: string;
+    let libraryTarget: string;
+    let globalObject: string;
+}
+export namespace watchOptions {
+    let ignored: string[];
+}
+export namespace resolve {
+    let extensions: string[];
+}
+export namespace module {
+    let rules: {
+        test: RegExp;
+        use: string;
+        exclude: RegExp[];
+    }[];
+}