From edbf894350bc3aa47e8fe7d8fbd4dfe487055500 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christopher=20M=C3=B6ller?= <chrtze@gmail.com>
Date: Wed, 16 Nov 2022 13:49:15 +0100
Subject: [PATCH] feat(node-toolbar): change isActive to isVisible and
 implement default behavior

---
 .../vite-app/src/examples/NodeToolbar/CustomNode.tsx     | 4 ++--
 examples/vite-app/src/examples/NodeToolbar/index.tsx     | 9 ++++++++-
 packages/node-toolbar/src/NodeToolbar.tsx                | 8 ++++++--
 packages/node-toolbar/src/types.ts                       | 2 +-
 4 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/examples/vite-app/src/examples/NodeToolbar/CustomNode.tsx b/examples/vite-app/src/examples/NodeToolbar/CustomNode.tsx
index 221b0034..4f8ab270 100644
--- a/examples/vite-app/src/examples/NodeToolbar/CustomNode.tsx
+++ b/examples/vite-app/src/examples/NodeToolbar/CustomNode.tsx
@@ -1,10 +1,10 @@
 import { memo, FC } from 'react';
 import { Handle, Position, NodeProps, NodeToolbar } from 'reactflow';
 
-const CustomNode: FC<NodeProps> = ({ id, data, selected }) => {
+const CustomNode: FC<NodeProps> = ({ id, data }) => {
   return (
     <>
-      <NodeToolbar isActive={selected} nodeId={id} position={data.toolbarPosition}>
+      <NodeToolbar nodeId={id} isVisible={data.toolbarVisible} position={data.toolbarPosition}>
         <button>delete</button>
         <button>copy</button>
         <button>expand</button>
diff --git a/examples/vite-app/src/examples/NodeToolbar/index.tsx b/examples/vite-app/src/examples/NodeToolbar/index.tsx
index 13dba39b..4389873c 100644
--- a/examples/vite-app/src/examples/NodeToolbar/index.tsx
+++ b/examples/vite-app/src/examples/NodeToolbar/index.tsx
@@ -20,7 +20,7 @@ const initialNodes: Node[] = [
     id: '1',
     type: 'custom',
     data: { label: 'toolbar top', toolbarPosition: Position.Top },
-    position: { x: 0, y: 100 },
+    position: { x: 0, y: 0 },
     className: 'react-flow__node-default',
   },
   {
@@ -44,6 +44,13 @@ const initialNodes: Node[] = [
     position: { x: 400, y: 200 },
     className: 'react-flow__node-default',
   },
+  {
+    id: '5',
+    type: 'custom',
+    data: { label: 'toolbar always open', toolbarPosition: Position.Top, toolbarVisible: true },
+    position: { x: 0, y: 150 },
+    className: 'react-flow__node-default',
+  },
 ];
 
 const initialEdges: Edge[] = [
diff --git a/packages/node-toolbar/src/NodeToolbar.tsx b/packages/node-toolbar/src/NodeToolbar.tsx
index c8085ecf..50207dda 100644
--- a/packages/node-toolbar/src/NodeToolbar.tsx
+++ b/packages/node-toolbar/src/NodeToolbar.tsx
@@ -25,7 +25,9 @@ const nodeEqualityFn = (a: SelectedNode, b: SelectedNode) =>
   a?.selected === b?.selected &&
   a?.[internalsSymbol]?.z === b?.[internalsSymbol]?.z;
 
-const transformSelector = (state: ReactFlowState) => state.transform;
+const transformSelector = (state: ReactFlowState): Transform => state.transform;
+const selectedNodesCountSelector = (state: ReactFlowState): number =>
+  Array.from(state.nodeInternals.values()).filter((node) => node.selected).length;
 
 function getTransform(nodeRect: Rect, transform: Transform, position: Position, offset: number): string {
   // position === Position.Top
@@ -61,7 +63,7 @@ function NodeToolbar({
   children,
   className,
   style,
-  isActive,
+  isVisible,
   position = Position.Top,
   offset = 10,
   ...rest
@@ -69,6 +71,8 @@ function NodeToolbar({
   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 isActive = typeof isVisible === 'boolean' ? isVisible : node?.selected && selectedNodesCount === 1;
 
   if (!isActive || !node) {
     return null;
diff --git a/packages/node-toolbar/src/types.ts b/packages/node-toolbar/src/types.ts
index c8720df7..1e6576b6 100644
--- a/packages/node-toolbar/src/types.ts
+++ b/packages/node-toolbar/src/types.ts
@@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'react';
 
 export type NodeToolbarProps = HTMLAttributes<HTMLDivElement> & {
   nodeId: string;
-  isActive?: boolean;
+  isVisible?: boolean;
   position?: Position;
   offset?: number;
 };