[stories] Adds a new story

That new story showcases how to render local images in various ways with
@sigma/node-image. It addresses issue #1440.

Author: jacomyal

packages/storybook/stories/node-image/images/dice.png

@@ -0,0 +1,116 @@
+import { NodeImageProgram, NodePictogramProgram } from "@sigma/node-image";
+import Graph from "graphology";
+import Sigma from "sigma";
+
+import { onStoryDown } from "../utils";
+// Gives a URL usable at runtime
+import PNG_IMAGE from "./images/dice.png";
+// Gives a URL usable at runtime
+import JPG_IMAGE from "./images/flower.jpg";
+// Gives a URL usable at runtime
+import SVG_ICON from "./images/icon-0.svg";
+// Gives the string content of the SVG image
+import RAW_SVG_ICON from "./images/icon-1.svg?raw";
+
+const STRING_SVG_ICON = `<svg
+  fill="#000000"
+  stroke-width="0"
+  viewBox="0 0 320 512"
+  height="200px"
+  width="200px"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M142.9 96c-21.5 0-42.2 8.5-57.4 23.8L54.6 150.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L40.2 74.5C67.5 47.3 104.4 32 142.9 32C223 32 288 97 288 177.1c0 38.5-15.3 75.4-42.5 102.6L109.3 416H288c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-12.9 0-24.6-7.8-29.6-19.8s-2.2-25.7 6.9-34.9L200.2 234.5c15.2-15.2 23.8-35.9 23.8-57.4c0-44.8-36.3-81.1-81.1-81.1z"
+  ></path>
+</svg>`;
+
+const BASE_64_IMAGE =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=";
+
+function svgToDataURI(svg: string): string {
+  const blob = new Blob([svg], { type: "image/svg+xml" });
+  return URL.createObjectURL(blob);
+}
+
+export default () => {
+  const container = document.getElementById("sigma-container") as HTMLElement;
+
+  const graph = new Graph();
+
+  graph.addNode("a", {
+    x: 0,
+    y: 0,
+    size: 20,
+    label: "A",
+    color: "red",
+    image: PNG_IMAGE,
+    type: "image",
+  });
+  graph.addNode("b", {
+    x: 1,
+    y: -1,
+    size: 40,
+    label: "B",
+    color: "red",
+    image: JPG_IMAGE,
+    type: "image",
+  });
+  graph.addNode("c", {
+    x: 3,
+    y: -2,
+    size: 20,
+    label: "C",
+    color: "red",
+    image: SVG_ICON,
+    type: "pictogram",
+  });
+  graph.addNode("d", {
+    x: 1,
+    y: -3,
+    size: 20,
+    label: "D",
+    color: "blue",
+    image: svgToDataURI(RAW_SVG_ICON),
+    type: "pictogram",
+  });
+  graph.addNode("e", {
+    x: 3,
+    y: -4,
+    size: 40,
+    label: "E",
+    color: "blue",
+    image: svgToDataURI(STRING_SVG_ICON),
+    type: "pictogram",
+  });
+  graph.addNode("f", {
+    x: 4,
+    y: -5,
+    size: 20,
+    label: "F",
+    color: "blue",
+    image: BASE_64_IMAGE,
+    type: "image",
+  });
+
+  graph.addEdge("a", "b", { size: 10 });
+  graph.addEdge("b", "c", { size: 10 });
+  graph.addEdge("b", "d", { size: 10 });
+  graph.addEdge("c", "b", { size: 10 });
+  graph.addEdge("c", "e", { size: 10 });
+  graph.addEdge("d", "c", { size: 10 });
+  graph.addEdge("d", "e", { size: 10 });
+  graph.addEdge("e", "d", { size: 10 });
+  graph.addEdge("f", "e", { size: 10 });
+
+  const renderer = new Sigma(graph, container, {
+    nodeProgramClasses: {
+      image: NodeImageProgram,
+      pictogram: NodePictogramProgram,
+    },
+  });
+
+  onStoryDown(() => {
+    renderer.kill();
+  });
+};

packages/storybook/stories/node-image/images/flower.jpg

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/web-components";
 
 import template from "./index.html?raw";
+import localImagesPlay from "./local-images";
+import localImagesSource from "./local-images?raw";
 import nodeImagesPlay from "./node-images";
 import nodeImagesSource from "./node-images?raw";
 import nodePictogramsPlay from "./node-pictograms";
@@ -54,6 +56,18 @@ export const nodePictogramsWithBackground: Story = {
   },
 };
 
+export const localImages: Story = {
+  name: "Displaying local images",
+  render: () => template,
+  play: localImagesPlay,
+  args: {},
+  parameters: {
+    storySource: {
+      source: localImagesSource,
+    },
+  },
+};
+
 export const optionsShowcase: Story = {
   name: "Options showcase",
   render: () => template,

packages/storybook/stories/node-image/images/icon-0.svg

@@ -1,4 +1,4 @@
 {
   "extends": "../../tsconfig.base.json",
-  "include": ["./types/raw.d.ts", ".storybook/*.tsx", "stories"]
+  "include": ["./types", ".storybook/*.tsx", "stories"]
 }

packages/storybook/stories/node-image/images/icon-1.svg

@@ -0,0 +1,14 @@
+declare module "*.jpg" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.png" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.svg" {
+  const value: string;
+  export default value;
+}