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

refactor(minimap): use minimap package in examples

Browse Source
This commit is contained in:
Christopher Möller
2022-07-21 12:02:43 +02:00
parent be4dd6f1fa
commit 229c156d79
17 changed files with 37 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/nextjs/package.json
+1
View File
@@ -11,6 +11,7 @@
"dependencies": {
"@preconstruct/next": "^4.0.0",
"@react-flow/core": "11.0.0",
"@react-flow/minimap": "11.0.0",
"dagre": "^0.8.5",
"next": "12.2.2",
"react": "18.2.0",
examples/nextjs/pages/CustomNode/index.tsx
+2 -1
View File
@@ -3,7 +3,6 @@ import { ChangeEvent } from 'react';
import ReactFlow, {
addEdge,
MiniMap,
Controls,
Node,
ReactFlowInstance,
@@ -14,6 +13,8 @@ import ReactFlow, {
useEdgesState,
} from '@react-flow/core';
import MiniMap from '@react-flow/minimap';
import ColorSelectorNode from './ColorSelectorNode';
const onInit = (reactFlowInstance: ReactFlowInstance) => {
examples/nextjs/pages/EdgeTypes/index.tsx
+3 -1
View File
@@ -5,7 +5,6 @@ import React from 'react';
import ReactFlow, {
addEdge,
MiniMap,
Controls,
Background,
ReactFlowInstance,
@@ -14,6 +13,9 @@ import ReactFlow, {
useNodesState,
useEdgesState,
} from '@react-flow/core';
import MiniMap from '@react-flow/minimap';
import { getElements } from './utils';
const onInit = (reactFlowInstance: ReactFlowInstance) => {
examples/nextjs/pages/Edges/index.tsx
+3 -1
View File
@@ -7,12 +7,14 @@ import ReactFlow, {
Edge,
EdgeTypes,
MarkerType,
MiniMap,
Node,
ReactFlowInstance,
useEdgesState,
useNodesState,
} from '@react-flow/core';
import MiniMap from '@react-flow/minimap';
import CustomEdge from './CustomEdge';
import CustomEdge2 from './CustomEdge2';
examples/nextjs/pages/Hidden/index.tsx
+2 -1
View File
@@ -2,7 +2,6 @@ import React, { useState, useEffect, useCallback } from 'react';
import ReactFlow, {
addEdge,
MiniMap,
Controls,
Connection,
Edge,
@@ -11,6 +10,8 @@ import ReactFlow, {
useEdgesState,
} from '@react-flow/core';
import MiniMap from '@react-flow/minimap';
const initialNodes: Node[] = [
{
id: '1',
examples/nextjs/pages/Interaction/index.tsx
+2 -1
View File
@@ -5,7 +5,6 @@ import React, {
} from 'react';
import ReactFlow, {
addEdge,
MiniMap,
Controls,
Node,
Connection,
@@ -16,6 +15,8 @@ import ReactFlow, {
useEdgesState,
} from '@react-flow/core';
import MiniMap from '@react-flow/minimap';
const initialNodes: Node[] = [
{
id: '1',
examples/nextjs/pages/NestedNodes/index.tsx
+2 -1
View File
@@ -5,7 +5,6 @@ import ReactFlow, {
Background,
useNodesState,
useEdgesState,
MiniMap,
Controls,
Node,
Edge,
@@ -13,6 +12,8 @@ import ReactFlow, {
Connection,
} from '@react-flow/core';
import MiniMap from '@react-flow/minimap';
const onNodeDragStop = (_: MouseEvent, node: Node) =>
console.log('drag stop', node);
const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
examples/nextjs/pages/Overview/index.tsx
+2 -1
View File
@@ -6,7 +6,6 @@ import React, {
import ReactFlow, {
addEdge,
MiniMap,
Controls,
Background,
Node,
@@ -20,6 +19,8 @@ import ReactFlow, {
OnSelectionChangeParams,
} from '@react-flow/core';
import MiniMap from '@react-flow/minimap';
const onNodeDragStart = (_: ReactMouseEvent, node: Node, nodes: Node[]) =>
console.log('drag start', node, nodes);
const onNodeDrag = (_: ReactMouseEvent, node: Node, nodes: Node[]) =>
examples/nextjs/pages/Stress/index.tsx
+2 -1
View File
@@ -1,6 +1,5 @@
import React, { useState, CSSProperties, useCallback } from 'react';
import ReactFlow, {
MiniMap,
Controls,
Background,
ReactFlowInstance,
@@ -14,6 +13,8 @@ import ReactFlow, {
EdgeChange,
} from '@react-flow/core';
import MiniMap from '@react-flow/minimap';
import { getNodesAndEdges } from './utils';
const buttonWrapperStyles: CSSProperties = {
examples/nextjs/pages/Subflow/index.tsx
+3 -1
View File
@@ -3,7 +3,6 @@ import React, { useState, MouseEvent, useCallback } from 'react';
import ReactFlow, {
addEdge,
Background,
MiniMap,
Controls,
Node,
Edge,
@@ -13,6 +12,9 @@ import ReactFlow, {
useNodesState,
useEdgesState,
} from '@react-flow/core';
import MiniMap from '@react-flow/minimap';
import DebugNode from './DebugNode';
const onNodeDrag = (_: MouseEvent, node: Node, nodes: Node[]) =>
examples/nextjs/pages/UseReactFlow/index.tsx
+2 -1
View File
@@ -4,7 +4,6 @@ import ReactFlow, {
Node,
addEdge,
Background,
MiniMap,
useReactFlow,
ReactFlowProvider,
Connection,
@@ -13,6 +12,8 @@ import ReactFlow, {
useEdgesState,
} from '@react-flow/core';
import MiniMap from '@react-flow/minimap';
const initialNodes: Node[] = [
{
id: '1',
examples/nextjs/pages/index.tsx
+3
View File
@@ -9,6 +9,8 @@ import ReactFlow, {
useReactFlow,
} from '@react-flow/core';
import Minimap from '@react-flow/minimap';
const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node);
const onNodeDragStop = (_: MouseEvent, node: Node) =>
console.log('drag stop', node);
@@ -93,6 +95,7 @@ const BasicFlow = () => {
selectNodesOnDrag={false}
>
<Background variant={BackgroundVariant.Lines} />
<Minimap />
<div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
<button onClick={resetTransform} style={{ marginRight: 5 }}>
examples/nextjs/tsconfig.json
+4 -13
View File
@@ -1,11 +1,7 @@
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
@@ -15,15 +11,10 @@
"esModuleInterop": true,
"module": "esnext",
"resolveJsonModule": true,
"moduleResolution": "node",
"isolatedModules": true,
"jsx": "preserve"
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules"
]
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
packages/minimap/package.json
+4 -4
View File
@@ -6,14 +6,14 @@
"module": "dist/react-flow-minimap.esm.js",
"license": "MIT",
"dependencies": {
"@react-flow/core": "11.0.0"
},
"peerDependencies": {
"classcat": "^5.0.3",
"d3-drag": "^3.0.0",
"d3-selection": "^3.0.0",
"zustand": "^4.0.0-rc.1"
},
"peerDependencies": {
"react": "^18.1.0",
"react-flow-renderer": "^10.3.5"
"zustand": "^3.7.2"
},
"devDependencies": {
"@types/d3-drag": "^3.0.1",
packages/minimap/src/MiniMapDrag.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import React, { useEffect, useRef } from 'react';
import { drag, D3DragEvent, SubjectPosition } from 'd3-drag';
import { select } from 'd3-selection';
import { useReactFlow } from 'react-flow-renderer';
import { useReactFlow } from '@react-flow/core';
function MiniMapDrag({ x = 0, y = 0, width = 0, height = 0 }) {
const dragRef = useRef<SVGRectElement>(null);
packages/minimap/src/index.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ import {
GetMiniMapNodeAttribute,
ReactFlowState,
Rect,
} from 'react-flow-renderer';
} from '@react-flow/core';
import MiniMapNode from './MiniMapNode';
import MiniMapDrag from './MiniMapDrag';
yarn.lock
-12
View File
@@ -3783,11 +3783,6 @@ use-sync-external-store@1.1.0:
resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.1.0.tgz#3343c3fe7f7e404db70f8c687adf5c1652d34e82"
integrity sha512-SEnieB2FPKEVne66NpXPd1Np4R1lTNKfjuy3XdIoPQKYBAFdzbzSZlSn1KJZUiihQLQC5Znot4SBz1EOTBwQAQ==
use-sync-external-store@1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
util-deprecate@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
@@ -3856,10 +3851,3 @@ zustand@^3.7.2:
version "3.7.2"
resolved "https://registry.yarnpkg.com/zustand/-/zustand-3.7.2.tgz#7b44c4f4a5bfd7a8296a3957b13e1c346f42514d"
integrity sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==
zustand@^4.0.0-rc.1:
version "4.0.0-rc.2"
resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.0.0-rc.2.tgz#6b23131d3b5486d5afde7c04946b81674c722abf"
integrity sha512-eGDJHNmubDTggkMyZciCfI0H+NptOKQICpliJ4hd/XAjEvYp5h525CVJZ8uDfwd9P5JfSFjpBo14Z0qv04NWJA==
dependencies:
use-sync-external-store "1.2.0"