presenter 0.1.1 → 0.2.1

package/examples/simple/package.json

@@ -1,18 +0,0 @@
-{
-  "name": "simple-presentation",
-  "version": "1.0.0",
-  "description": "Simple presentation in Presenter.js",
-  "main": "dist/main.js",
-  "scripts": {
-    "build": "NODE_ENV=production webpack",
-    "watch": "NODE_ENV=development webpack --watch",
-    "serve": "NODE_ENV=development webpack serve --open"
-  },
-  "devDependencies": {
-    "ts-loader": "^9.5.1",
-    "typescript": "^5.7.2",
-    "webpack": "^5.96.1",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.1.0"
-  }
-}

package/examples/simple/src/index.ts

@@ -1,20 +0,0 @@
-import { Presentation, Slide, Text } from "presenter";
-
-document.addEventListener("DOMContentLoaded", () => {
-  const slides = [
-    new Slide([
-      new Text({
-        content: "Hello, there!",
-        position: { x: 2000, y: 1000 },
-        fontSize: 100,
-      }),
-    ]),
-  ];
-  const presentation = new Presentation(
-    "My Presentation",
-    slides,
-    document.body,
-  );
-
-  presentation.present();
-});

package/examples/simple/tsconfig.json

@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "moduleResolution": "node",
-    "outDir": "./dist/",
-    "noImplicitAny": true,
-    "module": "es6",
-    "target": "es5",
-    "allowJs": true
-  }
-}

package/examples/simple/webpack.config.js

@@ -1,25 +0,0 @@
-const path = require("path");
-
-module.exports = {
-  mode: process.env.NODE_ENV || "development",
-  entry: "./src/index.ts",
-  output: {
-    filename: "main.js",
-    path: path.resolve(__dirname, "dist"),
-  },
-  devServer: {
-    static: "./dist",
-  },
-  resolve: {
-    extensions: [".ts", ".js"],
-  },
-  module: {
-    rules: [
-      {
-        test: /\.ts$/,
-        use: "ts-loader",
-        exclude: /node_modules/,
-      },
-    ],
-  },
-};

package/src/index.ts

@@ -1,16 +0,0 @@
-// Presentation
-export * from "./presentation/presentation";
-export * from "./presentation/slide";
-export * from "./presentation/theme";
-export * from "./presentation/object";
-
-// Objects
-export * from "./objects/image";
-export * from "./objects/text";
-export * from "./objects/rectangle";
-
-// Themes
-export * from "./themes/index";
-
-// Util
-export * from "./util/position";

package/src/objects/image.ts

@@ -1,55 +0,0 @@
-import { ObjectProps, SlideObject } from "../presentation/object";
-import { Presentation } from "../presentation/presentation";
-import { BoundingBox, Position } from "../util/position";
-
-interface ImageProps extends ObjectProps {
-  href: string;
-  width: number;
-  height: number;
-}
-
-export class Image extends SlideObject {
-  props: ImageProps;
-
-  constructor(props: Partial<ImageProps> = {}) {
-    if (!props.href) {
-      throw new Error("Image requires a href");
-    }
-    super({
-      width: 100,
-      height: 100,
-      ...props,
-    });
-  }
-
-  generate(presentation: Presentation): SVGElement {
-    const { width, height, href } = this.props;
-    const element = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "image",
-    );
-
-    // Set attributes
-    element.setAttribute("href", href);
-    element.setAttribute("width", width.toString());
-    element.setAttribute("height", height.toString());
-
-    // Position the element.
-    this.setPositionAttributes(
-      presentation,
-      new BoundingBox(this.props.position, width, height),
-      element,
-    );
-
-    return element;
-  }
-
-  animateMove(
-    position: Position,
-    params: anime.AnimeParams,
-    presentation: Presentation,
-  ) {
-    const bbox = new BoundingBox(position, this.props.width, this.props.height);
-    this.animate({ bbox, ...params }, presentation);
-  }
-}

package/src/objects/rectangle.ts

@@ -1,53 +0,0 @@
-import { ObjectProps, SlideObject } from "../presentation/object";
-import { Presentation } from "../presentation/presentation";
-import { BoundingBox, Position } from "../util/position";
-
-interface RectangleProps extends ObjectProps {
-  color: string;
-  width: number;
-  height: number;
-}
-
-export class Rectangle extends SlideObject {
-  props: RectangleProps;
-
-  constructor(props: Partial<RectangleProps> = {}) {
-    super({
-      color: "#000000",
-      width: 100,
-      height: 100,
-      ...props,
-    });
-  }
-
-  generate(presentation: Presentation): SVGElement {
-    const { width, height, color } = this.props;
-    const element = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "rect",
-    );
-
-    // Set attributes
-    element.setAttribute("fill", color);
-    element.setAttribute("width", width.toString());
-    element.setAttribute("height", height.toString());
-
-    // Position the element.
-    this.setPositionAttributes(
-      presentation,
-      new BoundingBox(this.props.position, width, height),
-      element,
-    );
-
-    return element;
-  }
-
-  animateMove(
-    position: Position,
-    params: anime.AnimeParams,
-    presentation: Presentation,
-  ) {
-    const bbox = new BoundingBox(position, this.props.width, this.props.height);
-    this.animate({ bbox, ...params }, presentation);
-  }
-}

package/src/objects/text.ts

@@ -1,79 +0,0 @@
-import { ObjectProps, SlideObject } from "../presentation/object";
-import { Presentation } from "../presentation/presentation";
-import { BoundingBox, Position } from "../util/position";
-
-interface TextProps extends ObjectProps {
-  content: string;
-  fontStyle: string; // "normal" | "italic" | "bold"
-  fontSize: number;
-  fontFamily: string;
-  color: string;
-}
-
-export class Text extends SlideObject {
-  props: TextProps;
-
-  constructor(props: Partial<TextProps> = {}) {
-    super({
-      color: "#000000",
-      content: "",
-      fontSize: 40,
-      fontStyle: "normal",
-      fontFamily: "Arial",
-      ...props,
-    });
-  }
-
-  generate(presentation: Presentation): SVGElement {
-    const element = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "text",
-    );
-    element.innerHTML = this.props.content;
-    element.style.font = `${this.props.fontStyle} ${this.props.fontSize}px ${this.props.fontFamily}`;
-    element.style.fill = this.props.color;
-
-    // Position the element. Text coordinates specify the lower-left corner of text baseline.
-    this.setPositionAttributes(
-      presentation,
-      this.computeRenderedBoundingBox(element, presentation, true),
-      element,
-    );
-
-    return element;
-  }
-
-  computePositionAttributes(
-    presentation: Presentation,
-    bbox: BoundingBox,
-  ): any {
-    const { x, y } = this.positionInPresentation(
-      presentation,
-      bbox.origin.x,
-      bbox.origin.y,
-    );
-    const anchoredBox = this.anchorBoundingBox(
-      new BoundingBox({ x, y }, bbox.width, bbox.height),
-    );
-    return { x: anchoredBox.origin.x, y: anchoredBox.origin.y + bbox.height };
-  }
-
-  animateMove(
-    position: Position,
-    params: anime.AnimeParams,
-    presentation: Presentation,
-  ) {
-    const renderedBBox = this.computeRenderedBoundingBox(
-      this.element() as SVGGraphicsElement,
-      presentation,
-      true,
-    );
-    const bbox = new BoundingBox(
-      position,
-      renderedBBox.width,
-      renderedBBox.height,
-    );
-    console.log(bbox);
-    this.animate({ bbox, ...params }, presentation);
-  }
-}

package/src/presentation/object.ts

@@ -1,190 +0,0 @@
-import anime from "animejs/lib/anime.es.js";
-
-import { BoundingBox, Position } from "../util/position";
-import { Presentation } from "./presentation";
-import { Theme } from "./theme";
-
-export interface ObjectProps {
-  position: Position | null;
-  verticalAnchor: "center" | "top" | "bottom";
-  horizontalAnchor: "center" | "start" | "end";
-}
-
-export class SlideObject {
-  props: ObjectProps;
-
-  _element: SVGElement | null;
-
-  constructor(props: Partial<ObjectProps>) {
-    this.props = {
-      position: null,
-      verticalAnchor: "top",
-      horizontalAnchor: "start",
-      ...props,
-    };
-    this._element = null;
-  }
-
-  /* Generate and return the element. */
-  generate(presentation: Presentation): SVGElement {
-    return null;
-  }
-
-  element(): SVGElement {
-    if (this._element === null) {
-      throw new Error("Element not yet generated");
-    }
-    return this._element;
-  }
-
-  /**
-   * Performs an animation on the object's element.
-   */
-  animate(params: anime.AnimeParams, presentation: Presentation | null = null) {
-    const { bbox, ...remainingParams } = params;
-
-    const processedParams = {
-      ...remainingParams,
-      // Position
-      ...(bbox !== undefined
-        ? this.computePositionAttributes(presentation, bbox)
-        : {}),
-      // Default cubic bezier easing
-      ...(params.easing === "cubic"
-        ? { easing: "cubicBezier(0.42, 0, 0.58, 1)" }
-        : {}),
-    };
-
-    anime({
-      targets: this.element(),
-      duration: 500,
-      easing: "linear",
-      ...processedParams,
-    });
-  }
-
-  /**
-   * Returns an animation callback function that performs the animation.
-   */
-  animation(params: anime.AnimeParams): () => void {
-    return () => this.animate(params);
-  }
-
-  /**
-   * Performs a movement animation.
-   * Meant to be overriden for object-specific movement.
-   */
-  animateMove(
-    position: Position,
-    params: anime.AnimeParams,
-    presentation: Presentation,
-  ) {
-    this.animate({ x: position.x, y: position.y, ...params }, presentation);
-  }
-
-  /**
-   * Allow for x and y values to be interpreted as percentages of total width/height.
-   */
-  positionInPresentation(
-    presentation: Presentation,
-    x: number,
-    y: number,
-  ): Position {
-    const adjustedX = x <= 1 ? x * presentation.boundingBox.width : x;
-    const adjustedY = y <= 1 ? y * presentation.boundingBox.height : y;
-    return { x: adjustedX, y: adjustedY };
-  }
-
-  /**
-   * Adjusts a bounding box to be anchored given the object's vertical and horizontal anchor settings.
-   * @param bbox
-   */
-  anchorBoundingBox(bbox: BoundingBox): BoundingBox {
-    const { verticalAnchor, horizontalAnchor } = this.props;
-    const y = (() => {
-      switch (verticalAnchor) {
-        case "top":
-          return bbox.origin.y;
-        case "center":
-          return bbox.origin.y - bbox.height / 2;
-        case "bottom":
-          return bbox.origin.y - bbox.height;
-      }
-    })();
-
-    const x = (() => {
-      switch (horizontalAnchor) {
-        case "start":
-          return bbox.origin.x;
-        case "center":
-          return bbox.origin.x - bbox.width / 2;
-        case "end":
-          return bbox.origin.x - bbox.width;
-      }
-    })();
-
-    return new BoundingBox({ x, y }, bbox.width, bbox.height);
-  }
-
-  /**
-   * Computes a bounding box for a given element given its rendered size and defined position.
-   * @param element
-   * @param presentation
-   * @returns
-   */
-  computeRenderedBoundingBox(
-    element: SVGGraphicsElement,
-    presentation: Presentation,
-    adjustY: boolean = false,
-  ): BoundingBox {
-    const renderedBoundingBox =
-      presentation.computeRenderedBoundingBox(element);
-
-    const box = new BoundingBox(
-      {
-        x: this.props.position.x,
-        y: this.props.position.y,
-      },
-      renderedBoundingBox.width,
-      renderedBoundingBox.height,
-    );
-
-    return box;
-  }
-
-  /**
-   * Given a particular initial bounding box, returns the DOM attributes that should be set for the element.
-   * Can be overriden by other elements.
-   */
-  computePositionAttributes(
-    presentation: Presentation,
-    bbox: BoundingBox,
-  ): any {
-    if (presentation === null) {
-      throw new Error(
-        "Cannot compute object position attributes without presentation",
-      );
-    }
-    const { x, y } = this.positionInPresentation(
-      presentation,
-      bbox.origin.x,
-      bbox.origin.y,
-    );
-    const anchoredBox = this.anchorBoundingBox(
-      new BoundingBox({ x, y }, bbox.width, bbox.height),
-    );
-    return { x: anchoredBox.origin.x, y: anchoredBox.origin.y };
-  }
-
-  setPositionAttributes(
-    presentation: Presentation,
-    bbox: BoundingBox,
-    element: SVGElement,
-  ) {
-    for (const [attribute, value] of Object.entries(
-      this.computePositionAttributes(presentation, bbox),
-    )) {
-      element.setAttribute(attribute, value.toString());
-    }
-  }
-}