feat(image): move size configuration of an image to the image style (#42

)

Fixes #41

CHANGELOG.md

@@ -11,6 +11,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - **image:** Set width and height of an image, closes [#36](https://github.com/connium/simple-odf/issues/36)
 - **image:** Set anchor type of an image, closes [#11](https://github.com/connium/simple-odf/issues/11)
 
+### Changed
+- **image:** Move size configuration of an image to the image style, closes [#41](https://github.com/connium/simple-odf/issues/41)
+
 ## [0.4.0] (2018-05-19)
 ### Added
 - **chore:** Add code coverage analysis with Codecov by @oncletom, closes [#17](https://github.com/connium/simple-odf/issues/17)

README.md

@@ -23,7 +23,8 @@ const simpleOdf = require("simple-odf");
 const document = new simpleOdf.TextDocument();
 
 const image = document.addParagraph().addImage("/home/homer/myself.png");
-image.setSize(29.4, 36.5);
+image.getStyle().setAnchorType(simpleOdf.AnchorType.AsChar);
+image.getStyle().setSize(29.4, 36.5);
 
 document.addHeading("Welcome to simple-odf");
 

src/draw/Image.ts

@@ -1,11 +1,9 @@
 import { readFileSync } from "fs";
-import { OdfAttributeName } from "../OdfAttributeName";
 import { OdfElement } from "../OdfElement";
 import { OdfElementName } from "../OdfElementName";
 import { IImageStyle } from "../style/IImageStyle";
 import { ImageStyle } from "../style/ImageStyle";
 
-const MINIMAL_SIZE = 1;
 const ENCODING = "base64";
 
 /**
@@ -15,8 +13,6 @@ const ENCODING = "base64";
  */
 export class Image extends OdfElement {
   private style: IImageStyle;
-  private height: number | undefined;
-  private width: number | undefined;
 
   /**
    * Creates an image
@@ -30,58 +26,6 @@ export class Image extends OdfElement {
     this.style = new ImageStyle();
   }
 
-  /**
-   * Sets the target height of the image.
-   *
-   * @param {number} height The target height of the image in millimeter
-   * @since 0.5.0
-   */
-  public setHeight(height: number): void {
-    this.height = Math.max(height, MINIMAL_SIZE);
-  }
-
-  /**
-   * Returns the target height of the image or `undefined` if no height was set.
-   *
-   * @returns {number | undefined} The target height of the image in millimeter or `undefined` if no height was set
-   * @since 0.5.0
-   */
-  public getHeight(): number | undefined {
-    return this.height;
-  }
-
-  /**
-   * Sets the target width of the image.
-   *
-   * @param {number} width The target width of the image in millimeter
-   * @since 0.5.0
-   */
-  public setWidth(width: number): void {
-    this.width = Math.max(width, MINIMAL_SIZE);
-  }
-
-  /**
-   * Returns the target width of the image or `undefined` if no width was set.
-   *
-   * @returns {number | undefined} The target width of the image in millimeter or `undefined` if no width was set
-   * @since 0.5.0
-   */
-  public getWidth(): number | undefined {
-    return this.width;
-  }
-
-  /**
-   * Sets the target size of the image.
-   *
-   * @param {number} width The target width of the image in millimeter
-   * @param {number} height The target height of the image in millimeter
-   * @since 0.5.0
-   */
-  public setSize(width: number, height: number): void {
-    this.setWidth(width);
-    this.setHeight(height);
-  }
-
   /**
    * Sets the new style of this image.
    *
@@ -111,27 +55,11 @@ export class Image extends OdfElement {
 
     this.embedImage(document, frameElement);
 
-    this.style.toXml(document, frameElement);
-    this.setFrameAttributes(frameElement);
+    this.style.toXml(frameElement);
 
     super.toXml(document, frameElement);
   }
 
-  /**
-   * Sets the attributes for the image frame.
-   *
-   * @param {Element} frameElement The element which will take the attribute
-   */
-  private setFrameAttributes(frameElement: Element): void {
-    if (this.width !== undefined) {
-      frameElement.setAttribute(OdfAttributeName.SvgWidth, + this.width + "mm");
-    }
-
-    if (this.height !== undefined) {
-      frameElement.setAttribute(OdfAttributeName.SvgHeight, + this.height + "mm");
-    }
-  }
-
   /**
    * Creates the image element and embeds the denoted image base64 encoded binary data.
    *

src/index.ts

@@ -4,6 +4,7 @@ export { TextDocument } from "./TextDocument";
 export { Image } from "./draw/Image";
 
 // style
+export { AnchorType } from "./style/AnchorType";
 export { Color } from "./style/Color";
 export { FontPitch } from "./style/FontPitch";
 export { HorizontalAlignment } from "./style/HorizontalAlignment";

src/style/IImageStyle.ts

@@ -22,12 +22,52 @@ export interface IImageStyle {
    */
   getAnchorType(): AnchorType;
 
+  /**
+   * Sets the target height of the image.
+   *
+   * @param {number} height The target height of the image in millimeter
+   * @since 0.5.0
+   */
+  setHeight(height: number): void;
+
+  /**
+   * Returns the target height of the image or `undefined` if no height was set.
+   *
+   * @returns {number | undefined} The target height of the image in millimeter or `undefined` if no height was set
+   * @since 0.5.0
+   */
+  getHeight(): number | undefined;
+
+  /**
+   * Sets the target width of the image.
+   *
+   * @param {number} width The target width of the image in millimeter
+   * @since 0.5.0
+   */
+  setWidth(width: number): void;
+
+  /**
+   * Returns the target width of the image or `undefined` if no width was set.
+   *
+   * @returns {number | undefined} The target width of the image in millimeter or `undefined` if no width was set
+   * @since 0.5.0
+   */
+  getWidth(): number | undefined;
+
+  /**
+   * Sets the target size of the image.
+   *
+   * @param {number} width The target width of the image in millimeter
+   * @param {number} height The target height of the image in millimeter
+   * @since 0.5.0
+   */
+  setSize(width: number, height: number): void;
+
   /**
    * Transforms the image style into Open Document Format.
    *
-   * @param {Document} document The XML document
    * @param {Element} parent The parent node in the DOM (`draw:frame`)
    * @since 0.5.0
    */
-  toXml(document: Document, parent: Element): void;
+  toXml(parent: Element): void;
 }

src/style/ImageStyle.ts

@@ -3,6 +3,7 @@ import { AnchorType } from "./AnchorType";
 import { IImageStyle } from "./IImageStyle";
 
 const DEFAULT_ANCHOR_TYPE = AnchorType.Paragraph;
+const MINIMAL_SIZE = 1;
 
 /**
  * This class represents the style of an image
@@ -11,6 +12,8 @@ const DEFAULT_ANCHOR_TYPE = AnchorType.Paragraph;
  */
 export class ImageStyle implements IImageStyle {
   private anchorType: AnchorType;
+  private height: number | undefined;
+  private width: number | undefined;
 
   /**
    * Constructor.
@@ -29,8 +32,60 @@ export class ImageStyle implements IImageStyle {
     return this.anchorType;
   }
 
+  /**
+   * Sets the target height of the image.
+   *
+   * @param {number} height The target height of the image in millimeter
+   * @since 0.5.0
+   */
+  public setHeight(height: number): void {
+    this.height = Math.max(height, MINIMAL_SIZE);
+  }
+
+  /**
+   * Returns the target height of the image or `undefined` if no height was set.
+   *
+   * @returns {number | undefined} The target height of the image in millimeter or `undefined` if no height was set
+   * @since 0.5.0
+   */
+  public getHeight(): number | undefined {
+    return this.height;
+  }
+
+  /**
+   * Sets the target width of the image.
+   *
+   * @param {number} width The target width of the image in millimeter
+   * @since 0.5.0
+   */
+  public setWidth(width: number): void {
+    this.width = Math.max(width, MINIMAL_SIZE);
+  }
+
+  /**
+   * Returns the target width of the image or `undefined` if no width was set.
+   *
+   * @returns {number | undefined} The target width of the image in millimeter or `undefined` if no width was set
+   * @since 0.5.0
+   */
+  public getWidth(): number | undefined {
+    return this.width;
+  }
+
+  /**
+   * Sets the target size of the image.
+   *
+   * @param {number} width The target width of the image in millimeter
+   * @param {number} height The target height of the image in millimeter
+   * @since 0.5.0
+   */
+  public setSize(width: number, height: number): void {
+    this.setWidth(width);
+    this.setHeight(height);
+  }
+
   /** @inheritDoc */
-  public toXml(document: Document, parent: Element): void {
+  public toXml(parent: Element): void {
     this.setFrameAttributes(parent);
   }
 
@@ -41,5 +96,13 @@ export class ImageStyle implements IImageStyle {
    */
   private setFrameAttributes(frameElement: Element): void {
     frameElement.setAttribute(OdfAttributeName.TextAnchorType, this.anchorType);
+
+    if (this.width !== undefined) {
+      frameElement.setAttribute(OdfAttributeName.SvgWidth, + this.width + "mm");
+    }
+
+    if (this.height !== undefined) {
+      frameElement.setAttribute(OdfAttributeName.SvgHeight, + this.height + "mm");
+    }
   }
 }

test/draw/Image.spec.ts

@@ -11,66 +11,6 @@ describe(Image.name, () => {
     document = new TextDocument();
   });
 
-  describe("#setHeight", () => {
-    it("set a minimum height", () => {
-      const image = new Image("somePath");
-      image.setHeight(-23);
-
-      expect(image.getHeight()).toBe(1);
-    });
-  });
-
-  describe("#getHeight", () => {
-    it("return `undefined` as default", () => {
-      const image = new Image("somePath");
-
-      expect(image.getHeight()).toBeUndefined();
-    });
-
-    it("return the current height", () => {
-      const image = new Image("somePath");
-
-      image.setHeight(23);
-
-      expect(image.getHeight()).toBe(23);
-    });
-  });
-
-  describe("#setWidth", () => {
-    it("set a minimum width", () => {
-      const image = new Image("somePath");
-      image.setWidth(-42);
-
-      expect(image.getWidth()).toBe(1);
-    });
-  });
-
-  describe("#getWidth", () => {
-    it("return `undefined` as default", () => {
-      const image = new Image("somePath");
-
-      expect(image.getWidth()).toBeUndefined();
-    });
-
-    it("return the current width", () => {
-      const image = new Image("somePath");
-
-      image.setWidth(42);
-
-      expect(image.getWidth()).toBe(42);
-    });
-  });
-
-  describe("#setSize", () => {
-    it("set width and height", () => {
-      const image = new Image("somePath");
-      image.setSize(42, 23);
-
-      expect(image.getWidth()).toBe(42);
-      expect(image.getHeight()).toBe(23);
-    });
-  });
-
   describe("#setStyle", () => {
     it("set text anchor attribute on frame", () => {
       document.addParagraph().addImage(join(__dirname, "..", "data", "ODF.png"));
@@ -121,17 +61,5 @@ describe(Image.name, () => {
         + "</draw:frame>");
       expect(document.toString()).toMatch(regex);
     });
-
-    it("set the height", () => {
-      image.setHeight(23);
-
-      expect(document.toString()).toMatch(/<draw:frame text:anchor-type="paragraph" svg:height="23mm">/);
-    });
-
-    it("set the width", () => {
-      image.setWidth(42);
-
-      expect(document.toString()).toMatch(/<draw:frame text:anchor-type="paragraph" svg:width="42mm">/);
-    });
   });
 });

test/integration.spec.ts

@@ -36,7 +36,7 @@ xdescribe("integration", () => {
 
     const image = paragraph.addImage(join(__dirname, "data", "ODF.png"));
     image.getStyle().setAnchorType(AnchorType.AsChar);
-    image.setSize(29.4, 36.5);
+    image.getStyle().setSize(29.4, 36.5);
   });
 
   it("add heading", () => {