feat(paragraph): set width and height of an image (#37)

Fixes #36

CHANGELOG.md

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 
 ## [Unreleased] (2018-??-??)
+### Added
+- **paragraph:** Set width and height of an image, closes [#36](https://github.com/connium/simple-odf/issues/36)
 
 ## [0.4.0] (2018-05-19)
 ### Added

README.md

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

src/OdfAttributeName.ts

@@ -16,6 +16,9 @@ export enum OdfAttributeName {
   StylePosition = "style:position",
   StyleType = "style:type",
 
+  SvgHeight = "svg:height",
+  SvgWidth = "svg:width",
+
   TextAnchorType = "text:anchor-type",
   TextOutlineLevel = "text:outline-level",
   TextStyleName = "text:style-name",

src/draw/Image.ts

@@ -3,6 +3,7 @@ import { OdfAttributeName } from "../OdfAttributeName";
 import { OdfElement } from "../OdfElement";
 import { OdfElementName } from "../OdfElementName";
 
+const MINIMAL_SIZE = 1;
 const DEFAULT_ANCHOR_TYPE = "paragraph";
 const ENCODING = "base64";
 
@@ -12,6 +13,9 @@ const ENCODING = "base64";
  * @since 0.3.0
  */
 export class Image extends OdfElement {
+  private height: number | undefined;
+  private width: number | undefined;
+
   /**
    * Creates an image
    *
@@ -22,16 +26,98 @@ export class Image extends OdfElement {
     super();
   }
 
+  /**
+   * 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 */
   protected toXml(document: Document, parent: Element): void {
     (document.firstChild as Element).setAttribute("xmlns:draw", "urn:oasis:names:tc:opendocument:xmlns:drawing:1.0");
 
-    const frame = document.createElement(OdfElementName.DrawFrame);
-    parent.appendChild(frame);
-    frame.setAttribute(OdfAttributeName.TextAnchorType, DEFAULT_ANCHOR_TYPE);
+    const frameElement = document.createElement(OdfElementName.DrawFrame);
+    parent.appendChild(frameElement);
+
+    this.setFrameAttributes(frameElement);
+
+    this.embedImage(document, 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 {
+    frameElement.setAttribute(OdfAttributeName.TextAnchorType, DEFAULT_ANCHOR_TYPE);
+
+    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.
+   *
+   * @param {Document} document The XML document
+   * @param {Element} frameElement The parent node in the DOM (`draw:frame`)
+   */
+  private embedImage(document: Document, frameElement: Element): void {
     const image = document.createElement(OdfElementName.DrawImage);
-    frame.appendChild(image);
+    frameElement.appendChild(image);
 
     const binaryData = document.createElement(OdfElementName.OfficeBinaryData);
     image.appendChild(binaryData);
@@ -40,7 +126,5 @@ export class Image extends OdfElement {
     const base64Image = rawImage.toString(ENCODING);
     const textNode = document.createTextNode(base64Image);
     binaryData.appendChild(textNode);
-
-    super.toXml(document, frame);
   }
 }

test/draw/Image.spec.ts

@@ -1,4 +1,5 @@
 import { join } from "path";
+import { Image } from "../../src/draw/Image";
 import { TextDocument } from "../../src/TextDocument";
 
 describe(Image.name, () => {
@@ -8,9 +9,71 @@ describe(Image.name, () => {
     document = new TextDocument();
   });
 
-  describe("#addImage", () => {
+  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("#toXml", () => {
+    let image: Image;
+
     beforeEach(() => {
-      document.addParagraph().addImage(join(__dirname, "..", "data", "ODF.png"));
+      image = document.addParagraph().addImage(join(__dirname, "..", "data", "ODF.png"));
     });
 
     it("add draw namespace", () => {
@@ -27,5 +90,17 @@ 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

@@ -29,7 +29,8 @@ xdescribe("integration", () => {
   });
 
   it("image", () => {
-    document.addParagraph().addImage(join(__dirname, "data", "ODF.png"));
+    const image = document.addParagraph().addImage(join(__dirname, "data", "ODF.png"));
+    image.setSize(29.4, 36.5);
   });
 
   it("add heading", () => {