Merge pull request #636 from tokens-studio/interact-behind-toolbar

Fixed not being able to drag nodes at same Y position as the toolbar

.changeset/proud-balloons-remember.md

@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-editor": patch
+---
+
+Fixed not being able to drag nodes at the same vertical position as the toolbar

packages/graph-editor/src/components/toolbar/toolbar.module.css

@@ -8,6 +8,18 @@
   background-color: var(--color-neutral-canvas-default-bg);
   color: var(--color-neutral-canvas-subtle-fg-default);
   box-shadow: 0 2px 10px var(--color-neutral-800);
+  pointer-events: auto;
+}
+
+.wrapper {
+  position: absolute;
+  top: var(--size-250);
+  left: 0;
+  right: 0;
+  display: grid;
+  place-items: center;
+  z-index: 99;
+  pointer-events: none;
 }
 
 .separator {

packages/graph-editor/src/editor/graph.tsx

@@ -36,6 +36,7 @@ import React, {
   useState,
 } from 'react';
 import ReactFlow from 'reactflow';
+import toolbarStyles from '../components/toolbar/toolbar.module.css';
 
 import groupNode from '../components/flow/nodes/groupNode.js';
 import noteNode from '../components/flow/nodes/noteNode.js';
@@ -812,17 +813,7 @@ export const EditorApp = React.forwardRef<
                   handleSelectNewNodeType={handleSelectNewNodeType}
                 />
               )}
-              <div
-                style={{
-                  position: 'absolute',
-                  top: 'var(--size-250)',
-                  left: 0,
-                  right: 0,
-                  display: 'grid',
-                  placeItems: 'center',
-                  zIndex: '99',
-                }}
-              >
+              <div className={toolbarStyles.wrapper}>
                 <GraphToolbar />
               </div>
               {props.children}