Skip to content

Commit

Permalink
[stories] Adds a new story
Browse files Browse the repository at this point in the history
That new story showcases how to render local images in various ways with
@sigma/node-image. It addresses issue #1440.
  • Loading branch information
jacomyal committed Jul 3, 2024
1 parent 721ac7e commit 3107e21
Show file tree
Hide file tree
Showing 8 changed files with 169 additions and 1 deletion.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions packages/storybook/stories/node-image/images/icon-0.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions packages/storybook/stories/node-image/images/icon-1.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
116 changes: 116 additions & 0 deletions packages/storybook/stories/node-image/local-images.ts
Original file line number Diff line number Diff line change
@@ -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();
});
};
14 changes: 14 additions & 0 deletions packages/storybook/stories/node-image/stories.ts
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion packages/storybook/tsconfig.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"extends": "../../tsconfig.base.json",
"include": ["./types/raw.d.ts", ".storybook/*.tsx", "stories"]
"include": ["./types", ".storybook/*.tsx", "stories"]
}
14 changes: 14 additions & 0 deletions packages/storybook/types/images.d.ts
Original file line number Diff line number Diff line change
@@ -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;
}

0 comments on commit 3107e21

Please sign in to comment.