feat: basic wps text box support

.npmrc

@@ -1 +1 @@
-registry=https://registry.npmjs.org/
+@feecompass:registry=https://npm.pkg.github.com

package.json

@@ -1,6 +1,6 @@
 {
-    "name": "docx",
-    "version": "9.5.1",
+    "name": "@feecompass/docx",
+    "version": "9.6.0",
     "description": "Easily generate .docx files with JS/TS with a nice declarative API. Works for Node and on the Browser.",
     "type": "module",
     "main": "dist/index.umd.cjs",
@@ -43,7 +43,7 @@
     ],
     "repository": {
         "type": "git",
-        "url": "git+https://github.com/dolanmiu/docx.git"
+        "url": "https://github.com/feecompass/docx.git"
     },
     "keywords": [
         "docx",

src/file/drawing/anchor/anchor.ts

@@ -1,5 +1,5 @@
 // http://officeopenxml.com/drwPicFloating.php
-import { IMediaData, IMediaDataTransformation } from "@file/media";
+import { IExtendedMediaData, IMediaDataTransformation } from "@file/media";
 import { XmlComponent } from "@file/xml-components";
 
 import { IDrawingOptions } from "../drawing";
@@ -43,7 +43,7 @@ export class Anchor extends XmlComponent {
         transform,
         drawingOptions,
     }: {
-        readonly mediaData: IMediaData;
+        readonly mediaData: IExtendedMediaData;
         readonly transform: IMediaDataTransformation;
         readonly drawingOptions: IDrawingOptions;
     }) {
@@ -101,6 +101,6 @@ export class Anchor extends XmlComponent {
 
         this.root.push(new DocProperties(drawingOptions.docProperties));
         this.root.push(createGraphicFrameProperties());
-        this.root.push(new Graphic({ mediaData, transform, outline: drawingOptions.outline }));
+        this.root.push(new Graphic({ mediaData, transform, outline: drawingOptions.outline, solidFill: drawingOptions.solidFill }));
     }
 }

src/file/drawing/doc-properties/doc-properties.ts

@@ -21,18 +21,19 @@ export type DocPropertiesOptions = {
     readonly name: string;
     readonly description?: string;
     readonly title?: string;
+    readonly id?: string;
 };
 
 export class DocProperties extends XmlComponent {
     private readonly docPropertiesUniqueNumericId = docPropertiesUniqueNumericIdGen();
 
-    public constructor({ name, description, title }: DocPropertiesOptions = { name: "", description: "", title: "" }) {
+    public constructor({ name, description, title, id }: DocPropertiesOptions = { name: "", description: "", title: "" }) {
         super("wp:docPr");
 
         const attributes: Record<string, { readonly key: string; readonly value: string | number }> = {
             id: {
                 key: "id",
-                value: this.docPropertiesUniqueNumericId(),
+                value: id ?? this.docPropertiesUniqueNumericId(),
             },
             name: {
                 key: "name",

src/file/drawing/drawing.ts

@@ -1,11 +1,12 @@
-import { IMediaData } from "@file/media";
+import { IExtendedMediaData } from "@file/media";
 import { XmlComponent } from "@file/xml-components";
 
 import { Anchor } from "./anchor";
 import { DocPropertiesOptions } from "./doc-properties/doc-properties";
 import { IFloating } from "./floating";
 import { createInline } from "./inline";
 import { OutlineOptions } from "./inline/graphic/graphic-data/pic/shape-properties/outline/outline";
+import { SolidFillOptions } from "./inline/graphic/graphic-data/pic/shape-properties/outline/solid-fill";
 
 export type IDistance = {
     readonly distT?: number;
@@ -18,6 +19,7 @@ export type IDrawingOptions = {
     readonly floating?: IFloating;
     readonly docProperties?: DocPropertiesOptions;
     readonly outline?: OutlineOptions;
+    readonly solidFill?: SolidFillOptions;
 };
 
 // <xsd:complexType name="CT_Drawing">
@@ -28,7 +30,7 @@ export type IDrawingOptions = {
 // </xsd:complexType>
 
 export class Drawing extends XmlComponent {
-    public constructor(imageData: IMediaData, drawingOptions: IDrawingOptions = {}) {
+    public constructor(imageData: IExtendedMediaData, drawingOptions: IDrawingOptions = {}) {
         super("w:drawing");
 
         if (!drawingOptions.floating) {
@@ -38,6 +40,7 @@ export class Drawing extends XmlComponent {
                     transform: imageData.transformation,
                     docProperties: drawingOptions.docProperties,
                     outline: drawingOptions.outline,
+                    solidFill: drawingOptions.solidFill,
                 }),
             );
         } else {

src/file/drawing/inline/graphic/graphic-data/graphic-data.ts

@@ -1,32 +1,77 @@
-import { IMediaData, IMediaDataTransformation } from "@file/media";
+import { WpsShape } from "@file/drawing/inline/graphic/graphic-data/wps/wps-shape";
+import { IExtendedMediaData, IMediaData, IMediaDataTransformation, WpgMediaData } from "@file/media";
 import { XmlComponent } from "@file/xml-components";
 
 import { GraphicDataAttributes } from "./graphic-data-attribute";
 import { Pic } from "./pic";
 import { OutlineOptions } from "./pic/shape-properties/outline/outline";
+import { SolidFillOptions } from "./pic/shape-properties/outline/solid-fill";
+import { WpgGroup } from "./wpg/wpg-group";
 
 export class GraphicData extends XmlComponent {
-    private readonly pic: Pic;
+    // private readonly pic: Pic;
 
     public constructor({
         mediaData,
         transform,
         outline,
+        solidFill,
     }: {
-        readonly mediaData: IMediaData;
+        readonly mediaData: IExtendedMediaData;
         readonly transform: IMediaDataTransformation;
         readonly outline?: OutlineOptions;
+        readonly solidFill?: SolidFillOptions;
     }) {
         super("a:graphicData");
 
-        this.root.push(
-            new GraphicDataAttributes({
-                uri: "http://schemas.openxmlformats.org/drawingml/2006/picture",
-            }),
-        );
+        if (mediaData.type === "wps") {
+            this.root.push(
+                new GraphicDataAttributes({
+                    uri: "http://schemas.microsoft.com/office/word/2010/wordprocessingShape",
+                }),
+            );
+            const wps = new WpsShape({ ...mediaData.data, transformation: transform, outline, solidFill });
+            this.root.push(wps);
+        } else if (mediaData.type === "wpg") {
+            this.root.push(
+                new GraphicDataAttributes({
+                    uri: "http://schemas.microsoft.com/office/word/2010/wordprocessingGroup",
+                }),
+            );
+            const md = mediaData as WpgMediaData;
+            const children = md.children.map((child) => {
+                // eslint-disable-next-line unicorn/prefer-ternary
+                if (child.type === "wps") {
+                    return new WpsShape({
+                        ...child.data,
+                        transformation: child.transformation,
+                        outline: child.outline,
+                        solidFill: child.solidFill,
+                    });
+                } else {
+                    return new Pic({ mediaData: child, transform: child.transformation, outline: child.outline });
+                }
+            });
+            // const wps = new WpsShape({ ...mediaData.data, transformation: transform, outline, solidFill });
+            const wpg = new WpgGroup({ children, transformation: transform });
+            this.root.push(wpg);
+        } else {
+            this.root.push(
+                new GraphicDataAttributes({
+                    uri: "http://schemas.openxmlformats.org/drawingml/2006/picture",
+                }),
+            );
+            const md = mediaData as IMediaData;
+            const pic = new Pic({ mediaData: md, transform, outline });
+            this.root.push(pic);
+        }
 
-        this.pic = new Pic({ mediaData, transform, outline });
-
-        this.root.push(this.pic);
+        // if (mediaData.type !== "wps") {
+        //     const pic = new Pic({ mediaData, transform, outline });
+        //     this.root.push(pic);
+        // } else {
+        //     const wps = new WpsShape({ ...mediaData.data, transformation: transform, outline, solidFill });
+        //     this.root.push(wps);
+        // }
     }
 }

src/file/drawing/inline/graphic/graphic-data/pic/pic.ts

@@ -28,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, outline }));
+        this.root.push(new ShapeProperties({ element: "pic", transform, outline }));
     }
 }

src/file/drawing/inline/graphic/graphic-data/pic/shape-properties/form/form.ts

@@ -20,6 +20,7 @@ export class FormAttributes extends XmlAttributeComponent<{
 
 export class Form extends XmlComponent {
     private readonly extents: Extents;
+    private readonly offset: Offset;
 
     public constructor(options: IMediaDataTransformation) {
         super("a:xfrm");
@@ -32,9 +33,10 @@ export class Form extends XmlComponent {
             }),
         );
 
+        this.offset = new Offset(options.offset?.emus?.x, options.offset?.emus?.y);
         this.extents = new Extents(options.emus.x, options.emus.y);
 
-        this.root.push(new Offset());
+        this.root.push(this.offset);
         this.root.push(this.extents);
     }
 }

src/file/drawing/inline/graphic/graphic-data/pic/shape-properties/form/offset/off.ts

@@ -4,13 +4,13 @@ import { XmlComponent } from "@file/xml-components";
 import { OffsetAttributes } from "./off-attributes";
 
 export class Offset extends XmlComponent {
-    public constructor() {
+    public constructor(x: number | undefined, y: number | undefined) {
         super("a:off");
 
         this.root.push(
             new OffsetAttributes({
-                x: 0,
-                y: 0,
+                x: x ?? 0,
+                y: y ?? 0,
             }),
         );
     }

src/file/drawing/inline/graphic/graphic-data/pic/shape-properties/shape-properties.ts

@@ -5,14 +5,25 @@ import { XmlComponent } from "@file/xml-components";
 import { Form } from "./form";
 import { createNoFill } from "./outline/no-fill";
 import { OutlineOptions, createOutline } from "./outline/outline";
+import { SolidFillOptions, createSolidFill } from "./outline/solid-fill";
 import { PresetGeometry } from "./preset-geometry/preset-geometry";
 import { ShapePropertiesAttributes } from "./shape-properties-attributes";
 
 export class ShapeProperties extends XmlComponent {
     private readonly form: Form;
 
-    public constructor({ outline, transform }: { readonly outline?: OutlineOptions; readonly transform: IMediaDataTransformation }) {
-        super("pic:spPr");
+    public constructor({
+        element,
+        outline,
+        solidFill,
+        transform,
+    }: {
+        readonly element: string;
+        readonly outline?: OutlineOptions;
+        readonly solidFill?: SolidFillOptions;
+        readonly transform: IMediaDataTransformation;
+    }) {
+        super(`${element}:spPr`);
 
         this.root.push(
             new ShapePropertiesAttributes({
@@ -29,5 +40,9 @@ export class ShapeProperties extends XmlComponent {
             this.root.push(createNoFill());
             this.root.push(createOutline(outline));
         }
+
+        if (solidFill) {
+            this.root.push(createSolidFill(solidFill));
+        }
     }
 }

src/file/drawing/inline/graphic/graphic-data/wpg/wpg-group.ts

@@ -0,0 +1,49 @@
+import { IMediaDataTransformation } from "@file/media";
+import { XmlComponent } from "@file/xml-components";
+
+import { Pic } from "../pic";
+import { Form } from "../pic/shape-properties/form";
+import { WpsShape } from "../wps/wps-shape";
+
+export type GroupChild = WpsShape | Pic;
+
+export type WpgGroupCoreOptions = {
+    readonly children: readonly GroupChild[];
+    // readonly nonVisualProperties?: INonVisualShapePropertiesOptions;
+    // readonly bodyProperties?: IBodyPropertiesOptions;
+};
+
+export type WpgGroupOptions = WpgGroupCoreOptions & {
+    readonly transformation: IMediaDataTransformation;
+};
+
+export class GroupProperties extends XmlComponent {
+    private readonly form: Form;
+
+    public constructor({ transform }: { readonly transform: IMediaDataTransformation }) {
+        super(`wpg:grpSpPr`);
+
+        this.form = new Form(transform);
+        this.root.push(this.form);
+    }
+}
+
+export class NonVisualGroupProperties extends XmlComponent {
+    public constructor() {
+        super("wpg:cNvGrpSpPr");
+    }
+}
+
+export class WpgGroup extends XmlComponent {
+    public constructor(options: WpgGroupOptions) {
+        super("wpg:wgp");
+
+        this.root.push(new NonVisualGroupProperties());
+        this.root.push(
+            new GroupProperties({
+                transform: options.transformation,
+            }),
+        );
+        this.root.push(...options.children);
+    }
+}