Server-side rendering?

[jenkin]

This project offers some unique nice features in voronoi generation, but if I'm not wrong it's only for browser environment.

@wassfila Have you any hints to generate server side SVGs in a NodeJS environment? Maybe using jsdom?

My use case requires the generation of hundreds of SVG in bulk starting from computed seeds using a static site generator.

Thanks!

[wassfila]

@jenkin thank you for the feedback and idea, interesting.
I do understand the use case utility, and I do not think that this project is very far from that. As I barely use the document for creating and appending elements in old fashion js dom manipulations, most wrapped here https://github.com/WebSVG/voronoi/blob/master/src/web-js-utils.js

• appendChild
• insertAdjacentHTML

Although it looses most of its real time editing advantage, it still make sense in your case.

It would then look like a js function call where you pass the config params and list of seeds and get as result the SVG string.
I'm not sure if it would be better for browser app, maybe simple integration or unified code base server and client.
I always wanted to refactor the UI with more modern frameworks, so maybe this could come with it some day.

As fallback and workaround, you can also consider if passing seeds to the clients instead of SVGs is manageable, unless you need some post processing on the the SVGs, you could just render them on the client.

[jenkin]

Thank you for the reply! :)

I made an attempt to use jsdom for server-side rendering, but unfortunately you use elementFromPoint method that is not implemented.

For now I managed to run the webpage on headless chrome using puppeteer, I just made a small change to support seeds loading from localStorage (despite your "No storage of SVG nor seeds as they can be saved separately" claim 🙈) and avoid to manage drag-n-drop files or blobs in a headless environment.

Here is a working snippet.

import * as puppeteer from 'puppeteer';

const config: Record<string, any> = {
  "seeds_config": { "is_debug": false, "debug_id": 0, "nb_seeds": props.fingerprint.seeds.length, "max_seeds": 200, "area": { "width": props.fingerprint.window.width, "height": props.fingerprint.window.height }, "nb_samples": 10, "walls_dist": true, "path_debug": false, "map_vs_dist": 10, "map_vs_dist_max": 30, "map_power": 1, "map_power_range": { "min": 0.1, "max": 3, "step": 0.1 } },
  "shape_config": { "cells_action": "in_cells", "seeds_action": "avoid_path", "debug": false, "view_shape": true, "view_map": true },
  "diag_config": { "cell_debug": 0, "use_filters": false, "disp_scale": 10, "disp_scale_max": 50, "turb_freq": 0.05, "turb_freq_max": 0.2, "turb_freq_step": 0.002 },
  "voronoi_config": { "version": "76", "cell_debug": 0, "min_edge": 6, "is_color": false, "width": props.fingerprint.window.width, "height": props.fingerprint.window.height, "cells_shape": "cubic", "cells_space": 2, "use_unit": false, "unit_ratio": 3.7795, "unit_ratio_default": 3.7795, "view_svg": { "cells": true, "edges": false, "seeds": false, "shape": true }, "mouse_action": "move", "export_ratio": 1, "export_svg": { "cells": true, "edges": false, "seeds": false, "shape": true } },
  "seeds_data": props.fingerprint
};

const browser = await puppeteer.launch({
  headless: true,
  slowMo: 50,
});

const page = await browser.newPage();

await page.evaluateOnNewDocument(config => {
  localStorage.clear();
  for (const key in config) {
    localStorage.setItem(key, JSON.stringify(config[key]));
  }
}, config);

await page.goto("http://localhost:8081/");
await page.waitForSelector("#main_svg");
const svgHandle = await page.$("#main_svg");
const svg = await page.evaluate(svg => svg?.outerHTML ?? '<svg></svg>', svgHandle);

await page.close();
await browser.close();

It would be interesting to decouple generation functionalities from web gui and release a npm package, but I think you need to heavily refactor your code.

[wassfila]

I absolutely agree with regard to decoupling algo from UI, but as you know how the browser evolved, this is sometimes not an easy task. Especially in cases like elementFromPoint, after checking again, I realized that I documented this in the readme Features details

Shaped tesselation area
* sampling points inside an SVG path with document.elementFromPoint(x, y);

Although I did some hard math algo's implementations, that one is tricky because its geometrical complexity is unbound and it's easy with a brute force, so not suited for js, that's where the browser API comes to the rescue. Decoupling it totally might require some wasm acceleration or something probably.

But I checked its usage and it's used by geom.inside_id() which is protected everywhere behind show_inside_path() so if your use case does not require this feature https://github.com/WebSVG/voronoi?tab=readme-ov-file#svg-path-shaped-area-and-png-seeds-cost-map
You could remove dependency to that code.

In the meanwhile, puppeteer to the rescue 😊