Deploy to GitHub pages

CNAME

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

assets/Basic.story-cd4a3a15.js

@@ -0,0 +1,109 @@
+import{j as e}from"./jsx-runtime-9c4ae004.js";import{r as f}from"./index-1b03fe98.js";import{G as a,l as Z}from"./RadialMenu-c46df37d.js";import{s as n,a as r,r as ee,b 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 ce={title:"Demos/Basic",component:a},se=s=>e.jsx(a,{...s}),d=se.bind({});d.args={nodes:n,edges:r,cameraMode:"pan",theme:Z,layoutType:"forceDirected2d",sizingType:"none",labelType:"auto"};const t=()=>e.jsx(a,{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"}]}),i=()=>e.jsx(a,{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:"牡 - 牡"}]}),l=()=>e.jsx(a,{nodes:n,edges:r,disabled:!0}),c=()=>e.jsx(a,{nodes:n,edges:r,layoutType:"forceDirected3d",children:e.jsx("directionalLight",{position:[0,5,-4],intensity:1})}),p=()=>e.jsx("div",{style:{display:"flex",flexWrap:"wrap"},children:ee(10).map(s=>e.jsx("div",{style:{border:"solid 1px red",height:350,width:350,margin:15,position:"relative"},children:e.jsx(a,{disabled:!0,nodes:n,edges:r,animated:!1})},s))}),m=()=>{var v;const[s,h]=f.useState(n),[y,Y]=f.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=N(0,1e3);h([...s,{id:`n-${o}`,label:`Node ${o}`}]),N(0,2)!==2&&Y([...y,{id:`e-${o}`,source:s[s.length-1].id,target:`n-${o}`}])},children:"Add Node"}),e.jsxs("button",{style:{display:"block",width:"100%"},onClick:()=>{h(s.filter(o=>{var x;return o.id!==((x=s[0])==null?void 0:x.id)}))},children:["Remove Node ",(v=s[0])==null?void 0:v.id]})]}),e.jsx(a,{nodes:s,edges:y})]})},u=()=>e.jsx(a,{animated:!1,nodes:n,edges:r}),g=()=>e.jsx(a,{animated:!1,nodes:n,edges:r,glOptions:{preserveDrawingBuffer:!0}}),b=()=>e.jsx(a,{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 C,S,j;d.parameters={...d.parameters,docs:{...(C=d.parameters)==null?void 0:C.docs,source:{originalSource:"args => <GraphCanvas {...args} />",...(j=(S=d.parameters)==null?void 0:S.docs)==null?void 0:j.source}}};var k,G,w;t.parameters={...t.parameters,docs:{...(k=t.parameters)==null?void 0:k.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'
+}]} />`,...(w=(G=t.parameters)==null?void 0:G.docs)==null?void 0:w.source}}};var E,D,T;i.parameters={...i.parameters,docs:{...(E=i.parameters)==null?void 0:E.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=i.parameters)==null?void 0:D.docs)==null?void 0:T.source}}};var $,z,L;l.parameters={...l.parameters,docs:{...($=l.parameters)==null?void 0:$.docs,source:{originalSource:"() => <GraphCanvas nodes={simpleNodes} edges={simpleEdges} disabled />",...(L=(z=l.parameters)==null?void 0:z.docs)==null?void 0:L.source}}};var R,B,A;c.parameters={...c.parameters,docs:{...(R=c.parameters)==null?void 0:R.docs,source:{originalSource:`() => <GraphCanvas nodes={simpleNodes} edges={simpleEdges} layoutType="forceDirected3d">
+    <directionalLight position={[0, 5, -4]} intensity={1} />
+  </GraphCanvas>`,...(A=(B=c.parameters)==null?void 0:B.docs)==null?void 0:A.source}}};var O,U,W;p.parameters={...p.parameters,docs:{...(O=p.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=p.parameters)==null?void 0:U.docs)==null?void 0:W.source}}};var F,I,M;m.parameters={...m.parameters,docs:{...(F=m.parameters)==null?void 0:F.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=(I=m.parameters)==null?void 0:I.docs)==null?void 0:M.source}}};var _,q,H;u.parameters={...u.parameters,docs:{...(_=u.parameters)==null?void 0:_.docs,source:{originalSource:"() => <GraphCanvas animated={false} nodes={simpleNodes} edges={simpleEdges} />",...(H=(q=u.parameters)==null?void 0:q.docs)==null?void 0:H.source}}};var J,K,P;g.parameters={...g.parameters,docs:{...(J=g.parameters)==null?void 0:J.docs,source:{originalSource:`() => <GraphCanvas animated={false} nodes={simpleNodes} edges={simpleEdges} glOptions={{
+  preserveDrawingBuffer: true
+}} />`,...(P=(K=g.parameters)==null?void 0:K.docs)==null?void 0:P.source}}};var Q,V,X;b.parameters={...b.parameters,docs:{...(Q=b.parameters)==null?void 0:Q.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)} />`,...(X=(V=b.parameters)==null?void 0:V.docs)==null?void 0:X.source}}};export{c as CustomLighting,l as Disabled,g as ExtraGlOptions,m as LiveUpdates,p as Many,u as NoAnimation,b as NodeDoubleClick,d as Simple,i as SpecialCharacters,t as TwoWayLink,ce as default};

assets/Basics-369b510d.js

@@ -0,0 +1,48 @@
+import{j as e}from"./jsx-runtime-9c4ae004.js";import{M as o,b as i}from"./index-a5f4ac12.js";import{u as t}from"./index-2ef8b458.js";import"./index-1b03fe98.js";import"./iframe-a0504368.js";import"../sb-preview/runtime.js";import"./chunk-ZGA76URP-2bd2442b.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-ecdf7846.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-c46df37d.js";import{u as d}from"./useSelection-45508495.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};