alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(examples): only use bundle

Browse Source
This commit is contained in:
moklick
2022-08-09 18:55:32 +02:00
parent affae72f7e
commit 0f835a2961
48 changed files with 194 additions and 513 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/nextjs/pages/Edges/CustomEdge.tsx
+3 -8
View File
@@ -1,5 +1,5 @@
import React, { FC } from 'react';
import { EdgeProps, getBezierPath } from '@react-flow/core';
import { EdgeProps, getBezierPath } from '@react-flow/bundle';
const CustomEdge: FC<EdgeProps> = ({
id,
@@ -22,14 +22,9 @@ const CustomEdge: FC<EdgeProps> = ({
return (
<>
<path id={id} className='react-flow__edge-path' d={edgePath} />
<path id={id} className="react-flow__edge-path" d={edgePath} />
<text>
<textPath
href={`#${id}`}
style={{ fontSize: '12px' }}
startOffset='50%'
textAnchor='middle'
>
<textPath href={`#${id}`} style={{ fontSize: '12px' }} startOffset="50%" textAnchor="middle">
{data.text}
</textPath>
</text>
examples/nextjs/pages/Edges/CustomEdge2.tsx
+2 -7
View File
@@ -1,10 +1,5 @@
import React, { FC } from 'react';
import {
EdgeProps,
getBezierPath,
EdgeText,
getBezierEdgeCenter,
} from '@react-flow/core';
import { EdgeProps, getBezierPath, EdgeText, getBezierEdgeCenter } from '@react-flow/bundle';
const CustomEdge: FC<EdgeProps> = ({
id,
@@ -33,7 +28,7 @@ const CustomEdge: FC<EdgeProps> = ({
return (
<>
<path id={id} className='react-flow__edge-path' d={edgePath} />
<path id={id} className="react-flow__edge-path" d={edgePath} />
<EdgeText
x={centerX}
y={centerY}
examples/nextjs/pages/Edges/index.tsx
+7 -15
View File
@@ -12,23 +12,18 @@ import {
Node,
useEdgesState,
useNodesState,
} from '@react-flow/renderer';
} from '@react-flow/bundle';
import CustomEdge from './CustomEdge';
import CustomEdge2 from './CustomEdge2';
const onNodeDragStop = (_: MouseEvent, node: Node) =>
console.log('drag stop', node);
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
const onEdgeDoubleClick = (_: MouseEvent, edge: Edge) =>
console.log('dblclick', edge);
const onEdgeMouseEnter = (_: MouseEvent, edge: Edge) =>
console.log('enter', edge);
const onEdgeMouseMove = (_: MouseEvent, edge: Edge) =>
console.log('move', edge);
const onEdgeMouseLeave = (_: MouseEvent, edge: Edge) =>
console.log('leave', edge);
const onEdgeDoubleClick = (_: MouseEvent, edge: Edge) => console.log('dblclick', edge);
const onEdgeMouseEnter = (_: MouseEvent, edge: Edge) => console.log('enter', edge);
const onEdgeMouseMove = (_: MouseEvent, edge: Edge) => console.log('move', edge);
const onEdgeMouseLeave = (_: MouseEvent, edge: Edge) => console.log('leave', edge);
const initialNodes: Node[] = [
{
@@ -189,10 +184,7 @@ const defaultViewport = {
const EdgesFlow = () => {
const [nodes, , onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = useCallback(
(params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),
[setEdges]
);
const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
return (
<ReactFlow