[storybook] Improves @sigma/node-image stories

packages/storybook/stories/node-image/node-images.ts

@@ -0,0 +1,76 @@
+import { NodeImageProgram } from "@sigma/node-image";
+import Graph from "graphology";
+import Sigma from "sigma";
+
+import { onStoryDown } from "../utils";
+
+export default () => {
+  const container = document.getElementById("sigma-container") as HTMLElement;
+
+  const graph = new Graph();
+
+  graph.addNode("a", {
+    x: 0,
+    y: 0,
+    size: 20,
+    label: "Jim",
+    image: "https://upload.wikimedia.org/wikipedia/commons/7/7f/Jim_Morrison_1969.JPG",
+  });
+  graph.addNode("b", {
+    x: 1,
+    y: -1,
+    size: 40,
+    label: "Johnny",
+    image: "https://upload.wikimedia.org/wikipedia/commons/a/a8/Johnny_Hallyday_%E2%80%94_Milan%2C_1973.jpg",
+  });
+  graph.addNode("c", {
+    x: 3,
+    y: -2,
+    size: 20,
+    label: "Jimi",
+    image: "https://upload.wikimedia.org/wikipedia/commons/6/6c/Jimi-Hendrix-1967-Helsinki-d.jpg",
+  });
+  graph.addNode("d", {
+    x: 1,
+    y: -3,
+    size: 20,
+    label: "Bob",
+    image:
+      "https://upload.wikimedia.org/wikipedia/commons/c/c5/Bob-Dylan-arrived-at-Arlanda-surrounded-by-twenty-bodyguards-and-assistants-391770740297_%28cropped%29.jpg",
+  });
+  graph.addNode("e", {
+    x: 3,
+    y: -4,
+    size: 40,
+    label: "Eric",
+    image: "https://upload.wikimedia.org/wikipedia/commons/b/b1/Eric_Clapton_1.jpg",
+  });
+  graph.addNode("f", {
+    x: 4,
+    y: -5,
+    size: 20,
+    label: "Mick",
+    image: "https://upload.wikimedia.org/wikipedia/commons/6/66/Mick-Jagger-1965b.jpg",
+  });
+
+  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, {
+    defaultNodeType: "image",
+    nodeProgramClasses: {
+      image: NodeImageProgram,
+    },
+  });
+
+  onStoryDown(() => {
+    renderer.kill();
+  });
+};

packages/storybook/stories/node-image/node-pictograms-background.ts

@@ -0,0 +1,97 @@
+import { createNodeImageProgram } from "@sigma/node-image";
+import Graph from "graphology";
+import Sigma from "sigma";
+import { NodeCircleProgram, createNodeCompoundProgram } from "sigma/rendering";
+
+import { onStoryDown } from "../utils";
+
+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: "pink",
+    pictoColor: "red",
+    image: "https://icons.getbootstrap.com/assets/icons/person.svg",
+  });
+  graph.addNode("b", {
+    x: 1,
+    y: -1,
+    size: 40,
+    label: "B",
+    color: "yellow",
+    pictoColor: "red",
+    image: "https://icons.getbootstrap.com/assets/icons/building.svg",
+  });
+  graph.addNode("c", {
+    x: 3,
+    y: -2,
+    size: 20,
+    label: "C",
+    color: "yellow",
+    pictoColor: "red",
+    image: "https://icons.getbootstrap.com/assets/icons/chat.svg",
+  });
+  graph.addNode("d", {
+    x: 1,
+    y: -3,
+    size: 20,
+    label: "D",
+    color: "pink",
+    pictoColor: "blue",
+    image: "https://icons.getbootstrap.com/assets/icons/database.svg",
+  });
+  graph.addNode("e", {
+    x: 3,
+    y: -4,
+    size: 40,
+    label: "E",
+    color: "pink",
+    pictoColor: "blue",
+    image: "https://icons.getbootstrap.com/assets/icons/building.svg",
+  });
+  graph.addNode("f", {
+    x: 4,
+    y: -5,
+    size: 20,
+    label: "F",
+    color: "yellow",
+    pictoColor: "blue",
+    image: "https://icons.getbootstrap.com/assets/icons/database.svg",
+  });
+
+  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 NodePictogramCustomProgram = createNodeImageProgram({
+    padding: 0.15,
+    size: { mode: "force", value: 256 },
+    drawingMode: "color",
+    colorAttribute: "pictoColor",
+  });
+
+  const NodeProgram = createNodeCompoundProgram([NodeCircleProgram, NodePictogramCustomProgram]);
+
+  const renderer = new Sigma(graph, container, {
+    defaultNodeType: "pictogram",
+    nodeProgramClasses: {
+      pictogram: NodeProgram,
+    },
+  });
+
+  onStoryDown(() => {
+    renderer.kill();
+  });
+};

packages/storybook/stories/node-image/node-pictograms.ts

@@ -0,0 +1,81 @@
+import { NodePictogramProgram } from "@sigma/node-image";
+import Graph from "graphology";
+import Sigma from "sigma";
+
+import { onStoryDown } from "../utils";
+
+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: "https://icons.getbootstrap.com/assets/icons/person.svg",
+  });
+  graph.addNode("b", {
+    x: 1,
+    y: -1,
+    size: 40,
+    label: "B",
+    color: "red",
+    image: "https://icons.getbootstrap.com/assets/icons/building.svg",
+  });
+  graph.addNode("c", {
+    x: 3,
+    y: -2,
+    size: 20,
+    label: "C",
+    color: "red",
+    image: "https://icons.getbootstrap.com/assets/icons/chat.svg",
+  });
+  graph.addNode("d", {
+    x: 1,
+    y: -3,
+    size: 20,
+    label: "D",
+    color: "blue",
+    image: "https://icons.getbootstrap.com/assets/icons/database.svg",
+  });
+  graph.addNode("e", {
+    x: 3,
+    y: -4,
+    size: 40,
+    label: "E",
+    color: "blue",
+    image: "https://icons.getbootstrap.com/assets/icons/building.svg",
+  });
+  graph.addNode("f", {
+    x: 4,
+    y: -5,
+    size: 20,
+    label: "F",
+    color: "blue",
+    image: "https://icons.getbootstrap.com/assets/icons/database.svg",
+  });
+
+  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, {
+    defaultNodeType: "pictogram",
+    nodeProgramClasses: {
+      pictogram: NodePictogramProgram,
+    },
+  });
+
+  onStoryDown(() => {
+    renderer.kill();
+  });
+};

packages/storybook/stories/node-image/index.ts → packages/storybook/stories/node-image/options-showcase.ts

@@ -3,6 +3,8 @@ import chroma from "chroma-js";
 import Graph from "graphology";
 import Sigma from "sigma";
 
+import { onStoryDown } from "../utils";
+
 export default () => {
   const container = document.getElementById("sigma-container") as HTMLElement;
 
@@ -126,7 +128,7 @@ export default () => {
     });
   });
 
-  new Sigma(graph, container, {
+  const renderer = new Sigma(graph, container, {
     allowInvalidContainer: true,
     stagePadding: 50,
     itemSizesReference: "positions",
@@ -139,4 +141,8 @@ export default () => {
       {},
     ),
   });
+
+  onStoryDown(() => {
+    renderer.kill();
+  });
 };

packages/storybook/stories/node-image/stories.ts

@@ -1,8 +1,14 @@
 import type { Meta, StoryObj } from "@storybook/web-components";
 
-import play from "./index";
 import template from "./index.html?raw";
-import source from "./index?raw";
+import nodeImagesPlay from "./node-images";
+import nodeImagesSource from "./node-images?raw";
+import nodePictogramsPlay from "./node-pictograms";
+import nodePictogramsBackgroundPlay from "./node-pictograms-background";
+import nodePictogramsBackgroundSource from "./node-pictograms-background?raw";
+import nodePictogramsSource from "./node-pictograms?raw";
+import optionsShowcasePlay from "./options-showcase";
+import optionsShowcaseSource from "./options-showcase?raw";
 
 const meta: Meta = {
   id: "node-image",
@@ -12,14 +18,50 @@ export default meta;
 
 type Story = StoryObj;
 
-export const story: Story = {
-  name: "All features",
+export const nodeImages: Story = {
+  name: "NodeImageRenderer",
   render: () => template,
-  play,
+  play: nodeImagesPlay,
   args: {},
   parameters: {
     storySource: {
-      source,
+      source: nodeImagesSource,
+    },
+  },
+};
+
+export const nodePictograms: Story = {
+  name: "NodePictogramRenderer",
+  render: () => template,
+  play: nodePictogramsPlay,
+  args: {},
+  parameters: {
+    storySource: {
+      source: nodePictogramsSource,
+    },
+  },
+};
+
+export const nodePictogramsWithBackground: Story = {
+  name: "NodePictogramRenderer with background colors",
+  render: () => template,
+  play: nodePictogramsBackgroundPlay,
+  args: {},
+  parameters: {
+    storySource: {
+      source: nodePictogramsBackgroundSource,
+    },
+  },
+};
+
+export const optionsShowcase: Story = {
+  name: "Options showcase",
+  render: () => template,
+  play: optionsShowcasePlay,
+  args: {},
+  parameters: {
+    storySource: {
+      source: optionsShowcaseSource,
     },
   },
 };