From 48053133e5c010b543a25a6559ea229ff31483bf Mon Sep 17 00:00:00 2001 From: moklick Date: Fri, 2 Oct 2020 14:34:51 +0200 Subject: [PATCH] refactor(defaultProps): dont set defaults in main entry point --- src/container/GraphView/index.tsx | 112 ++++++++++++++++++------------ src/container/ReactFlow/index.tsx | 109 ++++++++++++----------------- src/hooks/useD3Zoom.ts | 20 +++--- src/store/index.ts | 39 ++++++----- src/types/index.ts | 4 +- 5 files changed, 147 insertions(+), 137 deletions(-) diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx index 88272045..ad5ecdc1 100644 --- a/src/container/GraphView/index.tsx +++ b/src/container/GraphView/index.tsx @@ -60,23 +60,23 @@ export interface GraphViewProps { connectionLineStyle?: CSSProperties; connectionLineComponent?: ConnectionLineComponent; deleteKeyCode: number; - snapToGrid: boolean; - snapGrid: [number, number]; + snapToGrid?: boolean; + snapGrid?: [number, number]; onlyRenderVisibleNodes: boolean; - nodesDraggable: boolean; - nodesConnectable: boolean; - elementsSelectable: boolean; - selectNodesOnDrag: boolean; - minZoom: number; - maxZoom: number; - defaultZoom: number; - defaultPosition: [number, number]; + nodesDraggable?: boolean; + nodesConnectable?: boolean; + elementsSelectable?: boolean; + selectNodesOnDrag?: boolean; + minZoom?: number; + maxZoom?: number; + defaultZoom?: number; + defaultPosition?: [number, number]; translateExtent?: TranslateExtent; arrowHeadColor: string; markerEndId?: string; - zoomOnScroll: boolean; - zoomOnDoubleClick: boolean; - paneMoveable: boolean; + zoomOnScroll?: boolean; + zoomOnDoubleClick?: boolean; + paneMoveable?: boolean; } const GraphView = ({ @@ -114,7 +114,7 @@ const GraphView = ({ nodesDraggable, nodesConnectable, elementsSelectable, - selectNodesOnDrag, + selectNodesOnDrag = true, minZoom, maxZoom, defaultZoom, @@ -140,39 +140,19 @@ const GraphView = ({ const setOnConnectStop = useStoreActions((actions) => actions.setOnConnectStop); const setOnConnectEnd = useStoreActions((actions) => actions.setOnConnectEnd); const setSnapGrid = useStoreActions((actions) => actions.setSnapGrid); + const setSnapToGrid = useStoreActions((actions) => actions.setSnapToGrid); const setNodesDraggable = useStoreActions((actions) => actions.setNodesDraggable); const setNodesConnectable = useStoreActions((actions) => actions.setNodesConnectable); const setElementsSelectable = useStoreActions((actions) => actions.setElementsSelectable); const setInitTransform = useStoreActions((actions) => actions.setInitTransform); - const setMinMaxZoom = useStoreActions((actions) => actions.setMinMaxZoom); + const setMinZoom = useStoreActions((actions) => actions.setMinZoom); + const setMaxZoom = useStoreActions((actions) => actions.setMaxZoom); const setTranslateExtent = useStoreActions((actions) => actions.setTranslateExtent); const fitView = useStoreActions((actions) => actions.fitView); const zoom = useStoreActions((actions) => actions.zoom); const zoomTo = useStoreActions((actions) => actions.zoomTo); const currentStore = useStore(); - const onZoomPaneClick = useCallback( - (event: React.MouseEvent) => { - onPaneClick?.(event); - unsetNodesSelection(); - }, - [onPaneClick] - ); - - const onZoomPaneContextMenu = useCallback( - (event: React.MouseEvent) => { - onPaneContextMenu?.(event); - }, - [onPaneContextMenu] - ); - - const onZoomPaneScroll = useCallback( - (event: WheelEvent) => { - onPaneScroll?.(event); - }, - [onPaneScroll] - ); - useResizeHandler(rendererNode); useGlobalKeyHandler({ onElementsRemove, deleteKeyCode }); useElementUpdater(elements); @@ -212,6 +192,28 @@ const GraphView = ({ } }, [d3Initialised, onLoad]); + const onZoomPaneClick = useCallback( + (event: React.MouseEvent) => { + onPaneClick?.(event); + unsetNodesSelection(); + }, + [onPaneClick] + ); + + const onZoomPaneContextMenu = useCallback( + (event: React.MouseEvent) => { + onPaneContextMenu?.(event); + }, + [onPaneContextMenu] + ); + + const onZoomPaneScroll = useCallback( + (event: WheelEvent) => { + onPaneScroll?.(event); + }, + [onPaneScroll] + ); + useEffect(() => { if (onConnect) { setOnConnect(onConnect); @@ -237,24 +239,46 @@ const GraphView = ({ }, [onConnectEnd]); useEffect(() => { - setSnapGrid({ snapToGrid, snapGrid }); - }, [snapToGrid, snapGrid]); + if (typeof snapToGrid !== 'undefined') { + setSnapToGrid(snapToGrid); + } + }, [snapToGrid]); useEffect(() => { - setNodesDraggable(nodesDraggable); + if (typeof snapGrid !== 'undefined') { + setSnapGrid(snapGrid); + } + }, [snapGrid]); + + useEffect(() => { + if (typeof nodesDraggable !== 'undefined') { + setNodesDraggable(nodesDraggable); + } }, [nodesDraggable]); useEffect(() => { - setNodesConnectable(nodesConnectable); + if (typeof nodesConnectable !== 'undefined') { + setNodesConnectable(nodesConnectable); + } }, [nodesConnectable]); useEffect(() => { - setElementsSelectable(elementsSelectable); + if (typeof elementsSelectable !== 'undefined') { + setElementsSelectable(elementsSelectable); + } }, [elementsSelectable]); useEffect(() => { - setMinMaxZoom({ minZoom, maxZoom }); - }, [minZoom, maxZoom]); + if (typeof minZoom !== 'undefined') { + setMinZoom(minZoom); + } + }, [minZoom]); + + useEffect(() => { + if (typeof maxZoom !== 'undefined') { + setMaxZoom(maxZoom); + } + }, [maxZoom]); useEffect(() => { if (typeof translateExtent !== 'undefined') { diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx index e92fa364..c3c9eba6 100644 --- a/src/container/ReactFlow/index.tsx +++ b/src/container/ReactFlow/index.tsx @@ -36,6 +36,19 @@ import { import '../../style.css'; +const defaultNodeTypes = { + input: InputNode, + default: DefaultNode, + output: OutputNode, +}; + +const defaultEdgeTypes = { + default: BezierEdge, + straight: StraightEdge, + step: StepEdge, + smoothstep: SmoothStepEdge, +}; + export interface ReactFlowProps extends Omit, 'onLoad'> { elements: Elements; onElementClick?: (event: MouseEvent, element: Node | Edge) => void; @@ -62,30 +75,30 @@ export interface ReactFlowProps extends Omit, 'on onPaneScroll?: (event?: WheelEvent) => void; onPaneClick?: (event: MouseEvent) => void; onPaneContextMenu?: (event: MouseEvent) => void; - nodeTypes: NodeTypesType; - edgeTypes: EdgeTypesType; - connectionLineType: ConnectionLineType; + nodeTypes?: NodeTypesType; + edgeTypes?: EdgeTypesType; + connectionLineType?: ConnectionLineType; connectionLineStyle?: CSSProperties; connectionLineComponent?: ConnectionLineComponent; - deleteKeyCode: number; - selectionKeyCode: number; - snapToGrid: boolean; - snapGrid: [number, number]; - onlyRenderVisibleNodes: boolean; - nodesDraggable: boolean; - nodesConnectable: boolean; - elementsSelectable: boolean; - selectNodesOnDrag: boolean; - paneMoveable: boolean; - minZoom: number; - maxZoom: number; - defaultZoom: number; - defaultPosition: [number, number]; + deleteKeyCode?: number; + selectionKeyCode?: number; + snapToGrid?: boolean; + snapGrid?: [number, number]; + onlyRenderVisibleNodes?: boolean; + nodesDraggable?: boolean; + nodesConnectable?: boolean; + elementsSelectable?: boolean; + selectNodesOnDrag?: boolean; + paneMoveable?: boolean; + minZoom?: number; + maxZoom?: number; + defaultZoom?: number; + defaultPosition?: [number, number]; translateExtent?: TranslateExtent; - arrowHeadColor: string; + arrowHeadColor?: string; markerEndId?: string; zoomOnScroll: boolean; - zoomOnDoubleClick: boolean; + zoomOnDoubleClick?: boolean; } const ReactFlow = ({ @@ -94,8 +107,8 @@ const ReactFlow = ({ elements = [], className, children, - nodeTypes, - edgeTypes, + nodeTypes = defaultNodeTypes, + edgeTypes = defaultEdgeTypes, onLoad, onMove, onMoveStart, @@ -116,28 +129,28 @@ const ReactFlow = ({ onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, - connectionLineType, + connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, - deleteKeyCode, - selectionKeyCode, + deleteKeyCode = 8, + selectionKeyCode = 16, snapToGrid, snapGrid, - onlyRenderVisibleNodes, + onlyRenderVisibleNodes = true, nodesDraggable, nodesConnectable, elementsSelectable, - selectNodesOnDrag, + selectNodesOnDrag = true, minZoom, maxZoom, - defaultZoom, - defaultPosition, + defaultZoom = 1, + defaultPosition = [0, 0], translateExtent, - arrowHeadColor, + arrowHeadColor = '#b1b1b7', markerEndId, - zoomOnScroll, - zoomOnDoubleClick, - paneMoveable, + zoomOnScroll = true, + zoomOnDoubleClick = true, + paneMoveable = true, onPaneClick, onPaneScroll, onPaneContextMenu, @@ -208,36 +221,4 @@ const ReactFlow = ({ ReactFlow.displayName = 'ReactFlow'; -ReactFlow.defaultProps = { - nodeTypes: { - input: InputNode, - default: DefaultNode, - output: OutputNode, - }, - edgeTypes: { - default: BezierEdge, - straight: StraightEdge, - step: StepEdge, - smoothstep: SmoothStepEdge, - }, - connectionLineType: ConnectionLineType.Bezier, - deleteKeyCode: 8, - selectionKeyCode: 16, - snapToGrid: false, - snapGrid: [15, 15], - onlyRenderVisibleNodes: true, - nodesDraggable: true, - nodesConnectable: true, - elementsSelectable: true, - selectNodesOnDrag: true, - paneMoveable: true, - minZoom: 0.5, - maxZoom: 2, - defaultZoom: 1, - defaultPosition: [0, 0], - arrowHeadColor: '#b1b1b7', - zoomOnScroll: true, - zoomOnDoubleClick: true, -}; - export default ReactFlow; diff --git a/src/hooks/useD3Zoom.ts b/src/hooks/useD3Zoom.ts index 60d430c7..f8dabf8b 100644 --- a/src/hooks/useD3Zoom.ts +++ b/src/hooks/useD3Zoom.ts @@ -6,11 +6,11 @@ import { FlowTransform, TranslateExtent } from '../types'; interface UseD3ZoomParams { zoomPane: MutableRefObject; selectionKeyPressed: boolean; - zoomOnScroll: boolean; - zoomOnDoubleClick: boolean; - paneMoveable: boolean; - defaultPosition: [number, number]; - defaultZoom: number; + zoomOnScroll?: boolean; + zoomOnDoubleClick?: boolean; + paneMoveable?: boolean; + defaultPosition?: [number, number]; + defaultZoom?: number; translateExtent?: TranslateExtent; onMove?: (flowTransform?: FlowTransform) => void; onMoveStart?: (flowTransform?: FlowTransform) => void; @@ -33,12 +33,12 @@ export default ({ onMove, onMoveStart, onMoveEnd, - zoomOnScroll, - zoomOnDoubleClick, + zoomOnScroll = true, + zoomOnDoubleClick = true, selectionKeyPressed, - paneMoveable, - defaultPosition, - defaultZoom, + paneMoveable = true, + defaultPosition = [0, 0], + defaultZoom = 1, translateExtent, }: UseD3ZoomParams): void => { const prevTransform = useRef({ x: 0, y: 0, zoom: 0 }); diff --git a/src/store/index.ts b/src/store/index.ts index 1e3e743a..c81c36d3 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -28,6 +28,7 @@ import { NodeDiffUpdate, FitViewParams, TranslateExtent, + SnapGrid, } from '../types'; type TransformXYK = { @@ -41,16 +42,6 @@ type NodeDimensionUpdate = { nodeElement: HTMLDivElement; }; -type SetMinMaxZoom = { - minZoom: number; - maxZoom: number; -}; - -type SetSnapGrid = { - snapToGrid: boolean; - snapGrid: [number, number]; -}; - type InitD3 = { zoomPane: Element; defaultPosition: [number, number]; @@ -85,7 +76,7 @@ export interface StoreModel { connectionPosition: XYPosition; snapToGrid: boolean; - snapGrid: [number, number]; + snapGrid: SnapGrid; nodesDraggable: boolean; nodesConnectable: boolean; @@ -124,11 +115,13 @@ export interface StoreModel { initD3: Action; - setMinMaxZoom: Action; + setMinZoom: Action; + setMaxZoom: Action; setTranslateExtent: Action; - setSnapGrid: Action; + setSnapToGrid: Action; + setSnapGrid: Action; setConnectionPosition: Action; @@ -187,7 +180,7 @@ export const storeModel: StoreModel = { connectionHandleType: 'source', connectionPosition: { x: 0, y: 0 }, - snapGrid: [16, 16], + snapGrid: [15, 15], snapToGrid: false, nodesDraggable: true, @@ -395,12 +388,19 @@ export const storeModel: StoreModel = { state.d3Initialised = true; }), - setMinMaxZoom: action((state, { minZoom, maxZoom }) => { + setMinZoom: action((state, minZoom) => { state.minZoom = minZoom; - state.maxZoom = maxZoom; if (state.d3Zoom) { - state.d3Zoom.scaleExtent([minZoom, maxZoom]); + state.d3Zoom.scaleExtent([minZoom, state.maxZoom]); + } + }), + + setMaxZoom: action((state, maxZoom) => { + state.minZoom = maxZoom; + + if (state.d3Zoom) { + state.d3Zoom.scaleExtent([state.minZoom, maxZoom]); } }), @@ -421,8 +421,11 @@ export const storeModel: StoreModel = { state.connectionHandleType = connectionHandleType; }), - setSnapGrid: action((state, { snapToGrid, snapGrid }) => { + setSnapToGrid: action((state, snapToGrid) => { state.snapToGrid = snapToGrid; + }), + + setSnapGrid: action((state, snapGrid) => { state.snapGrid = snapGrid; }), diff --git a/src/types/index.ts b/src/types/index.ts index 4fd58470..83307d6d 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -32,6 +32,8 @@ export interface Box extends XYPosition { y2: number; } +export type SnapGrid = [number, number]; + export interface Node { id: ElementId; position: XYPosition; @@ -214,7 +216,7 @@ export interface WrapNodeProps { isHidden?: boolean; isInitialized?: boolean; snapToGrid?: boolean; - snapGrid?: [number, number]; + snapGrid?: SnapGrid; isDragging?: boolean; }