svg-path-commander 1.0.5 → 2.0.0-alpha2

package/src/util/{segmentArcFactory.js → segmentArcFactory.ts}

@@ -1,13 +1,15 @@
+import type { LengthFactory } from '../interface';
 import segmentLineFactory from './segmentLineFactory';
 import distanceSquareRoot from '../math/distanceSquareRoot';
 
 /**
+ * Returns an angle value between two points.
  *
- * @param {{x: number, y: number}} v0
- * @param {{x: number, y: number}} v1
- * @returns {{x: number, y: number}}
+ * @param v0
+ * @param v1
+ * @returns a number representing an angle
  */
-function angleBetween(v0, v1) {
+const angleBetween = (v0: { x: number; y: number }, v1: { x: number; y: number }): number => {
   const { x: v0x, y: v0y } = v0;
   const { x: v1x, y: v1y } = v1;
   const p = v0x * v1x + v0y * v1y;
@@ -16,29 +18,39 @@ function angleBetween(v0, v1) {
   const angle = sign * Math.acos(p / n);
 
   return angle;
-}
+};
 
 /**
  * Returns a {x,y} point at a given length, the total length and
  * the minimum and maximum {x,y} coordinates of a C (cubic-bezier) segment.
+ *
  * @see https://github.com/MadLittleMods/svg-curve-lib/blob/master/src/js/svg-curve-lib.js
  *
- * @param {number} x1 the starting x position
- * @param {number} y1 the starting y position
- * @param {number} RX x-radius of the arc
- * @param {number} RY y-radius of the arc
- * @param {number} angle x-axis-rotation of the arc
- * @param {number} LAF large-arc-flag of the arc
- * @param {number} SF sweep-flag of the arc
- * @param {number} x the ending x position
- * @param {number} y the ending y position
- * @param {number} t the point distance
- * @returns {{x: number, y: number}} the requested point
+ * @param x1 the starting x position
+ * @param y1 the starting y position
+ * @param RX x-radius of the arc
+ * @param RY y-radius of the arc
+ * @param angle x-axis-rotation of the arc
+ * @param LAF large-arc-flag of the arc
+ * @param SF sweep-flag of the arc
+ * @param x the ending x position
+ * @param y the ending y position
+ * @param t the point distance
+ * @returns the requested point
  */
-function getPointAtArcSegmentLength(x1, y1, RX, RY, angle, LAF, SF, x, y, t) {
-  const {
-    abs, sin, cos, sqrt, PI,
-  } = Math;
+const getPointAtArcSegmentLength = (
+  x1: number,
+  y1: number,
+  RX: number,
+  RY: number,
+  angle: number,
+  LAF: number,
+  SF: number,
+  x: number,
+  y: number,
+  t: number,
+): { x: number; y: number } => {
+  const { abs, sin, cos, sqrt, PI } = Math;
   let rx = abs(RX);
   let ry = abs(RY);
   const xRot = ((angle % 360) + 360) % 360;
@@ -67,12 +79,9 @@ function getPointAtArcSegmentLength(x1, y1, RX, RY, angle, LAF, SF, x, y, t) {
     ry *= sqrt(radiiCheck);
   }
 
-  const cSquareNumerator = rx ** 2 * ry ** 2
-    - rx ** 2 * transformedPoint.y ** 2
-    - ry ** 2 * transformedPoint.x ** 2;
+  const cSquareNumerator = rx ** 2 * ry ** 2 - rx ** 2 * transformedPoint.y ** 2 - ry ** 2 * transformedPoint.x ** 2;
 
-  const cSquareRootDenom = rx ** 2 * transformedPoint.y ** 2
-    + ry ** 2 * transformedPoint.x ** 2;
+  const cSquareRootDenom = rx ** 2 * transformedPoint.y ** 2 + ry ** 2 * transformedPoint.x ** 2;
 
   let cRadicand = cSquareNumerator / cSquareRootDenom;
   cRadicand = cRadicand < 0 ? 0 : cRadicand;
@@ -83,10 +92,8 @@ function getPointAtArcSegmentLength(x1, y1, RX, RY, angle, LAF, SF, x, y, t) {
   };
 
   const center = {
-    x: cos(xRotRad) * transformedCenter.x
-      - sin(xRotRad) * transformedCenter.y + (x1 + x) / 2,
-    y: sin(xRotRad) * transformedCenter.x
-      + cos(xRotRad) * transformedCenter.y + (y1 + y) / 2,
+    x: cos(xRotRad) * transformedCenter.x - sin(xRotRad) * transformedCenter.y + (x1 + x) / 2,
+    y: sin(xRotRad) * transformedCenter.x + cos(xRotRad) * transformedCenter.y + (y1 + y) / 2,
   };
 
   const startVector = {
@@ -114,12 +121,8 @@ function getPointAtArcSegmentLength(x1, y1, RX, RY, angle, LAF, SF, x, y, t) {
   const ellipseComponentY = ry * sin(alpha);
 
   const point = {
-    x: cos(xRotRad) * ellipseComponentX
-      - sin(xRotRad) * ellipseComponentY
-      + center.x,
-    y: sin(xRotRad) * ellipseComponentX
-      + cos(xRotRad) * ellipseComponentY
-      + center.y,
+    x: cos(xRotRad) * ellipseComponentX - sin(xRotRad) * ellipseComponentY + center.x,
+    y: sin(xRotRad) * ellipseComponentX + cos(xRotRad) * ellipseComponentY + center.y,
   };
 
   // to be used later
@@ -132,30 +135,42 @@ function getPointAtArcSegmentLength(x1, y1, RX, RY, angle, LAF, SF, x, y, t) {
   // point.resultantRy = ry;
 
   return point;
-}
+};
 
 /**
  * Returns a {x,y} point at a given length, the total length and
  * the shape minimum and maximum {x,y} coordinates of an A (arc-to) segment.
  *
- * @param {number} X1 the starting x position
- * @param {number} Y1 the starting y position
- * @param {number} RX x-radius of the arc
- * @param {number} RY y-radius of the arc
- * @param {number} angle x-axis-rotation of the arc
- * @param {number} LAF large-arc-flag of the arc
- * @param {number} SF sweep-flag of the arc
- * @param {number} X2 the ending x position
- * @param {number} Y2 the ending y position
- * @param {number} distance the point distance
- * @returns {SVGPath.lengthFactory} the segment length, point, min & max
+ * @param X1 the starting x position
+ * @param Y1 the starting y position
+ * @param RX x-radius of the arc
+ * @param RY y-radius of the arc
+ * @param angle x-axis-rotation of the arc
+ * @param LAF large-arc-flag of the arc
+ * @param SF sweep-flag of the arc
+ * @param X2 the ending x position
+ * @param Y2 the ending y position
+ * @param distance the point distance
+ * @returns the segment length, point, min & max
  */
-export default function segmentArcFactory(X1, Y1, RX, RY, angle, LAF, SF, X2, Y2, distance) {
+const segmentArcFactory = (
+  X1: number,
+  Y1: number,
+  RX: number,
+  RY: number,
+  angle: number,
+  LAF: number,
+  SF: number,
+  X2: number,
+  Y2: number,
+  distance: number,
+): LengthFactory => {
   const distanceIsNumber = typeof distance === 'number';
-  let x = X1; let y = Y1;
+  let x = X1;
+  let y = Y1;
   let LENGTH = 0;
   let prev = [x, y, LENGTH];
-  let cur = [x, y];
+  let cur = [x, y] as [number, number];
   let t = 0;
   let POINT = { x: 0, y: 0 };
   let POINTS = [{ x, y }];
@@ -192,12 +207,13 @@ export default function segmentArcFactory(X1, Y1, RX, RY, angle, LAF, SF, X2, Y2
     length: LENGTH,
     point: POINT,
     min: {
-      x: Math.min(...POINTS.map((n) => n.x)),
-      y: Math.min(...POINTS.map((n) => n.y)),
+      x: Math.min(...POINTS.map(n => n.x)),
+      y: Math.min(...POINTS.map(n => n.y)),
     },
     max: {
-      x: Math.max(...POINTS.map((n) => n.x)),
-      y: Math.max(...POINTS.map((n) => n.y)),
+      x: Math.max(...POINTS.map(n => n.x)),
+      y: Math.max(...POINTS.map(n => n.y)),
     },
   };
-}
+};
+export default segmentArcFactory;

package/src/util/segmentCubicFactory.ts

@@ -0,0 +1,114 @@
+import { LengthFactory } from 'src/interface';
+import distanceSquareRoot from '../math/distanceSquareRoot';
+
+/**
+ * Returns a {x,y} point at a given length, the total length and
+ * the minimum and maximum {x,y} coordinates of a C (cubic-bezier) segment.
+ *
+ * @param x1 the starting point X
+ * @param y1 the starting point Y
+ * @param c1x the first control point X
+ * @param c1y the first control point Y
+ * @param c2x the second control point X
+ * @param c2y the second control point Y
+ * @param x2 the ending point X
+ * @param y2 the ending point Y
+ * @param t a [0-1] ratio
+ * @returns the point at cubic-bezier segment length
+ */
+const getPointAtCubicSegmentLength = (
+  x1: number,
+  y1: number,
+  c1x: number,
+  c1y: number,
+  c2x: number,
+  c2y: number,
+  x2: number,
+  y2: number,
+  t: number,
+): { x: number; y: number } => {
+  const t1 = 1 - t;
+  return {
+    x: t1 ** 3 * x1 + 3 * t1 ** 2 * t * c1x + 3 * t1 * t ** 2 * c2x + t ** 3 * x2,
+    y: t1 ** 3 * y1 + 3 * t1 ** 2 * t * c1y + 3 * t1 * t ** 2 * c2y + t ** 3 * y2,
+  };
+};
+
+/**
+ * Returns the length of a C (cubic-bezier) segment
+ * or an {x,y} point at a given length.
+ *
+ * @param x1 the starting point X
+ * @param y1 the starting point Y
+ * @param c1x the first control point X
+ * @param c1y the first control point Y
+ * @param c2x the second control point X
+ * @param c2y the second control point Y
+ * @param x2 the ending point X
+ * @param y2 the ending point Y
+ * @param distance the point distance
+ * @returns the segment length, point, min & max
+ */
+const segmentCubicFactory = (
+  x1: number,
+  y1: number,
+  c1x: number,
+  c1y: number,
+  c2x: number,
+  c2y: number,
+  x2: number,
+  y2: number,
+  distance?: number,
+): LengthFactory => {
+  const distanceIsNumber = typeof distance === 'number';
+  let x = x1;
+  let y = y1;
+  let LENGTH = 0;
+  let prev = [x, y, LENGTH];
+  let cur = [x, y] as [number, number];
+  let t = 0;
+  let POINT = { x: 0, y: 0 };
+  let POINTS = [{ x, y }];
+
+  if (distanceIsNumber && distance <= 0) {
+    POINT = { x, y };
+  }
+
+  const sampleSize = 300;
+  for (let j = 0; j <= sampleSize; j += 1) {
+    t = j / sampleSize;
+
+    ({ x, y } = getPointAtCubicSegmentLength(x1, y1, c1x, c1y, c2x, c2y, x2, y2, t));
+    POINTS = [...POINTS, { x, y }];
+    LENGTH += distanceSquareRoot(cur, [x, y]);
+    cur = [x, y];
+
+    if (distanceIsNumber && LENGTH > distance && distance > prev[2]) {
+      const dv = (LENGTH - distance) / (LENGTH - prev[2]);
+
+      POINT = {
+        x: cur[0] * (1 - dv) + prev[0] * dv,
+        y: cur[1] * (1 - dv) + prev[1] * dv,
+      };
+    }
+    prev = [x, y, LENGTH];
+  }
+
+  if (distanceIsNumber && distance >= LENGTH) {
+    POINT = { x: x2, y: y2 };
+  }
+
+  return {
+    length: LENGTH,
+    point: POINT,
+    min: {
+      x: Math.min(...POINTS.map(n => n.x)),
+      y: Math.min(...POINTS.map(n => n.y)),
+    },
+    max: {
+      x: Math.max(...POINTS.map(n => n.x)),
+      y: Math.max(...POINTS.map(n => n.y)),
+    },
+  };
+};
+export default segmentCubicFactory;

package/src/util/{segmentLineFactory.js → segmentLineFactory.ts}

@@ -1,18 +1,19 @@
 import midPoint from '../math/midPoint';
 import distanceSquareRoot from '../math/distanceSquareRoot';
+import type { LengthFactory } from '../interface';
 
 /**
  * Returns a {x,y} point at a given length, the total length and
  * the minimum and maximum {x,y} coordinates of a line (L,V,H,Z) segment.
  *
- * @param {number} x1 the starting point X
- * @param {number} y1 the starting point Y
- * @param {number} x2 the ending point X
- * @param {number} y2 the ending point Y
- * @param {number=} distance the distance to point
- * @returns {SVGPath.lengthFactory} the segment length, point, min & max
+ * @param x1 the starting point X
+ * @param y1 the starting point Y
+ * @param x2 the ending point X
+ * @param y2 the ending point Y
+ * @param distance the distance to point
+ * @returns the segment length, point, min & max
  */
-export default function segmentLineFactory(x1, y1, x2, y2, distance) {
+const segmentLineFactory = (x1: number, y1: number, x2: number, y2: number, distance?: number): LengthFactory => {
   const length = distanceSquareRoot([x1, y1], [x2, y2]);
   let point = { x: 0, y: 0 };
 
@@ -40,4 +41,5 @@ export default function segmentLineFactory(x1, y1, x2, y2, distance) {
       y: Math.max(y1, y2),
     },
   };
-}
+};
+export default segmentLineFactory;

package/src/util/{segmentQuadFactory.js → segmentQuadFactory.ts}

@@ -1,3 +1,4 @@
+import { LengthFactory } from 'src/interface';
 import distanceSquareRoot from '../math/distanceSquareRoot';
 
 /**
@@ -6,46 +7,59 @@ import distanceSquareRoot from '../math/distanceSquareRoot';
  *
  * @see https://github.com/substack/point-at-length
  *
- * @param {number} x1 the starting point X
- * @param {number} y1 the starting point Y
- * @param {number} cx the control point X
- * @param {number} cy the control point Y
- * @param {number} x2 the ending point X
- * @param {number} y2 the ending point Y
- * @param {number} t a [0-1] ratio
- * @returns {{x: number, y: number}} the requested {x,y} coordinates
+ * @param x1 the starting point X
+ * @param y1 the starting point Y
+ * @param cx the control point X
+ * @param cy the control point Y
+ * @param x2 the ending point X
+ * @param y2 the ending point Y
+ * @param t a [0-1] ratio
+ * @returns the requested {x,y} coordinates
  */
-function getPointAtQuadSegmentLength(x1, y1, cx, cy, x2, y2, t) {
+const getPointAtQuadSegmentLength = (
+  x1: number,
+  y1: number,
+  cx: number,
+  cy: number,
+  x2: number,
+  y2: number,
+  t: number,
+): { x: number; y: number } => {
   const t1 = 1 - t;
   return {
-    x: (t1 ** 2) * x1
-      + 2 * t1 * t * cx
-      + (t ** 2) * x2,
-    y: (t1 ** 2) * y1
-      + 2 * t1 * t * cy
-      + (t ** 2) * y2,
+    x: t1 ** 2 * x1 + 2 * t1 * t * cx + t ** 2 * x2,
+    y: t1 ** 2 * y1 + 2 * t1 * t * cy + t ** 2 * y2,
   };
-}
+};
 
 /**
  * Returns a {x,y} point at a given length, the total length and
  * the minimum and maximum {x,y} coordinates of a Q (quadratic-bezier) segment.
  *
- * @param {number} x1 the starting point X
- * @param {number} y1 the starting point Y
- * @param {number} qx the control point X
- * @param {number} qy the control point Y
- * @param {number} x2 the ending point X
- * @param {number} y2 the ending point Y
- * @param {number=} distance the distance to point
- * @returns {SVGPath.lengthFactory} the segment length, point, min & max
+ * @param x1 the starting point X
+ * @param y1 the starting point Y
+ * @param qx the control point X
+ * @param qy the control point Y
+ * @param x2 the ending point X
+ * @param y2 the ending point Y
+ * @param distance the distance to point
+ * @returns the segment length, point, min & max
  */
-export default function segmentQuadFactory(x1, y1, qx, qy, x2, y2, distance) {
+const segmentQuadFactory = (
+  x1: number,
+  y1: number,
+  qx: number,
+  qy: number,
+  x2: number,
+  y2: number,
+  distance?: number,
+): LengthFactory => {
   const distanceIsNumber = typeof distance === 'number';
-  let x = x1; let y = y1;
+  let x = x1;
+  let y = y1;
   let LENGTH = 0;
   let prev = [x, y, LENGTH];
-  let cur = [x, y];
+  let cur = [x, y] as [number, number];
   let t = 0;
   let POINT = { x: 0, y: 0 };
   let POINTS = [{ x, y }];
@@ -83,12 +97,13 @@ export default function segmentQuadFactory(x1, y1, qx, qy, x2, y2, distance) {
     length: LENGTH,
     point: POINT,
     min: {
-      x: Math.min(...POINTS.map((n) => n.x)),
-      y: Math.min(...POINTS.map((n) => n.y)),
+      x: Math.min(...POINTS.map(n => n.x)),
+      y: Math.min(...POINTS.map(n => n.y)),
     },
     max: {
-      x: Math.max(...POINTS.map((n) => n.x)),
-      y: Math.max(...POINTS.map((n) => n.y)),
+      x: Math.max(...POINTS.map(n => n.x)),
+      y: Math.max(...POINTS.map(n => n.y)),
     },
   };
-}
+};
+export default segmentQuadFactory;

package/src/util/shapeToPath.ts

@@ -0,0 +1,214 @@
+import type { CircleAttr, EllipseAttr, GlyphAttr, LineAttr, PolyAttr, RectAttr, ShapeParams } from '../interface';
+import type { PathArray, PathSegment, ShapeOps, ShapeTypes } from '../types';
+import pathToString from '../convert/pathToString';
+import defaultOptions from '../options/options';
+import error from '../parser/error';
+import isValidPath from './isValidPath';
+
+/**
+ * Supported shapes and their specific parameters.
+ */
+const shapeParams: ShapeParams = {
+  line: ['x1', 'y1', 'x2', 'y2'],
+  circle: ['cx', 'cy', 'r'],
+  ellipse: ['cx', 'cy', 'rx', 'ry'],
+  rect: ['width', 'height', 'x', 'y', 'rx', 'ry'],
+  polygon: ['points'],
+  polyline: ['points'],
+  glyph: ['d'],
+};
+
+/**
+ * Returns a new `pathArray` from line attributes.
+ *
+ * @param attr shape configuration
+ * @returns a new line `pathArray`
+ */
+export const getLinePath = (attr: LineAttr): PathArray => {
+  const { x1, y1, x2, y2 } = attr;
+  return [
+    ['M', x1, y1],
+    ['L', x2, y2],
+  ];
+};
+
+/**
+ * Returns a new `pathArray` like from polyline/polygon attributes.
+ *
+ * @param attr shape configuration
+ * @return a new polygon/polyline `pathArray`
+ */
+export const getPolyPath = (attr: PolyAttr): PathArray => {
+  const pathArray = [] as PathSegment[];
+  const points = (attr.points || '')
+    .trim()
+    .split(/[\s|,]/)
+    .map(Number);
+
+  let index = 0;
+  while (index < points.length) {
+    pathArray.push([index ? 'L' : 'M', points[index], points[index + 1]]);
+    index += 2;
+  }
+
+  return (attr.type === 'polygon' ? [...pathArray, ['z']] : pathArray) as PathArray;
+};
+
+/**
+ * Returns a new `pathArray` from circle attributes.
+ *
+ * @param attr shape configuration
+ * @return a circle `pathArray`
+ */
+export const getCirclePath = (attr: CircleAttr): PathArray => {
+  const { cx, cy, r } = attr;
+
+  return [
+    ['M', cx - r, cy],
+    ['a', r, r, 0, 1, 0, 2 * r, 0],
+    ['a', r, r, 0, 1, 0, -2 * r, 0],
+  ];
+};
+
+/**
+ * Returns a new `pathArray` from ellipse attributes.
+ *
+ * @param attr shape configuration
+ * @return an ellipse `pathArray`
+ */
+export const getEllipsePath = (attr: EllipseAttr): PathArray => {
+  const { cx, cy, rx, ry } = attr;
+
+  return [
+    ['M', cx - rx, cy],
+    ['a', rx, ry, 0, 1, 0, 2 * rx, 0],
+    ['a', rx, ry, 0, 1, 0, -2 * rx, 0],
+  ];
+};
+
+/**
+ * Returns a new `pathArray` like from rect attributes.
+ *
+ * @param attr object with properties above
+ * @return a new `pathArray` from `<rect>` attributes
+ */
+export const getRectanglePath = (attr: RectAttr): PathArray => {
+  const x = +attr.x || 0;
+  const y = +attr.y || 0;
+  const w = +attr.width;
+  const h = +attr.height;
+  let rx = +attr.rx;
+  let ry = +attr.ry;
+
+  // Validity checks from http://www.w3.org/TR/SVG/shapes.html#RectElement:
+  if (rx || ry) {
+    rx = !rx ? ry : rx;
+    ry = !ry ? rx : ry;
+
+    /* istanbul ignore else */
+    if (rx * 2 > w) rx -= (rx * 2 - w) / 2;
+    /* istanbul ignore else */
+    if (ry * 2 > h) ry -= (ry * 2 - h) / 2;
+
+    return [
+      ['M', x + rx, y],
+      ['h', w - rx * 2],
+      ['s', rx, 0, rx, ry],
+      ['v', h - ry * 2],
+      ['s', 0, ry, -rx, ry],
+      ['h', -w + rx * 2],
+      ['s', -rx, 0, -rx, -ry],
+      ['v', -h + ry * 2],
+      ['s', 0, -ry, rx, -ry],
+    ];
+  }
+
+  return [['M', x, y], ['h', w], ['v', h], ['H', x], ['Z']];
+};
+
+/**
+ * Returns a new `<path>` element created from attributes of a `<line>`, `<polyline>`,
+ * `<polygon>`, `<rect>`, `<ellipse>`, `<circle>` or `<glyph>`. If `replace` parameter
+ * is `true`, it will replace the target. The default `ownerDocument` is your current
+ * `document` browser page, if you want to use in server-side using `jsdom`, you can
+ * pass the `jsdom` `document` to `ownDocument`.
+ *
+ * It can also work with an options object,
+ *
+ * @see ShapeOps
+ *
+ * The newly created `<path>` element keeps all non-specific
+ * attributes like `class`, `fill`, etc.
+ *
+ * @param element target shape
+ * @param replace option to replace target
+ * @param ownerDocument document for create element
+ * @return the newly created `<path>` element
+ */
+const shapeToPath = (
+  element: ShapeTypes | ShapeOps,
+  replace?: boolean,
+  ownerDocument?: Document,
+): SVGPathElement | false => {
+  const doc = ownerDocument || document;
+  const win = doc.defaultView || /* istanbul ignore next */ window;
+  const supportedShapes = Object.keys(shapeParams) as (keyof ShapeParams)[];
+  const elementIsElement = element instanceof win.SVGElement;
+  const tagName = elementIsElement ? element.tagName : null;
+
+  if (tagName && supportedShapes.every(s => tagName !== s)) {
+    throw TypeError(`${error}: "${tagName}" is not SVGElement`);
+  }
+
+  const path = doc.createElementNS('http://www.w3.org/2000/svg', 'path');
+  const type = (elementIsElement ? tagName : element.type) as ShapeOps['type'];
+  const shapeAttrs = shapeParams[type] as string[];
+  const config = { type } as Record<string, string>;
+
+  if (elementIsElement) {
+    shapeAttrs.forEach(p => {
+      if (shapeAttrs.includes(p)) config[p] = element.getAttribute(p) as string;
+    });
+    // set no-specific shape attributes: fill, stroke, etc
+    Object.values(element.attributes).forEach(({ name, value }) => {
+      if (!shapeAttrs.includes(name)) path.setAttribute(name, value);
+    });
+  } else {
+    Object.assign(config, element);
+    // set no-specific shape attributes: fill, stroke, etc
+    Object.keys(config).forEach(k => {
+      if (!shapeAttrs.includes(k) && k !== 'type') {
+        path.setAttribute(
+          k.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`),
+          config[k],
+        );
+      }
+    });
+  }
+
+  // set d
+  let description = '';
+  const round = defaultOptions.round as number;
+
+  /* istanbul ignore else */
+  if (type === 'circle') description = pathToString(getCirclePath(config as unknown as CircleAttr), round);
+  else if (type === 'ellipse') description = pathToString(getEllipsePath(config as unknown as EllipseAttr), round);
+  else if (['polyline', 'polygon'].includes(type))
+    description = pathToString(getPolyPath(config as unknown as PolyAttr), round);
+  else if (type === 'rect') description = pathToString(getRectanglePath(config as unknown as RectAttr), round);
+  else if (type === 'line') description = pathToString(getLinePath(config as unknown as LineAttr), round);
+  else if (type === 'glyph')
+    description = elementIsElement ? (element.getAttribute('d') as string) : (element as GlyphAttr).d;
+
+  // replace target element
+  if (isValidPath(description)) {
+    path.setAttribute('d', description);
+    if (replace && elementIsElement) {
+      element.before(path, element);
+      element.remove();
+    }
+    return path;
+  }
+  return false;
+};
+export default shapeToPath;