[Question] shapeToPath without document?

[tiptronic]

Would it be possible to create the shapeToPath and shapeToPathArray functions without reference to document.

It would be very nice to use svg-path-commander on the commandline or in node (without jsdom...)

[thednp]

Not a way I could think of right now, but I'm looking at this code and I'm thinking we could change the logic a bit, not sure, have to test.

Check back tomorrow.

[tiptronic]

@thednp thx for the reply.... I know this is a tricky task.
For me it would already be helpful to remove hard references to document (and maybe just return the original value) to not run into exceptions when calling some functions from Node (or the client)

[thednp]

@tiptronic
Everything in svg-path-commander is supposed to work in Node.js/Deno/Bun, except shapeToPath which returns real DOM nodes OR override existing nodes.

I've modified shapeToPathArray to check if input is typeof Element differently without a document reference.
You can use this one now, see below.

Real DOM nodes cannot exist outside the document, so what you need now is something that generates markup from ShapeType objects:

import { shapeToPathArray, pathToString, type ShapeOps  } from 'svg-path-commander';

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"],
};

function shapeObjectToMarkup(shape: ShapeOps) {
  const pathArray = shapeToPathArray(shape);
  const d = pathToString(pathArray);
  const config = { type: shape.type } as Record<string, string>;
  const shapeAttrs = shapeParams[shape.type];
  let attributes = "";
  Object.assign(config, shape);
  // set non-specific shape attributes: fill, stroke, class, etc
  Object.entries(config).forEach(([k, v]) => {
    if (!shapeAttrs.includes(k) && k !== "type") {
      attributes += ` ${k.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase())}="${v}"`      
    }
  });
    
  return `<path${attributes} d="${d}" />`;
}

Try it out:

shapeObjectToMarkup({ type: 'glyph', id: 'glyph', d: 'M143.5 22.72H166s3 0 3 3v22.56s0 3 -3 3h-22.5s-3 0 -3 -3V25.72s0 -3 3 -3', fill: 'rgba(255,255,255,0.3)' });

// returns <path id="glyph" fill="rgba(255,255,255,0.3)" d="M143.5 22.72H166s3 0 3 3v22.56s0 3 -3 3h-22.5s-3 0 -3 -3V25.72s0 -3 3 -3" />

Test the current github version with the change to shapeToPathArray:

npm i github:thednp/svg-path-commander

Once you confirm it's all good, I'll push it to npm.

[thednp]

@tiptronic ?

[tiptronic]

@thednp hehe - I'm @ work right now.... so it can take a little to respond ;)

First:

import { shapeToPathArray, pathToString  } from 'svg-path-commander';

doesn't work in ESM (Javascript)

SyntaxError: The requested module 'svg-path-commander' does not provide an export named 'pathToString'

but replacing the named imports works:

function shapeObjectToMarkup(shape) {
  const pathArray = SVGPathCommander.shapeToPathArray(shape);
  const d = SVGPathCommander.pathToString(pathArray);
  const config = { type: shape.type };
  const shapeAttrs = shapeParams[shape.type];
  let attributes = "";
  Object.assign(config, shape);
  // set no-specific shape attributes: fill, stroke, etc
  Object.keys(config).forEach((k) => {
    if (!shapeAttrs.includes(k) && k !== "type") {
      attributes += ` ${k.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase())}="${config[k]}"`      
    }
  });
    
  return `<path${attributes} d="${d}" />`;
}

👍

(...it was not what I was originally looking for, but that's okay - I thought I can use shapeToPath by directly passing in a svg-rect:

<rect x="0" y="0" width="50" height="50" rx="12"></rect>

and have it converted to a path:

<path d="M30 25h40s5 0 5 5v40s0 5 -5 5h-40s-5 0 -5 -5v-40s0 -5 5 -5" />

But it's easy enough to do that I guess... (sorry I'm new to svg-path-commander (just found it yesterday) - so it might already be possible. But anyway - thanks for your fast tweaks 👍

[thednp]

@tiptronic
Sorry I forgot vite doesn't handle exports with tree shaking in the build without breaking your head.

You have to know, as of now, Node.js does not have a browser environment without JSDom, only Deno 2 has as far as I know. It would be required to parse the <rect /> reliably via the DOMParser API and absolutely mandatory to sanitize the attributes. So it's not specific to our library here.

So are we good to publish a new tag to npm you think?

[tiptronic]

@thednp np... I think you can publish it as is... it works fine for me.

regarding jsdom etc... I (for one) process raw SVG only, which is then send to another device to get shown. That means, I don't have document, jsdom, etc per default available. That's why I am/was mostly interested in the path manipulation provided by svg-path-commander... So maybe the name svg-path-commander was a bit misleading for me, but I think I can make good use of it at some point.
Parsing the <rect> is mostly problematic in this regard, because it's final dimensions rely on other factors (e.g. transforms, viewbox, etc...), I guess that's not simply to solve via code-only (except of re-creating a whole SVG-processor... in which case it's much simpler to use jsdom or svgdom)

so anyway - thanks for this addition and your time! 👍

[thednp]

Alrighty v2.1.6 is now live.

For what svg-path-commander really needs, shapeToPathArray is perhaps the only utility that we actually use to transform, reverse, calculate metrics etc. That's why we have the name. This entire shapeToPath wasn't around with the first major versions.