presenter 0.2.4 → 0.3.1

package/dist/src/code/codeBlock.d.ts

@@ -0,0 +1,83 @@
+import { Group, GroupProps } from "../objects/group";
+import { Rectangle, RectangleProps } from "../objects/rectangle";
+import { Text, TextContent, TextProps } from "../objects/text";
+import { Anchor } from "../presentation/object";
+import { Presentation } from "../presentation/presentation";
+import { BuildFunction } from "../util/animation";
+import { Position } from "../util/position";
+/**
+ * Region for syntax highlighting.
+ *
+ * The `presenter-syntax-highlight` script can be used to generate a list of
+ * highlight regions for each line of code. This allows code to be
+ * syntax-highlighted on the slide.
+ */
+export interface CodeHighlightRegion {
+    start: number;
+    end: number;
+    color: string;
+    bold: boolean;
+}
+export interface CodeBlockProps {
+    code: string;
+    highlights: CodeHighlightRegion[][] | null;
+    length: number | null;
+    fontFamily: string;
+    fontSize: number;
+    textColor: string;
+    backgroundColor: string | null;
+    backgroundRounding: number;
+    padding: number;
+    lineHeight: number;
+    characterWidth: number;
+    focusColor: string;
+    focusOpacity: number;
+    focusRounding: number;
+    focusLineStart: number;
+    focusLineEnd: number;
+    focusColStart: number;
+    focusColEnd: number;
+    focusPaddingX: number;
+    focusOffsetX: number;
+    focusPaddingY: number;
+    focusOffsetY: number;
+    position: Position;
+    anchor: Anchor;
+}
+export declare class CodeBlock extends Group {
+    codeBlockProps: CodeBlockProps;
+    background: Rectangle;
+    focus: Rectangle;
+    text: Text;
+    constructor(props?: Partial<CodeBlockProps>);
+    /**
+     * Animation of code block. Since a code block is made up of multiple
+     * elements (background, focus, text), we animate each element separately.
+     */
+    animate(props: Partial<CodeBlockProps>, animationParams?: anime.AnimeParams, delay?: number | null, animate?: boolean): BuildFunction;
+    /**
+     * Given properties for the entire code block, compute properties for individual text elements.
+     */
+    static getComponentProps(props: CodeBlockProps): {
+        group: Partial<GroupProps>;
+        background: Partial<RectangleProps>;
+        focus: Partial<RectangleProps>;
+        text: Partial<TextProps>;
+    };
+    static buildTextContent(code: string, highlights: CodeHighlightRegion[][] | null): TextContent;
+    /**
+     * Given text properties, calculates the character width and line height for the font at that size.
+     * Can be pre-computed, then be used as input to a new CodeBlock.
+     *
+     * Sample usage in a presentation to determine text properties:
+     *
+     * console.log(CodeBlock.computePropsForText(presentation, {
+     *   fontFamily: "Menlo",
+     *   fontSize: 130,
+     * }));
+     */
+    static computePropsForText(presentation: Presentation, textProps: Partial<TextProps>): {
+        lineHeight: number;
+        characterWidth: number;
+    };
+}

package/dist/src/code/index.d.ts

@@ -0,0 +1 @@
+export * from "./codeBlock";

package/dist/src/export/index.d.ts

@@ -0,0 +1,22 @@
+import { Presentation } from "../presentation/presentation";
+/**
+ * Renders the SVG content of a single slide of a presentation to a PNG image.
+ */
+export declare function renderCurrentSlide(presentation: Presentation, filename: string): Promise<void>;
+/**
+ * Renders the SVG content of all slides in a presentation as PNG images.
+ */
+export declare function renderPresentationAsImages(presentation: Presentation): Promise<void>;
+/**
+ * Renders whole slide container (background, additional element canvas, svg)
+ * and sends to a server endpoint.
+ *
+ * When rendering all componenst of the slide container, the server endpoint
+ * is requried to perform additional image compositing to generate the
+ * render.
+ */
+export declare function exportCurrentSlideContainer(presentation: Presentation, filename: string, serverEndpoint: string): Promise<void>;
+/**
+ * Exports the whole slide content of all slides and sends to a server endpoint.
+ */
+export declare function exportAllSlides(presentation: Presentation, serverEndpoint: string): Promise<void>;

package/dist/src/index.d.ts

@@ -2,6 +2,8 @@ export * from "./presentation/presentation";
 export * from "./presentation/slide";
 export * from "./presentation/object";
 export * from "./objects/arrow";
+export * from "./objects/circle";
+export * from "./objects/grid";
 export * from "./objects/group";
 export * from "./objects/image";
 export * from "./objects/line";
@@ -11,5 +13,6 @@ export * from "./objects/text";
 export * from "./objects/rectangle";
 export * from "./objects/vectorGraphic";
 export * from "./util/animation";
+export * from "./util/easing";
 export * from "./util/position";
 export * from "./util/richText";

package/dist/src/morph/index.d.ts

@@ -0,0 +1,34 @@
+import { BuildFunction } from "../util/animation";
+export interface MorphParams {
+    duration: number;
+    /**
+     * For smooth morph, we can define a maximum size for segments to use in
+     * interpolated animation. Lower values result in smoother animations, but
+     * are potentially less performant.
+     *
+     * Default is 10.
+     */
+    maxSegmentLength: number;
+    /**
+     * For simple morph, easing is meant to be a string.
+     * For smooth morph, easing is meant to be a function over [0, 1].
+     */
+    easing: string | ((value: number) => number);
+}
+/**
+ * Generates an animation that morphs one path into another, given a path
+ * interpolation function that computes intermediate path values.
+ */
+export declare function morphPath(sourceElement: Element | (() => Element), targetPath: string, pathInterpolator: (source: string, target: string) => (t: number) => string, morphParams: Partial<MorphParams>): BuildFunction;
+/**
+ * Smoothly morphs one path into another. Attempts to intelligently
+ * interpolate between shapes smoothly, even if shapes don't correspond to
+ * each other closely or don't have the same number of points.
+ */
+export declare function morphPathSmooth(sourceElement: Element | (() => Element), targetPath: string, morphParams?: Partial<MorphParams>): BuildFunction;
+/**
+ * Simply morphs one path into another. Points are translated directly, and
+ * both paths must have the same number of points for the animation to look
+ * correct. Works best if two paths correspond to each other closely.
+ */
+export declare function morphPathSimple(sourceElement: Element | (() => Element), targetPath: string, morphParams?: Partial<MorphParams>): BuildFunction;

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

@@ -1,5 +1,5 @@
 import { ObjectProps, SlideObject } from "../presentation/object";
-import { AnimationProps } from "../util/animation";
+import { BuildFunction } from "../util/animation";
 import { Position } from "../util/position";
 import { Line } from "./line";
 import { Polygon } from "./polygon";
@@ -9,6 +9,24 @@ export interface ArrowProps extends ObjectProps {
     color: string;
     width: number;
     arrowSize: number;
+    /**
+     * Property describing whether the arrow has been fully drawn.
+     * If an arrow hasn't been drawn, it can be animated to draw in.
+     */
+    drawn: boolean;
+    /**
+     * The start and end points can have "padding".
+     * This is equivalent to adding (x, y) values to the start and end points.
+     *
+     * This can be useful when drawing an arrow from an object at a particular
+     * location. The arrow's start/end point can match the object's, with some
+     * added padding so that the arrow doesn't overlap the object.
+     *
+     * It can also be useful if multiple arrows start or end at the same place,
+     * and you want to adjust their endpoints slightly to avoid overlap.
+     */
+    padStart: Partial<Position>;
+    padEnd: Partial<Position>;
 }
 export declare class Arrow extends SlideObject<ArrowProps> {
     line: Line | null;
@@ -21,16 +39,15 @@ export declare class Arrow extends SlideObject<ArrowProps> {
     calculateShapes(props: ArrowProps): {
         line: {
             start: Position;
-            end: {
-                x: number;
-                y: number;
-            };
+            end: Position;
         };
         arrowhead: Position[];
     };
     children(): Node[];
+    animate(props: Partial<ArrowProps>, animationParams?: anime.AnimeParams, delay?: number | null, animate?: boolean): BuildFunction;
+    draw(animationParams?: anime.AnimeParams): BuildFunction;
     /**
      * Returns animations for changes in arrowhead.
      */
-    animations(arrowProps: Partial<ArrowProps>, animationParams?: anime.AnimeParams): AnimationProps[];
+    animateArrow(arrowProps: Partial<ArrowProps>, animationParams?: anime.AnimeParams, delay?: number | null, animate?: boolean): BuildFunction;
 }

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

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

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

@@ -0,0 +1,17 @@
+/**
+ * A grid of identical or similar objects.
+ */
+import { SlideObject } from "../presentation/object";
+import { Position } from "../util/position";
+import { Group, GroupProps } from "./group";
+export interface GridProps extends Omit<GroupProps, "objects"> {
+    origin: Position;
+    spacing: Partial<Position>;
+    rows: number;
+    cols: number;
+    objects: (row: number, col: number) => SlideObject<any> | null;
+}
+export declare class Grid extends Group {
+    objects: (SlideObject<any> | null)[][];
+    constructor(props: Partial<GridProps>);
+}

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

@@ -1,4 +1,5 @@
 import { ObjectProps, SlideObject } from "../presentation/object";
+import { Position } from "../util/position";
 export interface GroupProps extends ObjectProps {
     /**
      * A positioned group places the group's anchor at a particular coordinate.
@@ -6,6 +7,9 @@ export interface GroupProps extends ObjectProps {
      */
     positioned: boolean;
     objects: SlideObject<any>[];
+    rotation: number;
+    rotationOrigin: Position;
+    scale: number;
 }
 export declare class Group extends SlideObject<GroupProps> {
     constructor(objects: SlideObject<any>[], props?: Partial<GroupProps>, positioned?: boolean | null);

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

@@ -3,9 +3,11 @@ export interface ImageProps extends ObjectProps {
     href: string;
     width: number;
     height: number;
+    rounding: number;
 }
 export declare class Image extends SlideObject<ImageProps> {
     constructor(href: string, props?: Partial<ImageProps>);
     tagName(): string;
     attributes(): Partial<Record<string, string>>;
+    styles(): Partial<Record<string, string>>;
 }

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

@@ -5,6 +5,12 @@ export interface LineProps extends ObjectProps {
     end: Position;
     color: string;
     width: number;
+    linecap: "butt" | "round" | "square" | null;
+    /**
+     * Property describing whether the line has been fully drawn.
+     * If a line hasn't been drawn, it can be animated to draw in.
+     */
+    drawn: boolean;
 }
 export declare class Line extends SlideObject<LineProps> {
     constructor(props?: Partial<LineProps>);

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

@@ -1,4 +1,5 @@
 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 {
@@ -10,8 +11,10 @@ export interface TextProps extends ObjectProps {
     color: string;
     dominantBaseline: string;
     textDecoration: string;
+    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>);
@@ -26,4 +29,21 @@ export declare class Text extends SlideObject<TextProps> {
     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;
 }

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

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

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

@@ -1,14 +1,42 @@
 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;
+}
 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

@@ -1,10 +1,11 @@
 import { BoundingBox, Position } from "../util/position";
 import { Presentation } from "./presentation";
-import { AnimationProps, BuildFunction } from "../util/animation";
+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: "topleft" | "top" | "topright" | "left" | "center" | "right" | "bottomleft" | "bottom" | "bottomright";
+    anchor: Anchor;
 }
 export declare class SlideObject<Props extends ObjectProps> {
     /**
@@ -82,26 +83,34 @@ export declare class SlideObject<Props extends ObjectProps> {
      * Returns an animation to perform.
      * @param props Properties of object to change.
      * @param animationParams Animation behavior parameters.
-     * @returns Animation properties.
+     * @returns Animation build function.
      */
-    animation(props: Partial<Props>, animationParams?: anime.AnimeParams, delay?: number | null, animate?: boolean): AnimationProps;
+    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.
      */
-    update(props: Partial<Props>, delay?: number | null): AnimationProps;
+    set(props: Partial<Props>, delay?: number | null): BuildFunction;
     /**
-     * Performs an animation on the object.
+     * Animates a movement of the object.
      */
-    animate(props: Partial<Props>, animationParams?: anime.AnimeParams): BuildFunction;
+    move(position: Position, animationParams?: anime.AnimeParams): BuildFunction;
     /**
-     * Sets properties of the object.
+     * Animates fading an object into view.
      */
-    set(props: Partial<Props>): BuildFunction;
+    fadeIn(animationParams?: anime.AnimeParams): BuildFunction;
     /**
-     * Animates a movement of the object.
+     * Animates fading an object out of view.
      */
-    move(position: Position, animationParams?: anime.AnimeParams): BuildFunction;
+    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.
      */

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

@@ -38,6 +38,18 @@ export declare class Presentation {
      * 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.
      */
@@ -54,6 +66,20 @@ export declare class Presentation {
      * Presentation state.
      */
     presentationState: PresentationState;
+    /**
+     * Keyboard shortcut access to jump to particular slides.
+     */
+    shortcuts: Record<string, {
+        slideIndex: number;
+        animationIndex: number;
+    }>;
+    /**
+     * Current text command that the presenter has entered into presentation.
+     */
+    textCommand: {
+        active: boolean;
+        command: string;
+    };
     /**
      *
      * @param title Title of the presentation.
@@ -64,6 +90,8 @@ export declare class Presentation {
      * Sets up keyboard commands for the presentation.
      */
     setupKeyboardCommands(): void;
+    handleKeyboardEvent(event: KeyboardEvent): void;
+    resetTextCommand(): void;
     /**
      * Updates the size of the parent SVG element.
      *
@@ -75,7 +103,7 @@ export declare class Presentation {
      * Returns true if we were able to successfully advance.
      * @param includeIntermediateBuilds Determines whether to progress through builds.
      */
-    next(includeIntermediateBuilds: boolean): boolean;
+    next(includeIntermediateBuilds: boolean): Promise<boolean>;
     /**
      * Goes back to the previous slide.
      * @param includeIntermediateBuilds Determines whether to progress through builds.

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

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

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

@@ -1,11 +1,25 @@
-import { BuildFunction } from "../util/animation";
+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: BuildFunction[];
+    animations: BuildFunctionSequence;
     animationIndex: number;
     /**
      * Property for use during development/debugging only.
@@ -20,9 +34,10 @@ export declare class Slide {
      * otherwise it can be an animationIndex in [0, animations.length].
      */
     keyBuilds: "first" | "last" | "all" | "none" | number[] | null;
-    constructor(objects: SlideObject<any>[], animations?: BuildFunction[]);
+    props: SlideProps;
+    constructor(objects: SlideObject<any>[], animations?: BuildFunctionSequence, props?: Partial<SlideProps>);
     render(presentation: Presentation, animationIndex?: number): void;
-    nextAnimation(presentation: Presentation): boolean;
+    nextAnimation(): Promise<boolean>;
     /**
      * Returns the build indices that are meant to be exported.
      */

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

@@ -17,6 +17,12 @@ export interface AnimationProps {
      * 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.
@@ -26,6 +32,13 @@ export type Animator = (props: AnimationProps | AnimationProps[]) => Promise<voi
  * 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.
@@ -36,3 +49,12 @@ export declare const performAnimation: Animator;
  * @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/webpack.config.d.ts

@@ -1,9 +1,57 @@
 export let mode: string;
-export let entry: 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 filename: string;
     let path: string;
-    let library: string;
     let libraryTarget: string;
     let globalObject: string;
 }