Deploy to GitHub pages

CNAME

@@ -0,0 +1 @@
+reagraph.dev

assets/Basic.story-18600d30.js

@@ -0,0 +1,137 @@
+import{j as e}from"./jsx-runtime-9c4ae004.js";import{r as x}from"./index-1b03fe98.js";import{G as n,l as ae}from"./RadialMenu-25eddc55.js";import{s as a,a as r,r as re,b as C}from"./demo-9c61d665.js";import"./index-27578f8f.esm-71b00cea.js";import"./extends-98964cd2.js";import"./client-449ccf6c.js";import"./index-6fd5a17b.js";const ge={title:"Demos/Basic",component:n},te=s=>e.jsx(n,{...s}),d=te.bind({});d.args={nodes:a,edges:r,cameraMode:"pan",theme:ae,layoutType:"forceDirected2d",sizingType:"none",labelType:"auto"};const l=()=>e.jsx(n,{nodes:[{id:"1",label:"1"},{id:"2",label:"2"}],edges:[{source:"1",target:"2",id:"1-2",label:"1-2"},{source:"2",target:"1",id:"2-1",label:"2-1"}]}),c=()=>e.jsx(n,{labelType:"all",labelFontUrl:"https://ey2pz3.csb.app/NotoSansSC-Regular.ttf",nodes:[{id:"1",label:"牡"},{id:"2",label:"牡"}],edges:[{source:"1",target:"2",id:"1-2",label:"牡 - 牡"},{source:"2",target:"1",id:"2-1",label:"牡 - 牡"}]}),p=()=>e.jsx(n,{nodes:a,edges:r,disabled:!0}),u=()=>e.jsx(n,{nodes:a,edges:r,layoutType:"forceDirected3d",children:e.jsx("directionalLight",{position:[0,5,-4],intensity:1})}),m=()=>e.jsx("div",{style:{display:"flex",flexWrap:"wrap"},children:re(10).map(s=>e.jsx("div",{style:{border:"solid 1px red",height:350,width:350,margin:15,position:"relative"},children:e.jsx(n,{disabled:!0,nodes:a,edges:r,animated:!1})},s))}),g=()=>{var f;const[s,i]=x.useState(a),[t,ne]=x.useState(r);return e.jsxs("div",{children:[e.jsxs("div",{style:{zIndex:9,position:"absolute",top:15,right:15,background:"rgba(0, 0, 0, .5)",padding:1,color:"white"},children:[e.jsx("button",{style:{display:"block",width:"100%"},onClick:()=>{const o=C(0,1e3);i([...s,{id:`n-${o}`,label:`Node ${o}`}]),C(0,2)!==2&&ne([...t,{id:`e-${o}`,source:s[s.length-1].id,target:`n-${o}`}])},children:"Add Node"}),e.jsxs("button",{style:{display:"block",width:"100%"},onClick:()=>{i(s.filter(o=>{var k;return o.id!==((k=s[0])==null?void 0:k.id)}))},children:["Remove Node ",(f=s[0])==null?void 0:f.id]})]}),e.jsx(n,{nodes:s,edges:t})]})},b=()=>{const s=x.useRef(null);return e.jsxs("div",{children:[e.jsx("div",{style:{zIndex:9,position:"absolute",top:15,right:15,background:"rgba(0, 0, 0, .5)",padding:1,color:"white"},children:e.jsx("button",{style:{display:"block",width:"100%"},onClick:()=>{const i=s.current.exportCanvas(),t=document.createElement("a");t.setAttribute("href",i),t.setAttribute("target","_blank"),t.setAttribute("download","graph.png"),t.click()},children:"Export Graph"})}),e.jsx(n,{ref:s,nodes:a,edges:r})]})},h=()=>e.jsx(n,{animated:!1,nodes:a,edges:r}),v=()=>e.jsx(n,{animated:!1,nodes:a,edges:r,glOptions:{preserveDrawingBuffer:!0}}),y=()=>e.jsx(n,{nodes:[{id:"1",label:"Node 1"},{id:"2",label:"Node 2"}],edges:[{source:"1",target:"2",id:"1-2",label:"1-2"},{source:"2",target:"1",id:"2-1",label:"2-1"}],onNodeDoubleClick:s=>alert(s.label)});var N,S,j;d.parameters={...d.parameters,docs:{...(N=d.parameters)==null?void 0:N.docs,source:{originalSource:"args => <GraphCanvas {...args} />",...(j=(S=d.parameters)==null?void 0:S.docs)==null?void 0:j.source}}};var w,E,G;l.parameters={...l.parameters,docs:{...(w=l.parameters)==null?void 0:w.docs,source:{originalSource:`() => <GraphCanvas nodes={[{
+  id: '1',
+  label: '1'
+}, {
+  id: '2',
+  label: '2'
+}]} edges={[{
+  source: '1',
+  target: '2',
+  id: '1-2',
+  label: '1-2'
+}, {
+  source: '2',
+  target: '1',
+  id: '2-1',
+  label: '2-1'
+}]} />`,...(G=(E=l.parameters)==null?void 0:E.docs)==null?void 0:G.source}}};var A,D,T;c.parameters={...c.parameters,docs:{...(A=c.parameters)==null?void 0:A.docs,source:{originalSource:`() => <GraphCanvas labelType="all" labelFontUrl="https://ey2pz3.csb.app/NotoSansSC-Regular.ttf" nodes={[{
+  id: '1',
+  label: '牡'
+}, {
+  id: '2',
+  label: '牡'
+}]} edges={[{
+  source: '1',
+  target: '2',
+  id: '1-2',
+  label: '牡 - 牡'
+}, {
+  source: '2',
+  target: '1',
+  id: '2-1',
+  label: '牡 - 牡'
+}]} />`,...(T=(D=c.parameters)==null?void 0:D.docs)==null?void 0:T.source}}};var R,$,z;p.parameters={...p.parameters,docs:{...(R=p.parameters)==null?void 0:R.docs,source:{originalSource:"() => <GraphCanvas nodes={simpleNodes} edges={simpleEdges} disabled />",...(z=($=p.parameters)==null?void 0:$.docs)==null?void 0:z.source}}};var I,L,B;u.parameters={...u.parameters,docs:{...(I=u.parameters)==null?void 0:I.docs,source:{originalSource:`() => <GraphCanvas nodes={simpleNodes} edges={simpleEdges} layoutType="forceDirected3d">
+    <directionalLight position={[0, 5, -4]} intensity={1} />
+  </GraphCanvas>`,...(B=(L=u.parameters)==null?void 0:L.docs)==null?void 0:B.source}}};var O,U,W;m.parameters={...m.parameters,docs:{...(O=m.parameters)==null?void 0:O.docs,source:{originalSource:`() => <div style={{
+  display: 'flex',
+  flexWrap: 'wrap'
+}}>
+    {range(10).map(i => <div key={i} style={{
+    border: 'solid 1px red',
+    height: 350,
+    width: 350,
+    margin: 15,
+    position: 'relative'
+  }}>
+        <GraphCanvas disabled nodes={simpleNodes} edges={simpleEdges} animated={false} />
+      </div>)}
+  </div>`,...(W=(U=m.parameters)==null?void 0:U.docs)==null?void 0:W.source}}};var _,F,M;g.parameters={...g.parameters,docs:{...(_=g.parameters)==null?void 0:_.docs,source:{originalSource:`() => {
+  const [nodes, setNodes] = useState(simpleNodes);
+  const [edges, setEdges] = useState(simpleEdges);
+  return <div>
+      <div style={{
+      zIndex: 9,
+      position: 'absolute',
+      top: 15,
+      right: 15,
+      background: 'rgba(0, 0, 0, .5)',
+      padding: 1,
+      color: 'white'
+    }}>
+        <button style={{
+        display: 'block',
+        width: '100%'
+      }} onClick={() => {
+        const num = random(0, 1000);
+        setNodes([...nodes, {
+          id: \`n-\${num}\`,
+          label: \`Node \${num}\`
+        }]);
+        if (random(0, 2) !== 2) {
+          setEdges([...edges, {
+            id: \`e-\${num}\`,
+            source: nodes[nodes.length - 1].id,
+            target: \`n-\${num}\`
+          }]);
+        }
+      }}>
+          Add Node
+        </button>
+        <button style={{
+        display: 'block',
+        width: '100%'
+      }} onClick={() => {
+        setNodes(nodes.filter(n => n.id !== nodes[0]?.id));
+      }}>
+          Remove Node {nodes[0]?.id}
+        </button>
+      </div>
+      <GraphCanvas nodes={nodes} edges={edges} />
+    </div>;
+}`,...(M=(F=g.parameters)==null?void 0:F.docs)==null?void 0:M.source}}};var q,H,J;b.parameters={...b.parameters,docs:{...(q=b.parameters)==null?void 0:q.docs,source:{originalSource:`() => {
+  const ref = useRef<GraphCanvasRef | null>(null);
+  return <div>
+      <div style={{
+      zIndex: 9,
+      position: 'absolute',
+      top: 15,
+      right: 15,
+      background: 'rgba(0, 0, 0, .5)',
+      padding: 1,
+      color: 'white'
+    }}>
+        <button style={{
+        display: 'block',
+        width: '100%'
+      }} onClick={() => {
+        const data = ref.current.exportCanvas();
+        const link = document.createElement('a');
+        link.setAttribute('href', data);
+        link.setAttribute('target', '_blank');
+        link.setAttribute('download', 'graph.png');
+        link.click();
+      }}>
+          Export Graph
+        </button>
+      </div>
+      <GraphCanvas ref={ref} nodes={simpleNodes} edges={simpleEdges} />
+    </div>;
+}`,...(J=(H=b.parameters)==null?void 0:H.docs)==null?void 0:J.source}}};var K,P,Q;h.parameters={...h.parameters,docs:{...(K=h.parameters)==null?void 0:K.docs,source:{originalSource:"() => <GraphCanvas animated={false} nodes={simpleNodes} edges={simpleEdges} />",...(Q=(P=h.parameters)==null?void 0:P.docs)==null?void 0:Q.source}}};var V,X,Y;v.parameters={...v.parameters,docs:{...(V=v.parameters)==null?void 0:V.docs,source:{originalSource:`() => <GraphCanvas animated={false} nodes={simpleNodes} edges={simpleEdges} glOptions={{
+  preserveDrawingBuffer: true
+}} />`,...(Y=(X=v.parameters)==null?void 0:X.docs)==null?void 0:Y.source}}};var Z,ee,se;y.parameters={...y.parameters,docs:{...(Z=y.parameters)==null?void 0:Z.docs,source:{originalSource:`() => <GraphCanvas nodes={[{
+  id: '1',
+  label: 'Node 1'
+}, {
+  id: '2',
+  label: 'Node 2'
+}]} edges={[{
+  source: '1',
+  target: '2',
+  id: '1-2',
+  label: '1-2'
+}, {
+  source: '2',
+  target: '1',
+  id: '2-1',
+  label: '2-1'
+}]} onNodeDoubleClick={node => alert(node.label)} />`,...(se=(ee=y.parameters)==null?void 0:ee.docs)==null?void 0:se.source}}};export{u as CustomLighting,p as Disabled,v as ExtraGlOptions,g as LiveUpdates,m as Many,h as NoAnimation,y as NodeDoubleClick,b as SaveAsImage,d as Simple,c as SpecialCharacters,l as TwoWayLink,ge as default};

assets/Basics-b92fd308.js

@@ -0,0 +1,48 @@
+import{j as e}from"./jsx-runtime-9c4ae004.js";import{M as o,b as i}from"./index-f547934c.js";import{u as t}from"./index-2ef8b458.js";import"./index-1b03fe98.js";import"./iframe-eecfb42e.js";import"../sb-preview/runtime.js";import"./chunk-EIRT5I3Z-f0a10e90.js";import"./index-6fd5a17b.js";import"./extends-98964cd2.js";import"./index-2749be16.js";import"./index-356e4a49.js";function r(s){const n=Object.assign({h1:"h1",h2:"h2",p:"p",code:"code",pre:"pre"},t(),s.components);return e.jsxs(e.Fragment,{children:[e.jsx(o,{title:"Docs/Getting Started/Basics"}),`
+`,e.jsx(n.h1,{id:"basics",children:"Basics"}),`
+`,e.jsx(n.h2,{id:"graph",children:"Graph"}),`
+`,e.jsxs(n.p,{children:["Let's build our first graph by defining some ",e.jsx(n.code,{children:"nodes"})," and ",e.jsx(n.code,{children:"edges"}),`.
+Nodes are the blocks and edges are the relationships between the blocks.`]}),`
+`,e.jsxs(n.p,{children:["The data shapes require one property of ",e.jsx(n.code,{children:"id"})," but you can pass ",e.jsx(n.code,{children:"label"}),`
+or `,e.jsx(n.code,{children:"icon"})," to them to show some sort of indication what it represents."]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-js",children:`const nodes = [
+{
+    id: '1',
+    label: '1'
+  },
+  {
+    id: '2',
+    label: '2'
+  }
+];
+
+const edges = [
+  {
+    source: '1',
+    target: '2',
+    id: '1-2',
+    label: '1-2'
+  },
+  {
+    source: '2',
+    target: '1',
+    id: '2-1',
+    label: '2-1'
+  }
+];
+`})}),`
+`,e.jsxs(n.p,{children:["These shapes above will create two elements ",e.jsx(n.code,{children:"1"})," and ",e.jsx(n.code,{children:"2"}),` and create
+a relationship between them. Once we have this defined, we can simply
+pass these properties to the `,e.jsx(n.code,{children:"Canvas"})," and it will do the rest!"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-jsx",children:`import React from 'react';
+import { GraphCanvas } from 'reagraph';
+
+export const MyDiagram = () => (
+  <GraphCanvas
+    nodes={nodes}
+    edges={edges}
+  />
+);
+`})}),`
+`,e.jsx(n.p,{children:"This will render a graph like this:"}),`
+`,e.jsx("div",{style:{height:500,width:"100%",position:"relative",margin:"0 auto",background:"white",borderRadius:4,border:"1px solid rgba(0,0,0,.1)",boxShadow:"rgb(0 0 0 / 10%) 0 1px 3px 0",overflow:"hidden"},children:e.jsx(i,{id:"demos-basic--simple"})})]})}function u(s={}){const{wrapper:n}=Object.assign({},t(),s.components);return n?e.jsx(n,Object.assign({},s,{children:e.jsx(r,s)})):r(s)}export{u as default};

assets/ClickHighlightTypes.story-fbd68f88.js

@@ -0,0 +1,68 @@
+import{j as t}from"./jsx-runtime-9c4ae004.js";import{r as i}from"./index-1b03fe98.js";import{G as r}from"./RadialMenu-25eddc55.js";import{u as d}from"./useSelection-104cba16.js";import{c as s,d as n}from"./demo-9c61d665.js";import"./index-27578f8f.esm-71b00cea.js";import"./extends-98964cd2.js";import"./client-449ccf6c.js";import"./index-6fd5a17b.js";const B={title:"Demos/Highlight/Click",component:r},p=()=>{const e=i.useRef(null),{selections:o,onNodeClick:c,onCanvasClick:a}=d({ref:e,nodes:s,edges:n});return t.jsx(r,{ref:e,nodes:s,edges:n,selections:o,onNodeClick:c,onCanvasClick:a})},C=()=>{const e=i.useRef(null),{selections:o,onNodeClick:c,onCanvasClick:a}=d({ref:e,nodes:s,edges:n,focusOnSelect:!1});return t.jsx(r,{ref:e,nodes:s,edges:n,selections:o,onCanvasClick:a,onNodeClick:c})},f=()=>{const e=i.useRef(null),{selections:o,actives:c,onNodeClick:a,onCanvasClick:l}=d({ref:e,nodes:s,edges:n,pathSelectionType:"in"});return t.jsx(r,{ref:e,nodes:s,edges:n,selections:o,actives:c,onCanvasClick:l,onNodeClick:a})},u=()=>{const e=i.useRef(null),{selections:o,actives:c,onNodeClick:a,onCanvasClick:l}=d({ref:e,nodes:s,edges:n,pathSelectionType:"out"});return t.jsx(r,{ref:e,nodes:s,edges:n,selections:o,actives:c,onCanvasClick:l,onNodeClick:a})},g=()=>{const e=i.useRef(null),{selections:o,actives:c,onNodeClick:a,onCanvasClick:l}=d({ref:e,nodes:s,edges:n,pathSelectionType:"all"});return t.jsx(r,{ref:e,nodes:s,edges:n,selections:o,actives:c,onCanvasClick:l,onNodeClick:a})};var m,v,k;p.parameters={...p.parameters,docs:{...(m=p.parameters)==null?void 0:m.docs,source:{originalSource:`() => {
+  const graphRef = useRef<GraphCanvasRef | null>(null);
+  const {
+    selections,
+    onNodeClick,
+    onCanvasClick
+  } = useSelection({
+    ref: graphRef,
+    nodes: complexNodes,
+    edges: complexEdges
+  });
+  return <GraphCanvas ref={graphRef} nodes={complexNodes} edges={complexEdges} selections={selections} onNodeClick={onNodeClick} onCanvasClick={onCanvasClick} />;
+}`,...(k=(v=p.parameters)==null?void 0:v.docs)==null?void 0:k.source}}};var h,R,N;C.parameters={...C.parameters,docs:{...(h=C.parameters)==null?void 0:h.docs,source:{originalSource:`() => {
+  const graphRef = useRef<GraphCanvasRef | null>(null);
+  const {
+    selections,
+    onNodeClick,
+    onCanvasClick
+  } = useSelection({
+    ref: graphRef,
+    nodes: complexNodes,
+    edges: complexEdges,
+    focusOnSelect: false
+  });
+  return <GraphCanvas ref={graphRef} nodes={complexNodes} edges={complexEdges} selections={selections} onCanvasClick={onCanvasClick} onNodeClick={onNodeClick} />;
+}`,...(N=(R=C.parameters)==null?void 0:R.docs)==null?void 0:N.source}}};var x,S,E;f.parameters={...f.parameters,docs:{...(x=f.parameters)==null?void 0:x.docs,source:{originalSource:`() => {
+  const graphRef = useRef<GraphCanvasRef | null>(null);
+  const {
+    selections,
+    actives,
+    onNodeClick,
+    onCanvasClick
+  } = useSelection({
+    ref: graphRef,
+    nodes: complexNodes,
+    edges: complexEdges,
+    pathSelectionType: 'in'
+  });
+  return <GraphCanvas ref={graphRef} nodes={complexNodes} edges={complexEdges} selections={selections} actives={actives} onCanvasClick={onCanvasClick} onNodeClick={onNodeClick} />;
+}`,...(E=(S=f.parameters)==null?void 0:S.docs)==null?void 0:E.source}}};var G,y,j;u.parameters={...u.parameters,docs:{...(G=u.parameters)==null?void 0:G.docs,source:{originalSource:`() => {
+  const graphRef = useRef<GraphCanvasRef | null>(null);
+  const {
+    selections,
+    actives,
+    onNodeClick,
+    onCanvasClick
+  } = useSelection({
+    ref: graphRef,
+    nodes: complexNodes,
+    edges: complexEdges,
+    pathSelectionType: 'out'
+  });
+  return <GraphCanvas ref={graphRef} nodes={complexNodes} edges={complexEdges} selections={selections} actives={actives} onCanvasClick={onCanvasClick} onNodeClick={onNodeClick} />;
+}`,...(j=(y=u.parameters)==null?void 0:y.docs)==null?void 0:j.source}}};var T,O,w;g.parameters={...g.parameters,docs:{...(T=g.parameters)==null?void 0:T.docs,source:{originalSource:`() => {
+  const graphRef = useRef<GraphCanvasRef | null>(null);
+  const {
+    selections,
+    actives,
+    onNodeClick,
+    onCanvasClick
+  } = useSelection({
+    ref: graphRef,
+    nodes: complexNodes,
+    edges: complexEdges,
+    pathSelectionType: 'all'
+  });
+  return <GraphCanvas ref={graphRef} nodes={complexNodes} edges={complexEdges} selections={selections} actives={actives} onCanvasClick={onCanvasClick} onNodeClick={onNodeClick} />;
+}`,...(w=(O=g.parameters)==null?void 0:O.docs)==null?void 0:w.source}}};export{g as All,p as Direct,f as Inwards,C as NoFocus,u as Outwards,B as default};