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

Merge branch 'feat/node-toolbar' of github.com:wbkd/react-flow into feat/node-toolbar

Browse Source
This commit is contained in:
Christopher Möller
2022-11-16 13:55:55 +01:00
parent edbf894350 be8f22e5f3
commit 96e53e4408
16 changed files with 183 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/node-toolbar/src/NodeToolbar.tsx
+7 -6
View File
@@ -25,9 +25,11 @@ const nodeEqualityFn = (a: SelectedNode, b: SelectedNode) =>
a?.selected === b?.selected &&
a?.[internalsSymbol]?.z === b?.[internalsSymbol]?.z;
const transformSelector = (state: ReactFlowState): Transform => state.transform;
const selectedNodesCountSelector = (state: ReactFlowState): number =>
Array.from(state.nodeInternals.values()).filter((node) => node.selected).length;
const storeSelector = (state: ReactFlowState) => ({
transform: state.transform,
nodeOrigin: state.nodeOrigin,
selectedNodesCount: Array.from(state.nodeInternals.values()).filter((node) => node.selected).length,
});
function getTransform(nodeRect: Rect, transform: Transform, position: Position, offset: number): string {
// position === Position.Top
@@ -70,15 +72,14 @@ function NodeToolbar({
}: NodeToolbarProps) {
const nodeSelector = useCallback((state: ReactFlowState): SelectedNode => state.nodeInternals.get(nodeId), [nodeId]);
const node = useStore(nodeSelector, nodeEqualityFn);
const transform = useStore(transformSelector, shallow);
const selectedNodesCount = useStore(selectedNodesCountSelector);
const { transform, nodeOrigin, selectedNodesCount } = useStore(storeSelector, shallow);
const isActive = typeof isVisible === 'boolean' ? isVisible : node?.selected && selectedNodesCount === 1;
if (!isActive || !node) {
return null;
}
const nodeRect: Rect = getRectOfNodes([node]);
const nodeRect: Rect = getRectOfNodes([node], nodeOrigin);
const wrapperStyle: CSSProperties = {
transform: getTransform(nodeRect, transform, position, offset),