presenter 0.1.1 → 0.2.2

package/src/presentation/presentation.ts

@@ -1,299 +0,0 @@
-import DefaultTheme from "../themes/default";
-import { BoundingBox } from "../util/position";
-import { Slide } from "./slide";
-import { Theme } from "./theme";
-
-export interface PresentationOptions {
-  /**
-   * Width of the presentation.
-   */
-  width: number;
-
-  /**
-   * Height of the presentation.
-   */
-  height: number;
-
-  /**
-   * Presentation theme to use.
-   */
-  theme: Theme;
-}
-
-interface PresentationState {
-  currentSlide: number;
-}
-
-export 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;
-
-  /**
-   * Presentation settings.
-   */
-  options: PresentationOptions;
-
-  /**
-   * Bounds of presentation.
-   */
-  boundingBox: BoundingBox;
-
-  /**
-   * Presentation slides.
-   */
-  slides: Slide[];
-
-  /**
-   * Presentation state.
-   */
-  presentationState: PresentationState;
-
-  /**
-   *
-   * @param title Title of the presentation.
-   */
-  constructor(
-    title: string,
-    slides: Slide[],
-    element: HTMLElement,
-    options: Partial<PresentationOptions> = {},
-  ) {
-    if (this.element === null) {
-      throw new Error("Presentation cannot be mounted to null element.");
-    }
-
-    this.title = title;
-    this.element = element;
-    this.slides = slides;
-    this.options = {
-      width: 3840,
-      height: 2160,
-      theme: DefaultTheme,
-      ...options,
-    };
-    this.presentationState = {
-      currentSlide: 0,
-    };
-    this.boundingBox = new BoundingBox(
-      { x: 0, y: 0 },
-      this.options.width,
-      this.options.height,
-    );
-
-    this.container = null;
-    this.svg = null;
-    this.shadow = null;
-  }
-
-  present() {
-    // Create container element.
-    this.container = document.createElement("div");
-    this.container.style.width = "100%";
-    this.container.style.aspectRatio = `${this.options.width} / ${this.options.height}`;
-
-    // Set container to be vertically centered.
-    this.container.style.position = "relative";
-    this.container.style.top = "50%";
-    this.container.style.transform = "translateY(-50%)";
-
-    // Set container to be horizontally centered.
-    this.container.style.marginLeft = "auto";
-    this.container.style.marginRight = "auto";
-
-    // Create SVG element.
-    this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-    this.svg.style.backgroundColor = this.options.theme.backgroundColor;
-    this.svg.style.cursor = "none";
-
-    // Set up keyboard commands.
-    const eventTarget = this.isFullBodyPresentation()
-      ? document.body
-      : this.svg;
-    (eventTarget as HTMLElement).addEventListener("keyup", (event) => {
-      if (event.key === "ArrowRight" || event.key === " ") {
-        this.next();
-      } else if (event.key === "ArrowLeft") {
-        this.previous();
-      }
-    });
-
-    // Show cursor when the cursor moves.
-    eventTarget.addEventListener("mousemove", (event) => {
-      this.svg.style.cursor = "auto";
-    });
-
-    // Create shadow element that's hidden from view.
-    this.shadow = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-    this.shadow.style.visibility = "hidden";
-
-    [this.svg, this.shadow].forEach((svg) => {
-      svg.setAttribute("width", "100%");
-      svg.setAttribute(
-        "viewBox",
-        `0 0 ${this.options.width} ${this.options.height}`,
-      );
-      svg.style.position = "absolute";
-    });
-
-    if (this.isFullBodyPresentation()) {
-      // Set document title.
-      document.title = this.title;
-
-      // Set root element styles.
-      document.documentElement.style.height = "100%";
-
-      // Set body styles.
-      document.body.style.height = "100%";
-      document.body.style.width = "100%";
-      document.body.style.margin = "0";
-      document.body.style.backgroundColor = "#000000";
-
-      // Update SVG size when aspect ratio changes.
-      window
-        .matchMedia(
-          `(min-aspect-ratio: ${this.options.width} / ${this.options.height})`,
-        )
-        .addEventListener("change", this.updateSVGContainerSize.bind(this));
-
-      this.updateSVGContainerSize();
-    }
-
-    this.container.appendChild(this.shadow);
-    this.container.appendChild(this.svg);
-    this.element.appendChild(this.container);
-
-    // Set up presentation state
-    this.presentationState.currentSlide = 0;
-
-    // Render slide
-    const currentSlide = this.slides[this.presentationState.currentSlide];
-    if (currentSlide === undefined) {
-      return;
-    }
-    currentSlide.render(this);
-  }
-
-  /**
-   * Updates the size of the parent SVG element.
-   *
-   * The size of the parent SVG element needs to be updated.
-   */
-  updateSVGContainerSize() {
-    if (
-      window.innerHeight / window.innerWidth >
-      this.options.height / this.options.width
-    ) {
-      this.container.style.width = "100%";
-      this.container.style.height = "auto";
-    } else {
-      this.container.style.width = "auto";
-      this.container.style.height = "100%";
-    }
-  }
-
-  /**
-   * Advances to next animation in slide, or next slide if there is no next animation.
-   * Returns true if we were able to successfully advance.
-   */
-  next(): boolean {
-    this.svg.style.cursor = "none";
-    const currentSlide = this.slides[this.presentationState.currentSlide];
-    if (currentSlide === undefined) {
-      return;
-    }
-
-    if (!currentSlide.nextAnimation(this)) {
-      this.presentationState.currentSlide++;
-      const nextSlide = this.slides[this.presentationState.currentSlide];
-      if (nextSlide === undefined) {
-        return;
-      }
-      nextSlide.render(this);
-    }
-  }
-
-  /**
-   * Goes back to the previous slide.
-   */
-  previous(): boolean {
-    this.svg.style.cursor = "none";
-
-    // If we're past the end of the presentation, go to the last slide.
-    const currentSlide = this.slides[this.presentationState.currentSlide];
-    if (currentSlide === undefined) {
-      this.presentationState.currentSlide = this.slides.length - 1;
-      const lastSlide = this.slides[this.presentationState.currentSlide];
-      if (lastSlide === undefined) {
-        return;
-      }
-      lastSlide.render(this);
-      return;
-    }
-
-    // If we're in the middle of a build, go back to the start of the build.
-    if (currentSlide.animationIndex > 0) {
-      currentSlide.animationIndex = 0;
-      currentSlide.render(this);
-      return;
-    }
-
-    // Otherwise, go back to the previous slide.
-    if (this.presentationState.currentSlide === 0) {
-      return;
-    }
-    this.presentationState.currentSlide--;
-    const previousSlide = this.slides[this.presentationState.currentSlide];
-    if (previousSlide === undefined) {
-      return;
-    }
-    previousSlide.render(this);
-  }
-
-  /**
-   * Checks if the presentation takes the entire document body.
-   * @returns True if the presentation takes the entire document body.
-   */
-  isFullBodyPresentation(): boolean {
-    return this.element === document.body;
-  }
-
-  theme(): Theme {
-    return this.options.theme;
-  }
-
-  /**
-   * Computes the current size of an element in the DOM.
-   * @returns BoundingBox
-   */
-  computeRenderedBoundingBox(element: SVGGraphicsElement): BoundingBox {
-    const clone = element.cloneNode(true) as SVGGraphicsElement;
-
-    this.shadow.appendChild(clone);
-    const boundingBox = BoundingBox.fromElement(clone);
-    this.shadow.removeChild(clone);
-
-    return boundingBox;
-  }
-}

package/src/presentation/slide.ts

@@ -1,52 +0,0 @@
-import { SlideObject } from "./object";
-import { Presentation } from "./presentation";
-
-export interface SlideProps {}
-
-export class Slide {
-  objects: SlideObject[];
-
-  animations: ((presentation: Presentation) => void)[];
-
-  animationIndex: number;
-
-  constructor(
-    objects: SlideObject[],
-    animations: ((presentation: Presentation) => void)[] = [],
-  ) {
-    this.objects = objects.filter((object) => object !== null);
-    this.animations = animations;
-    this.animationIndex = 0;
-  }
-
-  render(presentation: Presentation) {
-    // Clear SVG element
-    presentation.svg.innerHTML = "";
-    this.animationIndex = 0;
-
-    // Render objects
-    this.objects.forEach((object) => {
-      object._element = object.generate(presentation);
-      presentation.svg.appendChild(object.element());
-    });
-  }
-
-  // Runs next animation and returns true.
-  // If no more animations left to run, returns false.
-  nextAnimation(presentation: Presentation): boolean {
-    const animation = this.animations[this.animationIndex];
-    if (animation) {
-      animation(presentation);
-      this.animationIndex++;
-      return true;
-    }
-    return false;
-  }
-
-  /**
-   * Sleep for a specified number of milliseconds in an animation.
-   */
-  async sleep(ms: number) {
-    return new Promise((resolve) => setTimeout(resolve, ms));
-  }
-}

package/src/presentation/theme.ts

@@ -1,3 +0,0 @@
-export interface Theme {
-  backgroundColor: string;
-}

package/src/themes/default.ts

@@ -1,7 +0,0 @@
-import { Theme } from "../presentation/theme";
-
-const DefaultTheme: Theme = {
-  backgroundColor: "#ffffff",
-};
-
-export default DefaultTheme;

package/src/themes/index.ts

@@ -1 +0,0 @@
-export { default as DefaultTheme } from "./default";

package/src/util/position.ts

@@ -1,21 +0,0 @@
-export interface Position {
-  x: number;
-  y: number;
-}
-
-export class BoundingBox {
-  origin: Position;
-  width: number;
-  height: number;
-
-  constructor(origin: Position, width: number, height: number) {
-    this.origin = origin;
-    this.width = width;
-    this.height = height;
-  }
-
-  static fromElement(element: SVGGraphicsElement): BoundingBox {
-    const rect = element.getBBox();
-    return new BoundingBox({ x: rect.x, y: rect.y }, rect.width, rect.height);
-  }
-}

package/tsconfig.json

@@ -1,12 +0,0 @@
-{
-  "compilerOptions": {
-    "declaration": true,
-    "outDir": "./dist/",
-    "noImplicitAny": true,
-    "module": "es6",
-    "moduleResolution": "node",
-    "target": "es5",
-    "allowJs": true
-  },
-  "exclude": ["./examples"]
-}

package/webpack.config.js

@@ -1,32 +0,0 @@
-const path = require("path");
-
-module.exports = {
-  mode: process.env.NODE_ENV || "development",
-  entry: "./src/index.ts",
-  output: {
-    filename: "presenter.js",
-    path: path.resolve(__dirname, "dist"),
-    library: "Presenter",
-    libraryTarget: "umd",
-    globalObject: "this",
-  },
-  watchOptions: {
-    ignored: [
-      "**/node_modules",
-      path.resolve(__dirname, "dist"),
-      path.resolve(__dirname, "examples"),
-    ],
-  },
-  resolve: {
-    extensions: [".ts", ".js"],
-  },
-  module: {
-    rules: [
-      {
-        test: /\.ts$/,
-        use: "ts-loader",
-        exclude: /node_modules/,
-      },
-    ],
-  },
-};