chore(shape): update shape position (move or resize) by given offset

Author: singerla

src/helper/modify-shape-helper.ts

@@ -4,6 +4,21 @@ import { GeneralHelper } from './general-helper';
 import TextReplaceHelper from './text-replace-helper';
 import ModifyTextHelper from './modify-text-helper';
 
+const map = {
+  x: { tag: 'a:off', attribute: 'x' },
+  l: { tag: 'a:off', attribute: 'x' },
+  left: { tag: 'a:off', attribute: 'x' },
+  y: { tag: 'a:off', attribute: 'y' },
+  t: { tag: 'a:off', attribute: 'y' },
+  top: { tag: 'a:off', attribute: 'y' },
+  cx: { tag: 'a:ext', attribute: 'cx' },
+  w: { tag: 'a:ext', attribute: 'cx' },
+  width: { tag: 'a:ext', attribute: 'cx' },
+  cy: { tag: 'a:ext', attribute: 'cy' },
+  h: { tag: 'a:ext', attribute: 'cy' },
+  height: { tag: 'a:ext', attribute: 'cy' },
+};
+
 export default class ModifyShapeHelper {
   /**
    * Set solid fill of modified shape
@@ -18,55 +33,67 @@ export default class ModifyShapeHelper {
   /**
    * Set text content of modified shape
    */
-  static setText = (text: string) => (element: XMLDocument | Element): void => {
-    ModifyTextHelper.setText(text)(element as Element)
-  };
+  static setText =
+    (text: string) =>
+    (element: XMLDocument | Element): void => {
+      ModifyTextHelper.setText(text)(element as Element);
+    };
 
   /**
    * Replace tagged text content within modified shape
    */
-  static replaceText = (
-    replaceText: ReplaceText | ReplaceText[],
-    options?: ReplaceTextOptions,
-  ) => (element: XMLDocument | Element): void => {
-    const replaceTexts = GeneralHelper.arrayify(replaceText);
+  static replaceText =
+    (replaceText: ReplaceText | ReplaceText[], options?: ReplaceTextOptions) =>
+    (element: XMLDocument | Element): void => {
+      const replaceTexts = GeneralHelper.arrayify(replaceText);
 
-    new TextReplaceHelper(options, element as XMLDocument)
-      .isolateTaggedNodes()
-      .applyReplacements(replaceTexts);
-  };
+      new TextReplaceHelper(options, element as XMLDocument)
+        .isolateTaggedNodes()
+        .applyReplacements(replaceTexts);
+    };
 
   /**
    * Set position and size of modified shape.
    */
-  static setPosition = (pos: ShapeCoordinates) => (
-    element: XMLDocument | Element,
-  ): void => {
-    const map = {
-      x: { tag: 'a:off', attribute: 'x' },
-      l: { tag: 'a:off', attribute: 'x' },
-      left: { tag: 'a:off', attribute: 'x' },
-      y: { tag: 'a:off', attribute: 'y' },
-      t: { tag: 'a:off', attribute: 'y' },
-      top: { tag: 'a:off', attribute: 'y' },
-      cx: { tag: 'a:ext', attribute: 'cx' },
-      w: { tag: 'a:ext', attribute: 'cx' },
-      width: { tag: 'a:ext', attribute: 'cx' },
-      cy: { tag: 'a:ext', attribute: 'cy' },
-      h: { tag: 'a:ext', attribute: 'cy' },
-      height: { tag: 'a:ext', attribute: 'cy' },
+  static setPosition =
+    (pos: ShapeCoordinates) =>
+    (element: XMLDocument | Element): void => {
+      const xfrm = element.getElementsByTagName('a:off')[0]
+        .parentNode as Element;
+
+      Object.keys(pos).forEach((key) => {
+        let value = Math.round(pos[key]);
+        if (typeof value !== 'number' || !map[key]) return;
+        value = value < 0 ? 0 : value;
+
+        xfrm
+          .getElementsByTagName(map[key].tag)[0]
+          .setAttribute(map[key].attribute, value);
+      });
     };
 
-    const xfrm = element.getElementsByTagName('a:off')[0].parentNode as Element;
+  /**
+   * Update position and size of a shape by a given Value.
+   */
+  static updatePosition =
+    (pos: ShapeCoordinates) =>
+    (element: XMLDocument | Element): void => {
+      const xfrm = element.getElementsByTagName('a:off')[0]
+        .parentNode as Element;
 
-    Object.keys(pos).forEach((key) => {
-      let value = Math.round(pos[key]);
-      if(typeof value !== 'number' || !map[key]) return;
-      value = (value < 0) ? 0 : value
+      Object.keys(pos).forEach((key) => {
+        let value = Math.round(pos[key]);
+        if (typeof value !== 'number' || !map[key]) return;
 
-      xfrm
-        .getElementsByTagName(map[key].tag)[0]
-        .setAttribute(map[key].attribute, value);
-    });
-  };
+        const currentValue = xfrm
+          .getElementsByTagName(map[key].tag)[0]
+          .getAttribute(map[key].attribute);
+
+        value += Number(currentValue);
+
+        xfrm
+          .getElementsByTagName(map[key].tag)[0]
+          .setAttribute(map[key].attribute, value);
+      });
+    };
 }

src/index.ts

@@ -10,6 +10,7 @@ const setSolidFill = ModifyShapeHelper.setSolidFill;
 const setText = ModifyShapeHelper.setText;
 const replaceText = ModifyShapeHelper.replaceText;
 const setPosition = ModifyShapeHelper.setPosition;
+const updatePosition = ModifyShapeHelper.updatePosition;
 
 import ModifyTableHelper from './helper/modify-table-helper';
 const setTableData = ModifyTableHelper.setTableData;
@@ -82,6 +83,7 @@ export const modify = {
   setText,
   replaceText,
   setPosition,
+  updatePosition,
   setTableData,
   adjustHeight,
   adjustWidth,