run on node

[pjebs]

When I try and create a svg on a node application (non-browser), I get this error:

ReferenceError: document is not defined
			//     at Triangulr.generateDom (/Users/z/Developer/zzz/desktop-app/node_modules/Triangulr/triangulr.js:142:16)
			//     at new Triangulr (/Users/z/Developer/zzz/desktop-app/node_modules/Triangulr/triangulr.js:47:15)

It would be nice if it could be made to run on node.

[maxwellito]

Sorry this lib is only made to run in a browser. But you can easily hack it.

You can override the generateDom method before using the library, to generate the DOM as a string with ES6 templates.

// Override
Triangulr.prototype.generateDom = function () {}
Triangulr.prototype.generateDomString = function () {
  let paths = this.exportData.map(data => `<path
    fill="${data.style.fill}"
    shape-rendering="geometricPrecision"
    d="M${data.points.map(p => `${p.x} ${p.y} `).join('L')} Z"
  />`)

  return `<svg
    version="1.1"
    viewBox="0 0 ${this.mapWidth} ${this.mapHeight}"
    enable-background="new 0 0 ${this.mapWidth} ${this.mapHeight}"
    preserveAspectRatio="xMinYMin slice">
    ${paths.join('')}
  </svg>`;
};

// Let create the instance and make the SVG code
let myMap = new Triangulr(400, 400, 50, 0);
let myMapSvg = myMap.generateDomString()

I hope it suits you

[pjebs]

can that be added to official npm codebase? The reason why I ask is because I use Go and then use gopherjs package to transpile to real javascript. It's hard to make adjustments like that in Go (plus my understanding of js is weak).

[maxwellito]

I see.. I'll make a temporary hack. Then get back to you

[maxwellito]

Should be good now.

const Triangulr = require('triangulr')
let myMap = new Triangulr(400, 400, 50, 0);
let myMapSvg = myMap.generateDomString()

It now test if document is available before creating the SVG with the DOM API.

[pjebs]

I still seem to get the error:

 document is not defined
    at new Triangulr (/Users/z/Developer/zzz/desktop-app/node_modules/Triangulr/triangulr.js:51:3)

[pjebs]

could it be because it is in strict mode and there is no let or var defining document?

[maxwellito]

Nope, my silliness. Upgrade to 1.0.2 😅

[pjebs]

I think there is something not quite right with the output (produced in nodejs), despite it looking ok at first glance.

I tested it using https://jakearchibald.github.io/svgomg/ and also as a css data uri eg background-image: url(data:image/svg+xml; **svg output*** ) (including after changing double quotes to single quotes).
When I use it in the browser (using the output of string from nodejs) and append the node as a child to the DOM (your intended usage), it works perfectly).

[pjebs]

After lots of testing found the issue:

It just needs xmlns="http://www.w3.org/2000/svg" added.

example:

<svg xmlns="http://www.w3.org/2000/svg" >
   <circle cx="25" cy="25" r="20"/>
</svg>`;

[maxwellito]

Does this output suits you?

<svg
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 200 20"
    preserveAspectRatio="xMinYMin slice">
    <path
    fill="#131313"
    shape-rendering="geometricPrecision"
    d="M-33.54101966249685 -44.721359549995796 L-55.90169943749474 -4.721359549995796 L-11.180339887498949 -4.721359549995796  Z"
  /><path
    fill="#4a4a4a"
    shape-rendering="geometricPrecision"
    d="M-33.54101966249685 -44.721359549995796 L-11.180339887498949 -4.721359549995796 L11.180339887498949 -44.721359549995796  Z"
  /><path
    fill="#2e2e2e"
    shape-rendering="geometricPrecision"
    d="M11.180339887498949 -44.721359549995796 L-11.180339887498949 -4.721359549995796 L33.54101966249685 -4.721359549995796  Z"
  />
</svg>

[pjebs]

yes

[maxwellito]

triangulr@1.0.3 published :)

[pjebs]

thank you.

[pjebs]

Thank you for your great work :-)