adding image support to viz.js

[christianvoigt]

Hi,
It would be great if viz.js users could use icons in nodes. I found this issue in the old repository about experimental support for image support in nodes: mdaines#50

It refers to this commit that does not seem to have landed in the master branch: mdaines@7c7f72f

What do you think about this approach? Or do you see any other method of getting this to work?

I think other users would be very interested in this as well (see for example this issue in the DiagrammR project, or this issue in my Argdown project)

[aduh95]

I think the image option is still available, it's even part of the test suite:

viz.js/test/browser.js

Lines 358 to 400 in d50ea30

	it('can reference images by name if dimensions are specified using the "images" option', async function () {
	const [name, width, height] = await page.evaluate(() =>
	window.getViz().then((viz) =>
	viz
	.renderString('digraph { a[image="test.png"]; }', {
	images: [{ path: "test.png", width: 400, height: 300 }],
	})
	.then(window.parseSVG)
	.then(({ documentElement }) => [
	documentElement
	.querySelector("image")
	.getAttributeNS("http://www.w3.org/1999/xlink", "href"),
	documentElement.querySelector("image").getAttribute("width"),
	documentElement.querySelector("image").getAttribute("height"),
	])
	)
	);
	assert.strictEqual(name, "test.png");
	assert.strictEqual(width, "400px");
	assert.strictEqual(height, "300px");
	});
	it("can reference images with a protocol and hostname", async function () {
	const result = await page.evaluate(() =>
	window.getViz().then((viz) =>
	viz
	.renderString(
	'digraph { a[id="a",image="http://example.com/xyz/test.png"]; b[id="b",image="http://example.com/xyz/test2.png"]; }',
	{
	images: [
	{
	path: "http://example.com/xyz/test.png",
	width: 400,
	height: 300,
	},
	{
	path: "http://example.com/xyz/test2.png",
	width: 300,
	height: 200,
	},
	],
	}

I haven't used this option myself, but I'm hoping it's working as advertised.

[christianvoigt]

great, I will try again (my own test failed and I searched this repository for the term "images" and could not find anything, guess the search is not working that well then). Thanks for the answer, I will report back if I can get this to work.

[christianvoigt]

I can confirm that this is working. I can even add svg images and "resize" them by choosing arbitrary dimensions. Thanks again for the help!

[hungnmai]

I think the image option is still available, it's even part of the test suite:

viz.js/test/browser.js

Lines 358 to 400 in d50ea30

	it('can reference images by name if dimensions are specified using the "images" option', async function () {
	const [name, width, height] = await page.evaluate(() =>
	window.getViz().then((viz) =>
	viz
	.renderString('digraph { a[image="test.png"]; }', {
	images: [{ path: "test.png", width: 400, height: 300 }],
	})
	.then(window.parseSVG)
	.then(({ documentElement }) => [
	documentElement
	.querySelector("image")
	.getAttributeNS("http://www.w3.org/1999/xlink", "href"),
	documentElement.querySelector("image").getAttribute("width"),
	documentElement.querySelector("image").getAttribute("height"),
	])
	)
	);
	assert.strictEqual(name, "test.png");
	assert.strictEqual(width, "400px");
	assert.strictEqual(height, "300px");
	});
	it("can reference images with a protocol and hostname", async function () {
	const result = await page.evaluate(() =>
	window.getViz().then((viz) =>
	viz
	.renderString(
	'digraph { a[id="a",image="http://example.com/xyz/test.png"]; b[id="b",image="http://example.com/xyz/test2.png"]; }',
	{
	images: [
	{
	path: "http://example.com/xyz/test.png",
	width: 400,
	height: 300,
	},
	{
	path: "http://example.com/xyz/test2.png",
	width: 300,
	height: 200,
	},
	],
	}

I haven't used this option myself, but I'm hoping it's working as advertised.

thanks @aduh95 , it work for me