diff --git a/demo/5-images.ts b/demo/5-images.ts index 260fd25f15..3c752d9a58 100644 --- a/demo/5-images.ts +++ b/demo/5-images.ts @@ -22,6 +22,7 @@ const image4 = Media.addImage(doc, fs.readFileSync("./demo/images/parrots.bmp")) const image5 = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif")); const image6 = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"), 200, 200, { floating: { + zIndex: 10, horizontalPosition: { offset: 1014400, }, @@ -33,6 +34,7 @@ const image6 = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"), 2 const image7 = Media.addImage(doc, fs.readFileSync("./demo/images/cat.jpg"), 200, 200, { floating: { + zIndex: 5, horizontalPosition: { relative: HorizontalPositionRelativeFrom.PAGE, align: HorizontalPositionAlign.RIGHT, diff --git a/docs/usage/images.md b/docs/usage/images.md index 4893348cc0..94e75e75a7 100644 --- a/docs/usage/images.md +++ b/docs/usage/images.md @@ -125,6 +125,7 @@ Full options you can pass into `floating` are: | lockAnchor | `boolean` | Optional | | behindDocument | `boolean` | Optional | | layoutInCell | `boolean` | Optional | +| zIndex | `number` | Optional | `HorizontalPositionOptions` are: diff --git a/src/file/drawing/anchor/anchor.spec.ts b/src/file/drawing/anchor/anchor.spec.ts index 6b86a31346..10d4b08d13 100644 --- a/src/file/drawing/anchor/anchor.spec.ts +++ b/src/file/drawing/anchor/anchor.spec.ts @@ -218,5 +218,150 @@ describe("Anchor", () => { const textWrap = newJson.root[6]; assert.equal(textWrap.rootKey, "wp:wrapTopAndBottom"); }); + + it("should create a Drawing with a margin", () => { + anchor = createAnchor({ + floating: { + verticalPosition: { + offset: 0, + }, + horizontalPosition: { + offset: 0, + }, + margins: { + top: 10, + left: 10, + bottom: 10, + right: 10, + }, + }, + }); + const newJson = Utility.jsonify(anchor); + const anchorAttributes = newJson.root[0].root; + assert.include(anchorAttributes, { + distT: 10, + distB: 10, + distL: 10, + distR: 10, + }); + }); + + it("should create a Drawing with a default margin", () => { + anchor = createAnchor({ + floating: { + verticalPosition: { + offset: 0, + }, + horizontalPosition: { + offset: 0, + }, + margins: {}, + }, + }); + const newJson = Utility.jsonify(anchor); + const anchorAttributes = newJson.root[0].root; + assert.include(anchorAttributes, { + distT: 0, + distB: 0, + distL: 0, + distR: 0, + }); + }); + + it("should create a Drawing with allowOverlap being false", () => { + anchor = createAnchor({ + floating: { + verticalPosition: { + offset: 0, + }, + horizontalPosition: { + offset: 0, + }, + allowOverlap: false, + }, + }); + const newJson = Utility.jsonify(anchor); + const anchorAttributes = newJson.root[0].root; + assert.include(anchorAttributes, { + allowOverlap: "0", + }); + }); + + it("should create a Drawing with behindDocument being true", () => { + anchor = createAnchor({ + floating: { + verticalPosition: { + offset: 0, + }, + horizontalPosition: { + offset: 0, + }, + behindDocument: true, + }, + }); + const newJson = Utility.jsonify(anchor); + const anchorAttributes = newJson.root[0].root; + assert.include(anchorAttributes, { + behindDoc: "1", + }); + }); + + it("should create a Drawing with locked being true", () => { + anchor = createAnchor({ + floating: { + verticalPosition: { + offset: 0, + }, + horizontalPosition: { + offset: 0, + }, + lockAnchor: true, + }, + }); + const newJson = Utility.jsonify(anchor); + const anchorAttributes = newJson.root[0].root; + assert.include(anchorAttributes, { + locked: "1", + }); + }); + + it("should create a Drawing with locked being false", () => { + anchor = createAnchor({ + floating: { + verticalPosition: { + offset: 0, + }, + horizontalPosition: { + offset: 0, + }, + layoutInCell: false, + }, + }); + const newJson = Utility.jsonify(anchor); + const anchorAttributes = newJson.root[0].root; + assert.include(anchorAttributes, { + layoutInCell: "0", + }); + }); + + it("should create a Drawing with a certain z-index", () => { + anchor = createAnchor({ + floating: { + verticalPosition: { + offset: 0, + }, + horizontalPosition: { + offset: 0, + }, + zIndex: 120, + }, + }); + const newJson = Utility.jsonify(anchor); + const anchorAttributes = newJson.root[0].root; + + assert.include(anchorAttributes, { + relativeHeight: 120, + }); + }); }); }); diff --git a/src/file/drawing/anchor/anchor.ts b/src/file/drawing/anchor/anchor.ts index d52c349ebb..7eb4487a89 100644 --- a/src/file/drawing/anchor/anchor.ts +++ b/src/file/drawing/anchor/anchor.ts @@ -11,42 +11,32 @@ import { Extent } from "./../extent/extent"; import { GraphicFrameProperties } from "./../graphic-frame/graphic-frame-properties"; import { AnchorAttributes } from "./anchor-attributes"; -const defaultOptions: IFloating = { - allowOverlap: true, - behindDocument: false, - lockAnchor: false, - layoutInCell: true, - verticalPosition: {}, - horizontalPosition: {}, -}; - export class Anchor extends XmlComponent { constructor(mediaData: IMediaData, dimensions: IMediaDataDimensions, drawingOptions: IDrawingOptions) { super("wp:anchor"); - const floating = { - margins: { - top: 0, - bottom: 0, - left: 0, - right: 0, - }, - ...defaultOptions, + const floating: IFloating = { + allowOverlap: true, + behindDocument: false, + lockAnchor: false, + layoutInCell: true, + verticalPosition: {}, + horizontalPosition: {}, ...drawingOptions.floating, }; this.root.push( new AnchorAttributes({ - distT: floating.margins.top || 0, - distB: floating.margins.bottom || 0, - distL: floating.margins.left || 0, - distR: floating.margins.right || 0, + distT: floating.margins ? floating.margins.top || 0 : 0, + distB: floating.margins ? floating.margins.bottom || 0 : 0, + distL: floating.margins ? floating.margins.left || 0 : 0, + distR: floating.margins ? floating.margins.right || 0 : 0, simplePos: "0", // note: word doesn't fully support - so we use 0 allowOverlap: floating.allowOverlap === true ? "1" : "0", behindDoc: floating.behindDocument === true ? "1" : "0", locked: floating.lockAnchor === true ? "1" : "0", layoutInCell: floating.layoutInCell === true ? "1" : "0", - relativeHeight: dimensions.emus.y, + relativeHeight: floating.zIndex ? floating.zIndex : dimensions.emus.y, }), ); diff --git a/src/file/drawing/floating/floating-position.ts b/src/file/drawing/floating/floating-position.ts index 9191ef1e1b..6c5ad7f332 100644 --- a/src/file/drawing/floating/floating-position.ts +++ b/src/file/drawing/floating/floating-position.ts @@ -1,4 +1,5 @@ // http://officeopenxml.com/drwPicFloating-position.php +// http://officeopenxml.com/drwPicFloating.php import { ITextWrapping } from "../text-wrap"; export enum HorizontalPositionRelativeFrom { @@ -67,4 +68,5 @@ export interface IFloating { readonly layoutInCell?: boolean; readonly margins?: IMargins; readonly wrap?: ITextWrapping; + readonly zIndex?: number; }