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

#933 Discriminated union for frame alignment (#2477)

Browse Source
This commit is contained in:
Dolan
2023-12-29 15:07:42 +00:00
committed by GitHub
parent 2550da199d
commit b8f97553b3
5 changed files with 318 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
demo/61-text-frame.ts
View File

@ -2,6 +2,7 @@
import * as fs from "fs"; import * as fs from "fs";
import { import {
AlignmentType,
BorderStyle, BorderStyle,
Document, Document,
FrameAnchorType, FrameAnchorType,
@ -20,6 +21,7 @@ const doc = new Document({
children: [ children: [
new Paragraph({ new Paragraph({
frame: { frame: {
type: "absolute",
position: { position: {
x: 1000, x: 1000,
y: 3000, y: 3000,
@ -30,6 +32,54 @@ const doc = new Document({
horizontal: FrameAnchorType.MARGIN, horizontal: FrameAnchorType.MARGIN,
vertical: FrameAnchorType.MARGIN, vertical: FrameAnchorType.MARGIN,
}, },
},
border: {
top: {
color: "auto",
space: 1,
style: BorderStyle.SINGLE,
size: 6,
},
bottom: {
color: "auto",
space: 1,
style: BorderStyle.SINGLE,
size: 6,
},
left: {
color: "auto",
space: 1,
style: BorderStyle.SINGLE,
size: 6,
},
right: {
color: "auto",
space: 1,
style: BorderStyle.SINGLE,
size: 6,
},
},
children: [
new TextRun("Hello World"),
new TextRun({
text: "Foo Bar",
bold: true,
}),
new TextRun({
children: [new Tab(), "Github is the best"],
bold: true,
}),
],
}),
new Paragraph({
frame: {
type: "alignment",
width: 4000,
height: 1000,
anchor: {
horizontal: FrameAnchorType.MARGIN,
vertical: FrameAnchorType.MARGIN,
},
alignment: { alignment: {
x: HorizontalPositionAlign.CENTER, x: HorizontalPositionAlign.CENTER,
y: VerticalPositionAlign.TOP, y: VerticalPositionAlign.TOP,
@ -73,6 +123,59 @@ const doc = new Document({
}), }),
], ],
}), }),
new Paragraph({
frame: {
type: "alignment",
width: 4000,
height: 1000,
anchor: {
horizontal: FrameAnchorType.MARGIN,
vertical: FrameAnchorType.MARGIN,
},
alignment: {
x: HorizontalPositionAlign.CENTER,
y: VerticalPositionAlign.BOTTOM,
},
},
border: {
top: {
color: "auto",
space: 1,
style: BorderStyle.SINGLE,
size: 6,
},
bottom: {
color: "auto",
space: 1,
style: BorderStyle.SINGLE,
size: 6,
},
left: {
color: "auto",
space: 1,
style: BorderStyle.SINGLE,
size: 6,
},
right: {
color: "auto",
space: 1,
style: BorderStyle.SINGLE,
size: 6,
},
},
alignment: AlignmentType.RIGHT,
children: [
new TextRun("Hello World"),
new TextRun({
text: "Foo Bar",
bold: true,
}),
new TextRun({
children: [new Tab(), "Github is the best"],
bold: true,
}),
],
}),
], ],
}, },
], ],

258
src/file/paragraph/frame/frame-properties.spec.ts
View File

@ -3,154 +3,144 @@ import { describe, expect, it } from "vitest";
import { Formatter } from "@export/formatter"; import { Formatter } from "@export/formatter";
import { HorizontalPositionAlign, VerticalPositionAlign } from "@file/shared"; import { HorizontalPositionAlign, VerticalPositionAlign } from "@file/shared";
import { FrameAnchorType, FrameProperties } from "./frame-properties"; import { FrameAnchorType, createFrameProperties } from "./frame-properties";
describe("FrameProperties", () => { describe("createFrameProperties", () => {
describe("#constructor()", () => { it("should create", () => {
it("should create", () => { const currentFrameProperties = createFrameProperties({
const currentFrameProperties = new FrameProperties({ type: "absolute",
position: { position: {
x: 1000, x: 1000,
y: 3000, y: 3000,
}, },
width: 4000, width: 4000,
height: 1000, height: 1000,
anchor: { anchor: {
horizontal: FrameAnchorType.MARGIN, horizontal: FrameAnchorType.MARGIN,
vertical: FrameAnchorType.MARGIN, vertical: FrameAnchorType.MARGIN,
}, },
alignment: {
x: HorizontalPositionAlign.CENTER,
y: VerticalPositionAlign.TOP,
},
});
const tree = new Formatter().format(currentFrameProperties);
expect(tree).to.deep.equal({
"w:framePr": {
_attr: {
"w:h": 1000,
"w:hAnchor": "margin",
"w:vAnchor": "margin",
"w:w": 4000,
"w:x": 1000,
"w:xAlign": "center",
"w:y": 3000,
"w:yAlign": "top",
},
},
});
}); });
it("should create with the space attribute", () => { const tree = new Formatter().format(currentFrameProperties);
const currentFrameProperties = new FrameProperties({ expect(tree).to.deep.equal({
position: { "w:framePr": {
x: 1000, _attr: {
y: 3000, "w:h": 1000,
"w:hAnchor": "margin",
"w:vAnchor": "margin",
"w:w": 4000,
"w:x": 1000,
"w:y": 3000,
}, },
width: 4000, },
height: 1000, });
anchor: { });
horizontal: FrameAnchorType.MARGIN,
vertical: FrameAnchorType.MARGIN,
},
alignment: {
x: HorizontalPositionAlign.CENTER,
y: VerticalPositionAlign.TOP,
},
space: {
horizontal: 100,
vertical: 200,
},
});
const tree = new Formatter().format(currentFrameProperties); it("should create with the space attribute", () => {
expect(tree).to.deep.equal({ const currentFrameProperties = createFrameProperties({
"w:framePr": { type: "absolute",
_attr: { position: {
"w:h": 1000, x: 1000,
"w:hAnchor": "margin", y: 3000,
"w:vAnchor": "margin", },
"w:w": 4000, width: 4000,
"w:x": 1000, height: 1000,
"w:xAlign": "center", anchor: {
"w:y": 3000, horizontal: FrameAnchorType.MARGIN,
"w:yAlign": "top", vertical: FrameAnchorType.MARGIN,
"w:hSpace": 100, },
"w:vSpace": 200, space: {
}, horizontal: 100,
}, vertical: 200,
}); },
}); });
it("should create without x and y", () => { const tree = new Formatter().format(currentFrameProperties);
const currentFrameProperties = new FrameProperties({ expect(tree).to.deep.equal({
width: 4000, "w:framePr": {
height: 1000, _attr: {
anchor: { "w:h": 1000,
horizontal: FrameAnchorType.MARGIN, "w:hAnchor": "margin",
vertical: FrameAnchorType.MARGIN, "w:vAnchor": "margin",
"w:w": 4000,
"w:x": 1000,
"w:y": 3000,
"w:hSpace": 100,
"w:vSpace": 200,
}, },
alignment: { },
x: HorizontalPositionAlign.CENTER, });
y: VerticalPositionAlign.TOP, });
},
space: {
horizontal: 100,
vertical: 200,
},
});
const tree = new Formatter().format(currentFrameProperties); it("should create without x and y", () => {
expect(tree).to.deep.equal({ const currentFrameProperties = createFrameProperties({
"w:framePr": { type: "alignment",
_attr: { width: 4000,
"w:h": 1000, height: 1000,
"w:hAnchor": "margin", anchor: {
"w:vAnchor": "margin", horizontal: FrameAnchorType.MARGIN,
"w:w": 4000, vertical: FrameAnchorType.MARGIN,
"w:xAlign": "center", },
"w:yAlign": "top", alignment: {
"w:hSpace": 100, x: HorizontalPositionAlign.CENTER,
"w:vSpace": 200, y: VerticalPositionAlign.TOP,
}, },
}, space: {
}); horizontal: 100,
vertical: 200,
},
}); });
it("should create without alignments", () => { const tree = new Formatter().format(currentFrameProperties);
const currentFrameProperties = new FrameProperties({ expect(tree).to.deep.equal({
position: { "w:framePr": {
x: 1000, _attr: {
y: 3000, "w:h": 1000,
"w:hAnchor": "margin",
"w:vAnchor": "margin",
"w:w": 4000,
"w:xAlign": "center",
"w:yAlign": "top",
"w:hSpace": 100,
"w:vSpace": 200,
}, },
width: 4000, },
height: 1000, });
anchor: { });
horizontal: FrameAnchorType.MARGIN,
vertical: FrameAnchorType.MARGIN,
},
space: {
horizontal: 100,
vertical: 200,
},
});
const tree = new Formatter().format(currentFrameProperties); it("should create without alignments", () => {
expect(tree).to.deep.equal({ const currentFrameProperties = createFrameProperties({
"w:framePr": { type: "absolute",
_attr: { position: {
"w:h": 1000, x: 1000,
"w:hAnchor": "margin", y: 3000,
"w:vAnchor": "margin", },
"w:w": 4000, width: 4000,
"w:x": 1000, height: 1000,
"w:y": 3000, anchor: {
"w:hSpace": 100, horizontal: FrameAnchorType.MARGIN,
"w:vSpace": 200, vertical: FrameAnchorType.MARGIN,
}, },
space: {
horizontal: 100,
vertical: 200,
},
});
const tree = new Formatter().format(currentFrameProperties);
expect(tree).to.deep.equal({
"w:framePr": {
_attr: {
"w:h": 1000,
"w:hAnchor": "margin",
"w:vAnchor": "margin",
"w:w": 4000,
"w:x": 1000,
"w:y": 3000,
"w:hSpace": 100,
"w:vSpace": 200,
}, },
}); },
}); });
}); });
}); });

133
src/file/paragraph/frame/frame-properties.ts
View File

@ -1,7 +1,7 @@
// http://officeopenxml.com/WPparagraph-textFrames.php // http://officeopenxml.com/WPparagraph-textFrames.php
import { HorizontalPositionAlign, VerticalPositionAlign } from "@file/shared/alignment"; import { HorizontalPositionAlign, VerticalPositionAlign } from "@file/shared/alignment";
import { HeightRule } from "@file/table"; import { HeightRule } from "@file/table";
import { XmlAttributeComponent, XmlComponent } from "@file/xml-components"; import { BuilderElement, XmlComponent } from "@file/xml-components";
export const DropCapType = { export const DropCapType = {
NONE: "none", NONE: "none",
@ -44,6 +44,7 @@ interface IBaseFrameOptions {
} }
export interface IXYFrameOptions extends IBaseFrameOptions { export interface IXYFrameOptions extends IBaseFrameOptions {
readonly type: "absolute";
readonly position: { readonly position: {
readonly x: number; readonly x: number;
readonly y: number; readonly y: number;
@ -51,6 +52,7 @@ export interface IXYFrameOptions extends IBaseFrameOptions {
} }
export interface IAlignmentFrameOptions extends IBaseFrameOptions { export interface IAlignmentFrameOptions extends IBaseFrameOptions {
readonly type: "alignment";
readonly alignment: { readonly alignment: {
readonly x: (typeof HorizontalPositionAlign)[keyof typeof HorizontalPositionAlign]; readonly x: (typeof HorizontalPositionAlign)[keyof typeof HorizontalPositionAlign];
readonly y: (typeof VerticalPositionAlign)[keyof typeof VerticalPositionAlign]; readonly y: (typeof VerticalPositionAlign)[keyof typeof VerticalPositionAlign];
@ -61,7 +63,24 @@ export interface IAlignmentFrameOptions extends IBaseFrameOptions {
// https://stackoverflow.com/q/46370222/3481582 // https://stackoverflow.com/q/46370222/3481582
export type IFrameOptions = IXYFrameOptions | IAlignmentFrameOptions; export type IFrameOptions = IXYFrameOptions | IAlignmentFrameOptions;
export class FramePropertiesAttributes extends XmlAttributeComponent<{ // <xsd:complexType name="CT_FramePr">
// <xsd:attribute name="dropCap" type="ST_DropCap" use="optional"/>
// <xsd:attribute name="lines" type="ST_DecimalNumber" use="optional"/>
// <xsd:attribute name="w" type="s:ST_TwipsMeasure" use="optional"/>
// <xsd:attribute name="h" type="s:ST_TwipsMeasure" use="optional"/>
// <xsd:attribute name="vSpace" type="s:ST_TwipsMeasure" use="optional"/>
// <xsd:attribute name="hSpace" type="s:ST_TwipsMeasure" use="optional"/>
// <xsd:attribute name="wrap" type="ST_Wrap" use="optional"/>
// <xsd:attribute name="hAnchor" type="ST_HAnchor" use="optional"/>
// <xsd:attribute name="vAnchor" type="ST_VAnchor" use="optional"/>
// <xsd:attribute name="x" type="ST_SignedTwipsMeasure" use="optional"/>
// <xsd:attribute name="xAlign" type="s:ST_XAlign" use="optional"/>
// <xsd:attribute name="y" type="ST_SignedTwipsMeasure" use="optional"/>
// <xsd:attribute name="yAlign" type="s:ST_YAlign" use="optional"/>
// <xsd:attribute name="hRule" type="ST_HeightRule" use="optional"/>
// <xsd:attribute name="anchorLock" type="s:ST_OnOff" use="optional"/>
// </xsd:complexType>
type FramePropertiesAttributes = {
readonly anchorLock?: boolean; readonly anchorLock?: boolean;
readonly dropCap?: (typeof DropCapType)[keyof typeof DropCapType]; readonly dropCap?: (typeof DropCapType)[keyof typeof DropCapType];
readonly width: number; readonly width: number;
@ -77,47 +96,71 @@ export class FramePropertiesAttributes extends XmlAttributeComponent<{
readonly rule?: (typeof HeightRule)[keyof typeof HeightRule]; readonly rule?: (typeof HeightRule)[keyof typeof HeightRule];
readonly alignmentX?: (typeof HorizontalPositionAlign)[keyof typeof HorizontalPositionAlign]; readonly alignmentX?: (typeof HorizontalPositionAlign)[keyof typeof HorizontalPositionAlign];
readonly alignmentY?: (typeof VerticalPositionAlign)[keyof typeof VerticalPositionAlign]; readonly alignmentY?: (typeof VerticalPositionAlign)[keyof typeof VerticalPositionAlign];
}> { };
protected readonly xmlKeys = {
anchorLock: "w:anchorLock",
dropCap: "w:dropCap",
width: "w:w",
height: "w:h",
x: "w:x",
y: "w:y",
anchorHorizontal: "w:hAnchor",
anchorVertical: "w:vAnchor",
spaceHorizontal: "w:hSpace",
spaceVertical: "w:vSpace",
rule: "w:hRule",
alignmentX: "w:xAlign",
alignmentY: "w:yAlign",
lines: "w:lines",
wrap: "w:wrap",
};
}
export class FrameProperties extends XmlComponent { export const createFrameProperties = (options: IFrameOptions): XmlComponent =>
public constructor(options: IFrameOptions) { new BuilderElement<FramePropertiesAttributes>({
super("w:framePr"); name: "w:framePr",
this.root.push( attributes: {
new FramePropertiesAttributes({ anchorLock: {
anchorLock: options.anchorLock, key: "w:anchorLock",
dropCap: options.dropCap, value: options.anchorLock,
width: options.width, },
height: options.height, dropCap: {
x: (options as IXYFrameOptions).position ? (options as IXYFrameOptions).position.x : undefined, key: "w:dropCap",
y: (options as IXYFrameOptions).position ? (options as IXYFrameOptions).position.y : undefined, value: options.dropCap,
anchorHorizontal: options.anchor.horizontal, },
anchorVertical: options.anchor.vertical, width: {
spaceHorizontal: options.space?.horizontal, key: "w:w",
spaceVertical: options.space?.vertical, value: options.width,
rule: options.rule, },
alignmentX: (options as IAlignmentFrameOptions).alignment ? (options as IAlignmentFrameOptions).alignment.x : undefined, height: {
alignmentY: (options as IAlignmentFrameOptions).alignment ? (options as IAlignmentFrameOptions).alignment.y : undefined, key: "w:h",
lines: options.lines, value: options.height,
wrap: options.wrap, },
}), x: {
); key: "w:x",
} value: (options as IXYFrameOptions).position ? (options as IXYFrameOptions).position.x : undefined,
} },
y: {
key: "w:y",
value: (options as IXYFrameOptions).position ? (options as IXYFrameOptions).position.y : undefined,
},
anchorHorizontal: {
key: "w:hAnchor",
value: options.anchor.horizontal,
},
anchorVertical: {
key: "w:vAnchor",
value: options.anchor.vertical,
},
spaceHorizontal: {
key: "w:hSpace",
value: options.space?.horizontal,
},
spaceVertical: {
key: "w:vSpace",
value: options.space?.vertical,
},
rule: {
key: "w:hRule",
value: options.rule,
},
alignmentX: {
key: "w:xAlign",
value: (options as IAlignmentFrameOptions).alignment ? (options as IAlignmentFrameOptions).alignment.x : undefined,
},
alignmentY: {
key: "w:yAlign",
value: (options as IAlignmentFrameOptions).alignment ? (options as IAlignmentFrameOptions).alignment.y : undefined,
},
lines: {
key: "w:lines",
value: options.lines,
},
wrap: {
key: "w:wrap",
value: options.wrap,
},
},
});

7
src/file/paragraph/paragraph.spec.ts
View File

@ -890,10 +890,7 @@ describe("Paragraph", () => {
it("should set frame attribute", () => { it("should set frame attribute", () => {
const paragraph = new Paragraph({ const paragraph = new Paragraph({
frame: { frame: {
position: { type: "alignment",
x: 1000,
y: 3000,
},
width: 4000, width: 4000,
height: 1000, height: 1000,
anchor: { anchor: {
@ -918,9 +915,7 @@ describe("Paragraph", () => {
"w:hAnchor": "margin", "w:hAnchor": "margin",
"w:vAnchor": "margin", "w:vAnchor": "margin",
"w:w": 4000, "w:w": 4000,
"w:x": 1000,
"w:xAlign": "center", "w:xAlign": "center",
"w:y": 3000,
"w:yAlign": "top", "w:yAlign": "top",
}, },
}, },

4
src/file/paragraph/properties.ts
View File

@ -13,7 +13,7 @@ import { HeadingLevel, Style } from "./formatting/style";
import { TabStop, TabStopDefinition, TabStopType } from "./formatting/tab-stop"; import { TabStop, TabStopDefinition, TabStopType } from "./formatting/tab-stop";
import { NumberProperties } from "./formatting/unordered-list"; import { NumberProperties } from "./formatting/unordered-list";
import { WordWrap } from "./formatting/word-wrap"; import { WordWrap } from "./formatting/word-wrap";
import { FrameProperties, IFrameOptions } from "./frame/frame-properties"; import { createFrameProperties, IFrameOptions } from "./frame/frame-properties";
import { OutlineLevel } from "./links"; import { OutlineLevel } from "./links";
import { IRunOptions, RunProperties } from "."; import { IRunOptions, RunProperties } from ".";
@ -117,7 +117,7 @@ export class ParagraphProperties extends IgnoreIfEmptyXmlComponent {
} }
if (options.frame) { if (options.frame) {
this.push(new FrameProperties(options.frame)); this.push(createFrameProperties(options.frame));
} }
if (options.widowControl !== undefined) { if (options.widowControl !== undefined) {