svg-path-commander 2.0.3 → 2.0.5

package/package.json

@@ -2,7 +2,7 @@
   "name": "svg-path-commander",
   "author": "thednp",
   "license": "MIT",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "description": "Modern TypeScript tools for SVG",
   "source": "./src/index.ts",
   "main": "./dist/svg-path-commander.js",
@@ -73,6 +73,6 @@
     "vite": "^4.2.0"
   },
   "dependencies": {
-    "@thednp/dommatrix": "^2.0.2"
+    "@thednp/dommatrix": "^2.0.4"
   }
 }

package/src/index.ts

@@ -29,6 +29,7 @@ import isAbsoluteArray from './util/isAbsoluteArray';
 import isRelativeArray from './util/isRelativeArray';
 import isCurveArray from './util/isCurveArray';
 import isNormalizedArray from './util/isNormalizedArray';
+import shapeToPathArray from './util/shapeToPathArray';
 import shapeToPath from './util/shapeToPath';
 
 import roundPath from './process/roundPath';
@@ -79,6 +80,7 @@ class SVGPathCommander {
   public static isCurveArray = isCurveArray;
   public static isNormalizedArray = isNormalizedArray;
   public static shapeToPath = shapeToPath;
+  public static shapeToPathArray = shapeToPathArray;
   public static parsePathString = parsePathString;
   public static roundPath = roundPath;
   public static splitPath = splitPath;

package/src/interface.ts

@@ -42,8 +42,8 @@ export interface EllipseAttr {
   cx: number;
   cy: number;
   rx: number;
-  ry: number;
-  [key: string]: string | number;
+  ry?: number;
+  [key: string]: string | number | undefined;
 }
 export interface RectAttr {
   type: 'rect';
@@ -51,9 +51,9 @@ export interface RectAttr {
   height: number;
   x: number;
   y: number;
-  rx: number;
-  ry: number;
-  [key: string]: string | number;
+  rx?: number;
+  ry?: number;
+  [key: string]: string | number | undefined;
 }
 export interface GlyphAttr {
   type: 'glyph';

package/src/util/isPathArray.ts

@@ -12,8 +12,13 @@ const isPathArray = (path: unknown): path is PathArray => {
     Array.isArray(path) &&
     path.every((seg: PathSegment) => {
       const lk = seg[0].toLowerCase() as RelativeCommand;
-      return paramsCount[lk] === seg.length - 1 && 'achlmqstvz'.includes(lk);
-    })
+      return (
+        paramsCount[lk] === seg.length - 1 &&
+        'achlmqstvz'.includes(lk) &&
+        (seg.slice(1) as unknown[]).every(Number.isFinite)
+      );
+    }) &&
+    path.length > 0
   );
 };
 export default isPathArray;

package/src/util/isValidPath.ts

@@ -10,7 +10,7 @@ import PathParser from '../parser/pathParser';
  * @returns the path string validity
  */
 const isValidPath = (pathString: string) => {
-  if (typeof pathString !== 'string') {
+  if (typeof pathString !== 'string' || !pathString.length) {
     return false;
   }
 

package/src/util/shapeParams.ts

@@ -0,0 +1,16 @@
+import type { ShapeParams } from '../interface';
+
+/**
+ * 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'],
+};
+
+export default shapeParams;

package/src/util/shapeToPath.ts

@@ -1,130 +1,11 @@
-import type { CircleAttr, EllipseAttr, GlyphAttr, LineAttr, PolyAttr, RectAttr, ShapeParams } from '../interface';
-import type { PathArray, PathSegment, ShapeOps, ShapeTypes } from '../types';
+import type { ShapeParams } from '../interface';
+import type { 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']];
-};
+import shapeToPathArray from './shapeToPathArray';
+import shapeParams from './shapeParams';
 
 /**
  * Returns a new `<path>` element created from attributes of a `<line>`, `<polyline>`,
@@ -133,7 +14,7 @@ export const getRectanglePath = (attr: RectAttr): PathArray => {
  * `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,
+ * It can also work with an options object, see the type below
  *
  * @see ShapeOps
  *
@@ -153,21 +34,25 @@ const shapeToPath = (
   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;
+  const targetIsElement = element instanceof win.SVGElement;
+  const tagName = targetIsElement ? element.tagName : null;
 
-  if (tagName && supportedShapes.every(s => tagName !== s)) {
-    throw TypeError(`${error}: "${tagName}" is not SVGElement`);
-  }
+  if (tagName === 'path') throw TypeError(`${error}: "${tagName}" is already SVGPathElement`);
+  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 type = (targetIsElement ? tagName : element.type) as ShapeOps['type'];
   const shapeAttrs = shapeParams[type] as string[];
   const config = { type } as Record<string, string>;
 
-  if (elementIsElement) {
+  // set d
+  const round = defaultOptions.round as number;
+  const pathArray = shapeToPathArray(element, doc);
+  const description = pathArray && pathArray.length ? pathToString(pathArray, round) : '';
+
+  if (targetIsElement) {
     shapeAttrs.forEach(p => {
-      if (shapeAttrs.includes(p)) config[p] = element.getAttribute(p) as string;
+      config[p] = element.getAttribute(p) as string;
     });
     // set no-specific shape attributes: fill, stroke, etc
     Object.values(element.attributes).forEach(({ name, value }) => {
@@ -186,24 +71,10 @@ const shapeToPath = (
     });
   }
 
-  // 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) {
+    if (replace && targetIsElement) {
       element.before(path, element);
       element.remove();
     }
@@ -211,4 +82,5 @@ const shapeToPath = (
   }
   return false;
 };
+
 export default shapeToPath;

package/src/util/shapeToPathArray.ts

@@ -0,0 +1,179 @@
+import type { CircleAttr, EllipseAttr, GlyphAttr, LineAttr, PolyAttr, RectAttr, ShapeParams } from '../interface';
+import type { PathArray, PathSegment, ShapeOps, ShapeTypes } from '../types';
+import error from '../parser/error';
+import parsePathString from '../parser/parsePathString';
+import shapeParams from './shapeParams';
+import isPathArray from './isPathArray';
+
+/**
+ * Returns a new `pathArray` from line attributes.
+ *
+ * @param attr shape configuration
+ * @returns a new line `pathArray`
+ */
+export const getLinePath = (attr: LineAttr): PathArray => {
+  let { x1, y1, x2, y2 } = attr;
+  [x1, y1, x2, y2] = [x1, y1, x2, y2].map(a => +a);
+  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(a => +a);
+
+  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 => {
+  let { cx, cy, r } = attr;
+  [cx, cy, r] = [cx, cy, r].map(a => +a);
+
+  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 => {
+  let { cx, cy } = attr;
+  let rx = attr.rx || 0;
+  let ry = attr.ry || rx;
+  [cx, cy, rx, ry] = [cx, cy, rx, ry].map(a => +a);
+
+  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 || 0);
+  let ry = +(attr.ry || rx);
+
+  // 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 `pathArray` created from attributes of a `<line>`, `<polyline>`,
+ * `<polygon>`, `<rect>`, `<ellipse>`, `<circle>`, <path> or `<glyph>`.
+ *
+ * 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 the type below
+ *
+ * @see ShapeOps
+ *
+ * @param element target shape
+ * @param ownerDocument document for create element
+ * @return the newly created `<path>` element
+ */
+const shapeToPathArray = (element: ShapeTypes | ShapeOps, ownerDocument?: Document): PathArray | false => {
+  const doc = ownerDocument || document;
+  const win = doc.defaultView || /* istanbul ignore next */ window;
+  const supportedShapes = Object.keys(shapeParams) as (keyof ShapeParams)[];
+  const targetIsElement = element instanceof win.SVGElement;
+  const tagName = targetIsElement ? element.tagName : null;
+
+  if (tagName && [...supportedShapes, 'path'].every(s => tagName !== s)) {
+    throw TypeError(`${error}: "${tagName}" is not SVGElement`);
+  }
+
+  const type = (targetIsElement ? tagName : element.type) as ShapeOps['type'];
+  const shapeAttrs = shapeParams[type] as string[];
+  const config = { type } as Record<string, string>;
+
+  if (targetIsElement) {
+    shapeAttrs.forEach(p => {
+      config[p] = element.getAttribute(p) as string;
+    });
+  } else {
+    Object.assign(config, element);
+  }
+
+  // set d
+  let pathArray = [] as unknown as PathArray;
+
+  /* istanbul ignore else */
+  if (type === 'circle') pathArray = getCirclePath(config as unknown as CircleAttr);
+  else if (type === 'ellipse') pathArray = getEllipsePath(config as unknown as EllipseAttr);
+  else if (['polyline', 'polygon'].includes(type)) pathArray = getPolyPath(config as unknown as PolyAttr);
+  else if (type === 'rect') pathArray = getRectanglePath(config as unknown as RectAttr);
+  else if (type === 'line') pathArray = getLinePath(config as unknown as LineAttr);
+  else if (['glyph', 'path'].includes(type)) {
+    pathArray = parsePathString(targetIsElement ? element.getAttribute('d') || '' : (element as GlyphAttr).d || '');
+  }
+
+  // replace target element
+  if (isPathArray(pathArray) && pathArray.length) {
+    return pathArray;
+  }
+  return false;
+};
+export default shapeToPathArray;