Add image borders (#2472)

* Add image borders * Fix prettier * Fix spelling * Fix spelling * Finish feature * Update demo * Try and fix demo 14
dolanmiu · Dec 27, 2023 · d23f453 · d23f453
1 parent 6c28f8b
commit d23f453
Show file tree

Hide file tree

Showing 27 changed files with 571 additions and 138 deletions.
diff --git a/.cspell.json b/.cspell.json
@@ -54,7 +54,8 @@
         "\\.to\\.include\\.members\\(\\[[^\\]]+]\\)",
         "/new [a-zA-Z]+\\({[^£]+}\\)/g",
         "/<element name=\"[a-z]+\"/gi",
-        "/<attribute name=\"[a-z]+\"/gi"
+        "/<attribute name=\"[a-z]+\"/gi",
+        "/key: \".+\"/"
     ],
     "ignorePaths": ["package.json", "docs/api", "*.docx", "build"],
     "allowCompoundWords": true,

diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -92,6 +92,7 @@ rules:
           format:
               - camelCase
               - PascalCase
+              - UPPER_CASE  # for constants
           filter:
               regex: (^[a-z]+:.+)|_attr|[0-9]
               match: false

diff --git a/demo/14-page-numbers.ts b/demo/14-page-numbers.ts
@@ -121,9 +121,11 @@ const createLoremIpsumParagraphs = () => [
         "Vivamus euismod, sem eget molestie rhoncus, metus dui laoreet lacus, et lobortis est metus ut felis. Aenean imperdiet lacus nunc, vitae molestie orci ultrices nec. Cras egestas maximus diam, vitae efficitur nisl luctus imperdiet. Nulla pellentesque sodales ante, nec facilisis turpis. Vivamus at hendrerit enim, ac dictum lorem. Cras ",
     ),
     new Paragraph(
-        "congue accumsan dui, non pretium sem auctor quis. Nunc a mauris vehicula, elementum ex vitae, sollicitudin eros. Nunc non sapien vitae justo sodales condimentum. Praesent nisl felis, tristique ac odio at, rhoncus porttitor orci. Morbi egestas placerat iaculis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In at lorem nec neque faucibus ultricies ut in ipsum.",
+        "congue accumsan dui, non pretium sem auctor quis. Nunc a mauris vehicula, elementum ex vitae, sollicitudin eros. Nunc non sapien vitae justo sodales condimentum. Praesent nisl felis, tristique ac odio at, rhoncus porttitor orci. Morbi egestas placerat iaculis.",
+    ),
+    new Paragraph(
+        "Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In at lorem nec neque faucibus ultricies ut in ipsum.",
     ),
-
     new Paragraph(
         "Suspendisse fermentum feugiat augue eu convallis. Maecenas eros velit, efficitur sit amet posuere sed, tristique sit amet nisi. Donec vel convallis justo, id tempor neque. Nunc pulvinar maximus nulla, vitae congue lacus cursus ut. Morbi at mollis est, a vehicula nisi. Cras venenatis nibh vel massa interdum commodo. Nulla mattis ",
     ),

diff --git a/demo/5-images.ts b/demo/5-images.ts
@@ -2,6 +2,7 @@
 
 import * as fs from "fs";
 import {
+    convertMillimetersToTwip,
     Document,
     HorizontalPositionAlign,
     HorizontalPositionRelativeFrom,
@@ -41,6 +42,11 @@ const doc = new Document({
                                 width: 100,
                                 height: 100,
                             },
+                            outline: {
+                                type: "solidFill",
+                                solidFillType: "rgb",
+                                value: "FF0000",
+                            },
                         }),
                     ],
                 }),
@@ -55,6 +61,12 @@ const doc = new Document({
                                     vertical: true,
                                 },
                             },
+                            outline: {
+                                type: "solidFill",
+                                solidFillType: "rgb",
+                                value: "0000FF",
+                                width: convertMillimetersToTwip(600),
+                            },
                         }),
                     ],
                 }),

diff --git a/src/file/drawing/anchor/anchor.spec.ts b/src/file/drawing/anchor/anchor.spec.ts
@@ -9,10 +9,10 @@ import { TextWrappingType } from "../text-wrap";
 import { Anchor } from "./anchor";
 
 const createAnchor = (drawingOptions: IDrawingOptions): Anchor =>
-    new Anchor(
-        {
+    new Anchor({
+        mediaData: {
             fileName: "test.png",
-            stream: new Buffer(""),
+            stream: Buffer.from(""),
             transformation: {
                 pixels: {
                     x: 0,
@@ -24,7 +24,7 @@ const createAnchor = (drawingOptions: IDrawingOptions): Anchor =>
                 },
             },
         },
-        {
+        transform: {
             pixels: {
                 x: 100,
                 y: 100,
@@ -35,7 +35,7 @@ const createAnchor = (drawingOptions: IDrawingOptions): Anchor =>
             },
         },
         drawingOptions,
-    );
+    });
 
 describe("Anchor", () => {
     let anchor: Anchor;

diff --git a/src/file/drawing/anchor/anchor.ts b/src/file/drawing/anchor/anchor.ts
@@ -6,7 +6,7 @@ import { HorizontalPosition, IFloating, SimplePos, VerticalPosition } from "../f
 import { Graphic } from "../inline/graphic";
 import { TextWrappingType, WrapNone, WrapSquare, WrapTight, WrapTopAndBottom } from "../text-wrap";
 import { DocProperties } from "./../doc-properties/doc-properties";
-import { EffectExtent } from "./../effect-extent/effect-extent";
+import { createEffectExtent } from "./../effect-extent/effect-extent";
 import { Extent } from "./../extent/extent";
 import { GraphicFrameProperties } from "./../graphic-frame/graphic-frame-properties";
 import { AnchorAttributes } from "./anchor-attributes";
@@ -37,7 +37,15 @@ import { AnchorAttributes } from "./anchor-attributes";
 //     <xsd:attribute name="allowOverlap" type="xsd:boolean" use="required"/>
 // </xsd:complexType>
 export class Anchor extends XmlComponent {
-    public constructor(mediaData: IMediaData, transform: IMediaDataTransformation, drawingOptions: IDrawingOptions) {
+    public constructor({
+        mediaData,
+        transform,
+        drawingOptions,
+    }: {
+        readonly mediaData: IMediaData;
+        readonly transform: IMediaDataTransformation;
+        readonly drawingOptions: IDrawingOptions;
+    }) {
         super("wp:anchor");
 
         const floating: IFloating = {
@@ -69,7 +77,7 @@ export class Anchor extends XmlComponent {
         this.root.push(new HorizontalPosition(floating.horizontalPosition));
         this.root.push(new VerticalPosition(floating.verticalPosition));
         this.root.push(new Extent(transform.emus.x, transform.emus.y));
-        this.root.push(new EffectExtent());
+        this.root.push(createEffectExtent({ top: 0, right: 0, bottom: 0, left: 0 }));
 
         if (drawingOptions.floating !== undefined && drawingOptions.floating.wrap !== undefined) {
             switch (drawingOptions.floating.wrap.type) {
@@ -92,6 +100,6 @@ export class Anchor extends XmlComponent {
 
         this.root.push(new DocProperties(drawingOptions.docProperties));
         this.root.push(new GraphicFrameProperties());
-        this.root.push(new Graphic(mediaData, transform));
+        this.root.push(new Graphic({ mediaData, transform, outline: drawingOptions.outline }));
     }
 }
diff --git a/src/file/drawing/drawing.ts b/src/file/drawing/drawing.ts
@@ -4,18 +4,20 @@ import { XmlComponent } from "@file/xml-components";
 import { Anchor } from "./anchor";
 import { DocPropertiesOptions } from "./doc-properties/doc-properties";
 import { IFloating } from "./floating";
-import { Inline } from "./inline";
+import { createInline } from "./inline";
+import { OutlineOptions } from "./inline/graphic/graphic-data/pic/shape-properties/outline/outline";
 
-export interface IDistance {
+export type IDistance = {
     readonly distT?: number;
     readonly distB?: number;
     readonly distL?: number;
     readonly distR?: number;
-}
+};
 
 export interface IDrawingOptions {
     readonly floating?: IFloating;
     readonly docProperties?: DocPropertiesOptions;
+    readonly outline?: OutlineOptions;
 }
 
 // <xsd:complexType name="CT_Drawing">
@@ -30,14 +32,16 @@ export class Drawing extends XmlComponent {
         super("w:drawing");
 
         if (!drawingOptions.floating) {
-            const inline = new Inline({
-                mediaData: imageData,
-                transform: imageData.transformation,
-                docProperties: drawingOptions.docProperties,
-            });
-            this.root.push(inline);
+            this.root.push(
+                createInline({
+                    mediaData: imageData,
+                    transform: imageData.transformation,
+                    docProperties: drawingOptions.docProperties,
+                    outline: drawingOptions.outline,
+                }),
+            );
         } else {
-            this.root.push(new Anchor(imageData, imageData.transformation, drawingOptions));
+            this.root.push(new Anchor({ mediaData: imageData, transform: imageData.transformation, drawingOptions }));
         }
     }
 }
diff --git a/src/file/drawing/effect-extent/effect-extent-attributes.ts b/src/file/drawing/effect-extent/effect-extent-attributes.ts
diff --git a/src/file/drawing/effect-extent/effect-extent.ts b/src/file/drawing/effect-extent/effect-extent.ts
@@ -1,17 +1,31 @@
-import { XmlComponent } from "@file/xml-components";
-import { EffectExtentAttributes } from "./effect-extent-attributes";
+import { BuilderElement, XmlComponent } from "@file/xml-components";
 
-export class EffectExtent extends XmlComponent {
-    public constructor() {
-        super("wp:effectExtent");
+export type EffectExtentAttributes = {
+    readonly top: number;
+    readonly right: number;
+    readonly bottom: number;
+    readonly left: number;
+};
 
-        this.root.push(
-            new EffectExtentAttributes({
-                b: 0,
-                l: 0,
-                r: 0,
-                t: 0,
-            }),
-        );
-    }
-}
+export const createEffectExtent = ({ top, right, bottom, left }: EffectExtentAttributes): XmlComponent =>
+    new BuilderElement<EffectExtentAttributes>({
+        name: "wp:effectExtent",
+        attributes: {
+            top: {
+                key: "t",
+                value: top,
+            },
+            right: {
+                key: "r",
+                value: right,
+            },
+            bottom: {
+                key: "b",
+                value: bottom,
+            },
+            left: {
+                key: "l",
+                value: left,
+            },
+        },
+    });
diff --git a/src/file/drawing/inline/graphic/graphic-data/graphic-data.ts b/src/file/drawing/inline/graphic/graphic-data/graphic-data.ts
@@ -3,11 +3,20 @@ import { XmlComponent } from "@file/xml-components";
 
 import { GraphicDataAttributes } from "./graphic-data-attribute";
 import { Pic } from "./pic";
+import { OutlineOptions } from "./pic/shape-properties/outline/outline";
 
 export class GraphicData extends XmlComponent {
     private readonly pic: Pic;
 
-    public constructor(mediaData: IMediaData, transform: IMediaDataTransformation) {
+    public constructor({
+        mediaData,
+        transform,
+        outline,
+    }: {
+        readonly mediaData: IMediaData;
+        readonly transform: IMediaDataTransformation;
+        readonly outline?: OutlineOptions;
+    }) {
         super("a:graphicData");
 
         this.root.push(
@@ -16,7 +25,7 @@ export class GraphicData extends XmlComponent {
             }),
         );
 
-        this.pic = new Pic(mediaData, transform);
+        this.pic = new Pic({ mediaData, transform, outline });
 
         this.root.push(this.pic);
     }

diff --git a/src/file/drawing/inline/graphic/graphic-data/pic/pic.ts b/src/file/drawing/inline/graphic/graphic-data/pic/pic.ts
@@ -6,9 +6,18 @@ import { BlipFill } from "./blip/blip-fill";
 import { NonVisualPicProperties } from "./non-visual-pic-properties/non-visual-pic-properties";
 import { PicAttributes } from "./pic-attributes";
 import { ShapeProperties } from "./shape-properties/shape-properties";
+import { OutlineOptions } from "./shape-properties/outline/outline";
 
 export class Pic extends XmlComponent {
-    public constructor(mediaData: IMediaData, transform: IMediaDataTransformation) {
+    public constructor({
+        mediaData,
+        transform,
+        outline,
+    }: {
+        readonly mediaData: IMediaData;
+        readonly transform: IMediaDataTransformation;
+        readonly outline?: OutlineOptions;
+    }) {
         super("pic:pic");
 
         this.root.push(
@@ -19,6 +28,6 @@ export class Pic extends XmlComponent {
 
         this.root.push(new NonVisualPicProperties());
         this.root.push(new BlipFill(mediaData));
-        this.root.push(new ShapeProperties(transform));
+        this.root.push(new ShapeProperties({ transform, outline }));
     }
 }
diff --git a/src/file/drawing/inline/graphic/graphic-data/pic/shape-properties/outline/no-fill.spec.ts b/src/file/drawing/inline/graphic/graphic-data/pic/shape-properties/outline/no-fill.spec.ts
@@ -2,12 +2,12 @@ import { describe, expect, it } from "vitest";
 
 import { Formatter } from "@export/formatter";
 
-import { NoFill } from "./no-fill";
+import { createNoFill } from "./no-fill";
 
 describe("NoFill", () => {
     describe("#constructor()", () => {
         it("should create", () => {
-            const tree = new Formatter().format(new NoFill());
+            const tree = new Formatter().format(createNoFill());
             expect(tree).to.deep.equal({
                 "a:noFill": {},
             });

diff --git a/src/file/drawing/inline/graphic/graphic-data/pic/shape-properties/outline/no-fill.ts b/src/file/drawing/inline/graphic/graphic-data/pic/shape-properties/outline/no-fill.ts
@@ -1,7 +1,3 @@
-import { XmlComponent } from "@file/xml-components";
+import { BuilderElement, XmlComponent } from "@file/xml-components";
 
-export class NoFill extends XmlComponent {
-    public constructor() {
-        super("a:noFill");
-    }
-}
+export const createNoFill = (): XmlComponent => new BuilderElement({ name: "a:noFill" });