smartyellow/docx-js
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add floating image support and documentation

Browse Source
This commit is contained in:
Dolan
2019-01-09 01:16:47 +00:00
parent 3a1a21e498
commit 12ed54c9fd
11 changed files with 254 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/file/drawing/anchor/anchor.spec.ts
View File

@ -6,7 +6,7 @@ import { IDrawingOptions } from "../drawing";
import { TextWrapStyle } from "../text-wrap";
import { Anchor } from "./anchor";
function createDrawing(drawingOptions: IDrawingOptions): Anchor {
function createAnchor(drawingOptions: IDrawingOptions): Anchor {
return new Anchor(
1,
{
@ -28,14 +28,32 @@ describe("Anchor", () => {
describe("#constructor()", () => {
it("should create a Drawing with correct root key", () => {
anchor = createDrawing({});
anchor = createAnchor({
floating: {
verticalPosition: {
offset: 0,
},
horizontalPosition: {
offset: 0,
},
},
});
const newJson = Utility.jsonify(anchor);
assert.equal(newJson.rootKey, "wp:anchor");
assert.equal(newJson.root.length, 10);
});
it("should create a Drawing with all default options", () => {
anchor = createDrawing({});
anchor = createAnchor({
floating: {
verticalPosition: {
offset: 0,
},
horizontalPosition: {
offset: 0,
},
},
});
const newJson = Utility.jsonify(anchor);
assert.equal(newJson.root.length, 10);
@ -60,7 +78,7 @@ describe("Anchor", () => {
const horizontalPosition = newJson.root[2];
assert.equal(horizontalPosition.rootKey, "wp:positionH");
assert.include(horizontalPosition.root[0].root, {
relativeFrom: "column",
relativeFrom: "page",
});
assert.equal(horizontalPosition.root[1].rootKey, "wp:posOffset");
assert.include(horizontalPosition.root[1].root[0], 0);
@ -69,7 +87,7 @@ describe("Anchor", () => {
const verticalPosition = newJson.root[3];
assert.equal(verticalPosition.rootKey, "wp:positionV");
assert.include(verticalPosition.root[0].root, {
relativeFrom: "paragraph",
relativeFrom: "page",
});
assert.equal(verticalPosition.root[1].rootKey, "wp:posOffset");
assert.include(verticalPosition.root[1].root[0], 0);
@ -104,10 +122,18 @@ describe("Anchor", () => {
});
it("should create a Drawing with square text wrapping", () => {
anchor = createDrawing({
anchor = createAnchor({
textWrapping: {
textWrapStyle: TextWrapStyle.SQUARE,
},
floating: {
verticalPosition: {
offset: 0,
},
horizontalPosition: {
offset: 0,
},
},
});
const newJson = Utility.jsonify(anchor);
assert.equal(newJson.root.length, 10);
@ -118,10 +144,18 @@ describe("Anchor", () => {
});
it("should create a Drawing with no text wrapping", () => {
anchor = createDrawing({
anchor = createAnchor({
textWrapping: {
textWrapStyle: TextWrapStyle.NONE,
},
floating: {
verticalPosition: {
offset: 0,
},
horizontalPosition: {
offset: 0,
},
},
});
const newJson = Utility.jsonify(anchor);
assert.equal(newJson.root.length, 10);
@ -131,10 +165,18 @@ describe("Anchor", () => {
});
it("should create a Drawing with tight text wrapping", () => {
anchor = createDrawing({
anchor = createAnchor({
textWrapping: {
textWrapStyle: TextWrapStyle.TIGHT,
},
floating: {
horizontalPosition: {
offset: 0,
},
verticalPosition: {
offset: 0,
},
},
});
const newJson = Utility.jsonify(anchor);
assert.equal(newJson.root.length, 10);
@ -144,10 +186,18 @@ describe("Anchor", () => {
});
it("should create a Drawing with tight text wrapping", () => {
anchor = createDrawing({
anchor = createAnchor({
textWrapping: {
textWrapStyle: TextWrapStyle.TOP_AND_BOTTOM,
},
floating: {
verticalPosition: {
offset: 0,
},
horizontalPosition: {
offset: 0,
},
},
});
const newJson = Utility.jsonify(anchor);
assert.equal(newJson.root.length, 10);

19
src/file/drawing/anchor/anchor.ts
View File

@ -2,14 +2,7 @@
import { IMediaDataDimensions } from "file/media";
import { XmlComponent } from "file/xml-components";
import { IDrawingOptions } from "../drawing";
import {
HorizontalPosition,
HorizontalPositionRelativeFrom,
IFloating,
SimplePos,
VerticalPosition,
VerticalPositionRelativeFrom,
} from "../floating";
import { HorizontalPosition, IFloating, SimplePos, VerticalPosition } from "../floating";
import { Graphic } from "../inline/graphic";
import { TextWrapStyle, WrapNone, WrapSquare, WrapTight, WrapTopAndBottom } from "../text-wrap";
import { DocProperties } from "./../doc-properties/doc-properties";
@ -23,14 +16,8 @@ const defaultOptions: IFloating = {
behindDocument: false,
lockAnchor: false,
layoutInCell: true,
verticalPosition: {
relative: VerticalPositionRelativeFrom.PARAGRAPH,
offset: 0,
},
horizontalPosition: {
relative: HorizontalPositionRelativeFrom.COLUMN,
offset: 0,
},
verticalPosition: {},
horizontalPosition: {},
};
export class Anchor extends XmlComponent {

11
src/file/drawing/drawing.spec.ts
View File

@ -2,7 +2,7 @@ import { assert } from "chai";
import { Utility } from "tests/utility";
import { Drawing, IDrawingOptions, PlacementPosition } from "./drawing";
import { Drawing, IDrawingOptions } from "./drawing";
const imageBase64Data = `iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAACzVBMVEUAAAAAAAAAAAAAAAA/AD8zMzMqKiokJCQfHx8cHBwZGRkuFxcqFSonJyckJCQiIiIfHx8eHh4cHBwoGhomGSYkJCQhISEfHx8eHh4nHR0lHBwkGyQjIyMiIiIgICAfHx8mHh4lHh4kHR0jHCMiGyIhISEgICAfHx8lHx8kHh4jHR0hHCEhISEgICAlHx8kHx8jHh4jHh4iHSIhHCEhISElICAkHx8jHx8jHh4iHh4iHSIhHSElICAkICAjHx8jHx8iHh4iHh4hHiEhHSEkICAjHx8iHx8iHx8hHh4hHiEkHSEjHSAjHx8iHx8iHx8hHh4kHiEkHiEjHSAiHx8hHx8hHh4kHiEjHiAjHSAiHx8iHx8hHx8kHh4jHiEjHiAjHiAiICAiHx8kHx8jHh4jHiEjHiAiHiAiHSAiHx8jHx8jHx8jHiAiHiAiHiAiHSAiHx8jHx8jHx8iHiAiHiAiHiAjHx8jHx8jHx8jHx8iHiAiHiAiHiAjHx8jHx8jHx8iHx8iHSAiHiAjHiAjHx8jHx8hHx8iHx8iHyAiHiAjHiAjHiAjHh4hHx8iHx8iHx8iHyAjHSAjHiAjHiAjHh4hHx8iHx8iHx8jHyAjHiAhHh4iHx8iHx8jHyAjHSAjHSAhHiAhHh4iHx8iHx8jHx8jHyAjHSAjHSAiHh4iHh4jHx8jHx8jHyAjHyAhHSAhHSAiHh4iHh4jHx8jHx8jHyAhHyAhHSAiHSAiHh4jHh4jHx8jHx8jHyAhHyAhHSAiHSAjHR4jHh4jHx8jHx8hHyAhHyAiHSAjHSAjHR4jHh4jHx8hHx8hHyAhHyAiHyAjHSAjHR4jHR4hHh4hHx8hHyAiHyAjHyAjHSAjHR4jHR4hHh4hHx8hHyAjHyAjHyAjHSAjHR4hHR4hHR4hHx8iHyAjHyAjHyAjHSAhHR4hHR4hHR4hHx8jHyAjHyAjHyAjHyC9S2xeAAAA7nRSTlMAAQIDBAUGBwgJCgsMDQ4PEBESExQVFxgZGhscHR4fICEiIyQlJicoKSorLS4vMDEyMzQ1Njc4OTo7PD0+P0BBQkNERUZISUpLTE1OUFFSU1RVVllaW1xdXmBhYmNkZWZnaGprbG1ub3Byc3R1dnd4eXp8fn+AgYKDhIWGiImKi4yNj5CRkpOUlZaXmJmam5ydnp+goaKjpKaoqqusra6vsLGys7S1tri5uru8vb6/wMHCw8TFxsfIycrLzM3Oz9DR0tPU1dbX2Nna29zd3t/g4eLj5OXm5+jp6uvs7e7v8PHy8/T19vf4+fr7/P3+fkZpVQAABcBJREFUGBntwftjlQMcBvDnnLNL22qzJjWlKLHFVogyty3SiFq6EZliqZGyhnSxsLlMRahYoZKRFcul5dKFCatYqWZaNKvWtrPz/A2+7/b27qRzec/lPfvl/XxgMplMJpPJZDKZAtA9HJ3ppnIez0KnSdtC0RCNznHdJrbrh85wdSlVVRaEXuoGamYi5K5430HNiTiEWHKJg05eRWgNfKeV7RxbqUhGKPV/207VupQ8is0IoX5vtFC18SqEHaK4GyHTZ2kzVR8PBTCO4oANIZL4ShNVZcOhKKeYg9DoWdhI1ec3os2VFI0JCIUez5+i6st0qJZRrEAIJCw+QdW223BG/EmKwTBc/IJ/qfp2FDrkUnwFo8U9dZyqnaPhxLqfYjyM1S3vb6p+GGOBszsojoTDSDFz6qj66R4LzvYJxVMwUNRjf1H1ywQr/megg2RzLximy8waqvbda8M5iijegVEiHjlM1W/3h+FcXesphsMY4dMOUnUgOxyuPEzxPQwRNvV3qg5Nj4BreyimwADWe/dRVTMjEm6MoGLzGwtystL6RyOY3qSqdlYU3FpLZw1VW0sK5943MvUCKwJ1noNtjs6Ohge76Zq9ZkfpigU5WWkDYuCfbs1U5HWFR8/Qq4a9W0uK5k4ZmdrTCl8spGIePLPlbqqsc1Afe83O0hULc8alDYiBd7ZyitYMeBfR55rR2fOKP6ioPk2dGvZ+UVI0d8rtqT2tcCexlqK2F3wRn5Q+YVbBqrLKOupkr9lZujAOrmS0UpTb4JeIPkNHZ+cXr6uoPk2vyuBSPhWLEKj45PQJuQWryyqP0Z14uGLdROHIRNBEXDR09EP5r62rOHCazhrD4VKPwxTH+sIA3ZPTJ+YuWV22n+IruHFDC8X2CBjnPoolcGc2FYUwzmsUWXDHsoGKLBhmN0VvuBVfTVE/AAbpaid5CB4MbaLY1QXGuIViLTyZQcVyGGMuxWPwaA0Vk2GI9RRp8Ci2iuLkIBjhT5LNUfAspZFiTwyC72KK7+DNg1SsRvCNp3gZXq2k4iEEXSHFJHgVXUlxejCCbTvFAHiXdIJiXxyCK7KJ5FHoMZGK9xBcwyg2QpdlVMxEUM2iyIMuXXZQNF+HswxMsSAAJRQjoE//eoqDCXBSTO6f1xd+O0iyNRY6jaWi1ALNYCocZROj4JdEikroVkjFk9DcStXxpdfCD2MoXodu4RUU9ptxxmXssOfxnvDVcxRTod9FxyhqLoAqis5aPhwTDp9spRgEH2Q6KLbYoKqlaKTm6Isp0C/sJMnjFvhiERXPQvUNRe9p29lhR04CdBpC8Sl8YiuncIxEuzUUg4Dkgj+paVozygY9plPMh28SaymO9kabAopREGF3vt9MzeFFl8G7lRSZ8FFGK8XX4VA8QjEd7XrM3M0OXz8YCy+qKBLgq3wqnofiTorF0Ax56Rg1J1elW+BBAsVe+My6iYq7IK6keBdOIseV2qn5Pb8f3MqkWAXf9ThM8c8lAOIotuFsF875lRrH5klRcG0+xcPwQ1oLxfeRAP4heQTnGL78X2rqlw2DK59SXAV/zKaiGMAuko5InCt68mcOan5+ohf+z1pP8lQY/GHZQMV4YD3FpXDp4qerqbF/lBWBswyi+AL+ia+maLgcRRQj4IYlY/UpauqKBsPJAxQF8NM1TRQ/RudSPAD34rK3scOuR8/HGcspxsJfOVS8NZbiGXiUtPgINU3v3WFDmx8pEuG3EiqKKVbCC1vm2iZqap5LAtCtleQf8F9sFYWDohzeJczYyQ4V2bEZFGsQgJRGqqqhS2phHTWn9lDkIhBTqWqxQZ+IsRvtdHY9AvI2VX2hW68nfqGmuQsCEl3JdjfCF8OW1bPdtwhQ0gm2mQzfRE3a7KCYj0BNZJs8+Kxf/r6WtTEI2FIqlsMfFgRB5A6KUnSe/vUkX0AnuvUIt8SjM1m6wWQymUwmk8lkMgXRf5vi8rLQxtUhAAAAAElFTkSuQmCC`;
@ -47,7 +47,14 @@ describe("Drawing", () => {
it("should create a drawing with anchor element when there options are passed", () => {
currentBreak = createDrawing({
position: PlacementPosition.FLOATING,
floating: {
horizontalPosition: {
offset: 0,
},
verticalPosition: {
offset: 0,
},
},
});
const newJson = Utility.jsonify(currentBreak);
assert.equal(newJson.root[0].rootKey, "wp:anchor");

23
src/file/drawing/drawing.ts
View File

@ -5,11 +5,6 @@ import { IFloating } from "./floating";
import { Inline } from "./inline";
import { ITextWrapping } from "./text-wrap";
export enum PlacementPosition {
INLINE,
FLOATING,
}
export interface IDistance {
readonly distT?: number;
readonly distB?: number;
@ -18,35 +13,25 @@ export interface IDistance {
}
export interface IDrawingOptions {
readonly position?: PlacementPosition;
readonly textWrapping?: ITextWrapping;
readonly floating?: IFloating;
}
const defaultDrawingOptions: IDrawingOptions = {
position: PlacementPosition.INLINE,
};
export class Drawing extends XmlComponent {
private readonly inline: Inline;
constructor(imageData: IMediaData, drawingOptions?: IDrawingOptions) {
constructor(imageData: IMediaData, drawingOptions: IDrawingOptions = {}) {
super("w:drawing");
if (imageData === undefined) {
throw new Error("imageData cannot be undefined");
}
const mergedOptions = {
...defaultDrawingOptions,
...drawingOptions,
};
if (mergedOptions.position === PlacementPosition.INLINE) {
if (!drawingOptions.floating) {
this.inline = new Inline(imageData.referenceId, imageData.dimensions);
this.root.push(this.inline);
} else if (mergedOptions.position === PlacementPosition.FLOATING) {
this.root.push(new Anchor(imageData.referenceId, imageData.dimensions, mergedOptions));
} else {
this.root.push(new Anchor(imageData.referenceId, imageData.dimensions, drawingOptions));
}
}

4
src/file/drawing/floating/floating-position.ts
View File

@ -39,13 +39,13 @@ export enum VerticalPositionAlign {
}
export interface IHorizontalPositionOptions {
readonly relative: HorizontalPositionRelativeFrom;
readonly relative?: HorizontalPositionRelativeFrom;
readonly align?: HorizontalPositionAlign;
readonly offset?: number;
}
export interface IVerticalPositionOptions {
readonly relative: VerticalPositionRelativeFrom;
readonly relative?: VerticalPositionRelativeFrom;
readonly align?: VerticalPositionAlign;
readonly offset?: number;
}

2
src/file/drawing/floating/horizontal-position.ts
View File

@ -20,7 +20,7 @@ export class HorizontalPosition extends XmlComponent {
this.root.push(
new HorizontalPositionAttributes({
relativeFrom: horizontalPosition.relative,
relativeFrom: horizontalPosition.relative || HorizontalPositionRelativeFrom.PAGE,
}),
);

2
src/file/drawing/floating/vertical-position.ts
View File

@ -20,7 +20,7 @@ export class VerticalPosition extends XmlComponent {
this.root.push(
new VerticalPositionAttributes({
relativeFrom: verticalPosition.relative,
relativeFrom: verticalPosition.relative || VerticalPositionRelativeFrom.PAGE,
}),
);