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

refactor(noderenderer): add viewportBox to store

Browse Source
This commit is contained in:
moklick
2020-07-29 10:48:16 +02:00
parent 16707eaa99
commit f4d1af6589
2 changed files with 6 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/container/NodeRenderer/index.tsx
View File

@@ -72,8 +72,7 @@ const NodeRenderer = ({ onlyRenderVisibleNodes = true, ...props }: NodeRendererP
const nodes = useStoreState((s) => s.nodes);
const transform = useStoreState((s) => s.transform);
const selectedElements = useStoreState((s) => s.selectedElements);
const width = useStoreState((s) => s.width);
const height = useStoreState((s) => s.height);
const viewportBox = useStoreState((s) => s.viewportBox);
const nodesDraggable = useStoreState((s) => s.nodesDraggable);
const nodesConnectable = useStoreState((s) => s.nodesConnectable);
const elementsSelectable = useStoreState((s) => s.elementsSelectable);
@@ -81,9 +80,7 @@ const NodeRenderer = ({ onlyRenderVisibleNodes = true, ...props }: NodeRendererP
transform: `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})`,
};
const renderNodes = onlyRenderVisibleNodes
? getNodesInside(nodes, { x: 0, y: 0, width, height }, transform, true)
: nodes;
const renderNodes = onlyRenderVisibleNodes ? getNodesInside(nodes, viewportBox, transform, true) : nodes;
return (
<div className="react-flow__nodes" style={transformStyle}>

6
src/store/index.ts
View File

@@ -54,6 +54,7 @@ type SetSnapGrid = {
export interface StoreModel {
width: number;
height: number;
viewportBox: Computed<StoreModel, Rect>;
transform: Transform;
elements: Elements;
nodes: Computed<StoreModel, Node[]>;
@@ -136,10 +137,11 @@ export interface StoreModel {
export const storeModel: StoreModel = {
width: 0,
height: 0,
viewportBox: computed((state) => ({ x: 0, y: 0, width: state.width, height: state.height })),
transform: [0, 0, 1],
elements: [],
nodes: computed([(state) => state.elements], (elements) => elements.filter((el) => isNode(el)) as Node[]),
edges: computed([(state) => state.elements], (elements) => elements.filter((el) => isEdge(el)) as Edge[]),
nodes: computed((state) => state.elements.filter((el) => isNode(el)) as Node[]),
edges: computed((state) => state.elements.filter((el) => isEdge(el)) as Edge[]),
selectedElements: null,
selectedNodesBbox: { x: 0, y: 0, width: 0, height: 0 },