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 {
AlignmentType,
BorderStyle,
Document,
FrameAnchorType,
@ -20,6 +21,7 @@ const doc = new Document({
children: [
new Paragraph({
frame: {
type: "absolute",
position: {
x: 1000,
y: 3000,
@ -30,6 +32,54 @@ const doc = new Document({
horizontal: 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: {
x: HorizontalPositionAlign.CENTER,
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,
}),
],
}),
],
},
],

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

@ -3,12 +3,12 @@ import { describe, expect, it } from "vitest";
import { Formatter } from "@export/formatter";
import { HorizontalPositionAlign, VerticalPositionAlign } from "@file/shared";
import { FrameAnchorType, FrameProperties } from "./frame-properties";
import { FrameAnchorType, createFrameProperties } from "./frame-properties";
describe("FrameProperties", () => {
describe("#constructor()", () => {
describe("createFrameProperties", () => {
it("should create", () => {
const currentFrameProperties = new FrameProperties({
const currentFrameProperties = createFrameProperties({
type: "absolute",
position: {
x: 1000,
y: 3000,
@ -19,10 +19,6 @@ describe("FrameProperties", () => {
horizontal: FrameAnchorType.MARGIN,
vertical: FrameAnchorType.MARGIN,
},
alignment: {
x: HorizontalPositionAlign.CENTER,
y: VerticalPositionAlign.TOP,
},
});
const tree = new Formatter().format(currentFrameProperties);
@ -34,16 +30,15 @@ describe("FrameProperties", () => {
"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 currentFrameProperties = new FrameProperties({
const currentFrameProperties = createFrameProperties({
type: "absolute",
position: {
x: 1000,
y: 3000,
@ -54,10 +49,6 @@ describe("FrameProperties", () => {
horizontal: FrameAnchorType.MARGIN,
vertical: FrameAnchorType.MARGIN,
},
alignment: {
x: HorizontalPositionAlign.CENTER,
y: VerticalPositionAlign.TOP,
},
space: {
horizontal: 100,
vertical: 200,
@ -73,9 +64,7 @@ describe("FrameProperties", () => {
"w:vAnchor": "margin",
"w:w": 4000,
"w:x": 1000,
"w:xAlign": "center",
"w:y": 3000,
"w:yAlign": "top",
"w:hSpace": 100,
"w:vSpace": 200,
},
@ -84,7 +73,8 @@ describe("FrameProperties", () => {
});
it("should create without x and y", () => {
const currentFrameProperties = new FrameProperties({
const currentFrameProperties = createFrameProperties({
type: "alignment",
width: 4000,
height: 1000,
anchor: {
@ -119,7 +109,8 @@ describe("FrameProperties", () => {
});
it("should create without alignments", () => {
const currentFrameProperties = new FrameProperties({
const currentFrameProperties = createFrameProperties({
type: "absolute",
position: {
x: 1000,
y: 3000,
@ -153,4 +144,3 @@ describe("FrameProperties", () => {
});
});
});
});

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

@ -1,7 +1,7 @@
// http://officeopenxml.com/WPparagraph-textFrames.php
import { HorizontalPositionAlign, VerticalPositionAlign } from "@file/shared/alignment";
import { HeightRule } from "@file/table";
import { XmlAttributeComponent, XmlComponent } from "@file/xml-components";
import { BuilderElement, XmlComponent } from "@file/xml-components";
export const DropCapType = {
NONE: "none",
@ -44,6 +44,7 @@ interface IBaseFrameOptions {
}
export interface IXYFrameOptions extends IBaseFrameOptions {
readonly type: "absolute";
readonly position: {
readonly x: number;
readonly y: number;
@ -51,6 +52,7 @@ export interface IXYFrameOptions extends IBaseFrameOptions {
}
export interface IAlignmentFrameOptions extends IBaseFrameOptions {
readonly type: "alignment";
readonly alignment: {
readonly x: (typeof HorizontalPositionAlign)[keyof typeof HorizontalPositionAlign];
readonly y: (typeof VerticalPositionAlign)[keyof typeof VerticalPositionAlign];
@ -61,7 +63,24 @@ export interface IAlignmentFrameOptions extends IBaseFrameOptions {
// https://stackoverflow.com/q/46370222/3481582
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 dropCap?: (typeof DropCapType)[keyof typeof DropCapType];
readonly width: number;
@ -77,47 +96,71 @@ export class FramePropertiesAttributes extends XmlAttributeComponent<{
readonly rule?: (typeof HeightRule)[keyof typeof HeightRule];
readonly alignmentX?: (typeof HorizontalPositionAlign)[keyof typeof HorizontalPositionAlign];
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 {
public constructor(options: IFrameOptions) {
super("w:framePr");
this.root.push(
new FramePropertiesAttributes({
anchorLock: options.anchorLock,
dropCap: options.dropCap,
width: options.width,
height: options.height,
x: (options as IXYFrameOptions).position ? (options as IXYFrameOptions).position.x : undefined,
y: (options as IXYFrameOptions).position ? (options as IXYFrameOptions).position.y : undefined,
anchorHorizontal: options.anchor.horizontal,
anchorVertical: options.anchor.vertical,
spaceHorizontal: options.space?.horizontal,
spaceVertical: options.space?.vertical,
rule: options.rule,
alignmentX: (options as IAlignmentFrameOptions).alignment ? (options as IAlignmentFrameOptions).alignment.x : undefined,
alignmentY: (options as IAlignmentFrameOptions).alignment ? (options as IAlignmentFrameOptions).alignment.y : undefined,
lines: options.lines,
wrap: options.wrap,
}),
);
}
}
export const createFrameProperties = (options: IFrameOptions): XmlComponent =>
new BuilderElement<FramePropertiesAttributes>({
name: "w:framePr",
attributes: {
anchorLock: {
key: "w:anchorLock",
value: options.anchorLock,
},
dropCap: {
key: "w:dropCap",
value: options.dropCap,
},
width: {
key: "w:w",
value: options.width,
},
height: {
key: "w:h",
value: options.height,
},
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", () => {
const paragraph = new Paragraph({
frame: {
position: {
x: 1000,
y: 3000,
},
type: "alignment",
width: 4000,
height: 1000,
anchor: {
@ -918,9 +915,7 @@ describe("Paragraph", () => {
"w:hAnchor": "margin",
"w:vAnchor": "margin",
"w:w": 4000,
"w:x": 1000,
"w:xAlign": "center",
"w:y": 3000,
"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 { NumberProperties } from "./formatting/unordered-list";
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 { IRunOptions, RunProperties } from ".";
@ -117,7 +117,7 @@ export class ParagraphProperties extends IgnoreIfEmptyXmlComponent {
}
if (options.frame) {
this.push(new FrameProperties(options.frame));
this.push(createFrameProperties(options.frame));
}
if (options.widowControl !== undefined) {