add support for floating drawings
- added need elements and test for them
This commit is contained in:
26
src/file/drawing/anchor/anchor-attributes.ts
Normal file
26
src/file/drawing/anchor/anchor-attributes.ts
Normal file
@ -0,0 +1,26 @@
|
||||
import { XmlAttributeComponent } from "file/xml-components";
|
||||
import { Distance } from "../drawing";
|
||||
|
||||
export interface IAnchorAttributes extends Distance {
|
||||
allowOverlap?: "0" | "1";
|
||||
behindDoc?: "0" | "1";
|
||||
layoutInCell?: "0" | "1";
|
||||
locked?: "0" | "1";
|
||||
relativeHeight?: number;
|
||||
simplePos?: "0" | "1";
|
||||
}
|
||||
|
||||
export class AnchorAttributes extends XmlAttributeComponent<IAnchorAttributes> {
|
||||
protected xmlKeys = {
|
||||
distT: "distT",
|
||||
distB: "distB",
|
||||
distL: "distL",
|
||||
distR: "distR",
|
||||
allowOverlap: "allowOverlap",
|
||||
behindDoc: "behindDoc",
|
||||
layoutInCell: "layoutInCell",
|
||||
locked: "locked",
|
||||
relativeHeight: "relativeHeight",
|
||||
simplePos: "simplePos",
|
||||
};
|
||||
}
|
118
src/file/drawing/anchor/anchor.spec.ts
Normal file
118
src/file/drawing/anchor/anchor.spec.ts
Normal file
@ -0,0 +1,118 @@
|
||||
import { assert } from "chai";
|
||||
|
||||
import { Utility } from "../../../tests/utility";
|
||||
import { DrawingOptions, TextWrapStyle } from ".././";
|
||||
import { Anchor } from "./";
|
||||
|
||||
function createDrawing(drawingOptions: DrawingOptions) {
|
||||
return new Anchor(
|
||||
1,
|
||||
{
|
||||
pixels: {
|
||||
x: 100,
|
||||
y: 100,
|
||||
},
|
||||
emus: {
|
||||
x: 100 * 9525,
|
||||
y: 100 * 9525,
|
||||
},
|
||||
},
|
||||
drawingOptions,
|
||||
);
|
||||
}
|
||||
|
||||
describe("Anchor", () => {
|
||||
let anchor: Anchor;
|
||||
|
||||
describe("#constructor()", () => {
|
||||
it("should create a Drawing with correct root key", () => {
|
||||
anchor = createDrawing({});
|
||||
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({});
|
||||
const newJson = Utility.jsonify(anchor);
|
||||
assert.equal(newJson.root.length, 10);
|
||||
|
||||
const anchorAttributes = newJson.root[0].root;
|
||||
assert.include(anchorAttributes, {
|
||||
distT: 0,
|
||||
distB: 0,
|
||||
distL: 0,
|
||||
distR: 0,
|
||||
simplePos: "0",
|
||||
allowOverlap: "1",
|
||||
behindDoc: "0",
|
||||
locked: "0",
|
||||
layoutInCell: "1",
|
||||
relativeHeight: 952500,
|
||||
});
|
||||
|
||||
// 1: simple pos
|
||||
assert.equal(newJson.root[1].rootKey, "wp:simplePos");
|
||||
|
||||
// 2: horizontal position
|
||||
const horizontalPosition = newJson.root[2];
|
||||
assert.equal(horizontalPosition.rootKey, "wp:positionH");
|
||||
assert.include(horizontalPosition.root[0].root, {
|
||||
relativeFrom: "column",
|
||||
});
|
||||
assert.equal(horizontalPosition.root[1].rootKey, "wp:posOffset");
|
||||
assert.include(horizontalPosition.root[1].root[0], 0);
|
||||
|
||||
// 3: vertical position
|
||||
const verticalPosition = newJson.root[3];
|
||||
assert.equal(verticalPosition.rootKey, "wp:positionV");
|
||||
assert.include(verticalPosition.root[0].root, {
|
||||
relativeFrom: "paragraph",
|
||||
});
|
||||
assert.equal(verticalPosition.root[1].rootKey, "wp:posOffset");
|
||||
assert.include(verticalPosition.root[1].root[0], 0);
|
||||
|
||||
// 4: extent
|
||||
const extent = newJson.root[4];
|
||||
assert.equal(extent.rootKey, "wp:extent");
|
||||
assert.include(extent.root[0].root, {
|
||||
cx: 952500,
|
||||
cy: 952500,
|
||||
});
|
||||
|
||||
// 5: effect extent
|
||||
const effectExtent = newJson.root[5];
|
||||
assert.equal(effectExtent.rootKey, "wp:effectExtent");
|
||||
|
||||
// 6 text wrap: none
|
||||
const textWrap = newJson.root[6];
|
||||
assert.equal(textWrap.rootKey, "wp:wrapNone");
|
||||
|
||||
// 7: doc properties
|
||||
const docProperties = newJson.root[7];
|
||||
assert.equal(docProperties.rootKey, "wp:docPr");
|
||||
|
||||
// 8: graphic frame properties
|
||||
const graphicFrame = newJson.root[8];
|
||||
assert.equal(graphicFrame.rootKey, "wp:cNvGraphicFramePr");
|
||||
|
||||
// 9: graphic
|
||||
const graphic = newJson.root[9];
|
||||
assert.equal(graphic.rootKey, "a:graphic");
|
||||
});
|
||||
|
||||
it("should create a Drawing with text wrapping", () => {
|
||||
anchor = createDrawing({
|
||||
textWrapping: {
|
||||
textWrapStyle: TextWrapStyle.SQUARE,
|
||||
},
|
||||
});
|
||||
const newJson = Utility.jsonify(anchor);
|
||||
assert.equal(newJson.root.length, 10);
|
||||
|
||||
// 6 text wrap: square
|
||||
const textWrap = newJson.root[6];
|
||||
assert.equal(textWrap.rootKey, "wp:wrapSquare");
|
||||
});
|
||||
});
|
||||
});
|
88
src/file/drawing/anchor/anchor.ts
Normal file
88
src/file/drawing/anchor/anchor.ts
Normal file
@ -0,0 +1,88 @@
|
||||
// http://officeopenxml.com/drwPicFloating.php
|
||||
import { IMediaDataDimensions } from "file/media";
|
||||
import { XmlComponent } from "file/xml-components";
|
||||
import { DocProperties } from "./../doc-properties/doc-properties";
|
||||
import { EffectExtent } from "./../effect-extent/effect-extent";
|
||||
import { Extent } from "./../extent/extent";
|
||||
import { Graphic } from "./../graphic";
|
||||
import { GraphicFrameProperties } from "./../graphic-frame/graphic-frame-properties";
|
||||
import { AnchorAttributes } from "./anchor-attributes";
|
||||
import { DrawingOptions } from "../drawing";
|
||||
import {
|
||||
SimplePos,
|
||||
HorizontalPosition,
|
||||
VerticalPosition,
|
||||
Floating,
|
||||
VerticalPositionRelativeFrom,
|
||||
HorizontalPositionRelativeFrom,
|
||||
} from "../floating";
|
||||
import { WrapNone, TextWrapStyle, WrapSquare, WrapTight, WrapTopAndBottom } from "../text-wrap";
|
||||
|
||||
const defaultOptions: Floating = {
|
||||
allowOverlap: true,
|
||||
behindDocument: false,
|
||||
lockAnchor: false,
|
||||
layoutInCell: true,
|
||||
verticalPosition: {
|
||||
relative: VerticalPositionRelativeFrom.PARAGRAPH,
|
||||
offset: 0,
|
||||
},
|
||||
horizontalPosition: {
|
||||
relative: HorizontalPositionRelativeFrom.COLUMN,
|
||||
offset: 0,
|
||||
},
|
||||
};
|
||||
|
||||
export class Anchor extends XmlComponent {
|
||||
constructor(referenceId: number, dimensions: IMediaDataDimensions, drawingOptions: DrawingOptions) {
|
||||
super("wp:anchor");
|
||||
|
||||
const floating = {
|
||||
...defaultOptions,
|
||||
...drawingOptions.floating,
|
||||
};
|
||||
this.root.push(
|
||||
new AnchorAttributes({
|
||||
distT: 0,
|
||||
distB: 0,
|
||||
distL: 0,
|
||||
distR: 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,
|
||||
}),
|
||||
);
|
||||
|
||||
this.root.push(new SimplePos());
|
||||
this.root.push(new HorizontalPosition(floating.horizontalPosition));
|
||||
this.root.push(new VerticalPosition(floating.verticalPosition));
|
||||
this.root.push(new Extent(dimensions.emus.x, dimensions.emus.y));
|
||||
this.root.push(new EffectExtent());
|
||||
|
||||
if (drawingOptions.textWrapping != null) {
|
||||
switch (drawingOptions.textWrapping.textWrapStyle) {
|
||||
case TextWrapStyle.SQUARE:
|
||||
this.root.push(new WrapSquare(drawingOptions.textWrapping));
|
||||
break;
|
||||
case TextWrapStyle.TIGHT:
|
||||
this.root.push(new WrapTight(drawingOptions.textWrapping.distanceFromText));
|
||||
break;
|
||||
case TextWrapStyle.TOP_AND_BOTTOM:
|
||||
this.root.push(new WrapTopAndBottom(drawingOptions.textWrapping.distanceFromText));
|
||||
break;
|
||||
case TextWrapStyle.NONE:
|
||||
default:
|
||||
this.root.push(new WrapNone());
|
||||
}
|
||||
} else {
|
||||
this.root.push(new WrapNone());
|
||||
}
|
||||
|
||||
this.root.push(new DocProperties());
|
||||
this.root.push(new GraphicFrameProperties());
|
||||
this.root.push(new Graphic(referenceId, dimensions.emus.x, dimensions.emus.y));
|
||||
}
|
||||
}
|
2
src/file/drawing/anchor/index.ts
Normal file
2
src/file/drawing/anchor/index.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export * from "./anchor";
|
||||
export * from "./anchor-attributes";
|
Reference in New Issue
Block a user