storybook-addon-recoil-flow
Version:
Shows a graph of the current recoil state
71 lines (70 loc) • 3.45 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useCallback, useEffect, useRef, useState } from "react";
import { GraphCanvas, lightTheme } from "reagraph";
import { FlowInfo } from "./info";
import { usePanelPosition } from "../hooks/usePanelPosition";
import { css } from "@emotion/react";
const RECOIL_BLUE = "#5a91ea";
const useRemoteRecoilNodesAndEdges = () => {
const [nodesAndEdges, setNodesAndEdges] = useState({ nodes: [], edges: [] });
useEffect(() => {
const onMessage = (ev) => {
if (ev.data.name === "recoil-flow-changed") {
const { nodes, edges } = ev.data;
setNodesAndEdges({
nodes,
edges,
});
}
};
window.addEventListener("message", onMessage);
return () => window.removeEventListener("message", onMessage);
}, []);
// useChannel(
// {
// "recoil-flow-changed": ({
// nodes,
// edges,
// }: {
// nodes: RecoilNode[]
// edges: RecoilEdge[]
// }) => {
// setNodesAndEdges({
// nodes,
// edges,
// })
// },
// },
// []
// )
return nodesAndEdges;
};
export const FlowGraph = () => {
const { nodes, edges } = useRemoteRecoilNodesAndEdges();
const graphRef = useRef(null);
const [selectedNode, setSelectedNode] = useState(null);
const panelPosition = usePanelPosition();
const onNodeClick = useCallback(({ id }) => {
var _a;
setSelectedNode(id);
(_a = graphRef.current) === null || _a === void 0 ? void 0 : _a.centerGraph([id]);
}, []);
const onCanvasClick = useCallback(() => {
var _a;
setSelectedNode(null);
(_a = graphRef.current) === null || _a === void 0 ? void 0 : _a.centerGraph([]);
}, []);
const noData = nodes.length + edges.length === 0;
return (_jsxs("div", { css: css `
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
gap: 1px;
background: rgba(0, 0, 0, 0.1);
flex-direction: ${panelPosition === "bottom" ? "row" : "column"};
color: #333;
`, children: [noData && _jsx("div", { children: "No Recoil Nodes found" }), _jsx("div", { style: { flexGrow: 1, position: "relative" }, children: _jsx(GraphCanvas, { ref: graphRef, nodes: nodes, edges: edges, cameraMode: "rotate", layoutType: "treeTd3d", onNodeClick: onNodeClick, onCanvasClick: onCanvasClick, selections: selectedNode ? [selectedNode] : [], theme: Object.assign(Object.assign({}, lightTheme), { node: Object.assign(Object.assign({}, lightTheme.node), { activeFill: RECOIL_BLUE, label: Object.assign(Object.assign({}, lightTheme.node.label), { color: "#333", activeColor: RECOIL_BLUE }) }), ring: Object.assign(Object.assign({}, lightTheme.ring), { activeFill: RECOIL_BLUE, fill: RECOIL_BLUE }), edge: Object.assign(Object.assign({}, lightTheme.edge), { activeFill: RECOIL_BLUE, label: Object.assign(Object.assign({}, lightTheme.edge.label), { color: RECOIL_BLUE, activeColor: RECOIL_BLUE }) }), arrow: Object.assign(Object.assign({}, lightTheme.arrow), { activeFill: RECOIL_BLUE }) }) }) }), _jsx(FlowInfo, { nodes: nodes, edges: edges, selectedNodeId: selectedNode, onSelectNode: onNodeClick, onClearNode: onCanvasClick })] }));
};