From fb543d290efb593ee87dbf82fd92eb5a8e091818 Mon Sep 17 00:00:00 2001 From: moklick Date: Sat, 16 May 2020 01:10:20 +0200 Subject: [PATCH 1/5] refactor(plugins): create MiniMapNode file for component, cleanup --- src/plugins/Controls/index.tsx | 9 ++++--- src/plugins/MiniMap/MiniMapNode.tsx | 35 ++++++++++++++++++++++++ src/plugins/MiniMap/index.tsx | 42 +++++++---------------------- 3 files changed, 51 insertions(+), 35 deletions(-) create mode 100644 src/plugins/MiniMap/MiniMapNode.tsx diff --git a/src/plugins/Controls/index.tsx b/src/plugins/Controls/index.tsx index 12e81c38..a26da2c0 100644 --- a/src/plugins/Controls/index.tsx +++ b/src/plugins/Controls/index.tsx @@ -23,11 +23,10 @@ interface ControlProps extends React.HTMLAttributes { showInteractive?: boolean; } -export default ({ style, showZoom = true, showFitView = true, showInteractive = true, className }: ControlProps) => { - const mapClasses: string = classnames('react-flow__controls', className); - +const Controls = ({ style, showZoom = true, showFitView = true, showInteractive = true, className }: ControlProps) => { const setInteractive = useStoreActions((actions) => actions.setInteractive); const { isInteractive } = useStoreState(({ isInteractive }) => ({ isInteractive })); + const mapClasses: string = classnames('react-flow__controls', className); return (
); }; + +Controls.displayName = 'Controls'; + +export default Controls; diff --git a/src/plugins/MiniMap/MiniMapNode.tsx b/src/plugins/MiniMap/MiniMapNode.tsx new file mode 100644 index 00000000..02ff5e2f --- /dev/null +++ b/src/plugins/MiniMap/MiniMapNode.tsx @@ -0,0 +1,35 @@ +import React from 'react'; + +import { Node } from '../../types'; + +interface MiniMapNodeProps { + node: Node; + color: string; + borderRadius: number; +} + +const MiniMapNode = ({ node, color, borderRadius }: MiniMapNodeProps) => { + const { + position: { x, y }, + width, + height, + } = node.__rg; + const { background, backgroundColor } = node.style || {}; + const fill = (background || backgroundColor || color) as string; + return ( + + ); +}; + +MiniMapNode.displayName = 'MiniMapNode'; + +export default MiniMapNode; diff --git a/src/plugins/MiniMap/index.tsx b/src/plugins/MiniMap/index.tsx index e91205c8..45b1486f 100644 --- a/src/plugins/MiniMap/index.tsx +++ b/src/plugins/MiniMap/index.tsx @@ -4,18 +4,14 @@ import classnames from 'classnames'; import { useStoreState } from '../../store/hooks'; import { getRectOfNodes, getBoundsofRects } from '../../utils/graph'; import { Node, Rect } from '../../types'; +import MiniMapNode from './MiniMapNode'; type StringFunc = (node: Node) => string; interface MiniMapProps extends React.HTMLAttributes { - nodeColor: string | StringFunc; - nodeBorderRadius: number; - maskColor: string; -} -interface MiniMapNodeProps { - node: Node; - color: string; - borderRadius: number; + nodeColor?: string | StringFunc; + nodeBorderRadius?: number; + maskColor?: string; } const baseStyle: CSSProperties = { @@ -27,29 +23,7 @@ const baseStyle: CSSProperties = { height: 150, }; -const MiniMapNode = ({ node, color, borderRadius }: MiniMapNodeProps) => { - const { - position: { x, y }, - width, - height, - } = node.__rg; - const { background, backgroundColor } = node.style || {}; - const fill = (background || backgroundColor || color) as string; - return ( - - ); -}; - -export default ({ +const MiniMap = ({ style = { backgroundColor: '#f8f8f8' }, className, nodeColor = '#ddd', @@ -105,7 +79,7 @@ export default ({ }} className={mapClasses} > - {state.nodes.map(node => ( + {state.nodes.map((node) => ( ))} ); }; + +MiniMap.displayName = 'MiniMap'; + +export default MiniMap; From 34188549f3a245a50372d6ae3be13e0263fb1fba Mon Sep 17 00:00:00 2001 From: moklick Date: Sat, 16 May 2020 01:11:56 +0200 Subject: [PATCH 2/5] refactor(ts): export types --- src/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/index.ts b/src/index.ts index c76d01a6..782d7a8e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -7,3 +7,5 @@ export { default as EdgeText } from './components/Edges/EdgeText'; export { MiniMap, Controls } from './plugins'; export { isNode, isEdge, removeElements, addEdge, getOutgoers } from './utils/graph'; + +export * from './types'; From 71b7ae02c04e9ac6b66c81f57aa7656b605866ca Mon Sep 17 00:00:00 2001 From: moklick Date: Sat, 16 May 2020 01:12:13 +0200 Subject: [PATCH 3/5] refactor(npm): dont push src --- .npmignore | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.npmignore b/.npmignore index 63bd69c5..6195d70e 100644 --- a/.npmignore +++ b/.npmignore @@ -5,4 +5,6 @@ node_modules examples cypress -.env \ No newline at end of file +.env +tsconfig.json +src \ No newline at end of file From a20483452565b0e50af5c22c94836984d34e2e20 Mon Sep 17 00:00:00 2001 From: moklick Date: Sat, 16 May 2020 01:12:46 +0200 Subject: [PATCH 4/5] refactor(types): use interfaces --- src/types/index.ts | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/src/types/index.ts b/src/types/index.ts index 96184f60..bdfb71a4 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -13,22 +13,11 @@ export enum Position { Bottom = 'bottom', } -export type XYPosition = { +export interface XYPosition { x: number; y: number; -}; - -export enum GridType { - Lines = 'lines', - Dots = 'dots', } -export type HandleType = 'source' | 'target'; - -export type NodeTypesType = { [key: string]: React.ReactNode }; - -export type EdgeTypesType = NodeTypesType; - export interface Dimensions { width: number; height: number; @@ -41,12 +30,6 @@ export interface Box extends XYPosition { y2: number; } -export interface SelectionRect extends Rect { - startX: number; - startY: number; - draw: boolean; -} - export interface Node { id: ElementId; position: XYPosition; @@ -71,6 +54,23 @@ export interface Edge { animated?: boolean; } +export enum GridType { + Lines = 'lines', + Dots = 'dots', +} + +export type HandleType = 'source' | 'target'; + +export type NodeTypesType = { [key: string]: React.ReactNode }; + +export type EdgeTypesType = NodeTypesType; + +export interface SelectionRect extends Rect { + startX: number; + startY: number; + draw: boolean; +} + export interface EdgeProps { sourceX: number; sourceY: number; @@ -142,10 +142,10 @@ type OnLoadParams = { export type OnLoadFunc = (params: OnLoadParams) => void; -export type Connection = { +export interface Connection { source: ElementId | null; target: ElementId | null; -}; +} export type OnConnectFunc = (connection: Connection) => void; From fcb0a3e9f164b92f72904127c3dd1094cdbbf68f Mon Sep 17 00:00:00 2001 From: moklick Date: Sat, 16 May 2020 01:13:28 +0200 Subject: [PATCH 5/5] refactor(onConnect): param can be edge or connection --- src/container/GraphView/index.tsx | 2 +- src/container/ReactFlow/index.tsx | 2 +- src/utils/graph.ts | 19 +++++++++++++------ 3 files changed, 15 insertions(+), 8 deletions(-) diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx index baa1a170..44df5852 100644 --- a/src/container/GraphView/index.tsx +++ b/src/container/GraphView/index.tsx @@ -20,7 +20,7 @@ export interface GraphViewProps { onElementClick: (element: Node | Edge) => void; onElementsRemove: (elements: Elements) => void; onNodeDragStop: (node: Node) => void; - onConnect: (conneciton: Connection) => void; + onConnect: (connection: Connection | Edge) => void; onLoad: OnLoadFunc; onMove: () => void; selectionKeyCode: number; diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx index b967ddb8..1285cb58 100644 --- a/src/container/ReactFlow/index.tsx +++ b/src/container/ReactFlow/index.tsx @@ -27,7 +27,7 @@ export interface ReactFlowProps extends Omit, 'on onElementClick: (element: Node | Edge) => void; onElementsRemove: (elements: Elements) => void; onNodeDragStop: (node: Node) => void; - onConnect: (connection: Connection) => void; + onConnect: (connection: Edge | Connection) => void; onLoad: OnLoadFunc; onMove: () => void; nodeTypes: NodeTypesType; diff --git a/src/utils/graph.ts b/src/utils/graph.ts index 519a3235..838c4c58 100644 --- a/src/utils/graph.ts +++ b/src/utils/graph.ts @@ -1,7 +1,7 @@ import { zoomIdentity } from 'd3-zoom'; import store from '../store'; -import { ElementId, Node, Edge, Elements, Transform, XYPosition, Rect, FitViewParams, Box } from '../types'; +import { ElementId, Node, Edge, Elements, Transform, XYPosition, Rect, FitViewParams, Box, Connection } from '../types'; export const isEdge = (element: Node | Edge): boolean => element.hasOwnProperty('source') && element.hasOwnProperty('target'); @@ -31,17 +31,24 @@ export const removeElements = (elementsToRemove: Elements, elements: Elements): }); }; -const getEdgeId = ({ source, target }: Edge): ElementId => `reactflow__edge-${source}-${target}`; +const getEdgeId = ({ source, target }: Connection): ElementId => `reactflow__edge-${source}-${target}`; -export const addEdge = (edgeParams: Edge, elements: Elements): Elements => { +export const addEdge = (edgeParams: Edge | Connection, elements: Elements): Elements => { if (!edgeParams.source || !edgeParams.target) { throw new Error('Can not create edge. An edge needs a source and a target'); } - return elements.concat({ + if (edgeParams.hasOwnProperty('id')) { + const edge = { ...edgeParams } as Edge; + return elements.concat(edge); + } + + const edge = { ...edgeParams, - id: typeof edgeParams.id !== 'undefined' ? edgeParams.id : getEdgeId(edgeParams), - }); + id: getEdgeId(edgeParams), + } as Edge; + + return elements.concat(edge); }; export const pointToRendererPoint = (