From d74db948ba61189ac9087846b0145fa830f50d41 Mon Sep 17 00:00:00 2001 From: Dolan Date: Fri, 25 Dec 2020 00:07:57 +0000 Subject: [PATCH 1/4] Add zIndex property to floating --- demo/5-images.ts | 2 ++ src/file/drawing/anchor/anchor.ts | 28 ++++++++----------- .../drawing/floating/floating-position.ts | 2 ++ 3 files changed, 16 insertions(+), 16 deletions(-) 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/src/file/drawing/anchor/anchor.ts b/src/file/drawing/anchor/anchor.ts index d52c349ebb..25890aae9c 100644 --- a/src/file/drawing/anchor/anchor.ts +++ b/src/file/drawing/anchor/anchor.ts @@ -11,42 +11,38 @@ 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 = { + const floating: IFloating = { margins: { top: 0, bottom: 0, left: 0, right: 0, }, - ...defaultOptions, + 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; } From d894bfa1672ea055755376947076043122ed8a99 Mon Sep 17 00:00:00 2001 From: Dolan Date: Fri, 25 Dec 2020 00:29:27 +0000 Subject: [PATCH 2/4] Add test --- src/file/drawing/anchor/anchor.spec.ts | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/file/drawing/anchor/anchor.spec.ts b/src/file/drawing/anchor/anchor.spec.ts index 6b86a31346..99fe0fb7b9 100644 --- a/src/file/drawing/anchor/anchor.spec.ts +++ b/src/file/drawing/anchor/anchor.spec.ts @@ -218,5 +218,25 @@ describe("Anchor", () => { const textWrap = newJson.root[6]; assert.equal(textWrap.rootKey, "wp:wrapTopAndBottom"); }); + + 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, + }); + }); }); }); From b4cd3a319c2e7aab21f20d40904c5a343337e92b Mon Sep 17 00:00:00 2001 From: Dolan Date: Fri, 25 Dec 2020 00:30:58 +0000 Subject: [PATCH 3/4] Add documentation --- docs/usage/images.md | 1 + 1 file changed, 1 insertion(+) 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: From 5ec18d6e01523eb78ecfe7f198a00eef0acc33c2 Mon Sep 17 00:00:00 2001 From: Dolan Date: Fri, 25 Dec 2020 02:15:40 +0000 Subject: [PATCH 4/4] Add tests and simplify --- src/file/drawing/anchor/anchor.spec.ts | 125 +++++++++++++++++++++++++ src/file/drawing/anchor/anchor.ts | 6 -- 2 files changed, 125 insertions(+), 6 deletions(-) diff --git a/src/file/drawing/anchor/anchor.spec.ts b/src/file/drawing/anchor/anchor.spec.ts index 99fe0fb7b9..10d4b08d13 100644 --- a/src/file/drawing/anchor/anchor.spec.ts +++ b/src/file/drawing/anchor/anchor.spec.ts @@ -219,6 +219,131 @@ describe("Anchor", () => { 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: { diff --git a/src/file/drawing/anchor/anchor.ts b/src/file/drawing/anchor/anchor.ts index 25890aae9c..7eb4487a89 100644 --- a/src/file/drawing/anchor/anchor.ts +++ b/src/file/drawing/anchor/anchor.ts @@ -16,12 +16,6 @@ export class Anchor extends XmlComponent { super("wp:anchor"); const floating: IFloating = { - margins: { - top: 0, - bottom: 0, - left: 0, - right: 0, - }, allowOverlap: true, behindDocument: false, lockAnchor: false,