- ...
-
- */}
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default ControlCustom;
diff --git a/website/src/components/example/DragNdrop.tsx b/website/src/components/example/DragNdrop.tsx
deleted file mode 100644
index 4503b8ca..00000000
--- a/website/src/components/example/DragNdrop.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import React, { FC, useEffect, useState } from "react";
-
-import "@react-sigma/core/lib/react-sigma.min.css";
-import { SigmaContainer, useRegisterEvents, useSigma } from "@react-sigma/core";
-
-import { GraphDefault } from "../GraphDefault";
-
-const DragNdrop: FC = () => {
- const GraphEvents: React.FC = () => {
- const registerEvents = useRegisterEvents();
- const sigma = useSigma();
- const [draggedNode, setDraggedNode] = useState
(null);
-
- useEffect(() => {
- // Register the events
- registerEvents({
- downNode: (e) => {
- setDraggedNode(e.node);
- sigma.getGraph().setNodeAttribute(e.node, "highlighted", true);
- },
- mouseup: (e) => {
- if (draggedNode) {
- setDraggedNode(null);
- sigma.getGraph().removeNodeAttribute(draggedNode, "highlighted");
-
- // Reset the bounding box around the whole graph
- // so that a "See whole graph" Zoom control button
- // would include dragged nodes if pressed.
- sigma.setCustomBBox(sigma.getBBox());
- }
- },
- mousedown: (e) => {
-
- },
- mousemove: (e) => {
- if (draggedNode) {
- // Get new position of node
- const pos = sigma.viewportToGraph(e);
- sigma.getGraph().setNodeAttribute(draggedNode, "x", pos.x);
- sigma.getGraph().setNodeAttribute(draggedNode, "y", pos.y);
-
- // Prevent sigma to move camera:
- e.preventSigmaDefault();
- e.original.preventDefault();
- e.original.stopPropagation();
- }
- },
- touchup: (e) => {
- if (draggedNode) {
- setDraggedNode(null);
- sigma.getGraph().removeNodeAttribute(draggedNode, "highlighted");
- // Reset the bounding box around the whole graph
- // so that a "See whole graph" Zoom control button
- // would include dragged nodes if pressed.
- sigma.setCustomBBox(sigma.getBBox());
- }
- },
- touchdown: (e) => {
-
- },
- touchmove: (e) => {
- if (draggedNode) {
- // Get new position of node
- const pos = sigma.viewportToGraph(e.touches[0]);
- sigma.getGraph().setNodeAttribute(draggedNode, "x", pos.x);
- sigma.getGraph().setNodeAttribute(draggedNode, "y", pos.y);
-
- // Prevent sigma to move camera:
- e.original.preventDefault();
- e.original.stopPropagation();
- }
- },
- });
- }, [registerEvents, sigma, draggedNode]);
-
- return null;
- };
-
- return (
-
-
- );
-};
-
-export default DragNdrop;
diff --git a/website/src/components/example/Events.tsx b/website/src/components/example/Events.tsx
deleted file mode 100644
index dd9f96dd..00000000
--- a/website/src/components/example/Events.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React, { FC, useEffect } from "react";
-
-import "@react-sigma/core/lib/react-sigma.min.css";
-import { SigmaContainer, useRegisterEvents } from "@react-sigma/core";
-
-import { GraphDefault } from "../GraphDefault";
-
-const Events: FC = () => {
- const GraphEvents: React.FC = () => {
- const registerEvents = useRegisterEvents();
-
- useEffect(() => {
- // Register the events
- registerEvents({
- // node events
- clickNode: (event) => console.log("clickNode", event.event, event.node, event.preventSigmaDefault),
- doubleClickNode: (event) => console.log("doubleClickNode", event.event, event.node, event.preventSigmaDefault),
- rightClickNode: (event) => console.log("rightClickNode", event.event, event.node, event.preventSigmaDefault),
- wheelNode: (event) => console.log("wheelNode", event.event, event.node, event.preventSigmaDefault),
- downNode: (event) => console.log("downNode", event.event, event.node, event.preventSigmaDefault),
- enterNode: (event) => console.log("enterNode", event.node),
- leaveNode: (event) => console.log("leaveNode", event.node),
- // edge events
- clickEdge: (event) => console.log("clickEdge", event.event, event.edge, event.preventSigmaDefault),
- doubleClickEdge: (event) => console.log("doubleClickEdge", event.event, event.edge, event.preventSigmaDefault),
- rightClickEdge: (event) => console.log("rightClickEdge", event.event, event.edge, event.preventSigmaDefault),
- wheelEdge: (event) => console.log("wheelEdge", event.event, event.edge, event.preventSigmaDefault),
- downEdge: (event) => console.log("downEdge", event.event, event.edge, event.preventSigmaDefault),
- enterEdge: (event) => console.log("enterEdge", event.edge),
- leaveEdge: (event) => console.log("leaveEdge", event.edge),
- // stage events
- clickStage: (event) => console.log("clickStage", event.event, event.preventSigmaDefault),
- doubleClickStage: (event) => console.log("doubleClickStage", event.event, event.preventSigmaDefault),
- rightClickStage: (event) => console.log("rightClickStage", event.event, event.preventSigmaDefault),
- wheelStage: (event) => console.log("wheelStage", event.event, event.preventSigmaDefault),
- downStage: (event) => console.log("downStage", event.event, event.preventSigmaDefault),
- // default mouse events
- click: (event) => console.log("click", event.x, event.y),
- doubleClick: (event) => console.log("doubleClick", event.x, event.y),
- wheel: (event) => console.log("wheel", event.x, event.y, event.delta),
- rightClick: (event) => console.log("rightClick", event.x, event.y),
- mouseup: (event) => console.log("mouseup", event.x, event.y),
- mousedown: (event) => console.log("mousedown", event.x, event.y),
- mousemove: (event) => console.log("mousemove", event.x, event.y),
- // default touch events
- touchup: (event) => console.log("touchup", event.touches),
- touchdown: (event) => console.log("touchdown", event.touches),
- touchmove: (event) => console.log("touchmove", event.touches),
- // sigma kill
- kill: () => console.log("kill"),
- resize: () => console.log("resize"),
- beforeRender: () => console.log("beforeRender"),
- afterRender: () => console.log("afterRender"),
- // sigma camera update
- updated: (event) => console.log("updated", event.x, event.y, event.angle, event.ratio),
- });
- }, [registerEvents]);
-
- return null;
- };
- return (
-
-
- );
-};
-
-export default Events;
diff --git a/website/src/components/example/ExternalState.tsx b/website/src/components/example/ExternalState.tsx
deleted file mode 100644
index 7008b56b..00000000
--- a/website/src/components/example/ExternalState.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React, { FC, useState, useEffect } from "react";
-import Sigma from "sigma";
-import { SigmaContainer } from "@react-sigma/core";
-
-const ExternalState: FC = () => {
- const [sigma, setSigma] = useState(null);
-
- useEffect(() => {
- if (sigma) {
- // Do what ever you want with the sigma API
- const graph = sigma.getGraph();
- graph.addNode("A", { x: 0, y: 0, label: "Node A", size: 10 });
- graph.addNode("B", { x: 1, y: 1, label: "Node B", size: 10 });
- graph.addEdgeWithKey("rel1", "A", "B", { label: "REL_1" });
- }
- }, [sigma]);
-
- return
-
- );
-};
-
-export default LayoutCircular;
diff --git a/website/src/components/example/LayoutFA2.tsx b/website/src/components/example/LayoutFA2.tsx
deleted file mode 100644
index 7b9e7631..00000000
--- a/website/src/components/example/LayoutFA2.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-import Graph from "graphology";
-import { Attributes } from "graphology-types";
-
-import { SigmaContainer, useSigma, useLoadGraph } from "@react-sigma/core";
-import { useWorkerLayoutForceAtlas2 } from "@react-sigma/layout-forceatlas2";
-
-import { useSeedRandom } from "../useSeedRandom";
-import { GraphDefault } from "../GraphDefault";
-
-export const LayoutFA2: React.FC = () => {
- const Fa2: React.FC = () => {
- const { start, kill, isRunning } = useWorkerLayoutForceAtlas2({ settings: { slowDown: 10 } });
-
- useEffect(() => {
- // start FA2
- start();
- return () => {
- // Kill FA2 on unmount
- kill();
- };
- }, [start, kill]);
-
- return null;
- };
-
- return (
-
-
- );
-};
-
-export default LayoutFA2;
diff --git a/website/src/components/example/LayoutFA2Control.tsx b/website/src/components/example/LayoutFA2Control.tsx
deleted file mode 100644
index b5b6709e..00000000
--- a/website/src/components/example/LayoutFA2Control.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React, { FC, useEffect, useState } from "react";
-
-import "@react-sigma/core/lib/react-sigma.min.css";
-import { SigmaContainer, ControlsContainer, useSigma } from "@react-sigma/core";
-import { LayoutForceAtlas2Control } from "@react-sigma/layout-forceatlas2";
-
-import { GraphDefault } from "../GraphDefault";
-
-const LayoutFA2Control: FC = () => {
- return (
-
-
-
-
- );
-};
-
-export default LayoutFA2Control;
diff --git a/website/src/components/example/LoadGraphWithHook.tsx b/website/src/components/example/LoadGraphWithHook.tsx
deleted file mode 100644
index b9dc865f..00000000
--- a/website/src/components/example/LoadGraphWithHook.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React, { FC, useEffect } from "react";
-
-import "@react-sigma/core/lib/react-sigma.min.css";
-import { MultiDirectedGraph } from "graphology";
-import { SigmaContainer, useLoadGraph } from "@react-sigma/core";
-
-const LoadGraphWithHook: FC = () => {
- const MyGraph: FC = () => {
- const loadGraph = useLoadGraph();
-
- useEffect(() => {
- // Create the graph
- const graph = new MultiDirectedGraph();
- graph.addNode("A", { x: 0, y: 0, label: "Node A", size: 10 });
- graph.addNode("B", { x: 1, y: 1, label: "Node B", size: 10 });
- graph.addEdgeWithKey("rel1", "A", "B", { label: "REL_1" });
- loadGraph(graph);
- }, [loadGraph]);
-
- return null;
- };
-
- return (
-
-
- );
-};
-
-export default LoadGraphWithHook;
diff --git a/website/src/components/example/MultiGraph.tsx b/website/src/components/example/MultiGraph.tsx
deleted file mode 100644
index 97b78d61..00000000
--- a/website/src/components/example/MultiGraph.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { FC, useEffect } from "react";
-
-import "@react-sigma/core/lib/react-sigma.min.css";
-import { MultiDirectedGraph } from "graphology";
-import { SigmaContainer, useLoadGraph } from "@react-sigma/core";
-
-export const MultiGraph: FC = () => {
- const MyGraph: FC = () => {
- const loadGraph = useLoadGraph();
-
- useEffect(() => {
- // Create the graph
- const graph = new MultiDirectedGraph();
- graph.addNode("A", { x: 0, y: 0, label: "Node A", size: 10 });
- graph.addNode("B", { x: 1, y: 1, label: "Node B", size: 10 });
- graph.addEdgeWithKey("rel1", "A", "B", { label: "REL_1" });
- graph.addEdgeWithKey("rel2", "A", "B", { label: "REL_2" });
- loadGraph(graph);
- }, [loadGraph]);
-
- return null;
- };
-
- return (
-
-
- );
-};
-
-export default MultiGraph;
diff --git a/website/src/components/useSeedRandom.tsx b/website/src/components/useSeedRandom.tsx
deleted file mode 100644
index e63c40ac..00000000
--- a/website/src/components/useSeedRandom.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { useEffect, useMemo } from "react";
-import seedrandom from "seedrandom";
-import { faker, Faker } from "@faker-js/faker";
-
-/**
- * The goal of this file is to seed random generators if the query params 'seed' is present.
- * As an example you can go to http://localhost:8000/components.html?seed=foo and refresh multiple times the page
- * you should have the result. This feature is mainly used for the E2E test.
- *
- * For now it :
- * - replace the global `Math.random` with a seed one
- * - seed the faker library
- */
-export const useSeedRandom = (): { faker: Faker; randomColor: () => string } => {
- const urlParams = new URLSearchParams(window.location.search);
- const seed = urlParams.get("seed");
-
- useEffect(() => {
- // Globally seed the Math.random
- if (seed) {
- seedrandom(seed, { global: true });
- // seed faker with the random function
- faker.seed(Math.random());
- }
- }, [seed]);
-
- const randomColor = useMemo(() => {
- return (): string => {
- const digits = "0123456789abcdef";
- let code = "#";
- for (let i = 0; i < 6; i++) {
- code += digits.charAt(Math.floor(Math.random() * 16));
- }
- return code;
- };
- }, []);
-
- return { faker, randomColor };
-};
diff --git a/website/static/img/logo.svg b/website/static/img/logo.svg
deleted file mode 100644
index f5df4fe7..00000000
--- a/website/static/img/logo.svg
+++ /dev/null
@@ -1,115 +0,0 @@
-
-
-
-
-
-
-
- image/svg+xml
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/website/tsconfig.json b/website/tsconfig.json
deleted file mode 100644
index 1c09ab1e..00000000
--- a/website/tsconfig.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "extends": ["@tsconfig/docusaurus/tsconfig.json", "../tsconfig.base.json"],
- "compilerOptions": {
- "baseUrl": "."
- }
-}