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

refacor(graphview): cleanup

Browse Source
This commit is contained in:
moklick
2020-08-02 18:55:15 +02:00
parent f6f3202b57
commit e0a2ceeab0
2 changed files with 16 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/container/EdgeRenderer/index.tsx
+3 -3
View File
@@ -7,8 +7,6 @@ import MarkerDefinitions from './MarkerDefinitions';
import { XYPosition, Position, Edge, Node, ElementId, HandleElement, Elements, ConnectionLineType } from '../../types'; import { XYPosition, Position, Edge, Node, ElementId, HandleElement, Elements, ConnectionLineType } from '../../types';
interface EdgeRendererProps { interface EdgeRendererProps {
width: number;
height: number;
edgeTypes: any; edgeTypes: any;
connectionLineType: ConnectionLineType; connectionLineType: ConnectionLineType;
connectionLineStyle?: CSSProperties; connectionLineStyle?: CSSProperties;
@@ -203,8 +201,10 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
const selectedElements = useStoreState((s) => s.selectedElements); const selectedElements = useStoreState((s) => s.selectedElements);
const nodesConnectable = useStoreState((s) => s.nodesConnectable); const nodesConnectable = useStoreState((s) => s.nodesConnectable);
const elementsSelectable = useStoreState((s) => s.elementsSelectable); const elementsSelectable = useStoreState((s) => s.elementsSelectable);
const width = useStoreState((state) => state.width);
const height = useStoreState((state) => state.height);
const { width, height, connectionLineStyle, connectionLineType, arrowHeadColor } = props; const { connectionLineStyle, connectionLineType, arrowHeadColor } = props;
if (!width) { if (!width) {
return null; return null;
src/container/GraphView/index.tsx
+13 -18
View File
@@ -1,4 +1,4 @@
import React, { useEffect, useRef, memo, CSSProperties, MouseEvent } from 'react'; import React, { useEffect, useRef, useCallback, memo, CSSProperties, MouseEvent } from 'react';
import { useStoreState, useStoreActions } from '../../store/hooks'; import { useStoreState, useStoreActions } from '../../store/hooks';
import NodeRenderer from '../NodeRenderer'; import NodeRenderer from '../NodeRenderer';
@@ -109,14 +109,12 @@ const GraphView = ({
}: GraphViewProps) => { }: GraphViewProps) => {
const zoomPane = useRef<HTMLDivElement>(null); const zoomPane = useRef<HTMLDivElement>(null);
const rendererNode = useRef<HTMLDivElement>(null); const rendererNode = useRef<HTMLDivElement>(null);
const width = useStoreState((s) => s.width); const d3Initialised = useStoreState((state) => state.d3Initialised);
const height = useStoreState((s) => s.height); const nodesSelectionActive = useStoreState((state) => state.nodesSelectionActive);
const d3Initialised = useStoreState((s) => s.d3Initialised);
const nodesSelectionActive = useStoreState((s) => s.nodesSelectionActive);
const setNodesSelection = useStoreActions((actions) => actions.setNodesSelection); const setNodesSelection = useStoreActions((actions) => actions.setNodesSelection);
const setOnConnect = useStoreActions((a) => a.setOnConnect); const setOnConnect = useStoreActions((actions) => actions.setOnConnect);
const setOnConnectStart = useStoreActions((a) => a.setOnConnectStart); const setOnConnectStart = useStoreActions((actions) => actions.setOnConnectStart);
const setOnConnectStop = useStoreActions((a) => a.setOnConnectStop); const setOnConnectStop = useStoreActions((actions) => actions.setOnConnectStop);
const setSnapGrid = useStoreActions((actions) => actions.setSnapGrid); const setSnapGrid = useStoreActions((actions) => actions.setSnapGrid);
const setNodesDraggable = useStoreActions((actions) => actions.setNodesDraggable); const setNodesDraggable = useStoreActions((actions) => actions.setNodesDraggable);
const setNodesConnectable = useStoreActions((actions) => actions.setNodesConnectable); const setNodesConnectable = useStoreActions((actions) => actions.setNodesConnectable);
@@ -126,14 +124,16 @@ const GraphView = ({
const fitView = useStoreActions((actions) => actions.fitView); const fitView = useStoreActions((actions) => actions.fitView);
const zoom = useStoreActions((actions) => actions.zoom); const zoom = useStoreActions((actions) => actions.zoom);
const selectionKeyPressed = useKeyPress(selectionKeyCode); const onZoomPaneClick = useCallback(() => {
const onZoomPaneClick = () => {
onPaneClick?.(); onPaneClick?.();
setNodesSelection({ isActive: false }); setNodesSelection({ isActive: false });
}; }, [onPaneClick]);
useResizeHandler(rendererNode); useResizeHandler(rendererNode);
useGlobalKeyHandler({ onElementsRemove, deleteKeyCode });
useElementUpdater(elements);
const selectionKeyPressed = useKeyPress(selectionKeyCode);
useD3Zoom({ useD3Zoom({
zoomPane, zoomPane,
@@ -192,7 +192,7 @@ const GraphView = ({
useEffect(() => { useEffect(() => {
setSnapGrid({ snapToGrid, snapGrid }); setSnapGrid({ snapToGrid, snapGrid });
}, [snapToGrid]); }, [snapToGrid, snapGrid]);
useEffect(() => { useEffect(() => {
setNodesDraggable(nodesDraggable); setNodesDraggable(nodesDraggable);
@@ -210,9 +210,6 @@ const GraphView = ({
setMinMaxZoom({ minZoom, maxZoom }); setMinMaxZoom({ minZoom, maxZoom });
}, [minZoom, maxZoom]); }, [minZoom, maxZoom]);
useGlobalKeyHandler({ onElementsRemove, deleteKeyCode });
useElementUpdater(elements);
return ( return (
<div className="react-flow__renderer" ref={rendererNode}> <div className="react-flow__renderer" ref={rendererNode}>
<NodeRenderer <NodeRenderer
@@ -228,8 +225,6 @@ const GraphView = ({
selectNodesOnDrag={selectNodesOnDrag} selectNodesOnDrag={selectNodesOnDrag}
/> />
<EdgeRenderer <EdgeRenderer
width={width}
height={height}
edgeTypes={edgeTypes} edgeTypes={edgeTypes}
onElementClick={onElementClick} onElementClick={onElementClick}
connectionLineType={connectionLineType} connectionLineType={connectionLineType}