Support image align (#564)

* support image align right

* add test case

* add PicAlign Center

* testcase update

* change fmt importing

* lint error update

* align setting move to child

docx-core/src/documents/elements/drawing.rs

@@ -89,6 +89,15 @@ impl BuildXML for Box<Drawing> {
                         )
                         .open_position_h(&format!("{}", p.relative_from_h));
 
+                    match p.position_h {
+                        DrawingPosition::Offset(x) => {
+                            let x = format!("{}", x as u32);
+                            b = b.pos_offset(&x).close();
+                        }
+                        DrawingPosition::Align(x) => {
+                            b = b.align(&x.to_string()).close();
+                        }
+                    }
                     if let DrawingPosition::Offset(x) = p.position_h {
                         let x = format!("{}", x as u32);
                         b = b.pos_offset(&x).close();
@@ -108,8 +117,13 @@ impl BuildXML for Box<Drawing> {
                     // Please see 20.4.2.7 extent (Drawing Object Size)
                     // One inch equates to 914400 EMUs and a centimeter is 360000
                     .wp_extent(&w, &h)
-                    .wp_effect_extent("0", "0", "0", "0")
+                    .wp_effect_extent("0", "0", "0", "0");
-                    .wrap_none()
+                if p.allow_overlap {
+                    b = b.wrap_none();
+                } else if p.position_type == DrawingPositionType::Anchor {
+                    b = b.wrap_square("bothSides");
+                }
+                b = b
                     .wp_doc_pr("1", "Figure")
                     .open_wp_c_nv_graphic_frame_pr()
                     .a_graphic_frame_locks(
@@ -151,6 +165,55 @@ mod tests {
         assert_eq!(
             str::from_utf8(&d).unwrap(),
             r#"<w:drawing>
+  <wp:inline distT="0" distB="0" distL="0" distR="0">
+    <wp:extent cx="3048000" cy="2286000" />
+    <wp:effectExtent b="0" l="0" r="0" t="0" />
+    <wp:docPr id="1" name="Figure" />
+    <wp:cNvGraphicFramePr>
+      <a:graphicFrameLocks xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" noChangeAspect="1" />
+    </wp:cNvGraphicFramePr>
+    <a:graphic xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main">
+      <a:graphicData uri="http://schemas.openxmlformats.org/drawingml/2006/picture"><pic:pic xmlns:pic="http://schemas.openxmlformats.org/drawingml/2006/picture">
+  <pic:nvPicPr>
+    <pic:cNvPr id="0" name="" />
+    <pic:cNvPicPr>
+      <a:picLocks noChangeAspect="1" noChangeArrowheads="1" />
+    </pic:cNvPicPr>
+  </pic:nvPicPr>
+  <pic:blipFill>
+    <a:blip r:embed="rIdImage123" />
+    <a:srcRect />
+    <a:stretch>
+      <a:fillRect />
+    </a:stretch>
+  </pic:blipFill>
+  <pic:spPr bwMode="auto">
+    <a:xfrm rot="0">
+      <a:off x="0" y="0" />
+      <a:ext cx="3048000" cy="2286000" />
+    </a:xfrm>
+    <a:prstGeom prst="rect">
+      <a:avLst />
+    </a:prstGeom>
+  </pic:spPr>
+</pic:pic></a:graphicData>
+    </a:graphic>
+  </wp:inline>
+</w:drawing>"#
+        );
+    }
+
+    #[test]
+    fn test_drawing_build_with_pic_overlap() {
+        use std::io::Read;
+
+        let mut img = std::fs::File::open("../images/cat_min.jpg").unwrap();
+        let mut buf = Vec::new();
+        let _ = img.read_to_end(&mut buf).unwrap();
+        let d = Box::new(Drawing::new().pic(Pic::new(&buf).overlapping())).build();
+        assert_eq!(
+            str::from_utf8(&d).unwrap(),
+            r#"<w:drawing>
   <wp:inline distT="0" distB="0" distL="0" distR="0">
     <wp:extent cx="3048000" cy="2286000" />
     <wp:effectExtent b="0" l="0" r="0" t="0" />
@@ -186,6 +249,67 @@ mod tests {
 </pic:pic></a:graphicData>
     </a:graphic>
   </wp:inline>
+</w:drawing>"#
+        );
+    }
+
+    #[test]
+    fn test_drawing_build_with_pic_align_right() {
+        use std::io::Read;
+
+        let mut img = std::fs::File::open("../images/cat_min.jpg").unwrap();
+        let mut buf = Vec::new();
+        let _ = img.read_to_end(&mut buf).unwrap();
+        let mut pic = Pic::new(&buf).floating();
+        pic = pic.relative_from_h(RelativeFromHType::Column);
+        pic = pic.relative_from_v(RelativeFromVType::Paragraph);
+        pic = pic.position_h(DrawingPosition::Align(PicAlign::Right));
+        let d = Box::new(Drawing::new().pic(pic)).build();
+        assert_eq!(
+            str::from_utf8(&d).unwrap(),
+            r#"<w:drawing>
+  <wp:anchor distT="0" distB="0" distL="0" distR="0" simplePos="0" allowOverlap="0" behindDoc="0" locked="0" layoutInCell="0" relativeHeight="190500">
+    <wp:simplePos x="0" y="0" />
+    <wp:positionH relativeFrom="column">
+      <wp:align>right</wp:align>
+    </wp:positionH>
+    <wp:positionV relativeFrom="paragraph">
+      <wp:posOffset>0</wp:posOffset>
+    </wp:positionV>
+    <wp:extent cx="3048000" cy="2286000" />
+    <wp:effectExtent b="0" l="0" r="0" t="0" />
+    <wp:wrapSquare wrapText="bothSides" />
+    <wp:docPr id="1" name="Figure" />
+    <wp:cNvGraphicFramePr>
+      <a:graphicFrameLocks xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" noChangeAspect="1" />
+    </wp:cNvGraphicFramePr>
+    <a:graphic xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main">
+      <a:graphicData uri="http://schemas.openxmlformats.org/drawingml/2006/picture"><pic:pic xmlns:pic="http://schemas.openxmlformats.org/drawingml/2006/picture">
+  <pic:nvPicPr>
+    <pic:cNvPr id="0" name="" />
+    <pic:cNvPicPr>
+      <a:picLocks noChangeAspect="1" noChangeArrowheads="1" />
+    </pic:cNvPicPr>
+  </pic:nvPicPr>
+  <pic:blipFill>
+    <a:blip r:embed="rIdImage123" />
+    <a:srcRect />
+    <a:stretch>
+      <a:fillRect />
+    </a:stretch>
+  </pic:blipFill>
+  <pic:spPr bwMode="auto">
+    <a:xfrm rot="0">
+      <a:off x="0" y="0" />
+      <a:ext cx="3048000" cy="2286000" />
+    </a:xfrm>
+    <a:prstGeom prst="rect">
+      <a:avLst />
+    </a:prstGeom>
+  </pic:spPr>
+</pic:pic></a:graphicData>
+    </a:graphic>
+  </wp:anchor>
 </w:drawing>"#
         );
     }

docx-core/src/documents/elements/pic.rs

@@ -126,6 +126,11 @@ impl Pic {
         self
     }
 
+    pub fn overlapping(mut self) -> Pic {
+        self.allow_overlap = true;
+        self
+    }
+
     pub fn offset_x(mut self, x: i32) -> Pic {
         self.position_h = DrawingPosition::Offset(x);
         self

docx-core/src/types/drawing_position.rs

@@ -1,4 +1,5 @@
 use serde::Serialize;
+use std::fmt;
 
 use wasm_bindgen::prelude::*;
 
@@ -18,10 +19,23 @@ pub enum DrawingPositionType {
 pub enum PicAlign {
     Left,
     Right,
+    Center,
     Bottom,
     Top,
 }
 
+impl fmt::Display for PicAlign {
+    fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
+        match *self {
+            PicAlign::Left => write!(f, "left"),
+            PicAlign::Right => write!(f, "right"),
+            PicAlign::Center => write!(f, "center"),
+            PicAlign::Bottom => write!(f, "bottom"),
+            PicAlign::Top => write!(f, "top"),
+        }
+    }
+}
+
 #[derive(Debug, Clone, Copy, Serialize, PartialEq, ts_rs::TS)]
 #[ts(export)]
 #[serde(rename_all = "camelCase")]

docx-core/src/xml_builder/drawing.rs

@@ -43,5 +43,7 @@ impl XMLBuilder {
     open!(open_position_h, "wp:positionH", "relativeFrom");
     open!(open_position_v, "wp:positionV", "relativeFrom");
     closed_with_child!(pos_offset, "wp:posOffset");
+    closed_with_child!(align, "wp:align");
     closed!(wrap_none, "wp:wrapNone");
+    closed!(wrap_square, "wp:wrapSquare", "wrapText");
 }

docx-wasm/js/json/bindings/PicAlign.ts

@@ -1,2 +1,2 @@
 
-export type PicAlign = "left" | "right" | "bottom" | "top";
+export type PicAlign = "left" | "right" | "center" | "bottom" | "top";

docx-wasm/test/__snapshots__/index.test.js.snap

@@ -152363,7 +152363,6 @@ exports[`writer should write inline image 2`] = `
   <wp:inline distT=\\"0\\" distB=\\"0\\" distL=\\"0\\" distR=\\"0\\">
     <wp:extent cx=\\"3048000\\" cy=\\"2286000\\" />
     <wp:effectExtent b=\\"0\\" l=\\"0\\" r=\\"0\\" t=\\"0\\" />
-    <wp:wrapNone />
     <wp:docPr id=\\"1\\" name=\\"Figure\\" />
     <wp:cNvGraphicFramePr>
       <a:graphicFrameLocks xmlns:a=\\"http://schemas.openxmlformats.org/drawingml/2006/main\\" noChangeAspect=\\"1\\" />
@@ -152417,7 +152416,6 @@ exports[`writer should write inline jpeg image 2`] = `
   <wp:inline distT=\\"0\\" distB=\\"0\\" distL=\\"0\\" distR=\\"0\\">
     <wp:extent cx=\\"3048000\\" cy=\\"2286000\\" />
     <wp:effectExtent b=\\"0\\" l=\\"0\\" r=\\"0\\" t=\\"0\\" />
-    <wp:wrapNone />
     <wp:docPr id=\\"1\\" name=\\"Figure\\" />
     <wp:cNvGraphicFramePr>
       <a:graphicFrameLocks xmlns:a=\\"http://schemas.openxmlformats.org/drawingml/2006/main\\" noChangeAspect=\\"1\\" />
@@ -152471,7 +152469,6 @@ exports[`writer should write jpeg image with del 2`] = `
   <wp:inline distT=\\"0\\" distB=\\"0\\" distL=\\"0\\" distR=\\"0\\">
     <wp:extent cx=\\"3048000\\" cy=\\"2286000\\" />
     <wp:effectExtent b=\\"0\\" l=\\"0\\" r=\\"0\\" t=\\"0\\" />
-    <wp:wrapNone />
     <wp:docPr id=\\"1\\" name=\\"Figure\\" />
     <wp:cNvGraphicFramePr>
       <a:graphicFrameLocks xmlns:a=\\"http://schemas.openxmlformats.org/drawingml/2006/main\\" noChangeAspect=\\"1\\" />
@@ -152525,7 +152522,6 @@ exports[`writer should write jpeg image with ins 2`] = `
   <wp:inline distT=\\"0\\" distB=\\"0\\" distL=\\"0\\" distR=\\"0\\">
     <wp:extent cx=\\"3048000\\" cy=\\"2286000\\" />
     <wp:effectExtent b=\\"0\\" l=\\"0\\" r=\\"0\\" t=\\"0\\" />
-    <wp:wrapNone />
     <wp:docPr id=\\"1\\" name=\\"Figure\\" />
     <wp:cNvGraphicFramePr>
       <a:graphicFrameLocks xmlns:a=\\"http://schemas.openxmlformats.org/drawingml/2006/main\\" noChangeAspect=\\"1\\" />