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

refactor(elements): split edges and nodes

Browse Source
This commit is contained in:
moklick
2021-02-11 18:45:05 +01:00
parent 201a35dec2
commit ba5286a105
12 changed files with 166 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/container/EdgeRenderer/index.tsx
+3 -5
View File
@@ -2,7 +2,7 @@ import React, { memo, CSSProperties, useCallback } from 'react';
import { useStoreState } from '../../store/hooks';
import ConnectionLine from '../../components/ConnectionLine/index';
import { isEdge, isNode } from '../../utils/graph';
import { isEdge } from '../../utils/graph';
import MarkerDefinitions from './MarkerDefinitions';
import { getEdgePositions, getHandle, isEdgeVisible, getSourceTargetNodes } from './utils';
import {
@@ -169,7 +169,8 @@ const Edge = ({
const EdgeRenderer = (props: EdgeRendererProps) => {
const transform = useStoreState((state) => state.transform);
const elements = useStoreState((state) => state.elements);
const nodes = useStoreState((state) => state.nodes);
const edges = useStoreState((state) => state.edges);
const connectionNodeId = useStoreState((state) => state.connectionNodeId);
const connectionHandleId = useStoreState((state) => state.connectionHandleId);
const connectionHandleType = useStoreState((state) => state.connectionHandleType);
@@ -180,9 +181,6 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
const width = useStoreState((state) => state.width);
const height = useStoreState((state) => state.height);
const edges = elements.filter(isEdge);
const nodes = elements.filter(isNode);
if (!width) {
return null;
}
src/container/NodeRenderer/index.tsx
+3 -4
View File
@@ -1,6 +1,6 @@
import React, { memo, useMemo, ComponentType, MouseEvent } from 'react';
import { getNodesInside, isNode } from '../../utils/graph';
import { getNodesInside } from '../../utils/graph';
import { useStoreState, useStoreActions } from '../../store/hooks';
import { Node, NodeTypesType, WrapNodeProps, Edge } from '../../types';
interface NodeRendererProps {
@@ -27,11 +27,10 @@ const NodeRenderer = (props: NodeRendererProps) => {
const elementsSelectable = useStoreState((state) => state.elementsSelectable);
const width = useStoreState((state) => state.width);
const height = useStoreState((state) => state.height);
const elements = useStoreState((state) => state.elements);
const nodes = useStoreState((state) => state.nodes);
const batchUpdateNodeDimensions = useStoreActions((actions) => actions.batchUpdateNodeDimensions);
const viewportBox = { x: 0, y: 0, width, height };
const nodes = elements.filter(isNode);
const viewportBox = useMemo(() => ({ x: 0, y: 0, width, height }), [width, height]);
const visibleNodes = props.onlyRenderVisibleElements ? getNodesInside(nodes, viewportBox, transform, true) : nodes;
const transformStyle = useMemo(